From db01ab1e1a44506ea9f32cc65e6644dc1a3bdfd5 Mon Sep 17 00:00:00 2001 From: Reuben Ellis Date: Wed, 29 Nov 2023 11:40:05 -0700 Subject: [PATCH 01/28] Updated css --- src/stories/button.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/stories/button.css b/src/stories/button.css index a22e95e..af23b48 100644 --- a/src/stories/button.css +++ b/src/stories/button.css @@ -9,7 +9,7 @@ } .storybook-button--primary { color: white; - background-color: #affd1e; + background-color: blue; } .storybook-button--secondary { color: #333; From 27a5bab9ee110d3f31d53c75866eb78b092f9e27 Mon Sep 17 00:00:00 2001 From: Reuben Ellis Date: Wed, 29 Nov 2023 11:50:37 -0700 Subject: [PATCH 02/28] change style --- src/stories/button.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/stories/button.css b/src/stories/button.css index af23b48..46252d5 100644 --- a/src/stories/button.css +++ b/src/stories/button.css @@ -9,7 +9,7 @@ } .storybook-button--primary { color: white; - background-color: blue; + background-color: magenta; } .storybook-button--secondary { color: #333; From a7a9b1889ea6441303c96708f71e7eac966416d1 Mon Sep 17 00:00:00 2001 From: Reuben Ellis Date: Wed, 29 Nov 2023 11:55:34 -0700 Subject: [PATCH 03/28] changed to green --- src/stories/button.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/stories/button.css b/src/stories/button.css index 46252d5..ef4d213 100644 --- a/src/stories/button.css +++ b/src/stories/button.css @@ -9,7 +9,7 @@ } .storybook-button--primary { color: white; - background-color: magenta; + background-color: green; } .storybook-button--secondary { color: #333; From 26e54119434ca783e8c3560c225a81894ee83e0b Mon Sep 17 00:00:00 2001 From: Reuben Ellis Date: Wed, 29 Nov 2023 12:18:57 -0700 Subject: [PATCH 04/28] changed to purple --- src/stories/button.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/stories/button.css b/src/stories/button.css index ef4d213..03e2cc0 100644 --- a/src/stories/button.css +++ b/src/stories/button.css @@ -9,7 +9,7 @@ } .storybook-button--primary { color: white; - background-color: green; + background-color: purple; } .storybook-button--secondary { color: #333; From df1bd93c27e4c8772f58f1fe0f8e564e972411b5 Mon Sep 17 00:00:00 2001 From: Reuben Ellis Date: Wed, 29 Nov 2023 12:29:46 -0700 Subject: [PATCH 05/28] updated yaml --- .github/workflows/chromatic.yml | 27 ++++++++++++++++----------- 1 file changed, 16 insertions(+), 11 deletions(-) diff --git a/.github/workflows/chromatic.yml b/.github/workflows/chromatic.yml index 28ee451..a5cfc2d 100644 --- a/.github/workflows/chromatic.yml +++ b/.github/workflows/chromatic.yml @@ -10,16 +10,21 @@ jobs: fetch-depth: 0 - name: install run: yarn install --frozen-lockfile - - name: Run Chromatic - id: run-chromatic-action - uses: chromaui/action-next@v1 - with: - onlyChanged: true - traceChanged: true - diagnostics: true - exitZeroOnChanges: true - exitOnceUploaded: true - autoAcceptChanges: "main" + - name: run chromatic + run: CHROMATIC_INDEX_URL=https://index.staging-chromatic.com npx chromatic --only-changed --debug --trace-changed 'expanded' --exit-zero-on-changes --diagnostics --exit-once-uploaded --auto-accept-changes 'main' env: - CHROMATIC_PROJECT_TOKEN: ${{ secrets.CHROMATIC_PROJECT_TOKEN }} + CHROMATIC_PROJECT_TOKEN: chpt_8adcafffd1b8cdc STORYBOOK_GITHUB_SHA: ${{ github.event.pull_request.head.sha }} + # - name: Run Chromatic + # id: run-chromatic-action + # uses: chromaui/action-next@v1 + # with: + # onlyChanged: true + # traceChanged: true + # diagnostics: true + # exitZeroOnChanges: true + # exitOnceUploaded: true + # autoAcceptChanges: "main" + # env: + # CHROMATIC_PROJECT_TOKEN: ${{ secrets.CHROMATIC_PROJECT_TOKEN }} + # STORYBOOK_GITHUB_SHA: ${{ github.event.pull_request.head.sha }} From c0aeaecf13da59f9501dab7a722c227069efa646 Mon Sep 17 00:00:00 2001 From: Reuben Ellis Date: Wed, 29 Nov 2023 12:35:00 -0700 Subject: [PATCH 06/28] Update script --- .github/workflows/chromatic.yml | 3 ++- package.json | 2 +- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/.github/workflows/chromatic.yml b/.github/workflows/chromatic.yml index a5cfc2d..e52a81c 100644 --- a/.github/workflows/chromatic.yml +++ b/.github/workflows/chromatic.yml @@ -11,9 +11,10 @@ jobs: - name: install run: yarn install --frozen-lockfile - name: run chromatic - run: CHROMATIC_INDEX_URL=https://index.staging-chromatic.com npx chromatic --only-changed --debug --trace-changed 'expanded' --exit-zero-on-changes --diagnostics --exit-once-uploaded --auto-accept-changes 'main' + run: CHROMATIC_INDEX_URL=https://index.staging-chromatic.com npx chromatic --project-token=chpt_8adcafffd1b8cdc --only-changed --debug --trace-changed 'expanded' --exit-zero-on-changes --diagnostics --exit-once-uploaded --auto-accept-changes 'main' env: CHROMATIC_PROJECT_TOKEN: chpt_8adcafffd1b8cdc + CHROMATIC_INDEX_URL: https://index.staging-chromatic.com STORYBOOK_GITHUB_SHA: ${{ github.event.pull_request.head.sha }} # - name: Run Chromatic # id: run-chromatic-action diff --git a/package.json b/package.json index 9e8fb94..9d84c1f 100644 --- a/package.json +++ b/package.json @@ -9,7 +9,7 @@ "preview": "vite preview", "storybook": "start-storybook -p 6006", "build-storybook": "build-storybook", - "chromatic": "npx chromatic@latest --only-changed --trace-changed 'expanded' --auto-accept-changes main --exit-zero-on-changes --exit-once-uploaded --project-token=b7e18a53b1f3" + "chromatic": "CHROMATIC_INDEX_URL=https://index.staging-chromatic.com npx chromatic --project-token=chpt_8adcafffd1b8cdc --only-changed --debug --trace-changed 'expanded' --exit-zero-on-changes --diagnostics --exit-once-uploaded --auto-accept-changes 'main'" }, "dependencies": { "react": "^18.2.0", From 34a1c403b00273107cae8cd671185954f58c9dc2 Mon Sep 17 00:00:00 2001 From: Reuben Ellis Date: Wed, 29 Nov 2023 13:00:41 -0700 Subject: [PATCH 07/28] update to violet --- src/stories/button.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/stories/button.css b/src/stories/button.css index 03e2cc0..cc690b9 100644 --- a/src/stories/button.css +++ b/src/stories/button.css @@ -9,7 +9,7 @@ } .storybook-button--primary { color: white; - background-color: purple; + background-color: blueviolet; } .storybook-button--secondary { color: #333; From e86b61089170af2ad61023db58afbd717bc6eae6 Mon Sep 17 00:00:00 2001 From: Reuben Ellis Date: Wed, 29 Nov 2023 13:54:41 -0700 Subject: [PATCH 08/28] add gray --- src/stories/button.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/stories/button.css b/src/stories/button.css index cc690b9..695bdea 100644 --- a/src/stories/button.css +++ b/src/stories/button.css @@ -9,7 +9,7 @@ } .storybook-button--primary { color: white; - background-color: blueviolet; + background-color: gray; } .storybook-button--secondary { color: #333; From 69aa77c8deaa301878ea99e8ebe14baecc52818c Mon Sep 17 00:00:00 2001 From: Reuben Ellis Date: Wed, 29 Nov 2023 15:16:41 -0700 Subject: [PATCH 09/28] add pink --- src/stories/button.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/stories/button.css b/src/stories/button.css index 695bdea..5f493b3 100644 --- a/src/stories/button.css +++ b/src/stories/button.css @@ -9,7 +9,7 @@ } .storybook-button--primary { color: white; - background-color: gray; + background-color: pink; } .storybook-button--secondary { color: #333; From 976f646f658aa5cb51f22f5727fdd6c424c3cacb Mon Sep 17 00:00:00 2001 From: Reuben Ellis Date: Thu, 30 Nov 2023 08:34:14 -0700 Subject: [PATCH 10/28] Changed to green --- src/stories/button.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/stories/button.css b/src/stories/button.css index 5f493b3..ef4d213 100644 --- a/src/stories/button.css +++ b/src/stories/button.css @@ -9,7 +9,7 @@ } .storybook-button--primary { color: white; - background-color: pink; + background-color: green; } .storybook-button--secondary { color: #333; From a80312d6245e305682ee6d9ea4d1741145419953 Mon Sep 17 00:00:00 2001 From: Reuben Ellis Date: Thu, 30 Nov 2023 15:38:27 -0700 Subject: [PATCH 11/28] removed interruptible --- .gitlab-ci.yml | 1 - 1 file changed, 1 deletion(-) diff --git a/.gitlab-ci.yml b/.gitlab-ci.yml index ca11750..d1214ac 100644 --- a/.gitlab-ci.yml +++ b/.gitlab-ci.yml @@ -20,4 +20,3 @@ chromatic_publish: stage: test script: - yarn chromatic - interruptible: true From 6054c685c447eee87e5532162260f507e32de1eb Mon Sep 17 00:00:00 2001 From: Reuben Ellis Date: Thu, 30 Nov 2023 15:46:46 -0700 Subject: [PATCH 12/28] changed my background color --- src/stories/button.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/stories/button.css b/src/stories/button.css index ef4d213..af23b48 100644 --- a/src/stories/button.css +++ b/src/stories/button.css @@ -9,7 +9,7 @@ } .storybook-button--primary { color: white; - background-color: green; + background-color: blue; } .storybook-button--secondary { color: #333; From dffa518316d03aa0f5977b4092887d55551e7507 Mon Sep 17 00:00:00 2001 From: Reuben Ellis Date: Mon, 4 Dec 2023 17:29:25 -0700 Subject: [PATCH 13/28] Update style --- src/stories/button.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/stories/button.css b/src/stories/button.css index af23b48..8e7edee 100644 --- a/src/stories/button.css +++ b/src/stories/button.css @@ -9,7 +9,7 @@ } .storybook-button--primary { color: white; - background-color: blue; + background-color: greenyellow; } .storybook-button--secondary { color: #333; From 1c553090626e5e4a80804d58286e734889cfe05e Mon Sep 17 00:00:00 2001 From: Reuben Ellis Date: Mon, 4 Dec 2023 18:05:20 -0700 Subject: [PATCH 14/28] add purple --- src/stories/button.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/stories/button.css b/src/stories/button.css index 8e7edee..03e2cc0 100644 --- a/src/stories/button.css +++ b/src/stories/button.css @@ -9,7 +9,7 @@ } .storybook-button--primary { color: white; - background-color: greenyellow; + background-color: purple; } .storybook-button--secondary { color: #333; From 714f2b4d4cc88bae49afa3617df7ad3ecfa03d32 Mon Sep 17 00:00:00 2001 From: Reuben Ellis Date: Mon, 4 Dec 2023 18:25:29 -0700 Subject: [PATCH 15/28] Update to red --- src/stories/button.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/stories/button.css b/src/stories/button.css index 03e2cc0..326541c 100644 --- a/src/stories/button.css +++ b/src/stories/button.css @@ -9,7 +9,7 @@ } .storybook-button--primary { color: white; - background-color: purple; + background-color: red; } .storybook-button--secondary { color: #333; From df2cc1c50adf3411c2a7f5904fe35222cbefaff8 Mon Sep 17 00:00:00 2001 From: Reuben Ellis Date: Mon, 4 Dec 2023 18:41:02 -0700 Subject: [PATCH 16/28] test again --- src/stories/button.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/stories/button.css b/src/stories/button.css index 326541c..88bff48 100644 --- a/src/stories/button.css +++ b/src/stories/button.css @@ -9,7 +9,7 @@ } .storybook-button--primary { color: white; - background-color: red; + background-color: yellow; } .storybook-button--secondary { color: #333; From 5eacba96321e656f2f2715c01cced131953e3117 Mon Sep 17 00:00:00 2001 From: Reuben Ellis Date: Tue, 5 Dec 2023 12:36:50 -0700 Subject: [PATCH 17/28] Update gitlab script --- package.json | 2 +- src/stories/button.css | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index 9d84c1f..4653dd8 100644 --- a/package.json +++ b/package.json @@ -9,7 +9,7 @@ "preview": "vite preview", "storybook": "start-storybook -p 6006", "build-storybook": "build-storybook", - "chromatic": "CHROMATIC_INDEX_URL=https://index.staging-chromatic.com npx chromatic --project-token=chpt_8adcafffd1b8cdc --only-changed --debug --trace-changed 'expanded' --exit-zero-on-changes --diagnostics --exit-once-uploaded --auto-accept-changes 'main'" + "chromatic": "npx chromatic --project-token=b7e18a53b1f3 --only-changed --debug --trace-changed 'expanded' --exit-zero-on-changes --diagnostics --exit-once-uploaded --auto-accept-changes 'main'" }, "dependencies": { "react": "^18.2.0", diff --git a/src/stories/button.css b/src/stories/button.css index 88bff48..af23b48 100644 --- a/src/stories/button.css +++ b/src/stories/button.css @@ -9,7 +9,7 @@ } .storybook-button--primary { color: white; - background-color: yellow; + background-color: blue; } .storybook-button--secondary { color: #333; From adcc05ae9599fbd6c3a28c3f431a135c4143f169 Mon Sep 17 00:00:00 2001 From: Reuben Ellis Date: Tue, 5 Dec 2023 12:42:02 -0700 Subject: [PATCH 18/28] Update color --- src/stories/button.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/stories/button.css b/src/stories/button.css index af23b48..6c30c77 100644 --- a/src/stories/button.css +++ b/src/stories/button.css @@ -9,7 +9,7 @@ } .storybook-button--primary { color: white; - background-color: blue; + background-color: paleturquoise; } .storybook-button--secondary { color: #333; From 982d5f2af8c929a5c6154779db8ebf61263af0a9 Mon Sep 17 00:00:00 2001 From: Reuben Ellis Date: Tue, 5 Dec 2023 13:21:06 -0700 Subject: [PATCH 19/28] Change to violet --- src/stories/button.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/stories/button.css b/src/stories/button.css index 6c30c77..4b9f2c3 100644 --- a/src/stories/button.css +++ b/src/stories/button.css @@ -9,7 +9,7 @@ } .storybook-button--primary { color: white; - background-color: paleturquoise; + background-color: violet; } .storybook-button--secondary { color: #333; From e439076972c7ae3e859762d19cd629ad9a24b241 Mon Sep 17 00:00:00 2001 From: Reuben Ellis Date: Thu, 11 Jan 2024 07:59:52 -0700 Subject: [PATCH 20/28] Update test for merge queue --- .storybook/main.cjs | 34 - .storybook/main.ts | 37 + .storybook/{preview.cjs => preview.ts} | 8 +- package.json | 21 +- src/stories/Button.stories.tsx | 47 +- src/stories/Header.stories.tsx | 23 +- src/stories/Page.stories.tsx | 14 +- tsconfig.json | 43 +- tsconfig.node.json | 9 - yarn.lock | 10378 ++++++++--------------- 10 files changed, 3817 insertions(+), 6797 deletions(-) delete mode 100644 .storybook/main.cjs create mode 100644 .storybook/main.ts rename .storybook/{preview.cjs => preview.ts} (51%) delete mode 100644 tsconfig.node.json diff --git a/.storybook/main.cjs b/.storybook/main.cjs deleted file mode 100644 index e64c973..0000000 --- a/.storybook/main.cjs +++ /dev/null @@ -1,34 +0,0 @@ -const { mergeConfig } = require('vite'); -const turbosnap = require('vite-plugin-turbosnap'); - - -module.exports = { - "stories": [ - "../src/**/*.stories.mdx", - "../src/**/*.stories.@(js|jsx|ts|tsx)" - ], - "addons": [ - "@storybook/addon-links", - "@storybook/addon-essentials", - "@storybook/addon-interactions" - ], - "framework": "@storybook/react", - "core": { - "builder": "@storybook/builder-vite" - }, - "features": { - "storyStoreV7": true - }, - async viteFinal(config, { configType }) { - // return the customized config - if (configType === 'PRODUCTION') { - config.plugins.push(turbosnap({ rootDir: config.root })); - } - return mergeConfig(config, { - // customize the Vite config here - resolve: { - alias: { foo: 'bar' }, - }, - }); - }, -} \ No newline at end of file diff --git a/.storybook/main.ts b/.storybook/main.ts new file mode 100644 index 0000000..b6de1c5 --- /dev/null +++ b/.storybook/main.ts @@ -0,0 +1,37 @@ +import type { StorybookConfig } from '@storybook/react-vite'; +const { mergeConfig } = require('vite'); +const turbosnap = require('vite-plugin-turbosnap'); + +const config: StorybookConfig = { + stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'], + + addons: [ + '@storybook/addon-links', + '@storybook/addon-essentials', + '@storybook/addon-interactions', + ], + + framework: { + name: '@storybook/react-vite', + options: {}, + }, + + async viteFinal(config, { configType }) { + // return the customized config + if (configType === 'PRODUCTION') { + config?.plugins?.push(turbosnap({ rootDir: config.root })); + } + return mergeConfig(config, { + // customize the Vite config here + resolve: { + alias: { foo: 'bar' }, + }, + }); + }, + + docs: { + autodocs: true, + }, +}; + +export default config; diff --git a/.storybook/preview.cjs b/.storybook/preview.ts similarity index 51% rename from .storybook/preview.cjs rename to .storybook/preview.ts index 48afd56..d298585 100644 --- a/.storybook/preview.cjs +++ b/.storybook/preview.ts @@ -1,9 +1,11 @@ -export const parameters = { - actions: { argTypesRegex: "^on[A-Z].*" }, +const parameters = { + actions: { argTypesRegex: '^on[A-Z].*' }, controls: { matchers: { color: /(background|color)$/i, date: /Date$/, }, }, -} \ No newline at end of file +}; + +export default parameters; diff --git a/package.json b/package.json index 4653dd8..02a0447 100644 --- a/package.json +++ b/package.json @@ -7,8 +7,8 @@ "dev": "vite", "build": "tsc && vite build", "preview": "vite preview", - "storybook": "start-storybook -p 6006", - "build-storybook": "build-storybook", + "storybook": "storybook dev -p 6006", + "build-storybook": "storybook build", "chromatic": "npx chromatic --project-token=b7e18a53b1f3 --only-changed --debug --trace-changed 'expanded' --exit-zero-on-changes --diagnostics --exit-once-uploaded --auto-accept-changes 'main'" }, "dependencies": { @@ -17,18 +17,19 @@ }, "devDependencies": { "@babel/core": "^7.18.13", - "@storybook/addon-actions": "^6.5.10", - "@storybook/addon-essentials": "^6.5.10", - "@storybook/addon-interactions": "^6.5.10", - "@storybook/addon-links": "^6.5.10", - "@storybook/builder-vite": "^0.2.2", - "@storybook/react": "^6.5.10", - "@storybook/testing-library": "0.0.13", + "@storybook/addon-actions": "^7.6.3", + "@storybook/addon-essentials": "^7.6.3", + "@storybook/addon-interactions": "^7.6.3", + "@storybook/addon-links": "^7.6.3", + "@storybook/react": "^7.6.3", + "@storybook/react-vite": "^7.6.3", + "@storybook/testing-library": "0.2.2", "@types/react": "^18.0.17", "@types/react-dom": "^18.0.6", "@vitejs/plugin-react": "^2.0.1", "babel-loader": "^8.2.5", - "typescript": "^4.6.4", + "storybook": "^7.6.3", + "typescript": "5.0.4", "vite": "^3.0.7", "vite-plugin-turbosnap": "^1.0.1" }, diff --git a/src/stories/Button.stories.tsx b/src/stories/Button.stories.tsx index c331bd4..fb30945 100644 --- a/src/stories/Button.stories.tsx +++ b/src/stories/Button.stories.tsx @@ -1,41 +1,44 @@ -import React from 'react'; -import { ComponentStory, ComponentMeta } from '@storybook/react'; +import type { Meta, StoryObj } from '@storybook/react'; import { Button } from './Button'; // More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export -export default { +const meta = { title: 'Example/Button', component: Button, // More on argTypes: https://storybook.js.org/docs/react/api/argtypes argTypes: { backgroundColor: { control: 'color' }, }, -} as ComponentMeta; +} satisfies Meta; -// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args -const Template: ComponentStory = (args) =>