feat: Tailwind UI 패키지 Storybook 환경 구축

package.json

@@ -12,6 +12,7 @@
     "lint": "turbo lint",
     "format": "prettier --write \"**/*.{ts,tsx,md}\"",
     "sb:panda": "turbo run storybook --filter=@gitanimals/ui-panda",
+    "sb:tailwind": "turbo run storybook --filter=@gitanimals/ui-tailwind",
     "lint-staged": "lint-staged",
     "prepare": "husky"
   },

packages/ui/tailwind/.storybook/globals.css

@@ -0,0 +1,31 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
+
+  body {
+    position: relative;
+  }
+
+  button {
+    cursor: pointer;
+    border: transparent;
+    background-color: transparent;
+    padding: 0;
+    outline: none;
+  }
+}
+
+/* Storybook specific styles */
+.sb-show-main,
+.docs-story {
+  background-color: #2c2929;
+  color: white;
+  min-width: 400px;
+}

packages/ui/tailwind/.storybook/main.ts

@@ -0,0 +1,30 @@
+import type { StorybookConfig } from '@storybook/react-vite';
+import { mergeConfig } from 'vite';
+import { resolve } from 'path';
+
+const config: StorybookConfig = {
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-interactions',
+  ],
+  framework: {
+    name: '@storybook/react-vite',
+    options: {},
+  },
+  docs: {
+    autodocs: 'tag',
+  },
+  viteFinal: async (config) => {
+    return mergeConfig(config, {
+      resolve: {
+        alias: {
+          '@': resolve(__dirname, '../src'),
+        },
+      },
+    });
+  },
+};
+
+export default config;

packages/ui/tailwind/.storybook/preview.ts

@@ -0,0 +1,24 @@
+import type { Preview } from '@storybook/react';
+import './globals.css';
+
+const preview: Preview = {
+  parameters: {
+    actions: { argTypesRegex: '^on[A-Z].*' },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+    backgrounds: {
+      default: 'dark',
+      values: [
+        { name: 'dark', value: '#2c2929' },
+        { name: 'light', value: '#ffffff' },
+        { name: 'gray', value: '#1a1a1a' },
+      ],
+    },
+  },
+};
+
+export default preview;

packages/ui/tailwind/package.json

@@ -41,7 +41,9 @@
     "build": "tsup",
     "dev": "tsup --watch",
     "type-check": "tsc --noEmit",
