✨ add storybook

.npmrc

@@ -3,3 +3,7 @@ shell-emulator=true
 ignore-workspace-root-check=true
 auto-install-peers=true
 enable-pre-post-scripts=true
+public-hoist-pattern[]=*storybook*
+public-hoist-pattern[]=*webpack*
+public-hoist-pattern[]=@babel/*
+node-linker=hoisted

.storybook/main.ts

@@ -0,0 +1,41 @@
+import type { StorybookConfig } from "@storybook/react-webpack5";
+import path from "path";
+
+const config: StorybookConfig = {
+  framework: {
+    name: "@storybook/react-webpack5",
+    options: {}
+  },
+  stories: [
+    "../packages/kitchn/src/**/*.mdx",
+    "../packages/kitchn/src/**/*.stories.@(js|jsx|ts|tsx)"
+  ],
+  addons: [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-interactions",
+    "@storybook/addon-themes",
+    "@storybook/addon-a11y"
+  ],
+  docs: {
+    autodocs: true
+  },
+  core: {
+    disableTelemetry: true
+  },
+  webpackFinal: async (config) => {
+    if (config.resolve) {
+      config.resolve.modules = [
+        ...(config.resolve.modules || []),
+        path.resolve(__dirname, "../packages/kitchn/src"),
+      ];
+      config.resolve.alias = {
+        ...(config.resolve.alias || {}),
+        "@": path.resolve(__dirname, "../packages/kitchn/src"),
+      };
+    }
+    return config;
+  },
+};
+
+export default config;

.storybook/preview.tsx

@@ -0,0 +1,78 @@
+import React from 'react';
+import type { Preview, StoryFn, StoryContext } from "@storybook/react";
+import { ThemeProvider } from 'styled-components';
+import { defaultThemes } from '../packages/kitchn/src/themes';
+import { createGlobalStyle } from 'styled-components';
+import "normalize.css";
+import "../packages/kitchn/fonts.css";
+
+const GlobalStyles = createGlobalStyle`
+  body {
+    font-family: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto',
+    'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    margin: 0;
+    padding: 0;
+  }
+
+  code {
+    font-family: 'Fira Code', source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
+  }
+
+  * {
+    box-sizing: border-box;
+  }
+`;
+
+const withThemeProvider = (Story: StoryFn, context: StoryContext) => {
+  const theme = context.globals.theme === 'dark' ? defaultThemes.dark : defaultThemes.light;
+  const backgroundColor = theme.background;
+
+  return (
+    <ThemeProvider theme={theme}>
+      <GlobalStyles />
+      <Story />
+    </ThemeProvider>
+  );
+};
+
+const preview: Preview = {
+  decorators: [withThemeProvider],
+  parameters: {
+    layout: 'fullscreen',
+    actions: { argTypesRegex: "^on[A-Z].*" },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/,
+      },
+    },
+    backgrounds: {
+      disable: true,
+    }
+  },
+  globalTypes: {
+    theme: {
+      name: 'Theme',
+      description: 'Global theme for components',
+      defaultValue: 'light',
+      toolbar: {
+        // Show this tool in the toolbar
+        icon: 'circlehollow',
+        items: [
+          { value: 'light', icon: 'sun', title: 'Light Theme' },
+          { value: 'dark', icon: 'moon', title: 'Dark Theme' },
+        ],
+        // Display all icons
+        showName: true,
+        // Add dynamic switching
+        dynamicTitle: true,
+      },
+    },
+  },
+};
+
+export default preview;

.storybook/webpack.config.js

@@ -0,0 +1,28 @@
+const path = require('path');
+
+module.exports = async ({ config }) => {
+  // Add support for TypeScript paths
+  config.resolve.alias = {
+    ...config.resolve.alias,
+    '@': path.resolve(__dirname, '../packages/kitchn/src'),
+  };
+
+  // Add support for styled-components
+  config.module.rules.push({
+    test: /\.(ts|tsx)$/,
+    loader: require.resolve('babel-loader'),
+    options: {
+      presets: [
+        ['react-app', { flow: false, typescript: true }],
+        require.resolve('@babel/preset-typescript'),
+      ],
+      plugins: [
+        require.resolve('babel-plugin-styled-components'),
+      ],
+    },
+  });
+
+  config.resolve.extensions.push('.ts', '.tsx');
+
+  return config;
+};

package.json

@@ -10,7 +10,6 @@
     "build:packages": "turbo run build --filter='./packages/*'",
     "build:apps": "turbo run build --filter=workshop --filter=docs --filter='./examples/*'",
     "build:docs": "turbo run build --filter=docs...",
-    "build:workshop": "turbo run build --filter=workshop",
     "build:examples": "turbo run build --filter='./examples/*'",
     "build:examples:expo": "turbo run build --filter=expo",
     "build:examples:gatsby": "turbo run build --filter=gatsby",
@@ -20,7 +19,6 @@
     "dev:packages": "turbo run dev --filter='./packages/*'",
     "dev:apps": "turbo run dev --filter=workshop --filter=docs --filter='./examples/*'",
     "dev:docs": "turbo run dev --filter=docs",
-    "dev:workshop": "turbo run dev --filter=workshop",
     "dev:examples": "turbo run dev --filter='./examples/*'",
     "dev:examples:expo": "turbo run dev --filter=expo",
     "dev:examples:gatsby": "turbo run dev --filter=gatsby",
