feat(storybook): add stories for 39 components

Stories organised into sidebar categories:
- Forms: Button, ButtonDropdown, Checkbox, CheckboxGroup, GhostInput,
         Radio, Switch
- Feedback: Banner, EmptyState, InfoMessage, Loader, WarningMessage
- Navigation: Breadcrumb, NavSubLink, SidebarLink, Tabs
- Layout: AccordionCard, Card, FormGroup, PageTitle, Panel, Row
- Data Display: BooleanDotIndicator, ClearFilters, Confidence,
                DropdownMenu, IdentifierString, LabelWithTooltip,
                Logo, SettingTitle, StatItem, ToggleChip, Tooltip,
                VCSProviderTag
- Modals: Modal (Alert, Header, CloseButton), ModalDefault
- Patterns: SettingRow, Skeleton
- Icons: Icons catalogue

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: talissoncosta

frontend/documentation/components/AccordionCard.stories.tsx

@@ -0,0 +1,28 @@
+import React from 'react'
+import type { Meta, StoryObj } from 'storybook'
+
+import AccordionCard from 'components/base/accordion/AccordionCard'
+
+const meta: Meta = {
+  parameters: { layout: 'padded' },
+  title: 'Components/Layout/AccordionCard',
+}
+export default meta
+
+type Story = StoryObj
+
+export const Default: Story = {
+  render: () => (
+    <AccordionCard title='Summary'>
+      <p className='mb-0'>Accordion content goes here.</p>
+    </AccordionCard>
+  ),
+}
+
+export const DefaultOpen: Story = {
+  render: () => (
+    <AccordionCard title='Details' defaultOpen>
+      <p className='mb-0'>This accordion starts open.</p>
+    </AccordionCard>
+  ),
+}

frontend/documentation/components/Banner.stories.tsx

@@ -24,7 +24,7 @@ const meta: Meta<BannerProps> = {
   },
   component: Banner,
   parameters: { layout: 'padded' },
-  title: 'Components/Banner',
+  title: 'Components/Feedback/Banner',
 }
 
 export default meta

frontend/documentation/components/BooleanDotIndicator.stories.tsx

@@ -0,0 +1,33 @@
+import React from 'react'
+import type { Meta, StoryObj } from 'storybook'
+
+import BooleanDotIndicator from 'components/BooleanDotIndicator'
+
+const meta: Meta = {
+  parameters: { layout: 'centered' },
+  title: 'Components/Data Display/BooleanDotIndicator',
+}
+export default meta
+
+type Story = StoryObj
+
+export const Enabled: Story = {
+  render: () => <BooleanDotIndicator enabled />,
+}
+
+export const Disabled: Story = {
+  render: () => <BooleanDotIndicator enabled={false} />,
+}
+
+export const AllStates: Story = {
+  render: () => (
+    <div style={{ alignItems: 'center', display: 'flex', gap: 16 }}>
+      <div style={{ alignItems: 'center', display: 'flex', gap: 6 }}>
+        <BooleanDotIndicator enabled /> Enabled
+      </div>
+      <div style={{ alignItems: 'center', display: 'flex', gap: 6 }}>
+        <BooleanDotIndicator enabled={false} /> Disabled
+      </div>
+    </div>
+  ),
+}

frontend/documentation/components/Breadcrumb.stories.tsx

@@ -0,0 +1,38 @@
+import React from 'react'
+import type { Meta, StoryObj } from 'storybook'
+import { MemoryRouter } from 'react-router-dom'
+
+import Breadcrumb from 'components/Breadcrumb'
+
+const meta: Meta = {
+  decorators: [
+    (Story) => (
+      <MemoryRouter>
+        <Story />
+      </MemoryRouter>
+    ),
+  ],
+  parameters: { layout: 'padded' },
+  title: 'Components/Navigation/Breadcrumb',
+}
+export default meta
+
+type Story = StoryObj
+
+export const Default: Story = {
+  render: () => (
+    <Breadcrumb
+      items={[
+        { title: 'Projects', url: '/projects' },
+        { title: 'My Project', url: '/project/1' },
+      ]}
+      currentPage='Features'
+    />
+  ),
+}
+
+export const SingleLevel: Story = {
+  render: () => (
+    <Breadcrumb items={[{ title: 'Home', url: '/' }]} currentPage='Settings' />
+  ),
+}

frontend/documentation/components/Button.stories.tsx

@@ -46,7 +46,7 @@ const meta: Meta<ButtonType> = {
   },
   component: Button,
   parameters: { layout: 'centered' },
