storybook/.circleci/config.yml

version: 2.1

parameters:
  workflow:
    description: Which workflow to run
    type: enum
    enum: ['ci', 'pr', 'merged', 'daily']
    default: 'ci'

executors:
  sb_node_16_classic:
    parameters:
      class:
        description: The Resource class
        type: enum
        enum: ['small', 'medium', 'medium+', 'large', 'xlarge']
        default: 'small'
    working_directory: /tmp/storybook
    docker:
      - image: cimg/node:16.17.1
        environment:
          NODE_OPTIONS: --max_old_space_size=3076
    resource_class: <<parameters.class>>
  sb_node_16_browsers:
    parameters:
      class:
        description: The Resource class
        type: enum
        enum: ['small', 'medium', 'medium+', 'large', 'xlarge']
        default: 'small'
    working_directory: /tmp/storybook
    docker:
      - image: cimg/node:16.17.1-browsers
        environment:
          NODE_OPTIONS: --max_old_space_size=3076
    resource_class: <<parameters.class>>
  sb_playwright:
    parameters:
      class:
        description: The Resource class
        type: enum
        enum: ['small', 'medium', 'medium+', 'large', 'xlarge']
        default: 'small'
    working_directory: /tmp/storybook
    docker:
      - image: mcr.microsoft.com/playwright:v1.27.0-focal
        environment:
          NODE_OPTIONS: --max_old_space_size=3076
    resource_class: <<parameters.class>>

orbs:
  git-shallow-clone: guitarrapc/git-shallow-clone@2.4.0
  browser-tools: circleci/browser-tools@1.4.0

