Skip to content

Commit 7565188

Browse files
mkrausemkrause
authored
Merge pull request #53 from fortanix/mkrause/241210-chromatic
Add Chromatic integration for visual testing
2 parents 1fd791f + 8fb9af5 commit 7565188

File tree

10 files changed

+142
-95
lines changed

10 files changed

+142
-95
lines changed

‎.github/workflows/chromatic.yaml

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
name: "Chromatic"
2+
3+
on: push
4+
5+
jobs:
6+
chromatic:
7+
name: Run Chromatic
8+
runs-on: ubuntu-latest
9+
steps:
10+
- name: Checkout code
11+
uses: actions/checkout@v4
12+
with:
13+
fetch-depth: 0
14+
- uses: actions/setup-node@v4
15+
with:
16+
node-version: 22
17+
- name: Install dependencies
18+
run: npm ci
19+
- name: Run Chromatic
20+
uses: chromaui/action@latest
21+
with:
22+
projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}

‎chromatic.config.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"onlyChanged": true,
3-
"projectId": "Project:FIXME",
3+
"projectId": "Project:6757628e1f35f97b959b83b4",
44
"zip": true,
55
"buildScriptName": "storybook:build"
66
}

‎package-lock.json

Lines changed: 4 additions & 6 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -39,10 +39,11 @@
3939
"import": "tsx scripts/import.ts",
4040
"automate": "tsx scripts/automate.ts",
4141
"serve:dev": "vite --config=./vite.config.ts serve",
42-
"build": "vite --config=./vite.config.ts --emptyOutDir build",
42+
"build": "tsc -b && vite --config=./vite.config.ts build",
4343
"storybook:serve": "storybook dev -p 6006",
4444
"storybook:build": "storybook build --docs",
45-
"check:types": "tsc --noEmit",
45+
"chromatic": "npx chromatic",
46+
"check:types": "tsc -b",
4647
"lint:style": "stylelint 'src/**/*.scss'",
4748
"lint:script": "biome lint",
4849
"lint": "npm run lint:style && npm run lint:script",
@@ -79,6 +80,7 @@
7980
"@storybook/addon-links": "^8.4.7",
8081
"@storybook/addon-storysource": "^8.4.7",
8182
"@storybook/addon-designs": "^8.0.4",
83+
"chromatic": "^11.20.0",
8284
"@chromatic-com/storybook": "^3.2.2",
8385
"storybook-dark-mode": "^4.0.2",
8486
"@percy/cli": "^1.30.4",

