diff --git a/.eslintrc b/.eslintrc index 70e7e5322c17..73f058d9454c 100644 --- a/.eslintrc +++ b/.eslintrc @@ -238,6 +238,11 @@ }], "jsdoc/require-returns": "error", "jsdoc/require-param-description": "error", + "jsdoc/tag-lines": [ + "error", + "any", + { "startLines": 1 } + ], "jsdoc/valid-types": "error", "eslint-comments/no-unused-disable": "error", "eslint-comments/require-description": "error", @@ -323,16 +328,16 @@ ], "extends": [ "plugin:@typescript-eslint/recommended", - "plugin:@typescript-eslint/recommended-requiring-type-checking" + "plugin:@typescript-eslint/recommended-type-checked" ], "parser": "@typescript-eslint/parser", "parserOptions": { + "warnOnUnsupportedTypeScriptVersion": false, "project": [ "./packages/*/tsconfig.json" ] }, "rules": { - "@typescript-eslint/no-duplicate-imports": "error", "@typescript-eslint/no-shadow": ["error", { "ignoreOnInitialization": true @@ -606,7 +611,7 @@ { "files": [ "packages/commander/**/*.ts", - "packages/fonts/scripts/**/*.js", + "packages/fonts/scripts/**/*.ts", "packages/migration/scripts/**/*.js", "packages/templates/scripts/**/*.js", "packages/text-sets/scripts/**/*.js" @@ -635,7 +640,7 @@ "packages/story-editor/src/karma-tests.cjs", "packages/eslint-import-resolver/**/*.cjs", "packages/jest-resolver/**/*.cjs", - "packages/fonts/**/*.js", + "packages/fonts/**/*.ts", "packages/commander/**/*.ts", "packages/migration/scripts/**/*.js", "packages/templates/scripts/**/*.js", diff --git a/.github/dependabot.yml b/.github/dependabot.yml index 4fc59810079a..31e8d302e8fa 100644 --- a/.github/dependabot.yml +++ b/.github/dependabot.yml @@ -3,7 +3,7 @@ updates: - package-ecosystem: github-actions directory: '/' schedule: - interval: weekly + interval: monthly open-pull-requests-limit: 10 labels: - Dependencies @@ -11,37 +11,47 @@ updates: - package-ecosystem: npm directory: '/' schedule: - interval: weekly - open-pull-requests-limit: 10 + interval: monthly + open-pull-requests-limit: 15 labels: - Dependencies - JavaScript + groups: + wp-packages: + patterns: + - '@wordpress/*' + exclude-patterns: + - '@wordpress/element' + storybook: + patterns: + - 'storybook' + - '@storybook/*' + typescript-eslint: + patterns: + - '@typescript-eslint/*' ignore: # styled-components is not yet compatible. - dependency-name: 'stylis-plugin-rtl' versions: - '>= 2' - # Package is ESM-only, can't use it just yet. - - dependency-name: 'markdown-table' + # Not all plugins are compatible yet + - dependency-name: 'rollup' versions: - '>= 3' - # Package is ESM-only, can't use it just yet. - - dependency-name: 'got' + # We have not yet upgraded to React 18. + - dependency-name: 'react' versions: - - '>= 12' - - # Best updated manually as they have very frequent updates. - - dependency-name: '@storybook/*' - - # Best updated manually as they have very frequent updates. - - dependency-name: '@wordpress/*' + - '>= 118' + - dependency-name: 'react-dom' + versions: + - '>= 118' - package-ecosystem: composer directory: '/' schedule: - interval: weekly + interval: monthly open-pull-requests-limit: 10 labels: - Dependencies diff --git a/.github/workflows/add-milestone.yml b/.github/workflows/add-milestone.yml index 1ded810a6c92..0dc55cda0c83 100644 --- a/.github/workflows/add-milestone.yml +++ b/.github/workflows/add-milestone.yml @@ -27,7 +27,7 @@ jobs: if: github.event.pull_request.merged == true steps: - name: Harden Runner - uses: step-security/harden-runner@1f99358870fe1c846a3ccba386cc2b2246836776 + uses: step-security/harden-runner@55d479fb1c5bcad5a4f9099a5d9f37c8857b2845 with: disable-sudo: true egress-policy: block @@ -62,7 +62,7 @@ jobs: RELEASE_ID: ${{ steps.release.outputs.release_id }} - name: Retrieve linked issues - uses: actions/github-script@98814c53be79b1d30f795b907e553d8679345975 + uses: actions/github-script@d7906e4ad0b1822421a7e6a35d5ca353c962f410 id: linked-issues with: script: | diff --git a/.github/workflows/build-and-deploy.yml b/.github/workflows/build-and-deploy.yml index 3db56f90337b..8947269d2ed6 100644 --- a/.github/workflows/build-and-deploy.yml +++ b/.github/workflows/build-and-deploy.yml @@ -83,7 +83,7 @@ jobs: github.event.pull_request.user.login != 'dependabot[bot]' steps: - name: Harden Runner - uses: step-security/harden-runner@1f99358870fe1c846a3ccba386cc2b2246836776 + uses: step-security/harden-runner@55d479fb1c5bcad5a4f9099a5d9f37c8857b2845 with: disable-file-monitoring: true egress-policy: block @@ -98,12 +98,13 @@ jobs: packagist.org:443 registry.npmjs.org:443 storage.googleapis.com:443 + 54.185.253.63:443 - name: Checkout - uses: actions/checkout@8f4b7f84864484a7bf31766abe9204da3cbe65b3 + uses: actions/checkout@c85c95e3d7251135ab7dc9ce3241c5835cc595a9 - name: Setup Node - uses: actions/setup-node@64ed1c7eab4cce3362f8c340dee64e5eaeef8f7c + uses: actions/setup-node@e33196f7422957bea03ed53f6fbb155025ffc7b8 with: node-version-file: '.nvmrc' cache: npm @@ -128,21 +129,21 @@ jobs: github.event.pull_request.user.login != 'dependabot[bot]' steps: - name: Harden Runner - uses: step-security/harden-runner@1f99358870fe1c846a3ccba386cc2b2246836776 + uses: step-security/harden-runner@55d479fb1c5bcad5a4f9099a5d9f37c8857b2845 with: egress-policy: audit # TODO: change to 'egress-policy: block' after couple of runs - name: Checkout - uses: actions/checkout@8f4b7f84864484a7bf31766abe9204da3cbe65b3 + uses: actions/checkout@c85c95e3d7251135ab7dc9ce3241c5835cc595a9 - name: Setup Node - uses: actions/setup-node@64ed1c7eab4cce3362f8c340dee64e5eaeef8f7c + uses: actions/setup-node@e33196f7422957bea03ed53f6fbb155025ffc7b8 with: node-version-file: '.nvmrc' cache: npm - name: Setup PHP - uses: shivammathur/setup-php@d30ad8b1843ace22e6698ab99bbafaa747b6bd0d + uses: shivammathur/setup-php@4bd44f22a98a19e0950cbad5f31095157cc9621b with: php-version: '8.0' coverage: none @@ -151,7 +152,7 @@ jobs: - name: Install dependencies run: npm ci env: - PUPPETEER_SKIP_CHROMIUM_DOWNLOAD: true + PUPPETEER_SKIP_DOWNLOAD: true - name: Install PHP dependencies uses: ramsey/composer-install@83af392bf5f031813d25e6fe4cd626cdba9a2df6 @@ -161,7 +162,7 @@ jobs: - name: Setup Bun uses: oven-sh/setup-bun@4573031972107e0af692492ee967d9022deafd7b with: - bun-version: latest + bun-version: '0.5.9' - name: Build plugin run: | @@ -183,12 +184,12 @@ jobs: # Upload ZIP file to GCS for use in QA environment. - name: Authenticate - uses: google-github-actions/auth@ef5d53e30bbcd8d0836f4288f5e50ff3e086997d + uses: google-github-actions/auth@35b0e87d162680511bf346c299f71c9c5c379033 with: credentials_json: ${{ secrets.GCP_SA_KEY }} - name: Setup Cloud SDK - uses: google-github-actions/setup-gcloud@62d4898025f6041e16b1068643bfc5a696863587 + uses: google-github-actions/setup-gcloud@e30db14379863a8c79331b04a9969f4c1e225e0b with: project_id: ${{ secrets.GCP_PROJECT_ID }} @@ -201,7 +202,7 @@ jobs: - name: Check if a comment was already made id: find-comment - uses: peter-evans/find-comment@034abe94d3191f9c89d870519735beae326f2bdb + uses: peter-evans/find-comment@a54c31d7fa095754bfef525c0c8e5e5674c4b4b1 with: issue-number: ${{ github.event.pull_request.number }} comment-author: googleforcreators-bot @@ -218,6 +219,7 @@ jobs: id: get-comment-body # Setting a multi-line output requires escaping line-feeds. See . run: | + EOF=$(dd if=/dev/urandom bs=15 count=1 status=none | base64) echo 'COMMENT_BODY<> $GITHUB_ENV echo 'Plugin builds for ${{ github.event.pull_request.head.sha }} are ready :bellhop_bell:!' >> $GITHUB_ENV echo '- Download [development build](https://storage.googleapis.com/web-stories-wp-github-artifacts/${{ github.ref }}/web-stories-dev.zip?${{ github.sha }})' >> $GITHUB_ENV @@ -230,7 +232,7 @@ jobs: github.event.pull_request.user.login != 'dependabot[bot]' - name: Create or update comment on PR with links to plugin builds - uses: peter-evans/create-or-update-comment@67dcc547d311b736a8e6c5c236542148a47adc3d + uses: peter-evans/create-or-update-comment@c6c9a1a66007646a28c153e2a8580a5bad27bcfa with: issue-number: ${{ github.event.pull_request.number }} comment-id: ${{ steps.find-comment.outputs.comment-id }} diff --git a/.github/workflows/cleanup-pr-assets.yml b/.github/workflows/cleanup-pr-assets.yml index 71e5dd54331d..59853dda64a3 100644 --- a/.github/workflows/cleanup-pr-assets.yml +++ b/.github/workflows/cleanup-pr-assets.yml @@ -21,7 +21,7 @@ jobs: github.event.pull_request.user.login != 'dependabot[bot]' steps: - name: Harden Runner - uses: step-security/harden-runner@1f99358870fe1c846a3ccba386cc2b2246836776 + uses: step-security/harden-runner@55d479fb1c5bcad5a4f9099a5d9f37c8857b2845 with: disable-file-monitoring: true disable-sudo: true @@ -34,12 +34,12 @@ jobs: raw.githubusercontent.com:443 - name: Authenticate - uses: google-github-actions/auth@ef5d53e30bbcd8d0836f4288f5e50ff3e086997d + uses: google-github-actions/auth@35b0e87d162680511bf346c299f71c9c5c379033 with: credentials_json: ${{ secrets.GCP_SA_KEY }} - name: Setup Cloud SDK - uses: google-github-actions/setup-gcloud@62d4898025f6041e16b1068643bfc5a696863587 + uses: google-github-actions/setup-gcloud@e30db14379863a8c79331b04a9969f4c1e225e0b with: project_id: ${{ secrets.GCP_PROJECT_ID }} diff --git a/.github/workflows/codeql-analysis.yml b/.github/workflows/codeql-analysis.yml index 38395b886a79..8cb6e3a6b749 100644 --- a/.github/workflows/codeql-analysis.yml +++ b/.github/workflows/codeql-analysis.yml @@ -41,7 +41,7 @@ jobs: timeout-minutes: 10 steps: - name: Harden Runner - uses: step-security/harden-runner@1f99358870fe1c846a3ccba386cc2b2246836776 + uses: step-security/harden-runner@55d479fb1c5bcad5a4f9099a5d9f37c8857b2845 with: disable-sudo: true egress-policy: block @@ -52,12 +52,12 @@ jobs: objects.githubusercontent.com:443 - name: Checkout - uses: actions/checkout@8f4b7f84864484a7bf31766abe9204da3cbe65b3 + uses: actions/checkout@c85c95e3d7251135ab7dc9ce3241c5835cc595a9 - name: Initialize CodeQL - uses: github/codeql-action/init@04df1262e6247151b5ac09cd2c303ac36ad3f62b + uses: github/codeql-action/init@cdcdbb579706841c47f7063dda365e292e5cad7a with: languages: javascript - name: Perform CodeQL Analysis - uses: github/codeql-action/analyze@04df1262e6247151b5ac09cd2c303ac36ad3f62b + uses: github/codeql-action/analyze@cdcdbb579706841c47f7063dda365e292e5cad7a diff --git a/.github/workflows/deploy-storybook.yml b/.github/workflows/deploy-storybook.yml index 419a998eac7a..b7492154f960 100644 --- a/.github/workflows/deploy-storybook.yml +++ b/.github/workflows/deploy-storybook.yml @@ -31,10 +31,10 @@ jobs: timeout-minutes: 10 steps: - name: Checkout - uses: actions/checkout@8f4b7f84864484a7bf31766abe9204da3cbe65b3 + uses: actions/checkout@c85c95e3d7251135ab7dc9ce3241c5835cc595a9 - name: Setup Node - uses: actions/setup-node@64ed1c7eab4cce3362f8c340dee64e5eaeef8f7c + uses: actions/setup-node@e33196f7422957bea03ed53f6fbb155025ffc7b8 with: node-version-file: '.nvmrc' cache: npm @@ -42,7 +42,7 @@ jobs: - name: Install dependencies run: npm ci env: - PUPPETEER_SKIP_CHROMIUM_DOWNLOAD: true + PUPPETEER_SKIP_DOWNLOAD: true - name: Build storyook run: npm run storybook:build @@ -62,7 +62,7 @@ jobs: needs: [build-storybook] steps: - name: Harden Runner - uses: step-security/harden-runner@1f99358870fe1c846a3ccba386cc2b2246836776 + uses: step-security/harden-runner@55d479fb1c5bcad5a4f9099a5d9f37c8857b2845 with: disable-sudo: true egress-policy: block @@ -70,7 +70,7 @@ jobs: github.com:443 - name: Checkout - uses: actions/checkout@8f4b7f84864484a7bf31766abe9204da3cbe65b3 + uses: actions/checkout@c85c95e3d7251135ab7dc9ce3241c5835cc595a9 with: ref: gh-pages token: ${{ secrets.GOOGLEFORCREATORS_BOT_TOKEN }} diff --git a/.github/workflows/lint-css-js-md.yml b/.github/workflows/lint-css-js-md.yml index 3031f2be3817..efc10954cef9 100644 --- a/.github/workflows/lint-css-js-md.yml +++ b/.github/workflows/lint-css-js-md.yml @@ -61,7 +61,7 @@ jobs: timeout-minutes: 20 steps: - name: Harden Runner - uses: step-security/harden-runner@1f99358870fe1c846a3ccba386cc2b2246836776 + uses: step-security/harden-runner@55d479fb1c5bcad5a4f9099a5d9f37c8857b2845 with: disable-sudo: true disable-file-monitoring: true @@ -74,10 +74,10 @@ jobs: 54.185.253.63:443 - name: Checkout - uses: actions/checkout@8f4b7f84864484a7bf31766abe9204da3cbe65b3 + uses: actions/checkout@c85c95e3d7251135ab7dc9ce3241c5835cc595a9 - name: Setup Node - uses: actions/setup-node@64ed1c7eab4cce3362f8c340dee64e5eaeef8f7c + uses: actions/setup-node@e33196f7422957bea03ed53f6fbb155025ffc7b8 with: node-version-file: '.nvmrc' cache: npm @@ -85,12 +85,12 @@ jobs: - name: Install dependencies run: npm ci env: - PUPPETEER_SKIP_CHROMIUM_DOWNLOAD: true + PUPPETEER_SKIP_DOWNLOAD: true - name: Setup Bun uses: oven-sh/setup-bun@4573031972107e0af692492ee967d9022deafd7b with: - bun-version: latest + bun-version: '0.5.9' - name: Markdown Lint run: npm run lint:md diff --git a/.github/workflows/lint-i18n.yml b/.github/workflows/lint-i18n.yml index d72b497c905a..8719a27a7c9b 100644 --- a/.github/workflows/lint-i18n.yml +++ b/.github/workflows/lint-i18n.yml @@ -42,12 +42,12 @@ jobs: timeout-minutes: 10 steps: - name: Harden Runner - uses: step-security/harden-runner@1f99358870fe1c846a3ccba386cc2b2246836776 + uses: step-security/harden-runner@55d479fb1c5bcad5a4f9099a5d9f37c8857b2845 with: egress-policy: audit # TODO: change to 'egress-policy: block' after couple of runs - name: Checkout - uses: actions/checkout@8f4b7f84864484a7bf31766abe9204da3cbe65b3 + uses: actions/checkout@c85c95e3d7251135ab7dc9ce3241c5835cc595a9 - name: Install WP-CLI run: | @@ -67,13 +67,13 @@ jobs: run: wp package list - name: Setup Node - uses: actions/setup-node@64ed1c7eab4cce3362f8c340dee64e5eaeef8f7c + uses: actions/setup-node@e33196f7422957bea03ed53f6fbb155025ffc7b8 with: node-version-file: '.nvmrc' cache: npm - name: Setup PHP - uses: shivammathur/setup-php@d30ad8b1843ace22e6698ab99bbafaa747b6bd0d + uses: shivammathur/setup-php@4bd44f22a98a19e0950cbad5f31095157cc9621b with: php-version: '8.0' coverage: none @@ -83,7 +83,7 @@ jobs: run: | npm ci env: - PUPPETEER_SKIP_CHROMIUM_DOWNLOAD: true + PUPPETEER_SKIP_DOWNLOAD: true - name: Install PHP dependencies uses: ramsey/composer-install@83af392bf5f031813d25e6fe4cd626cdba9a2df6 @@ -93,7 +93,7 @@ jobs: - name: Setup Bun uses: oven-sh/setup-bun@4573031972107e0af692492ee967d9022deafd7b with: - bun-version: latest + bun-version: '0.5.9' - name: Build plugin run: bun run build:js diff --git a/.github/workflows/lint-php.yml b/.github/workflows/lint-php.yml index 1e476416ddd1..f3a86ea92b9c 100644 --- a/.github/workflows/lint-php.yml +++ b/.github/workflows/lint-php.yml @@ -41,7 +41,7 @@ jobs: timeout-minutes: 5 steps: - name: Harden Runner - uses: step-security/harden-runner@1f99358870fe1c846a3ccba386cc2b2246836776 + uses: step-security/harden-runner@55d479fb1c5bcad5a4f9099a5d9f37c8857b2845 with: disable-file-monitoring: true egress-policy: block @@ -55,10 +55,10 @@ jobs: dl.cloudsmith.io:443 - name: Checkout - uses: actions/checkout@8f4b7f84864484a7bf31766abe9204da3cbe65b3 + uses: actions/checkout@c85c95e3d7251135ab7dc9ce3241c5835cc595a9 - name: Setup PHP - uses: shivammathur/setup-php@d30ad8b1843ace22e6698ab99bbafaa747b6bd0d + uses: shivammathur/setup-php@4bd44f22a98a19e0950cbad5f31095157cc9621b with: php-version: '8.0' coverage: none diff --git a/.github/workflows/npm-release.yml b/.github/workflows/npm-release.yml index 5bd5db311389..0846ebca399a 100644 --- a/.github/workflows/npm-release.yml +++ b/.github/workflows/npm-release.yml @@ -34,10 +34,10 @@ jobs: environment: Production steps: - name: Checkout - uses: actions/checkout@8f4b7f84864484a7bf31766abe9204da3cbe65b3 + uses: actions/checkout@c85c95e3d7251135ab7dc9ce3241c5835cc595a9 - name: Setup Node - uses: actions/setup-node@64ed1c7eab4cce3362f8c340dee64e5eaeef8f7c + uses: actions/setup-node@e33196f7422957bea03ed53f6fbb155025ffc7b8 with: node-version-file: '.nvmrc' cache: npm @@ -45,12 +45,12 @@ jobs: - name: Install dependencies run: npm ci env: - PUPPETEER_SKIP_CHROMIUM_DOWNLOAD: true + PUPPETEER_SKIP_DOWNLOAD: true - name: Setup Bun uses: oven-sh/setup-bun@4573031972107e0af692492ee967d9022deafd7b with: - bun-version: latest + bun-version: '0.5.9' - name: Bundle packages run: bun run workflow:bundle-packages @@ -102,18 +102,18 @@ jobs: needs: [dry-run] steps: - name: Harden Runner - uses: step-security/harden-runner@1f99358870fe1c846a3ccba386cc2b2246836776 + uses: step-security/harden-runner@55d479fb1c5bcad5a4f9099a5d9f37c8857b2845 with: egress-policy: audit # TODO: change to 'egress-policy: block' after couple of runs - name: Checkout - uses: actions/checkout@8f4b7f84864484a7bf31766abe9204da3cbe65b3 + uses: actions/checkout@c85c95e3d7251135ab7dc9ce3241c5835cc595a9 with: token: ${{ secrets.GOOGLEFORCREATORS_BOT_TOKEN }} # See go/npm-publish - name: Setup Node - uses: actions/setup-node@64ed1c7eab4cce3362f8c340dee64e5eaeef8f7c + uses: actions/setup-node@e33196f7422957bea03ed53f6fbb155025ffc7b8 with: node-version-file: '.nvmrc' cache: npm @@ -123,12 +123,12 @@ jobs: - name: Install dependencies run: npm ci env: - PUPPETEER_SKIP_CHROMIUM_DOWNLOAD: true + PUPPETEER_SKIP_DOWNLOAD: true - name: Setup Bun uses: oven-sh/setup-bun@4573031972107e0af692492ee967d9022deafd7b with: - bun-version: latest + bun-version: '0.5.9' - name: Bundle packages run: bun run workflow:bundle-packages diff --git a/.github/workflows/plugin-release.yml b/.github/workflows/plugin-release.yml index 34846b97d2ac..5a26399741db 100644 --- a/.github/workflows/plugin-release.yml +++ b/.github/workflows/plugin-release.yml @@ -41,12 +41,12 @@ jobs: environment: Production steps: - name: Harden Runner - uses: step-security/harden-runner@1f99358870fe1c846a3ccba386cc2b2246836776 + uses: step-security/harden-runner@55d479fb1c5bcad5a4f9099a5d9f37c8857b2845 with: egress-policy: audit # TODO: change to 'egress-policy: block' after couple of runs - name: Checkout - uses: actions/checkout@8f4b7f84864484a7bf31766abe9204da3cbe65b3 + uses: actions/checkout@c85c95e3d7251135ab7dc9ce3241c5835cc595a9 - name: Verify semver compatibility run: | @@ -104,7 +104,7 @@ jobs: needs: [checks] steps: - name: Harden Runner - uses: step-security/harden-runner@1f99358870fe1c846a3ccba386cc2b2246836776 + uses: step-security/harden-runner@55d479fb1c5bcad5a4f9099a5d9f37c8857b2845 with: egress-policy: audit # TODO: change to 'egress-policy: block' after couple of runs @@ -127,7 +127,7 @@ jobs: # Grab current assets version from `web-stories.php` and pass on to next steps. # - name: Checkout - # uses: actions/checkout@8f4b7f84864484a7bf31766abe9204da3cbe65b3 + # uses: actions/checkout@c85c95e3d7251135ab7dc9ce3241c5835cc595a9 # with: # ref: @@ -143,7 +143,7 @@ jobs: # ASSETS_VERSION_REGEX: "https://wp.stories.google/static/([^']+)" - name: Checkout wp.stories.google - uses: actions/checkout@8f4b7f84864484a7bf31766abe9204da3cbe65b3 + uses: actions/checkout@c85c95e3d7251135ab7dc9ce3241c5835cc595a9 with: repository: GoogleForCreators/wp.stories.google lfs: true @@ -151,12 +151,12 @@ jobs: token: ${{ secrets.GOOGLEFORCREATORS_BOT_TOKEN }} - name: Authenticate - uses: google-github-actions/auth@ef5d53e30bbcd8d0836f4288f5e50ff3e086997d + uses: google-github-actions/auth@35b0e87d162680511bf346c299f71c9c5c379033 with: credentials_json: ${{ secrets.GCP_SA_KEY }} - name: Setup Cloud SDK - uses: google-github-actions/setup-gcloud@62d4898025f6041e16b1068643bfc5a696863587 + uses: google-github-actions/setup-gcloud@e30db14379863a8c79331b04a9969f4c1e225e0b with: project_id: ${{ secrets.GCP_PROJECT_ID }} @@ -245,12 +245,12 @@ jobs: release_name: ${{ steps.release_branch.outputs.release_name }} steps: - name: Harden Runner - uses: step-security/harden-runner@1f99358870fe1c846a3ccba386cc2b2246836776 + uses: step-security/harden-runner@55d479fb1c5bcad5a4f9099a5d9f37c8857b2845 with: egress-policy: audit # TODO: change to 'egress-policy: block' after couple of runs - name: Checkout - uses: actions/checkout@8f4b7f84864484a7bf31766abe9204da3cbe65b3 + uses: actions/checkout@c85c95e3d7251135ab7dc9ce3241c5835cc595a9 with: fetch-depth: 0 # 0 indicates all history for all branches and tags. token: ${{ secrets.GOOGLEFORCREATORS_BOT_TOKEN }} @@ -269,13 +269,13 @@ jobs: continue-on-error: true - name: Setup Node - uses: actions/setup-node@64ed1c7eab4cce3362f8c340dee64e5eaeef8f7c + uses: actions/setup-node@e33196f7422957bea03ed53f6fbb155025ffc7b8 with: node-version-file: '.nvmrc' cache: npm - name: Setup PHP - uses: shivammathur/setup-php@d30ad8b1843ace22e6698ab99bbafaa747b6bd0d + uses: shivammathur/setup-php@4bd44f22a98a19e0950cbad5f31095157cc9621b with: php-version: '8.0' coverage: none @@ -285,7 +285,7 @@ jobs: run: | npm ci env: - PUPPETEER_SKIP_CHROMIUM_DOWNLOAD: true + PUPPETEER_SKIP_DOWNLOAD: true - name: Install PHP dependencies uses: ramsey/composer-install@83af392bf5f031813d25e6fe4cd626cdba9a2df6 @@ -295,7 +295,7 @@ jobs: - name: Setup Bun uses: oven-sh/setup-bun@4573031972107e0af692492ee967d9022deafd7b with: - bun-version: latest + bun-version: '0.5.9' - name: Create release branch id: release_branch @@ -408,12 +408,12 @@ jobs: needs: [build] steps: - name: Harden Runner - uses: step-security/harden-runner@1f99358870fe1c846a3ccba386cc2b2246836776 + uses: step-security/harden-runner@55d479fb1c5bcad5a4f9099a5d9f37c8857b2845 with: egress-policy: audit # TODO: change to 'egress-policy: block' after couple of runs - name: Checkout - uses: actions/checkout@8f4b7f84864484a7bf31766abe9204da3cbe65b3 + uses: actions/checkout@c85c95e3d7251135ab7dc9ce3241c5835cc595a9 - name: Download release artifacts uses: actions/download-artifact@9bc31d5ccc31df68ecc42ccf4149144866c47d8a @@ -444,18 +444,18 @@ jobs: if: ${{ ! startsWith(github.ref, 'refs/heads/release/') && ! contains(github.event.inputs.version, 'rc') }} steps: - name: Harden Runner - uses: step-security/harden-runner@1f99358870fe1c846a3ccba386cc2b2246836776 + uses: step-security/harden-runner@55d479fb1c5bcad5a4f9099a5d9f37c8857b2845 with: egress-policy: audit # TODO: change to 'egress-policy: block' after couple of runs - name: Checkout - uses: actions/checkout@8f4b7f84864484a7bf31766abe9204da3cbe65b3 + uses: actions/checkout@c85c95e3d7251135ab7dc9ce3241c5835cc595a9 with: ref: main token: ${{ secrets.GOOGLEFORCREATORS_BOT_TOKEN }} - name: Setup Node - uses: actions/setup-node@64ed1c7eab4cce3362f8c340dee64e5eaeef8f7c + uses: actions/setup-node@e33196f7422957bea03ed53f6fbb155025ffc7b8 with: node-version-file: '.nvmrc' cache: npm @@ -463,12 +463,12 @@ jobs: - name: Install dependencies run: npm ci env: - PUPPETEER_SKIP_CHROMIUM_DOWNLOAD: true + PUPPETEER_SKIP_DOWNLOAD: true - name: Setup Bun uses: oven-sh/setup-bun@4573031972107e0af692492ee967d9022deafd7b with: - bun-version: latest + bun-version: '0.5.9' # If we're releasing 1.6.0, bump version on main to 1.7.0-alpha.0. - name: Update plugin version @@ -500,7 +500,7 @@ jobs: SVN_PASSWORD: ${{ secrets.SVN_PASSWORD }} steps: - name: Harden Runner - uses: step-security/harden-runner@1f99358870fe1c846a3ccba386cc2b2246836776 + uses: step-security/harden-runner@55d479fb1c5bcad5a4f9099a5d9f37c8857b2845 with: egress-policy: audit # TODO: change to 'egress-policy: block' after couple of runs diff --git a/.github/workflows/scorecards.yml b/.github/workflows/scorecards.yml index 5ed3f90b69c2..0f501cd2ee97 100644 --- a/.github/workflows/scorecards.yml +++ b/.github/workflows/scorecards.yml @@ -25,17 +25,17 @@ jobs: steps: - name: Harden Runner - uses: step-security/harden-runner@1f99358870fe1c846a3ccba386cc2b2246836776 + uses: step-security/harden-runner@55d479fb1c5bcad5a4f9099a5d9f37c8857b2845 with: egress-policy: audit # TODO: change to 'egress-policy: block' after couple of runs - name: 'Checkout code' - uses: actions/checkout@8f4b7f84864484a7bf31766abe9204da3cbe65b3 + uses: actions/checkout@c85c95e3d7251135ab7dc9ce3241c5835cc595a9 with: persist-credentials: false - name: 'Run analysis' - uses: ossf/scorecard-action@80e868c13c90f172d68d1f4501dee99e2479f7af + uses: ossf/scorecard-action@08b4669551908b1024bb425080c797723083c031 with: results_file: results.sarif results_format: sarif @@ -56,6 +56,6 @@ jobs: # Upload the results to GitHub's code scanning dashboard. - name: 'Upload to code-scanning' - uses: github/codeql-action/upload-sarif@04df1262e6247151b5ac09cd2c303ac36ad3f62b + uses: github/codeql-action/upload-sarif@cdcdbb579706841c47f7063dda365e292e5cad7a with: sarif_file: results.sarif diff --git a/.github/workflows/tests-e2e.yml b/.github/workflows/tests-e2e.yml index ef778546e05a..20c7e3cc1236 100644 --- a/.github/workflows/tests-e2e.yml +++ b/.github/workflows/tests-e2e.yml @@ -70,21 +70,21 @@ jobs: timeout-minutes: 30 steps: - name: Harden Runner - uses: step-security/harden-runner@1f99358870fe1c846a3ccba386cc2b2246836776 + uses: step-security/harden-runner@55d479fb1c5bcad5a4f9099a5d9f37c8857b2845 with: egress-policy: audit # TODO: change to 'egress-policy: block' after couple of runs - name: Checkout - uses: actions/checkout@8f4b7f84864484a7bf31766abe9204da3cbe65b3 + uses: actions/checkout@c85c95e3d7251135ab7dc9ce3241c5835cc595a9 - name: Setup Node - uses: actions/setup-node@64ed1c7eab4cce3362f8c340dee64e5eaeef8f7c + uses: actions/setup-node@e33196f7422957bea03ed53f6fbb155025ffc7b8 with: node-version-file: '.nvmrc' cache: npm - name: Setup PHP - uses: shivammathur/setup-php@d30ad8b1843ace22e6698ab99bbafaa747b6bd0d + uses: shivammathur/setup-php@4bd44f22a98a19e0950cbad5f31095157cc9621b with: php-version: '8.0' coverage: none @@ -93,7 +93,7 @@ jobs: - name: Install dependencies run: npm ci env: - PUPPETEER_SKIP_CHROMIUM_DOWNLOAD: true + PUPPETEER_SKIP_DOWNLOAD: true - name: Install PHP dependencies uses: ramsey/composer-install@83af392bf5f031813d25e6fe4cd626cdba9a2df6 @@ -103,7 +103,7 @@ jobs: - name: Setup Bun uses: oven-sh/setup-bun@4573031972107e0af692492ee967d9022deafd7b with: - bun-version: latest + bun-version: '0.5.9' - name: Build plugin run: bun run build:js @@ -121,27 +121,18 @@ jobs: name: web-stories path: build/web-stories - nonce: - name: Percy Nonce - runs-on: ubuntu-latest - outputs: - result: ${{ env.result }} - steps: - - id: nonce - run: echo "result=${{ github.run_id }}-${{ github.run_attempt }}-$(date +%s)" >> $GITHUB_ENV - e2e: name: '${{ matrix.browser }} - WP ${{ matrix.wp }} (${{ matrix.shard }})' runs-on: ubuntu-latest timeout-minutes: 30 continue-on-error: ${{ matrix.experimental == true }} - needs: [build, nonce] + needs: [build] strategy: fail-fast: false matrix: # TODO: add back Firefox once support is more mature. browser: ['chrome'] - wp: ['6.0'] + wp: ['6.1'] snapshots: [false] experimental: [false] # We want to split up the tests into 2 parts running in parallel. @@ -158,7 +149,7 @@ jobs: steps: - name: Harden Runner - uses: step-security/harden-runner@1f99358870fe1c846a3ccba386cc2b2246836776 + uses: step-security/harden-runner@55d479fb1c5bcad5a4f9099a5d9f37c8857b2845 with: disable-file-monitoring: true egress-policy: audit @@ -171,9 +162,10 @@ jobs: docker.io:443 registry-1.docker.io:443 auth.docker.io:443 + 34.104.35.123:443 - name: Checkout - uses: actions/checkout@8f4b7f84864484a7bf31766abe9204da3cbe65b3 + uses: actions/checkout@c85c95e3d7251135ab7dc9ce3241c5835cc595a9 - name: Download bundle uses: actions/download-artifact@9bc31d5ccc31df68ecc42ccf4149144866c47d8a @@ -185,7 +177,7 @@ jobs: run: sudo apt-get install libgbm1 - name: Setup Node - uses: actions/setup-node@64ed1c7eab4cce3362f8c340dee64e5eaeef8f7c + uses: actions/setup-node@e33196f7422957bea03ed53f6fbb155025ffc7b8 with: node-version-file: '.nvmrc' cache: npm @@ -215,24 +207,12 @@ jobs: AMP_VALIDATOR_FILE="${RUNNER_TEMP}/validator_wasm.js" echo "validator_file=$AMP_VALIDATOR_FILE" >> $GITHUB_ENV - - name: Run E2E tests with percy - run: npm run test:e2e:percy -- -- --shard=$SHARD - env: - PERCY_TOKEN: ${{ secrets.PERCY_TOKEN_E2E }} - WP_VERSION: ${{ matrix.wp }} - PERCY_BROWSER_EXECUTABLE: ${{ env.chromium_path }} - PERCY_PARALLEL_NONCE: ${{ needs.nonce.outputs.result }} - SHARD: ${{ matrix.shard }} - AMP_VALIDATOR_FILE: ${{ env.validator_file }} - if: ( matrix.snapshots ) && ( github.event.pull_request.draft == false ) - - name: Run E2E tests run: npm run test:e2e -- --shard=$SHARD env: WP_VERSION: ${{ matrix.wp }} SHARD: ${{ matrix.shard }} AMP_VALIDATOR_FILE: ${{ env.validator_file }} - if: ( ! matrix.snapshots ) || ( github.event.pull_request.draft == true ) - name: Stop Docker environment run: npm run env:stop @@ -247,44 +227,3 @@ jobs: name: failures-artifacts path: build/e2e-artifacts if-no-files-found: ignore - - percy: - name: Percy - runs-on: ubuntu-latest - timeout-minutes: 5 - if: > - always() && - github.event.pull_request.draft == false && - github.event.pull_request.head.repo.fork == false && - github.event.pull_request.user.login != 'dependabot[bot]' - needs: [e2e, nonce] - steps: - - name: Harden Runner - uses: step-security/harden-runner@1f99358870fe1c846a3ccba386cc2b2246836776 - with: - disable-sudo: true - egress-policy: block - allowed-endpoints: > - api.github.com:443 - github.com:443 - percy.io:443 - registry.npmjs.org:443 - storage.googleapis.com:443 - - - name: Checkout - uses: actions/checkout@8f4b7f84864484a7bf31766abe9204da3cbe65b3 - - - name: Setup Node - uses: actions/setup-node@64ed1c7eab4cce3362f8c340dee64e5eaeef8f7c - with: - node-version-file: '.nvmrc' - cache: npm - - - name: Install dependencies - run: npm install @percy/cli - - - name: Finalize Percy build - run: npx percy build:finalize - env: - PERCY_TOKEN: ${{ secrets.PERCY_TOKEN_E2E }} - PERCY_PARALLEL_NONCE: ${{ needs.nonce.outputs.result }} diff --git a/.github/workflows/tests-karma-dashboard.yml b/.github/workflows/tests-karma-dashboard.yml index 6cb3df11f7a0..18a137d802d6 100644 --- a/.github/workflows/tests-karma-dashboard.yml +++ b/.github/workflows/tests-karma-dashboard.yml @@ -41,23 +41,13 @@ concurrency: cancel-in-progress: true jobs: - nonce: - name: Percy Nonce - runs-on: ubuntu-latest - outputs: - result: ${{ env.result }} - steps: - - id: nonce - run: echo "result=${{ github.run_id }}-${{ github.run_attempt }}-$(date +%s)" >> $GITHUB_ENV - karma: name: Karma runs-on: ubuntu-latest timeout-minutes: 30 - needs: nonce steps: - name: Harden Runner - uses: step-security/harden-runner@1f99358870fe1c846a3ccba386cc2b2246836776 + uses: step-security/harden-runner@55d479fb1c5bcad5a4f9099a5d9f37c8857b2845 with: disable-file-monitoring: true egress-policy: block @@ -67,17 +57,18 @@ jobs: fonts.googleapis.com:443 fonts.gstatic.com:443 github.com:443 - percy.io:443 registry.npmjs.org:443 storage.googleapis.com:443 uploader.codecov.io:443 www.gravatar.com:443 + 54.185.253.63:443 + 34.104.35.123:443 - name: Checkout - uses: actions/checkout@8f4b7f84864484a7bf31766abe9204da3cbe65b3 + uses: actions/checkout@c85c95e3d7251135ab7dc9ce3241c5835cc595a9 - name: Setup Node - uses: actions/setup-node@64ed1c7eab4cce3362f8c340dee64e5eaeef8f7c + uses: actions/setup-node@e33196f7422957bea03ed53f6fbb155025ffc7b8 with: node-version-file: '.nvmrc' cache: npm @@ -100,70 +91,13 @@ jobs: CHROMIUM=$(node -p "const puppeteer = require('puppeteer'); puppeteer.executablePath();") echo "chromium_path=${CHROMIUM}" >> $GITHUB_ENV - - name: Run integration tests with Percy - run: | - npx percy exec --quiet --parallel --config=percy.config.karma.yml -- \ - npm run test:karma:dashboard -- --headless --viewport=1600:1000 --coverage --shard=$SHARD || \ - npx percy exec --quiet --parallel --config=percy.config.karma.yml -- \ - npm run test:karma:dashboard:retry-failed -- --headless --viewport=1600:1000 --shard=$SHARD - env: - DISABLE_ERROR_BOUNDARIES: true - SHARD: ${{ matrix.shard }} - PERCY_TOKEN: ${{ secrets.PERCY_TOKEN_DASHBOARD }} - PERCY_BROWSER_EXECUTABLE: ${{ env.chromium_path }} - PERCY_PARALLEL_NONCE: ${{ needs.nonce.outputs.result }} - if: github.event.pull_request.draft == false - - name: Run integration tests run: npm run test:karma:dashboard -- --headless --viewport=1600:1000 --coverage || npm run test:karma:dashboard:retry-failed -- --headless --viewport=1600:1000 env: DISABLE_ERROR_BOUNDARIES: true - if: github.event.pull_request.draft == true - name: Upload code coverage report - uses: codecov/codecov-action@d9f34f8cd5cb3b3eb79b3e4b5dae3a16df499a70 + uses: codecov/codecov-action@eaaf4bedf32dbdc6b720b63067d99c4d77d6047d with: file: build/logs/karma-coverage/dashboard/lcov.info flags: karmatests - - percy: - name: Percy - runs-on: ubuntu-latest - timeout-minutes: 5 - if: > - always() && - github.event.pull_request.draft == false && - github.event.pull_request.head.repo.fork == false && - github.event.pull_request.user.login != 'dependabot[bot]' - needs: [karma, nonce] - steps: - - name: Harden Runner - uses: step-security/harden-runner@1f99358870fe1c846a3ccba386cc2b2246836776 - with: - disable-sudo: true - disable-file-monitoring: true - egress-policy: block - allowed-endpoints: > - api.github.com:443 - github.com:443 - percy.io:443 - registry.npmjs.org:443 - storage.googleapis.com:443 - - - name: Checkout - uses: actions/checkout@8f4b7f84864484a7bf31766abe9204da3cbe65b3 - - - name: Setup Node - uses: actions/setup-node@64ed1c7eab4cce3362f8c340dee64e5eaeef8f7c - with: - node-version-file: '.nvmrc' - cache: npm - - - name: Install dependencies - run: npm install @percy/cli - - - name: Finalize Percy build - run: npx percy build:finalize - env: - PERCY_TOKEN: ${{ secrets.PERCY_TOKEN_DASHBOARD }} - PERCY_PARALLEL_NONCE: ${{ needs.nonce.outputs.result }} diff --git a/.github/workflows/tests-karma-editor.yml b/.github/workflows/tests-karma-editor.yml index dc87b60f4a9b..eabaa53ae863 100644 --- a/.github/workflows/tests-karma-editor.yml +++ b/.github/workflows/tests-karma-editor.yml @@ -50,20 +50,10 @@ concurrency: cancel-in-progress: true jobs: - nonce: - name: Percy Nonce - runs-on: ubuntu-latest - outputs: - result: ${{ env.result }} - steps: - - id: nonce - run: echo "result=${{ github.run_id }}-${{ github.run_attempt }}-$(date +%s)" >> $GITHUB_ENV - karma: name: Karma (${{ matrix.shard }}) runs-on: ubuntu-latest timeout-minutes: 60 - needs: nonce strategy: fail-fast: false matrix: @@ -93,7 +83,7 @@ jobs: ] steps: - name: Harden Runner - uses: step-security/harden-runner@1f99358870fe1c846a3ccba386cc2b2246836776 + uses: step-security/harden-runner@55d479fb1c5bcad5a4f9099a5d9f37c8857b2845 with: disable-file-monitoring: true egress-policy: block @@ -103,19 +93,20 @@ jobs: fonts.googleapis.com:443 fonts.gstatic.com:443 github.com:443 - percy.io:443 registry.npmjs.org:443 storage.googleapis.com:443 uploader.codecov.io:443 wp.stories.google:443 media3p.googleapis.com:443 stories.local:80 + 54.185.253.63:443 + 34.104.35.123:443 - name: Checkout - uses: actions/checkout@8f4b7f84864484a7bf31766abe9204da3cbe65b3 + uses: actions/checkout@c85c95e3d7251135ab7dc9ce3241c5835cc595a9 - name: Setup Node - uses: actions/setup-node@64ed1c7eab4cce3362f8c340dee64e5eaeef8f7c + uses: actions/setup-node@e33196f7422957bea03ed53f6fbb155025ffc7b8 with: node-version-file: '.nvmrc' cache: npm @@ -138,20 +129,6 @@ jobs: CHROMIUM=$(node -p "const puppeteer = require('puppeteer'); puppeteer.executablePath();") echo "chromium_path=${CHROMIUM}" >> $GITHUB_ENV - - name: Run integration tests with Percy - run: | - npx percy exec --quiet --parallel --config=percy.config.karma.yml -- \ - npm run test:karma:story-editor -- --headless --viewport=1600:1000 --coverage --shard=$SHARD || \ - npx percy exec --quiet --parallel --config=percy.config.karma.yml -- \ - npm run test:karma:story-editor:retry-failed -- --headless --viewport=1600:1000 --shard=$SHARD - env: - DISABLE_ERROR_BOUNDARIES: true - SHARD: ${{ matrix.shard }} - PERCY_TOKEN: ${{ secrets.PERCY_TOKEN }} - PERCY_BROWSER_EXECUTABLE: ${{ env.chromium_path }} - PERCY_PARALLEL_NONCE: ${{ needs.nonce.outputs.result }} - if: github.event.pull_request.draft == false - - name: Run integration tests run: | npm run test:karma:story-editor -- --headless --viewport=1600:1000 --coverage --shard=$SHARD || \ @@ -159,52 +136,9 @@ jobs: env: DISABLE_ERROR_BOUNDARIES: true SHARD: ${{ matrix.shard }} - if: github.event.pull_request.draft == true - name: Upload code coverage report - uses: codecov/codecov-action@d9f34f8cd5cb3b3eb79b3e4b5dae3a16df499a70 + uses: codecov/codecov-action@eaaf4bedf32dbdc6b720b63067d99c4d77d6047d with: file: build/logs/karma-coverage/story-editor/lcov.info flags: karmatests - - percy: - name: Percy - runs-on: ubuntu-latest - timeout-minutes: 5 - if: > - always() && - github.event.pull_request.draft == false && - github.event.pull_request.head.repo.fork == false && - github.event.pull_request.user.login != 'dependabot[bot]' - needs: [karma, nonce] - steps: - - name: Harden Runner - uses: step-security/harden-runner@1f99358870fe1c846a3ccba386cc2b2246836776 - with: - disable-sudo: true - disable-file-monitoring: true - egress-policy: block - allowed-endpoints: > - api.github.com:443 - github.com:443 - percy.io:443 - registry.npmjs.org:443 - storage.googleapis.com:443 - - - name: Checkout - uses: actions/checkout@8f4b7f84864484a7bf31766abe9204da3cbe65b3 - - - name: Setup Node - uses: actions/setup-node@64ed1c7eab4cce3362f8c340dee64e5eaeef8f7c - with: - node-version-file: '.nvmrc' - cache: npm - - - name: Install dependencies - run: npm install @percy/cli - - - name: Finalize Percy build - run: npx percy build:finalize - env: - PERCY_TOKEN: ${{ secrets.PERCY_TOKEN }} - PERCY_PARALLEL_NONCE: ${{ needs.nonce.outputs.result }} diff --git a/.github/workflows/tests-unit-js.yml b/.github/workflows/tests-unit-js.yml index 2cd4a8ce5add..5f861aa61eb4 100644 --- a/.github/workflows/tests-unit-js.yml +++ b/.github/workflows/tests-unit-js.yml @@ -51,7 +51,7 @@ jobs: shard: ['1/2', '2/2'] steps: - name: Harden Runner - uses: step-security/harden-runner@1f99358870fe1c846a3ccba386cc2b2246836776 + uses: step-security/harden-runner@55d479fb1c5bcad5a4f9099a5d9f37c8857b2845 with: disable-sudo: true disable-file-monitoring: true @@ -67,10 +67,10 @@ jobs: fonts.gstatic.com:443 - name: Checkout - uses: actions/checkout@8f4b7f84864484a7bf31766abe9204da3cbe65b3 + uses: actions/checkout@c85c95e3d7251135ab7dc9ce3241c5835cc595a9 - name: Setup Node - uses: actions/setup-node@64ed1c7eab4cce3362f8c340dee64e5eaeef8f7c + uses: actions/setup-node@e33196f7422957bea03ed53f6fbb155025ffc7b8 with: node-version-file: '.nvmrc' cache: npm @@ -87,7 +87,7 @@ jobs: npm ci npx rollup --config packages/migration/rollup.config.js env: - PUPPETEER_SKIP_CHROMIUM_DOWNLOAD: true + PUPPETEER_SKIP_DOWNLOAD: true - name: Download AMP validator JS id: amp_validator @@ -103,7 +103,7 @@ jobs: AMP_VALIDATOR_FILE: ${{ env.validator_file }} - name: Upload code coverage report - uses: codecov/codecov-action@d9f34f8cd5cb3b3eb79b3e4b5dae3a16df499a70 + uses: codecov/codecov-action@eaaf4bedf32dbdc6b720b63067d99c4d77d6047d with: file: build/logs/lcov.info flags: unittests diff --git a/.github/workflows/tests-unit-php.yml b/.github/workflows/tests-unit-php.yml index 365bf9d2f311..57d972299823 100644 --- a/.github/workflows/tests-unit-php.yml +++ b/.github/workflows/tests-unit-php.yml @@ -45,12 +45,13 @@ jobs: mysql: image: mariadb:latest env: - MYSQL_ALLOW_EMPTY_PASSWORD: true - MYSQL_ROOT_PASSWORD: - MYSQL_DATABASE: wordpress_test + MARIADB_ALLOW_EMPTY_ROOT_PASSWORD: true + MARIADB_DATABASE: wordpress_test + MARIADB_MYSQL_LOCALHOST_USER: 1 + MARIADB_MYSQL_LOCALHOST_GRANTS: USAGE ports: - 3306 - options: --health-cmd="mysqladmin ping" --health-interval=10s --health-timeout=5s --health-retries=3 --restart=always + options: --health-cmd="healthcheck.sh --su-mysql --connect --innodb_initialized" --health-interval=10s --health-timeout=5s --health-retries=3 continue-on-error: ${{ matrix.experimental }} strategy: matrix: @@ -65,7 +66,7 @@ jobs: experimental: false - php: '7.4' - wp: '6.0' + wp: '6.1' experimental: false - php: '8.0' @@ -79,7 +80,7 @@ jobs: steps: - name: Harden Runner - uses: step-security/harden-runner@1f99358870fe1c846a3ccba386cc2b2246836776 + uses: step-security/harden-runner@55d479fb1c5bcad5a4f9099a5d9f37c8857b2845 with: disable-file-monitoring: true egress-policy: audit @@ -99,14 +100,14 @@ jobs: dl.cloudsmith.io:443 - name: Checkout - uses: actions/checkout@8f4b7f84864484a7bf31766abe9204da3cbe65b3 + uses: actions/checkout@c85c95e3d7251135ab7dc9ce3241c5835cc595a9 # PHP-Scoper only works on PHP 7.4+ and we need to prefix our dependencies to accurately test them. # So we temporarily switch PHP versions, do a full install and then remove the package. # Then switch back to the PHP version we want to test and delete the vendor directory. - name: Setup PHP 8.0 - uses: shivammathur/setup-php@d30ad8b1843ace22e6698ab99bbafaa747b6bd0d + uses: shivammathur/setup-php@4bd44f22a98a19e0950cbad5f31095157cc9621b with: php-version: '8.0' tools: composer @@ -120,7 +121,7 @@ jobs: run: rm -rf vendor/* - name: Setup PHP - uses: shivammathur/setup-php@d30ad8b1843ace22e6698ab99bbafaa747b6bd0d + uses: shivammathur/setup-php@4bd44f22a98a19e0950cbad5f31095157cc9621b with: php-version: ${{ matrix.php }} extensions: mysql @@ -177,7 +178,7 @@ jobs: if: ${{ matrix.random }} - name: Upload code coverage report - uses: codecov/codecov-action@d9f34f8cd5cb3b3eb79b3e4b5dae3a16df499a70 + uses: codecov/codecov-action@eaaf4bedf32dbdc6b720b63067d99c4d77d6047d with: file: build/logs/*.xml if: ${{ matrix.coverage }} diff --git a/.github/workflows/update-browserslist.yml b/.github/workflows/update-browserslist.yml index 2806ce0e96b8..ad89c177f1e9 100644 --- a/.github/workflows/update-browserslist.yml +++ b/.github/workflows/update-browserslist.yml @@ -22,17 +22,17 @@ jobs: steps: - name: Harden Runner - uses: step-security/harden-runner@1f99358870fe1c846a3ccba386cc2b2246836776 + uses: step-security/harden-runner@55d479fb1c5bcad5a4f9099a5d9f37c8857b2845 with: egress-policy: audit # TODO: change to 'egress-policy: block' after couple of runs - name: Checkout - uses: actions/checkout@8f4b7f84864484a7bf31766abe9204da3cbe65b3 + uses: actions/checkout@c85c95e3d7251135ab7dc9ce3241c5835cc595a9 with: token: ${{ secrets.GOOGLEFORCREATORS_BOT_TOKEN }} - name: Setup Node - uses: actions/setup-node@64ed1c7eab4cce3362f8c340dee64e5eaeef8f7c + uses: actions/setup-node@e33196f7422957bea03ed53f6fbb155025ffc7b8 with: node-version-file: '.nvmrc' cache: npm @@ -41,7 +41,7 @@ jobs: run: npx browserslist@latest --update-db - name: Create Pull Request - uses: peter-evans/create-pull-request@38e0b6e68b4c852a5500a94740f0e535e0d7ba54 + uses: peter-evans/create-pull-request@153407881ec5c347639a548ade7d8ad1d6740e38 with: token: ${{ secrets.GOOGLEFORCREATORS_BOT_TOKEN }} commit-message: Update browserslist db diff --git a/.github/workflows/update-google-fonts.yml b/.github/workflows/update-google-fonts.yml index 3b735549c2e0..ca71cf956b54 100644 --- a/.github/workflows/update-google-fonts.yml +++ b/.github/workflows/update-google-fonts.yml @@ -22,17 +22,17 @@ jobs: steps: - name: Harden Runner - uses: step-security/harden-runner@1f99358870fe1c846a3ccba386cc2b2246836776 + uses: step-security/harden-runner@55d479fb1c5bcad5a4f9099a5d9f37c8857b2845 with: egress-policy: audit # TODO: change to 'egress-policy: block' after couple of runs - name: Checkout - uses: actions/checkout@8f4b7f84864484a7bf31766abe9204da3cbe65b3 + uses: actions/checkout@c85c95e3d7251135ab7dc9ce3241c5835cc595a9 with: token: ${{ secrets.GOOGLEFORCREATORS_BOT_TOKEN }} - name: Setup Node - uses: actions/setup-node@64ed1c7eab4cce3362f8c340dee64e5eaeef8f7c + uses: actions/setup-node@e33196f7422957bea03ed53f6fbb155025ffc7b8 with: node-version-file: '.nvmrc' cache: npm @@ -40,7 +40,12 @@ jobs: - name: Install dependencies run: npm ci env: - PUPPETEER_SKIP_CHROMIUM_DOWNLOAD: true + PUPPETEER_SKIP_DOWNLOAD: true + + - name: Setup Bun + uses: oven-sh/setup-bun@c7179230d018dd38c919d10d3be7fcd666ab3304 + with: + bun-version: latest - name: Update list of Google Fonts env: @@ -48,7 +53,7 @@ jobs: run: npm run workflow:fonts - name: Create Pull Request - uses: peter-evans/create-pull-request@38e0b6e68b4c852a5500a94740f0e535e0d7ba54 + uses: peter-evans/create-pull-request@153407881ec5c347639a548ade7d8ad1d6740e38 with: token: ${{ secrets.GOOGLEFORCREATORS_BOT_TOKEN }} commit-message: Update list of Google Fonts diff --git a/.github/workflows/update-product-schema.yml b/.github/workflows/update-product-schema.yml index a139f435c031..1ea4c751674f 100644 --- a/.github/workflows/update-product-schema.yml +++ b/.github/workflows/update-product-schema.yml @@ -22,12 +22,12 @@ jobs: steps: - name: Harden Runner - uses: step-security/harden-runner@1f99358870fe1c846a3ccba386cc2b2246836776 + uses: step-security/harden-runner@55d479fb1c5bcad5a4f9099a5d9f37c8857b2845 with: egress-policy: audit # TODO: change to 'egress-policy: block' after couple of runs - name: Checkout - uses: actions/checkout@8f4b7f84864484a7bf31766abe9204da3cbe65b3 + uses: actions/checkout@c85c95e3d7251135ab7dc9ce3241c5835cc595a9 with: token: ${{ secrets.GOOGLEFORCREATORS_BOT_TOKEN }} @@ -38,7 +38,7 @@ jobs: mv product.schema.json tests/phpunit/integration/data/schema.json - name: Create Pull Request - uses: peter-evans/create-pull-request@38e0b6e68b4c852a5500a94740f0e535e0d7ba54 + uses: peter-evans/create-pull-request@153407881ec5c347639a548ade7d8ad1d6740e38 with: token: ${{ secrets.GOOGLEFORCREATORS_BOT_TOKEN }} commit-message: Update Product Schema diff --git a/.github/workflows/update-templates.yml b/.github/workflows/update-templates.yml index d6ca78ac456e..360ed2642dc7 100644 --- a/.github/workflows/update-templates.yml +++ b/.github/workflows/update-templates.yml @@ -22,17 +22,17 @@ jobs: steps: - name: Harden Runner - uses: step-security/harden-runner@1f99358870fe1c846a3ccba386cc2b2246836776 + uses: step-security/harden-runner@55d479fb1c5bcad5a4f9099a5d9f37c8857b2845 with: egress-policy: audit # TODO: change to 'egress-policy: block' after couple of runs - name: Checkout - uses: actions/checkout@8f4b7f84864484a7bf31766abe9204da3cbe65b3 + uses: actions/checkout@c85c95e3d7251135ab7dc9ce3241c5835cc595a9 with: token: ${{ secrets.GOOGLEFORCREATORS_BOT_TOKEN }} - name: Setup Node - uses: actions/setup-node@64ed1c7eab4cce3362f8c340dee64e5eaeef8f7c + uses: actions/setup-node@e33196f7422957bea03ed53f6fbb155025ffc7b8 with: node-version-file: '.nvmrc' cache: npm @@ -40,13 +40,13 @@ jobs: - name: Install dependencies run: npm ci env: - PUPPETEER_SKIP_CHROMIUM_DOWNLOAD: true + PUPPETEER_SKIP_DOWNLOAD: true - name: Update story data (templates, text sets, FTUE) run: npm run workflow:migrate - name: Create Pull Request - uses: peter-evans/create-pull-request@38e0b6e68b4c852a5500a94740f0e535e0d7ba54 + uses: peter-evans/create-pull-request@153407881ec5c347639a548ade7d8ad1d6740e38 with: token: ${{ secrets.GOOGLEFORCREATORS_BOT_TOKEN }} commit-message: Migrate templates and text sets to latest version diff --git a/.phpstorm.meta.php b/.phpstorm.meta.php index bf4f3908d2b9..49ea6f20532c 100644 --- a/.phpstorm.meta.php +++ b/.phpstorm.meta.php @@ -13,6 +13,7 @@ 'amp_story_player_assets' => \Google\Web_Stories\AMP_Story_Player_Assets::class, 'adsense' => \Google\Web_Stories\AdSense::class, 'ad_manager' => \Google\Web_Stories\Ad_Manager::class, + 'mgid' => \Google\Web_Stories\Mgid::class, 'admin' => \Google\Web_Stories\Admin\Admin::class, 'admin.revisions' => \Google\Web_Stories\Admin\Revisions::class, 'analytics' => \Google\Web_Stories\Analytics::class, @@ -25,6 +26,7 @@ 'embed_shortcode' => \Google\Web_Stories\Shortcode\Embed_Shortcode::class, 'experiments' => \Google\Web_Stories\Experiments::class, 'integrations.amp' => \Google\Web_Stories\Integrations\AMP::class, + 'integrations.ezoic' => \Google\Web_Stories\Integrations\Ezoic::class, 'integrations.jetpack' => \Google\Web_Stories\Integrations\Jetpack::class, 'integrations.newrelic' => \Google\Web_Stories\Integrations\New_Relic::class, 'integrations.nextgen_gallery' => \Google\Web_Stories\Integrations\NextGen_Gallery::class, diff --git a/.storybook/main.cjs b/.storybook/main.cjs index b9814e917c89..1f4be2e23830 100644 --- a/.storybook/main.cjs +++ b/.storybook/main.cjs @@ -17,20 +17,37 @@ /** * External dependencies */ +const { readFileSync } = require('fs'); const webpack = require('webpack'); const CircularDependencyPlugin = require('circular-dependency-plugin'); +const { loadCsf } = require('@storybook/csf-tools'); +/** @type { import('@storybook/react-webpack5').StorybookConfig } */ module.exports = { stories: [ - './stories/**/*.js', - '../packages/dashboard/src/**/stories/*.@(js|mdx)', - '../packages/story-editor/src/**/stories/*.@(js|mdx)', - '../packages/wp-dashboard/src/**/stories/*.@(js|mdx)', - '../packages/wp-story-editor/src/**/stories/*.@(js|mdx)', - '../packages/activation-notice/src/**/stories/*.@(js|mdx)', - '../packages/design-system/src/**/stories/*.@(js|mdx)', - '../packages/animation/src/**/stories/*.@(js|mdx)', + './stories/playground/*/(index|preview).js', + '../packages/dashboard/src/**/stories/index.js', + '../packages/story-editor/src/**/stories/index.js', + '../packages/wp-dashboard/src/**/stories/index.js', + '../packages/wp-story-editor/src/**/stories/index.js', + '../packages/activation-notice/src/**/stories/index.js', + '../packages/design-system/src/**/stories/index.js', + '../packages/animation/src/**/stories/*.js', ], + storyIndexers: (indexers) => { + const indexer = (fileName, opts) => { + const code = readFileSync(fileName, { encoding: 'utf-8' }); + return loadCsf(code, { ...opts, fileName }).parse(); + }; + + return [ + { + test: /stories\/.*\.js$/, + indexer, + }, + ...(indexers || []), + ]; + }, addons: [ '@storybook/addon-a11y/register', { @@ -45,19 +62,24 @@ module.exports = { toolbars: true, }, }, - '@storybook/addon-storysource/register', + '@storybook/addon-storysource', ], - framework: '@storybook/react', + framework: { + name: '@storybook/react-webpack5', + options: {}, + }, core: { - builder: 'webpack5', disableTelemetry: true, }, + docs: { + disabled: true, + }, //eslint-disable-next-line require-await -- Negligible. - webpackFinal: async (config) => { + webpackFinal: async (webpackConfig) => { // webpack < 5 used to include polyfills for node.js core modules by default. // Prevent ModuleNotFoundError for this dependency. - config.resolve = { - ...config.resolve, + webpackConfig.resolve = { + ...webpackConfig.resolve, // Fixes resolving packages in the monorepo so we use the "src" folder, not "dist". // This should be sync'd with the config in `webpack.config.cjs`. exportsFields: ['customExports', 'exports'], @@ -68,13 +90,14 @@ module.exports = { url: false, module: false, assert: false, + perf_hooks: false, }, }; // Avoid having to provide full file extension for imports. // See https://webpack.js.org/configuration/module/#resolvefullyspecified - config.module.rules = config.module.rules.map((rule) => ({ + webpackConfig.module.rules = webpackConfig.module.rules.map((rule) => ({ ...rule, resolve: { ...rule.resolve, @@ -83,7 +106,7 @@ module.exports = { })); // These should be sync'd with the config in `webpack.config.cjs`. - config.plugins.push( + webpackConfig.plugins.push( new webpack.DefinePlugin({ WEB_STORIES_CI: JSON.stringify(process.env.CI), WEB_STORIES_ENV: JSON.stringify(process.env.NODE_ENV), @@ -103,8 +126,7 @@ module.exports = { ); // These should be sync'd with the config in `webpack.config.cjs`. - - config.plugins.push( + webpackConfig.plugins.push( new webpack.DefinePlugin({ WEB_STORIES_CI: JSON.stringify(process.env.CI), WEB_STORIES_ENV: JSON.stringify(process.env.NODE_ENV), @@ -123,7 +145,7 @@ module.exports = { }) ); - config.plugins.push( + webpackConfig.plugins.push( new CircularDependencyPlugin({ // exclude detection of files based on a RegExp exclude: /a\.js|node_modules/, @@ -138,10 +160,20 @@ module.exports = { ); // Ensure SVGR is the only loader used for files with .svg extension. - const assetRule = config.module.rules.find(({ test }) => test.test('.svg')); + const assetRule = webpackConfig.module.rules.find(({ test }) => { + if (!test) { + return false; + } + + if (Array.isArray(test)) { + return test.every((t) => t.test('.svg')); + } + + return test.test('.svg'); + }); assetRule.exclude = /\.svg/; - config.module.rules.unshift( + webpackConfig.module.rules.unshift( { test: /\.svg$/, // Use asset SVG and SVGR together. @@ -223,7 +255,6 @@ module.exports = { }, } ); - - return config; + return webpackConfig; }, }; diff --git a/.storybook/preview.js b/.storybook/preview.js index 5a6e485955c2..108e029b2e67 100644 --- a/.storybook/preview.js +++ b/.storybook/preview.js @@ -56,90 +56,95 @@ window.wp.media = { const { ipad, ipad10p, ipad12p } = INITIAL_VIEWPORTS; -export const parameters = { - a11y: { - element: '#root', - config: {}, - options: {}, - manual: true, - }, - viewport: { - viewports: { - ipad, - ipad10p, - ipad12p, +/** @type { import('@storybook/react').Preview } */ +const preview = { + parameters: { + a11y: { + element: '#root', + config: {}, + options: {}, + manual: true, + }, + viewport: { + viewports: { + ipad, + ipad10p, + ipad12p, + }, + }, + backgrounds: { + default: 'Light', + values: [ + { name: 'Light', value: '#fff', default: true }, + { name: 'Dark', value: 'rgba(0, 0, 0, 0.9)', default: true }, + ], }, }, - backgrounds: { - default: 'Light', - values: [ - { name: 'Light', value: '#fff', default: true }, - { name: 'Dark', value: 'rgba(0, 0, 0, 0.9)', default: true }, - ], - }, -}; -export const decorators = [ - (Story, context) => { - const { id } = context; - // TODO(#10380): Replacement add-on for RTL feature - const isRTL = false; + decorators: [ + (Story, context) => { + const { id } = context; + // TODO(#10380): Replacement add-on for RTL feature + const isRTL = false; - const isDesignSystemStorybook = id.startsWith('designsystem'); - const isDashboardStorybook = id.startsWith('dashboard'); + const isDesignSystemStorybook = id.startsWith('designsystem'); + const isDashboardStorybook = id.startsWith('dashboard'); - if (isDashboardStorybook) { - return ( - - Promise.resolve({ id: 1 }), - }, - editStoryURL: 'editStory', - isRTL, - styleConstants: { - topOffset: 0, - }, + if (isDashboardStorybook) { + return ( + - - - - - {Story()} - - - - ); - } + Promise.resolve({ id: 1 }), + }, + editStoryURL: 'editStory', + isRTL, + styleConstants: { + topOffset: 0, + }, + }} + > + + + + + {Story()} + + + + ); + } + + if (isDesignSystemStorybook) { + // override darkMode colors + const dsTheme = { ...designSystemTheme, colors: lightMode }; + return ( + + + + {Story()} + + ); + } - if (isDesignSystemStorybook) { - // override darkMode colors - const dsTheme = { ...designSystemTheme, colors: lightMode }; return ( - - - - {Story()} + + + + + {Story()} + ); - } + }, + ], +}; - return ( - - - - - {Story()} - - - ); - }, -]; +export default preview; diff --git a/.storybook/stories/playground/dashboard/index.js b/.storybook/stories/playground/dashboard/index.js index 47913433b598..e0424d9b601f 100644 --- a/.storybook/stories/playground/dashboard/index.js +++ b/.storybook/stories/playground/dashboard/index.js @@ -108,23 +108,25 @@ const useClearHash = () => { } }; -export const _default = () => { - useClearHash(); +export const _default = { + render: function Render() { + useClearHash(); - const config = { - newStoryURL: linkHrefTo('Playground/Stories Editor', 'default'), - apiCallbacks: { - fetchStories, - getTaxonomies, - getTaxonomyTerms, - getAuthors, - }, - }; + const config = { + newStoryURL: linkHrefTo('Playground/Stories Editor', 'default'), + apiCallbacks: { + fetchStories, + getTaxonomies, + getTaxonomyTerms, + getAuthors, + }, + }; - return ( - - - - - ); + return ( + + + + + ); + }, }; diff --git a/.storybook/stories/playground/story-editor/header/buttons/preview.js b/.storybook/stories/playground/story-editor/header/buttons/preview.js index e71daf51f8c0..ddd0f452ef52 100644 --- a/.storybook/stories/playground/story-editor/header/buttons/preview.js +++ b/.storybook/stories/playground/story-editor/header/buttons/preview.js @@ -21,9 +21,9 @@ import { hrefTo } from '@storybook/addon-links'; import { Tooltip, useStory } from '@googleforcreators/story-editor'; import { Button, - BUTTON_SIZES, - BUTTON_TYPES, - BUTTON_VARIANTS, + ButtonSize, + ButtonType, + ButtonVariant, Icons, } from '@googleforcreators/design-system'; @@ -76,9 +76,9 @@ function PreviewButton() { return ( -
- - - - - - ); + +
+ + + + + + ); + }, }; diff --git a/packages/dashboard/src/app/views/exploreTemplates/content/stories/index.js b/packages/dashboard/src/app/views/exploreTemplates/content/stories/index.js index 618d8eb64d3b..b91145760da6 100644 --- a/packages/dashboard/src/app/views/exploreTemplates/content/stories/index.js +++ b/packages/dashboard/src/app/views/exploreTemplates/content/stories/index.js @@ -66,47 +66,53 @@ export default { }, }, }; -export const _default = (args) => { - const { pageSize } = usePagePreviewSize({ - isGrid: true, - }); - const templateActions = { - handleDetailsToggle: args.handleDetailsToggle, - switchToTemplateByOffset: args.switchToTemplateByOffset, - }; - const page = { - set: args.set, - requestNextPage: args.requestNextPage, - value: args.pageValue, - }; - const search = { - setKeyword: args.setKeyword, - keyword: args.searchKeyword, - }; - const view = { - pageSize, - style: args.viewStyle, - }; - const defaultNestedProps = { - templateActions, - page, - search, - view, - }; +export const _default = { + render: function Render(args) { + const { pageSize } = usePagePreviewSize({ + isGrid: true, + }); + const templateActions = { + handleDetailsToggle: args.handleDetailsToggle, + switchToTemplateByOffset: args.switchToTemplateByOffset, + }; + const page = { + set: args.set, + requestNextPage: args.requestNextPage, + value: args.pageValue, + }; + const search = { + setKeyword: args.setKeyword, + keyword: args.searchKeyword, + }; + const view = { + pageSize, + style: args.viewStyle, + }; - return ( - - - - - - ); + const defaultNestedProps = { + templateActions, + page, + search, + view, + }; + + return ( + + + + + + ); + }, }; -export const NoSearchResults = _default.bind({}); -NoSearchResults.args = { - allPagesFetched: true, - totalTemplates: 0, - searchKeyword: 'polar bears', +export const NoSearchResults = { + render: _default, + + args: { + allPagesFetched: true, + totalTemplates: 0, + searchKeyword: 'polar bears', + }, }; diff --git a/packages/dashboard/src/app/views/exploreTemplates/header/stories/index.js b/packages/dashboard/src/app/views/exploreTemplates/header/stories/index.js index 0e102356c0e4..1685ae5a7aab 100644 --- a/packages/dashboard/src/app/views/exploreTemplates/header/stories/index.js +++ b/packages/dashboard/src/app/views/exploreTemplates/header/stories/index.js @@ -58,48 +58,54 @@ export default { }, }; -export const _default = (args) => { - const filter = { - value: args.filterValue, - }; - const sort = { - value: args.sortValue, - set: args.setSort, - }; - const search = { - keyword: args.keyword, - setKeyword: args.setKeyword, - }; - const view = { - style: args.style, - pageSize: { width: 210, height: 316 }, - }; - const page = { - value: 1, - set: args.setPage, - requestNextPage: args.requestNextPage, - }; +export const _default = { + render: function Render(args) { + const filter = { + value: args.filterValue, + }; + const sort = { + value: args.sortValue, + set: args.setSort, + }; + const search = { + keyword: args.keyword, + setKeyword: args.setKeyword, + }; + const view = { + style: args.style, + pageSize: { width: 210, height: 316 }, + }; + const page = { + value: 1, + set: args.setPage, + requestNextPage: args.requestNextPage, + }; - const defaultProps = { - allPagesFetched: false, - isLoading: false, - page: page, - search: search, - templates: formattedTemplatesArray, - sort: sort, - filter: filter, - view: view, - totalTemplates: 3, - }; - return ( - - -
- - - ); + const defaultProps = { + allPagesFetched: false, + isLoading: false, + page: page, + search: search, + templates: formattedTemplatesArray, + sort: sort, + filter: filter, + view: view, + totalTemplates: 3, + }; + return ( + + +
+ + + ); + }, }; -export const ActiveSearch = _default.bind({}); -ActiveSearch.args = { - keyword: 'demo search', + +export const ActiveSearch = { + render: _default, + + args: { + keyword: 'demo search', + }, }; diff --git a/packages/dashboard/src/app/views/exploreTemplates/karma/exploreTemplates.karma.js b/packages/dashboard/src/app/views/exploreTemplates/karma/exploreTemplates.karma.js index a00887c5cba6..04bda983c505 100644 --- a/packages/dashboard/src/app/views/exploreTemplates/karma/exploreTemplates.karma.js +++ b/packages/dashboard/src/app/views/exploreTemplates/karma/exploreTemplates.karma.js @@ -211,6 +211,10 @@ describe('Grid view', () => { ); expect(filterableTagTemplate).toBeDefined(); + // As per PR#13301, it is required to edit search-input to get clearInput to be active + await fixture.events.focus(searchInput); + await fixture.events.keyboard.type('Test Tag...'); + // Clear input const clearInput = fixture.screen.getByLabelText('Clear Search'); await fixture.events.click(clearInput); diff --git a/packages/dashboard/src/app/views/exploreTemplates/modal/templateDetails/content/stories/index.js b/packages/dashboard/src/app/views/exploreTemplates/modal/templateDetails/content/stories/index.js index 109cde5f6b52..61d8e36b3ab7 100644 --- a/packages/dashboard/src/app/views/exploreTemplates/modal/templateDetails/content/stories/index.js +++ b/packages/dashboard/src/app/views/exploreTemplates/modal/templateDetails/content/stories/index.js @@ -34,12 +34,16 @@ export default { }, }; -export const _default = (args) => ( - -); +export const _default = { + render: function Render(args) { + return ( + + ); + }, +}; diff --git a/packages/dashboard/src/app/views/exploreTemplates/modal/templateDetails/header/stories/index.js b/packages/dashboard/src/app/views/exploreTemplates/modal/templateDetails/header/stories/index.js index 161255928422..6c17fa35412b 100644 --- a/packages/dashboard/src/app/views/exploreTemplates/modal/templateDetails/header/stories/index.js +++ b/packages/dashboard/src/app/views/exploreTemplates/modal/templateDetails/header/stories/index.js @@ -39,12 +39,14 @@ const StorybookLayoutContainer = styled.div` height: 100vh; `; -export const _default = (args) => { - return ( - - -
- - - ); +export const _default = { + render: function Render(args) { + return ( + + +
+ + + ); + }, }; diff --git a/packages/dashboard/src/app/views/myStories/content/stories/index.js b/packages/dashboard/src/app/views/myStories/content/stories/index.js index 4729d8997052..5b937909d5ba 100644 --- a/packages/dashboard/src/app/views/myStories/content/stories/index.js +++ b/packages/dashboard/src/app/views/myStories/content/stories/index.js @@ -108,70 +108,80 @@ const StorybookLayoutContainer = styled.div` margin-top: 40px; height: 100vh; `; -export const _default = (args) => { - const { pageSize } = usePagePreviewSize({ - isGrid: args.isGrid, - thumbnailMode: args.thumbnailMode, - }); - const filter = { - status: args.filterStatus, - value: args.statusValue, - set: args.setFilter, - }; - const sort = { - value: args.sortValue, - direction: args.direction, - set: args.setSort, - setDirection: args.setDirection, - }; - const search = { - keyword: args.keyword, - setKeyword: args.setKeyword, - }; - const view = { - style: args.style, - toggleStyle: args.toggleStyle, - pageSize, - }; - const page = { - value: 1, - set: args.setPage, - requestNextPage: args.requestNextPage, - }; - const storyActions = { - duplicateStory: args.duplicateStory, - trashStory: args.trashStory, - updateStory: args.updateStory, - }; - const defaultProps = { - allPagesFetched: args.allPagesFetched, - filter: filter, - isLoading: args.isLoading, - page: page, - search: search, - sort: sort, - stories: args.stories, - storyActions: storyActions, - view: view, - }; - return ( - - - - - - - - ); +export const _default = { + render: function Render(args) { + const { pageSize } = usePagePreviewSize({ + isGrid: args.isGrid, + thumbnailMode: args.thumbnailMode, + }); + const filter = { + status: args.filterStatus, + value: args.statusValue, + set: args.setFilter, + }; + const sort = { + value: args.sortValue, + direction: args.direction, + set: args.setSort, + setDirection: args.setDirection, + }; + const search = { + keyword: args.keyword, + setKeyword: args.setKeyword, + }; + const view = { + style: args.style, + toggleStyle: args.toggleStyle, + pageSize, + }; + const page = { + value: 1, + set: args.setPage, + requestNextPage: args.requestNextPage, + }; + const storyActions = { + duplicateStory: args.duplicateStory, + trashStory: args.trashStory, + updateStory: args.updateStory, + }; + + const defaultProps = { + allPagesFetched: args.allPagesFetched, + filter: filter, + isLoading: args.isLoading, + page: page, + search: search, + sort: sort, + stories: args.stories, + storyActions: storyActions, + view: view, + }; + return ( + + + + + + + + ); + }, }; -export const NoStories = _default.bind({}); -NoStories.args = { - stories: [], +export const NoStories = { + render: _default, + + args: { + stories: [], + }, }; -export const NoSearchResult = _default.bind({}); -NoSearchResult.args = { - stories: [], - keyword: 'koalas', + +export const NoSearchResult = { + render: _default, + + args: { + stories: [], + keyword: 'koalas', + }, }; diff --git a/packages/dashboard/src/app/views/myStories/content/storyGridView/stories/index.js b/packages/dashboard/src/app/views/myStories/content/storyGridView/stories/index.js index f6981699eef5..6bc9a956baf3 100644 --- a/packages/dashboard/src/app/views/myStories/content/storyGridView/stories/index.js +++ b/packages/dashboard/src/app/views/myStories/content/storyGridView/stories/index.js @@ -49,18 +49,20 @@ export default { }, }, }; -export const _default = (args) => { - return ( - - ); +export const _default = { + render: function Render(args) { + return ( + + ); + }, }; diff --git a/packages/dashboard/src/app/views/myStories/header/stories/index.js b/packages/dashboard/src/app/views/myStories/header/stories/index.js index 675dce3ef8f6..4fbeb10b2b85 100644 --- a/packages/dashboard/src/app/views/myStories/header/stories/index.js +++ b/packages/dashboard/src/app/views/myStories/header/stories/index.js @@ -73,44 +73,46 @@ export default { }, }; -export const _default = (args) => { - const filter = { - status: args.status, - value: args.statusValue, - set: args.setFilter, - }; - const sort = { - value: args.value, - direction: args.direction, - set: args.setSort, - setDirection: args.setDirection, - }; - const search = { - keyword: args.keyword, - setKeyword: args.setKeyword, - }; - const view = { - style: args.style, - toggleStyle: args.toggleStyle, - pageSize: { width: 309, height: 206 }, - }; - const totalStoriesByStatus = { - all: args.all, - draft: args.draft, - publish: args.publish, - }; +export const _default = { + render: function Render(args) { + const filter = { + status: args.status, + value: args.statusValue, + set: args.setFilter, + }; + const sort = { + value: args.value, + direction: args.direction, + set: args.setSort, + setDirection: args.setDirection, + }; + const search = { + keyword: args.keyword, + setKeyword: args.setKeyword, + }; + const view = { + style: args.style, + toggleStyle: args.toggleStyle, + pageSize: { width: 309, height: 206 }, + }; + const totalStoriesByStatus = { + all: args.all, + draft: args.draft, + publish: args.publish, + }; - const defaultProps = { - filter, - view, - search, - stories: formattedStoriesArray, - sort, - totalStoriesByStatus, - }; - return ( - -
- - ); + const defaultProps = { + filter, + view, + search, + stories: formattedStoriesArray, + sort, + totalStoriesByStatus, + }; + return ( + +
+ + ); + }, }; diff --git a/packages/dashboard/src/app/views/shared/stories/emptyContentMessage.js b/packages/dashboard/src/app/views/shared/stories/emptyContentMessage.js index 1ee869fbff37..263a29fef088 100644 --- a/packages/dashboard/src/app/views/shared/stories/emptyContentMessage.js +++ b/packages/dashboard/src/app/views/shared/stories/emptyContentMessage.js @@ -26,6 +26,8 @@ export default { }, }; -export const _default = (args) => { - return {args.message}; +export const _default = { + render: function Render(args) { + return {args.message}; + }, }; diff --git a/packages/dashboard/src/app/views/shared/stories/pageHeading.js b/packages/dashboard/src/app/views/shared/stories/pageHeading.js index 669e4096b059..c52555aa8122 100644 --- a/packages/dashboard/src/app/views/shared/stories/pageHeading.js +++ b/packages/dashboard/src/app/views/shared/stories/pageHeading.js @@ -52,17 +52,19 @@ const InnerContent = styled.div` height: 50%; `; -export const _default = (args) => { - return ( - - - args.handleSearchChange(value)} - {...args} - > - - - - ); +export const _default = { + render: function Render(args) { + return ( + + + args.handleSearchChange(value)} + {...args} + > + + + + ); + }, }; diff --git a/packages/dashboard/src/components/cardGallery/stories/index.js b/packages/dashboard/src/components/cardGallery/stories/index.js index 57ccae1013d9..e11ab86170b4 100644 --- a/packages/dashboard/src/components/cardGallery/stories/index.js +++ b/packages/dashboard/src/components/cardGallery/stories/index.js @@ -62,10 +62,12 @@ export default { const CardGalleryContainer = styled.div` padding: 20px; `; -export const _default = (args) => { - return ( - - - - ); +export const _default = { + render: function Render(args) { + return ( + + + + ); + }, }; diff --git a/packages/dashboard/src/components/cardGrid/stories/index.js b/packages/dashboard/src/components/cardGrid/stories/index.js index ba5031c552b0..c6e01738367f 100644 --- a/packages/dashboard/src/components/cardGrid/stories/index.js +++ b/packages/dashboard/src/components/cardGrid/stories/index.js @@ -42,21 +42,23 @@ const Card = styled.div` background-color: orange; `; -export const _default = (args) => { - const StorybookGridItem = ( - - {args.message} - - ); +export const _default = { + render: function Render(args) { + const StorybookGridItem = ( + + {args.message} + + ); - const itemArray = new Array(12).fill(StorybookGridItem); + const itemArray = new Array(12).fill(StorybookGridItem); - return ( - - {itemArray.map((gridItem, index) => ( - //eslint-disable-next-line react/no-array-index-key -
{gridItem}
- ))} -
- ); + return ( + + {itemArray.map((gridItem, index) => ( + //eslint-disable-next-line react/no-array-index-key +
{gridItem}
+ ))} +
+ ); + }, }; diff --git a/packages/dashboard/src/components/cardGridItem/stories/index.js b/packages/dashboard/src/components/cardGridItem/stories/index.js index e0f214d70bd1..15515717780c 100644 --- a/packages/dashboard/src/components/cardGridItem/stories/index.js +++ b/packages/dashboard/src/components/cardGridItem/stories/index.js @@ -41,12 +41,14 @@ const Card = styled.div` background-color: orange; `; -export const _default = (args) => { - return ( - - - {args.message} - - - ); +export const _default = { + render: function Render(args) { + return ( + + + {args.message} + + + ); + }, }; diff --git a/packages/dashboard/src/components/colorList/stories/index.js b/packages/dashboard/src/components/colorList/stories/index.js index 02108c697b95..d0dea1914e72 100644 --- a/packages/dashboard/src/components/colorList/stories/index.js +++ b/packages/dashboard/src/components/colorList/stories/index.js @@ -33,13 +33,15 @@ export default { }, }; -export const _default = (args) => { - const colors = [ - { label: 'Red', color: 'red' }, - { label: 'Blue', color: 'blue' }, - { label: 'Green', color: 'green' }, - { label: 'White', color: 'white' }, - ]; +export const _default = { + render: function Render(args) { + const colors = [ + { label: 'Red', color: 'red' }, + { label: 'Blue', color: 'blue' }, + { label: 'Green', color: 'green' }, + { label: 'White', color: 'white' }, + ]; - return ; + return ; + }, }; diff --git a/packages/dashboard/src/components/dialog/stories/index.js b/packages/dashboard/src/components/dialog/stories/index.js index eeb65cad62ec..7d65a0877dc6 100644 --- a/packages/dashboard/src/components/dialog/stories/index.js +++ b/packages/dashboard/src/components/dialog/stories/index.js @@ -55,78 +55,84 @@ export default { }, }; -export const _default = (args) => { - return ( - - - { - 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.' - } - - - ); +export const _default = { + render: function Render(args) { + return ( + + + { + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.' + } + + + ); + }, }; -// eslint-disable-next-line react/prop-types -export const WithCustomAction = ({ onClickButton, onConfirmed, ...args }) => { - return ( - - - - {'Add to new post'} - - - } - {...args} - > - - { - 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.' +export const WithCustomAction = { + render: ({ onClickButton, onConfirmed, ...args }) => { + return ( + + + + {'Add to new post'} + + } - - - ); -}; -WithCustomAction.args = { - isOpen: true, - title: 'my dialog title', - href: 'https://example.com', -}; -WithCustomAction.argTypes = { - onClose: { - action: 'closed', + {...args} + > + + { + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.' + } + + + ); }, - onClickButton: { - action: 'closed', - name: 'dismiss click', + + args: { + isOpen: true, + title: 'my dialog title', + href: 'https://example.com', }, - onConfirmed: { - action: 'confirmed', - name: 'confirm click', + + argTypes: { + onClose: { + action: 'closed', + }, + onClickButton: { + action: 'closed', + name: 'dismiss click', + }, + onConfirmed: { + action: 'confirmed', + name: 'confirm click', + }, }, -}; -WithCustomAction.parameters = { - controls: { - include: [ - 'isOpen', - 'title', - 'href', - 'onClose', - 'dismiss click', - 'confirm click', - ], + + parameters: { + controls: { + include: [ + 'isOpen', + 'title', + 'href', + 'onClose', + 'dismiss click', + 'confirm click', + ], + }, }, }; diff --git a/packages/dashboard/src/components/fileUpload/stories/index.js b/packages/dashboard/src/components/fileUpload/stories/index.js index 7bc98ee71fab..1e084a2dad06 100644 --- a/packages/dashboard/src/components/fileUpload/stories/index.js +++ b/packages/dashboard/src/components/fileUpload/stories/index.js @@ -47,15 +47,17 @@ export default { }, }; -export const _default = (args) => { - return ( - - - - ); +export const _default = { + render: function Render(args) { + return ( + + + + ); + }, }; diff --git a/packages/dashboard/src/components/inlineInputForm/stories/index.js b/packages/dashboard/src/components/inlineInputForm/stories/index.js index d6038e8bfc9e..9852ab1acecb 100644 --- a/packages/dashboard/src/components/inlineInputForm/stories/index.js +++ b/packages/dashboard/src/components/inlineInputForm/stories/index.js @@ -40,12 +40,16 @@ export default { }, }; -export const _default = (args) => ( - args.onEditComplete(newValue)} - value={'some input value'} - id={'898989'} - label="my hidden input label" - {...args} - /> -); +export const _default = { + render: function Render(args) { + return ( + args.onEditComplete(newValue)} + value={'some input value'} + id={'898989'} + label="my hidden input label" + {...args} + /> + ); + }, +}; diff --git a/packages/dashboard/src/components/pageStructure/navigationComponents.js b/packages/dashboard/src/components/pageStructure/navigationComponents.js index 5e6d2e9bd90c..2e0c702ab40a 100644 --- a/packages/dashboard/src/components/pageStructure/navigationComponents.js +++ b/packages/dashboard/src/components/pageStructure/navigationComponents.js @@ -70,7 +70,9 @@ export const NavLink = styled(Link)( color: ${theme.colors.fg.secondary}; * { - transition: color 0.25s linear, stroke 0.25s linear; + transition: + color 0.25s linear, + stroke 0.25s linear; } ${active && activeLinkCss}; diff --git a/packages/dashboard/src/components/pageStructure/pageStructureComponents.js b/packages/dashboard/src/components/pageStructure/pageStructureComponents.js index 511c91e9fbed..7cc6e577426a 100644 --- a/packages/dashboard/src/components/pageStructure/pageStructureComponents.js +++ b/packages/dashboard/src/components/pageStructure/pageStructureComponents.js @@ -61,7 +61,9 @@ export const LeftRailContainer = styled.nav.attrs({ width: ${DASHBOARD_LEFT_NAV_WIDTH}px; background: ${({ theme }) => theme.colors.bg.primary}; z-index: ${Z_INDEX.LAYOUT_FIXED}; - transition: transform 0.25s ${BEZIER.outCubic}, opacity 0.25s linear; + transition: + transform 0.25s ${BEZIER.outCubic}, + opacity 0.25s linear; @media screen and (max-width: ${MIN_DASHBOARD_WIDTH}px) { padding-left: 0; diff --git a/packages/dashboard/src/components/pageStructure/stories/index.js b/packages/dashboard/src/components/pageStructure/stories/index.js index 577b5f44e43c..8bcbbf924d2b 100644 --- a/packages/dashboard/src/components/pageStructure/stories/index.js +++ b/packages/dashboard/src/components/pageStructure/stories/index.js @@ -24,13 +24,15 @@ export default { title: 'Dashboard/Components/LeftRail', }; -export const _default = () => { - return ( - - - - - - - ); +export const _default = { + render: function Render() { + return ( + + + + + + + ); + }, }; diff --git a/packages/dashboard/src/components/pageStructure/stories/menuButton.js b/packages/dashboard/src/components/pageStructure/stories/menuButton.js index b68328bf3d9c..1680e07e48ab 100644 --- a/packages/dashboard/src/components/pageStructure/stories/menuButton.js +++ b/packages/dashboard/src/components/pageStructure/stories/menuButton.js @@ -35,12 +35,14 @@ const Status = () => { return {`Sidebar Visible: ${String(state.sideBarVisible)}`}; }; -export const _default = (args) => { - return ( - - -
- -
- ); +export const _default = { + render: function Render(args) { + return ( + + +
+ +
+ ); + }, }; diff --git a/packages/dashboard/src/components/scrollToTop/stories/index.js b/packages/dashboard/src/components/scrollToTop/stories/index.js index fd66ef61a9e7..594dd76ca799 100644 --- a/packages/dashboard/src/components/scrollToTop/stories/index.js +++ b/packages/dashboard/src/components/scrollToTop/stories/index.js @@ -37,11 +37,13 @@ const Container = styled.div` background-color: blue; opacity: 0.25; `; -export const _default = () => { - return ( - - - - - ); +export const _default = { + render: function Render() { + return ( + + + + + ); + }, }; diff --git a/packages/dashboard/src/components/storyMenu/stories/index.js b/packages/dashboard/src/components/storyMenu/stories/index.js index 927a4982fdac..9b6891117b90 100644 --- a/packages/dashboard/src/components/storyMenu/stories/index.js +++ b/packages/dashboard/src/components/storyMenu/stories/index.js @@ -42,20 +42,22 @@ export default { component: StoryMenu, }; -export const _default = () => { - const [contextMenuId, setContextMenuId] = useState(-1); - return ( - -

{'Hover over me to see menu button'}

- { - setContextMenuId(-1); - }} - menuItems={STORY_CONTEXT_MENU_ITEMS} - story={{ id: 1, status: 'publish', title: 'Sample Story' }} - /> -
- ); +export const _default = { + render: function Render() { + const [contextMenuId, setContextMenuId] = useState(-1); + return ( + +

{'Hover over me to see menu button'}

+ { + setContextMenuId(-1); + }} + menuItems={STORY_CONTEXT_MENU_ITEMS} + story={{ id: 1, status: 'publish', title: 'Sample Story' }} + /> +
+ ); + }, }; diff --git a/packages/dashboard/src/components/table/stories/table.js b/packages/dashboard/src/components/table/stories/table.js index 94f68ca84aff..745357b568d9 100644 --- a/packages/dashboard/src/components/table/stories/table.js +++ b/packages/dashboard/src/components/table/stories/table.js @@ -58,26 +58,28 @@ const tableData = [ }, ]; -export const _default = (args) => { - return ( - - - - {args.tableHeaderPrimary} - {args.tableHeaderSecondary} - {args.tableHeaderTertiary} - - - - - {tableData.map((data) => ( - - {data.title} - {data.author.name} - {data.date} +export const _default = { + render: function Render(args) { + return ( +
+ + + {args.tableHeaderPrimary} + {args.tableHeaderSecondary} + {args.tableHeaderTertiary} - ))} - -
- ); + + + + {tableData.map((data) => ( + + {data.title} + {data.author.name} + {data.date} + + ))} + + + ); + }, }; diff --git a/packages/dashboard/src/components/viewStyleBar/stories/index.js b/packages/dashboard/src/components/viewStyleBar/stories/index.js index ae6b471a5b18..d68760a79426 100644 --- a/packages/dashboard/src/components/viewStyleBar/stories/index.js +++ b/packages/dashboard/src/components/viewStyleBar/stories/index.js @@ -35,6 +35,8 @@ export default { }, }; -export const _default = (args) => { - return ; +export const _default = { + render: function Render(args) { + return ; + }, }; diff --git a/packages/dashboard/src/dataUtils/formattedTemplatesArray.js b/packages/dashboard/src/dataUtils/formattedTemplatesArray.js index 7e5596671251..bbadcba037f6 100644 --- a/packages/dashboard/src/dataUtils/formattedTemplatesArray.js +++ b/packages/dashboard/src/dataUtils/formattedTemplatesArray.js @@ -96,7 +96,6 @@ const formattedTemplatesArray = [ focalX: 50, focalY: 50, type: 'text', - basedOn: '53004538-6bca-4ac6-810e-18bd81e84276', id: '51e3dfb3-fe95-4132-ade1-cd226982cf68', x: 65, y: 28, @@ -272,7 +271,6 @@ const formattedTemplatesArray = [ focalX: 50, focalY: 50, type: 'text', - basedOn: '53004538-6bca-4ac6-810e-18bd81e84276', id: '51e3dfb3-fe95-4132-ade1-cd226982cf68', x: 65, y: 28, @@ -448,7 +446,6 @@ const formattedTemplatesArray = [ focalX: 50, focalY: 50, type: 'text', - basedOn: '53004538-6bca-4ac6-810e-18bd81e84276', id: '51e3dfb3-fe95-4132-ade1-cd226982cf68', x: 65, y: 28, @@ -623,7 +620,6 @@ const formattedTemplatesArray = [ focalX: 50, focalY: 50, type: 'text', - basedOn: '53004538-6bca-4ac6-810e-18bd81e84276', id: '51e3dfb3-fe95-4132-ade1-cd226982cf68', x: 65, y: 28, @@ -798,7 +794,6 @@ const formattedTemplatesArray = [ focalX: 50, focalY: 50, type: 'text', - basedOn: '53004538-6bca-4ac6-810e-18bd81e84276', id: '51e3dfb3-fe95-4132-ade1-cd226982cf68', x: 65, y: 28, @@ -973,7 +968,6 @@ const formattedTemplatesArray = [ focalX: 50, focalY: 50, type: 'text', - basedOn: '53004538-6bca-4ac6-810e-18bd81e84276', id: '51e3dfb3-fe95-4132-ade1-cd226982cf68', x: 65, y: 28, @@ -1148,7 +1142,6 @@ const formattedTemplatesArray = [ focalX: 50, focalY: 50, type: 'text', - basedOn: '53004538-6bca-4ac6-810e-18bd81e84276', id: '51e3dfb3-fe95-4132-ade1-cd226982cf68', x: 65, y: 28, @@ -1364,7 +1357,6 @@ const formattedTemplatesArray = [ focalX: 50, focalY: 50, type: 'text', - basedOn: '53004538-6bca-4ac6-810e-18bd81e84276', id: '51e3dfb3-fe95-4132-ade1-cd226982cf68', x: 65, y: 28, @@ -1581,7 +1573,6 @@ const formattedTemplatesArray = [ focalX: 50, focalY: 50, type: 'text', - basedOn: '53004538-6bca-4ac6-810e-18bd81e84276', id: '51e3dfb3-fe95-4132-ade1-cd226982cf68', x: 65, y: 28, @@ -1797,7 +1788,6 @@ const formattedTemplatesArray = [ focalX: 50, focalY: 50, type: 'text', - basedOn: '53004538-6bca-4ac6-810e-18bd81e84276', id: '51e3dfb3-fe95-4132-ade1-cd226982cf68', x: 65, y: 28, @@ -2013,7 +2003,6 @@ const formattedTemplatesArray = [ focalX: 50, focalY: 50, type: 'text', - basedOn: '53004538-6bca-4ac6-810e-18bd81e84276', id: '51e3dfb3-fe95-4132-ade1-cd226982cf68', x: 65, y: 28, @@ -2229,7 +2218,6 @@ const formattedTemplatesArray = [ focalX: 50, focalY: 50, type: 'text', - basedOn: '53004538-6bca-4ac6-810e-18bd81e84276', id: '51e3dfb3-fe95-4132-ade1-cd226982cf68', x: 65, y: 28, @@ -2445,7 +2433,6 @@ const formattedTemplatesArray = [ focalX: 50, focalY: 50, type: 'text', - basedOn: '53004538-6bca-4ac6-810e-18bd81e84276', id: '51e3dfb3-fe95-4132-ade1-cd226982cf68', x: 65, y: 28, @@ -2661,7 +2648,6 @@ const formattedTemplatesArray = [ focalX: 50, focalY: 50, type: 'text', - basedOn: '53004538-6bca-4ac6-810e-18bd81e84276', id: '51e3dfb3-fe95-4132-ade1-cd226982cf68', x: 65, y: 28, diff --git a/packages/dashboard/src/icons/stories/index.js b/packages/dashboard/src/icons/stories/index.js index e0961762a52a..e26135cbe120 100644 --- a/packages/dashboard/src/icons/stories/index.js +++ b/packages/dashboard/src/icons/stories/index.js @@ -41,19 +41,21 @@ const IconsList = styled.ul` } `; -export const _default = () => { - return ( - - {Object.keys(Icons).map((iconName) => { - // eslint-disable-next-line import/namespace - const Icon = Icons[iconName]; - return ( -
  • - - {iconName} -
  • - ); - })} -
    - ); +export const _default = { + render: function Render() { + return ( + + {Object.keys(Icons).map((iconName) => { + // eslint-disable-next-line import/namespace + const Icon = Icons[iconName]; + return ( +
  • + + {iconName} +
  • + ); + })} +
    + ); + }, }; diff --git a/packages/dashboard/src/karma/apiProviderFixture.js b/packages/dashboard/src/karma/apiProviderFixture.js index 08b99c96df76..7b8f3a3ca785 100644 --- a/packages/dashboard/src/karma/apiProviderFixture.js +++ b/packages/dashboard/src/karma/apiProviderFixture.js @@ -26,7 +26,7 @@ import { uniqueEntriesByKey } from '@googleforcreators/design-system'; * Internal dependencies */ import ApiContext from '../app/api/context'; -import { defaultStoriesState } from '../app/reducer/stories'; +import { defaultStoriesState } from '../app/reducer/story'; import formattedStoriesArray from '../dataUtils/formattedStoriesArray'; import formattedTaxonomiesArray from '../dataUtils/formattedTaxonomiesArray'; import formattedTaxonomyTermsObject from '../dataUtils/formattedTaxonomyTermsObject'; diff --git a/packages/date/package.json b/packages/date/package.json index bbcea68abfc1..76e99997dfd0 100644 --- a/packages/date/package.json +++ b/packages/date/package.json @@ -2,7 +2,7 @@ "name": "@googleforcreators/date", "description": "Date-handling package, a tiny wrapper around date-fns.", "private": false, - "version": "0.1.202303271448", + "version": "0.1.202306211149", "author": { "name": "Google", "url": "https://creators.google/" @@ -39,7 +39,7 @@ }, "dependencies": { "@googleforcreators/i18n": "*", - "date-fns": "^2.29.3", + "date-fns": "^2.30.0", "date-fns-tz": "^2.0.0" }, "devDependencies": { diff --git a/packages/date/src/settings.ts b/packages/date/src/settings.ts index c5fc67cb0b42..93dce5fff336 100644 --- a/packages/date/src/settings.ts +++ b/packages/date/src/settings.ts @@ -45,7 +45,7 @@ type Settings = { string, string, string, - string + string, ]; monthsShort?: readonly [ string, @@ -59,7 +59,7 @@ type Settings = { string, string, string, - string + string, ]; weekdays?: readonly [string, string, string, string, string, string, string]; weekdaysShort?: readonly [ @@ -69,7 +69,7 @@ type Settings = { string, string, string, - string + string, ]; weekdaysInitials?: readonly [ string, @@ -78,7 +78,7 @@ type Settings = { string, string, string, - string + string, ]; }; diff --git a/packages/date/src/third_party/buildLocalizeFn.ts b/packages/date/src/third_party/buildLocalizeFn.ts index 753398894081..c6af37f98323 100644 --- a/packages/date/src/third_party/buildLocalizeFn.ts +++ b/packages/date/src/third_party/buildLocalizeFn.ts @@ -46,13 +46,15 @@ type LocaleDayPeriod = type LocaleUnit = Era | Quarter | Month | Day | LocaleDayPeriod; -type LocalizeUnitIndex = U extends LocaleUnit +type LocalizeUnitIndex = U extends LocaleUnit ? LocalizeUnitValuesIndex> : number; type LocalizeFn< - Result extends LocaleUnit | number, - ArgCallback extends BuildLocalizeFnArgCallback | undefined = undefined + Result extends LocaleUnit, + ArgCallback extends + | BuildLocalizeFnArgCallback + | undefined = undefined, > = ( value: ArgCallback extends undefined ? Result @@ -77,7 +79,7 @@ type LocalizeDayValues = readonly [ string, string, string, - string + string, ]; type LocalizeMonthValues = readonly [ @@ -92,7 +94,7 @@ type LocalizeMonthValues = readonly [ string, string, string, - string + string, ]; type LocalizeUnitValuesIndex> = @@ -124,13 +126,13 @@ type LocalizePeriodValuesMap = { [pattern in LocalePatternWidth]?: LocalizeUnitValues; }; -type BuildLocalizeFnArgCallback = ( +type BuildLocalizeFnArgCallback = ( value: Result ) => LocalizeUnitIndex; type BuildLocalizeFnArgs< Result extends LocaleUnit, - ArgCallback extends BuildLocalizeFnArgCallback | undefined + ArgCallback extends BuildLocalizeFnArgCallback | undefined, > = { values: LocalizePeriodValuesMap; defaultWidth: LocalePatternWidth; @@ -142,7 +144,7 @@ type BuildLocalizeFnArgs< export default function buildLocalizeFn< Result extends LocaleUnit, - ArgCallback extends BuildLocalizeFnArgCallback | undefined + ArgCallback extends BuildLocalizeFnArgCallback | undefined, >( args: BuildLocalizeFnArgs ): LocalizeFn { diff --git a/packages/date/tsconfig.json b/packages/date/tsconfig.json index 11a87b502315..270f9416a987 100644 --- a/packages/date/tsconfig.json +++ b/packages/date/tsconfig.json @@ -5,5 +5,6 @@ "declarationDir": "dist-types" }, "references": [{ "path": "../i18n" }], + "files": ["../../node_modules/jest-extended/types/index.d.ts"], "include": ["src/**/*"] } diff --git a/packages/design-system/package.json b/packages/design-system/package.json index ad5576906a25..914d9296629f 100644 --- a/packages/design-system/package.json +++ b/packages/design-system/package.json @@ -2,7 +2,7 @@ "name": "@googleforcreators/design-system", "description": "Main UI components for the Web Stories editor and dashboard", "private": false, - "version": "0.1.202303271448", + "version": "0.1.202306211149", "author": { "name": "Google", "url": "https://creators.google/" @@ -42,23 +42,23 @@ "@googleforcreators/patterns": "*", "@googleforcreators/react": "*", "@googleforcreators/tracking": "*", - "@types/react-modal": "^3.13.1", + "@types/react-modal": "^3.16.0", "big.js": "^6.2.1", "mousetrap": "^1.6.5", "polished": "^4.2.2", "prop-types": "^15.8.1", "react-modal": "^3.16.1", "react-transition-group": "^4.4.5", - "styled-components": "^5.3.9", + "styled-components": "^5.3.11", "uuid": "^9.0.0" }, "devDependencies": { - "@storybook/addon-essentials": "^6.5.12", + "@storybook/addon-essentials": "^7.0.22", "@testing-library/react": "^12.1.5", "@testing-library/react-hooks": "^8.0.1", "@types/big.js": "^6.1.6", - "@types/react-transition-group": "^4.4.5", + "@types/react-transition-group": "^4.4.6", "@types/styled-components": "^5.1.26", - "use-debounce": "^9.0.3" + "use-debounce": "^9.0.4" } } diff --git a/packages/design-system/src/components/banner/banner.tsx b/packages/design-system/src/components/banner/banner.tsx index 164c56405ccf..99647f179ae8 100644 --- a/packages/design-system/src/components/banner/banner.tsx +++ b/packages/design-system/src/components/banner/banner.tsx @@ -47,26 +47,34 @@ const CloseButton = styled(Button)` align-self: flex-start; `; +const CloseButtonPlaceholder = styled.div` + grid-area: closeButton; + justify-self: end; + align-self: flex-start; + width: 32px; + height: 32px; +`; + const Container = styled.div` display: grid; width: 100%; min-height: 60px; - grid-template-columns: 104px 1fr auto; - grid-column-gap: 32px; - grid-template-areas: 'title content closeButton'; align-items: baseline; padding: 6px 8px; background-color: ${({ theme }) => theme.colors.gray[5]}; border-radius: ${({ theme }) => theme.borders.radius.medium}; max-height: 184px; - border-radius: 0; grid-template-columns: 1fr 32px; grid-template-rows: 3; grid-column-gap: 0; grid-template-areas: '. closeButton' 'title title' 'content content'; text-align: center; + & + & { + margin-top: 18px; + } + ${Title} { padding-left: 0; margin-top: -10px; @@ -80,7 +88,7 @@ const Container = styled.div` interface BannerProps { closeButtonLabel: string; title: string; - onClose: () => void; + onClose?: () => void; } const Banner = forwardRef( @@ -99,15 +107,19 @@ const Banner = forwardRef( {title} - - - + {onClose ? ( + + + + ) : ( + + )} {children} ); diff --git a/packages/design-system/src/components/banner/stories/index.js b/packages/design-system/src/components/banner/stories/index.js index ca22b51bfb97..6222fce86a64 100644 --- a/packages/design-system/src/components/banner/stories/index.js +++ b/packages/design-system/src/components/banner/stories/index.js @@ -34,70 +34,83 @@ export default { }, }; -// eslint-disable-next-line react/prop-types -export const _default = ({ message, ...args }) => { - return ( - - {message} - - ); -}; -// eslint-disable-next-line react/prop-types -export const EditorBanner = ({ message, ...args }) => { - return ( - args.onClose(e)} - {...args} - > - {message} - - ); -}; -EditorBanner.args = { - title: 'Animations are here!', - isDashboard: false, - message: - 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.', -}; -// eslint-disable-next-line react/prop-types -export const DashboardBanner = ({ message, ...args }) => { - return ( - args.onClose(e)} - {...args} - > - - {message} - - {'Google Privacy Policy'} - - - - ); +export const _default = { + render: ({ message, ...args }) => { + return ( + + {message} + + ); + }, }; -DashboardBanner.args = { - title: 'Help improve the editor!', - isDashboard: true, - message: - 'Check the box to help us improve the Web Stories plugin by allowing tracking of product usage stats. All data are treated in accordance with ', + +export const EditorBanner = { + render: ({ message, ...args }) => { + return ( + args.onClose(e)} + {...args} + > + {message} + + ); + }, + + args: { + title: 'Animations are here!', + isDashboard: false, + message: + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.', + }, }; -// eslint-disable-next-line react/prop-types -export const BannerNoBackgroundImage = ({ message, ...args }) => { - return ( - args.onClose(e)} - {...args} - > - {message} - - ); + +export const DashboardBanner = { + render: ({ message, ...args }) => { + return ( + args.onClose(e)} + {...args} + > + + {message} + + {'Google Privacy Policy'} + + + + ); + }, + + args: { + title: 'Help improve the editor!', + isDashboard: true, + message: + 'Check the box to help us improve the Web Stories plugin by allowing tracking of product usage stats. All data are treated in accordance with ', + }, }; -BannerNoBackgroundImage.args = { - title: 'New Feature!', - isDashboard: true, - message: - 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.', + +export const BannerNoBackgroundImage = { + render: ({ message, ...args }) => { + return ( + args.onClose(e)} + {...args} + > + {message} + + ); + }, + + args: { + title: 'New Feature!', + isDashboard: true, + message: + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.', + }, }; diff --git a/packages/design-system/src/components/button/button.tsx b/packages/design-system/src/components/button/button.tsx index 6191d506d154..60dfa0547688 100644 --- a/packages/design-system/src/components/button/button.tsx +++ b/packages/design-system/src/components/button/button.tsx @@ -80,7 +80,8 @@ const base = css` color: ${({ theme }) => theme.colors.fg.disable}; } - transition: background-color ${BUTTON_TRANSITION_TIMING}, + transition: + background-color ${BUTTON_TRANSITION_TIMING}, color ${BUTTON_TRANSITION_TIMING}; `; diff --git a/packages/design-system/src/components/button/stories/index.js b/packages/design-system/src/components/button/stories/index.js index c7330ee7d1ff..d258baa18a45 100644 --- a/packages/design-system/src/components/button/stories/index.js +++ b/packages/design-system/src/components/button/stories/index.js @@ -146,15 +146,21 @@ const ButtonCombosToDisplay = (args) => ( ); -export const DarkTheme = (args) => { - return ( - - - - ); +export const DarkTheme = { + render: function Render(args) { + return ( + + + + ); + }, }; -export const LightTheme = (args) => ; +export const LightTheme = { + render: function Render(args) { + return ; + }, +}; const TOGGLE_VARIANTS = [ButtonVariant.Circle, ButtonVariant.Square]; const ToggleButtonContainer = ({ isToggled, swapToggled, type }) => ( @@ -197,53 +203,62 @@ ToggleButtonContainer.propTypes = { type: PropTypes.oneOf(Object.values(ButtonType)), }; -export const ToggleButtons = () => { - const [isToggled, setToggled] = useState(false); - const swapToggled = useCallback(() => setToggled((b) => !b), []); - return ( - <> - - +export const ToggleButtons = { + render: function Render() { + const [isToggled, setToggled] = useState(false); + const swapToggled = useCallback(() => setToggled((b) => !b), []); + return ( + <> - - - + + + - - - ); + + + + + ); + }, + + parameters: { controls: { include: [] } }, }; -ToggleButtons.parameters = { controls: { include: [] } }; - -export const PrebakedButtons = (args) => { - const [isLocked, setLocked] = useState(false); - const swapLocked = useCallback(() => setLocked((b) => !b), []); - return ( - <> - - - - - - + +export const PrebakedButtons = { + render: function Render(args) { + const [isLocked, setLocked] = useState(false); + const swapLocked = useCallback(() => setLocked((b) => !b), []); + return ( + <> - - - ); + + + + + + + + + ); + }, + + parameters: { controls: { include: [] } }, }; -PrebakedButtons.parameters = { controls: { include: [] } }; diff --git a/packages/design-system/src/components/checkbox/stories/index.js b/packages/design-system/src/components/checkbox/stories/index.js index 6fcde070a840..3148d833cb81 100644 --- a/packages/design-system/src/components/checkbox/stories/index.js +++ b/packages/design-system/src/components/checkbox/stories/index.js @@ -73,105 +73,53 @@ const Row = styled.div` } `; -export const _default = (args) => { - const [formState, setFormState] = useState({ - one: false, - two: true, - three: false, - four: true, - disabledOne: false, - disabledTwo: true, - disabledThree: false, - disabledFour: true, - }); +export const _default = { + render: function Render(args) { + const [formState, setFormState] = useState({ + one: false, + two: true, + three: false, + four: true, + disabledOne: false, + disabledTwo: true, + disabledThree: false, + disabledFour: true, + }); - const handleChange = (event) => { - const name = event.target.name; - const value = event.target.checked; + const handleChange = (event) => { + const name = event.target.name; + const value = event.target.checked; - args.handleChange(event.target.name, event); - setFormState((prevState) => ({ - ...prevState, - [name]: value, - })); - }; + args.handleChange(event.target.name, event); + setFormState((prevState) => ({ + ...prevState, + [name]: value, + })); + }; - return ( - <> - - -
    - - -
    -
    - - -
    -
    - -
    - - -
    -
    - - -
    -
    -
    - - + return ( + <> +
    -
    -