diff --git a/.circleci/config.yml b/.circleci/config.yml index b4b20dc60deb..6c415488f3ae 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -1,1148 +1,1147 @@ commands: - cancel-workflow-on-failure: - description: Cancels the entire workflow in case the previous step has failed - steps: - - run: - command: | - echo "Canceling workflow as previous step resulted in failure." - echo "To execute all checks locally, please run yarn ci-tests" - curl -X POST --header "Content-Type: application/json" "https://circleci.com/api/v2/workflow/${CIRCLE_WORKFLOW_ID}/cancel?circle-token=${WORKFLOW_CANCELER}" - name: Cancel current workflow - when: on_fail - report-workflow-on-failure: - description: Reports failures to discord - parameters: - template: - default: none - description: | - Which template to report in discord. Applicable for parallel sandbox jobs - type: string - steps: - - run: - command: git fetch --unshallow - when: on_fail - - discord/status: - fail_only: true - failure_message: $(yarn get-report-message << pipeline.parameters.workflow >> << parameters.template >>) - only_for_branches: main,next,next-release,latest-release - start-event-collector: - description: Starts the event collector - steps: - - run: - background: true - command: yarn jiti ./event-log-collector.ts - name: Start Event Collector - working_directory: scripts + cancel-workflow-on-failure: + description: Cancels the entire workflow in case the previous step has failed + steps: + - run: + command: | + echo "Canceling workflow as previous step resulted in failure." + echo "To execute all checks locally, please run yarn ci-tests" + curl -X POST --header "Content-Type: application/json" "https://circleci.com/api/v2/workflow/${CIRCLE_WORKFLOW_ID}/cancel?circle-token=${WORKFLOW_CANCELER}" + name: Cancel current workflow + when: on_fail + report-workflow-on-failure: + description: Reports failures to discord + parameters: + template: + default: none + description: | + Which template to report in discord. Applicable for parallel sandbox jobs + type: string + steps: + - run: + command: git fetch --unshallow + when: on_fail + - discord/status: + fail_only: true + failure_message: $(yarn get-report-message << pipeline.parameters.workflow >> << parameters.template >>) + only_for_branches: main,next,next-release,latest-release + start-event-collector: + description: Starts the event collector + steps: + - run: + background: true + command: yarn jiti ./event-log-collector.ts + name: Start Event Collector + working_directory: scripts executors: - sb_node_18_browsers: - docker: - - environment: - NODE_OPTIONS: --max_old_space_size=6144 - image: cimg/node:18.20.3-browsers - parameters: - class: - default: small - description: The Resource class - enum: - - small - - medium - - medium+ - - large - - xlarge - type: enum - resource_class: <> - working_directory: /tmp/storybook - sb_node_22_browsers: - docker: - - environment: - NODE_OPTIONS: --max_old_space_size=6144 - image: cimg/node:22.15.0-browsers - parameters: - class: - default: small - description: The Resource class - enum: - - small - - medium - - medium+ - - large - - xlarge - type: enum - resource_class: <> - working_directory: /tmp/storybook - sb_node_22_classic: - docker: - - environment: - NODE_OPTIONS: --max_old_space_size=6144 - image: cimg/node:22.15.0 - parameters: - class: - default: small - description: The Resource class - enum: - - small - - medium - - medium+ - - large - - xlarge - type: enum - resource_class: <> - working_directory: /tmp/storybook - sb_playwright: - docker: - - environment: - NODE_OPTIONS: --max_old_space_size=6144 - image: mcr.microsoft.com/playwright:v1.52.0-noble - parameters: - class: - default: small - description: The Resource class - enum: - - small - - medium - - medium+ - - large - - xlarge - type: enum - resource_class: <> - working_directory: /tmp/storybook + sb_node_18_browsers: + docker: + - environment: + NODE_OPTIONS: --max_old_space_size=6144 + image: cimg/node:18.20.3-browsers + parameters: + class: + default: small + description: The Resource class + enum: + - small + - medium + - medium+ + - large + - xlarge + type: enum + resource_class: <> + working_directory: /tmp/storybook + sb_node_22_browsers: + docker: + - environment: + NODE_OPTIONS: --max_old_space_size=6144 + image: cimg/node:22.15.0-browsers + parameters: + class: + default: small + description: The Resource class + enum: + - small + - medium + - medium+ + - large + - xlarge + type: enum + resource_class: <> + working_directory: /tmp/storybook + sb_node_22_classic: + docker: + - environment: + NODE_OPTIONS: --max_old_space_size=6144 + image: cimg/node:22.15.0 + parameters: + class: + default: small + description: The Resource class + enum: + - small + - medium + - medium+ + - large + - xlarge + type: enum + resource_class: <> + working_directory: /tmp/storybook + sb_playwright: + docker: + - environment: + NODE_OPTIONS: --max_old_space_size=6144 + image: mcr.microsoft.com/playwright:v1.52.0-noble + parameters: + class: + default: small + description: The Resource class + enum: + - small + - medium + - medium+ + - large + - xlarge + type: enum + resource_class: <> + working_directory: /tmp/storybook jobs: - bench-packages: - executor: - class: small - name: sb_node_22_classic - steps: - - git-shallow-clone/checkout_advanced: - clone_options: --depth 1 --verbose - - attach_workspace: - at: . - - when: - condition: - and: - - << pipeline.parameters.ghBaseBranch >> - - << pipeline.parameters.ghPrNumber >> - steps: - - run: - background: true - command: | - cd code - yarn local-registry --open - name: Verdaccio - - run: - command: | - cd code - yarn wait-on tcp:127.0.0.1:6001 - yarn wait-on tcp:127.0.0.1:6002 - name: Wait on Verdaccio - - run: - command: yarn bench-packages --base-branch << pipeline.parameters.ghBaseBranch >> --pull-request << pipeline.parameters.ghPrNumber >> --upload - name: Benchmarking packages against base branch - working_directory: scripts - - when: - condition: - or: - - not: << pipeline.parameters.ghBaseBranch >> - - not: << pipeline.parameters.ghPrNumber >> - steps: - - run: - background: true - command: | - cd code - yarn local-registry --open - name: Verdaccio - - run: - command: | - cd code - yarn wait-on tcp:127.0.0.1:6001 - yarn wait-on tcp:127.0.0.1:6002 - name: Wait on Verdaccio - - run: - command: yarn bench-packages --upload - name: Uploading package benchmarks for branch - working_directory: scripts - - store_artifacts: - path: bench/packages/results.json - - report-workflow-on-failure - - cancel-workflow-on-failure - bench-sandboxes: - executor: - class: small - name: sb_playwright - parallelism: << parameters.parallelism >> - parameters: - parallelism: - type: integer - steps: - - git-shallow-clone/checkout_advanced: - clone_options: --depth 1 --verbose - - attach_workspace: - at: . - - run: - command: | - TEMPLATE=$(yarn get-template --cadence << pipeline.parameters.workflow >> --task bench) - cd sandbox/$(yarn get-sandbox-dir --template $TEMPLATE) && yarn - name: Install sandbox dependencies - - run: - command: yarn task --task bench --template $(yarn get-template --cadence << pipeline.parameters.workflow >> --task bench) --no-link --start-from=never --junit - name: Running Bench - - run: - command: yarn upload-bench $(yarn get-template --cadence << pipeline.parameters.workflow >> --task bench) << pipeline.parameters.ghPrNumber >> << pipeline.parameters.ghBaseBranch >> - name: Uploading results - - report-workflow-on-failure: - template: $(yarn get-template --cadence << pipeline.parameters.workflow >> --task bench) - build: - executor: - class: large - name: sb_node_22_classic - steps: - - git-shallow-clone/checkout_advanced: - clone_options: --depth 1 --verbose - - restore_cache: - keys: - - build-yarn-2-cache-v5--{{ checksum "code/yarn.lock" }}--{{ checksum "scripts/yarn.lock" }} - name: Restore Yarn cache - - run: - command: | - yarn task --task compile --start-from=auto --no-link --debug - git diff --exit-code - yarn dedupe --check - name: Compile + bench-packages: + executor: + class: small + name: sb_node_22_classic + steps: + - git-shallow-clone/checkout_advanced: + clone_options: --depth 1 --verbose + - attach_workspace: + at: . + - when: + condition: + and: + - << pipeline.parameters.ghBaseBranch >> + - << pipeline.parameters.ghPrNumber >> + steps: - run: + background: true command: | - cd code - yarn local-registry --publish - name: Publish to Verdaccio - - report-workflow-on-failure - - store_artifacts: - path: code/bench/esbuild-metafiles - - save_cache: - key: build-yarn-2-cache-v5--{{ checksum "code/yarn.lock" }}--{{ checksum "scripts/yarn.lock" }} - name: Save Yarn cache - paths: - - ~/.yarn/berry/cache - - persist_to_workspace: - paths: - - code/node_modules - - code/addons - - scripts/node_modules - - code/bench - - code/examples - - code/frameworks - - code/lib - - code/core - - code/builders - - code/renderers - - code/presets - - .verdaccio-cache - root: . - check: - executor: - class: large - name: sb_node_22_classic - steps: - - git-shallow-clone/checkout_advanced: - clone_options: --depth 1 --verbose - - nx/set-shas: - main-branch-name: next - workflow-name: << pipeline.parameters.workflow >> - - restore_cache: - keys: - - build-yarn-2-cache-v5--{{ checksum "code/yarn.lock" }}--{{ checksum "scripts/yarn.lock" }} - name: Restore Yarn cache + cd code + yarn local-registry --open + name: Verdaccio - run: command: | - yarn task --task compile --start-from=auto --no-link --debug - name: Compile + cd code + yarn wait-on tcp:127.0.0.1:6001 + yarn wait-on tcp:127.0.0.1:6002 + name: Wait on Verdaccio - run: - command: | - yarn task --task check --start-from=auto --no-link --debug - name: Check + command: yarn bench-packages --base-branch << pipeline.parameters.ghBaseBranch >> --pull-request << pipeline.parameters.ghPrNumber >> --upload + name: Benchmarking packages against base branch + working_directory: scripts + - when: + condition: + or: + - not: << pipeline.parameters.ghBaseBranch >> + - not: << pipeline.parameters.ghPrNumber >> + steps: - run: + background: true command: | - git diff --exit-code - name: Ensure no changes pending - - report-workflow-on-failure - - cancel-workflow-on-failure - chromatic-internal-storybook: - environment: - NODE_OPTIONS: --max_old_space_size=4096 - executor: - class: large - name: sb_node_22_browsers - steps: - - checkout - - attach_workspace: - at: . - - run: - command: yarn storybook:ui:chromatic - name: Running Chromatic - working_directory: code - - report-workflow-on-failure - - store_test_results: - path: test-results - chromatic-sandboxes: - executor: - class: medium - name: sb_node_22_browsers - parallelism: << parameters.parallelism >> - parameters: - parallelism: - type: integer - steps: - - checkout - - attach_workspace: - at: . + cd code + yarn local-registry --open + name: Verdaccio - run: command: | - TEMPLATE=$(yarn get-template --cadence << pipeline.parameters.workflow >> --task chromatic) - cd sandbox/$(yarn get-sandbox-dir --template $TEMPLATE) && yarn - name: Install sandbox dependencies - - run: - command: yarn task --task chromatic --template $(yarn get-template --cadence << pipeline.parameters.workflow >> --task chromatic) --no-link --start-from=never --junit - name: Running Chromatic - - report-workflow-on-failure: - template: $(yarn get-template --cadence << pipeline.parameters.workflow >> --task chromatic) - - store_test_results: - path: test-results - coverage: - executor: - class: small - name: sb_node_22_browsers - steps: - - git-shallow-clone/checkout_advanced: - clone_options: --depth 1 --verbose - - attach_workspace: - at: . - - codecov/upload - - report-workflow-on-failure - create-sandboxes: - executor: - class: large - name: sb_node_22_browsers - parallelism: << parameters.parallelism >> - parameters: - parallelism: - type: integer - steps: - - git-shallow-clone/checkout_advanced: - clone_options: --depth 1 --verbose - - attach_workspace: - at: . + cd code + yarn wait-on tcp:127.0.0.1:6001 + yarn wait-on tcp:127.0.0.1:6002 + name: Wait on Verdaccio - run: - command: | - # Enable corepack - sudo corepack enable + command: yarn bench-packages --upload + name: Uploading package benchmarks for branch + working_directory: scripts + - store_artifacts: + path: bench/packages/results.json + - report-workflow-on-failure + - cancel-workflow-on-failure + bench-sandboxes: + executor: + class: small + name: sb_playwright + parallelism: << parameters.parallelism >> + parameters: + parallelism: + type: integer + steps: + - git-shallow-clone/checkout_advanced: + clone_options: --depth 1 --verbose + - attach_workspace: + at: . + - run: + command: | + TEMPLATE=$(yarn get-template --cadence << pipeline.parameters.workflow >> --task bench) + cd sandbox/$(yarn get-sandbox-dir --template $TEMPLATE) && yarn + name: Install sandbox dependencies + - run: + command: yarn task --task bench --template $(yarn get-template --cadence << pipeline.parameters.workflow >> --task bench) --no-link --start-from=never --junit + name: Running Bench + - run: + command: yarn upload-bench $(yarn get-template --cadence << pipeline.parameters.workflow >> --task bench) << pipeline.parameters.ghPrNumber >> << pipeline.parameters.ghBaseBranch >> + name: Uploading results + - report-workflow-on-failure: + template: $(yarn get-template --cadence << pipeline.parameters.workflow >> --task bench) + build: + executor: + class: large + name: sb_node_22_classic + steps: + - git-shallow-clone/checkout_advanced: + clone_options: --depth 1 --verbose + - restore_cache: + keys: + - build-yarn-2-cache-v5--{{ checksum "code/yarn.lock" }}--{{ checksum "scripts/yarn.lock" }} + name: Restore Yarn cache + - run: + command: | + yarn task --task compile --start-from=auto --no-link --debug + git diff --exit-code + yarn dedupe --check + name: Compile + - run: + command: | + cd code + yarn local-registry --publish + name: Publish to Verdaccio + - report-workflow-on-failure + - store_artifacts: + path: code/bench/esbuild-metafiles + - save_cache: + key: build-yarn-2-cache-v5--{{ checksum "code/yarn.lock" }}--{{ checksum "scripts/yarn.lock" }} + name: Save Yarn cache + paths: + - ~/.yarn/berry/cache + - persist_to_workspace: + paths: + - code/node_modules + - code/addons + - scripts/node_modules + - code/bench + - code/examples + - code/frameworks + - code/lib + - code/core + - code/builders + - code/renderers + - code/presets + - .verdaccio-cache + root: . + check: + executor: + class: large + name: sb_node_22_classic + steps: + - git-shallow-clone/checkout_advanced: + clone_options: --depth 1 --verbose + - nx/set-shas: + main-branch-name: next + workflow-name: << pipeline.parameters.workflow >> + - restore_cache: + keys: + - build-yarn-2-cache-v5--{{ checksum "code/yarn.lock" }}--{{ checksum "scripts/yarn.lock" }} + name: Restore Yarn cache + - run: + command: | + yarn task --task compile --start-from=auto --no-link --debug + name: Compile + - run: + command: | + yarn task --task check --start-from=auto --no-link --debug + name: Check + - run: + command: | + git diff --exit-code + name: Ensure no changes pending + - report-workflow-on-failure + - cancel-workflow-on-failure + chromatic-internal-storybook: + environment: + NODE_OPTIONS: --max_old_space_size=4096 + executor: + class: large + name: sb_node_22_browsers + steps: + - checkout + - attach_workspace: + at: . + - run: + command: yarn storybook:ui:chromatic + name: Running Chromatic + working_directory: code + - report-workflow-on-failure + - store_test_results: + path: test-results + chromatic-sandboxes: + executor: + class: medium + name: sb_node_22_browsers + parallelism: << parameters.parallelism >> + parameters: + parallelism: + type: integer + steps: + - checkout + - attach_workspace: + at: . + - run: + command: | + TEMPLATE=$(yarn get-template --cadence << pipeline.parameters.workflow >> --task chromatic) + cd sandbox/$(yarn get-sandbox-dir --template $TEMPLATE) && yarn + name: Install sandbox dependencies + - run: + command: yarn task --task chromatic --template $(yarn get-template --cadence << pipeline.parameters.workflow >> --task chromatic) --no-link --start-from=never --junit + name: Running Chromatic + - report-workflow-on-failure: + template: $(yarn get-template --cadence << pipeline.parameters.workflow >> --task chromatic) + - store_test_results: + path: test-results + coverage: + executor: + class: small + name: sb_node_22_browsers + steps: + - git-shallow-clone/checkout_advanced: + clone_options: --depth 1 --verbose + - attach_workspace: + at: . + - codecov/upload + - report-workflow-on-failure + create-sandboxes: + executor: + class: large + name: sb_node_22_browsers + parallelism: << parameters.parallelism >> + parameters: + parallelism: + type: integer + steps: + - git-shallow-clone/checkout_advanced: + clone_options: --depth 1 --verbose + - attach_workspace: + at: . + - run: + command: | + # Enable corepack + sudo corepack enable - # Verify yarn is working - which yarn - yarn --version - name: Setup Corepack - - start-event-collector - - run: - command: | - TEMPLATE=$(yarn get-template --cadence << pipeline.parameters.workflow >> --task sandbox) - yarn task --task build --template $TEMPLATE --no-link --start-from=sandbox --junit - if [[ $TEMPLATE != bench/* ]]; then - yarn --cwd scripts jiti ./event-log-checker.ts build $TEMPLATE - fi - cd sandbox/$(yarn get-sandbox-dir --template $TEMPLATE) && rm -rf node_modules - environment: - STORYBOOK_TELEMETRY_DEBUG: 1 - STORYBOOK_TELEMETRY_URL: http://localhost:6007/event-log - name: Create Sandboxes - - report-workflow-on-failure: - template: $(yarn get-template --cadence << pipeline.parameters.workflow >> --task sandbox) - - persist_to_workspace: - paths: - - sandbox/** - root: . - - store_test_results: - path: test-results - e2e-dev: - executor: - class: medium+ - name: sb_playwright - parallelism: << parameters.parallelism >> - parameters: - parallelism: - type: integer - steps: - - git-shallow-clone/checkout_advanced: - clone_options: --depth 1 --verbose - - attach_workspace: - at: . - - run: - command: | - TEMPLATE=$(yarn get-template --cadence << pipeline.parameters.workflow >> --task e2e-tests-dev) - cd sandbox/$(yarn get-sandbox-dir --template $TEMPLATE) && yarn - name: Install sandbox dependencies + # Verify yarn is working + which yarn + yarn --version + name: Setup Corepack + - start-event-collector + - run: + command: | + TEMPLATE=$(yarn get-template --cadence << pipeline.parameters.workflow >> --task sandbox) + yarn task --task build --template $TEMPLATE --no-link --start-from=sandbox --junit + if [[ $TEMPLATE != bench/* ]]; then + yarn --cwd scripts jiti ./event-log-checker.ts build $TEMPLATE + fi + cd sandbox/$(yarn get-sandbox-dir --template $TEMPLATE) && rm -rf node_modules + environment: + STORYBOOK_TELEMETRY_DEBUG: 1 + STORYBOOK_TELEMETRY_URL: http://localhost:6007/event-log + name: Create Sandboxes + - report-workflow-on-failure: + template: $(yarn get-template --cadence << pipeline.parameters.workflow >> --task sandbox) + - persist_to_workspace: + paths: + - sandbox/** + root: . + - store_test_results: + path: test-results + e2e-dev: + executor: + class: medium+ + name: sb_playwright + parallelism: << parameters.parallelism >> + parameters: + parallelism: + type: integer + steps: + - git-shallow-clone/checkout_advanced: + clone_options: --depth 1 --verbose + - attach_workspace: + at: . + - run: + command: | + TEMPLATE=$(yarn get-template --cadence << pipeline.parameters.workflow >> --task e2e-tests-dev) + cd sandbox/$(yarn get-sandbox-dir --template $TEMPLATE) && yarn + name: Install sandbox dependencies + - run: + command: | + TEST_FILES=$(circleci tests glob "code/e2e-tests/*.{test,spec}.{ts,js,mjs}") + echo "$TEST_FILES" | circleci tests run --command="xargs yarn task --task e2e-tests-dev --template $(yarn get-template --cadence << pipeline.parameters.workflow >> --task e2e-tests-dev) --no-link --start-from=never --junit" --verbose --index=0 --total=1 + name: Running E2E Tests + - report-workflow-on-failure: + template: $(yarn get-template --cadence << pipeline.parameters.workflow >> --task e2e-tests-dev) + - store_test_results: + path: test-results + - store_artifacts: + destination: playwright + path: code/playwright-results/ + e2e-production: + executor: + class: medium + name: sb_playwright + parallelism: << parameters.parallelism >> + parameters: + parallelism: + type: integer + steps: + - git-shallow-clone/checkout_advanced: + clone_options: --depth 1 --verbose + - attach_workspace: + at: . + - run: + command: | + TEMPLATE=$(yarn get-template --cadence << pipeline.parameters.workflow >> --task e2e-tests) + cd sandbox/$(yarn get-sandbox-dir --template $TEMPLATE) && yarn + name: Install sandbox dependencies + - run: + command: | + TEST_FILES=$(circleci tests glob "code/e2e-tests/*.{test,spec}.{ts,js,mjs}") + echo "$TEST_FILES" | circleci tests run --command="xargs yarn task --task e2e-tests --template $(yarn get-template --cadence << pipeline.parameters.workflow >> --task e2e-tests) --no-link --start-from=never --junit" --verbose --index=0 --total=1 + name: Running E2E Tests + - report-workflow-on-failure: + template: $(yarn get-template --cadence << pipeline.parameters.workflow >> --task e2e-tests) + - store_test_results: + path: test-results + - store_artifacts: + destination: playwright + path: code/playwright-results/ + e2e-ui: + executor: + class: medium + name: sb_playwright + steps: + - git-shallow-clone/checkout_advanced: + clone_options: --depth 1 --verbose + - attach_workspace: + at: . + - run: + command: yarn install --no-immutable + environment: + YARN_ENABLE_IMMUTABLE_INSTALLS: false + name: Install dependencies + working_directory: test-storybooks/portable-stories-kitchen-sink/react + - run: + command: yarn playwright-e2e + name: Run E2E tests + working_directory: test-storybooks/portable-stories-kitchen-sink/react + - store_test_results: + path: test-results + - store_artifacts: + destination: playwright + path: test-storybooks/portable-stories-kitchen-sink/react/test-results/ + - report-workflow-on-failure + knip: + executor: + class: large + name: sb_node_22_classic + steps: + - git-shallow-clone/checkout_advanced: + clone_options: --depth 1 --verbose + - attach_workspace: + at: . + - run: + command: | + cd code + yarn knip --no-exit-code + name: Knip + - report-workflow-on-failure + - cancel-workflow-on-failure + lint: + executor: + class: medium+ + name: sb_node_22_classic + steps: + - git-shallow-clone/checkout_advanced: + clone_options: --depth 1 --verbose + - attach_workspace: + at: . + - run: + command: | + cd code + yarn lint + name: Lint + - report-workflow-on-failure + - cancel-workflow-on-failure + pretty-docs: + executor: + class: medium + name: sb_node_22_classic + steps: + - git-shallow-clone/checkout_advanced: + clone_options: --depth 1 --verbose + - restore_cache: + keys: + - prettydocs-yarn-2-cache-v8--{{ checksum "code/yarn.lock" }}--{{ checksum "scripts/yarn.lock" }} + name: Restore Yarn cache + - run: + command: | + cd scripts + yarn install + name: Install + - save_cache: + key: prettydocs-yarn-2-cache-v8--{{ checksum "code/yarn.lock" }}--{{ checksum "scripts/yarn.lock" }} + name: Save Yarn cache + paths: + - ~/.yarn/berry/cache + - run: + command: | + cd scripts + yarn docs:prettier:check + name: Prettier + script-checks: + executor: sb_node_22_browsers + steps: + - git-shallow-clone/checkout_advanced: + clone_options: --depth 1 --verbose + - attach_workspace: + at: . + - run: + command: | + cd scripts + yarn get-template --check + name: Check parallelism count + - run: + command: | + cd scripts + yarn check + name: Type check + - run: + command: | + cd scripts + yarn test --coverage + name: Run tests + - store_test_results: + path: scripts/junit.xml + - report-workflow-on-failure + - cancel-workflow-on-failure + smoke-test-sandboxes: + executor: + class: medium + name: sb_node_18_browsers + parallelism: << parameters.parallelism >> + parameters: + parallelism: + type: integer + steps: + - git-shallow-clone/checkout_advanced: + clone_options: --depth 1 --verbose + - attach_workspace: + at: . + - run: + command: yarn task --task smoke-test --template $(yarn get-template --cadence << pipeline.parameters.workflow >> --task smoke-test) --no-link --start-from=never --junit + name: Smoke Testing Sandboxes + - report-workflow-on-failure: + template: $(yarn get-template --cadence << pipeline.parameters.workflow >> --task smoke-test) + - store_test_results: + path: test-results + test-init-empty: + executor: + class: small + name: sb_node_22_browsers + parameters: + packageManager: + type: string + template: + type: string + steps: + - git-shallow-clone/checkout_advanced: + clone_options: --depth 1 --verbose + - attach_workspace: + at: . + - when: + condition: + equal: + - npm + - << parameters.packageManager >> + steps: - run: + background: true command: | - TEST_FILES=$(circleci tests glob "code/e2e-tests/*.{test,spec}.{ts,js,mjs}") - echo "$TEST_FILES" | circleci tests run --command="xargs yarn task --task e2e-tests-dev --template $(yarn get-template --cadence << pipeline.parameters.workflow >> --task e2e-tests-dev) --no-link --start-from=never --junit" --verbose --index=0 --total=1 - name: Running E2E Tests - - report-workflow-on-failure: - template: $(yarn get-template --cadence << pipeline.parameters.workflow >> --task e2e-tests-dev) - - store_test_results: - path: test-results - - store_artifacts: - destination: playwright - path: code/playwright-results/ - e2e-production: - executor: - class: medium - name: sb_playwright - parallelism: << parameters.parallelism >> - parameters: - parallelism: - type: integer - steps: - - git-shallow-clone/checkout_advanced: - clone_options: --depth 1 --verbose - - attach_workspace: - at: . + cd code + yarn local-registry --open + name: Verdaccio - run: command: | - TEMPLATE=$(yarn get-template --cadence << pipeline.parameters.workflow >> --task e2e-tests) - cd sandbox/$(yarn get-sandbox-dir --template $TEMPLATE) && yarn - name: Install sandbox dependencies + cd code + yarn wait-on tcp:127.0.0.1:6001 + yarn wait-on tcp:127.0.0.1:6002 + name: Wait on Verdaccio - run: command: | - TEST_FILES=$(circleci tests glob "code/e2e-tests/*.{test,spec}.{ts,js,mjs}") - echo "$TEST_FILES" | circleci tests run --command="xargs yarn task --task e2e-tests --template $(yarn get-template --cadence << pipeline.parameters.workflow >> --task e2e-tests) --no-link --start-from=never --junit" --verbose --index=0 --total=1 - name: Running E2E Tests - - report-workflow-on-failure: - template: $(yarn get-template --cadence << pipeline.parameters.workflow >> --task e2e-tests) - - store_test_results: - path: test-results - - store_artifacts: - destination: playwright - path: code/playwright-results/ - e2e-ui: - executor: - class: medium - name: sb_playwright - steps: - - git-shallow-clone/checkout_advanced: - clone_options: --depth 1 --verbose - - attach_workspace: - at: . - - run: - command: yarn install --no-immutable + cd .. + mkdir empty-<< parameters.template >> + cd empty-<< parameters.template >> + npm set registry http://localhost:6001 + npx storybook init --yes --package-manager npm + npm run storybook -- --smoke-test environment: - YARN_ENABLE_IMMUTABLE_INSTALLS: false - name: Install dependencies - working_directory: test-storybooks/portable-stories-kitchen-sink/react - - run: - command: yarn playwright-e2e - name: Run E2E tests - working_directory: test-storybooks/portable-stories-kitchen-sink/react - - store_test_results: - path: test-results - - store_artifacts: - destination: playwright - path: test-storybooks/portable-stories-kitchen-sink/react/test-results/ - - report-workflow-on-failure - knip: - executor: - class: large - name: sb_node_22_classic - steps: - - git-shallow-clone/checkout_advanced: - clone_options: --depth 1 --verbose - - attach_workspace: - at: . - - run: - command: | - cd code - yarn knip --no-exit-code - name: Knip - - report-workflow-on-failure - - cancel-workflow-on-failure - lint: - executor: - class: medium+ - name: sb_node_22_classic - steps: - - git-shallow-clone/checkout_advanced: - clone_options: --depth 1 --verbose - - attach_workspace: - at: . + IN_STORYBOOK_SANDBOX: true + STORYBOOK_DISABLE_TELEMETRY: true + STORYBOOK_INIT_EMPTY_TYPE: << parameters.template >> + name: Storybook init from empty directory (NPM) + - when: + condition: + equal: + - yarn1 + - << parameters.packageManager >> + steps: - run: + background: true command: | - cd code - yarn lint - name: Lint - - report-workflow-on-failure - - cancel-workflow-on-failure - pretty-docs: - executor: - class: medium - name: sb_node_22_classic - steps: - - git-shallow-clone/checkout_advanced: - clone_options: --depth 1 --verbose - - restore_cache: - keys: - - prettydocs-yarn-2-cache-v8--{{ checksum "code/yarn.lock" }}--{{ checksum "scripts/yarn.lock" }} - name: Restore Yarn cache + cd code + yarn local-registry --open + name: Verdaccio - run: command: | - cd scripts - yarn install - name: Install - - save_cache: - key: prettydocs-yarn-2-cache-v8--{{ checksum "code/yarn.lock" }}--{{ checksum "scripts/yarn.lock" }} - name: Save Yarn cache - paths: - - ~/.yarn/berry/cache + cd code + yarn wait-on tcp:127.0.0.1:6001 + yarn wait-on tcp:127.0.0.1:6002 + name: Wait on Verdaccio - run: command: | - cd scripts - yarn docs:prettier:check - name: Prettier - script-checks: - executor: sb_node_22_browsers - steps: - - git-shallow-clone/checkout_advanced: - clone_options: --depth 1 --verbose - - attach_workspace: - at: . + cd .. + mkdir empty-<< parameters.template >> + cd empty-<< parameters.template >> + npx storybook init --yes --package-manager yarn1 + yarn storybook --smoke-test + environment: + IN_STORYBOOK_SANDBOX: true + STORYBOOK_DISABLE_TELEMETRY: true + STORYBOOK_INIT_EMPTY_TYPE: << parameters.template >> + name: Storybook init from empty directory (Yarn 1) + - when: + condition: + equal: + - yarn2 + - << parameters.packageManager >> + steps: - run: + background: true command: | - cd scripts - yarn get-template --check - name: Check parallelism count + cd code + yarn local-registry --open + name: Verdaccio - run: command: | - cd scripts - yarn check - name: Type check + cd code + yarn wait-on tcp:127.0.0.1:6001 + yarn wait-on tcp:127.0.0.1:6002 + name: Wait on Verdaccio - run: command: | - cd scripts - yarn test --coverage - name: Run tests - - store_test_results: - path: scripts/junit.xml - - report-workflow-on-failure - - cancel-workflow-on-failure - smoke-test-sandboxes: - executor: - class: medium - name: sb_node_18_browsers - parallelism: << parameters.parallelism >> - parameters: - parallelism: - type: integer - steps: - - git-shallow-clone/checkout_advanced: - clone_options: --depth 1 --verbose - - attach_workspace: - at: . - - run: - command: yarn task --task smoke-test --template $(yarn get-template --cadence << pipeline.parameters.workflow >> --task smoke-test) --no-link --start-from=never --junit - name: Smoke Testing Sandboxes - - report-workflow-on-failure: - template: $(yarn get-template --cadence << pipeline.parameters.workflow >> --task smoke-test) - - store_test_results: - path: test-results - test-init-empty: - executor: - class: small - name: sb_node_22_browsers - parameters: - packageManager: - type: string - template: - type: string - steps: - - git-shallow-clone/checkout_advanced: - clone_options: --depth 1 --verbose - - attach_workspace: - at: . - - when: - condition: - equal: - - npm - - << parameters.packageManager >> - steps: - - run: - background: true - command: | - cd code - yarn local-registry --open - name: Verdaccio - - run: - command: | - cd code - yarn wait-on tcp:127.0.0.1:6001 - yarn wait-on tcp:127.0.0.1:6002 - name: Wait on Verdaccio - - run: - command: | - cd .. - mkdir empty-<< parameters.template >> - cd empty-<< parameters.template >> - npm set registry http://localhost:6001 - npx storybook init --yes --package-manager npm - npm run storybook -- --smoke-test - environment: - IN_STORYBOOK_SANDBOX: true - STORYBOOK_DISABLE_TELEMETRY: true - STORYBOOK_INIT_EMPTY_TYPE: << parameters.template >> - name: Storybook init from empty directory (NPM) - - when: - condition: - equal: - - yarn1 - - << parameters.packageManager >> - steps: - - run: - background: true - command: | - cd code - yarn local-registry --open - name: Verdaccio - - run: - command: | - cd code - yarn wait-on tcp:127.0.0.1:6001 - yarn wait-on tcp:127.0.0.1:6002 - name: Wait on Verdaccio - - run: - command: | - cd .. - mkdir empty-<< parameters.template >> - cd empty-<< parameters.template >> - npx storybook init --yes --package-manager yarn1 - yarn storybook --smoke-test - environment: - IN_STORYBOOK_SANDBOX: true - STORYBOOK_DISABLE_TELEMETRY: true - STORYBOOK_INIT_EMPTY_TYPE: << parameters.template >> - name: Storybook init from empty directory (Yarn 1) - - when: - condition: - equal: - - yarn2 - - << parameters.packageManager >> - steps: - - run: - background: true - command: | - cd code - yarn local-registry --open - name: Verdaccio - - run: - command: | - cd code - yarn wait-on tcp:127.0.0.1:6001 - yarn wait-on tcp:127.0.0.1:6002 - name: Wait on Verdaccio - - run: - command: | - cd .. - mkdir empty-<< parameters.template >> - cd empty-<< parameters.template >> - yarn set version berry - yarn config set registry http://localhost:6001 - yarn dlx storybook init --yes --package-manager yarn2 - yarn storybook --smoke-test - environment: - IN_STORYBOOK_SANDBOX: true - STORYBOOK_DISABLE_TELEMETRY: true - STORYBOOK_INIT_EMPTY_TYPE: << parameters.template >> - name: Storybook init from empty directory (Yarn 2) - - when: - condition: - equal: - - pnpm - - << parameters.packageManager >> - steps: - - run: - background: true - command: | - cd code - yarn local-registry --open - name: Verdaccio - - run: - command: | - cd code - yarn wait-on tcp:127.0.0.1:6001 - yarn wait-on tcp:127.0.0.1:6002 - name: Wait on Verdaccio - - run: - command: | - cd .. - mkdir empty-<< parameters.template >> - cd empty-<< parameters.template >> - npm i -g pnpm - pnpm config set registry http://localhost:6001 - pnpm dlx storybook init --yes --package-manager pnpm - pnpm run storybook --smoke-test - environment: - IN_STORYBOOK_SANDBOX: true - STORYBOOK_DISABLE_TELEMETRY: true - STORYBOOK_INIT_EMPTY_TYPE: << parameters.template >> - name: Storybook init from empty directory (PNPM) - - when: - condition: - equal: - - react-vite-ts - - << parameters.template >> - steps: - - run: - background: true - command: | - cd code - yarn local-registry --open - name: Verdaccio - - run: - command: | - cd code - yarn wait-on tcp:127.0.0.1:6001 - yarn wait-on tcp:127.0.0.1:6002 - name: Wait on Verdaccio - - run: - command: | - cd .. - mkdir empty-<< parameters.template >>-no-install - cd empty-<< parameters.template >>-no-install - npx storybook init --yes --skip-install - npm install - npm run build-storybook - environment: - IN_STORYBOOK_SANDBOX: true - STORYBOOK_DISABLE_TELEMETRY: true - STORYBOOK_INIT_EMPTY_TYPE: << parameters.template >> - name: Storybook init from empty directory (--skip-install) - - report-workflow-on-failure - test-init-features: - executor: - class: small - name: sb_node_22_browsers - steps: - - git-shallow-clone/checkout_advanced: - clone_options: --depth 1 --verbose - - attach_workspace: - at: . + cd .. + mkdir empty-<< parameters.template >> + cd empty-<< parameters.template >> + yarn set version berry + yarn config set registry http://localhost:6001 + yarn dlx storybook init --yes --package-manager yarn2 + yarn storybook --smoke-test + environment: + IN_STORYBOOK_SANDBOX: true + STORYBOOK_DISABLE_TELEMETRY: true + STORYBOOK_INIT_EMPTY_TYPE: << parameters.template >> + name: Storybook init from empty directory (Yarn 2) + - when: + condition: + equal: + - pnpm + - << parameters.packageManager >> + steps: - run: background: true command: | - cd code - yarn local-registry --open + cd code + yarn local-registry --open name: Verdaccio - run: command: | - cd code - yarn wait-on tcp:127.0.0.1:6001 - yarn wait-on tcp:127.0.0.1:6002 + cd code + yarn wait-on tcp:127.0.0.1:6001 + yarn wait-on tcp:127.0.0.1:6002 name: Wait on Verdaccio - run: command: | - cd .. - mkdir features-1 - cd features-1 - npm set registry http://localhost:6001 - npx create-storybook --yes --package-manager npm --features dev docs test - npx vitest - environment: - IN_STORYBOOK_SANDBOX: true - STORYBOOK_DISABLE_TELEMETRY: true - STORYBOOK_INIT_EMPTY_TYPE: react-vite-ts - name: Storybook init for features - test-portable-stories: - executor: - class: medium - name: sb_playwright - parameters: - directory: - type: string - steps: - - git-shallow-clone/checkout_advanced: - clone_options: --depth 1 --verbose - - attach_workspace: - at: . - - run: - command: yarn install --no-immutable + cd .. + mkdir empty-<< parameters.template >> + cd empty-<< parameters.template >> + npm i -g pnpm + pnpm config set registry http://localhost:6001 + pnpm dlx storybook init --yes --package-manager pnpm + pnpm run storybook --smoke-test environment: - YARN_ENABLE_IMMUTABLE_INSTALLS: false - name: Install dependencies - working_directory: test-storybooks/portable-stories-kitchen-sink/<< parameters.directory >> - - run: - command: yarn jest - name: Run Jest tests - working_directory: test-storybooks/portable-stories-kitchen-sink/<< parameters.directory >> - - run: - command: yarn vitest - name: Run Vitest tests - working_directory: test-storybooks/portable-stories-kitchen-sink/<< parameters.directory >> - - run: - command: yarn playwright-ct - name: Run Playwright CT tests - working_directory: test-storybooks/portable-stories-kitchen-sink/<< parameters.directory >> - - run: - command: yarn cypress - name: Run Cypress CT tests - working_directory: test-storybooks/portable-stories-kitchen-sink/<< parameters.directory >> - - report-workflow-on-failure - test-runner-dev: - executor: - class: large - name: sb_playwright - parallelism: << parameters.parallelism >> - parameters: - parallelism: - type: integer - steps: - - git-shallow-clone/checkout_advanced: - clone_options: --depth 1 --verbose - - attach_workspace: - at: . - - run: - command: yarn task --task test-runner-dev --template $(yarn get-template --cadence << pipeline.parameters.workflow >> --task test-runner-dev) --no-link --start-from=never --junit - name: Running Test Runner in Dev mode - - report-workflow-on-failure: - template: $(yarn get-template --cadence << pipeline.parameters.workflow >> --task test-runner-dev) - - store_test_results: - path: test-results - test-runner-production: - executor: - class: medium+ - name: sb_playwright - parallelism: << parameters.parallelism >> - parameters: - parallelism: - type: integer - steps: - - git-shallow-clone/checkout_advanced: - clone_options: --depth 1 --verbose - - attach_workspace: - at: . + IN_STORYBOOK_SANDBOX: true + STORYBOOK_DISABLE_TELEMETRY: true + STORYBOOK_INIT_EMPTY_TYPE: << parameters.template >> + name: Storybook init from empty directory (PNPM) + - when: + condition: + equal: + - react-vite-ts + - << parameters.template >> + steps: - run: + background: true command: | - TEMPLATE=$(yarn get-template --cadence << pipeline.parameters.workflow >> --task test-runner) - cd sandbox/$(yarn get-sandbox-dir --template $TEMPLATE) && yarn - name: Install sandbox dependencies - - start-event-collector - - run: - command: yarn task --task test-runner --template $(yarn get-template --cadence << pipeline.parameters.workflow >> --task test-runner) --no-link --start-from=never --junit - environment: - STORYBOOK_TELEMETRY_DEBUG: 1 - STORYBOOK_TELEMETRY_URL: http://localhost:6007/event-log - name: Running Test Runner - - run: - command: yarn --cwd scripts jiti ./event-log-checker.ts test-run $(yarn get-template --cadence << pipeline.parameters.workflow >> --task test-runner) - name: Check Telemetry - - report-workflow-on-failure: - template: $(yarn get-template --cadence << pipeline.parameters.workflow >> --task test-runner) - - store_test_results: - path: test-results - unit-tests: - executor: - class: xlarge - name: sb_playwright - parallelism: 2 - steps: - - git-shallow-clone/checkout_advanced: - clone_options: --depth 1 --verbose - - attach_workspace: - at: . + cd code + yarn local-registry --open + name: Verdaccio - run: command: | - cd code - TEST_FILES=$(circleci tests glob "**/*.{test,spec,stories}.{ts,tsx,js,jsx,cjs}" | sed "/^e2e-tests\//d" | sed "/^node_modules\//d") - echo "$TEST_FILES" | circleci tests run --command="xargs yarn test --reporter=junit --reporter=default --outputFile=../test-results/junit-${CIRCLE_NODE_INDEX}.xml" --verbose - name: Run tests - - store_test_results: - path: test-results - - report-workflow-on-failure - - cancel-workflow-on-failure - vitest-integration: - executor: - class: xlarge - name: sb_playwright - parallelism: << parameters.parallelism >> - parameters: - parallelism: - type: integer - steps: - - git-shallow-clone/checkout_advanced: - clone_options: --depth 1 --verbose - - attach_workspace: - at: . + cd code + yarn wait-on tcp:127.0.0.1:6001 + yarn wait-on tcp:127.0.0.1:6002 + name: Wait on Verdaccio - run: command: | - TEMPLATE=$(yarn get-template --cadence << pipeline.parameters.workflow >> --task vitest-integration) - cd sandbox/$(yarn get-sandbox-dir --template $TEMPLATE) && yarn - name: Install sandbox dependencies - - start-event-collector - - run: - command: yarn task --task vitest-integration --template $(yarn get-template --cadence << pipeline.parameters.workflow >> --task vitest-integration) --no-link --start-from=never --junit + cd .. + mkdir empty-<< parameters.template >>-no-install + cd empty-<< parameters.template >>-no-install + npx storybook init --yes --skip-install + npm install + npm run build-storybook environment: - STORYBOOK_TELEMETRY_DEBUG: 1 - STORYBOOK_TELEMETRY_URL: http://localhost:6007/event-log - name: Running story tests in Vitest - - run: - command: yarn --cwd scripts jiti ./event-log-checker.ts test-run $(yarn get-template --cadence << pipeline.parameters.workflow >> --task vitest-integration) - name: Check Telemetry - - report-workflow-on-failure: - template: $(yarn get-template --cadence << pipeline.parameters.workflow >> --task vitest-integration) - - store_test_results: - path: test-results + IN_STORYBOOK_SANDBOX: true + STORYBOOK_DISABLE_TELEMETRY: true + STORYBOOK_INIT_EMPTY_TYPE: << parameters.template >> + name: Storybook init from empty directory (--skip-install) + - report-workflow-on-failure + test-init-features: + executor: + class: small + name: sb_node_22_browsers + steps: + - git-shallow-clone/checkout_advanced: + clone_options: --depth 1 --verbose + - attach_workspace: + at: . + - run: + background: true + command: | + cd code + yarn local-registry --open + name: Verdaccio + - run: + command: | + cd code + yarn wait-on tcp:127.0.0.1:6001 + yarn wait-on tcp:127.0.0.1:6002 + name: Wait on Verdaccio + - run: + command: | + cd .. + mkdir features-1 + cd features-1 + npm set registry http://localhost:6001 + npx create-storybook --yes --package-manager npm --features dev docs test + npx vitest + environment: + IN_STORYBOOK_SANDBOX: true + STORYBOOK_DISABLE_TELEMETRY: true + STORYBOOK_INIT_EMPTY_TYPE: react-vite-ts + name: Storybook init for features + test-portable-stories: + executor: + class: medium + name: sb_playwright + parameters: + directory: + type: string + steps: + - git-shallow-clone/checkout_advanced: + clone_options: --depth 1 --verbose + - attach_workspace: + at: . + - run: + command: yarn install --no-immutable + environment: + YARN_ENABLE_IMMUTABLE_INSTALLS: false + name: Install dependencies + working_directory: test-storybooks/portable-stories-kitchen-sink/<< parameters.directory >> + - run: + command: yarn jest + name: Run Jest tests + working_directory: test-storybooks/portable-stories-kitchen-sink/<< parameters.directory >> + - run: + command: yarn vitest + name: Run Vitest tests + working_directory: test-storybooks/portable-stories-kitchen-sink/<< parameters.directory >> + - run: + command: yarn playwright-ct + name: Run Playwright CT tests + working_directory: test-storybooks/portable-stories-kitchen-sink/<< parameters.directory >> + - run: + command: yarn cypress + name: Run Cypress CT tests + working_directory: test-storybooks/portable-stories-kitchen-sink/<< parameters.directory >> + - report-workflow-on-failure + test-runner-dev: + executor: + class: large + name: sb_playwright + parallelism: << parameters.parallelism >> + parameters: + parallelism: + type: integer + steps: + - git-shallow-clone/checkout_advanced: + clone_options: --depth 1 --verbose + - attach_workspace: + at: . + - run: + command: yarn task --task test-runner-dev --template $(yarn get-template --cadence << pipeline.parameters.workflow >> --task test-runner-dev) --no-link --start-from=never --junit + name: Running Test Runner in Dev mode + - report-workflow-on-failure: + template: $(yarn get-template --cadence << pipeline.parameters.workflow >> --task test-runner-dev) + - store_test_results: + path: test-results + test-runner-production: + executor: + class: medium+ + name: sb_playwright + parallelism: << parameters.parallelism >> + parameters: + parallelism: + type: integer + steps: + - git-shallow-clone/checkout_advanced: + clone_options: --depth 1 --verbose + - attach_workspace: + at: . + - run: + command: | + TEMPLATE=$(yarn get-template --cadence << pipeline.parameters.workflow >> --task test-runner) + cd sandbox/$(yarn get-sandbox-dir --template $TEMPLATE) && yarn + name: Install sandbox dependencies + - start-event-collector + - run: + command: yarn task --task test-runner --template $(yarn get-template --cadence << pipeline.parameters.workflow >> --task test-runner) --no-link --start-from=never --junit + environment: + STORYBOOK_TELEMETRY_DEBUG: 1 + STORYBOOK_TELEMETRY_URL: http://localhost:6007/event-log + name: Running Test Runner + - run: + command: yarn --cwd scripts jiti ./event-log-checker.ts test-run $(yarn get-template --cadence << pipeline.parameters.workflow >> --task test-runner) + name: Check Telemetry + - report-workflow-on-failure: + template: $(yarn get-template --cadence << pipeline.parameters.workflow >> --task test-runner) + - store_test_results: + path: test-results + unit-tests: + executor: + class: xlarge + name: sb_playwright + parallelism: 2 + steps: + - git-shallow-clone/checkout_advanced: + clone_options: --depth 1 --verbose + - attach_workspace: + at: . + - run: + command: | + cd code + TEST_FILES=$(circleci tests glob "**/*.{test,spec,stories}.{ts,tsx,js,jsx,cjs}" | sed "/^e2e-tests\//d" | sed "/^node_modules\//d") + echo "$TEST_FILES" | circleci tests run --command="xargs yarn test --reporter=junit --reporter=default --outputFile=../test-results/junit-${CIRCLE_NODE_INDEX}.xml" --verbose + name: Run tests + - store_test_results: + path: test-results + - report-workflow-on-failure + - cancel-workflow-on-failure + vitest-integration: + executor: + class: xlarge + name: sb_playwright + parallelism: << parameters.parallelism >> + parameters: + parallelism: + type: integer + steps: + - git-shallow-clone/checkout_advanced: + clone_options: --depth 1 --verbose + - attach_workspace: + at: . + - run: + command: | + TEMPLATE=$(yarn get-template --cadence << pipeline.parameters.workflow >> --task vitest-integration) + cd sandbox/$(yarn get-sandbox-dir --template $TEMPLATE) && yarn + name: Install sandbox dependencies + - start-event-collector + - run: + command: yarn task --task vitest-integration --template $(yarn get-template --cadence << pipeline.parameters.workflow >> --task vitest-integration) --no-link --start-from=never --junit + environment: + STORYBOOK_TELEMETRY_DEBUG: 1 + STORYBOOK_TELEMETRY_URL: http://localhost:6007/event-log + name: Running story tests in Vitest + - run: + command: yarn --cwd scripts jiti ./event-log-checker.ts test-run $(yarn get-template --cadence << pipeline.parameters.workflow >> --task vitest-integration) + name: Check Telemetry + - report-workflow-on-failure: + template: $(yarn get-template --cadence << pipeline.parameters.workflow >> --task vitest-integration) + - store_test_results: + path: test-results orbs: - browser-tools: circleci/browser-tools@1.4.1 - codecov: codecov/codecov@3.2.4 - discord: antonioned/discord@0.1.0 - git-shallow-clone: guitarrapc/git-shallow-clone@2.5.0 - node: circleci/node@5.2.0 - nx: nrwl/nx@1.6.2 + browser-tools: circleci/browser-tools@1.4.1 + codecov: codecov/codecov@3.2.4 + discord: antonioned/discord@0.1.0 + git-shallow-clone: guitarrapc/git-shallow-clone@2.5.0 + node: circleci/node@5.2.0 + nx: nrwl/nx@1.6.2 parameters: - ghBaseBranch: - default: next - description: The name of the base branch (the target of the PR) - type: string - ghPrNumber: - default: "" - description: The PR number - type: string - workflow: - default: skipped - description: Which workflow to run - enum: - - normal - - merged - - daily - - skipped - - docs - type: enum + ghBaseBranch: + default: next + description: The name of the base branch (the target of the PR) + type: string + ghPrNumber: + default: '' + description: The PR number + type: string + workflow: + default: skipped + description: Which workflow to run + enum: + - normal + - merged + - daily + - skipped + - docs + type: enum version: 2.1 workflows: - daily: - jobs: - - pretty-docs + daily: + jobs: + - pretty-docs + - build + - lint: + requires: - build - - lint: - requires: - - build - - knip: - requires: - - build - - bench-packages: - requires: - - build - - check - - unit-tests: - requires: - - build - - script-checks: - requires: - - build - - chromatic-internal-storybook: - requires: - - build - - create-sandboxes: - parallelism: 30 - requires: - - build - - chromatic-sandboxes: - parallelism: 27 - requires: - - create-sandboxes - - e2e-production: - parallelism: 7 - requires: - - create-sandboxes - - e2e-dev: - parallelism: 25 - requires: - - create-sandboxes - - test-runner-production: - parallelism: 25 - requires: - - create-sandboxes - - vitest-integration: - parallelism: 9 - requires: - - create-sandboxes - - test-portable-stories: - matrix: - parameters: - directory: - - react - - vue3 - - nextjs - - svelte - requires: - - build - - e2e-ui: - requires: - - build - - test-init-features: - requires: - - build - - test-init-empty: - matrix: - parameters: - packageManager: - - npm - template: - - react-vite-ts - - nextjs-ts - - vue-vite-ts - - lit-vite-ts - requires: - - build - when: - equal: - - daily - - << pipeline.parameters.workflow >> - docs: - jobs: - - pretty-docs - when: - equal: - - docs - - << pipeline.parameters.workflow >> - merged: - jobs: - - pretty-docs + - knip: + requires: - build - - lint: - requires: - - build - - knip: - requires: - - build - - bench-packages: - requires: - - build - - check - - unit-tests: - requires: - - build - - script-checks: - requires: - - build - - chromatic-internal-storybook: - requires: - - build - - coverage: - requires: - - unit-tests - - create-sandboxes: - parallelism: 17 - requires: - - build - - chromatic-sandboxes: - parallelism: 14 - requires: - - create-sandboxes - - e2e-production: - parallelism: 6 - requires: - - create-sandboxes - - e2e-dev: - parallelism: 12 - requires: - - create-sandboxes - - test-runner-production: - parallelism: 12 - requires: - - create-sandboxes - - vitest-integration: - parallelism: 5 - requires: - - create-sandboxes - - test-portable-stories: - matrix: - parameters: - directory: - - react - - vue3 - - nextjs - - svelte - requires: - - build - - e2e-ui: - requires: - - build - - test-init-features: - requires: - - build - when: - equal: - - merged - - << pipeline.parameters.workflow >> - normal: - jobs: - - pretty-docs + - bench-packages: + requires: - build - - lint: - requires: - - build - - knip: - requires: - - build - - bench-packages: - requires: - - build - - check - - unit-tests: - requires: - - build - - script-checks: - requires: - - build - - chromatic-internal-storybook: - requires: - - build - - coverage: - requires: - - unit-tests - - create-sandboxes: - parallelism: 13 - requires: - - build - - chromatic-sandboxes: - parallelism: 10 - requires: - - create-sandboxes - - e2e-production: - parallelism: 6 - requires: - - create-sandboxes - - e2e-dev: - parallelism: 8 - requires: - - create-sandboxes - - test-runner-production: - parallelism: 8 - requires: - - create-sandboxes - - vitest-integration: - parallelism: 5 - requires: - - create-sandboxes - - e2e-ui: - requires: - - build - - test-init-features: - requires: - - build - - test-portable-stories: - matrix: - parameters: - directory: - - react - - vue3 - - nextjs - - svelte - requires: - - build - when: - equal: - - normal - - << pipeline.parameters.workflow >> - + - check + - unit-tests: + requires: + - build + - script-checks: + requires: + - build + - chromatic-internal-storybook: + requires: + - build + - create-sandboxes: + parallelism: 30 + requires: + - build + - chromatic-sandboxes: + parallelism: 27 + requires: + - create-sandboxes + - e2e-production: + parallelism: 7 + requires: + - create-sandboxes + - e2e-dev: + parallelism: 25 + requires: + - create-sandboxes + - test-runner-production: + parallelism: 25 + requires: + - create-sandboxes + - vitest-integration: + parallelism: 9 + requires: + - create-sandboxes + - test-portable-stories: + matrix: + parameters: + directory: + - react + - vue3 + - nextjs + - svelte + requires: + - build + - e2e-ui: + requires: + - build + - test-init-features: + requires: + - build + - test-init-empty: + matrix: + parameters: + packageManager: + - npm + template: + - react-vite-ts + - nextjs-ts + - vue-vite-ts + - lit-vite-ts + requires: + - build + when: + equal: + - daily + - << pipeline.parameters.workflow >> + docs: + jobs: + - pretty-docs + when: + equal: + - docs + - << pipeline.parameters.workflow >> + merged: + jobs: + - pretty-docs + - build + - lint: + requires: + - build + - knip: + requires: + - build + - bench-packages: + requires: + - build + - check + - unit-tests: + requires: + - build + - script-checks: + requires: + - build + - chromatic-internal-storybook: + requires: + - build + - coverage: + requires: + - unit-tests + - create-sandboxes: + parallelism: 17 + requires: + - build + - chromatic-sandboxes: + parallelism: 14 + requires: + - create-sandboxes + - e2e-production: + parallelism: 6 + requires: + - create-sandboxes + - e2e-dev: + parallelism: 12 + requires: + - create-sandboxes + - test-runner-production: + parallelism: 12 + requires: + - create-sandboxes + - vitest-integration: + parallelism: 5 + requires: + - create-sandboxes + - test-portable-stories: + matrix: + parameters: + directory: + - react + - vue3 + - nextjs + - svelte + requires: + - build + - e2e-ui: + requires: + - build + - test-init-features: + requires: + - build + when: + equal: + - merged + - << pipeline.parameters.workflow >> + normal: + jobs: + - pretty-docs + - build + - lint: + requires: + - build + - knip: + requires: + - build + - bench-packages: + requires: + - build + - check + - unit-tests: + requires: + - build + - script-checks: + requires: + - build + - chromatic-internal-storybook: + requires: + - build + - coverage: + requires: + - unit-tests + - create-sandboxes: + parallelism: 13 + requires: + - build + - chromatic-sandboxes: + parallelism: 10 + requires: + - create-sandboxes + - e2e-production: + parallelism: 6 + requires: + - create-sandboxes + - e2e-dev: + parallelism: 8 + requires: + - create-sandboxes + - test-runner-production: + parallelism: 8 + requires: + - create-sandboxes + - vitest-integration: + parallelism: 5 + requires: + - create-sandboxes + - e2e-ui: + requires: + - build + - test-init-features: + requires: + - build + - test-portable-stories: + matrix: + parameters: + directory: + - react + - vue3 + - nextjs + - svelte + requires: + - build + when: + equal: + - normal + - << pipeline.parameters.workflow >> diff --git a/.github/workflows/canary-release-pr.yml b/.github/workflows/canary-release-pr.yml index dde7b4eb3606..fff7da57c614 100644 --- a/.github/workflows/canary-release-pr.yml +++ b/.github/workflows/canary-release-pr.yml @@ -1,5 +1,5 @@ name: Publish canary release of PR -run-name: "Canary release: PR #${{ inputs.pr }}, triggered by ${{ github.triggering_actor }}" +run-name: "Canary release: PR #${{ github.event_name == 'workflow_dispatch' && inputs.pr || github.event.pull_request.number }}, triggered by ${{ github.triggering_actor }}" on: workflow_dispatch: @@ -8,13 +8,15 @@ on: description: "Pull request number to create a canary release for" required: true type: number + pull_request: + types: [opened, synchronize, reopened] env: PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD: 1 PUPPETEER_SKIP_CHROMIUM_DOWNLOAD: 1 concurrency: - group: ${{ github.workflow }}-${{ github.event.inputs.pr }} + group: ${{ github.workflow }}-${{ github.event_name == 'workflow_dispatch' && inputs.pr || github.event.pull_request.number }} cancel-in-progress: true permissions: @@ -25,6 +27,7 @@ jobs: name: Release canary version runs-on: ubuntu-latest environment: release + if: github.event_name == 'workflow_dispatch' || github.head_ref == 'sb10/esm-only' steps: - name: Fail if triggering actor is not administrator uses: prince-chrismc/check-actor-permissions-action@v2.0.4 @@ -36,7 +39,8 @@ jobs: env: GH_TOKEN: ${{ secrets.GH_TOKEN }} run: | - PR_INFO=$(gh pr view ${{ inputs.pr }} --repo ${{ github.repository }} --json isCrossRepository,headRefOid,headRefName,headRepository,headRepositoryOwner --jq '{isFork: .isCrossRepository, owner: .headRepositoryOwner.login, repoName: .headRepository.name, branch: .headRefName, sha: .headRefOid}') + PR_NUMBER=${{ github.event_name == 'workflow_dispatch' && inputs.pr || github.event.pull_request.number }} + PR_INFO=$(gh pr view $PR_NUMBER --repo ${{ github.repository }} --json isCrossRepository,headRefOid,headRefName,headRepository,headRepositoryOwner --jq '{isFork: .isCrossRepository, owner: .headRepositoryOwner.login, repoName: .headRepository.name, branch: .headRefName, sha: .headRefOid}') echo $PR_INFO # Loop through each key-value pair in PR_INFO and set as step output for key in $(echo "$PR_INFO" | jq -r 'keys[]'); do @@ -78,7 +82,8 @@ jobs: id: version working-directory: scripts run: | - yarn release:version --exact 0.0.0-pr-${{ inputs.pr }}-sha-${{ steps.info.outputs.shortSha }} --verbose + PR_NUMBER=${{ github.event_name == 'workflow_dispatch' && inputs.pr || github.event.pull_request.number }} + yarn release:version --exact 0.0.0-pr-$PR_NUMBER-sha-${{ steps.info.outputs.shortSha }} --verbose - name: Publish v${{ steps.version.outputs.next-version }} env: @@ -91,7 +96,7 @@ jobs: uses: mcky/find-and-replace-pull-request-body@v1.1.6-mcky with: githubToken: ${{ secrets.GH_TOKEN }} - prNumber: ${{ inputs.pr }} + prNumber: ${{ github.event_name == 'workflow_dispatch' && inputs.pr || '' }} find: "CANARY_RELEASE_SECTION" isHtmlCommentTag: true replace: | @@ -111,7 +116,7 @@ jobs: To request a new release of this pull request, mention the `@storybookjs/core` team. - _core team members can create a new canary release [here](https://github.com/storybookjs/storybook/actions/workflows/canary-release-pr.yml) or locally with `gh workflow run --repo storybookjs/storybook canary-release-pr.yml --field pr=${{ inputs.pr }}`_ + _core team members can create a new canary release [here](https://github.com/storybookjs/storybook/actions/workflows/canary-release-pr.yml) or locally with `gh workflow run --repo storybookjs/storybook canary-release-pr.yml --field pr=${{ github.event_name == 'workflow_dispatch' && inputs.pr || github.event.pull_request.number }}`_ - name: Create failing comment on PR @@ -119,6 +124,7 @@ jobs: env: GH_TOKEN: ${{ secrets.GH_TOKEN }} run: | - gh pr comment ${{ inputs.pr }}\ + PR_NUMBER=${{ github.event_name == 'workflow_dispatch' && inputs.pr || github.event.pull_request.number }} + gh pr comment $PR_NUMBER\ --repo "${{github.repository }}"\ --body "Failed to publish canary version of this pull request, triggered by @${{ github.triggering_actor }}. See the failed workflow run at: https://github.com/${{ github.repository }}/actions/runs/${{ github.run_id }}" diff --git a/.github/workflows/tests-unit.yml b/.github/workflows/tests-unit.yml index a1bdcd6d0d9f..0c6a9f61b333 100644 --- a/.github/workflows/tests-unit.yml +++ b/.github/workflows/tests-unit.yml @@ -13,8 +13,6 @@ env: jobs: build: name: Core Unit Tests, windows-latest - strategy: - fail-fast: false runs-on: windows-11-arm steps: - uses: actions/checkout@v4 @@ -24,6 +22,10 @@ jobs: uses: actions/setup-node@v4 with: node-version-file: ".nvmrc" + cache: 'yarn' + cache-dependency-path: | + code/yarn.lock + scripts/yarn.lock - name: install scripts run: | diff --git a/.nvmrc b/.nvmrc index d7bc8d4dbf5f..9995f913b45c 100644 --- a/.nvmrc +++ b/.nvmrc @@ -1,2 +1,2 @@ -22.13.1 +22.16.0 diff --git a/MIGRATION.md b/MIGRATION.md index 81cf8c4a80f6..fbf6dec9fd35 100644 --- a/MIGRATION.md +++ b/MIGRATION.md @@ -1,5 +1,12 @@

