ADS3-Design-System/src/components/atoms/Tabs/Tabs.stories.tsx

import type { Meta, StoryObj } from '@storybook/react'
import { useState } from 'react'
import { Tabs, TabList, Tab, TabPanel } from './Tabs'

const meta: Meta<typeof Tabs> = {
  title: 'Atoms/Tabs',
  component: Tabs,
  tags: ['autodocs'],
  parameters: { layout: 'padded' },
}

export default meta
type Story = StoryObj<typeof Tabs>

const BasicTemplate = () => {
  const [value, setValue] = useState('tab1')
  return (
    <Tabs value={value} onChange={setValue}>
      <TabList>
        <Tab value="tab1">Overview</Tab>
        <Tab value="tab2">Details</Tab>
        <Tab value="tab3">History</Tab>
      </TabList>
      <TabPanel value="tab1">Overview content goes here.</TabPanel>
      <TabPanel value="tab2">Details content goes here.</TabPanel>
      <TabPanel value="tab3">History content goes here.</TabPanel>
    </Tabs>
  )
}

export const Default: Story = {
  render: () => <BasicTemplate />,
}

const WithIconsTemplate = () => {
  const [value, setValue] = useState('status')

  const StatusIcon = () => (
    <svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" /></svg>
  )
  const DetailsIcon = () => (
    <svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z" /></svg>
  )

  return (
    <Tabs value={value} onChange={setValue}>
      <TabList>
        <Tab value="status" icon={<StatusIcon />}>Status</Tab>
        <Tab value="details" icon={<DetailsIcon />}>Details</Tab>
        <Tab value="disabled" disabled>Disabled</Tab>
      </TabList>
      <TabPanel value="status">Status panel content.</TabPanel>
      <TabPanel value="details">Details panel content.</TabPanel>
    </Tabs>
  )
}

export const WithIcons: Story = {
  name: 'With icons',
  render: () => <WithIconsTemplate />,
}

const ManyTabsTemplate = () => {
  const [value, setValue] = useState('tab1')
  return (
    <Tabs value={value} onChange={setValue}>
      <TabList>
        {Array.from({ length: 8 }, (_, i) => (
          <Tab key={i} value={`tab${i + 1}`}>Tab {i + 1}</Tab>
        ))}
      </TabList>
      {Array.from({ length: 8 }, (_, i) => (
        <TabPanel key={i} value={`tab${i + 1}`}>Content for tab {i + 1}</TabPanel>
      ))}
    </Tabs>
  )
}

export const ManyTabs: Story = {
  name: 'Many tabs',
  render: () => <ManyTabsTemplate />,
}