Merge branch 'main' into feat/react-18

.changeset/selfish-melons-report.md

@@ -0,0 +1,26 @@
+---
+'@twilio-paste/switch': major
+'@twilio-paste/core': major
+---
+
+[Switch] Updated Switch component API to match other form components in Paste.
+
+- `SwitchContainer` has been replaced with `SwitchGroup`
+- `SwitchGroup` props changes:
+  - removes `id?: string`
+  - removes `label: ReactNode` - use the new `legend` prop instead.
+  - adds `legend: string | NonNullable<React.ReactNode>` to replace the old `label` prop.
+  - adds `errorText?: string | React.ReactNode` to handle error states.
+  - adds `orientation?: 'vertical' | 'horizontal;` to set children orientation.
+  - adds `i18nRequiredLabel?: string` to change the required label for internationalization.
+  - adds `name: string` to label the switch group for forms.
+  - adds `onChange?: (checked: boolean) => void` to handle changes to any child Switch's checked state in a single function.
+  - `helpText` prop now accepts a string.
+  - `required` prop is now optional.
+  - `element` prop default value changed to `SWITCH_GROUP` from `SWITCH_CONTAINER`
+- `Switch` props changes:
+  - `children` prop type changed to ` NonNullable<React.ReactNode>`
+  - adds `hasError?: boolean` to handle error states.
+  - adds `helpText?: string | React.React.Node` to add additional context to a switch.
+  - adds `checked?: boolean` to use the Switch in a controlled manner.
+  - adds `defaultChecked?: boolean` to set the default checked value in an uncontrolled manner.

.codesandbox/ci.json

@@ -15,6 +15,7 @@
     "/packages/paste-core/primitives/box",
     "/packages/paste-core/components/breadcrumb",
     "/packages/paste-core/components/button",
+    "/packages/paste-core/components/button-group",
     "/packages/paste-core/components/callout",
     "/packages/paste-core/components/card",
     "/packages/paste-core/components/chat-log",
@@ -55,6 +56,7 @@
     "/packages/paste-core/components/pagination",
     "/packages/paste-core/components/paragraph",
     "/packages/paste-core/components/popover",
+    "/packages/paste-core/components/radio-button-group",
     "/packages/paste-core/components/radio-group",
     "/packages/paste-libraries/react-textarea-autosize",
     "/packages/paste-libraries/reakit",

.danger/__tests__/major-core-missing-upgrade-guide.spec.ts → .danger/__tests__/major-missing-upgrade-guide.spec.ts

@@ -1,39 +1,54 @@
-import majorCoreMissingUpgradeGuideCheck, {
-  hasMajorCoreUpgrade,
-  getChangesetsWithMajorCoreUpgrade,
+import majorMissingUpgradeGuideCheck, {
+  hasMajorUpdate,
+  getChangesetsWithMajorUpdate,
   UPGRADE_GUIDE_PAGE_FILE,
-} from '../major-core-missing-upgrade-guide';
+  FAIL_MESSAGE,
+} from '../major-missing-upgrade-guide';
 declare const global: any;
 
