diff --git a/.eslintrc.js b/.eslintrc.js index d85c656232..d0f4c47f30 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -96,4 +96,12 @@ module.exports = { curly: 'error', radix: 'error', }, + overrides: [ + { + files: ['**/*.stories.tsx'], + rules: { + 'react-hooks/rules-of-hooks': 'off', + }, + }, + ], }; diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md index 3c55940e45..466089b906 100644 --- a/.github/PULL_REQUEST_TEMPLATE.md +++ b/.github/PULL_REQUEST_TEMPLATE.md @@ -20,7 +20,7 @@ Optional breaking changes message. If your PR includes breaking changes. It is e ## Checklist -- [ ] MDX documentation adheres to Canvas Kit's [Documentation Guidelines](https://workday.github.io/canvas-kit/?path=/docs/guides-documentation-guidelines--page) +- [ ] MDX documentation adheres to Canvas Kit's [Documentation Guidelines](https://workday.github.io/canvas-kit/?path=/docs/guides-documentation-guidelines--docs) - [ ] Label `ready for review` has been added to PR ## For the Reviewer diff --git a/.github/labeler.yml b/.github/labeler.yml deleted file mode 100644 index e674dd163f..0000000000 --- a/.github/labeler.yml +++ /dev/null @@ -1,3 +0,0 @@ -ready for review: - - changed-files: - - any-glob-to-any-file: ['yarn.lock'] diff --git a/.github/reviewer-lottery.yml b/.github/reviewer-lottery.yml deleted file mode 100644 index 39fe4169ed..0000000000 --- a/.github/reviewer-lottery.yml +++ /dev/null @@ -1,10 +0,0 @@ -groups: - - name: dse # name of the group - reviewers: 1 # how many reviewers do you want to assign? - internal_reviewers: 1 # how many reviewers do you want to assign when the PR author belongs to this group? - usernames: # github usernames of the reviewers - - NicholasBoll - - alanbsmith - - mannycarrera4 - - josh-bagwell - - RayRedGoose diff --git a/.github/workflows/canary.yml b/.github/workflows/canary.yml index d1542c5e7c..18f0f8465a 100644 --- a/.github/workflows/canary.yml +++ b/.github/workflows/canary.yml @@ -21,19 +21,21 @@ jobs: - uses: Workday/canvas-kit-actions/install@v1 with: - node_version: 16.x + node_version: 18.x ## Build Storybook and extract component stories for Storybook aggregation. This will be used ## for Chromatic rebaselining and publishing to GH Pages. Should be before `yarn build` since ## built assets mess up this command - # removed yarn sb extract docs docs/stories.json because we were exceeding limit in CI, add back in once we find more space - name: Build Storybook run: | yarn build-storybook --quiet + yarn sb extract docs docs/stories.json ## Build for packaging. - name: Build run: yarn build + env: + TSP_SKIP_CACHE: true ## Publish prerelease to npm. Must be run after a build - name: Publish diff --git a/.github/workflows/dist-tag.yaml b/.github/workflows/dist-tag.yaml index 689d707897..1493c4cf76 100644 --- a/.github/workflows/dist-tag.yaml +++ b/.github/workflows/dist-tag.yaml @@ -22,7 +22,7 @@ jobs: - uses: Workday/canvas-kit-actions/install@v1 with: - node_version: 16.x + node_version: 18.x - name: Check packages run: node utils/dist-tag.mjs diff --git a/.github/workflows/forward-merge.yml b/.github/workflows/forward-merge.yml index 09fa97fdc6..97c371d4bd 100644 --- a/.github/workflows/forward-merge.yml +++ b/.github/workflows/forward-merge.yml @@ -94,7 +94,7 @@ jobs: - uses: Workday/canvas-kit-actions/install@v1 with: - node_version: 16.x + node_version: 18.x ## A `yarn bump` will create a commit and a tag. We need to set up the git user to do this. ## We'll make that user be the github-actions user. @@ -146,11 +146,8 @@ jobs: # ignoreLastBuildOnBranch: ${{ needs.get-branch-names.outputs.next-branch }} # debug: true - - name: Start Server - run: npx http-server docs -p 9001 & npx wait-on http://localhost:9001 - - name: Integration tests - run: yarn cypress run --record --parallel --env skip_storybook_test=true # skip the Storybook test during forward merges + run: yarn cypress run --component --record --parallel env: # Github Actions doesn't support encryption on forks # If these keys become compromised, we will rotate and disable these features diff --git a/.github/workflows/label.yml b/.github/workflows/label.yml deleted file mode 100644 index 0ef0991693..0000000000 --- a/.github/workflows/label.yml +++ /dev/null @@ -1,22 +0,0 @@ -# This workflow will triage pull requests and apply a label based on the -# paths that are modified in the pull request. -# -# To use this workflow, you will need to set up a .github/labeler.yml -# file with configuration. For more information, see: -# https://github.com/actions/labeler - -name: Labeler -on: [pull_request_target] - -jobs: - label: - runs-on: ubuntu-latest - permissions: - contents: read - pull-requests: write - - steps: - - uses: actions/labeler@v4 - with: - repo-token: '${{ secrets.GITHUB_TOKEN }}' - configuration-path: '.github/labeler.yml' diff --git a/.github/workflows/pull-request.yml b/.github/workflows/pull-request.yml index 5c11e59d46..5289963d65 100644 --- a/.github/workflows/pull-request.yml +++ b/.github/workflows/pull-request.yml @@ -13,7 +13,7 @@ jobs: - uses: Workday/canvas-kit-actions/install@v1 with: - node_version: 16.x + node_version: 18.x check: runs-on: ubuntu-latest @@ -24,7 +24,7 @@ jobs: - uses: Workday/canvas-kit-actions/install@v1 with: - node_version: 16.x + node_version: 18.x # Keep steps separate for Github Actions annotation matching: https://github.com/actions/setup-node/blob/83c9f7a7df54d6b57455f7c57ac414f2ae5fb8de/src/setup-node.ts#L26-L33 - name: Lint @@ -48,7 +48,7 @@ jobs: - uses: Workday/canvas-kit-actions/install@v1 with: - node_version: 16.x + node_version: 18.x - name: Build Storybook run: yarn build-storybook --quiet @@ -71,7 +71,7 @@ jobs: - uses: Workday/canvas-kit-actions/install@v1 with: - node_version: 16.x + node_version: 18.x - name: Restore Build uses: actions/cache@v3 @@ -102,7 +102,7 @@ jobs: - uses: Workday/canvas-kit-actions/install@v1 with: - node_version: 16.x + node_version: 18.x - name: Restore Build uses: actions/cache@v3 @@ -110,11 +110,8 @@ jobs: path: docs key: ${{ runner.os }}-build-${{ github.sha }} - - name: Start Server - run: npx http-server docs -p 9001 & npx wait-on http://localhost:9001 - - name: Integration tests - run: yarn cypress run --record --parallel + run: yarn cypress run --component --record --parallel env: # Github Actions doesn't support encryption on forks # If these keys become compromised, we will rotate and disable these features diff --git a/.github/workflows/release-major.yml b/.github/workflows/release-major.yml index b6f8b85212..4ff11c8e95 100644 --- a/.github/workflows/release-major.yml +++ b/.github/workflows/release-major.yml @@ -34,7 +34,7 @@ jobs: - uses: Workday/canvas-kit-actions/install@v1 with: - node_version: 16.x + node_version: 18.x # Run the release job to publish the next major version to npm - uses: Workday/canvas-kit-actions/release@v1 diff --git a/.github/workflows/release-minor.yml b/.github/workflows/release-minor.yml index 514077cd93..a0e0d3d820 100644 --- a/.github/workflows/release-minor.yml +++ b/.github/workflows/release-minor.yml @@ -19,7 +19,7 @@ jobs: - uses: Workday/canvas-kit-actions/install@v1 with: - node_version: 16.x + node_version: 18.x - uses: Workday/canvas-kit-actions/release@v1 with: diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml index 71bf3433fd..3a0e33d080 100644 --- a/.github/workflows/release.yml +++ b/.github/workflows/release.yml @@ -32,7 +32,7 @@ jobs: - uses: Workday/canvas-kit-actions/install@v1 with: - node_version: 16.x + node_version: 18.x - uses: Workday/canvas-kit-actions/release@v1 with: diff --git a/.github/workflows/reviewer-lottery.yml b/.github/workflows/reviewer-lottery.yml deleted file mode 100644 index cb614d845e..0000000000 --- a/.github/workflows/reviewer-lottery.yml +++ /dev/null @@ -1,15 +0,0 @@ -name: Reviewer Lottery - -on: - pull_request_target: - types: [labeled] - -jobs: - assign: - if: github.event.label.name == 'ready for review' - runs-on: ubuntu-latest - steps: - - uses: actions/checkout@v2 - - uses: uesteibar/reviewer-lottery@v2 - with: - repo-token: ${{ secrets.GITHUB_TOKEN }} diff --git a/.storybook/main.js b/.storybook/main.ts similarity index 64% rename from .storybook/main.js rename to .storybook/main.ts index 3a2be1e3f7..388eada927 100644 --- a/.storybook/main.js +++ b/.storybook/main.ts @@ -1,20 +1,19 @@ const path = require('node:path'); -const createCompiler = require('@storybook/addon-docs/mdx-compiler-plugin'); +const remarkGfm = require('remark-gfm').default; const modulesPath = path.resolve(__dirname, '../modules'); const getSpecifications = require('../modules/docs/utils/get-specifications'); +import {StorybookConfig} from '@storybook/react-webpack5'; const {createDocProgram} = require('../modules/docs/docgen/createDocProgram'); const processDocs = process.env.SKIP_DOCGEN !== 'true'; const Doc = createDocProgram(); -module.exports = { - stories: [ - '../modules/docs/mdx/**/*.mdx', - '../modules/**/*.stories.mdx', - '../modules/**/stories*.@(js|jsx|ts|tsx)', - ], +const config: StorybookConfig = { + framework: '@storybook/react-webpack5', + staticDirs: ['../public'], + stories: ['../modules/**/mdx/**/*.mdx', '../modules/**/*.stories.@(js|jsx|ts|tsx)'], addons: [ { name: '@storybook/addon-essentials', @@ -24,18 +23,35 @@ module.exports = { }, './readme-panel/preset.js', '@storybook/addon-storysource', + { + name: '@storybook/addon-docs', + options: { + mdxPluginOptions: { + mdxCompileOptions: { + remarkPlugins: [remarkGfm], + }, + }, + }, + }, ], + core: { + builder: '@storybook/builder-webpack5', + disableTelemetry: true, + }, + docs: { + autodocs: 'tag', + defaultName: 'Docs', + }, typescript: { - skipBabel: true, check: false, reactDocgen: false, // we'll handle this ourselves }, - webpackFinal: async (config, {configType}) => { + webpackFinal: async config => { // Get the specifications object and replace with a real object in the spec.ts file if (processDocs) { const specs = await getSpecifications(); - config.module.rules.push({ + config.module?.rules?.push({ test: /.ts$/, include: [path.resolve(__dirname, '../modules/docs')], use: [ @@ -50,10 +66,10 @@ module.exports = { }); // Load the source code of story files to display in docs. - config.module.rules.push({ - test: /stories.*\.tsx?$/, + config.module?.rules?.push({ + test: /\.stories\.tsx?$/, include: [modulesPath], - loaders: [ + use: [ { loader: require.resolve('@storybook/source-loader'), options: {parser: 'typescript'}, @@ -62,12 +78,12 @@ module.exports = { enforce: 'pre', }); - config.module.rules.push({ + config.module?.rules?.push({ test: /.+\.tsx?$/, include: [modulesPath], exclude: /examples|stories|spec|codemod|docs/, - loaders: [ - // loaders are run in reverse order. style-transform-loader needs to be done first + use: [ + // loaders are run in reverse order. symbol-doc-loader needs to be done first { loader: path.resolve(__dirname, 'symbol-doc-loader'), options: { @@ -94,9 +110,11 @@ module.exports = { * These warnings relate to this open GitHub issue: https://github.com/microsoft/TypeScript/issues/39436 * If you no longer see these warnings when this is config is removed, you can safely delete this config. */ - config.module.noParse = [require.resolve('typescript/lib/typescript.js')]; + if (config.module) { + config.module.noParse = [require.resolve('typescript/lib/typescript.js')]; + } - config.module.rules.push({ + config.module?.rules?.push({ test: /\.mdx?$/, include: [path.resolve(__dirname, '..')], exclude: [/node_modules/], @@ -107,12 +125,9 @@ module.exports = { ], }); - config.module.rules.push({ + config.module?.rules?.push({ test: /\.mdx?$/, include: [path.resolve(__dirname, '..')], - // Don't replace `` with Storybook tags in the - // documentation guidelines - exclude: [/node_modules/, /DOCUMENTATION_GUIDELINES/], use: [ { loader: path.resolve(__dirname, 'mdx-code-block-rewrite'), @@ -121,10 +136,10 @@ module.exports = { }); // Load the whole example code of story files to display in docs. - config.module.rules.push({ - test: /examples\/.*\.tsx?$/, + config.module?.rules?.push({ + test: /\/examples\/.*\.tsx?$/, include: [modulesPath], - loaders: [ + use: [ { loader: path.resolve(__dirname, 'whole-source-loader'), }, @@ -132,36 +147,16 @@ module.exports = { enforce: 'pre', }); - /** - * Added this because Storybook 6.3 is on emotion 10, so we rewrote the imports to point to emotion 11 - * https://github.com/storybookjs/storybook/issues/13145 - */ - config.resolve = { - ...config.resolve, - alias: { - ...config.resolve.alias, - }, - }; - - // Update @storybook/addon-docs webpack rules to load all .mdx files in storybook - const mdxRule = config.module.rules.find(rule => rule.test.toString() === /\.mdx$/.toString()); - mdxRule.use.find(loader => loader.loader.includes('mdx1-csf')).options['compilers'] = [ - createCompiler({}), - ]; - return config; }, babel: async options => ({ ...options, - plugins: [ - ...options.plugins, - '@babel/plugin-transform-modules-commonjs', - // Needed temporarily until https://github.com/storybookjs/storybook/issues/14805 is resolved - ['@babel/plugin-proposal-private-property-in-object', {loose: true}], - ], + plugins: [...(options.plugins as []), '@babel/plugin-transform-modules-commonjs'], presets: [ - ...options.presets, + ...(options.presets as []), ['@babel/preset-react', {runtime: 'classic'}, 'react-16-backwards-compatible-override'], ], }), }; + +export default config; diff --git a/.storybook/manager-head.html b/.storybook/manager-head.html index 7b2da7d736..7fb58ec4ab 100644 --- a/.storybook/manager-head.html +++ b/.storybook/manager-head.html @@ -1,6 +1,9 @@ - +