Merge remote-tracking branch 'origin/main' into fix/peer-deps

.changeset/breezy-bottles-listen.md

@@ -0,0 +1,6 @@
+---
+'@twilio-paste/combobox': patch
+'@twilio-paste/core': patch
+---
+
+[Combobox] Render the listbox in a portal to fix a bug where the contents of the listbox are cut off when it placed inside a scrolling container. Adds a new dependency on @radix-ui/react-use-rect.

.changeset/khaki-sloths-watch.md

@@ -0,0 +1,6 @@
+---
+'@twilio-paste/card': patch
+'@twilio-paste/core': patch
+---
+
+[Card] Update styles to align with new Paste Twilio theme

.changeset/lovely-rings-switch.md

@@ -0,0 +1,6 @@
+---
+'@twilio-paste/side-modal': patch
+'@twilio-paste/core': patch
+---
+
+[Side Modal] Update styles to align with new Paste Twilio theme

.codesandbox/ci.json

@@ -30,14 +30,17 @@
     "/packages/paste-core/components/data-grid",
     "/packages/paste-libraries/data-visualization",
     "/packages/paste-core/components/date-picker",
+    "/packages/paste-core/components/description-list",
     "/packages/paste-design-tokens",
     "/packages/paste-core/components/disclosure",
     "/packages/paste-core/primitives/disclosure",
     "/packages/paste-core/components/display-heading",
     "/packages/paste-core/components/display-pill-group",
     "/packages/paste-libraries/dropdown",
     "/packages/paste-core/components/file-picker",
+    "/packages/paste-core/components/file-uploader",
     "/packages/paste-core/layout/flex",
+    "/packages/paste-core/components/form",
     "/packages/paste-core/components/form-pill-group",
     "/packages/paste-core/layout/grid",
     "/packages/paste-core/components/heading",
@@ -50,6 +53,7 @@
     "/packages/paste-core/components/label",
     "/packages/paste-libraries/lexical",
     "/packages/paste-core/components/list",
+    "/packages/paste-core/primitives/listbox",
     "/packages/paste-core/layout/media-object",
     "/packages/paste-core/components/menu",
     "/packages/paste-core/primitives/menu",

.github/workflows/on_merge_to_main.yml

@@ -183,6 +183,8 @@ jobs:
           exitOnceUploaded: true
         env:
           STORYBOOK_GITHUB_SHA: ${{ github.sha }}
+          # https://github.com/storybookjs/builder-vite/issues/409#issuecomment-1199236279
+          NODE_OPTIONS: --max-old-space-size=6144
 
   # run this job first to create a single timestamped id for all percy batches on parallel machines
   percy-batch-id:

.github/workflows/on_pull_request.yml

@@ -421,6 +421,8 @@ jobs:
           exitOnceUploaded: true
         env:
           STORYBOOK_GITHUB_SHA: ${{ github.event.pull_request.head.sha }}
+          # https://github.com/storybookjs/builder-vite/issues/409#issuecomment-1199236279
+          NODE_OPTIONS: --max-old-space-size=6144
 
   pr-categorizer:
     name: Categorize the PR using labels

.storybook/RenderPerformanceProfiler.js → .storybook/RenderPerformanceProfiler.tsx

