pos-system/apps/web-client/src/components/ui/button.stories.tsx

import type { Meta, StoryObj } from '@storybook/react';
import { Button } from './button';

/**
 * EN: Button component stories
 * VI: Stories cho component Button
 */
const meta: Meta<typeof Button> = {
  title: 'UI/Button',
  component: Button,
  parameters: {
    layout: 'centered',
    docs: {
      description: {
        component:
          'EN: A versatile button component with multiple variants and sizes. / VI: Component button đa năng với nhiều biến thể và kích thước.',
      },
    },
  },
  tags: ['autodocs'],
  argTypes: {
    variant: {
      control: 'select',
      options: ['primary', 'secondary', 'ghost', 'danger'],
      description: 'EN: Button variant / VI: Biến thể button',
    },
    size: {
      control: 'select',
      options: ['xs', 'sm', 'md', 'lg', 'xl'],
      description: 'EN: Button size / VI: Kích thước button',
    },
    loading: {
      control: 'boolean',
      description: 'EN: Show loading spinner / VI: Hiển thị spinner loading',
    },
    disabled: {
      control: 'boolean',
      description: 'EN: Disable button / VI: Vô hiệu hóa button',
    },
  },
};

export default meta;
type Story = StoryObj<typeof Button>;

/**
 * EN: Primary button variant (default)
 * VI: Biến thể button chính (mặc định)
 */
export const Primary: Story = {
  args: {
    variant: 'primary',
    children: 'Button / Nút',
  },
};

/**
 * EN: Secondary button variant
 * VI: Biến thể button phụ
 */
export const Secondary: Story = {
  args: {
    variant: 'secondary',
    children: 'Button / Nút',
  },
};

/**
 * EN: Ghost button variant
 * VI: Biến thể button ghost
 */
export const Ghost: Story = {
  args: {
    variant: 'ghost',
    children: 'Button / Nút',
  },
};

/**
 * EN: Danger button variant
 * VI: Biến thể button nguy hiểm
 */
export const Danger: Story = {
  args: {
    variant: 'danger',
    children: 'Delete / Xóa',
  },
};

/**
 * EN: All button sizes
 * VI: Tất cả kích thước button
 */
export const Sizes: Story = {
  render: () => (
    <div className="flex flex-col gap-4 items-center">
      <div className="flex gap-2 items-center">
        <Button size="xs">Extra Small / Cực nhỏ</Button>
        <Button size="sm">Small / Nhỏ</Button>
        <Button size="md">Medium / Trung bình</Button>
        <Button size="lg">Large / Lớn</Button>
        <Button size="xl">Extra Large / Cực lớn</Button>
      </div>
    </div>
  ),
};

/**
 * EN: Loading state
 * VI: Trạng thái loading
 */
export const Loading: Story = {
  args: {
    loading: true,
    children: 'Loading... / Đang tải...',
  },
};

/**
 * EN: Disabled state
 * VI: Trạng thái vô hiệu hóa
 */
export const Disabled: Story = {
  args: {
    disabled: true,
    children: 'Disabled / Vô hiệu hóa',
  },
};

/**
 * EN: All variants showcase
 * VI: Trưng bày tất cả biến thể
 */
export const AllVariants: Story = {
  render: () => (
    <div className="flex flex-col gap-4">
      <div className="flex gap-2">
        <Button variant="primary">Primary / Chính</Button>
        <Button variant="secondary">Secondary / Phụ</Button>
        <Button variant="ghost">Ghost / Tối giản</Button>
        <Button variant="danger">Danger / Nguy hiểm</Button>
      </div>
    </div>
  ),
};