@liguelead/design-system 0.0.28 → 0.0.30

package/components/InputOpt/InputOpt.stories.tsx

@@ -0,0 +1,61 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import InputOpt from './InputOpt'
+
+const meta: Meta<typeof InputOpt> = {
+  title: 'Form/InputOpt',
+  component: InputOpt,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    length: {
+      control: 'number',
+      description: 'Number of input fields'
+    },
+    label: {
+      control: 'text',
+      description: 'Input label'
+    },
+    helperText: {
+      control: 'text',
+      description: 'Helper text below input'
+    },
+    placeholderChar: {
+      control: 'text',
+      description: 'Placeholder character for empty fields'
+    },
+    inputMode: {
+      control: 'select',
+      options: ['numeric', 'text'],
+      description: 'Input mode for mobile keyboards'
+    },
+    autoFocus: {
+      control: 'boolean',
+      description: 'Auto focus first input on mount'
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Whether inputs are disabled'
+    },
+    requiredSymbol: {
+      control: 'boolean',
+      description: 'Show required asterisk'
+    },
+    error: {
+      control: 'boolean',
+      description: 'Whether inputs have error state'
+    }
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    label: 'Verification Code',
+    length: 6,
+  },
+}
+

package/components/LinkButton/LinkButton.stories.tsx