@@ -1,9 +1,10 @@
+/// <reference types="vite/client" />
 import React from 'react';
 import isChromatic from 'chromatic/isChromatic';
 import {version} from '../packages/paste-core/core-bundle/package.json';
 
 const trackRenderPerformance = (data) => {
-  const commitSha = process.env.STORYBOOK_GITHUB_SHA ? process.env.STORYBOOK_GITHUB_SHA : 'localdev';
+  const commitSha = import.meta.env.STORYBOOK_GITHUB_SHA ? import.meta.env.STORYBOOK_GITHUB_SHA : 'localdev';
 
   fetch('https://paste-data.netlify.app/.netlify/functions/create-component-perf-metric', {
     method: 'POST',

.storybook/gatsby.tsx

@@ -0,0 +1,5 @@
+import * as React from 'react';
+
+const Link: React.FC = ({children, ...props}) => <a {...props}>{children}</a>;
+
+export {Link};

.storybook/main.ts

@@ -0,0 +1,51 @@
+import type {StorybookConfig} from '@storybook/react-vite';
+import {mergeConfig} from 'vite';
+import path from 'path';
+
+const config: StorybookConfig = {
+  stories: [
+    '../packages/**/*.stories.@(js|jsx|ts|tsx|mdx)',
+    '../performance-benchmarks/**/*.stories.@(js|jsx|ts|tsx|mdx)',
+  ],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-a11y',
+    '@storybook/addon-interactions',
+    './addons/google-analytics/register',
+  ],
+  framework: {
+    name: '@storybook/react-vite',
+  },
+  features: {
+    interactionsDebugger: true,
+  },
+  staticDirs: ['./static'],
+  typescript: {
+    // enable type checking
+    check: true,
+  },
+  docs: {
+    autodocs: true,
+    defaultName: 'Docs',
+  },
+  async viteFinal(config, {configType}) {
+    const isDev = configType === 'DEVELOPMENT' && process.env.NODE_ENV !== 'test';
+    return mergeConfig(config, {
+      resolve: {
+        alias: {
+          gatsby: path.resolve(__dirname, './gatsby'),
+          'react-dom/client': path.resolve(__dirname, '../node_modules/react-dom/client'),
+          'react-dom': path.resolve(__dirname, '../node_modules/react-dom/profiling'),
+          'scheduler/tracing': path.resolve(__dirname, '../node_modules/scheduler/tracing-profiling'),
+        },
+        ...(isDev && {mainFields: ['main:dev', 'browser', 'module', 'main']}),
+      },
+      optimizeDeps: {
+        include: ['@storybook/addon-viewport', 'chromatic/isChromatic', '@emotion/react/jsx-dev-runtime'],
+      },
+    });
+  },
+};
+
+export default config;

.storybook/preview-head.html

@@ -33,3 +33,9 @@
   crossorigin="anonymous"
 />
 <link rel="stylesheet" href="https://assets.twilio.com/public_assets/paste-fonts/1.4.1/fonts.css" />
+<script>
+  window.global = window;
+  window.process = {
+    env: {},
+  };
+</script>

.storybook/preview.js → .storybook/preview.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import {action} from '@storybook/addon-actions';
 import {INITIAL_VIEWPORTS} from '@storybook/addon-viewport';
 import isChromatic from 'chromatic/isChromatic';
 import {StylingGlobals} from '@twilio-paste/styling-library';
@@ -169,3 +170,16 @@ export const parameters = {
     viewports: INITIAL_VIEWPORTS,
   },
 };
+
+// https://www.gatsbyjs.com/docs/how-to/testing/visual-testing-with-storybook/#manual-configuration
+
+global.___loader = {
+  enqueue: () => {},
+  hovering: () => {},
+};
+
+global.__BASE_PATH__ = '/';
+
+window.___navigate = (pathname) => {
+  action('NavigateTo:')(pathname);
+};

.vscode/component.code-snippets

@@ -24,7 +24,7 @@
     "prefix": "prindexp",
     "body": [
       "import * as React from 'react';",
-      "import * as PropTypes from 'prop-types';",
+      "import PropTypes from 'prop-types';",
       "import {Box} from '@twilio-paste/box';",
       "",
       "${1:prfcp}",

babel.config.js

@@ -28,9 +28,7 @@ const BASE_PLUGINS = [
   'macros',
   ['@babel/proposal-class-properties', {loose: true}],
   '@babel/proposal-object-rest-spread',
-  ['@babel/proposal-private-methods', {loose: true}],
   ['@babel/proposal-private-property-in-object', {loose: true}],
-  '@babel/plugin-transform-runtime',
   '@babel/plugin-proposal-optional-chaining',
 ];
 

cypress.config.ts

@@ -8,7 +8,7 @@ export default defineConfig({
       USE_CYPRESS_VRT: process.env.USE_CYPRESS_VRT,
     },
     viewportWidth: 1440,
-    viewportHeight: 1020,
+    viewportHeight: 1440,
     projectId: 'pe4h41',
     retries: {
       runMode: 2,

cypress/integration/sidebar-navigation/index.spec.ts

@@ -7,6 +7,7 @@ const sidebarNavigationDisclosures = [
   'content',
   'patterns',
   'components',
+  'combobox',
   'icon',
   'primitives',
   'tokens',
@@ -42,17 +43,8 @@ describe('Sidebar navigation', () => {
       // creates an alias for the content
       cy.get(`[data-cy="${contentSelector}"]`).as('currentContent');
 
-      cy.get('@currentContent')
-        // calls jquery attr() on the DOM element, returns the value of the data-level attribute
-        .invoke('attr', 'data-level')
-        .then((level) => {
-          return getTargetOffset(level);
-        })
-        .then((offset) => {
-          // scrollIntoView has offset arg, which takes top and left coordinates and scrolls that far after element is in view
-          cy.get('@currentContent').scrollIntoView({offset}).should('be.visible');
-          visited.add(buttonSelector);
-        });
+      cy.get('@currentContent').scrollIntoView().should('be.visible');
+      visited.add(buttonSelector);
     });
   });
 });
@@ -114,35 +106,3 @@ function cleanupOpenDisclosures(visited: Set<string>) {
     });
   });
 }
