feat: add example with basic usage of storybook

template/.github/workflows/storybook-deployment.yml

@@ -7,6 +7,7 @@ on:
     branches: [ main ]
     paths:
       - 'apps/web/src/components/**'
+      - 'apps/web/src/theme/components/**'
   # Allows you to run this workflow manually from the Actions tab
   workflow_dispatch:
     inputs:

template/apps/web/.storybook/main.ts

@@ -1,29 +1,18 @@
 import type { StorybookConfig } from '@storybook/nextjs';
 
-import { join, dirname } from 'path';
-
-function getAbsolutePath(value: string): any {
-  return dirname(require.resolve(join(value, 'package.json')));
-}
 const config: StorybookConfig = {
-  core: {
-    builder: '@storybook/builder-webpack5',
-  },
-  stories: ['../src/components/**/*.stories.@(js|jsx|ts|tsx)'],
-  addons: [
-    getAbsolutePath('@storybook/addon-links'),
-    getAbsolutePath('@storybook/addon-essentials'),
-    getAbsolutePath('@storybook/addon-onboarding'),
-    getAbsolutePath('@storybook/addon-interactions'),
-    getAbsolutePath('@storybook/addon-styling-webpack'),
-    getAbsolutePath('storybook-dark-mode'),
+  framework: '@storybook/nextjs',
+  addons: ['@storybook/addon-controls', '@storybook/addon-styling-webpack', 'storybook-dark-mode'],
+  stories: [
+    {
+      directory: '../src/components',
+      titlePrefix: 'Application components',
+    },
+    {
+      directory: '../src/theme/components',
+      titlePrefix: 'UI Kit',
+    },
   ],
-  framework: {
-    name: getAbsolutePath('@storybook/nextjs'),
-    options: {},
-  },
-  docs: {
-    autodocs: 'tag',
-  },
 };
+
 export default config;

template/apps/web/.storybook/preview.tsx

@@ -1,6 +1,6 @@
 import '@mantine/core/styles.css';
 
-import React, { useEffect } from 'react';
+import { ReactNode, useEffect } from 'react';
 import { addons } from '@storybook/preview-api';
 import { DARK_MODE_EVENT_NAME } from 'storybook-dark-mode';
 import { MantineProvider, useMantineColorScheme } from '@mantine/core';
@@ -9,17 +9,15 @@ import theme from '../src/theme';
 
 const channel = addons.getChannel();
 
-const ColorSchemeWrapper = ({ children }: { children: React.ReactNode }) => {
+const ColorSchemeWrapper = ({ children }: { children: ReactNode }) => {
   const { setColorScheme } = useMantineColorScheme();
   const handleColorScheme = (value: boolean) => setColorScheme(value ? 'dark' : 'light');
 
   useEffect(() => {
     channel.on(DARK_MODE_EVENT_NAME, handleColorScheme);
     return () => channel.off(DARK_MODE_EVENT_NAME, handleColorScheme);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [channel]);
 
-  // eslint-disable-next-line react/jsx-no-useless-fragment
   return <>{children}</>;
 };
 

template/apps/web/package.json

@@ -43,17 +43,11 @@
     "zod": "3.21.4"
   },
   "devDependencies": {
-    "@storybook/addon-essentials": "7.6.14",
-    "@storybook/addon-interactions": "7.6.14",
-    "@storybook/addon-links": "7.6.14",
-    "@storybook/addon-onboarding": "^1.0.11",
-    "@storybook/addon-styling-webpack": "0.0.6",
-    "@storybook/blocks": "7.6.14",
-    "@storybook/builder-webpack5": "7.6.14",
-    "@storybook/nextjs": "7.6.14",
-    "@storybook/preview-api": "7.6.14",
-    "@storybook/react": "7.6.14",
-    "@storybook/test": "7.6.14",
+    "@storybook/addon-controls": "8.2.0",
+    "@storybook/addon-styling-webpack": "1.0.0",
+    "@storybook/nextjs": "8.2.0",
+    "@storybook/preview-api": "8.2.0",
+    "@storybook/react": "8.2.0",
     "@tanstack/react-query-devtools": "5.20.1",
     "@types/lodash": "4.14.202",
     "@types/mixpanel-browser": "2.49.0",
@@ -69,8 +63,8 @@
     "postcss-simple-vars": "7.0.1",
     "prettier": "3.2.5",
     "prettier-config-custom": "workspace:*",
-    "storybook": "7.6.14",
-    "storybook-dark-mode": "3.0.3",
+    "storybook": "8.2.0",
+    "storybook-dark-mode": "4.0.2",
     "tsconfig": "workspace:*",
     "typescript": "5.2.2"
   },

template/apps/web/src/theme/components/Button/index.stories.tsx

@@ -0,0 +1,31 @@
+import { Button, ButtonProps } from '@mantine/core';
+import type { Meta, StoryObj } from '@storybook/react';
+
+const meta = {
+  component: Button,
+  args: {
+    children: 'Button',
+    variant: 'primary',
+    size: 'md',
+    loading: false,
+  },
+  argTypes: {
+    variant: {
+      options: ['primary', 'outline'],
+      control: { type: 'radio' },
+    },
+    size: {
+      options: ['md', 'lg'],
+      control: { type: 'radio' },
+    },
+    loading: {
+      control: { type: 'boolean' },
+    },
+  },
+} satisfies Meta<typeof Button>;
+
+export default meta;
+
+type Story = StoryObj<ButtonProps>;
+
+export const Basic: Story = {};