ai-design-system 0.1.0

package/components/primitives/Chart/Chart.stories.tsx

@@ -0,0 +1,346 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { ChartContainer, ChartTooltip, ChartTooltipContent, ChartLegend, ChartLegendContent } from './Chart'
+import type { ChartConfig } from './Chart'
+import { BarChart, Bar, LineChart, Line, AreaChart, Area, XAxis, YAxis, CartesianGrid } from 'recharts'
+
+/**
+ * Chart Primitive Stories
+ *
+ * The Chart component is a foundational primitive for data visualizations.
+ * It extends shadcn/ui's Chart with design system-specific enhancements and maintains
+ * full accessibility compliance (WCAG 2.1 Level AA).
+ *
+ * ## Features
+ * - Built on Recharts for powerful visualizations
+ * - Automatic theming with design tokens
+ * - Responsive container
+ * - Accessible tooltips and legends
+ * - Dark mode support
+ *
+ * ## Accessibility
+ * - Proper ARIA labels for charts
+ * - Keyboard navigation support
+ * - Screen reader compatible tooltips
+ * - Color-blind friendly palettes
+ *
+ * ## Usage Guidelines
+ *
+ * ### Do's
+ * - Use ChartConfig to define data series
+ * - Provide meaningful labels
+ * - Use appropriate chart types for data
+ * - Include tooltips for data points
+ *
+ * ### Don'ts
+ * - Don't use too many data series
+ * - Don't omit axis labels
+ * - Don't use charts for simple data
+ * - Don't rely solely on color to convey meaning
+ */
+const meta = {
+  title: 'Primitives/Chart',
+  component: ChartContainer,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'padded',
+    docs: {
+      description: {
+        component: 'A chart component for data visualizations, built on Recharts and shadcn/ui foundation.',
+      },
+    },
+  },
+} satisfies Meta<typeof ChartContainer>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+const chartData = [
+  { month: 'January', desktop: 186, mobile: 80 },
+  { month: 'February', desktop: 305, mobile: 200 },
+  { month: 'March', desktop: 237, mobile: 120 },
+  { month: 'April', desktop: 73, mobile: 190 },
+  { month: 'May', desktop: 209, mobile: 130 },
+  { month: 'June', desktop: 214, mobile: 140 },
+]
+
+const chartConfig = {
+  desktop: {
+    label: 'Desktop',
+    color: 'hsl(var(--chart-1))',
+  },
+  mobile: {
+    label: 'Mobile',
+    color: 'hsl(var(--chart-2))',
+  },
+} satisfies ChartConfig
+
+/**
+ * Bar Chart
+ *
+ * Basic bar chart with two data series.
+ */
+export const BarChartExample: Story = {
+  render: () => (
+    <ChartContainer config={chartConfig} style={{ minHeight: '300px', width: '100%' }}>
+      <BarChart data={chartData}>
+        <CartesianGrid vertical={false} />
+        <XAxis
+          dataKey="month"
+          tickLine={false}
+          tickMargin={10}
+          axisLine={false}
+          tickFormatter={(value) => value.slice(0, 3)}
+        />
+        <ChartTooltip content={<ChartTooltipContent />} />
+        <ChartLegend content={<ChartLegendContent />} />
+        <Bar dataKey="desktop" fill="var(--color-desktop)" radius={4} />
+        <Bar dataKey="mobile" fill="var(--color-mobile)" radius={4} />
+      </BarChart>
+    </ChartContainer>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'A bar chart comparing desktop and mobile usage across months.',
+      },
+    },
+  },
+}
+
+/**
+ * Line Chart
+ *
+ * Line chart showing trends over time.
+ */
+export const LineChartExample: Story = {
+  render: () => (
+    <ChartContainer config={chartConfig} style={{ minHeight: '300px', width: '100%' }}>
+      <LineChart data={chartData}>
+        <CartesianGrid vertical={false} />
+        <XAxis
+          dataKey="month"
+          tickLine={false}
+          axisLine={false}
+          tickMargin={8}
+          tickFormatter={(value) => value.slice(0, 3)}
+        />
+        <ChartTooltip content={<ChartTooltipContent />} />
+        <ChartLegend content={<ChartLegendContent />} />
+        <Line
+          dataKey="desktop"
+          type="monotone"
+          stroke="var(--color-desktop)"
+          strokeWidth={2}
+          dot={false}
+        />
+        <Line
+          dataKey="mobile"
+          type="monotone"
+          stroke="var(--color-mobile)"
+          strokeWidth={2}
+          dot={false}
+        />
+      </LineChart>
+    </ChartContainer>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'A line chart showing trends in desktop and mobile usage.',
+      },
+    },
+  },
+}
+
+/**
+ * Area Chart
+ *
+ * Area chart with filled regions.
+ */
+export const AreaChartExample: Story = {
+  render: () => (
+    <ChartContainer config={chartConfig} style={{ minHeight: '300px', width: '100%' }}>
+      <AreaChart data={chartData}>
+        <CartesianGrid vertical={false} />
+        <XAxis
+          dataKey="month"
+          tickLine={false}
+          axisLine={false}
+          tickMargin={8}
+          tickFormatter={(value) => value.slice(0, 3)}
+        />
+        <ChartTooltip content={<ChartTooltipContent />} />
+        <ChartLegend content={<ChartLegendContent />} />
+        <Area
+          dataKey="desktop"
+          type="monotone"
+          fill="var(--color-desktop)"
+          fillOpacity={0.4}
+          stroke="var(--color-desktop)"
+        />
+        <Area
+          dataKey="mobile"
+          type="monotone"
+          fill="var(--color-mobile)"
+          fillOpacity={0.4}
+          stroke="var(--color-mobile)"
+        />
+      </AreaChart>
+    </ChartContainer>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'An area chart with filled regions showing cumulative data.',
+      },
+    },
+  },
+}
+
+/**
+ * With Y Axis
+ *
+ * Chart with both X and Y axes.
+ */
+export const WithYAxis: Story = {
+  render: () => (
+    <ChartContainer config={chartConfig} style={{ minHeight: '300px', width: '100%' }}>
+      <BarChart data={chartData}>
+        <CartesianGrid vertical={false} />
+        <XAxis
+          dataKey="month"
+          tickLine={false}
+          tickMargin={10}
+          axisLine={false}
+          tickFormatter={(value) => value.slice(0, 3)}
+        />
+        <YAxis tickLine={false} axisLine={false} tickMargin={8} />
+        <ChartTooltip content={<ChartTooltipContent />} />
+        <ChartLegend content={<ChartLegendContent />} />
+        <Bar dataKey="desktop" fill="var(--color-desktop)" radius={4} />
+        <Bar dataKey="mobile" fill="var(--color-mobile)" radius={4} />
+      </BarChart>
+    </ChartContainer>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Chart with Y axis for better value reference.',
+      },
+    },
+  },
+}
+
+/**
+ * Single Series
+ *
+ * Chart with a single data series.
+ */
+export const SingleSeries: Story = {
+  render: () => {
+    const singleConfig = {
+      desktop: {
+        label: 'Desktop',
+        color: 'hsl(var(--chart-1))',
+      },
+    } satisfies ChartConfig
+
+    return (
+      <ChartContainer config={singleConfig} style={{ minHeight: '300px', width: '100%' }}>
+        <BarChart data={chartData}>
+          <CartesianGrid vertical={false} />
+          <XAxis
+            dataKey="month"
+            tickLine={false}
+            tickMargin={10}
+            axisLine={false}
+            tickFormatter={(value) => value.slice(0, 3)}
+          />
+          <ChartTooltip content={<ChartTooltipContent />} />
+          <Bar dataKey="desktop" fill="var(--color-desktop)" radius={4} />
+        </BarChart>
+      </ChartContainer>
+    )
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Chart with a single data series for simpler visualizations.',
+      },
+    },
+  },
+}
+
+/**
+ * Dark Mode Preview
+ *
+ * Charts in dark mode to verify theming compatibility.
+ */
+export const DarkMode: Story = {
+  render: () => (
+    <div className="dark" style={{ padding: '24px', background: 'hsl(222.2 84% 4.9%)', borderRadius: '8px' }}>
+      <div style={{ marginBottom: '24px' }}>
+        <h3 style={{ fontSize: '16px', fontWeight: 600, marginBottom: '16px', color: 'hsl(var(--foreground))' }}>
+          Bar Chart
+        </h3>
+        <ChartContainer config={chartConfig} style={{ minHeight: '250px', width: '100%' }}>
+          <BarChart data={chartData}>
+            <CartesianGrid vertical={false} />
+            <XAxis
+              dataKey="month"
+              tickLine={false}
+              tickMargin={10}
+              axisLine={false}
+              tickFormatter={(value) => value.slice(0, 3)}
+            />
+            <ChartTooltip content={<ChartTooltipContent />} />
+            <ChartLegend content={<ChartLegendContent />} />
+            <Bar dataKey="desktop" fill="var(--color-desktop)" radius={4} />
+            <Bar dataKey="mobile" fill="var(--color-mobile)" radius={4} />
+          </BarChart>
+        </ChartContainer>
+      </div>
+      <div>
+        <h3 style={{ fontSize: '16px', fontWeight: 600, marginBottom: '16px', color: 'hsl(var(--foreground))' }}>
+          Line Chart
+        </h3>
+        <ChartContainer config={chartConfig} style={{ minHeight: '250px', width: '100%' }}>
+          <LineChart data={chartData}>
+            <CartesianGrid vertical={false} />
+            <XAxis
+              dataKey="month"
+              tickLine={false}
+              axisLine={false}
+              tickMargin={8}
+              tickFormatter={(value) => value.slice(0, 3)}
+            />
+            <ChartTooltip content={<ChartTooltipContent />} />
+            <ChartLegend content={<ChartLegendContent />} />
+            <Line
+              dataKey="desktop"
+              type="monotone"
+              stroke="var(--color-desktop)"
+              strokeWidth={2}
+              dot={false}
+            />
+            <Line
+              dataKey="mobile"
+              type="monotone"
+              stroke="var(--color-mobile)"
+              strokeWidth={2}
+              dot={false}
+            />
+          </LineChart>
+        </ChartContainer>
+      </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Charts automatically adapt to dark mode with appropriate contrast and visibility.',
+      },
+    },
+    backgrounds: { disable: true },
+  },
+}

