feat(theme): allow styling themeprovider like box #5079

Workflow file for this run

.github/workflows/on_pull_request.yml at 9701007

	name: PR Checks

	on:
	pull_request:
	types: [opened, synchronize, reopened, ready_for_review]

	jobs:
	build:
	name: Build system packages and type check
	runs-on: ubuntu-latest
	env:
	NX_CLOUD_ACCESS_TOKEN: ${{ secrets.NX_CLOUD_ACCESS_TOKEN }}

	steps:
	- name: Checkout Repo
	uses: actions/checkout@v4
	with:
	fetch-depth: 0

	- uses: nrwl/nx-set-shas@v4

	- name: Setup Node.js 20.5
	uses: actions/setup-node@v4
	with:
	node-version: 20.5.x

	- name: Get yarn cache directory path
	id: yarn-cache-dir-path
	run: echo "dir=$(yarn config get cacheFolder)" >> $GITHUB_OUTPUT

	- name: Load Yarn cache
	uses: actions/cache@v3
	id: yarn_cache_id
	with:
	path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
	key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
	restore-keys: \|
	${{ runner.os }}-yarn

	- name: Node modules cache
	uses: actions/cache@v3
	id: node_modules_cache_id
	with:
	path: \|
	node_modules
	//node_modules
	key: ${{ runner.os }}-${{ hashFiles('**/yarn.lock') }}

	- name: Install Dependencies
	if: steps.yarn_cache_id.outputs.cache-hit != 'true' \|\| steps.node_modules_cache_id.outputs.cache-hit != 'true'
	run: yarn install --immutable

	- name: Build packages
	run: yarn build

	- run: yarn build:typedocs
	- name: Verify generated types are checked in for website
	run: yarn check:type-docs

	eslint:
	name: Lint repository
	runs-on: ubuntu-latest
	env:
	NX_CLOUD_ACCESS_TOKEN: ${{ secrets.NX_CLOUD_ACCESS_TOKEN }}
	AIRTABLE_APIKEY: ${{ secrets.AIRTABLE_APIKEY }}
	AIRTABLE_BASEID: ${{ secrets.AIRTABLE_BASEID }}
	steps:
	- name: Checkout Repo
	uses: actions/checkout@v4
	with:
	fetch-depth: 0

	- uses: nrwl/nx-set-shas@v4

	- name: Setup Node.js 20.5
	uses: actions/setup-node@v4
	with:
	node-version: 20.5.x

	- name: Get yarn cache directory path
	id: yarn-cache-dir-path
	run: echo "dir=$(yarn config get cacheFolder)" >> $GITHUB_OUTPUT

	- name: Load Yarn cache
	uses: actions/cache@v3
	id: yarn_cache_id
	with:
	path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
	key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
	restore-keys: \|
	${{ runner.os }}-yarn

	- name: Node modules cache
	uses: actions/cache@v3
	id: node_modules_cache_id
	with:
	path: \|
	node_modules
	//node_modules
	key: ${{ runner.os }}-${{ hashFiles('**/yarn.lock') }}

	- name: Install Dependencies
	if: steps.yarn_cache_id.outputs.cache-hit != 'true' \|\| steps.node_modules_cache_id.outputs.cache-hit != 'true'
	run: yarn install --immutable

	- name: Build packages
	run: yarn build

	- name: Generate website data files
	run: yarn generate:website-data

	- name: Run eslint
	run: yarn lint

	tests:
	name: Test repository using React 18
	runs-on: ubuntu-latest
	steps:
	- name: Checkout Repo
	uses: actions/checkout@v4
	with:
	fetch-depth: 0

	- uses: nrwl/nx-set-shas@v4

	- name: Setup Node.js 20.5
	uses: actions/setup-node@v4
	with:
	node-version: 20.5.x

	- name: Get yarn cache directory path
	id: yarn-cache-dir-path
	run: echo "dir=$(yarn config get cacheFolder)" >> $GITHUB_OUTPUT

	- name: Load Yarn cache
	uses: actions/cache@v3
	id: yarn_cache_id
	with:
	path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
	key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
	restore-keys: \|
	${{ runner.os }}-yarn

	- name: Node modules cache
	uses: actions/cache@v3
	id: node_modules_cache_id
	with:
	path: \|
	node_modules
	//node_modules
	key: ${{ runner.os }}-${{ hashFiles('**/yarn.lock') }}

	- name: Install Dependencies
	if: steps.yarn_cache_id.outputs.cache-hit != 'true' \|\| steps.node_modules_cache_id.outputs.cache-hit != 'true'
	run: yarn install --immutable

	- name: Build packages
	run: yarn build
	env:
	NX_CLOUD_ACCESS_TOKEN: ${{ secrets.NX_CLOUD_ACCESS_TOKEN }}

	- name: Run tests
	run: yarn test

	react17_tests:
	name: Test repository using React 17
	runs-on: ubuntu-latest
	env:
	NX_CLOUD_ACCESS_TOKEN: ${{ secrets.NX_CLOUD_ACCESS_TOKEN }}
	steps:
	- name: Checkout Repo
	uses: actions/checkout@v4
	with:
	fetch-depth: 0

	- uses: nrwl/nx-set-shas@v4

	- name: Setup Node.js 20.5
	uses: actions/setup-node@v4
	with:
	node-version: 20.5.x

	- name: Get yarn cache directory path
	id: yarn-cache-dir-path
	run: echo "dir=$(yarn config get cacheFolder)" >> $GITHUB_OUTPUT

	- name: Load Yarn cache
	uses: actions/cache@v3
	id: yarn_cache_id
	with:
	path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
	key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
	restore-keys: \|
	${{ runner.os }}-yarn

	# Note: Yarn cache has been removed from the following step
	# since we need to change the React version installed
	- name: Install Dependencies
	run: yarn install --immutable

	# Note: Build first before we change the react version installed.
	- name: Build packages
	run: yarn build

	- name: Install React 17
	run: \|
	yarn add @types/react@^17.0.0 react@^17.0.2 react-dom@^17.0.2
	yarn set resolution react@npm:^18.0.0 ^17.0.2
	yarn set resolution @types/react@npm:^18.0.0 ^17.0.31
	yarn set resolution react-dom@npm:^18.0.0 ^17.0.2
	yarn set resolution @testing-library/react@npm:^13.4.0 ^12.1.4

	- name: Run tests
	run: yarn test

	react16_tests:
	name: Test repository using React 16
	runs-on: ubuntu-latest
	env:
	NX_CLOUD_ACCESS_TOKEN: ${{ secrets.NX_CLOUD_ACCESS_TOKEN }}
	steps:
	- name: Checkout Repo
	uses: actions/checkout@v4
	with:
	fetch-depth: 0

	- uses: nrwl/nx-set-shas@v4

	- name: Setup Node.js 20.5
	uses: actions/setup-node@v4
	with:
	node-version: 20.5.x

	- name: Get yarn cache directory path
	id: yarn-cache-dir-path
	run: echo "dir=$(yarn config get cacheFolder)" >> $GITHUB_OUTPUT

	- name: Load Yarn cache
	uses: actions/cache@v3
	id: yarn_cache_id
	with:
	path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
	key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
	restore-keys: \|
	${{ runner.os }}-yarn

	# Note: Yarn cache has been removed from the following step
	# since we need to change the React version installed
	- name: Install Dependencies
	run: yarn install --immutable

	# Note: Build first before we change the react version installed.
	- name: Build packages
	run: yarn build

	- name: Install React 16
	run: \|
	yarn add @types/react@^16.0.0 react@^16.8.6 react-dom@^16.8.6
	yarn set resolution react@npm:^18.0.0 ^16.8.6
	yarn set resolution @types/react@npm:^18.0.0 ^16.0.0
	yarn set resolution react-dom@npm:^18.0.0 ^16.8.6
	yarn set resolution @testing-library/react@npm:^13.4.0 ^12.1.4

	- name: Run tests
	run: yarn test

	format:
	name: Code format checks
	runs-on: ubuntu-latest
	steps:
	- name: Checkout Repo
	uses: actions/checkout@v4
	with:
	fetch-depth: 0

	- uses: nrwl/nx-set-shas@v4

	- name: Setup Node.js 20.5
	uses: actions/setup-node@v4
	with:
	node-version: 20.5.x

	- name: Get yarn cache directory path
	id: yarn-cache-dir-path
	run: echo "dir=$(yarn config get cacheFolder)" >> $GITHUB_OUTPUT

	- name: Load Yarn cache
	uses: actions/cache@v3
	id: yarn_cache_id
	with:
	path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
	key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
	restore-keys: \|
	${{ runner.os }}-yarn

	- name: Node modules cache
	uses: actions/cache@v3
	id: node_modules_cache_id
	with:
	path: \|
	node_modules
	//node_modules
	key: ${{ runner.os }}-${{ hashFiles('**/yarn.lock') }}

	- name: Install Dependencies
	if: steps.yarn_cache_id.outputs.cache-hit != 'true' \|\| steps.node_modules_cache_id.outputs.cache-hit != 'true'
	run: yarn install --immutable

	- name: Run BiomeJS + Prettier format for their respective files
	run: yarn format:ci

	chromatic:
	name: Component Visual regression tests
	runs-on: ubuntu-latest
	if: github.event.pull_request.draft == false
	outputs:
	storybookUrl: ${{ steps.chromaticaction.outputs.storybookUrl }}

	steps:
	- name: Checkout Repo
	uses: actions/checkout@v4
	with:
	fetch-depth: 0

	- uses: nrwl/nx-set-shas@v4

	- name: Setup Node.js 20.5
	uses: actions/setup-node@v4
	with:
	node-version: 20.5.x

	- name: Get yarn cache directory path
	id: yarn-cache-dir-path
	run: echo "dir=$(yarn config get cacheFolder)" >> $GITHUB_OUTPUT

	- name: Load Yarn cache
	uses: actions/cache@v3
	id: yarn_cache_id
	with:
	path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
	key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
	restore-keys: \|
	${{ runner.os }}-yarn

	- name: Node modules cache
	uses: actions/cache@v3
	id: node_modules_cache_id
	with:
	path: \|
	node_modules
	//node_modules
	key: ${{ runner.os }}-${{ hashFiles('**/yarn.lock') }}

	- name: Install Dependencies
	if: steps.yarn_cache_id.outputs.cache-hit != 'true' \|\| steps.node_modules_cache_id.outputs.cache-hit != 'true'
	run: yarn install --immutable

	- name: Build packages
	run: yarn build
	env:
	NX_CLOUD_ACCESS_TOKEN: ${{ secrets.NX_CLOUD_ACCESS_TOKEN }}

	- name: Run Chromatic
	id: chromaticaction
	uses: chromaui/action@v10
	with:
	zip: true
	projectToken: ${{ secrets.CHROMA_APP_CODE }}
	token: ${{ secrets.GITHUB_TOKEN }}
	buildScriptName: "build:storybook"
	autoAcceptChanges: "main"
	exitOnceUploaded: true
	onlyChanged: true
	externals: \|
	- 'packages/paste-design-tokens/tokens/**'
	- 'packages/paste-icons/src/**'
	- '.storybook/static/**'
	env:
	STORYBOOK_GITHUB_SHA: ${{ github.event.pull_request.head.sha }}
	# https://github.com/storybookjs/builder-vite/issues/409#issuecomment-1199236279
	NODE_OPTIONS: --max-old-space-size=6144

	storybook_tests:
	name: Storybook test runner
	runs-on: ubuntu-latest
	timeout-minutes: 20
	needs: chromatic
	strategy:
	matrix:
	shard: [1/4, 2/4, 3/4, 4/4]
	steps:
	- name: Checkout Repo
	uses: actions/checkout@v4
	with:
	fetch-depth: 0

	- name: Setup Node.js 20.5
	uses: actions/setup-node@v4
	with:
	node-version: 20.5.x

	- name: Get yarn cache directory path
	id: yarn-cache-dir-path
	run: echo "dir=$(yarn config get cacheFolder)" >> $GITHUB_OUTPUT

	- name: Load Yarn cache
	uses: actions/cache@v3
	id: yarn_cache_id
	with:
	path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
	key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
	restore-keys: \|
	${{ runner.os }}-yarn

	- name: Node modules cache
	uses: actions/cache@v3
	id: node_modules_cache_id
	with:
	path: \|
	node_modules
	//node_modules
	key: ${{ runner.os }}-${{ hashFiles('**/yarn.lock') }}

	- name: Install Dependencies
	if: steps.yarn_cache_id.outputs.cache-hit != 'true' \|\| steps.node_modules_cache_id.outputs.cache-hit != 'true'
	run: yarn install --immutable

	- name: Get playwright version
	id: pw-version
	run: echo "version=$(yarn playwright --version)" >> $GITHUB_OUTPUT

	- name: Cache playwright binaries
	uses: actions/cache@v3
	id: playwright-cache
	with:
	path: "~/.cache/ms-playwright"
	key: cache-playwright-${{ runner.os }}-${{ steps.pw-version.outputs.version }}

	- name: Install Playwright
	if: steps.playwright-cache.outputs.cache-hit != 'true'
	run: npx playwright install --with-deps

	- name: Run Storybook test runner
	run: yarn test-storybook --url ${{ needs.chromatic.outputs.storybookUrl }} --ci --shard=${{ matrix.shard }}

	pr-categorizer:
	name: Categorize the PR using labels
	runs-on: ubuntu-latest
	steps:
	- name: Checkout Repo
	uses: actions/checkout@v4

	- uses: actions/labeler@v4
	with:
	repo-token: "${{ secrets.GITHUB_TOKEN }}"
	sync-labels: true

	danger:
	name: Danger checks
	runs-on: ubuntu-latest
	steps:
	- name: Checkout Repo
	uses: actions/checkout@v4

	- name: Setup Node.js 20.5
	uses: actions/setup-node@v4
	with:
	node-version: 20.5.x

	- name: Get yarn cache directory path
	id: yarn-cache-dir-path
	run: echo "dir=$(yarn config get cacheFolder)" >> $GITHUB_OUTPUT

	- name: Load Yarn cache
	uses: actions/cache@v3
	id: yarn_cache_id
	with:
	path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
	key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
	restore-keys: \|
	${{ runner.os }}-yarn

	- name: Node modules cache
	uses: actions/cache@v3
	id: node_modules_cache_id
	with:
	path: \|
	node_modules
	//node_modules
	key: ${{ runner.os }}-${{ hashFiles('**/yarn.lock') }}

	- name: Install Dependencies
	if: steps.yarn_cache_id.outputs.cache-hit != 'true' \|\| steps.node_modules_cache_id.outputs.cache-hit != 'true'
	run: yarn install --immutable

	- name: Run DangerJS
	run: yarn danger ci
	env:
	GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

	typos:
	name: Typos checks
	runs-on: ubuntu-latest
	steps:
	- name: Checkout Repo
	uses: actions/checkout@v4

	- name: Check for typos
	uses: reviewdog/action-misspell@v1
	with:
	github_token: ${{ secrets.GITHUB_TOKEN }}
	locale: "US"
	reporter: github-pr-review
	level: error
	pattern: \|
	*.md
	*.mdx
	**/type-docs.json

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(theme): allow styling themeprovider like box #5079

Workflow file

feat(theme): allow styling themeprovider like box #5079

Jobs

Run details

Workflow file for this run