@@ -33,7 +31,10 @@
     "lint": "eslint . --ext .ts,.tsx",
     "lint:fix": "eslint . --ext .ts,.tsx --fix",
     "size": "size-limit",
-    "size:why": "size-limit --why"
+    "size:why": "size-limit --why",
+    "storybook": "storybook dev -p 6006 --no-open",
+    "build-storybook": "storybook build",
+    "clean": "rm -rf node_modules .turbo .next dist storybook-static"
   },
   "dependencies": {
     "@babel/core": "^7.19.6",
@@ -45,15 +46,31 @@
     "@changesets/cli": "^2.25.2",
     "@manypkg/cli": "^0.22.0",
     "@size-limit/preset-big-lib": "^11.0.0",
+    "@storybook/addon-a11y": "^7.6.20",
+    "@storybook/addon-essentials": "^7.6.20",
+    "@storybook/addon-interactions": "^7.6.20",
+    "@storybook/addon-links": "^7.6.20",
+    "@storybook/addon-onboarding": "^8.4.6",
+    "@storybook/addon-themes": "^7.6.20",
+    "@storybook/blocks": "^7.6.17",
+    "@storybook/react": "^7.6.20",
+    "@storybook/react-webpack5": "^7.6.20",
+    "@storybook/test": "^7.6.17",
     "babel-plugin-styled-components": "^2.0.7",
     "eslint": "^8.47.0",
     "eslint-config-antoine": "^1.0.13",
     "husky": "^9.0.0",
     "merge-stream": "^2.0.0",
+    "normalize.css": "^8.0.1",
     "path-browserify": "^1.0.1",
     "prettier": "^3.0.2",
+    "react": "^18.3.1",
+    "react-dom": "^18.2.0",
     "size-limit": "^11.0.0",
-    "turbo": "^2.0.4"
+    "storybook": "^7.6.20",
+    "styled-components": "6.1.13",
+    "turbo": "^2.0.4",
+    "webpack": "5.90.3"
   },
   "packageManager": "[email protected]"
 }

packages/kitchn/package.json

@@ -76,7 +76,7 @@
     "@types/react": "^18.2.67",
     "@types/react-dom": "^18.2.22",
     "next": "^14.0.0",
-    "react": "^18.2.0",
+    "react": "^18.3.1",
     "react-dom": "^18.2.0",
     "react-native": "^0.76.0",
     "react-native-remix-icon": "^0.4.0",

packages/kitchn/src/components/Avatar/Avatar.stories.tsx

@@ -0,0 +1,140 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { Avatar, Container } from '../../components';
+
+const meta = {
+  title: 'Components/Avatar',
+  component: Avatar,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: { type: 'number' },
+      description: 'Size of the avatar in pixels',
+      defaultValue: 30,
+    },
+    username: {
+      control: 'text',
+      description: 'Username from tonightpass.com',
+    },
+    src: {
+      control: 'text',
+      description: 'Image source URL',
+    },
+    text: {
+      control: 'text',
+      description: 'Text to display when no image is provided',
+    },
+    shape: {
+      control: 'radio',
+      options: ['square', 'round'],
+      description: 'Shape of the avatar',
+      defaultValue: 'round',
+    },
+  },
+} satisfies Meta<typeof Avatar>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Basic avatar with image
+export const WithImage: Story = {
+  args: {
+    src: 'https://i.pravatar.cc/300',
+    size: 50,
+  },
+};
+
+// Avatar with text fallback
+export const WithText: Story = {
+  args: {
+    text: 'John Doe',
+    size: 50,
+  },
+};
+
+// Square avatar
+export const Square: Story = {
+  args: {
+    src: 'https://i.pravatar.cc/300',
+    shape: 'square',
+    size: 50,
+  },
+};
+
+// TonightPass username avatar
+export const TonightPassUser: Story = {
+  args: {
+    username: 'antoinekm',
+    size: 50,
+  },
+};
+
+// Different sizes
+export const Sizes: Story = {
+  render: () => {
+    return (
+      <Container gap={"normal"} align={"center"} row>
+        <Avatar size={24} text="XS" />
+        <Avatar size={32} text="S" />
+        <Avatar size={40} text="M" />
+        <Avatar size={48} text="L" />
+        <Avatar size={64} text="XL" />
+      </Container>
+    );
+  },
+};
+
+// Different shapes
+export const Shapes: Story = {
+  render: () => {
+    return (
+      <Container gap={"normal"} align={"center"} row>
+        <Avatar 
+          size={50} 
+          shape="round" 
+          src="https://i.pravatar.cc/300" 
+        />
+        <Avatar 
+          size={50} 
+          shape="square" 
+          src="https://i.pravatar.cc/300" 
+        />
+      </Container>
+    );
+  },
+};
+
+// Fallback behavior
+export const FallbackBehavior: Story = {
+  render: () => {
+    return (
+      <Container gap={"normal"} align={"center"} row>
+        <Avatar 
+          size={50} 
+          src="https://i.pravatar.cc/300" 
+          text="Fallback" 
+        />
+        <Avatar 
+          size={50} 
+          text="Text Only" 
+        />
+        <Avatar 
+          size={50} 
+          username="non-existent-user" 
+          text="Invalid User" 
+        />
+      </Container>
+    );
+  },
+};
+
+// Long text handling
+export const LongTextHandling: Story = {
+  args: {
+    text: 'Very Long Name That Should Be Shortened',
+    size: 50,
+  },
+};