-
-/**
- * Helper that gets the coordinates of the disclosure content relative to the ul that wraps the disclosures
- * @param level {'0' | '1'} - the level the disclosure content is nested
- * @returns {top, left} - the content's coordinates
- */
-function getTargetOffset(level) {
-  if (Number(level) > 0) {
-    // creates an alias for the ul that wraps the disclosures
-    cy.get('@currentContent').parent().parent().as('navigationList');
-
-    return (
-      cy
-        .get('@navigationList')
-        // calls jquery offset(), returns top, left coordinates of the ul
-        .invoke('offset')
-        .then((containingOffset) => {
-          cy.get('@currentContent')
-            // calls jquery offset(), returns top, left coordinates of disclosure content
-            .invoke('offset')
-            .then((currentOffset) => {
-              // add the top values, which is the correct value for cypress to scroll
-              const top = containingOffset.top + currentOffset.top;
-              const left = currentOffset.left;
-              return {top, left};
-            });
-        })
-    );
-  }
-
-  return cy.get('@currentContent').invoke('offset');
-}

cypress/integration/sitemap-vrt/constants.ts

@@ -25,12 +25,16 @@ export const SITEMAP = [
   '/components/chat-log/',
   '/components/checkbox/',
   '/components/data-grid/',
+  '/components/description-list/',
   '/components/display-heading/',
   '/components/display-pill-group/',
   '/components/disclosure/',
   '/components/button/',
   '/components/button-group/',
   '/components/flex/',
+  '/components/file-picker/',
+  '/components/file-uploader/',
+  '/components/form/',
   '/components/combobox/',
   '/components/date-picker/',
   '/components/grid/',
@@ -85,6 +89,7 @@ export const SITEMAP = [
   '/foundations/content/word-list/',
   '/foundations/illustrations/',
   '/foundations/data-visualization/',
+  '/foundations/spacing-and-layout/',
   '/inclusive-design/',
   '/core/',
   '/foundations/content/product-style-guide/',
@@ -117,6 +122,7 @@ export const SITEMAP = [
   '/primitives/tabs-primitive/',
   '/primitives/text/',
   '/primitives/tooltip-primitive/',
+  '/primitives/listbox-primitive/',
   '/roadmap/',
   '/theme/',
   '/theme/changing-theme/',