commands:
  # Forked off from https://github.com/guitarrapc/git-shallow-clone-orb
  # See issue: https://github.com/guitarrapc/git-shallow-clone-orb/issues/34
  checkout_advanced:
    description: |
      checkout by git shallow clone with git options. Support Alpine, Ubuntu, Debian and others.
      eval is used in step, Fish shell is not supported.
    parameters:
      clone_options:
        default: --depth 1
        description: |
          git clone options you want to add such as '--depth 1 --verbose' and '--depth 1 --shallow-since "5 days ago"'
        type: string
      fetch_options:
        default: --depth 10
        description: |
          git fetch options you want to add such as '--depth 1 --verbose' and '--depth 1 --shallow-since "5 days ago"' you don't need set '--force' option as it already set by default. in case of tag, add '--no-tags' on this option and tag_fetch_options.
        type: string
      keyscan_bitbucket:
        default: false
        description: |
          Pass `true` to dynamically get ssh-rsa from `bitbucket.org`.
        type: boolean
      keyscan_github:
        default: false
        description: |
          Pass `true` to dynamically get ssh-rsa from `github.com`.
        type: boolean
      path:
        default: .
        description: |
          Checkout directory (default: job’s working_directory)
        type: string
      tag_fetch_options:
        default: --tags
        description: |
          This option apply when git operation is tag. Use 'fetch_options' instead if pr and other git operation. Additional git fetch options you want to add specifically for tags such as '--tags' or '--no-tags'. Default value is '--tags'
        type: string
    steps:
      - run:
          command: |
            #!/bin/sh
            set -ex
            # Workaround old docker images with incorrect $HOME
            # check https://github.com/docker/docker/issues/2968 for details
            if [ "${HOME}" = "/" ]
            then
              export HOME=$(getent passwd $(id -un) | cut -d: -f6)
            fi
            
            # known_hosts
            mkdir -p ~/.ssh
            if [ -x "$(command -v ssh-keyscan)" ] && ([ "<< parameters.keyscan_github >>" == "true" ] || [ "<< parameters.keyscan_bitbucket >>" == "true" ])
            then
              if [ "<< parameters.keyscan_github >>" == "true" ]
              then
                ssh-keyscan -H github.com >> ~/.ssh/known_hosts
              fi
              if [ "<< parameters.keyscan_bitbucket >>" == "true" ]
              then
                ssh-keyscan -H bitbucket.org >> ~/.ssh/known_hosts
              fi
            fi
            if [ "<< parameters.keyscan_github >>" != "true" ]
            then
              echo 'github.com ssh-rsa AAAAB3NzaC1yc2EAAAABIwAAAQEAq2A7hRGmdnm9tUDbO9IDSwBK6TbQa+PXYPCPy6rbTrTtw7PHkccKrpp0yVhp5HdEIcKr6pLlVDBfOLX9QUsyCOV0wzfjIJNlGEYsdlLJizHhbn2mUjvSAHQqZETYP81eFzLQNnPHt4EVVUh7VfDESU84KezmD5QlWpXLmvU31/yMf+Se8xhHTvKSCZIFImWwoG6mbUoWf9nzpIoaSjB+weqqUUmpaaasXVal72J+UX2B+2RPW3RcT0eOzQgqlJL3RKrTJvdsjE3JEAvGq3lGHSZXy28G3skua2SmVi/w4yCE6gbODqnTWlg7+wC604ydGXA8VJiS5ap43JXiUFFAaQ==
            ' >> ~/.ssh/known_hosts
            fi
            if [ "<< parameters.keyscan_bitbucket >>" != "true" ]
            then
              echo 'bitbucket.org ssh-rsa AAAAB3NzaC1yc2EAAAABIwAAAQEAubiN81eDcafrgMeLzaFPsw2kNvEcqTKl/VqLat/MaB33pZy0y3rJZtnqwR2qOOvbwKZYKiEO1O6VqNEBxKvJJelCq0dTXWT5pbO2gDXC6h6QDXCaHo6pOHGPUy+YBaGQRGuSusMEASYiWunYN0vCAI8QaXnWMXNMdFP3jHAJH0eDsoiGnLPBlBp4TNm6rYI74nMzgz3B9IikW4WVK+dc8KZJZWYjAuORU3jc1c/NPskD2ASinf8v3xnfXeukU0sJ5N6m5E8VLjObPEO+mN2t/FZTMZLiFqPWc/ALSqnMnnhwrNi2rbfg/rd/IpL8Le3pSBne8+seeFVBoGqzHM9yXw==
            ' >> ~/.ssh/known_hosts
            fi
            
            (umask 077; touch ~/.ssh/id_rsa)
            chmod 0600 ~/.ssh/id_rsa
            (echo $CHECKOUT_KEY > ~/.ssh/id_rsa)
            
            # use git+ssh instead of https
            git config --global url."ssh://git@github.com".insteadOf "https://github.com" || true
            git config --global gc.auto 0 || true
            
            # checkout
            git clone << parameters.clone_options >> $CIRCLE_REPOSITORY_URL "<< parameters.path >>"
            cd "<< parameters.path >>"
            
            # Fetch remote and check the commit ID of the checked out code
            if [ -n "$CIRCLE_TAG" ]
            then
              # tag
              git fetch << parameters.tag_fetch_options >> << parameters.fetch_options >> --force origin "+refs/tags/${CIRCLE_TAG}:refs/tags/${CIRCLE_TAG}"
            elif [[ $(echo $CIRCLE_BRANCH | grep -e ^pull\/*) ]] # sh version of bash `elif [[ "$CIRCLE_BRANCH" =~ ^pull\/* ]]`
            then
              # pull request
              git fetch << parameters.fetch_options >> --force origin "${CIRCLE_BRANCH}:remotes/origin/${CIRCLE_BRANCH}"
            else
              # others
              git fetch << parameters.fetch_options >> --force origin "$CIRCLE_BRANCH:remotes/origin/$CIRCLE_BRANCH"
            fi
            
            # Check the commit ID of the checked out code
            if [ -n "$CIRCLE_TAG" ]
            then
              git reset --hard "$CIRCLE_SHA1"
              git checkout -q "$CIRCLE_TAG"
            elif [ -n "$CIRCLE_BRANCH" ] && [ "$CIRCLE_BRANCH" != 'HEAD' ]
            then
              git reset --hard "$CIRCLE_SHA1"
              git checkout -q -B "$CIRCLE_BRANCH"
            fi
            
            git reset --hard "$CIRCLE_SHA1"
          name: Checkout code shallow
  cancel-workflow-on-failure:
    description: 'Cancels the entire workflow in case the previous step has failed'
    steps:
      - run:
          name: Cancel current workflow
          when: on_fail
          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}"
jobs:
  build:
    executor:
      class: large
      name: sb_node_16_classic
    steps:
      - checkout_advanced:
          clone_options: '--depth 1 --verbose'
      - restore_cache:
          name: Restore Yarn cache
          keys:
            - build-yarn-2-cache-v4--{{ checksum "code/yarn.lock" }}--{{ checksum "scripts/yarn.lock" }}
      - run:
          name: Compile
          command: |
            yarn task --task compile --start-from=auto --no-link --debug
            git diff --exit-code
      - run:
          name: Publish to Verdaccio
          command: |
            cd code
            yarn local-registry --publish
      - save_cache:
          name: Save Yarn cache
          key: build-yarn-2-cache-v4--{{ checksum "code/yarn.lock" }}--{{ checksum "scripts/yarn.lock" }}
          paths:
            - ~/.yarn/berry/cache
      - persist_to_workspace:
          root: .
          paths:
            - code/node_modules
            - scripts/node_modules
            - code/examples
            - code/node_modules
            - code/addons
            - code/frameworks
            - code/lib
            - code/ui
            - code/renderers
            - code/presets
            - .verdaccio-cache
  cra-bench:
    executor:
      class: medium
      name: sb_playwright
    working_directory: /tmp/storybook
    steps:
      - checkout_advanced:
          clone_options: '--depth 1 --verbose'
      - attach_workspace:
          at: .
      - run:
          name: Running local registry
          command: |
            cd code
            yarn local-registry --port 6001 --open
          background: true
      - run:
          name: Wait for registry
          command: |
            cd code
            yarn wait-on http://localhost:6001
      - run:
          name: set up cra repro, skip tests
          command: |
            cd code
            node ./lib/cli/bin/index.js repro-next cra/default-js --output ../../cra-bench
      - run:
          name: Run @storybook/bench on repro
          command: |
            cd ../cra-bench
            rm -rf node_modules
            mkdir node_modules
            npx -p @storybook/bench@next sb-bench 'yarn install' --label cra
      - run:
          name: prep artifacts
          when: always
          command: tar cvzf /tmp/sb-bench.tar.gz ../cra-bench
      - store_artifacts:
          path: /tmp/sb-bench.tar.gz
          destination: sb-bench.tar.gz
  react-vite-bench:
    executor:
      class: large
      name: sb_playwright
    working_directory: /tmp/storybook
    steps:
      - checkout_advanced:
          clone_options: '--depth 1 --verbose'
      - attach_workspace:
          at: .
      - run:
          name: Running local registry
          command: |
            cd code
            yarn local-registry --port 6001 --open
          background: true
      - run:
          name: Wait for registry
          command: |
            cd code
            yarn wait-on http://localhost:6001
      - run:
          name: set up react-vite repro, skip tests
          command: |
            cd code
            node ./lib/cli/bin/index.js repro-next react-vite/default-ts --output ../../react-vite-bench
      - run:
          name: Run @storybook/bench on repro
          command: |
            cd ../react-vite-bench
            rm -rf node_modules
            mkdir node_modules
            npx -p @storybook/bench@next sb-bench 'yarn install' --label react-vite
      - run:
          name: prep artifacts
          when: always
          command: tar cvzf /tmp/sb-bench.tar.gz ../react-vite-bench
      - store_artifacts:
          path: /tmp/sb-bench.tar.gz
          destination: sb-bench.tar.gz
  lint:
    executor:
      class: medium
      name: sb_node_16_classic
    steps:
      - checkout_advanced:
          clone_options: '--depth 1 --verbose'
      - attach_workspace:
          at: .
      - run:
          name: Lint
          command: |
            cd code
            yarn lint
      - cancel-workflow-on-failure
  check:
    executor:
      class: xlarge
      name: sb_node_16_classic
    steps:
      - checkout_advanced:
          clone_options: '--depth 1 --verbose'
      - attach_workspace:
          at: .
      - run:
          name: Check
          command: |
            yarn task --task check --start-from=auto --no-link --debug
            git diff --exit-code
      - cancel-workflow-on-failure
  script-unit-tests:
    executor: sb_node_16_browsers
    steps:
      - checkout_advanced:
          clone_options: '--depth 1 --verbose'
      - attach_workspace:
          at: .
      - run:
          name: Test
          command: |
            cd scripts
            yarn test --coverage --ci
      - store_test_results:
          path: scripts/junit.xml
      - cancel-workflow-on-failure
  unit-tests:
    executor:
      class: xlarge
      name: sb_node_16_browsers
    steps:
      - checkout_advanced:
          clone_options: '--depth 1 --verbose'
      - attach_workspace:
          at: .
      - run:
          name: Test
          command: |
            cd code
            yarn test --coverage --ci
      - store_test_results:
          path: code/junit.xml
      - persist_to_workspace:
          root: .
          paths:
            - code/coverage
      - cancel-workflow-on-failure
  coverage:
    executor:
      class: small
      name: sb_node_16_browsers
    steps:
      - checkout_advanced:
          clone_options: '--depth 1 --verbose'
      - attach_workspace:
          at: .
      - run:
          name: Upload coverage
          command: |
            cd code
            yarn coverage
  chromatic-internal-storybooks:
    executor:
      class: medium
      name: sb_node_16_browsers
    steps:
      # switched this to the CircleCI helper to get the full git history for TurboSnap
      - checkout
      - attach_workspace:
          at: .
      - run:
          name: Running Chromatic
          command: |
            cd code
            yarn storybook:ui:chromatic
            yarn storybook:blocks:chromatic
      - store_test_results:
          path: test-results
  ## new workflow
  create-sandboxes:
    parameters:
      parallelism:
        type: integer
        default: 2
    executor:
      class: medium
      name: sb_node_16_browsers
    parallelism: << parameters.parallelism >>
    steps:
      - checkout_advanced:
          clone_options: '--depth 1 --verbose'
      - attach_workspace:
          at: .
      - run:
          name: Creating Sandboxes
          command: yarn task --task sandbox --template $(yarn get-template << pipeline.parameters.workflow >> create) --no-link --start-from=never --junit
      - persist_to_workspace:
          root: .
          paths:
            - sandbox
      - store_test_results:
          path: test-results
  smoke-test-sandboxes:
    parameters:
      parallelism:
        type: integer
        default: 2
    executor:
      class: medium
      name: sb_node_16_browsers
    parallelism: << parameters.parallelism >>
    steps:
      - checkout_advanced:
          clone_options: '--depth 1 --verbose'
      - attach_workspace:
          at: .
      - run:
          name: Smoke Testing Sandboxes
          command: yarn task --task smoke-test --template $(yarn get-template << pipeline.parameters.workflow >> smoke-test) --no-link --start-from=never --junit
      - store_test_results:
          path: test-results
  build-sandboxes:
    parameters:
      parallelism:
        type: integer
        default: 2
    executor:
      class: medium+
      name: sb_node_16_browsers
    parallelism: << parameters.parallelism >>
    steps:
      - checkout_advanced:
          clone_options: '--depth 1 --verbose'
      - attach_workspace:
          at: .
      - run:
          name: Building Sandboxes
          command: yarn task --task build --template $(yarn get-template << pipeline.parameters.workflow >> build) --no-link --start-from=never --junit
      - store_test_results:
          path: test-results
      - persist_to_workspace:
          root: .
          paths:
            - sandbox/*/storybook-static
  test-runner-sandboxes:
    parameters:
      parallelism:
        type: integer
        default: 2
    executor:
      class: medium
      name: sb_playwright
    parallelism: << parameters.parallelism >>
    steps:
      - checkout_advanced:
          clone_options: '--depth 1 --verbose'
      - attach_workspace:
          at: .
      - run:
          name: Running Test Runner
          command: yarn task --task test-runner --template $(yarn get-template << pipeline.parameters.workflow >> test-runner) --no-link --start-from=never --junit
      - store_test_results:
          path: test-results
  chromatic-sandboxes:
    parameters:
      parallelism:
        type: integer
        default: 2
    executor:
      class: medium
      name: sb_node_16_browsers
    parallelism: << parameters.parallelism >>
    steps:
      - checkout
      - attach_workspace:
          at: .
      - run:
          name: Running Chromatic
          command: yarn task --task chromatic --template $(yarn get-template << pipeline.parameters.workflow >> chromatic) --no-link --start-from=never --junit
      - store_test_results:
          path: test-results
  e2e-sandboxes:
    parameters:
      parallelism:
        type: integer
        default: 2
    executor:
      class: medium
      name: sb_playwright
    parallelism: << parameters.parallelism >>
    steps:
      - checkout_advanced:
          clone_options: '--depth 1 --verbose'
      - attach_workspace:
          at: .
      - run:
          name: Running E2E Tests
          command: yarn task --task e2e-tests --template $(yarn get-template << pipeline.parameters.workflow >> e2e-tests) --no-link --start-from=never --junit
      - store_test_results:
          path: test-results
      - store_artifacts: # this is where playwright puts more complex stuff
          path: code/playwright-results/
          destination: playwright

workflows:
  ci:
    when:
      and:
        - equal: [ api, << pipeline.trigger_source >> ]
        - equal:  [ ci, << pipeline.parameters.workflow >> ]
    jobs:
      - build
      - lint:
          requires:
            - build
      - check:
          requires:
            - build
      - unit-tests:
          requires:
            - build
      - script-unit-tests:
          requires:
            - build
      - create-sandboxes:
          requires:
            - build
      - build-sandboxes:
          requires:
            - create-sandboxes
      - test-runner-sandboxes:
          requires:
            - build-sandboxes
      - chromatic-sandboxes:
          requires:
            - build-sandboxes
      - e2e-sandboxes:
          requires:
            - build-sandboxes
  pr:
    when:
      equal: [ pr, << pipeline.parameters.workflow >> ]
    jobs:
      - build
      - lint:
          requires:
            - build
      - check:
          requires:
            - build
      - unit-tests:
          requires:
            - build
      - script-unit-tests:
          requires:
            - build
      - chromatic-internal-storybooks:
          requires:
            - build
      - coverage:
          requires:
            - unit-tests
      - cra-bench:
          requires:
            - build
      - react-vite-bench:
          requires:
            - build
      - create-sandboxes:
          parallelism: 9
          requires:
            - build
      - build-sandboxes:
          parallelism: 9
          requires:
            - create-sandboxes
      - test-runner-sandboxes:
          parallelism: 9
          requires:
            - build-sandboxes
      - chromatic-sandboxes:
          parallelism: 9
          requires:
            - build-sandboxes
      - e2e-sandboxes:
          parallelism: 9
          requires:
            - build-sandboxes
  merged:
    when:
      equal: [ merged, << pipeline.parameters.workflow >> ]
    jobs:
      - build
      - lint:
          requires:
            - build
      - check:
          requires:
            - build
      - unit-tests:
          requires:
            - build
      - script-unit-tests:
          requires:
            - build
      - chromatic-internal-storybooks:
          requires:
            - build
      - coverage:
          requires:
            - unit-tests
      - cra-bench:
          requires:
            - build
      - react-vite-bench:
          requires:
            - build
      - create-sandboxes:
          parallelism: 14
          requires:
            - build
      - build-sandboxes:
          parallelism: 14
          requires:
            - create-sandboxes
      - test-runner-sandboxes:
          parallelism: 14
          requires:
            - build-sandboxes
      - chromatic-sandboxes:
          parallelism: 14
          requires:
            - build-sandboxes
      - e2e-sandboxes:
          parallelism: 14
          requires:
            - build-sandboxes
  daily:
    when:
      equal: [ daily, << pipeline.parameters.workflow >> ]
    jobs:
      - build
      - create-sandboxes:
          parallelism: 24
          requires:
            - build
      # - smoke-test-sandboxes: # disabled for now
      #     requires:
      #       - create-sandboxes
      - build-sandboxes:
          parallelism: 24
          requires:
            - create-sandboxes
      - test-runner-sandboxes:
          parallelism: 24
          requires:
            - build-sandboxes
      - chromatic-sandboxes:
          parallelism: 24
          requires:
            - build-sandboxes
      - e2e-sandboxes:
          parallelism: 24
          requires:
            - build-sandboxes