diff --git a/apps/web/src/app/(onboarding)/onboarding/job/page.stories.tsx b/apps/web/src/app/(onboarding)/onboarding/job/page.stories.tsx index 887710c..d7c6f7f 100644 --- a/apps/web/src/app/(onboarding)/onboarding/job/page.stories.tsx +++ b/apps/web/src/app/(onboarding)/onboarding/job/page.stories.tsx @@ -10,19 +10,12 @@ import { OnBoardingProvider } from '../_context/useOnboarding' import OnboardingJobPage from './page' -const meta = { +const meta: Meta = { title: 'OnboardingJob', component: OnboardingJobPage, parameters: { layout: 'centered', }, -} satisfies Meta - -export default meta - -type Story = StoryObj - -export const Preview: Story = { decorators: [ (Story) => ( @@ -35,3 +28,9 @@ export const Preview: Story = { ), ], } + +export default meta + +type Story = StoryObj + +export const Preview: Story = {} diff --git a/apps/workshop/.storybook/manager.ts b/apps/workshop/.storybook/manager.ts new file mode 100644 index 0000000..36cd16b --- /dev/null +++ b/apps/workshop/.storybook/manager.ts @@ -0,0 +1,16 @@ +import { addons } from '@storybook/manager-api' +import { themes } from '@storybook/theming' +import { create } from '@storybook/theming/create' + +addons.setConfig({ + theme: create({ + base: 'light', + brandTitle: 'Vook Client Workshop', + brandImage: '/logo.png', + + colorPrimary: '#3A10E5', + colorSecondary: '#5D5CE5', + + barTextColor: '#FFFFFF', + }), +}) diff --git a/apps/workshop/package.json b/apps/workshop/package.json index 3a39c0e..a025de2 100644 --- a/apps/workshop/package.json +++ b/apps/workshop/package.json @@ -9,10 +9,10 @@ "build-storybook": "storybook build" }, "dependencies": { + "@vook-client/api": "*", "@vook-client/design-system": "*", "react": "^18.3.1", - "react-dom": "^18.3.1", - "@vook-client/api": "*" + "react-dom": "^18.3.1" }, "devDependencies": { "@chromatic-com/storybook": "^1.3.3", @@ -22,9 +22,11 @@ "@storybook/addon-onboarding": "^8.0.10", "@storybook/addon-styling-webpack": "^1.0.0", "@storybook/blocks": "^8.0.10", + "@storybook/manager-api": "^8.1.7", "@storybook/react": "^8.0.10", "@storybook/react-vite": "^8.0.10", "@storybook/test": "^8.0.10", + "@storybook/theming": "^8.1.7", "@types/react": "^18.2.15", "@types/react-dom": "^18.2.7", "@vanilla-extract/vite-plugin": "^4.0.9", diff --git a/apps/workshop/public/logo.png b/apps/workshop/public/logo.png new file mode 100644 index 0000000..58251dd Binary files /dev/null and b/apps/workshop/public/logo.png differ diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 4565554..c1cdfe5 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -151,7 +151,7 @@ importers: version: 3.0.5 next: specifier: ^14.1.1 - version: 14.2.3(@babel/core@7.24.5)(react-dom@18.3.1)(react@18.3.1) + version: 14.2.3(@babel/core@7.23.7)(react-dom@18.3.1)(react@18.3.1) react: specifier: ^18.2.0 version: 18.3.1 @@ -277,6 +277,9 @@ importers: '@storybook/blocks': specifier: ^8.0.10 version: 8.1.1(@types/react-dom@18.3.0)(@types/react@18.3.2)(prettier@3.2.5)(react-dom@18.3.1)(react@18.3.1) + '@storybook/manager-api': + specifier: ^8.1.7 + version: 8.1.7(react-dom@18.3.1)(react@18.3.1) '@storybook/react': specifier: ^8.0.10 version: 8.1.1(prettier@3.2.5)(react-dom@18.3.1)(react@18.3.1)(typescript@5.2.2) @@ -286,6 +289,9 @@ importers: '@storybook/test': specifier: ^8.0.10 version: 8.1.1(vitest@1.6.0) + '@storybook/theming': + specifier: ^8.1.7 + version: 8.1.7(react-dom@18.3.1)(react@18.3.1) '@types/react': specifier: ^18.2.15 version: 18.3.2 @@ -562,6 +568,7 @@ packages: semver: 6.3.1 transitivePeerDependencies: - supports-color + dev: true /@babel/generator@7.24.5: resolution: @@ -759,6 +766,7 @@ packages: '@babel/helper-simple-access': 7.24.5 '@babel/helper-split-export-declaration': 7.24.5 '@babel/helper-validator-identifier': 7.24.5 + dev: true /@babel/helper-optimise-call-expression@7.22.5: resolution: @@ -7503,6 +7511,19 @@ packages: tiny-invariant: 1.3.3 dev: true + /@storybook/channels@8.1.7: + resolution: + { + integrity: sha512-L1jrgaleNBTLNRH35iNxmIDWEqFhouDbq7Vii9FgjSOJdScUHVdtxzC8A2ymXlQCiD5ggQ5HzmUJaY6RTfwGRg==, + } + dependencies: + '@storybook/client-logger': 8.1.7 + '@storybook/core-events': 8.1.7 + '@storybook/global': 5.0.0 + telejson: 7.2.0 + tiny-invariant: 1.3.3 + dev: true + /@storybook/cli@8.1.1(react-dom@18.3.1)(react@18.3.1): resolution: { @@ -7565,6 +7586,15 @@ packages: '@storybook/global': 5.0.0 dev: true + /@storybook/client-logger@8.1.7: + resolution: + { + integrity: sha512-Cmdt9qpyIQZcVR3y16464vrO06YFaWice+wQZ1OIror8XBqkpUxgZldQ95uTed6Wz9igf0PEYyaV8jJrGcHMrA==, + } + dependencies: + '@storybook/global': 5.0.0 + dev: true + /@storybook/codemod@8.1.1: resolution: { @@ -7672,6 +7702,16 @@ packages: ts-dedent: 2.2.0 dev: true + /@storybook/core-events@8.1.7: + resolution: + { + integrity: sha512-cASpI+C+S1DUiO7schq7jKwvEuFwkqR24PTQxe4o77DMiryCJZgw+YlUHXS8EodKJW5cLVB3wd3fHAYYfeyWGg==, + } + dependencies: + '@storybook/csf': 0.1.7 + ts-dedent: 2.2.0 + dev: true + /@storybook/core-server@8.1.1(prettier@3.2.5)(react-dom@18.3.1)(react@18.3.1): resolution: { @@ -7872,6 +7912,32 @@ packages: - react-dom dev: true + /@storybook/manager-api@8.1.7(react-dom@18.3.1)(react@18.3.1): + resolution: + { + integrity: sha512-sLVieFaDSd6Xrl4V/mgL2mq4Js8IjmeGknj0TZaAmN6Xbwq4+W0pRyyVuFNEG8SpdxwYk7BsbtkD9+tXYlLElw==, + } + dependencies: + '@storybook/channels': 8.1.7 + '@storybook/client-logger': 8.1.7 + '@storybook/core-events': 8.1.7 + '@storybook/csf': 0.1.7 + '@storybook/global': 5.0.0 + '@storybook/icons': 1.2.9(react-dom@18.3.1)(react@18.3.1) + '@storybook/router': 8.1.7 + '@storybook/theming': 8.1.7(react-dom@18.3.1)(react@18.3.1) + '@storybook/types': 8.1.7 + dequal: 2.0.3 + lodash: 4.17.21 + memoizerific: 1.11.3 + store2: 2.14.3 + telejson: 7.2.0 + ts-dedent: 2.2.0 + transitivePeerDependencies: + - react + - react-dom + dev: true + /@storybook/manager@8.1.1: resolution: { @@ -8075,6 +8141,17 @@ packages: qs: 6.12.1 dev: true + /@storybook/router@8.1.7: + resolution: + { + integrity: sha512-1NjHXYV1bDn7qzhF8ZefMLJR/P2tOSU9+NhDzCSl0jxZGjFPJWpciVX5dheRNAOASNaUr5l3BxzFXo6Tv4jcsA==, + } + dependencies: + '@storybook/client-logger': 8.1.7 + memoizerific: 1.11.3 + qs: 6.12.1 + dev: true + /@storybook/telemetry@8.1.1(prettier@3.2.5): resolution: { @@ -8141,6 +8218,28 @@ packages: react-dom: 18.3.1(react@18.3.1) dev: true + /@storybook/theming@8.1.7(react-dom@18.3.1)(react@18.3.1): + resolution: + { + integrity: sha512-iIg1+SBv3d9aCyHp7soPPglfn2GoP69Xp+F8nfdo8lx+SHaWxRCqvW+jiZaJur0c4yqKsFpDrvWjYa4xWfQP7w==, + } + peerDependencies: + react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta + react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta + peerDependenciesMeta: + react: + optional: true + react-dom: + optional: true + dependencies: + '@emotion/use-insertion-effect-with-fallbacks': 1.0.1(react@18.3.1) + '@storybook/client-logger': 8.1.7 + '@storybook/global': 5.0.0 + memoizerific: 1.11.3 + react: 18.3.1 + react-dom: 18.3.1(react@18.3.1) + dev: true + /@storybook/types@8.1.1: resolution: { @@ -8152,6 +8251,17 @@ packages: file-system-cache: 2.3.0 dev: true + /@storybook/types@8.1.7: + resolution: + { + integrity: sha512-OkdxFvqvRc6eCOMwLyx8zCTAox71PcEW+0BZgZGeL7uunF5pA615LFCU79LfwY/dUQNjbv9HhQu/feTu16GVvQ==, + } + dependencies: + '@storybook/channels': 8.1.7 + '@types/express': 4.17.21 + file-system-cache: 2.3.0 + dev: true + /@svgr/babel-plugin-add-jsx-attribute@6.5.1(@babel/core@7.23.7): resolution: { @@ -8761,7 +8871,7 @@ packages: dom-accessibility-api: 0.6.3 lodash: 4.17.21 redent: 3.0.0 - vitest: 1.6.0(@types/node@20.12.12)(jsdom@24.0.0) + vitest: 1.6.0(@types/node@20.12.12)(@vitest/ui@1.6.0) dev: true /@testing-library/react@15.0.7(@types/react@18.3.2)(react-dom@18.2.0)(react@18.2.0): @@ -10001,7 +10111,7 @@ packages: next: '>=12.1.7' dependencies: '@vanilla-extract/webpack-plugin': 2.3.8(@types/node@20.12.12)(webpack@5.91.0) - next: 14.2.3(@babel/core@7.24.5)(react-dom@18.3.1)(react@18.3.1) + next: 14.2.3(@babel/core@7.23.7)(react-dom@18.3.1)(react@18.3.1) transitivePeerDependencies: - '@types/node' - babel-plugin-macros @@ -18014,7 +18124,7 @@ packages: engines: { node: '>= 0.4.0' } dev: true - /next@14.2.3(@babel/core@7.24.5)(react-dom@18.3.1)(react@18.3.1): + /next@14.2.3(@babel/core@7.23.7)(react-dom@18.3.1)(react@18.3.1): resolution: { integrity: sha512-dowFkFTR8v79NPJO4QsBUtxv0g9BrS/phluVpMAt2ku7H+cbcBJlopXjkWlwxrk/xGqMemr7JkGPGemPrLLX7A==, @@ -18043,7 +18153,7 @@ packages: postcss: 8.4.31 react: 18.3.1 react-dom: 18.3.1(react@18.3.1) - styled-jsx: 5.1.1(@babel/core@7.24.5)(react@18.3.1) + styled-jsx: 5.1.1(@babel/core@7.23.7)(react@18.3.1) optionalDependencies: '@next/swc-darwin-arm64': 14.2.3 '@next/swc-darwin-x64': 14.2.3 @@ -21623,7 +21733,7 @@ packages: webpack: 5.91.0(esbuild@0.20.2) dev: true - /styled-jsx@5.1.1(@babel/core@7.24.5)(react@18.3.1): + /styled-jsx@5.1.1(@babel/core@7.23.7)(react@18.3.1): resolution: { integrity: sha512-pW7uC1l4mBZ8ugbiZrcIsiIvVx1UmTfw7UkC3Um2tmfUq9Bhk8IiyEIPl6F8agHgjzku6j0xQEZbfA5uSgSaCw==, @@ -21639,7 +21749,7 @@ packages: babel-plugin-macros: optional: true dependencies: - '@babel/core': 7.24.5 + '@babel/core': 7.23.7 client-only: 0.0.1 react: 18.3.1