faet

.gitignore

@@ -42,4 +42,6 @@ Thumbs.db
 .nx/workspace-data
 
 vite.config.*.timestamp*
-vitest.config.*.timestamp*
+vitest.config.*.timestamp*
+
+storybook-static

libs/ui/.storybook/main.ts

@@ -0,0 +1,20 @@
+import type { StorybookConfig } from '@storybook/react-vite';
+
+const config: StorybookConfig = {
+  stories: ['../src/**/*.@(mdx|stories.@(js|jsx|ts|tsx))'],
+  addons: ['@storybook/addon-essentials', '@storybook/addon-interactions'],
+  framework: {
+    name: '@storybook/react-vite',
+    options: {
+      builder: {
+        viteConfigPath: 'vite.config.ts',
+      },
+    },
+  },
+};
+
+export default config;
+
+// To customize your Vite configuration you can use the viteFinal field.
+// Check https://storybook.js.org/docs/react/builders/vite#configuration
+// and https://nx.dev/recipes/storybook/custom-builder-configs

libs/ui/.storybook/preview.ts

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

libs/ui/postcss.config.mjs

@@ -0,0 +1,7 @@
+import { join } from 'path';
+
+export default {
+  plugins: {
+    '@tailwindcss/postcss': {},
+  },
+};

libs/ui/src/atoms/button/button.stories.tsx

