design system token v0.1

2026-04-13 15:33:00 -05:00
parent 52b4156653
commit c3215945f2
63 changed files with 11562 additions and 181 deletions
--- a/stories/Composition/Section.stories.tsx
+++ b/stories/Composition/Section.stories.tsx
@@ -0,0 +1,135 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { Section } from '@/components/ui/section'
+import {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  CardContent,
+} from '@/components/ui/card'
+
+const meta = {
+  title: 'Composition/Section',
+  component: Section,
+  tags: ['autodocs'],
+  parameters: { layout: 'fullscreen' },
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['default', 'highlighted', 'accent'],
+    },
+    width: {
+      control: 'select',
+      options: ['narrow', 'default', 'wide', 'full'],
+    },
+  },
+} satisfies Meta<typeof Section>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+const sampleCards = (
+  <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+    {['Design', 'Develop', 'Deploy'].map((title) => (
+      <Card key={title}>
+        <CardHeader>
+          <CardTitle>{title}</CardTitle>
+          <CardDescription>Description for the {title.toLowerCase()} phase.</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <p className="text-sm text-muted-foreground">
+            Content explaining the {title.toLowerCase()} process in detail.
+          </p>
+        </CardContent>
+      </Card>
+    ))}
+  </div>
+)
+
+export const Default: Story = {
+  args: {
+    title: 'Our Process',
+    description: 'How we build great products from concept to delivery.',
+    children: sampleCards,
+  },
+}
+
+export const Highlighted: Story = {
+  args: {
+    variant: 'highlighted',
+    title: 'Featured Section',
+    description: 'This section uses a highlighted background to stand out.',
+    children: sampleCards,
+  },
+}
+
+export const Accent: Story = {
+  args: {
+    variant: 'accent',
+    title: 'Accent Section',
+    description: 'A subtle accent background to differentiate this area.',
+    children: sampleCards,
+  },
+}
+
+export const Narrow: Story = {
+  args: {
+    width: 'narrow',
+    title: 'Narrow Section',
+    description: 'Constrained width for focused reading.',
+    children: (
+      <p className="text-muted-foreground">
+        This is a narrow section with max-w-3xl. Useful for text-heavy content that
+        benefits from shorter line lengths for readability.
+      </p>
+    ),
+  },
+}
+
+export const Wide: Story = {
+  args: {
+    width: 'wide',
+    title: 'Wide Section',
+    description: 'Extended width for content-rich layouts.',
+    children: sampleCards,
+  },
+}
+
+export const Full: Story = {
+  args: {
+    width: 'full',
+    variant: 'highlighted',
+    title: 'Full Width Section',
+    description: 'Spans the full width of the viewport.',
+    children: sampleCards,
+  },
+}
+
+export const NoHeader: Story = {
+  args: {
+    children: sampleCards,
+  },
+}
+
+export const AllCombinations: Story = {
+  render: () => (
+    <div>
+      {(['default', 'highlighted', 'accent'] as const).map((variant) =>
+        (['narrow', 'default', 'wide'] as const).map((width) => (
+          <Section
+            key={`${variant}-${width}`}
+            variant={variant}
+            width={width}
+            title={`${variant} / ${width}`}
+            description={`Section with variant="${variant}" and width="${width}".`}
+          >
+            <div className="h-20 rounded-lg border-2 border-dashed border-muted-foreground/25 flex items-center justify-center text-sm text-muted-foreground">
+              Content area
+            </div>
+          </Section>
+        )),
+      )}
+    </div>
+  ),
+}