@@ -0,0 +1,88 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import LinkButton from './LinkButton'
+import { themes } from '@liguelead/foundation'
+import { iconMap, iconOptions } from '../../../stories/utils/icons'
+
+type ColorTypes = NonNullable<React.ComponentProps<typeof LinkButton>['color']>
+
+const themeColors = Object.keys(themes.spa.colors) as ColorTypes[]
+
+const meta: Meta<typeof LinkButton> = {
+  title: 'Navigation/LinkButton',
+  component: LinkButton,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    href: {
+      control: 'text',
+      description: 'Link URL'
+    },
+    children: {
+      control: 'text',
+      description: 'Link content'
+    },
+    size: {
+      control: 'select',
+      options: ['sm', 'md', 'lg'],
+      description: 'Size of the link button'
+    },
+    color: {
+      control: 'select',
+      options: themeColors,
+      description: 'Color theme of the link button'
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Whether the link button is disabled'
+    },
+    fullWidth: {
+      control: 'boolean',
+      description: 'Whether the link button takes full width'
+    },
+    leftIcon: {
+      control: 'select',
+      options: iconOptions,
+      description: 'Left icon',
+    },
+    rightIcon: {
+      control: 'select',
+      options: iconOptions,
+      description: 'Right icon',
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+export const Default: Story = {
+  args: {
+    href: '#',
+    children: 'Link Button',
+    size: 'md',
+    color: themeColors[0],
+    disabled: false,
+    fullWidth: false,
+    leftIcon: 'none',
+    rightIcon: 'none',
+  },
+  render: (args) => {
+    const leftIcon = args.leftIcon === 'none' ? undefined : iconMap[args.leftIcon as keyof typeof iconMap]
+    const rightIcon = args.rightIcon === 'none' ? undefined : iconMap[args.rightIcon as keyof typeof iconMap]
+    
+    return (
+      <LinkButton
+        href={args.href}
+        leftIcon={leftIcon}
+        rightIcon={rightIcon}
+        size={args.size}
+        color={args.color}
+        disabled={args.disabled}
+        fullWidth={args.fullWidth}
+      >
+        {args.children}
+      </LinkButton>
+    )
+  },
+}

package/components/PageWrapper/PageWrapper.stories.tsx

@@ -0,0 +1,153 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import PageWrapper from './PageWrapper'
+import Text from '../Text/Text'
+import Button from '../Button/Button'
+
+const meta: Meta<typeof PageWrapper> = {
+  title: 'Layout/PageWrapper',
+  component: PageWrapper,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    width: {
+      control: 'text',
+      description: 'Maximum width of the wrapper (in pixels)'
+    },
+    bgColor: {
+      control: 'select',
+      options: ['primary', 'secondary', 'success', 'warning', 'error', 'white', 'neutral100', 'neutral200'],
+      description: 'Background color'
+    },
+    padding: {
+      control: 'select',
+      options: ['spacing8', 'spacing12', 'spacing16', 'spacing20', 'spacing24', 'spacing32'],
+      description: 'Internal padding'
+    }
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    children: (
+      <div>
+        <Text size="heading02">Page Content</Text>
+        <Text style={{ marginTop: '16px' }}>
+          This is the content inside the page wrapper. It provides consistent spacing and layout.
+        </Text>
+      </div>
+    ),
+  },
+}
+
+export const WithMaxWidth: Story = {
+  args: {
+    width: '800',
+    children: (
+      <div>
+        <Text size="heading02">Constrained Width</Text>
+        <Text style={{ marginTop: '16px' }}>
+          This wrapper has a maximum width of 800px and will be centered on larger screens.
+        </Text>
+      </div>
+    ),
+  },
+}
+
+export const DifferentBackgrounds: Story = {
+  render: () => (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '16px', padding: '16px' }}>
+      <PageWrapper bgColor="white">
+        <Text size="heading03">White Background</Text>
+        <Text>Default white background wrapper.</Text>
+      </PageWrapper>
+      
+      <PageWrapper bgColor="neutral100">
+        <Text size="heading03">Neutral Background</Text>
+        <Text>Light neutral background wrapper.</Text>
+      </PageWrapper>
+      
+      <PageWrapper bgColor="primary" style={{ color: 'white' }}>
+        <Text size="heading03" style={{ color: 'white' }}>Primary Background</Text>
+        <Text style={{ color: 'white' }}>Primary colored background wrapper.</Text>
+      </PageWrapper>
+    </div>
+  ),
+}
+
+export const DifferentPadding: Story = {
+  render: () => (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '16px', padding: '16px' }}>
+      <PageWrapper padding="spacing8">
+        <Text size="heading03">Small Padding</Text>
+        <Text>This wrapper has small padding (8px).</Text>
+      </PageWrapper>
+      
+      <PageWrapper padding="spacing16">
+        <Text size="heading03">Medium Padding</Text>
+        <Text>This wrapper has medium padding (16px).</Text>
+      </PageWrapper>
+      
+      <PageWrapper padding="spacing32">
+        <Text size="heading03">Large Padding</Text>
+        <Text>This wrapper has large padding (32px).</Text>
+      </PageWrapper>
+    </div>
+  ),
+}
+
+export const FormLayout: Story = {
+  args: {
+    width: '600',
+    padding: 'spacing24',
+    children: (
+      <div>
+        <Text size="heading02" style={{ marginBottom: '24px' }}>Contact Form</Text>
+        <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
+          <div>
+            <Text tag="label">Name</Text>
+            <input style={{ width: '100%', padding: '8px', marginTop: '4px' }} />
+          </div>
+          <div>
+            <Text tag="label">Email</Text>
+            <input type="email" style={{ width: '100%', padding: '8px', marginTop: '4px' }} />
+          </div>
+          <div>
+            <Text tag="label">Message</Text>
+            <textarea style={{ width: '100%', padding: '8px', marginTop: '4px', minHeight: '100px' }} />
+          </div>
+          <Button style={{ marginTop: '16px' }}>Submit</Button>
+        </div>
+      </div>
+    ),
+  },
+}
+
+export const DashboardLayout: Story = {
+  args: {
+    width: '1200',
+    children: (
+      <div>
+        <Text size="heading01" style={{ marginBottom: '24px' }}>Dashboard</Text>
+        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(250px, 1fr))', gap: '16px' }}>
+          <div style={{ padding: '16px', border: '1px solid #e0e0e0', borderRadius: '4px' }}>
+            <Text size="heading03">Widget 1</Text>
+            <Text>Some dashboard content here.</Text>
+          </div>
+          <div style={{ padding: '16px', border: '1px solid #e0e0e0', borderRadius: '4px' }}>
+            <Text size="heading03">Widget 2</Text>
+            <Text>More dashboard content here.</Text>
+          </div>
+          <div style={{ padding: '16px', border: '1px solid #e0e0e0', borderRadius: '4px' }}>
+            <Text size="heading03">Widget 3</Text>
+            <Text>Additional dashboard content.</Text>
+          </div>
+        </div>
+      </div>
+    ),
+  },
+}

