Skip to content

Commit 99a8715

Browse files
NiznikrNiznikr
authored
ci: enable TurboSnap for Chromatic (#3027)
* feat: add turbosnap for chromatic * ci: update externals * fix: update lockfile * chore: update action * fix: apply mainFields for prod * fix: prevent code block render issue
1 parent f54b3c8 commit 99a8715

File tree

10 files changed

+1424
-883
lines changed

10 files changed

+1424
-883
lines changed

‎.github/workflows/on_merge_to_main.yml‎

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ jobs:
1414

1515
steps:
1616
- name: Checkout Repo
17-
uses: actions/checkout@v2
17+
uses: actions/checkout@v3
1818

1919
- name: Setup Node.js 16.13
2020
uses: actions/setup-node@v3
@@ -68,7 +68,7 @@ jobs:
6868
runs-on: ubuntu-latest
6969
steps:
7070
- name: Checkout Repo
71-
uses: actions/checkout@v2
71+
uses: actions/checkout@v3
7272

7373
- name: Setup Node.js 16.13
7474
uses: actions/setup-node@v3
@@ -131,7 +131,7 @@ jobs:
131131
if: "!contains(github.event.head_commit.message, 'chore(release): version packages')"
132132
steps:
133133
- name: Checkout Repo
134-
uses: actions/checkout@v2
134+
uses: actions/checkout@v3
135135
with:
136136
# Chromatic needs the full git history to work
137137
fetch-depth: 0
@@ -181,6 +181,11 @@ jobs:
181181
buildScriptName: "build:storybook"
182182
autoAcceptChanges: "main"
183183
exitOnceUploaded: true
184+
onlyChanged: true
185+
externals: |
186+
- 'packages/paste-design-tokens/tokens/**'
187+
- 'packages/paste-icons/src/**'
188+
- '.storybook/static/**'
184189
env:
185190
STORYBOOK_GITHUB_SHA: ${{ github.sha }}
186191
# https://github.com/storybookjs/builder-vite/issues/409#issuecomment-1199236279
@@ -217,7 +222,7 @@ jobs:
217222

218223
steps:
219224
- name: Checkout Repo
220-
uses: actions/checkout@v2
225+
uses: actions/checkout@v3
221226

222227
- name: Setup Node.js 16.13
223228
uses: actions/setup-node@v3

‎.github/workflows/on_pull_request.yml‎

Lines changed: 15 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ jobs:
1111

1212
steps:
1313
- name: Checkout Repo
14-
uses: actions/checkout@v2
14+
uses: actions/checkout@v3
1515

1616
- name: Setup Node.js 16.13
1717
uses: actions/setup-node@v3
@@ -65,7 +65,7 @@ jobs:
6565
runs-on: ubuntu-latest
6666
steps:
6767
- name: Checkout Repo
68-
uses: actions/checkout@v2
68+
uses: actions/checkout@v3
6969

7070
- name: Setup Node.js 16.13
7171
uses: actions/setup-node@v3
@@ -113,7 +113,7 @@ jobs:
113113
runs-on: ubuntu-latest
114114
steps:
115115
- name: Checkout Repo
116-
uses: actions/checkout@v2
116+
uses: actions/checkout@v3
117117

118118
- name: Setup Node.js 16.13
119119
uses: actions/setup-node@v3
@@ -161,7 +161,7 @@ jobs:
161161
runs-on: ubuntu-latest
162162
steps:
163163
- name: Checkout Repo
164-
uses: actions/checkout@v2
164+
uses: actions/checkout@v3
165165

166166
- name: Setup Node.js 16.13
167167
uses: actions/setup-node@v3
@@ -209,7 +209,7 @@ jobs:
209209
runs-on: ubuntu-latest
210210
steps:
211211
- name: Checkout Repo
212-
uses: actions/checkout@v2
212+
uses: actions/checkout@v3
213213

214214
- name: Setup Node.js 16.13
215215
uses: actions/setup-node@v3
@@ -256,7 +256,7 @@ jobs:
256256
runs-on: ubuntu-latest
257257
steps:
258258
- name: Checkout Repo
259-
uses: actions/checkout@v2
259+
uses: actions/checkout@v3
260260

261261
- name: Setup Node.js 16.13
262262
uses: actions/setup-node@v3
@@ -319,7 +319,7 @@ jobs:
319319
runs-on: ubuntu-latest
320320
steps:
321321
- name: Checkout Repo
322-
uses: actions/checkout@v2
322+
uses: actions/checkout@v3
323323

324324
- name: Setup Node.js 16.13
325325
uses: actions/setup-node@v3
@@ -369,7 +369,7 @@ jobs:
369369

370370
steps:
371371
- name: Checkout Repo
372-
uses: actions/checkout@v2
372+
uses: actions/checkout@v3
373373
with:
374374
# Chromatic needs the full git history to work
375375
fetch-depth: 0
@@ -419,6 +419,11 @@ jobs:
419419
buildScriptName: "build:storybook"
420420
autoAcceptChanges: "main"
421421
exitOnceUploaded: true
422+
onlyChanged: true
423+
externals: |
424+
- 'packages/paste-design-tokens/tokens/**'
425+
- 'packages/paste-icons/src/**'
426+
- '.storybook/static/**'
422427
env:
423428
STORYBOOK_GITHUB_SHA: ${{ github.event.pull_request.head.sha }}
424429
# https://github.com/storybookjs/builder-vite/issues/409#issuecomment-1199236279
@@ -429,7 +434,7 @@ jobs:
429434
runs-on: ubuntu-latest
430435
steps:
431436
- name: Checkout Repo
432-
uses: actions/checkout@v2
437+
uses: actions/checkout@v3
433438

434439
- name: Setup Node.js 16.13
435440
uses: actions/setup-node@v3
@@ -472,7 +477,7 @@ jobs:
472477
runs-on: ubuntu-latest
473478
steps:
474479
- name: Checkout Repo
475-
uses: actions/checkout@v2
480+
uses: actions/checkout@v3
476481

477482
- name: Setup Node.js 16.13
478483
uses: actions/setup-node@v3

‎.github/workflows/on_pull_request_cypress.yml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ jobs:
3535

3636
steps:
3737
- name: Checkout Repo
38-
uses: actions/checkout@v2
38+
uses: actions/checkout@v3
3939

4040
- name: Setup Node.js 16.13
4141
uses: actions/setup-node@v3

‎.github/workflows/on_pull_request_package_size.yml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ jobs:
88
runs-on: ubuntu-latest
99
steps:
1010
- name: Checkout Repo
11-
uses: actions/checkout@v2
11+
uses: actions/checkout@v3
1212

1313
- name: Setup Node.js 16.13
1414
uses: actions/setup-node@v3

‎.github/workflows/on_release_publish.yml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ jobs:
99
name: Sends a message to Slack when a package is released
1010

1111
steps:
12-
- uses: actions/checkout@v2
12+
- uses: actions/checkout@v3
1313
- run: |
1414
echo "${{ github.event.release.tag_name }}"
1515
echo "${{ github.event.release.name }}"

‎.storybook/RenderPerformanceProfiler.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
/// <reference types="vite/client" />
22
import React from 'react';
3-
import isChromatic from 'chromatic/isChromatic';
3+
import isChromatic from 'chromatic';
44
import {version} from '../packages/paste-core/core-bundle/package.json';
55

66
const trackRenderPerformance = (data) => {

‎.storybook/main.ts‎

Lines changed: 13 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import type {StorybookConfig} from '@storybook/react-vite';
22
import {mergeConfig} from 'vite';
3+
import turbosnap from 'vite-plugin-turbosnap';
34
import path from 'path';
45

56
const config: StorybookConfig = {
@@ -14,9 +15,7 @@ const config: StorybookConfig = {
1415
'@storybook/addon-interactions',
1516
'./addons/google-analytics/register',
1617
],
17-
framework: {
18-
name: '@storybook/react-vite',
19-
},
18+
framework: '@storybook/react-vite',
2019
features: {
2120
interactionsDebugger: true,
2221
},
@@ -30,19 +29,27 @@ const config: StorybookConfig = {
3029
defaultName: 'Docs',
3130
},
3231
async viteFinal(config, {configType}) {
33-
const isDev = configType === 'DEVELOPMENT' && process.env.NODE_ENV !== 'test';
32+
const isTest = process.env.NODE_ENV === 'test';
3433
return mergeConfig(config, {
34+
plugins: configType === 'PRODUCTION' ? [turbosnap({rootDir: config.root ?? process.cwd()})] : [],
3535
resolve: {
3636
alias: {
3737
'next/link': path.resolve(__dirname, './next'),
3838
'react-dom/client': path.resolve(__dirname, '../node_modules/react-dom/client'),
3939
'react-dom': path.resolve(__dirname, '../node_modules/react-dom/profiling'),
4040
'scheduler/tracing': path.resolve(__dirname, '../node_modules/scheduler/tracing-profiling'),
41+
// Avoid initial render issues for code blocks in prod build
42+
'react-syntax-highlighter/dist/esm': path.resolve(
43+
__dirname,
44+
'../node_modules/react-syntax-highlighter/dist/cjs'
45+
),
46+
'react-syntax-highlighter': path.resolve(__dirname, '../node_modules/react-syntax-highlighter/dist/cjs'),
4147
},
42-
...(isDev && {mainFields: ['main:dev', 'browser', 'module', 'main']}),
48+
// Use source files for HMR and TurboSnap dependency map
49+
...(!isTest && {mainFields: ['main:dev', 'browser', 'module', 'main']}),
4350
},
4451
optimizeDeps: {
45-
include: ['@storybook/addon-viewport', 'chromatic/isChromatic', '@emotion/react/jsx-dev-runtime'],
52+
include: ['@storybook/addon-viewport', 'chromatic', '@emotion/react/jsx-dev-runtime'],
4653
},
4754
});
4855
},

‎.storybook/preview.tsx‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import React from 'react';
2-
import {action} from '@storybook/addon-actions';
32
import {INITIAL_VIEWPORTS} from '@storybook/addon-viewport';
4-
import isChromatic from 'chromatic/isChromatic';
3+
import isChromatic from 'chromatic';
54
import {StylingGlobals} from '@twilio-paste/styling-library';
65
import {Theme} from '@twilio-paste/theme';
76
import {Box} from '@twilio-paste/box';

‎package.json‎

Lines changed: 12 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -126,15 +126,15 @@
126126
"@netlify/functions": "^0.7.2",
127127
"@percy/cli": "^1.10.1",
128128
"@percy/cypress": "^3.1.2",
129-
"@storybook/addon-a11y": "7.0.0-beta.14",
130-
"@storybook/addon-actions": "7.0.0-beta.14",
131-
"@storybook/addon-essentials": "7.0.0-beta.14",
132-
"@storybook/addon-interactions": "7.0.0-beta.14",
133-
"@storybook/addon-links": "7.0.0-beta.14",
134-
"@storybook/addons": "7.0.0-beta.14",
135-
"@storybook/cli": "7.0.0-beta.14",
136-
"@storybook/react": "7.0.0-beta.14",
137-
"@storybook/react-vite": "7.0.0-beta.14",
129+
"@storybook/addon-a11y": "7.0.0-beta.45",
130+
"@storybook/addon-actions": "7.0.0-beta.45",
131+
"@storybook/addon-essentials": "7.0.0-beta.45",
132+
"@storybook/addon-interactions": "7.0.0-beta.45",
133+
"@storybook/addon-links": "7.0.0-beta.45",
134+
"@storybook/addons": "7.0.0-beta.45",
135+
"@storybook/cli": "7.0.0-beta.45",
136+
"@storybook/react": "7.0.0-beta.45",
137+
"@storybook/react-vite": "7.0.0-beta.45",
138138
"@storybook/test-runner": "0.9.1",
139139
"@storybook/testing-library": "0.0.13",
140140
"@swc/core": "^1.2.160",
@@ -165,7 +165,7 @@
165165
"babel-plugin-macros": "^3.1.0",
166166
"browser-sync": "^2.26.9",
167167
"chalk": "4.1.2",
168-
"chromatic": "^5.5.0",
168+
"chromatic": "^6.17.0",
169169
"chrome-aws-lambda": "^10.0.0",
170170
"color": "^3.1.2",
171171
"commander": "^2.20.0",
@@ -226,7 +226,8 @@
226226
"typescript": "^4.9.4",
227227
"ui-box": "^5.4.0",
228228
"unist-util-visit-esm": "npm:unist-util-visit@^4.1.2",
229-
"vite": "^4.0.1"
229+
"vite": "^4.0.1",
230+
"vite-plugin-turbosnap": "^1.0.1"
230231
},
231232
"resolutions": {
232233
"csstype": "3.0.11",

0 commit comments

Comments
 (0)