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..3e93ef40df5b 100644 --- a/.github/workflows/canary-release-pr.yml +++ b/.github/workflows/canary-release-pr.yml @@ -1,20 +1,22 @@ 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: inputs: pr: - description: "Pull request number to create a canary release for" + 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' || endsWith(github.head_ref, 'with-canary-release') 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 @@ -58,7 +62,7 @@ jobs: - name: Setup Node.js uses: actions/setup-node@v4 with: - node-version-file: ".nvmrc" + node-version-file: '.nvmrc' - name: Cache dependencies uses: actions/cache@v4 @@ -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,8 +96,8 @@ jobs: uses: mcky/find-and-replace-pull-request-body@v1.1.6-mcky with: githubToken: ${{ secrets.GH_TOKEN }} - prNumber: ${{ inputs.pr }} - find: "CANARY_RELEASE_SECTION" + prNumber: ${{ github.event_name == 'workflow_dispatch' && inputs.pr || '' }} + find: 'CANARY_RELEASE_SECTION' isHtmlCommentTag: true replace: | This pull request has been released as version `${{ steps.version.outputs.next-version }}`. Try it out in a new sandbox by running `npx storybook@${{ steps.version.outputs.next-version }} sandbox` or in an existing project with `npx storybook@${{ steps.version.outputs.next-version }} upgrade`. @@ -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/CHANGELOG.md b/CHANGELOG.md index 2b9c45357e8c..e19d2eef13a1 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,12 @@ +## 9.1.2 + +- Addon Docs: Fix Symbol conversion issue in docs page and controls panel - [#32220](https://github.com/storybookjs/storybook/pull/32220), thanks @yannbf! +- Angular: Fix `entry.polyfills` undefined error - [#32230](https://github.com/storybookjs/storybook/pull/32230), thanks @sk-pub! +- Angular: Inherit options from browserTarget - [#32108](https://github.com/storybookjs/storybook/pull/32108), thanks @gingeekrishna! +- Core: Improve addon detection in automigrations on windows - [#31937](https://github.com/storybookjs/storybook/pull/31937), thanks @mrginglymus! +- Next.js: Return mocked router instead of actual router in useRouter - [#32131](https://github.com/storybookjs/storybook/pull/32131), thanks @JulioJ11! +- Telemetry: Improve dev cancellation handling - [#32218](https://github.com/storybookjs/storybook/pull/32218), thanks @shilman! + ## 9.1.1 - CLI: Fix throwing in readonly environments - [#31785](https://github.com/storybookjs/storybook/pull/31785), thanks @JReinhold! @@ -203,7 +212,7 @@ This is a huge release focused on testing and bundle size. - 🌐 Story globals - 🏗️ Major upgrades: Svelte, Next, React Native, Angular -Please checkout our [Migration guide](https://storybook.js.org/docs/releases/migration-guide) to upgrade from earlier versions of Storybook. To see a comprehensive list of changes that went into 9.0, you can refer to the [9.0 prerelease changelogs](./CHANGELOG.prerelease.md) +Please checkout our [Migration guide](https://storybook.js.org/docs/9/migration-guide) to upgrade from earlier versions of Storybook. To see a comprehensive list of changes that went into 9.0, you can refer to the [9.0 prerelease changelogs](./CHANGELOG.prerelease.md)
List of all updates diff --git a/CHANGELOG.prerelease.md b/CHANGELOG.prerelease.md index 67b5beeb88aa..f3f1311267ad 100644 --- a/CHANGELOG.prerelease.md +++ b/CHANGELOG.prerelease.md @@ -1,3 +1,11 @@ +## 10.0.0-beta.0 + +- Core: Fix staticCopy not copying `index.html` to sub directory - [#32259](https://github.com/storybookjs/storybook/pull/32259), thanks @ndelangen! +- Core: Remove CJS bundles, only ship ESM - [#31819](https://github.com/storybookjs/storybook/pull/31819), thanks @ndelangen! +- Docs: Move button in ArgsTable heading to fix screenreader announcements - [#32238](https://github.com/storybookjs/storybook/pull/32238), thanks @Sidnioulz! +- Telemetry: Disambiguate traffic coming from error/upgrade links - [#32287](https://github.com/storybookjs/storybook/pull/32287), thanks @shilman! +- Telemetry: Disambiguate unattributed traffic from Onboarding - [#32286](https://github.com/storybookjs/storybook/pull/32286), thanks @shilman! + ## 9.2.0-alpha.3 - Addon Docs: Fix Symbol conversion issue in docs page and controls panel - [#32220](https://github.com/storybookjs/storybook/pull/32220), thanks @yannbf! 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/README.md b/README.md index bb7a55352958..1bf638d98ba1 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,5 @@

- + Storybook @@ -27,7 +27,7 @@ - + Storybook Community @@ -45,11 +45,11 @@

-Storybook is a frontend workshop for building UI components and pages in isolation. Thousands of teams use it for UI development, testing, and documentation. Find out more at https://storybook.js.org! +Storybook is a frontend workshop for building UI components and pages in isolation. Thousands of teams use it for UI development, testing, and documentation. Find out more at storybook.js.org!

- +