-  title: 'Components/Button',
+  title: 'Components/Forms/Button',
 }
 
 export default meta

frontend/documentation/components/ButtonDropdown.stories.tsx

@@ -0,0 +1,26 @@
+import React from 'react'
+import type { Meta, StoryObj } from 'storybook'
+
+import ButtonDropdown from 'components/base/forms/ButtonDropdown'
+
+const meta: Meta = {
+  parameters: { layout: 'centered' },
+  title: 'Components/Forms/ButtonDropdown',
+}
+export default meta
+
+type Story = StoryObj
+
+export const Default: Story = {
+  render: () => (
+    <ButtonDropdown
+      dropdownItems={[
+        { label: 'Edit', onClick: () => {} },
+        { label: 'Duplicate', onClick: () => {} },
+        { label: 'Delete', onClick: () => {} },
+      ]}
+    >
+      Actions
+    </ButtonDropdown>
+  ),
+}

frontend/documentation/components/Card.stories.tsx

@@ -0,0 +1,32 @@
+import React from 'react'
+import type { Meta, StoryObj } from 'storybook'
+
+import Card from 'components/Card'
+
+const meta: Meta = {
+  parameters: { layout: 'padded' },
+  title: 'Components/Layout/Card',
+}
+export default meta
+
+type Story = StoryObj
+
+export const Default: Story = {
+  render: () => (
+    <Card>
+      <h5>Card title</h5>
+      <p className='text-secondary mb-0'>Card content goes here.</p>
+    </Card>
+  ),
+}
+
+export const Nested: Story = {
+  render: () => (
+    <Card>
+      <h5>Outer card</h5>
+      <Card className='mt-3'>
+        <p className='mb-0'>Nested card content.</p>
+      </Card>
+    </Card>
+  ),
+}

frontend/documentation/components/Checkbox.stories.tsx

@@ -0,0 +1,32 @@
+import React, { useState } from 'react'
+import type { Meta, StoryObj } from 'storybook'
+
+import Checkbox from 'components/base/forms/Checkbox'
+
+const meta: Meta = {
+  parameters: { layout: 'centered' },
+  title: 'Components/Forms/Checkbox',
+}
+export default meta
+
+type Story = StoryObj
+
+const InteractiveCheckbox = () => {
+  const [checked, setChecked] = useState(false)
+  return (
+    <Checkbox label='Accept terms' checked={checked} onChange={setChecked} />
+  )
+}
+
+export const Default: Story = {
+  render: () => <InteractiveCheckbox />,
+}
+
+export const States: Story = {
+  render: () => (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
+      <Checkbox label='Unchecked' checked={false} onChange={() => {}} />
+      <Checkbox label='Checked' checked={true} onChange={() => {}} />
+    </div>
+  ),
+}

frontend/documentation/components/CheckboxGroup.stories.tsx

@@ -0,0 +1,49 @@
+import React, { useState } from 'react'
+import type { Meta, StoryObj } from 'storybook'
+
+import CheckboxGroup from 'components/base/forms/CheckboxGroup'
+
+const meta: Meta = {
+  parameters: { layout: 'centered' },
+  title: 'Components/Forms/CheckboxGroup',
+}
+export default meta
+
+type Story = StoryObj
+
+const items = [
+  { label: 'Read', value: 'read' },
+  { label: 'Write', value: 'write' },
+  { label: 'Admin', value: 'admin' },
+]
+
+const Interactive = () => {
+  const [selected, setSelected] = useState<string[]>(['read'])
+  return (
+    <CheckboxGroup
+      items={items}
+      selectedValues={selected}
+      onChange={setSelected}
+    />
+  )
+}
+
+export const Default: Story = {
+  render: () => <Interactive />,
+}
+
+export const AllSelected: Story = {
+  render: () => (
+    <CheckboxGroup
+      items={items}
+      selectedValues={['read', 'write', 'admin']}
+      onChange={() => {}}
+    />
+  ),
+}
+
+export const NoneSelected: Story = {
+  render: () => (
+    <CheckboxGroup items={items} selectedValues={[]} onChange={() => {}} />
+  ),
+}

frontend/documentation/components/ClearFilters.stories.tsx

@@ -0,0 +1,16 @@
+import React from 'react'
+import type { Meta, StoryObj } from 'storybook'
+
+import ClearFilters from 'components/ClearFilters'
+
+const meta: Meta = {
+  parameters: { layout: 'centered' },
+  title: 'Components/Data Display/ClearFilters',
+}
+export default meta
+
+type Story = StoryObj
+
+export const Default: Story = {
+  render: () => <ClearFilters onClick={() => {}} />,
+}