diff --git a/.github/workflows/chromatic.yml b/.github/workflows/chromatic.yml index 6a31683..ef21fc9 100644 --- a/.github/workflows/chromatic.yml +++ b/.github/workflows/chromatic.yml @@ -5,22 +5,22 @@ jobs: chromatic: runs-on: ubuntu-latest steps: - - uses: actions/checkout@v2 + - uses: actions/checkout@v3 with: fetch-depth: 0 - uses: actions/setup-node@v3 with: - node-version: 16 + node-version: 18 - name: install run: yarn install --frozen-lockfile - name: run chromatic - run: 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 --exit-zero-on-changed --exit-once-uploaded --auto-accept-changes 'main' env: - CHROMATIC_PROJECT_TOKEN: ${{ secrets.CHROMATIC_PROJECT_TOKEN }} - STORYBOOK_GITHUB_SHA: ${{ github.event.pull_request.head.sha }} + CHROMATIC_PROJECT_TOKEN: chpt_8adcafffd1b8cdc + CHROMATIC_INDEX_URL: https://index.staging-chromatic.com # - name: Run Chromatic # id: run-chromatic-action - # uses: chromaui/action@v1 + # uses: chromaui/action-next@v1 # with: # onlyChanged: true # traceChanged: true @@ -28,7 +28,6 @@ jobs: # exitZeroOnChanges: true # exitOnceUploaded: true # autoAcceptChanges: "main" - # skip: "test-chromatic" # env: # CHROMATIC_PROJECT_TOKEN: ${{ secrets.CHROMATIC_PROJECT_TOKEN }} # STORYBOOK_GITHUB_SHA: ${{ github.event.pull_request.head.sha }} 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 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..f161957 --- /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/**/*.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.cjs deleted file mode 100644 index 48afd56..0000000 --- a/.storybook/preview.cjs +++ /dev/null @@ -1,9 +0,0 @@ -export const parameters = { - actions: { argTypesRegex: "^on[A-Z].*" }, - controls: { - matchers: { - color: /(background|color)$/i, - date: /Date$/, - }, - }, -} \ No newline at end of file diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx new file mode 100644 index 0000000..98b142f --- /dev/null +++ b/.storybook/preview.tsx @@ -0,0 +1,13 @@ +import React from 'react'; + +const parameters = { + actions: { argTypesRegex: '^on[A-Z].*' }, + controls: { + matchers: { + color: /(background|color)$/i, + date: /Date$/, + }, + }, +}; + +export default parameters; diff --git a/package.json b/package.json index a929430..7f28c22 100644 --- a/package.json +++ b/package.json @@ -7,31 +7,33 @@ "dev": "vite", "build": "tsc && vite build", "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" + "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": { - "chromatic": "9.1.1--canary.857.7006504909.0", + "chromatic": "^11.0.0", "react": "^18.2.0", "react-dom": "^18.2.0" }, "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.12", + "@storybook/addon-essentials": "^7.6.12", + "@storybook/addon-interactions": "^7.6.12", + "@storybook/addon-links": "^7.6.12", + "@storybook/react": "^7.6.12", + "@storybook/react-vite": "^7.6.12", + "@storybook/test": "^7.6.12", "@types/react": "^18.0.17", "@types/react-dom": "^18.0.6", - "@vitejs/plugin-react": "^2.0.1", + "@vitejs/plugin-react": "^4.2.1", "babel-loader": "^8.2.5", - "typescript": "^4.6.4", - "vite": "^3.0.7", - "vite-plugin-turbosnap": "^1.0.1" + "storybook": "^7.6.12", + "typescript": "^5.3.3", + "vite": "^5.0.12", + "vite-plugin-turbosnap": "^1.0.3", + "vitest": "^1.2.2" }, "readme": "ERROR: No README data found!", "_id": "vite-project@0.0.0" diff --git a/src/stories/Button.stories.tsx b/src/stories/Button.stories.tsx index c331bd4..85dae52 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: Meta = { title: 'Example/Button', component: Button, // More on argTypes: https://storybook.js.org/docs/react/api/argtypes argTypes: { backgroundColor: { control: 'color' }, }, -} as ComponentMeta; +}; + +export default meta; -// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args -const Template: ComponentStory = (args) =>