package/components/primitives/Chart/Chart.tsx

@@ -0,0 +1,117 @@
+import * as React from "react"
+import {
+  ChartContainer as ShadcnChartContainer,
+  ChartTooltip as ShadcnChartTooltip,
+  ChartTooltipContent as ShadcnChartTooltipContent,
+  ChartLegend as ShadcnChartLegend,
+  ChartLegendContent as ShadcnChartLegendContent,
+  ChartStyle as ShadcnChartStyle,
+} from "../../ui/chart"
+import type { ChartConfig } from "../../ui/chart"
+
+/**
+ * Chart Primitive
+ *
+ * A foundational chart component that wraps shadcn/ui Chart with design system
+ * enhancements. This primitive serves as the single source of truth for all data
+ * visualizations across the application.
+ *
+ * @example
+ * ```tsx
+ * const chartConfig = {
+ *   desktop: { label: "Desktop", color: "var(--chart-1)" },
+ *   mobile: { label: "Mobile", color: "var(--chart-2)" },
+ * }
+ *
+ * <ChartContainer config={chartConfig}>
+ *   <BarChart data={data}>
+ *     <Bar dataKey="desktop" fill="var(--color-desktop)" />
+ *     <Bar dataKey="mobile" fill="var(--color-mobile)" />
+ *   </BarChart>
+ * </ChartContainer>
+ * ```
+ *
+ * @see https://ui.shadcn.com/docs/components/chart - shadcn/ui Chart documentation
+ */
+
+/**
+ * ChartContainer component props
+ */
+export type ChartContainerProps = React.ComponentProps<typeof ShadcnChartContainer>
+
+/**
+ * ChartContainer component
+ *
+ * Container for chart components with configuration and theming.
+ */
+export const ChartContainer = React.memo(
+  React.forwardRef<HTMLDivElement, ChartContainerProps>((props, ref) => {
+    return <ShadcnChartContainer ref={ref} {...props} />
+  })
+)
+
+ChartContainer.displayName = "ChartContainer"
+
+/**
+ * ChartTooltip component
+ *
+ * Tooltip component for charts from Recharts.
+ */
+export const ChartTooltip = ShadcnChartTooltip
+
+/**
+ * ChartTooltipContent component props
+ */
+export type ChartTooltipContentProps = React.ComponentProps<typeof ShadcnChartTooltipContent>
+
+/**
+ * ChartTooltipContent component
+ *
+ * Styled tooltip content for charts.
+ */
+export const ChartTooltipContent = React.memo(
+  React.forwardRef<HTMLDivElement, ChartTooltipContentProps>((props, ref) => {
+    return <ShadcnChartTooltipContent ref={ref} {...props} />
+  })
+)
+
+ChartTooltipContent.displayName = "ChartTooltipContent"
+
+/**
+ * ChartLegend component
+ *
+ * Legend component for charts from Recharts.
+ */
+export const ChartLegend = ShadcnChartLegend
+
+ChartLegend.displayName = "ChartLegend"
+
+/**
+ * ChartLegendContent component props
+ */
+export type ChartLegendContentProps = React.ComponentProps<typeof ShadcnChartLegendContent>
+
+/**
+ * ChartLegendContent component
+ *
+ * Styled legend content for charts.
+ */
+export const ChartLegendContent = React.memo(
+  React.forwardRef<HTMLDivElement, ChartLegendContentProps>((props, ref) => {
+    return <ShadcnChartLegendContent ref={ref} {...props} />
+  })
+)
+
+ChartLegendContent.displayName = "ChartLegendContent"
+
+/**
+ * ChartStyle component
+ *
+ * Internal component for injecting chart color styles.
+ */
+export const ChartStyle = ShadcnChartStyle
+
+/**
+ * Re-export ChartConfig type for chart configuration
+ */
+export type { ChartConfig }