@@ -74,19 +74,19 @@ Storybook is a frontend workshop for building UI components and pages in isolati ## Getting Started -Visit [Storybook's website](https://storybook.js.org) to learn more about Storybook and to get started. +Visit [Storybook's website](https://storybook.js.org/?ref=readme) to learn more about Storybook and to get started. ### Documentation -Documentation can be found on [Storybook's docs site](https://storybook.js.org/docs). +Documentation can be found on [Storybook's docs site](https://storybook.js.org/docs?ref=readme). ### Examples -View [Component Encyclopedia](https://storybook.js.org/showcase) to see how leading teams use Storybook. +View [Component Encyclopedia](https://storybook.js.org/showcase?ref=readme) to see how leading teams use Storybook. Use [storybook.new](https://storybook.new) to quickly create an example project in Stackblitz. -Storybook comes with a lot of [addons](https://storybook.js.org/docs/configure/user-interface/storybook-addons) for component design, documentation, testing, interactivity, and so on. Storybook's API makes it possible to configure and extend in various ways. It has even been extended to support React Native, Android, iOS, and Flutter development for mobile. +Storybook comes with a lot of [addons](https://storybook.js.org/docs/configure/user-interface/storybook-addons?ref=readme) for component design, documentation, testing, interactivity, and so on. Storybook's API makes it possible to configure and extend in various ways. It has even been extended to support React Native, Android, iOS, and Flutter development for mobile. ### Community @@ -108,7 +108,7 @@ For additional help, share your issue in [the repo's GitHub Discussions](https:/ | [Svelte](code/renderers/svelte) | [![Storybook demo](https://img.shields.io/npm/v/@storybook/svelte/latest?style=flat-square&color=blue&label)](https://next--630873996e4e3557791c069c.chromatic.com/) | [![Svelte](https://img.shields.io/npm/dm/@storybook/svelte?style=flat-square&color=eee)](code/renderers/svelte) | | [Preact](code/renderers/preact) | [![Storybook demo](https://img.shields.io/npm/v/@storybook/preact/latest?style=flat-square&color=blue&label)](https://next--63b588a512565bfaace15e7c.chromatic.com/) | [![Preact](https://img.shields.io/npm/dm/@storybook/preact?style=flat-square&color=eee)](code/renderers/preact) | | [Qwik](https://github.com/literalpie/storybook-framework-qwik) | [![](https://img.shields.io/npm/v/storybook-framework-qwik/latest?style=flat-square&color=blue&label)](/) | [![Qwik](https://img.shields.io/npm/dm/storybook-framework-qwik?style=flat-square&color=eee)](https://github.com/literalpie/storybook-framework-qwik) | -| [SolidJS](https://github.com/solidjs-community/storybook) | [![](https://img.shields.io/npm/v/storybook-solidjs-vite/latest?style=flat-square&color=blue&label)](/) | [![SolidJS](https://img.shields.io/npm/dm/storybook-solidjs-vite?style=flat-square&color=eee)](https://github.com/solidjs-community/storybook) | +| [SolidJS](https://github.com/solidjs-community/storybook) | [![](https://img.shields.io/npm/v/storybook-solidjs-vite/latest?style=flat-square&color=blue&label)](/) | [![SolidJS](https://img.shields.io/npm/dm/storybook-solidjs-vite?style=flat-square&color=eee)](https://github.com/solidjs-community/storybook) | | [Android, iOS, Flutter](https://github.com/storybookjs/native) | [![](https://img.shields.io/npm/v/@storybook/native/latest?style=flat-square&color=blue&label)](/) | [![Native](https://img.shields.io/npm/dm/@storybook/native?style=flat-square&color=eee)](https://github.com/storybookjs/native) | ### Addons @@ -131,7 +131,7 @@ For additional help, share your issue in [the repo's GitHub Discussions](https:/ | [query params](https://github.com/storybookjs/addon-queryparams) | Mock query params | | [viewport](code/core/src/viewport/) | Change display sizes and layouts for responsive components using Storybook | -See [Addon / Framework Support Table](https://storybook.js.org/docs/configure/integration/frameworks-feature-support) +See [Addon / Framework Support Table](https://storybook.js.org/docs/configure/integration/frameworks-feature-support?ref=readme) To continue improving your experience, we have to eventually deprecate or remove certain addons in favor of new and better tools. @@ -139,7 +139,7 @@ If you're using info/notes, we highly recommend you migrate to [docs](code/addon If you're using contexts, we highly recommend you migrate to [toolbars](https://github.com/storybookjs/storybook/tree/next/code/addons/toolbars) and [here is a guide](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-addon-contexts) to help you. -If you're using addon-storyshots, we highly recommend you migrate to the Storybook [test-runner](https://github.com/storybookjs/test-runner) and [here is a guide](https://storybook.js.org/docs/writing-tests/storyshots-migration-guide) to help you. +If you're using addon-storyshots, we highly recommend you migrate to the Storybook [test-runner](https://github.com/storybookjs/test-runner) and [here is a guide](https://storybook.js.org/docs/writing-tests/storyshots-migration-guide?ref=readme) to help you. ## Badges & Presentation materials @@ -156,7 +156,7 @@ If you're looking for material to use in your Storybook presentation, such as lo ## Community - Tweeting via [@storybookjs](https://x.com/storybookjs) -- Blogging at [storybook.js.org](https://storybook.js.org/blog/) and [Medium](https://medium.com/storybookjs) +- Blogging at [storybook.js.org](https://storybook.js.org/blog/?ref=readme) and [Medium](https://medium.com/storybookjs) - Chatting on [Discord](https://discord.gg/storybook) - Videos and streams at [YouTube](https://www.youtube.com/channel/UCr7Quur3eIyA_oe8FNYexfg) 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 ( -