@@ -0,0 +1,104 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Button } from './button';
+
+const meta: Meta<typeof Button> = {
+  title: 'Components/Button',
+  component: Button,
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['primary', 'secondary', 'success', 'danger'],
+    },
+    size: {
+      control: 'select',
+      options: ['sm', 'md', 'lg'],
+    },
+    disabled: {
+      control: 'boolean',
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Button>;
+
+export const Primary: Story = {
+  args: {
+    variant: 'primary',
+    size: 'md',
+    children: 'Primary Button',
+  },
+};
+
+export const Secondary: Story = {
+  args: {
+    variant: 'secondary',
+    size: 'md',
+    children: 'Secondary Button',
+  },
+};
+
+export const Text: Story = {
+  args: {
+    variant: 'text',
+    size: 'md',
+    children: 'Text Button',
+  },
+};
+
+export const Bordered: Story = {
+  args: {
+    variant: 'bordered',
+    size: 'md',
+    children: 'Bordered Button',
+  },
+};
+
+export const Success: Story = {
+  args: {
+    variant: 'success',
+    size: 'md',
+    children: 'Success Button',
+  },
+};
+
+export const Danger: Story = {
+  args: {
+    variant: 'danger',
+    size: 'md',
+    children: 'Danger Button',
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    variant: 'primary',
+    size: 'md',
+    disabled: true,
+    children: 'Disabled Button',
+  },
+};
+
+export const Large: Story = {
+  args: {
+    variant: 'primary',
+    size: 'lg',
+    children: 'Large Button',
+  },
+};
+
+export const Medium: Story = {
+  args: {
+    variant: 'primary',
+    size: 'md',
+    children: 'Medium Button',
+  },
+};
+
+export const Small: Story = {
+  args: {
+    variant: 'primary',
+    size: 'sm',
+    children: 'Small Button',
+  },
+};

libs/ui/src/index.css

@@ -0,0 +1,120 @@
+@import url('https://fonts.googleapis.com/css2?family=Bai+Jamjuree:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;1,200;1,300;1,400;1,500;1,600;1,700&display=swap');
+@import 'tailwindcss';
+
+@theme {
+  --color-primary-50: #f0f8ff;
+  --color-primary-100: #e1f0fd;
+  --color-primary-200: #b8e1f8;
+  --color-primary-300: #a1d4f0;
+  --color-primary-400: #4aa4da;
+  --color-primary-500: #1a8ce6;
+  --color-primary-600: #1673c7;
+  --color-primary-700: #0f5ca5;
+  --color-primary-800: #0a4780;
+  --color-primary-900: #04305d;
+
+  --color-neutral-50: #f7f7f7;
+  --color-neutral-100: #e7e7e7;
+  --color-neutral-200: #d0d0d0;
+  --color-neutral-300: #b7b7b7;
+  --color-neutral-400: #9f9f9f;
+  --color-neutral-500: #7e7e7e;
+  --color-neutral-600: #5d5d5d;
+  --color-neutral-700: #4a4a4a;
+  --color-neutral-800: #3a3a3a;
+  --color-neutral-900: #2f2f2f;
+
+  --color-success-50: #e7f2ee;
+  --color-success-100: #cde6dd;
+  --color-success-200: #9bccbc;
+  --color-success-300: #78bdab;
+  --color-success-400: #4ca88f;
+  --color-success-500: #349078;
+  --color-success-600: #2f7c66;
+  --color-success-700: #26624f;
+  --color-success-800: #1e4a3b;
+  --color-success-900: #1b513b;
+
+  --color-info-50: #e7f4f5;
+  --color-info-100: #cce9ea;
+  --color-info-200: #99d3d5;
+  --color-info-300: #78c4c7;
+  --color-info-400: #3aa9ad;
+  --color-info-500: #279599;
+  --color-info-600: #207d82;
+  --color-info-700: #1a666b;
+  --color-info-800: #124c52;
+  --color-info-900: #093d43;
+
+  --color-warning-50: #fffce6;
+  --color-warning-100: #fff8cc;
+  --color-warning-200: #fef39b;
+  --color-warning-300: #fde967;
+  --color-warning-400: #fbd93d;
+  --color-warning-500: #f3c215;
+  --color-warning-600: #d7a20f;
+  --color-warning-700: #aa7e0c;
+  --color-warning-800: #805c07;
+  --color-warning-900: #665c00;
+
+  --color-danger-50: #ffe7e7;
+  --color-danger-100: #ffcece;
+  --color-danger-200: #ff9f9f;
+  --color-danger-300: #ff6e6e;
+  --color-danger-400: #fa4646;
+  --color-danger-500: #ef1f1f;
+  --color-danger-600: #d11515;
+  --color-danger-700: #a51111;
+  --color-danger-800: #7f0c0c;
+  --color-danger-900: #5d2d2d;
+
+  --radius-none: 0px;
+  --radius-sm: 2px;
+  --radius-md: 4px;
+  --radius-lg: 8px;
+  --radius-xl: 12px;
+  --radius-2xl: 16px;
+  --radius-3xl: 24px;
+  --radius-full: 50%;
+
+  --font-bai-jamjuree: 'Bai Jamjuree', sans-serif;
+
+  --text-h1: 3rem; /* ~48px */
+  --text-h2: 2.4rem; /* ~38.4px */
+  --text-h3: 1.92rem; /* ~30.72px */
+  --text-p1: 1.54rem; /* ~24.58px */
+  --text-p2: 1.23rem; /* ~19.68px */
+  --text-label1: 0.98rem; /* ~15.74px */
+  --text-label2: 0.78rem; /* ~12.59px */
+}
+
+@layer base {
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--color-neutral-200, currentColor);
+  }
+
+  /* Custom scrollbar */
+  ::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+  }
+  ::-webkit-scrollbar-track {
+    background: var(--color-neutral-50);
+  }
+  ::-webkit-scrollbar-thumb {
+    background: #cccccc;
+    border-radius: 3px;
+  }
+  ::-webkit-scrollbar-thumb:hover {
+    background: var(--color-neutral-300);
+  }
+
+  html {
+    font-family: 'Bai Jamjuree', sans-serif;
+    font-weight: 400;
+  }
+}

libs/ui/src/organisms/navbar/navbar.stories.tsx

@@ -0,0 +1,23 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { BrowserRouter } from 'react-router-dom';
+import { Navbar } from './navbar';
+
+const meta: Meta<typeof Navbar> = {
+  title: 'Components/Navbar',
+  component: Navbar,
+  argTypes: {},
+  decorators: [
+    (Story) => (
+      <BrowserRouter>
+        <div className="min-h-screen bg-gray-100 p-4">
+          <Story />
+        </div>
+      </BrowserRouter>
+    ),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof Navbar>;
+
+export const Default: Story = {};

libs/ui/tsconfig.json

@@ -15,6 +15,9 @@
     },
     {
       "path": "./tsconfig.spec.json"
+    },
+    {
+      "path": "./tsconfig.storybook.json"
     }
   ],
   "extends": "../../tsconfig.base.json"

libs/ui/tsconfig.lib.json

@@ -29,7 +29,11 @@
     "src/**/*.test.js",
     "src/**/*.spec.js",
     "src/**/*.test.jsx",