package/components/primitives/Chart/index.ts

@@ -0,0 +1,20 @@
+/**
+ * Chart Primitive
+ *
+ * Central export point for the Chart primitive component and its related types.
+ */
+export {
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+  ChartLegend,
+  ChartLegendContent,
+  ChartStyle,
+} from './Chart'
+
+export type {
+  ChartContainerProps,
+  ChartTooltipContentProps,
+  ChartLegendContentProps,
+  ChartConfig,
+} from './Chart'

package/components/primitives/Checkbox/Checkbox.stories.tsx

@@ -0,0 +1,87 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { Checkbox } from "./Checkbox"
+import * as React from "react"
+
+const meta = {
+  title: "Primitives/Checkbox",
+  component: Checkbox,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof Checkbox>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  render: () => <Checkbox />,
+}
+
+export const Checked: Story = {
+  render: () => <Checkbox checked />,
+}
+
+export const Disabled: Story = {
+  render: () => (
+    <div className="flex gap-4">
+      <Checkbox disabled />
+      <Checkbox disabled checked />
+    </div>
+  ),
+}
+
+export const Indeterminate: Story = {
+  render: () => <Checkbox checked="indeterminate" />,
+}
+
+export const WithLabel: Story = {
+  render: () => (
+    <div className="flex items-center gap-2">
+      <Checkbox id="terms" />
+      <label
+        htmlFor="terms"
+        className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+      >
+        Accept terms and conditions
+      </label>
+    </div>
+  ),
+}
+
+export const Controlled: Story = {
+  render: () => {
+    const [checked, setChecked] = React.useState(false)
+
+    return (
+      <div className="flex flex-col gap-4">
+        <div className="flex items-center gap-2">
+          <Checkbox
+            id="controlled"
+            checked={checked}
+            onCheckedChange={setChecked}
+          />
+          <label htmlFor="controlled" className="text-sm">
+            Controlled checkbox
+          </label>
+        </div>
+        <p className="text-sm text-muted-foreground">
+          Status: {checked ? "Checked" : "Unchecked"}
+        </p>
+      </div>
+    )
+  },
+}
+
+export const DarkMode: Story = {
+  parameters: {
+    backgrounds: { default: "dark" },
+  },
+  render: () => (
+    <div className="dark flex gap-4">
+      <Checkbox />
+      <Checkbox checked />
+      <Checkbox checked="indeterminate" />
+    </div>
+  ),
+}

