Merge branch 'storybook' of https://github.com/discours/discoursio-webapp into storybook

.storybook/main.ts

@@ -26,6 +26,14 @@ const config: StorybookConfig = {
       config.build.sourcemap = true
       config.build.minify = process.env.NODE_ENV === 'production'
     }
+    if (config.css) {
+      config.css.preprocessorOptions = {
+        scss: {
+          additionalData: '@import "~/styles/app.scss";',
+          includePaths: ['./public', './src/styles', './node_modules']
+        }
+      }
+    }
     return config
   },
   previewHead: (head) => `

.storybook/preview.ts

@@ -1,4 +1,5 @@
-import { withThemeByClassName } from '@storybook/addon-themes'
+import { withThemeByClassName } from '@storybook/addon-themes';
+import '../src/styles/app.scss';
 
 const preview = {
   parameters: {

package.json

@@ -112,6 +112,7 @@
     "solid-tiptap": "0.7.0",
     "solid-transition-group": "^0.2.3",
     "storybook": "^8.3.0",
+    "storybook-addon-sass-postcss": "0.3.1",
     "storybook-solidjs": "^1.0.0-beta.2",
     "storybook-solidjs-vite": "^1.0.0-beta.2",
     "stylelint": "^16.9.0",

src/components/atoms/Button/Button.stories.tsx

@@ -11,7 +11,9 @@ const meta: Meta<typeof Button> = {
   component: Button,
 
   argTypes: {
-    value: { control: 'text' },
+    value: {
+      control: { type: 'text' }
+    },
     variant: {
       options: ['primary', 'secondary', 'bordered', 'inline', 'light', 'outline', 'danger'],
       control: { type: 'select' }
@@ -27,11 +29,11 @@ const meta: Meta<typeof Button> = {
   }
 }
 
-export default meta
+export default meta;
 
 type Story = StoryObj<typeof Button>
 
-export const Default: Story = {
+export const Primary: Story = {
   args: {
     value: 'Button',
     variant: 'primary',
@@ -41,3 +43,51 @@ export const Default: Story = {
     isSubscribeButton: false
   }
 }
+
+export const Secondary: Story = {
+  args: {
+    value: 'Button',
+    variant: 'secondary',
+    size: 'M'
+  }
+}
+
+export const Bordered: Story = {
+  args: {
+    value: 'Button',
+    variant: 'bordered',
+    size: 'M'
+  }
+}
+
+export const Inline: Story = {
+  args: {
+    value: 'Button',
+    variant: 'inline',
+    size: 'M'
+  }
+}
+
+export const Light: Story = {
+  args: {
+    value: 'Button',
+    variant: 'light',
+    size: 'M'
+  }
+}
+
+export const Outline: Story = {
+  args: {
+    value: 'Button',
+    variant: 'outline',
+    size: 'M'
+  }
+}
+
+export const Danger: Story = {
+  args: {
+    value: 'Button',
+    variant: 'danger',
+    size: 'M'
+  }
+}