-    "src/**/*.spec.jsx"
+    "src/**/*.spec.jsx",
+    "**/*.stories.ts",
+    "**/*.stories.js",
+    "**/*.stories.jsx",
+    "**/*.stories.tsx"
   ],
   "include": ["src/**/*.js", "src/**/*.jsx", "src/**/*.ts", "src/**/*.tsx"]
 }

libs/ui/tsconfig.storybook.json

@@ -0,0 +1,31 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "emitDecoratorMetadata": true,
+    "outDir": ""
+  },
+  "exclude": [
+    "src/**/*.spec.ts",
+    "src/**/*.test.ts",
+    "src/**/*.spec.js",
+    "src/**/*.test.js",
+    "src/**/*.spec.tsx",
+    "src/**/*.test.tsx",
+    "src/**/*.spec.jsx",
+    "src/**/*.test.js"
+  ],
+  "include": [
+    "src/**/*.stories.ts",
+    "src/**/*.stories.js",
+    "src/**/*.stories.jsx",
+    "src/**/*.stories.tsx",
+    "src/**/*.stories.mdx",
+    ".storybook/*.js",
+    ".storybook/*.ts"
+  ],
+  "files": [
+    "../../node_modules/@nx/react/typings/styled-jsx.d.ts",
+    "../../node_modules/@nx/react/typings/cssmodule.d.ts",
+    "../../node_modules/@nx/react/typings/image.d.ts"
+  ]
+}

nx.json

@@ -9,7 +9,10 @@
       "!{projectRoot}/eslint.config.mjs",
       "!{projectRoot}/**/?(*.)+(spec|test).[jt]s?(x)?(.snap)",
       "!{projectRoot}/tsconfig.spec.json",
-      "!{projectRoot}/src/test-setup.[jt]s"
+      "!{projectRoot}/src/test-setup.[jt]s",
+      "!{projectRoot}/**/*.stories.@(js|jsx|ts|tsx|mdx)",
+      "!{projectRoot}/.storybook/**/*",
+      "!{projectRoot}/tsconfig.storybook.json"
     ],
     "sharedGlobals": []
   },
@@ -33,6 +36,15 @@
         "buildDepsTargetName": "build-deps",
         "watchDepsTargetName": "watch-deps"
       }
+    },
+    {
+      "plugin": "@nx/storybook/plugin",
+      "options": {
+        "serveStorybookTargetName": "storybook",
+        "buildStorybookTargetName": "build-storybook",
+        "testStorybookTargetName": "test-storybook",
+        "staticStorybookTargetName": "static-storybook"
+      }
     }
   ],
   "generators": {

package.json

@@ -10,7 +10,8 @@
     "dimentorin:build": "nx build dimentorin",
     "dimentorin:prod": "serve ./dist/apps/dimentorin",
     "ui:test": "nx test ui",
-    "ui:build": "nx build ui"
+    "ui:build": "nx build ui",
+    "ui:storybook": "nx storybook ui"
   },
   "private": true,
   "dependencies": {
@@ -29,12 +30,19 @@
     "@eslint/js": "^9.8.0",
     "@nx/eslint": "20.5.0",
     "@nx/eslint-plugin": "20.5.0",
-    "@nx/js": "20.5.0",
+    "@nx/js": "20.6.0",
     "@nx/react": "20.5.0",
     "@nx/storybook": "^20.6.0",
     "@nx/vite": "20.5.0",
-    "@nx/web": "20.5.0",
+    "@nx/web": "20.6.0",
     "@nx/workspace": "20.5.0",
+    "@storybook/addon-essentials": "^8.4.6",
+    "@storybook/addon-interactions": "^8.4.6",
+    "@storybook/core-server": "^8.4.6",
+    "@storybook/jest": "^0.2.3",
+    "@storybook/react-vite": "^8.4.6",
+    "@storybook/test-runner": "^0.19.0",
+    "@storybook/testing-library": "^0.2.2",
     "@swc-node/register": "~1.9.1",
     "@swc/cli": "~0.3.12",
     "@swc/core": "~1.5.7",
@@ -63,7 +71,9 @@
     "postcss": "^8.5.3",
     "prettier": "^2.6.2",
     "serve": "^14.2.4",
+    "storybook": "^8.4.6",
     "tailwindcss": "^4.0.13",
+    "ts-node": "10.9.1",
     "tslib": "^2.3.0",
     "typescript": "~5.7.2",
     "typescript-eslint": "^8.19.0",