storybook/.circleci/config.yml

version: 2.1

executors:
  sb_node_12_classic:
    parameters:
      class:
        description: The Resource class
        type: enum
        enum: ['small', 'medium', 'large', 'xlarge']
        default: 'medium'
    working_directory: /tmp/storybook
    docker:
      - image: circleci/node:12
        environment:
          NODE_OPTIONS: --max_old_space_size=3076
    resource_class: <<parameters.class>>
  sb_node_12_browsers:
    parameters:
      class:
        description: The Resource class
        type: enum
        enum: ['small', 'medium', 'large', 'xlarge']
        default: 'medium'
    working_directory: /tmp/storybook
    docker:
      - image: circleci/node:12-browsers
        environment:
          NODE_OPTIONS: --max_old_space_size=3076
    resource_class: <<parameters.class>>
  sb_cypress_6_node_12:
    parameters:
      class:
        description: The Resource class
        type: enum
        enum: ['small', 'medium', 'large', 'xlarge']
        default: 'medium'
    working_directory: /tmp/storybook
    docker:
      # ⚠️ The Cypress docker image is based on Node.js one so be careful when updating it because it can also
      # cause an upgrade of the Node.
      - image: cypress/included:6.8.0
        environment:
          NODE_OPTIONS: --max_old_space_size=3076
    resource_class: <<parameters.class>>

orbs:
  git-shallow-clone: guitarrapc/git-shallow-clone@2.0.3

commands:
  ensure-pr-is-labeled-with:
    description: 'A command looking for the labels set on the PR associated to this workflow and checking it contains the label given as parameter'
    parameters:
      label:
        type: string
    steps:
      - run:
          name: Check if PR is labeled with "<< parameters.label >>"
          command: |
            apt-get -y install jq

            PR_NUMBER=$(echo "$CIRCLE_PULL_REQUEST" | sed "s/.*\/pull\///")
            echo "PR_NUMBER: $PR_NUMBER"

            API_GITHUB="https://api.github.com/repos/$CIRCLE_PROJECT_USERNAME/$CIRCLE_PROJECT_REPONAME"
            PR_REQUEST_URL="$API_GITHUB/pulls/$PR_NUMBER"
            PR_RESPONSE=$(curl -H "Authorization: token $GITHUB_TOKEN_STORYBOOK_BOT_READ_REPO" "$PR_REQUEST_URL")


            if [ $(echo $PR_RESPONSE | jq '.labels | map(select(.name == "<< parameters.label >>")) | length') -ge 1 ] ||
               ( [ $(echo $PR_RESPONSE | jq '.labels | length') -ge 1 ] && [ "<< parameters.label >>" == "*" ])
            then
              echo "🚀 The PR is labelled with '<< parameters.label >>', job will continue!"
            else
              echo "🏁 The PR isn't labelled with '<< parameters.label >>' so this job will end at the current step."
              circleci-agent step halt
            fi