package/components/RadioButton/RadioButton.stories.tsx

@@ -0,0 +1,70 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import RadioButton from './RadioButton'
+import { iconMap, iconOptions } from '../../../stories/utils/icons'
+
+const meta: Meta<typeof RadioButton> = {
+  title: 'Form/RadioButton',
+  component: RadioButton,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    label: {
+      control: 'text',
+      description: 'Radio button label'
+    },
+    description: {
+      control: 'text',
+      description: 'Radio button description'
+    },
+    value: {
+      control: 'text',
+      description: 'Radio button value'
+    },
+    variant: {
+      control: 'select',
+      options: ['default', 'box'],
+      description: 'Radio button variant'
+    },
+    checked: {
+      control: 'boolean',
+      description: 'Whether radio is checked'
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Whether radio is disabled'
+    },
+    rightIcon: {
+      control: 'select',
+      options: iconOptions,
+      description: 'Right icon',
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    label: 'Radio Option',
+    value: 'option1',
+    rightIcon: 'none',
+  },
+  render: (args) => {
+    const rightIcon = args.rightIcon === 'none' ? undefined : iconMap[args.rightIcon as keyof typeof iconMap]
+    
+    return (
+      <RadioButton
+        label={args.label}
+        value={args.value}
+        description={args.description}
+        variant={args.variant}
+        checked={args.checked}
+        disabled={args.disabled}
+        rightIcon={rightIcon}
+      />
+    )
+  },
+}

package/components/RequiredAsterisk/RequiredAsterisk.stories.tsx

