chore: add minimal storybook config

.eslintrc.js

@@ -4,7 +4,12 @@ module.exports = {
     es2021: true,
     jest: true,
   },
-  extends: ["plugin:react/recommended", "airbnb", "prettier"],
+  extends: [
+    "plugin:react/recommended",
+    "airbnb",
+    "prettier",
+    "plugin:storybook/recommended",
+  ],
   parser: "@typescript-eslint/parser",
   parserOptions: {
     ecmaFeatures: {

.gitignore

@@ -47,3 +47,5 @@ yalc.lock
 .swc/
 
 stats.html
+
+*storybook.log

.storybook/main.ts

@@ -0,0 +1,59 @@
+import type { StorybookConfig } from "@storybook/react-webpack5";
+const path = require("path");
+
+const config: StorybookConfig = {
+  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+  addons: [
+    "@storybook/addon-webpack5-compiler-swc",
+    "@storybook/addon-onboarding",
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@chromatic-com/storybook",
+    "@storybook/addon-interactions",
+    "@storybook/addon-styling-webpack",
+    {
+      name: "@storybook/addon-styling-webpack",
+
+      options: {
+        rules: [
+          {
+            test: /\.css$/,
+            sideEffects: true,
+            use: [
+              require.resolve("style-loader"),
+              {
+                loader: require.resolve("css-loader"),
+                options: {
+                  importLoaders: 1,
+                },
+              },
+              {
+                loader: require.resolve("postcss-loader"),
+                options: {
+                  implementation: require.resolve("postcss"),
+                },
+              },
+            ],
+          },
+        ],
+      },
+    },
+  ],
+  framework: {
+    name: "@storybook/react-webpack5",
+    options: {},
+  },
+  webpackFinal: async (config, { configType }) => {
+    config.resolve.alias = {
+      ...config.resolve.alias,
+      "#/components": path.resolve(__dirname, "../src/components"),
+      "#/lib": path.resolve(__dirname, "../src/lib"),
+      "#/hooks": path.resolve(__dirname, "../src/hooks"),
+      "#/locales": path.resolve(__dirname, "../src/locales"),
+      "#/types": path.resolve(__dirname, "../src/types"),
+    };
+
+    return config;
+  },
+};
+export default config;

.storybook/preview.ts

@@ -0,0 +1,15 @@
+import type { Preview } from "@storybook/react";
+import "../src/storybook.css";
+import "tailwindcss/tailwind.css";
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+};
+
+export default preview;

package.json

@@ -25,7 +25,9 @@
     "release": "yarn build && yarn release-it",
     "link:self": "yarn yalc publish && yarn link",
     "ts": "node node_modules/.bin/ts-node -r tsconfig-paths/register -O '{\"module\": \"commonjs\", \"moduleResolution\": \"classic\", \"resolveJsonModule\": false }' --transpile-only --project ./tsconfig.json",
-    "i18n:extract": "i18next src/**/*"
+    "i18n:extract": "i18next src/**/*",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
   },
   "module": "dist/index.mjs",
   "main": "./dist/index.js",