package/components/primitives/Checkbox/Checkbox.tsx

@@ -0,0 +1,38 @@
+import * as React from "react"
+import { Checkbox as ShadcnCheckbox } from "../../ui/checkbox"
+
+/**
+ * Checkbox Primitive
+ *
+ * A checkbox input component with support for checked, unchecked, and indeterminate states.
+ * Built on Radix UI Checkbox primitive with WCAG 2.1 Level AA compliance.
+ *
+ * @see https://ui.shadcn.com/docs/components/checkbox
+ * @see https://www.radix-ui.com/primitives/docs/components/checkbox
+ */
+
+export type CheckboxProps = React.ComponentProps<typeof ShadcnCheckbox>
+
+/**
+ * Checkbox component
+ *
+ * A checkbox input component with support for checked, unchecked, and indeterminate states.
+ * Optimized with React.memo for performance in high-frequency rendering scenarios.
+ *
+ * Features:
+ * - Three states: checked, unchecked, indeterminate
+ * - Full keyboard navigation support
+ * - ARIA attributes for screen readers
+ * - Dark mode support
+ * - Accessible label association
+ */
+export const Checkbox = React.memo(
+  React.forwardRef<
+    React.ElementRef<typeof ShadcnCheckbox>,
+    CheckboxProps
+  >((props, ref) => {
+    return <ShadcnCheckbox ref={ref} {...props} />
+  })
+)
+
+Checkbox.displayName = "Checkbox"

