diff --git a/.eslintrc.json b/.eslintrc.json index 3722418..2b5b39b 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -1,3 +1,7 @@ { - "extends": ["next/core-web-vitals", "next/typescript"] -} + "extends": [ + "next/core-web-vitals", + "next/typescript", + "plugin:storybook/recommended" + ] +} \ No newline at end of file diff --git a/.gitignore b/.gitignore index 26b002a..fb95c82 100644 --- a/.gitignore +++ b/.gitignore @@ -38,3 +38,6 @@ yarn-error.log* # typescript *.tsbuildinfo next-env.d.ts + +*storybook.log +storybook-static diff --git a/.storybook/main.ts b/.storybook/main.ts new file mode 100644 index 0000000..f8de731 --- /dev/null +++ b/.storybook/main.ts @@ -0,0 +1,19 @@ +import type { StorybookConfig } from '@storybook/nextjs'; + +const config: StorybookConfig = { + stories: ['../components/**/*stories.@(js|jsx|ts|tsx|mdx)'], + addons: [ + '@storybook/addon-essentials', + '@storybook/addon-a11y', + '@storybook/addon-docs', + ], + framework: { + name: '@storybook/nextjs', + options: {}, + }, + docs: { + autodocs: 'tag', + }, +}; + +export default config; diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx new file mode 100644 index 0000000..c75b301 --- /dev/null +++ b/.storybook/preview.tsx @@ -0,0 +1,16 @@ +import React from 'react'; +import { withThemeByClassName } from '@storybook/addon-styling'; +import '../app/globals.css'; + +export const decorators = [ + (Story: any) => ( +
+ +
+ ), +]; + +export const parameters = { + actions: { argTypesRegex: '^on[A-Z].*' }, + controls: { matchers: { color: /(background|color)$/i, date: /Date$/ } }, +}; diff --git a/.storybook/story-template.tsx b/.storybook/story-template.tsx new file mode 100644 index 0000000..bd243a2 --- /dev/null +++ b/.storybook/story-template.tsx @@ -0,0 +1,11 @@ +import React from 'react'; + +type ModuleType = Record; + +export function Template({ module, props }: { module: ModuleType; props?: any }) { + const Component = module?.Root || module?.default || Object.values(module).find((v) => typeof v === 'function'); + if (!Component) return null; + return ; +} + +export default Template; diff --git a/app/globals.css b/app/globals.css index 8ec8b37..cce712f 100644 --- a/app/globals.css +++ b/app/globals.css @@ -1,3 +1,4 @@ +@import url('https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,400;0,500;700;1,400&display=swap'); @tailwind base; @tailwind components; @tailwind utilities; @@ -390,3 +391,8 @@ transform: scale(0.8996); transform-origin: center; } + +/* Set default font to Inter */ +html, body { + font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; +} diff --git a/components/ui/accordion.stories.tsx b/components/ui/accordion.stories.tsx new file mode 100644 index 0000000..ceaaafe --- /dev/null +++ b/components/ui/accordion.stories.tsx @@ -0,0 +1,9 @@ +import React from 'react'; +import * as Module from './accordion'; +import Template from '../../.storybook/story-template'; + +export default { title: 'UI/Accordion' }; + +export const Default = { + render: () =>