@@ -84,6 +86,7 @@
     "node": ">=18.0.0"
   },
   "devDependencies": {
+    "@chromatic-com/storybook": "^1.6.1",
     "@commitlint/cli": "19.3.0",
     "@commitlint/config-conventional": "19.2.2",
     "@rollup/plugin-alias": "^5.1.0",
@@ -94,6 +97,16 @@
     "@rollup/plugin-url": "^8.0.2",
     "@ryansonshine/commitizen": "4.2.8",
     "@ryansonshine/cz-conventional-changelog": "3.3.4",
+    "@storybook/addon-essentials": "^8.2.7",
+    "@storybook/addon-interactions": "^8.2.7",
+    "@storybook/addon-links": "^8.2.7",
+    "@storybook/addon-onboarding": "^8.2.7",
+    "@storybook/addon-styling-webpack": "^1.0.0",
+    "@storybook/addon-webpack5-compiler-swc": "^1.0.5",
+    "@storybook/blocks": "^8.2.7",
+    "@storybook/react": "^8.2.7",
+    "@storybook/react-webpack5": "^8.2.7",
+    "@storybook/test": "^8.2.7",
     "@svgr/rollup": "^8.1.0",
     "@swc/core": "1.6.13",
     "@testing-library/dom": "^10.3.1",
@@ -126,6 +139,7 @@
     "eslint-plugin-react": "^7.34.3",
     "eslint-plugin-react-hooks": "4.6.2",
     "eslint-plugin-sort-class-members": "^1.20.0",
+    "eslint-plugin-storybook": "^0.8.0",
     "eslint-plugin-typescript-sort-keys": "3.2.0",
     "eslint-plugin-unused-imports": "4.0.0",
     "globals": "^15.8.0",
@@ -149,6 +163,7 @@
     "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-swc3": "^0.11.2",
     "rollup-plugin-visualizer": "^5.12.0",
+    "storybook": "^8.2.7",
     "style-loader": "^4.0.0",
     "tailwindcss": "^3.4.4",
     "tailwindcss-animate": "^1.0.7",

src/stories/Avatar.stories.tsx

@@ -0,0 +1,41 @@
+import { Meta, StoryObj } from "@storybook/react";
+import React from "react";
+import { Avatar, AvatarFallback, AvatarImage } from "../components/ui/Avatar";
+
+// meta
+const meta = {
+  title: "Components/Avatar",
+  render: () => (
+    <Avatar>
+      <AvatarImage src="https://github.com/bleu.png" alt="avatar" />
+      <AvatarFallback>Bleu Builders</AvatarFallback>
+    </Avatar>
+  ),
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered",
+  },
+} satisfies Meta<{}>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const AvatarWithImage: Story = {
+  args: {},
+  render: () => (
+    <Avatar>
+      <AvatarImage src="https://github.com/bleu.png" alt="avatar" />
+      <AvatarFallback>Avatar</AvatarFallback>
+    </Avatar>
+  ),
+};
+export const AvatarWithFallback: Story = {
+  args: {},
+  render: () => (
+    <Avatar>
+      <AvatarImage src="" alt="avatar" />
+      <AvatarFallback>bleu</AvatarFallback>
+    </Avatar>
+  ),
+};

src/stories/Badge.stories.tsx

@@ -0,0 +1,105 @@
+import React from "react";
+import { Meta, StoryObj } from "@storybook/react";
+import { Badge, BadgeProps } from "../components/ui/Badge";
+// meta
+const meta = {
+  title: "Components/Badge",
+  render: (args) => <Badge {...args}>{args.children}</Badge>,
+  tags: ["autodocs"],
+  args: {
+    color: "primary",
+    outline: "none",
+    size: "md",
+    children: "text",
+  },
+  argTypes: {
+    color: {
+      control: { type: "select" },
+      options: ["primary", "secondary", "success", "destructive", "pending"],
+    },
+    outline: {
+      control: { type: "select" },
+      options: ["none", "outline"],
+    },
+    size: {
+      control: { type: "select" },
+      options: ["xs", "sm", "md", "lg"],
+    },
+  },
+
+  parameters: {
+    layout: "centered",
+  },
+} satisfies Meta<BadgeProps>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+// colors
+export const Default: Story = {
+  args: {
+    color: "primary",
+  },
+};
+export const Secondary: Story = {
+  args: {
+    color: "secondary",
+  },
+};
+
+export const Destructive: Story = {
+  args: {
+    color: "destructive",
+  },
+};
+
+export const Pending: Story = {
+  args: {
+    color: "pending",
+  },
+};
+
+// sizes
+
+export const Xs: Story = {
+  args: {
+    size: "xs",
+  },
+};
+
+export const Sm: Story = {
+  args: {
+    size: "sm",
+  },
+};
+
+export const Md: Story = {
+  args: {
+    size: "md",
+  },
+};
+
+export const Lg: Story = {
+  args: {
+    size: "lg",
+  },
+};
+
+// outline
+
+export const OutlineBadge: Story = {
+  args: {
+    outline: "outline",
+  },
+};
+
+// link
+
+export const LinkWithStyleBadge: Story = {
+  render: ({ color, outline, size, children }) => (
+    <Badge color={color} outline={outline} size={size}>
+      {children}
+    </Badge>
+  ),
+};