diff --git a/.github/workflows/chromatic.yml b/.github/workflows/chromatic.yml
new file mode 100644
index 000000000..6fcdf34b5
--- /dev/null
+++ b/.github/workflows/chromatic.yml
@@ -0,0 +1,43 @@
+name: Chromatic Tests
+
+on:
+ workflow_dispatch:
+ pull_request:
+ branches:
+ - main
+
+defaults:
+ run:
+ shell: bash
+ working-directory: .
+
+jobs:
+ lint:
+ name: Chromatic Tests
+ runs-on: ubuntu-latest
+ permissions:
+ contents: read
+ steps:
+ - name: Checkout Repository
+ uses: actions/checkout@v2
+ with:
+ fetch-depth: 0
+
+ - name: Setup Node.js 18.x
+ uses: actions/setup-node@v2
+ with:
+ node-version: 18.x
+
+ - name: Install pnpm
+ run: corepack enable && corepack prepare pnpm@8.9.0 --activate
+
+ - name: Install dependencies
+ run: pnpm install
+
+ - name: Publish to Chromatic
+ uses: chromaui/action@v1
+ with:
+ projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
+ zip: true
+ onlyChanged: true
+ buildScriptName: build-storybook:chromatic
diff --git a/.gitignore b/.gitignore
index 5ad688711..5987c9461 100644
--- a/.gitignore
+++ b/.gitignore
@@ -28,3 +28,4 @@ umd
tsconfig.tsbuildinfo
html.html-data.json
custom-elements.json
+*.log
diff --git a/.storybook/main.ts b/.storybook/main.ts
index 81bedfbde..492b96f0b 100644
--- a/.storybook/main.ts
+++ b/.storybook/main.ts
@@ -24,7 +24,7 @@ export default {
async viteFinal(config, { configType }) {
return mergeConfig(config, {
- base: configType === "PRODUCTION" ? "/v2/" : "",
+ base: configType === "PRODUCTION" && process.env.NODE_ENV !== "chromatic" ? "/v2/" : "",
resolve: {
alias
}
diff --git a/.storybook/preview.ts b/.storybook/preview.ts
index 8b2240076..2ed671308 100644
--- a/.storybook/preview.ts
+++ b/.storybook/preview.ts
@@ -23,7 +23,8 @@ const preview: Preview = {
parameters: {
docs: {
theme: themes.dark
- }
+ },
+ chromatic: { pauseAnimationAtEnd: true }
}
};
diff --git a/package.json b/package.json
index 39aa57f8c..0785bc68c 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,7 @@
"storybook": "storybook dev -p 6007",
"start": "NODE_OPTIONS=--openssl-legacy-provider pnpm run storybook",
"build-storybook": "export NODE_OPTIONS='--max_old_space_size=8192' && storybook build",
+ "build-storybook:chromatic": "export NODE_OPTIONS='--max_old_space_size=8192' && export NODE_ENV=chromatic && storybook build",
"build-packages": "make build",
"lint": "pnpm lint:files .",
"lint:fix": "env TIMING=1 eslint --ext .js,.ts --fix .",
@@ -21,7 +22,8 @@
"prettier:lint-all": "prettier --config .prettierrc.cjs --check .",
"prepare": "husky install",
"test": "pnpm run loki test",
- "postinstall": "tsc -b"
+ "postinstall": "tsc -b",
+ "chromatic": "NODE_ENV=chromatic npx chromatic --exit-zero-on-changes --only-changed"
},
"engines": {
"node": "^18.12.0",
@@ -52,6 +54,7 @@
"@types/prettier": "^3.0.0",
"@typescript-eslint/eslint-plugin": "^6.7.5",
"@typescript-eslint/parser": "^6.7.5",
+ "chromatic": "^7.4.0",
"eslint": "^8.51.0",
"eslint-config-prettier": "^9.0.0",
"eslint-plugin-storybook": "^0.6.14",
@@ -93,5 +96,7 @@
"mobile": false
}
}
- }
+ },
+ "readme": "ERROR: No README data found!",
+ "_id": "flow-core-storybook@1.0.0"
}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index bc32b1536..29c21a090 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -99,6 +99,9 @@ importers:
'@typescript-eslint/parser':
specifier: ^6.7.5
version: 6.7.5(eslint@8.51.0)(typescript@5.2.2)
+ chromatic:
+ specifier: ^7.4.0
+ version: 7.5.0
eslint:
specifier: ^8.51.0
version: 8.51.0
@@ -7283,6 +7286,11 @@ packages:
engines: {node: '>=10'}
dev: true
+ /chromatic@7.5.0:
+ resolution: {integrity: sha512-9B1rT8/L71BZTmAGXFBvKGrudnVZ4uBcGFckx0ZEMvOXboI0DOyr1/ehmSB1YmPOhu+r/7dy2jfTEzPmYcpXJg==}
+ hasBin: true
+ dev: true
+
/chrome-launcher@0.14.2:
resolution: {integrity: sha512-Nk8DUCIfPR6p9WClPPFeP2ztpAdkT8xueoiDS03csea1uoJjm4w0p5Oy1hjykyjT1EQ0MMrEshLD3C8gHXyiZw==}
engines: {node: '>=12.13.0'}
diff --git a/stories/flow-core/f-button.stories.js b/stories/flow-core/f-button.stories.js
index dd1713bb5..a22ecbb45 100644
--- a/stories/flow-core/f-button.stories.js
+++ b/stories/flow-core/f-button.stories.js
@@ -257,15 +257,25 @@ export const Flags = {
-
+
-
+
-
+
Disabled
diff --git a/stories/flow-core/f-counter.stories.js b/stories/flow-core/f-counter.stories.js
index c16354778..7d68b7471 100644
--- a/stories/flow-core/f-counter.stories.js
+++ b/stories/flow-core/f-counter.stories.js
@@ -246,7 +246,13 @@ export const Flags = {
-
+
@@ -254,6 +260,7 @@ export const Flags = {
label="888888"
size="large"
state="custom,deepskyblue"
+ data-chromatic="ignore"
loading=${true}
>
diff --git a/stories/flow-core/f-date-time-picker.stories.js b/stories/flow-core/f-date-time-picker.stories.js
index ab23d0257..6a48b1889 100644
--- a/stories/flow-core/f-date-time-picker.stories.js
+++ b/stories/flow-core/f-date-time-picker.stories.js
@@ -136,7 +136,7 @@ export const Playground = {
placeholder: "Enter your text here",
variant: "round",
mode: "date-time",
- value: new Date(),
+ value: new Date("2022-03-25"),
category: "fill",
state: "default",
size: "medium",
@@ -542,6 +542,7 @@ export const Flags = {
value=${value}
@input=${handleValue}
size="medium"
+ ${item === 0 ? `data-chromatic="ignore"` : ""}
?loading=${item === 0}
?disabled=${item === 1}
?clear=${item === 2}
diff --git a/stories/flow-core/f-div.stories.js b/stories/flow-core/f-div.stories.js
index 7d3ab1808..111a2856b 100644
--- a/stories/flow-core/f-div.stories.js
+++ b/stories/flow-core/f-div.stories.js
@@ -1383,7 +1383,10 @@ export const Loading = {
`,
- name: "loading"
+ name: "loading",
+ parameters: {
+ chromatic: { disableSnapshot: false }
+ }
};
export const Flags = {
diff --git a/stories/flow-core/f-file-upload.stories.js b/stories/flow-core/f-file-upload.stories.js
index bfda89cb2..3e06a2168 100644
--- a/stories/flow-core/f-file-upload.stories.js
+++ b/stories/flow-core/f-file-upload.stories.js
@@ -437,6 +437,7 @@ export const Flags = {
placeholder="Drag and Drop Files or Click here to upload"
max-size="100 MB"
@input=${e => handleValue(e)}
+ data-chromatic="ignore"
?loading=${true}
>
Loading Flag
diff --git a/stories/flow-core/f-icon-button.stories.js b/stories/flow-core/f-icon-button.stories.js
index 067796666..73510030e 100644
--- a/stories/flow-core/f-icon-button.stories.js
+++ b/stories/flow-core/f-icon-button.stories.js
@@ -227,7 +227,7 @@ export const Flags = {
-
+
Disabled
diff --git a/stories/flow-core/f-icon.stories.js b/stories/flow-core/f-icon.stories.js
index 2fa073d55..5d11542b1 100644
--- a/stories/flow-core/f-icon.stories.js
+++ b/stories/flow-core/f-icon.stories.js
@@ -277,7 +277,13 @@ export const Flags = {
-
+
Disabled
diff --git a/stories/flow-form-builder/deep-reactivity.stories.ts b/stories/flow-form-builder/deep-reactivity.stories.ts
index fef0642a2..8f639becf 100644
--- a/stories/flow-form-builder/deep-reactivity.stories.ts
+++ b/stories/flow-form-builder/deep-reactivity.stories.ts
@@ -2,7 +2,6 @@ import { Story, Meta } from "@storybook/web-components";
import { html } from "lit-html";
import { FormBuilderField } from "@cldcvr/flow-form-builder";
import { createRef, Ref, ref } from "lit/directives/ref.js";
-import { useArgs } from "@storybook/manager-api";
import { FFormBuilder } from "@cldcvr/flow-form-builder/src";
export default {
@@ -104,7 +103,6 @@ const sampleFormBuilder: SampleFormBuilder = {
};
let count = 0;
const Template: Story = (args: any) => {
- const [_, updateArgs] = useArgs();
const handleKeydown = (event: Event) => {
event.stopPropagation();
event.stopImmediatePropagation();
diff --git a/stories/flow-lineage/large-data.stories.ts b/stories/flow-lineage/large-data.stories.ts
index 373b603af..ee2c84623 100644
--- a/stories/flow-lineage/large-data.stories.ts
+++ b/stories/flow-lineage/large-data.stories.ts
@@ -4,6 +4,9 @@ import { LineageNodeElement, LineageNodeLinks, LineageNodes } from "@cldcvr/flow
export default {
title: "@cldcvr/flow-lineage/Examples/Large Data",
+ parameters: {
+ chromatic: { disableSnapshot: false }
+ },
argTypes: {
["node-template"]: {
control: false