-    "clean": "rm -rf dist node_modules .turbo"
+    "clean": "rm -rf dist node_modules .turbo",
+    "storybook": "storybook dev -p 6002",
+    "build-storybook": "storybook build"
   },
   "dependencies": {
     "@gitanimals/ui-token": "workspace:*",
@@ -62,14 +64,25 @@
   "devDependencies": {
     "@gitanimals/eslint-config": "workspace:*",
     "@gitanimals/typescript-config": "workspace:*",
+    "@storybook/addon-essentials": "^8.4.7",
+    "@storybook/addon-interactions": "^8.4.7",
+    "@storybook/addon-links": "^8.4.7",
+    "@storybook/blocks": "^8.4.7",
+    "@storybook/react": "^8.4.7",
+    "@storybook/react-vite": "^8.4.7",
+    "@storybook/test": "^8.4.7",
     "@types/node": "^20.11.24",
     "@types/react": "^18.2.61",
     "@types/react-dom": "^18.3.7",
+    "autoprefixer": "^10.4.20",
+    "postcss": "^8.4.49",
     "react": "^18.2.0",
     "react-dom": "^18.3.1",
+    "storybook": "^8.4.7",
     "tailwindcss": "^3.4.17",
     "tsup": "^8.5.1",
-    "typescript": "*"
+    "typescript": "*",
+    "vite": "^5.4.11"
   },
   "peerDependencies": {
     "react": "^18.0.0",

packages/ui/tailwind/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

packages/ui/tailwind/src/components/ui/button.stories.tsx

@@ -0,0 +1,126 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Button, AnchorButton } from './button';
+
+const meta: Meta<typeof Button> = {
+  title: 'UI/Button',
+  component: Button,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['primary', 'secondary'],
+      description: 'Button style variant',
+    },
+    size: {
+      control: 'select',
+      options: ['s', 'm', 'l'],
+      description: 'Button size',
+    },
+    floating: {
+      control: 'boolean',
+      description: 'Fixed floating button at bottom',
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Disabled state',
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {
+  args: {
+    variant: 'primary',
+    size: 'm',
+    children: 'Primary Button',
+  },
+};
+
+export const Secondary: Story = {
+  args: {
+    variant: 'secondary',
+    size: 'm',
+    children: 'Secondary Button',
+  },
+};
+
+export const Small: Story = {
+  args: {
+    variant: 'primary',
+    size: 's',
+    children: 'Small Button',
+  },
+};
+
+export const Medium: Story = {
+  args: {
+    variant: 'primary',
+    size: 'm',
+    children: 'Medium Button',
+  },
+};
+
+export const Large: Story = {
+  args: {
+    variant: 'primary',
+    size: 'l',
+    children: 'Large Button',
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    variant: 'primary',
+    size: 'm',
+    children: 'Disabled Button',
+    disabled: true,
+  },
+};
+
+export const DisabledSecondary: Story = {
+  args: {
+    variant: 'secondary',
+    size: 'm',
+    children: 'Disabled Secondary',
+    disabled: true,
+  },
+};
+
+export const AllVariants: Story = {
+  render: () => (
+    <div className="flex flex-col gap-4">
+      <div className="flex flex-wrap gap-4 items-center">
+        <Button variant="primary" size="s">Primary S</Button>
+        <Button variant="primary" size="m">Primary M</Button>
+        <Button variant="primary" size="l">Primary L</Button>
+      </div>
+      <div className="flex flex-wrap gap-4 items-center">
+        <Button variant="secondary" size="s">Secondary S</Button>
+        <Button variant="secondary" size="m">Secondary M</Button>
+        <Button variant="secondary" size="l">Secondary L</Button>
+      </div>
+      <div className="flex flex-wrap gap-4 items-center">
+        <Button variant="primary" size="m" disabled>Disabled Primary</Button>
+        <Button variant="secondary" size="m" disabled>Disabled Secondary</Button>
+      </div>
+    </div>
+  ),
+};
+
+export const AsAnchor: StoryObj<typeof AnchorButton> = {
+  render: () => (
+    <AnchorButton
+      variant="primary"
+      size="m"
+      href="https://github.com/git-goods/gitanimals"
+      target="_blank"
+    >
+      Visit GitAnimals
+    </AnchorButton>
+  ),
+};

packages/ui/tailwind/src/components/ui/checkbox.stories.tsx

@@ -0,0 +1,76 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Checkbox } from './checkbox';
+import { Label } from './label';
+
+const meta: Meta<typeof Checkbox> = {
+  title: 'UI/Checkbox',
+  component: Checkbox,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    checked: {
+      control: 'boolean',
+      description: 'Checked state',
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Disabled state',
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {},
+};
+
+export const Checked: Story = {
+  args: {
+    defaultChecked: true,
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    disabled: true,
+  },
+};
+
+export const DisabledChecked: Story = {
+  args: {
+    disabled: true,
+    defaultChecked: true,
+  },
+};
+
+export const WithLabel: Story = {
+  render: () => (
+    <div className="flex items-center space-x-2">
+      <Checkbox id="terms" />
+      <Label htmlFor="terms">Accept terms and conditions</Label>
+    </div>
+  ),
+};
+
+export const MultipleCheckboxes: Story = {
+  render: () => (
+    <div className="flex flex-col gap-3">
+      <div className="flex items-center space-x-2">
+        <Checkbox id="option1" defaultChecked />
+        <Label htmlFor="option1">Option 1</Label>
+      </div>
+      <div className="flex items-center space-x-2">
+        <Checkbox id="option2" />
+        <Label htmlFor="option2">Option 2</Label>
+      </div>
+      <div className="flex items-center space-x-2">
+        <Checkbox id="option3" disabled />
+        <Label htmlFor="option3" className="opacity-50">Option 3 (disabled)</Label>
+      </div>
+    </div>
+  ),
+};