docs: align components and templates with design docs [skip chromatic] #2754
Workflow file for this run
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| name: Quality Gate | |
| on: | |
| pull_request: | |
| types: [opened, synchronize, reopened, ready_for_review] | |
| jobs: | |
| linting-and-formatting: | |
| name: Verify monorepo | |
| runs-on: ubuntu-latest | |
| if: github.event.pull_request.draft == false | |
| container: | |
| image: mcr.microsoft.com/playwright:v1.44.1-jammy | |
| steps: | |
| - name: Checkout | |
| uses: actions/checkout@v4 | |
| - name: Install Node.js | |
| uses: actions/setup-node@v4 | |
| with: | |
| node-version: 18 | |
| - uses: pnpm/action-setup@v2 | |
| name: Install pnpm | |
| id: pnpm-install | |
| with: | |
| version: 8.6.2 | |
| run_install: false | |
| - name: Install dependencies | |
| run: pnpm i | |
| - name: verify lint, format and not-components | |
| run: pnpm lint.verify && pnpm format.verify && pnpm --recursive --if-present --filter="\!components" verify | |
| - name: verify components without tests | |
| run : cd packages/components && pnpm ts.verify && pnpm build && echo '✅ Build verified' && node ./scripts/node-optimize-chromatic.cjs && echo '✅ Chromatic optimization verified' | |
| # Check Chromatic for visual changes after all other checks have passed | |
| chromatic-deployment-pr: | |
| name: Verify Chromatic | |
| needs: [linting-and-formatting] | |
| if: ${{!contains(github.event.pull_request.title, '[skip chromatic]') && !startsWith(github.event.pull_request.title, 'chore(security deps):')}} | |
| runs-on: ubuntu-latest | |
| steps: | |
| # 👇 Version 2 of the action | |
| - name: Checkout repository | |
| uses: actions/checkout@v4 | |
| with: | |
| fetch-depth: 0 # 👈 Required to retrieve git history | |
| - uses: pnpm/action-setup@v2 | |
| with: | |
| version: 8.6.2 | |
| # 👇 Install dependencies with the same package manager used in the project (replace it as needed), e.g. yarn, npm, pnpm | |
| - name: Install dependencies | |
| run: PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD=true pnpm i | |
| # 👇 Build storybook with pnpm | |
| - name: Build storybook | |
| run: cd packages/components && pnpm run build.chromatic | |
| # 👇 Adds Chromatic as a step in the workflow | |
| - name: Publish to Chromatic | |
| uses: chromaui/action@latest | |
| # Options required to the GitHub Chromatic Action | |
| with: | |
| # 👇 Chromatic projectToken, refer to the manage page to obtain it. | |
| projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }} | |
| # Speedup the build by not waiting until everything is sent to Chromatic | |
| exitOnceUploaded: true | |
| # TurboSnap is an advanced Chromatic feature that speeds up builds for faster UI testing and review using Git and Webpack’s dependency graph | |
| onlyChanged: false | |
| # We need to manually build storybook with pnpm | |
| storybookBuildDir: packages/components/dist/storybook | |
| quality-gate: | |
| name: Test components (do locally if failing) | |
| needs: [linting-and-formatting] | |
| runs-on: ubuntu-latest | |
| if: github.event.pull_request.draft == false | |
| container: | |
| image: mcr.microsoft.com/playwright:v1.44.1-jammy | |
| steps: | |
| - name: Checkout | |
| uses: actions/checkout@v4 | |
| - name: Install Node.js | |
| uses: actions/setup-node@v4 | |
| with: | |
| node-version: 18 | |
| - uses: pnpm/action-setup@v2 | |
| name: Install pnpm | |
| id: pnpm-install | |
| with: | |
| version: 8.6.2 | |
| run_install: false | |
| - name: Install dependencies | |
| run: pnpm i | |
| - name: Components test | |
| run: cd packages/components && pnpm test.verify |