-describe('hasMajorCoreUpgrade()', () => {
-  it('should not flag icon changesets', () => {
-    expect(hasMajorCoreUpgrade('./.danger/__fixtures__/changeset/heavy-peaches-repeat.md')).toEqual(false);
-  });
+const expectedFailureFiles = [
+  './.danger/__fixtures__/changeset/pretty-cameras-burn.md',
+  './.danger/__fixtures__/changeset/tiny-robot-hands.md',
+];
 
+describe('hasMajorUpdate()', () => {
   it('should not flag changesets with minor or patch updates to core', () => {
-    expect(hasMajorCoreUpgrade('./.danger/__fixtures__/changeset/pink-masks-walk.md')).toEqual(false);
+    expect(hasMajorUpdate('./.danger/__fixtures__/changeset/pink-masks-walk.md')).toEqual(false);
+  });
+
+  it('should not flag changesets with minor or patch updates to other packages', () => {
+    expect(hasMajorUpdate('./.danger/__fixtures__/changeset/heavy-peaches-repeat.md')).toEqual(false);
   });
 
   it('should flag changesets with major updates to core', () => {
-    expect(hasMajorCoreUpgrade('./.danger/__fixtures__/changeset/tiny-robot-hands.md')).toEqual(true);
+    expect(hasMajorUpdate('./.danger/__fixtures__/changeset/tiny-robot-hands.md')).toEqual(true);
+  });
+
+  it('should flag changesets with major updates to other packages', () => {
+    expect(hasMajorUpdate('./.danger/__fixtures__/changeset/pretty-cameras-burn.md')).toEqual(true);
   });
 });
 
-describe('getChangesetsWithMajorCoreUpgrade', () => {
-  it('should return an array of changesets that have a major release of core', () => {
+describe('getChangesetsWithMajorUpdate', () => {
+  it('should return an array of changesets that have a major update', () => {
     expect(
-      getChangesetsWithMajorCoreUpgrade([
+      getChangesetsWithMajorUpdate([
         './.danger/__fixtures__/changeset/heavy-peaches-repeat.md',
         './.danger/__fixtures__/changeset/pink-masks-walk.md',
         './.danger/__fixtures__/changeset/popular-cheetahs-punch.md',
         './.danger/__fixtures__/changeset/pretty-cameras-burn.md',
         './.danger/__fixtures__/changeset/tiny-robot-hands.md',
       ])
-    ).toEqual(['./.danger/__fixtures__/changeset/tiny-robot-hands.md']);
+    ).toEqual(expectedFailureFiles);
   });
 });
 
-describe('majorCoreMissingUpgradeGuideCheck()', () => {
+describe('majorMissingUpgradeGuideCheck()', () => {
+  const expectFail = (): void => {
+    expect(global.fail).toHaveBeenCalledTimes(1);
+    expect(global.fail).toHaveBeenCalledWith(FAIL_MESSAGE);
+  };
+
   beforeEach(() => {
     global.warn = jest.fn();
     global.message = jest.fn();
@@ -49,7 +64,7 @@ describe('majorCoreMissingUpgradeGuideCheck()', () => {
     global.danger = undefined;
   });
 
-  it('should fail for any modified changeset that sets a major core version if the upgrade guide is not also modifided', () => {
+  it('should fail for any modified changeset that sets an update version if the upgrade guide is not also modifided', () => {
     global.danger = {
       git: {
         modified_files: [
@@ -62,11 +77,11 @@ describe('majorCoreMissingUpgradeGuideCheck()', () => {
         created_files: [],
       },
     };
-    majorCoreMissingUpgradeGuideCheck();
-    expect(global.fail).toHaveBeenCalledTimes(1);
+    majorMissingUpgradeGuideCheck();
+    expectFail();
   });
 
-  it('should fail for any created changeset that that sets a major core version if the upgrade guide is not also modifided', () => {
+  it('should fail for any created changeset that that sets a major version if the upgrade guide is not also modifided', () => {
     global.danger = {
       git: {
         modified_files: [],
@@ -76,11 +91,11 @@ describe('majorCoreMissingUpgradeGuideCheck()', () => {
         ],
       },
     };
-    majorCoreMissingUpgradeGuideCheck();
-    expect(global.fail).toHaveBeenCalledTimes(1);
+    majorMissingUpgradeGuideCheck();
+    expectFail();
   });
 
-  it('should fail for any modified and created changeset that sets a major core version if the upgrade guide is not also modifided', () => {
+  it('should fail for any modified and created changeset that sets a major version if the upgrade guide is not also modifided', () => {
     global.danger = {
       git: {
         modified_files: [
@@ -94,22 +109,18 @@ describe('majorCoreMissingUpgradeGuideCheck()', () => {
         ],
       },
     };
-    majorCoreMissingUpgradeGuideCheck();
-    expect(global.fail).toHaveBeenCalledTimes(1);
+    majorMissingUpgradeGuideCheck();
+    expectFail();
   });
 
-  it('should not fail for any changeset that sets a major core versions but DOES include a change to the upgrade guide.', () => {
+  it('should not fail for any changeset that sets a major version but DOES include a change to the upgrade guide.', () => {
     global.danger = {
       git: {
-        modified_files: [
-          './.danger/__fixtures__/changeset/heavy-peaches-repeat.md',
-          './.danger/__fixtures__/changeset/pink-masks-walk.md',
-          UPGRADE_GUIDE_PAGE_FILE,
-        ],
+        modified_files: ['./.danger/__fixtures__/changeset/pink-masks-walk.md', UPGRADE_GUIDE_PAGE_FILE],
         created_files: ['./.danger/__fixtures__/changeset/popular-cheetahs-punch.md'],
       },
     };
-    majorCoreMissingUpgradeGuideCheck();
+    majorMissingUpgradeGuideCheck();
     expect(global.fail).not.toHaveBeenCalled();
   });
 });

.danger/major-missing-upgrade-guide.ts

@@ -0,0 +1,51 @@
+import * as fs from 'fs';
+import {getChangesetsFromFiles} from './utils';
+// you kind of have to treat Danger plugins as global?
+// https://danger.systems/js/usage/extending-danger.html#writing-your-plugin
+import {DangerDSLType} from 'danger/distribution/dsl/DangerDSL';
+declare const danger: DangerDSLType;
+export declare function fail(message: string): void;
+
+/** location in the repo where the upgrade guide lives */
+export const UPGRADE_GUIDE_PAGE_FILE = 'packages/paste-website/src/pages/core/upgrade-guide.mdx';
+
+export const FAIL_MESSAGE = `You have marked a Paste package as a MAJOR update via changeset, but have not provided a corresponding [upgrade guide](https://paste.twilio.design/core/upgrade-guide) entry.
+Please update the guide to inform our users what to do in response to this major update to Paste.`;
+
+/**
+ * Check if the changeset file contents include a mention of a package major update
+ *
+ * @param {string} filePath
+ * @return {*}
+ */
+export const hasMajorUpdate = (filePath: string) => {
+  const fileContent = fs.readFileSync(filePath).toString();
+  return /\@twilio-paste\/\S+: major/.test(fileContent);
+};
+
+/**
+ * Utility to return a list of changeset files that have listed a package as needing a major update
+ *
+ * @param {string[]} touchedChangesets
+ * @return {*}  {string[]}
+ */
+export const getChangesetsWithMajorUpdate = (touchedChangesets: string[]): string[] => {
+  return touchedChangesets.filter(hasMajorUpdate);
+};
+
+/**
+ * This is a Danger plugin that will fail if you have a changeset that sets a major version
+ * update of a @twilio-paste/* package but do not also modify the Update Guide in the website.
+ */
+export default () => {
+  const modifiedChangeSets = getChangesetsFromFiles([...danger.git.modified_files, ...danger.git.created_files]);
+  if (modifiedChangeSets.length === 0) return;
+
+  const changesetsWithMajorUpdate = getChangesetsWithMajorUpdate(modifiedChangeSets);
+  if (changesetsWithMajorUpdate.length === 0) return;
+
+  const upgradeGuideChanged = danger.git.modified_files.includes(UPGRADE_GUIDE_PAGE_FILE);
+  if (upgradeGuideChanged) return;
+
+  fail(FAIL_MESSAGE);
+};

.github/workflows/on_pull_request.yml

@@ -229,27 +229,26 @@ jobs:
           restore-keys: |
             ${{ runner.os }}-yarn
 
-      - name: Node modules cache
-        uses: actions/cache@v2
-        id: node_modules_cache_id
-        with:
-          path: |
-            node_modules
-            */*/node_modules
-          key: ${{ runner.os }}-${{ hashFiles('**/yarn.lock') }}
-
+      # Note: Yarn cahce has been removed from the following step
+      # since we need to change the React version installed
       - name: Install Dependencies
-        if: steps.yarn_cache_id.outputs.cache-hit != 'true' || steps.node_modules_cache_id.outputs.cache-hit != 'true'
         run: yarn install --immutable
 
+      - name: Install React 16
+        run: |
+          yarn add @types/react@^16.0.0 react@^16.8.6 react-dom@^16.8.6
+          yarn set resolution react@npm:^17.0.2 ^16.8.6
+          yarn set resolution @types/react@npm:^17.0.31 ^16.0.0
+          yarn set resolution react-dom@npm:^17.0.2 ^16.8.6
+
       - name: Download build artifacts
         uses: actions/download-artifact@v2
         with:
           name: compiled-js-and-types
           path: packages/
 
       - name: Run tests
-        run: yarn test:react-16
+        run: yarn test
 
   storybook_tests:
     name: Storybook test runner

.gitignore

@@ -71,7 +71,6 @@ out/
 
 .jest-coverage
 .jest-cache
-.jest-cache-react-16
 **/lib/*
 **/dist/*
 packages/**/docs

.storybook/main.js

@@ -1,8 +1,7 @@
-const DirectoryNamedWebpackPlugin = require('directory-named-webpack-plugin');
 const path = require('path');
 
 module.exports = {
-  stories: ['../packages/**/*.stories.mdx', '../packages/**/*.stories.@(js|jsx|ts|tsx)'],
+  stories: ['../packages/**/*.stories.@(js|jsx|ts|tsx|mdx)'],
   addons: [
     '@storybook/addon-links',
     '@storybook/addon-essentials',
@@ -63,13 +62,6 @@ module.exports = {
   },
 
   webpackFinal: async (config) => {
-    const customPlugins = [
-      new DirectoryNamedWebpackPlugin({honorPackage: ['main:dev', 'main'], exclude: /node_modules/}),
-    ];
-
-    config.resolve.plugins =
-      config.resolve.plugins == null ? customPlugins : [...config.resolve.plugins, ...customPlugins];
-
     // Need to custom alias react-dom and scheduler for component profiling in production
     // mode. Without doing so, no React profiling data can be extracted from stories
     // When they are deployed.
@@ -82,6 +74,9 @@ module.exports = {
     };
     config.resolve.alias = config.resolve.alias == null ? customAlias : {...config.resolve.alias, ...customAlias};
 
+    // FIX: Tell Storybook to look at dev files if available
+    config.resolve.mainFields = ['main:dev', 'browser', 'module', 'main'];
+
     return config;
   },
 };

cypress/integration/filter-group-examples/index.spec.ts

@@ -94,11 +94,6 @@ describe('Custom date/time pattern example', () => {
     cy.get('@filterGroupWrapper').find('tr').should('have.length', 3);
   });
 
-  it('opens the popover when click the button', () => {
-    cy.get('@dateTimePopoverButton').click();
-    cy.get('[data-cy="custom-date-popover"]').should('be.visible');
-  });
-
   describe('Empty state', () => {
     it('shows the empty state when search returns no results', () => {
       cy.get('@filterGroupWrapper').find('tr').should('have.length', 8);