ollionorg · vikas-cldcvr · Oct 25, 2023 · Oct 25, 2023 · Oct 25, 2023 · Oct 25, 2023
diff --git a/.github/workflows/chromatic.yml 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 [email protected] --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
@@ -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
@@ -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
@@ -23,7 +23,8 @@ const preview: Preview = {
 	parameters: {
 		docs: {
 			theme: themes.dark
-		}
+		},
+		chromatic: { pauseAnimationAtEnd: true }
 	}
 };
 

diff --git 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": "[email protected]"
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/stories/flow-core/f-button.stories.js b/stories/flow-core/f-button.stories.js
@@ -257,15 +257,25 @@ export const Flags = {
 			</f-div>
 			<f-div padding="none" direction="row" gap="x-large">
 				<f-button label="label"></f-button>
-				<f-button label="label" loading=${true}></f-button>
+				<f-button label="label" data-chromatic="ignore" loading=${true}></f-button>
 			</f-div>
 			<f-div padding="none" direction="row" gap="x-large">
 				<f-button label="label" icon-left="i-plus"></f-button>
-				<f-button label="label" loading=${true} icon-left="i-plus"></f-button>
+				<f-button
+					label="label"
+					data-chromatic="ignore"
+					loading=${true}
+					icon-left="i-plus"
+				></f-button>
 			</f-div>
 			<f-div padding="none" direction="row" gap="x-large">
 				<f-button label="label" icon-right="i-plus"></f-button>
-				<f-button label="label" loading=${true} icon-right="i-plus"></f-button>
+				<f-button
+					label="label"
+					data-chromatic="ignore"
+					loading=${true}
+					icon-right="i-plus"
+				></f-button>
 			</f-div>
 			<f-div height="hug-content" padding="none">
 				<f-text variant="para" size="large" weight="medium">Disabled</f-text>

diff --git a/stories/flow-core/f-counter.stories.js b/stories/flow-core/f-counter.stories.js
@@ -246,14 +246,21 @@ export const Flags = {
 			</f-div>
 			<f-div padding="none" direction="row" gap="x-large" overflow="hidden">
 				<f-counter label="888888" size="large" state="neutral"></f-counter>
-				<f-counter label="888888" size="large" state="neutral" loading=${true}></f-counter>
+				<f-counter
+					label="888888"
+					size="large"
+					state="neutral"
+					data-chromatic="ignore"
+					loading=${true}
+				></f-counter>
 			</f-div>
 			<f-div padding="none" direction="row" gap="x-large" overflow="hidden">
 				<f-counter label="888888" size="large" state="custom,deepskyblue"></f-counter>
 				<f-counter
 					label="888888"
 					size="large"
 					state="custom,deepskyblue"
+					data-chromatic="ignore"
 					loading=${true}
 				></f-counter>
 			</f-div>

diff --git 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
@@ -1383,7 +1383,10 @@ export const Loading = {
 			</f-div>
 		</f-div>`,
 
-	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
@@ -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}
 					>
 						<f-div slot="label" padding="none" gap="none">Loading Flag</f-div>

diff --git 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 = {
 			</f-div>
 			<f-div padding="none" direction="row" gap="x-large">
 				<f-icon-button icon="i-plus"></f-icon-button>
-				<f-icon-button icon="i-plus" loading=${true}></f-icon-button>
+				<f-icon-button icon="i-plus" data-chromatic="ignore" loading=${true}></f-icon-button>
 			</f-div>
 			<f-div height="hug-content" padding="none">
 				<f-text variant="para" size="large" weight="medium">Disabled</f-text>

diff --git a/stories/flow-core/f-icon.stories.js b/stories/flow-core/f-icon.stories.js
@@ -277,7 +277,13 @@ export const Flags = {
 			</f-div>
 			<f-div padding="none" direction="row" gap="x-large" overflow="hidden">
 				<f-icon source="i-plus" state="primary" size="x-large"></f-icon>
-				<f-icon source="i-plus" state="primary" size="x-large" loading=${true}></f-icon>
+				<f-icon
+					source="i-plus"
+					state="primary"
+					size="x-large"
+					data-chromatic="ignore"
+					loading=${true}
+				></f-icon>
 			</f-div>
 			<f-div height="hug-content" padding="none">
 				<f-text variant="para" size="large" weight="medium">Disabled</f-text>

diff --git 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<unknown> = (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
@@ -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
-Original file line number
+Diff line change
@@ Expand Up / @@ -23,7 +23,8 @@ const preview: Preview = { @@
     	parameters: {
     		docs: {
     			theme: themes.dark
-    		}
+    		},
+    		chromatic: { pauseAnimationAtEnd: true }
     	}
     };
@@ Expand Down @@