Migration

+- [From version 9.x to 10.0.0](#from-version-9x-to-1000) + - [Core Changes](#core-changes) + - [Local addons must be fully resolved](#local-addons-must-be-fully-resolved) + - [The `.storybook/main.*`-file must be valid ESM](#the-storybookmain-file-must-be-valid-esm) + - [Node.js 20.19+ or 22.12+ required](#nodejs-2019-or-2212-required) + - [Require `tsconfig.json` `moduleResolution` set to value that supports `types` condition](#require-tsconfigjson-moduleresolution-set-to-value-that-supports-types-condition) + - [`core.builder` configuration must be a fully resolved path](#corebuilder-configuration-must-be-a-fully-resolved-path) - [From version 8.x to 9.0.0](#from-version-8x-to-900) - [Core Changes and Removals](#core-changes-and-removals) - [Dropped support for legacy packages](#dropped-support-for-legacy-packages) @@ -97,7 +104,7 @@ - [MDX is upgraded to v3](#mdx-is-upgraded-to-v3) - [Dropping support for \*.stories.mdx (CSF in MDX) format and MDX1 support](#dropping-support-for-storiesmdx-csf-in-mdx-format-and-mdx1-support) - [Dropping support for id, name and story in Story block](#dropping-support-for-id-name-and-story-in-story-block) - - [Core changes](#core-changes) + - [Core changes](#core-changes-1) - [`framework.options.builder.useSWC` for Webpack5-based projects removed](#frameworkoptionsbuilderuseswc-for-webpack5-based-projects-removed) - [Removed `@babel/core` and `babel-loader` from `@storybook/builder-webpack5`](#removed-babelcore-and-babel-loader-from-storybookbuilder-webpack5) - [`framework.options.fastRefresh` for Webpack5-based projects removed](#frameworkoptionsfastrefresh-for-webpack5-based-projects-removed) @@ -477,6 +484,102 @@ - [Packages renaming](#packages-renaming) - [Deprecated embedded addons](#deprecated-embedded-addons) +## From version 9.x to 10.0.0 + +### Core Changes + +#### Local addons must be fully resolved + +In Storybook 9 it was possible to do reference local addons by a relative path, like so: + +```ts +// main.ts + +export default { + addons: ["./my-addon.ts"], +}; +``` + +In Storybook 10 this relative path, should be fully resolved, like so: + +```ts +// main.ts + +export default { + addons: [import.meta.resolve("./my-addon.ts")], +}; +``` + +#### The `.storybook/main.*`-file must be valid ESM + +Storybook will load the `.storybook/main.*` file as an ESM file. +Thus CJS constants (`require`, `__dirname`, `__filename`) will not be defined. + +You can define these constants yourself, like so: + +```ts +import { createRequire } from "node:module"; +import { dirname } from "node:path"; +import { fileURLToPath } from "node:url"; + +const __filename = fileURLToPath(import.meta.url); +const __dirname = dirname(__filename); +const require = createRequire(import.meta.url); +``` + +A `main.ts` file that's CJS is no longer supported. + +#### Node.js 20.19+ or 22.12+ required + +Storybook 10 now requires Node.js version 20.19+ or 22.12+. We require these new ranges so Node.js supports `require(esm)` without a flag. + +#### Require `tsconfig.json` `moduleResolution` set to value that supports `types` condition + +Storybook 10 has removed all `typesVersions` fields from `package.json` files. This field was previously needed for older TypeScript module resolution strategies that didn't support the `types` condition in package.json exports. + +**Required action:** Update your `tsconfig.json` to use a `moduleResolution` that supports the `types` condition: + +```json +{ + "compilerOptions": { + "moduleResolution": "bundler" // or "node16"/"nodenext" + } +} +``` + +**Supported values:** + +- `"bundler"` (recommended for modern bundler-based projects) +- `"node16"` or `"nodenext"` (Node.js 16+ module resolution) + +**Note:** If you're currently using `moduleResolution: "node"` (the old Node.js 10-style resolution), you'll need to upgrade to one of the supported values above. + +This change simplifies our package structure and aligns with modern TypeScript standards. Only TypeScript projects are affected - JavaScript projects require no changes. + +#### `core.builder` configuration must be a fully resolved path + +> [!NOTE] +> In the majority of cases, this is only relevant for authors of Storybook framework packages, as regular users very rarely set the `core.builder` property manually. + +When setting the `core.builder` or `core.builder.name` option in the main configuration, it must now be a fully resolved path to a builder's entry point, instead of just to the builder package's root directory. + +In a preset: + +```diff +import { dirname, join } from 'node:path'; + +const getAbsolutePath = (input) => + dirname(require.resolve(join(input, 'package.json'))); + +export const core = { +- builder: getAbsolutePath('@storybook/builder-vite'), +- // 👆 results in eg. `/absolute/path/node_modules/@storybook/builder-vite ++ builder: import.meta.resolve('@storybook/builder-vite'), ++ // 👆 results in eg. `/absolute/path/node_modules/@storybook/builder-vite/index.js + renderer: getAbsolutePath('@storybook/react'), +}; +``` + ## From version 8.x to 9.0.0 ### Core Changes and Removals diff --git a/code/.storybook/bench.stories.tsx b/code/.storybook/bench.stories.tsx deleted file mode 100644 index 09bb95c7f225..000000000000 --- a/code/.storybook/bench.stories.tsx +++ /dev/null @@ -1,83 +0,0 @@ -import React from 'react'; - -import type { Meta } from '@storybook/react-vite'; - -// @ts-expect-error - TS doesn't know about import.meta.glob from Vite -const allMetafiles = import.meta.glob(['../bench/esbuild-metafiles/**/*.json']); - -const METAFILES_DIR = '../bench/esbuild-metafiles/'; -const PACKAGES_WITHOUT_ORG = ['storybook', 'sb', 'create-storybook']; - -// allows the metafile path to be used in the URL hash -const safeMetafileArg = (path: string) => - path - .replace(METAFILES_DIR, '') - .replaceAll('/', '__') - .replace(/(\w*).json/, '$1'); - -export default { - title: 'Bench', - parameters: { - layout: 'fullscreen', - chromatic: { disableSnapshot: true }, - }, - args: { - metafile: safeMetafileArg(Object.keys(allMetafiles)[0]), - }, - argTypes: { - metafile: { - options: Object.keys(allMetafiles).map(safeMetafileArg).sort(), - mapping: Object.fromEntries( - Object.keys(allMetafiles).map((path) => [safeMetafileArg(path), path]) - ), - control: { - type: 'select', - labels: Object.fromEntries( - Object.keys(allMetafiles).map((path) => { - const [, dirName, subEntry] = /esbuild-metafiles\/(.+)\/(.+).json/.exec(path)!; - const pkgName = PACKAGES_WITHOUT_ORG.includes(dirName) - ? dirName - : `@storybook/${dirName}`; - - return [ - safeMetafileArg(path), - subEntry !== 'metafile' ? `${pkgName} - ${subEntry}` : pkgName, - ]; - }) - ), - }, - }, - }, - loaders: [ - async ({ args }) => { - if (!args.metafile) { - return; - } - let metafile; - try { - metafile = await allMetafiles[args.metafile](); - } catch (e) { - return; - } - const encodedMetafile = btoa(JSON.stringify(metafile)); - return { encodedMetafile }; - }, - ], - render: (args, { loaded }) => { - const { encodedMetafile = '' } = loaded ?? {}; - - return ( -