jobs:
  build:
    executor:
      class: xlarge
      name: sb_node_12_classic
    steps:
      - git-shallow-clone/checkout_advanced:
          clone_options: '--depth 1 --verbose'
      - restore_cache:
          name: Restore Yarn cache
          keys:
            - build-yarn-2-cache-v1--{{ checksum "yarn.lock" }}
      - run:
          name: Install dependencies
          command: yarn install --immutable
      - run:
          name: Bootstrap
          command: yarn bootstrap --core
      - save_cache:
          name: Save Yarn cache
          key: build-yarn-2-cache-v1--{{ checksum "yarn.lock" }}
          paths:
            - ~/.yarn/berry/cache
      - persist_to_workspace:
          root: .
          paths:
            - examples
            - node_modules
            - addons
            - app
            - lib
  chromatic:
    executor: sb_node_12_browsers
    parallelism: 4
    steps:
      # Keep using default checkout because Chromatic needs some git history to work properly
      - checkout
      - attach_workspace:
          at: .
      - run:
          name: examples
          command: |
            yarn run-chromatics
  packtracker:
    executor:
      class: medium
      name: sb_node_12_browsers
    steps:
      - git-shallow-clone/checkout_advanced:
          clone_options: '--depth 1 --verbose'
      - attach_workspace:
          at: .
      - run:
          name: Report webpack stats for manager of official storybook
          command: |
            cd examples/official-storybook
            yarn packtracker
  examples:
    executor:
      class: medium
      name: sb_node_12_browsers
    parallelism: 4
    steps:
      - git-shallow-clone/checkout_advanced:
          clone_options: '--depth 1 --verbose'
      - attach_workspace:
          at: .
      - run:
          name: examples
          command: |
            yarn build-storybooks
      - persist_to_workspace:
          root: .
          paths:
            - built-storybooks
  publish:
    executor:
      class: medium
      name: sb_node_12_classic
    steps:
      - git-shallow-clone/checkout_advanced:
          clone_options: '--depth 1 --verbose'
      - attach_workspace:
          at: .
      - run:
          name: running local registry
          command: yarn local-registry --publish
      - persist_to_workspace:
          root: .
          paths:
            - .verdaccio-cache
  e2e-tests-extended:
    executor:
      class: medium
      name: sb_cypress_6_node_12
    parallelism: 4
    steps:
      - when:
          condition:
            and:
              - not:
                  equal: [main, << pipeline.git.branch >>]
              - not:
                  equal: [next, << pipeline.git.branch >>]
          steps:
            - ensure-pr-is-labeled-with:
                label: 'run e2e extended test suite'
      - git-shallow-clone/checkout_advanced:
          clone_options: '--depth 1 --verbose'
      - attach_workspace:
          at: .
      - run:
          name: running local registry
          command: yarn local-registry --port 6000 --open
          background: true
      - run:
          name: Wait for registry
          command: yarn wait-on http://localhost:6000
      - run:
          name: Run E2E tests
          command: yarn test:e2e-framework --clean --all --skip angular11 --skip angular --skip vue3 --skip web_components_typescript --skip cra
          no_output_timeout: 5m
      - store_artifacts:
          path: /tmp/cypress-record
          destination: cypress
  e2e-tests-core:
    executor:
      class: medium
      name: sb_cypress_6_node_12
    parallelism: 2
    steps:
      - git-shallow-clone/checkout_advanced:
          clone_options: '--depth 1 --verbose'
      - attach_workspace:
          at: .
      - run:
          name: Running local registry
          command: yarn local-registry --port 6000 --open
          background: true
      - run:
          name: Wait for registry
          command: yarn wait-on http://localhost:6000
      - run:
          name: Run E2E tests
          # Do not test CRA here because it's done in PnP part
          # TODO: Remove `web_components_typescript` as soon as Lit 2 stable is released
          command: yarn test:e2e-framework vue3 angular angular11 web_components_typescript web_components_lit2
          no_output_timeout: 5m
      - store_artifacts:
          path: /tmp/cypress-record
          destination: cypress
  cra-bench:
    executor:
      class: medium
      name: sb_cypress_6_node_12
    working_directory: /tmp/storybook
    steps:
      - git-shallow-clone/checkout_advanced:
          clone_options: '--depth 1 --verbose'
      - attach_workspace:
          at: .
      - run:
          name: Running local registry
          command: yarn local-registry --port 6000 --open
          background: true
      - run:
          name: Wait for registry
          command: yarn wait-on http://localhost:6000
      - run:
          name: Run @storybook/bench on a CRA project
          command: |
            cd ..
            npx create-react-app cra-bench
            cd cra-bench
            npx @storybook/bench 'npx sb init' --label cra --extra-flags "--modern"
  e2e-tests-pnp:
    executor:
      class: medium
      name: sb_cypress_6_node_12
    working_directory: /tmp/storybook
    steps:
      - git-shallow-clone/checkout_advanced:
          clone_options: '--depth 1 --verbose'
      - attach_workspace:
          at: .
      - run:
          name: Running local registry
          command: yarn local-registry --port 6000 --open
          background: true
      - run:
          name: Wait for registry
          command: yarn wait-on http://localhost:6000
      - run:
          name: run e2e tests
          command: yarn test:e2e-framework --pnp sfcVue cra
      - store_artifacts:
          path: /tmp/cypress-record
          destination: cypress
  e2e-tests-examples:
    executor:
      class: small
      name: sb_cypress_6_node_12
    steps:
      - git-shallow-clone/checkout_advanced:
          clone_options: '--depth 1 --verbose'
      - attach_workspace:
          at: .
      - run:
          name: running example
          command: yarn serve-storybooks
          background: true
      - run:
          name: await running examples
          command: yarn await-serve-storybooks
      - run:
          name: cypress run
          command: yarn test:e2e-examples
      - store_artifacts:
          path: /tmp/cypress-record
          destination: cypress
  smoke-tests:
    executor:
      class: medium
      name: sb_node_12_browsers
    environment:
      # Disable ESLint when running smoke tests to improve perf + As of CRA 4.0.3, CRA kitchen sinks are throwing
      # because of some ESLint warnings, related to: https://github.com/facebook/create-react-app/pull/10590
      DISABLE_ESLINT_PLUGIN: 'true'
    steps:
      - git-shallow-clone/checkout_advanced:
          clone_options: '--depth 1 --verbose'
      - attach_workspace:
          at: .
      - run:
          name: Run react kitchen-sink (smoke test)
          command: |
            cd examples/cra-kitchen-sink
            yarn storybook --smoke-test --quiet
      - run:
          name: Run react typescript kitchen-sink (smoke test)
          command: |
            cd examples/cra-ts-kitchen-sink
            yarn storybook --smoke-test --quiet
      - run:
          name: Run vue kitchen-sink (smoke test)
          command: |
            cd examples/vue-kitchen-sink
            yarn storybook --smoke-test --quiet
      - run:
          name: Run svelte kitchen-sink (smoke test)
          command: |
            cd examples/svelte-kitchen-sink
            yarn storybook --smoke-test --quiet
      - run:
          name: Run angular-cli (smoke test)
          command: |
            cd examples/angular-cli
            yarn storybook --smoke-test --quiet
      - run:
          name: Run ember-cli (smoke test)
          command: |
            cd examples/ember-cli
            yarn storybook --smoke-test --quiet
      - run:
          name: Run official-storybook (smoke test)
          command: |
            cd examples/official-storybook
            yarn storybook --smoke-test --quiet
      - run:
          name: Run preact kitchen-sink (smoke test)
          command: |
            cd examples/preact-kitchen-sink
            yarn storybook --smoke-test --quiet
      - run:
          name: Run cra react15 (smoke test)
          command: |
            cd examples/cra-react15
            yarn storybook --smoke-test --quiet
  frontpage:
    executor: sb_node_12_browsers
    steps:
      - git-shallow-clone/checkout_advanced:
          clone_options: '--depth 1 --verbose'
      - run:
          name: Install dependencies
          command: yarn install --immutable
      - run:
          name: Trigger build
          command: ./scripts/build-frontpage.js
  lint:
    executor:
      class: small
      name: sb_node_12_classic
    steps:
      - git-shallow-clone/checkout_advanced:
          clone_options: '--depth 1 --verbose'
      - attach_workspace:
          at: .
      - run:
          name: Lint
          command: yarn lint
  unit-tests:
    executor: sb_node_12_browsers
    steps:
      - git-shallow-clone/checkout_advanced:
          clone_options: '--depth 1 --verbose'
      - attach_workspace:
          at: .
      - run:
          name: Test
          command: yarn test --coverage --runInBand --ci
      - persist_to_workspace:
          root: .
          paths:
            - coverage
  coverage:
    executor:
      class: small
      name: sb_node_12_browsers
    steps:
      - git-shallow-clone/checkout_advanced:
          clone_options: '--depth 1 --verbose'
      - attach_workspace:
          at: .
      - run:
          name: Upload coverage
          command: yarn coverage

workflows:
  test:
    jobs:
      - build
      - lint:
          requires:
            - build
      - examples:
          requires:
            - build
      - e2e-tests-examples:
          requires:
            - examples
      - smoke-tests:
          requires:
            - build
      - packtracker:
          requires:
            - build
      - unit-tests:
          requires:
            - build
      - coverage:
          requires:
            - unit-tests
      - chromatic:
          requires:
            - examples
      - publish:
          requires:
            - build
      - e2e-tests-extended:
          requires:
            - publish
      - e2e-tests-core:
          requires:
            - publish
      - e2e-tests-pnp:
          requires:
            - publish
      - cra-bench:
          requires:
            - publish
  deploy:
    jobs:
      - frontpage