‎package.json.js

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -53,14 +53,15 @@ const packageConfig = {
5353
// App
5454
'serve:dev': 'vite --config=./vite.config.ts serve',
5555
//'build': 'vite --config=./vite.config.ts --emptyOutDir build && cp src/types/vite-env.d.ts dist && echo \'{"name": "@fortanix/baklava","main": "./baklava.js"}\' > dist/package.json',
56-
'build': 'vite --config=./vite.config.ts --emptyOutDir build',
56+
'build': 'tsc -b && vite --config=./vite.config.ts build',
5757

5858
// Storybook
5959
'storybook:serve': 'storybook dev -p 6006',
6060
'storybook:build': 'storybook build --docs',
61+
'chromatic': 'npx chromatic', // Must be run with `CHROMATIC_PROJECT_TOKEN` env variable (secret)
6162

6263
// Static analysis
63-
'check:types': 'tsc --noEmit',
64+
'check:types': 'tsc -b',
6465
'lint:style': `stylelint 'src/**/*.scss'`,
6566
'lint:script': 'biome lint',
6667
'lint': 'npm run lint:style && npm run lint:script',
@@ -116,6 +117,7 @@ const packageConfig = {
116117
'@storybook/addon-links': '^8.4.7',
117118
'@storybook/addon-storysource': '^8.4.7',
118119
'@storybook/addon-designs': '^8.0.4',
120+
'chromatic': '^11.20.0',
119121
'@chromatic-com/storybook': '^3.2.2', // Chromatic integration for Storybook
120122
//'storybook-addon-pseudo-states': '^3.1.1',
121123
'storybook-dark-mode': '^4.0.2',

‎tsconfig.app.json

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
{
2+
"compilerOptions": {
3+
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
4+
5+
// Emission
6+
"noEmit": true, // Do not emit by default (only type check)
7+
//"emitDeclarationOnly": false,
8+
"target": "ES2024", // JavaScript language version to emit
9+
"module": "ESNext", // The type of file to emit (CommonJS/ESM/etc.)
10+
"esModuleInterop": false,
11+
"allowSyntheticDefaultImports": true,
12+
13+
// Imports
14+
"moduleResolution": "bundler", // Resolve import specifiers like bundlers (allows explicit file extensions)
15+
"moduleDetection": "force", // Enforce that we're always using ESM
16+
"isolatedModules": true, // Restrict language features not compatible with tools like babel
17+
"allowImportingTsExtensions": true, // Allow importing `.ts` extensions
18+
"allowJs": true, // If `true` allows to import `.js` files
19+
"resolveJsonModule": true, // Allow importing `.json` files
20+
"forceConsistentCasingInFileNames": true, // Do not allow case-insensitive import file name matching
21+
"paths": {
22+
//"@": ["./src"],
23+
},
24+
25+
// Type checking
26+
"lib": ["ES2024", "DOM", "DOM.Iterable"], // Library declaration files to include (globally)
27+
"skipLibCheck": true, // Do not type check declaration files (for performance)
28+
"noErrorTruncation": true,
29+
30+
// Language
31+
"strict": true,
32+
"exactOptionalPropertyTypes": true,
33+
"noUncheckedIndexedAccess": true,
34+
"useDefineForClassFields": true, // Use latest ES spec version of class fields
35+
"jsx": "react-jsx",
36+
37+
// Linting
38+
//"noUnusedLocals": true,
39+
//"noUnusedParameters": true,
40+
"noFallthroughCasesInSwitch": true,
41+
"noUncheckedSideEffectImports": true,
42+
43+
// Check CSS module class names in the IDE
44+
"plugins": [{
45+
"name": "typescript-plugin-css-modules",
46+
"options": {
47+
//"classnameTransform": "camelCase",
48+
//"goToDefinition": true,
49+
},
50+
}],
51+
},
52+
"include": [
53+
"app",
54+
"src",
55+
],
56+
"exclude": [
57+
"node_modules",
58+
"**/*.spec.ts",
59+
"src/components/navigations/Tabs/Tabs.stories.tsx", // FIXME: need to fix a few type errors
60+
],
61+
}

‎tsconfig.decl.json

Lines changed: 0 additions & 10 deletions
This file was deleted.

‎tsconfig.json

Lines changed: 4 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -1,58 +1,7 @@
11
{
2-
"compilerOptions": {
3-
"plugins": [{
4-
"name": "typescript-plugin-css-modules",
5-
"options": {
6-
//"classnameTransform": "camelCase",
7-
//"goToDefinition": true,
8-
},
9-
}],
10-
11-
// Emission
12-
"noEmit": true, // Do not emit by default (only type check)
13-
//"emitDeclarationOnly": true,
14-
"target": "es2022", // JavaScript language version to emit
15-
"module": "es2022", // The type of file to emit (CommonJS/ESM/etc.)
16-
"esModuleInterop": false,
17-
"allowSyntheticDefaultImports": true,
18-
19-
// Imports
20-
"moduleResolution": "bundler", // Resolve import specifiers like bundlers (allows explicit file extensions)
21-
"allowImportingTsExtensions": true, // Allow importing `.ts` extensions
22-
"allowJs": true, // If `true` allows to import `.js` files
23-
"resolveJsonModule": true, // Allow importing `.json` files
24-
"forceConsistentCasingInFileNames": true, // Do not allow case-insensitive import file name matching
25-
"paths": {
26-
//"@": ["./src"],
27-
},
28-
"types": [
29-
// See explanation in `node_modules/@types/react-dom/experimental.d.ts`
30-
"react/experimental",
31-
"react-dom/experimental",
32-
],
33-
34-
// Type checking
35-
"lib": ["es2023", "DOM", "DOM.Iterable"], // Library declaration files to include (globally)
36-
"skipLibCheck": true, // Do not type check declaration files (for performance)
37-
"noErrorTruncation": true,
38-
39-
// Language
40-
"isolatedModules": true, // Restrict language features not compatible with tools like babel
41-
"strict": true,
42-
"exactOptionalPropertyTypes": true,
43-
"noUncheckedIndexedAccess": true,
44-
"useDefineForClassFields": true,
45-
"jsx": "preserve",
46-
},
47-
"exclude": [
48-
"node_modules",
49-
"**/*.spec.ts",
50-
"src/components/navigations/Tabs/Tabs.stories.tsx", // TEMP: need to fix a few type errors
2+
"files": [],
3+
"references": [
4+
{ "path": "./tsconfig.app.json" },
5+
{ "path": "./tsconfig.node.json" },
516
],
52-
"include": [
53-
//"vite.config.ts",
54-
"app/**/*",
55-
"src/**/*",
56-
],
57-
"references": [{ "path": "./tsconfig.node.json" }],
587
}

‎tsconfig.node.json

Lines changed: 36 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,43 @@
11
{
22
"compilerOptions": {
3-
// "plugins": [{
4-
// "name": "typescript-plugin-css-modules",
5-
// "options": {
6-
// //"classnameTransform": "camelCase",
7-
// //"goToDefinition": true,
8-
// },
9-
// }],
3+
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
104

11-
"emitDeclarationOnly": true,
12-
"composite": true,
13-
"skipLibCheck": true,
14-
"target": "es2022",
15-
"module": "ESNext",
16-
"moduleResolution": "bundler",
17-
"allowImportingTsExtensions": true,
5+
// Emission
6+
"noEmit": true, // Do not emit by default (only type check)
7+
//"emitDeclarationOnly": false,
8+
"target": "ES2024", // JavaScript language version to emit
9+
"module": "ESNext", // The type of file to emit (CommonJS/ESM/etc.)
10+
"esModuleInterop": false,
1811
"allowSyntheticDefaultImports": true,
19-
"strict": true
12+
13+
// Imports
14+
"moduleResolution": "bundler", // Resolve import specifiers like bundlers (allows explicit file extensions)
15+
"moduleDetection": "force", // Enforce that we're always using ESM
16+
"isolatedModules": true, // Restrict language features not compatible with tools like babel
17+
"allowImportingTsExtensions": true, // Allow importing `.ts` extensions
18+
"allowJs": true, // If `true` allows to import `.js` files
19+
"resolveJsonModule": true, // Allow importing `.json` files
20+
"forceConsistentCasingInFileNames": true, // Do not allow case-insensitive import file name matching
21+
"paths": {
22+
//"@": ["./src"],
23+
},
24+
25+
// Type checking
26+
"lib": ["ES2024"], // Library declaration files to include (globally)
27+
"skipLibCheck": true, // Do not type check declaration files (for performance)
28+
"noErrorTruncation": true,
29+
30+
// Language
31+
"strict": true,
32+
"exactOptionalPropertyTypes": true,
33+
"noUncheckedIndexedAccess": true,
34+
"useDefineForClassFields": true, // Use latest ES spec version of class fields
35+
36+
// Linting
37+
//"noUnusedLocals": true,
38+
//"noUnusedParameters": true,
39+
"noFallthroughCasesInSwitch": true,
40+
"noUncheckedSideEffectImports": true,
2041
},
2142
"include": [
2243
"vite.config.ts",

‎vite.config.ts

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -70,11 +70,13 @@ export default defineConfig({
7070
targets: {
7171
// Use minimum targets so that the `light-dark()` polyfill doesn't get applied, which is buggy.
7272
// https://github.com/parcel-bundler/lightningcss/issues/821
73-
chrome: 123 << 16,
74-
firefox: 120 << 16,
75-
safari: 17 << 16 | 5 << 8,
73+
//chrome: 123 << 16, // Minimum for `light-dark()`
74+
chrome: 121 << 16, // FIXME: needed for Chromatic, since it currently uses Chrome v121
75+
firefox: 120 << 16, // Minimum for `light-dark()`
76+
safari: 17 << 16 | 5 << 8, // Minimum for `light-dark()`
7677
},
7778
cssModules: {
79+
// @ts-expect-error Will be fixed in vite v6
7880
grid: false, // Workaround for https://github.com/parcel-bundler/lightningcss/issues/762
7981
},
8082
},
@@ -98,7 +100,7 @@ export default defineConfig({
98100
entry: path.resolve(__dirname, 'app/lib.ts'),
99101
name: 'baklava',
100102
fileName: 'baklava',
101-
cssFileName: 'baklava',
103+
//cssFileName: 'baklava',
102104
formats: ['es'],
103105
},
104106
rollupOptions: {

0 commit comments

Comments
 (0)