From e2a8e4e80366f934a39cc33dad07762ad38dffa6 Mon Sep 17 00:00:00 2001 From: vikas-cldcvr Date: Wed, 25 Oct 2023 19:42:45 +0530 Subject: [PATCH 1/5] FLOW-950 chromatic workflow added --- .github/workflows/chromatic.yml | 38 +++++++++++++++++++ .gitignore | 1 + .storybook/main.ts | 2 +- .storybook/preview.ts | 3 +- package.json | 8 +++- pnpm-lock.yaml | 8 ++++ .../deep-reactivity.stories.ts | 2 - 7 files changed, 56 insertions(+), 6 deletions(-) create mode 100644 .github/workflows/chromatic.yml diff --git a/.github/workflows/chromatic.yml b/.github/workflows/chromatic.yml new file mode 100644 index 000000000..39226a19b --- /dev/null +++ b/.github/workflows/chromatic.yml @@ -0,0 +1,38 @@ +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 + + - 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 }} 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..73c27a026 100644 --- a/package.json +++ b/package.json @@ -21,7 +21,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 +53,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 +95,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-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(); From debbeca11ee0aec58f1239075b40a3a931593fd1 Mon Sep 17 00:00:00 2001 From: vikas-cldcvr Date: Wed, 25 Oct 2023 19:44:48 +0530 Subject: [PATCH 2/5] FLOW-950 chromatic workflow added --- .github/workflows/chromatic.yml | 2 ++ 1 file changed, 2 insertions(+) diff --git a/.github/workflows/chromatic.yml b/.github/workflows/chromatic.yml index 39226a19b..d2c4b5f88 100644 --- a/.github/workflows/chromatic.yml +++ b/.github/workflows/chromatic.yml @@ -36,3 +36,5 @@ jobs: uses: chromaui/action@v1 with: projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }} + zip: true + onlyChanged: true From 5854c08a303fa0b81f318f42e7b495f52cf70b21 Mon Sep 17 00:00:00 2001 From: vikas-cldcvr Date: Wed, 25 Oct 2023 19:48:23 +0530 Subject: [PATCH 3/5] FLOW-950 chromatic workflow added --- .github/workflows/chromatic.yml | 2 ++ 1 file changed, 2 insertions(+) diff --git a/.github/workflows/chromatic.yml b/.github/workflows/chromatic.yml index d2c4b5f88..afe621f3e 100644 --- a/.github/workflows/chromatic.yml +++ b/.github/workflows/chromatic.yml @@ -20,6 +20,8 @@ jobs: steps: - name: Checkout Repository uses: actions/checkout@v2 + with: + fetch-depth: 0 - name: Setup Node.js 18.x uses: actions/setup-node@v2 From 2d99331e02bada13d7e82c3d69c5c55e37d90a39 Mon Sep 17 00:00:00 2001 From: vikas-cldcvr Date: Wed, 25 Oct 2023 19:57:49 +0530 Subject: [PATCH 4/5] FLOW-950 chromatic workflow script updated --- .github/workflows/chromatic.yml | 1 + package.json | 1 + 2 files changed, 2 insertions(+) diff --git a/.github/workflows/chromatic.yml b/.github/workflows/chromatic.yml index afe621f3e..6fcdf34b5 100644 --- a/.github/workflows/chromatic.yml +++ b/.github/workflows/chromatic.yml @@ -40,3 +40,4 @@ jobs: projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }} zip: true onlyChanged: true + buildScriptName: build-storybook:chromatic diff --git a/package.json b/package.json index 73c27a026..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 .", From b58920b3ff4f00311149fe5a4c26a58a7df0a618 Mon Sep 17 00:00:00 2001 From: vikas-cldcvr Date: Thu, 26 Oct 2023 16:08:54 +0530 Subject: [PATCH 5/5] FLOW-950 chromatic ignore added --- stories/flow-core/f-button.stories.js | 16 +++++++++++++--- stories/flow-core/f-counter.stories.js | 9 ++++++++- stories/flow-core/f-date-time-picker.stories.js | 3 ++- stories/flow-core/f-div.stories.js | 5 ++++- stories/flow-core/f-file-upload.stories.js | 1 + stories/flow-core/f-icon-button.stories.js | 2 +- stories/flow-core/f-icon.stories.js | 8 +++++++- stories/flow-lineage/large-data.stories.ts | 3 +++ 8 files changed, 39 insertions(+), 8 deletions(-) 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-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