@@ -0,0 +1,44 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import RequiredAsterisk from './RequiredAsterisk'
+import Text from '../Text/Text'
+
+const meta: Meta<typeof RequiredAsterisk> = {
+  title: 'Data Display/RequiredAsterisk',
+  component: RequiredAsterisk,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {}
+
+export const WithLabel: Story = {
+  render: () => (
+    <div style={{ display: 'flex', alignItems: 'center', gap: '4px' }}>
+      <Text tag="label">Field Label</Text>
+      <RequiredAsterisk />
+    </div>
+  ),
+}
+
+export const InForm: Story = {
+  render: () => (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
+      <div style={{ display: 'flex', alignItems: 'center', gap: '4px' }}>
+        <Text tag="label">Required Field</Text>
+        <RequiredAsterisk />
+      </div>
+      <div style={{ display: 'flex', alignItems: 'center', gap: '4px' }}>
+        <Text tag="label">Another Required Field</Text>
+        <RequiredAsterisk />
+      </div>
+      <div>
+        <Text tag="label">Optional Field</Text>
+      </div>
+    </div>
+  ),
+}

package/components/SegmentedButton/SegmentedButton.stories.tsx

@@ -0,0 +1,182 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { useState } from 'react'
+import SegmentedButton from './SegmentedButton'
+
+const meta: Meta<typeof SegmentedButton> = {
+  title: 'Form/SegmentedButton',
+  component: SegmentedButton,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: 'select',
+      options: ['sm', 'md', 'lg'],
+      description: 'Size of the segmented button'
+    },
+    color: {
+      control: 'select',
+      options: ['primary', 'secondary', 'success', 'warning', 'error'],
+      description: 'Color theme of the segmented button'
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Whether the segmented button is disabled'
+    }
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    options: {
+      leftButton: { label: 'Left' },
+      rightButton: { label: 'Right' }
+    }
+  },
+}
+
+export const Interactive: Story = {
+  render: (args) => {
+    const [selected, setSelected] = useState<'left' | 'right'>('left')
+    
+    return (
+      <div>
+        <SegmentedButton
+          {...args}
+          options={{
+            leftButton: { 
+              label: 'Option A',
+              action: () => setSelected('left')
+            },
+            rightButton: { 
+              label: 'Option B',
+              action: () => setSelected('right')
+            }
+          }}
+        />
+        <p style={{ marginTop: '16px', fontSize: '14px' }}>
+          Selected: {selected === 'left' ? 'Option A' : 'Option B'}
+        </p>
+      </div>
+    )
+  },
+}
+
+export const Sizes: Story = {
+  render: () => (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '16px', alignItems: 'center' }}>
+      <SegmentedButton
+        size="sm"
+        options={{
+          leftButton: { label: 'Small' },
+          rightButton: { label: 'Small' }
+        }}
+      />
+      <SegmentedButton
+        size="md"
+        options={{
+          leftButton: { label: 'Medium' },
+          rightButton: { label: 'Medium' }
+        }}
+      />
+      <SegmentedButton
+        size="lg"
+        options={{
+          leftButton: { label: 'Large' },
+          rightButton: { label: 'Large' }
+        }}
+      />
+    </div>
+  ),
+}
+
+export const Colors: Story = {
+  render: () => (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '16px', alignItems: 'center' }}>
+      <SegmentedButton
+        color="primary"
+        options={{
+          leftButton: { label: 'Primary' },
+          rightButton: { label: 'Primary' }
+        }}
+      />
+      <SegmentedButton
+        color="secondary"
+        options={{
+          leftButton: { label: 'Secondary' },
+          rightButton: { label: 'Secondary' }
+        }}
+      />
+      <SegmentedButton
+        color="success50"
+        options={{
+          leftButton: { label: 'Success' },
+          rightButton: { label: 'Success' }
+        }}
+      />
+    </div>
+  ),
+}
+
+export const ViewToggle: Story = {
+  render: () => {
+    const [, setView] = useState<'list' | 'grid'>('list')
+    
+    return (
+      <SegmentedButton
+        options={{
+          leftButton: { 
+            label: 'List View',
+            action: () => setView('list')
+          },
+          rightButton: { 
+            label: 'Grid View',
+            action: () => setView('grid')
+          }
+        }}
+      />
+    )
+  },
+}
+
+export const Disabled: Story = {
+  args: {
+    disabled: true,
+    options: {
+      leftButton: { label: 'Disabled' },
+      rightButton: { label: 'Disabled' }
+    }
+  },
+}
+
+export const YesNo: Story = {
+  render: () => {
+    const [answer, setAnswer] = useState<'yes' | 'no' | null>(null)
+    
+    return (
+      <div>
+        <SegmentedButton
+          options={{
+            leftButton: { 
+              label: 'Yes',
+              action: () => setAnswer('yes')
+            },
+            rightButton: { 
+              label: 'No',
+              action: () => setAnswer('no')
+            }
+          }}
+        />
+        {answer && (
+          <p style={{ marginTop: '16px', fontSize: '14px' }}>
+            Answer: {answer}
+          </p>
+        )}
+      </div>
+    )
+  },
+}

package/components/Select/Select.stories.tsx

@@ -0,0 +1,63 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import Select from './Select'
+
+const meta: Meta<typeof Select> = {
+  title: 'Form/Select',
+  component: Select,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  args: {
+    options: [],
+  },
+  argTypes: {
+    label: {
+      control: 'text',
+      description: 'Select label',
+    },
+    placeholder: {
+      control: 'text',
+      description: 'Select placeholder',
+    },
+    helperText: {
+      control: 'text',
+      description: 'Helper text below select',
+    },
+    size: {
+      control: 'select',
+      options: ['sm', 'md', 'lg'],
+      description: 'Select size',
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Whether select is disabled',
+    },
+    requiredSymbol: {
+      control: 'boolean',
+      description: 'Show required asterisk',
+    },
+    options: {
+      control: 'object',
+      description: 'Options for the select dropdown',
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+const defaultOptions = [
+  { label: 'Option 1', value: 'option1' },
+  { label: 'Option 2', value: 'option2' },
+  { label: 'Option 3', value: 'option3' },
+  { label: 'Option 4', value: 'option4' },
+]
+
+export const Default: Story = {
+  args: {
+    label: 'Select an option',
+    placeholder: 'Choose...',
+    options: defaultOptions,
+  },
+}