package/components/primitives/Checkbox/index.ts

@@ -0,0 +1,2 @@
+export { Checkbox } from "./Checkbox"
+export type { CheckboxProps } from "./Checkbox"

package/components/primitives/Collapsible/Collapsible.stories.tsx

@@ -0,0 +1,38 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "./Collapsible";
+import { useState } from "react";
+import { Button } from "../Button";
+
+const meta: Meta<typeof Collapsible> = {
+  title: "Primitives/Collapsible",
+  component: Collapsible,
+  parameters: { layout: "centered" },
+  tags: ["autodocs"],
+};
+
+export default meta;
+type Story = StoryObj<typeof Collapsible>;
+
+export const Default: Story = {
+  render: () => {
+    const [isOpen, setIsOpen] = useState(false);
+
+    return (
+      <Collapsible open={isOpen} onOpenChange={setIsOpen} className="w-[350px] space-y-2">
+        <div className="flex items-center justify-between">
+          <h4 className="text-sm font-semibold">@username starred 3 repositories</h4>
+          <CollapsibleTrigger asChild>
+            <Button variant="ghost" size="sm">
+              {isOpen ? "Hide" : "Show"}
+            </Button>
+          </CollapsibleTrigger>
+        </div>
+        <CollapsibleContent className="space-y-2">
+          <div className="rounded-md border px-4 py-2 text-sm">@radix-ui/primitives</div>
+          <div className="rounded-md border px-4 py-2 text-sm">@radix-ui/colors</div>
+          <div className="rounded-md border px-4 py-2 text-sm">@stitches/react</div>
+        </CollapsibleContent>
+      </Collapsible>
+    );
+  },
+};

package/components/primitives/Collapsible/Collapsible.tsx

@@ -0,0 +1,39 @@
+"use client";
+
+import * as React from "react";
+import {
+  Collapsible as ShadcnCollapsible,
+  CollapsibleContent as ShadcnCollapsibleContent,
+  CollapsibleTrigger as ShadcnCollapsibleTrigger,
+} from "@/components/ui/collapsible";
+
+export type CollapsibleProps = React.ComponentProps<typeof ShadcnCollapsible>;
+export type CollapsibleTriggerProps = React.ComponentProps<typeof ShadcnCollapsibleTrigger>;
+export type CollapsibleContentProps = React.ComponentProps<typeof ShadcnCollapsibleContent>;
+
+export const Collapsible = React.memo<CollapsibleProps>(
+  React.forwardRef<React.ElementRef<typeof ShadcnCollapsible>, CollapsibleProps>(
+    (props, ref) => {
+      return <ShadcnCollapsible {...props} />;
+    }
+  )
+);
+Collapsible.displayName = "Collapsible";
+
+export const CollapsibleTrigger = React.memo<CollapsibleTriggerProps>(
+  React.forwardRef<React.ElementRef<typeof ShadcnCollapsibleTrigger>, CollapsibleTriggerProps>(
+    (props, ref) => {
+      return <ShadcnCollapsibleTrigger ref={ref} {...props} />;
+    }
+  )
+);
+CollapsibleTrigger.displayName = "CollapsibleTrigger";
+
+export const CollapsibleContent = React.memo<CollapsibleContentProps>(
+  React.forwardRef<React.ElementRef<typeof ShadcnCollapsibleContent>, CollapsibleContentProps>(
+    (props, ref) => {
+      return <ShadcnCollapsibleContent ref={ref} {...props} />;
+    }
+  )
+);
+CollapsibleContent.displayName = "CollapsibleContent";

package/components/primitives/Collapsible/index.ts

@@ -0,0 +1,8 @@
+export {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+  type CollapsibleProps,
+  type CollapsibleContentProps,
+  type CollapsibleTriggerProps,
+} from "./Collapsible";