@neynar/ui 0.1.1

package/src/components/ui/stories/chart.stories.tsx

@@ -0,0 +1,430 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import {
+  Area,
+  AreaChart as RechartsAreaChart,
+  Bar,
+  BarChart as RechartsBarChart,
+  CartesianGrid,
+  Line,
+  LineChart as RechartsLineChart,
+  Pie,
+  PieChart as RechartsPieChart,
+  XAxis,
+  YAxis,
+} from "recharts";
+import {
+  ChartContainer,
+  ChartLegend,
+  ChartLegendContent,
+  ChartTooltip,
+  ChartTooltipContent,
+  type ChartConfig,
+} from "../chart";
+
+const meta = {
+  title: "Charts & Visualization/Chart",
+  component: ChartContainer,
+  parameters: {
+    layout: "centered",
+    docs: {
+      description: {
+        component:
+          "A flexible chart component built on Recharts with theming, configuration, and accessibility support. Provides responsive containers for all chart types with consistent styling and color management.",
+      },
+    },
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    config: {
+      control: { type: "object" },
+      description:
+        "Chart configuration defining series labels, colors, and icons",
+    },
+    className: {
+      control: { type: "text" },
+      description: "Additional CSS classes for styling",
+    },
+    children: {
+      control: false,
+      description: "Recharts components to render",
+    },
+  },
+} satisfies Meta<typeof ChartContainer>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Sample data for different chart types
+const chartData = [
+  { month: "Jan", revenue: 2400, expenses: 1400, profit: 1000 },
+  { month: "Feb", revenue: 1398, expenses: 2100, profit: -702 },
+  { month: "Mar", revenue: 9800, expenses: 2000, profit: 7800 },
+  { month: "Apr", revenue: 3908, expenses: 2780, profit: 1128 },
+  { month: "May", revenue: 4800, expenses: 1890, profit: 2910 },
+  { month: "Jun", revenue: 3800, expenses: 2390, profit: 1410 },
+];
+
+const pieData = [
+  { category: "Desktop", value: 275, fill: "var(--color-desktop)" },
+  { category: "Mobile", value: 200, fill: "var(--color-mobile)" },
+  { category: "Tablet", value: 187, fill: "var(--color-tablet)" },
+  { category: "Other", value: 90, fill: "var(--color-other)" },
+];
+
+// Base configuration for interactive controls
+const baseConfig = {
+  revenue: {
+    label: "Revenue",
+    color: "var(--chart-1)",
+  },
+  expenses: {
+    label: "Expenses",
+    color: "var(--chart-2)",
+  },
+  profit: {
+    label: "Profit",
+    color: "var(--chart-3)",
+  },
+} satisfies ChartConfig;
+
+/**
+ * Interactive playground with all chart configuration options
+ * Allows testing different props and configurations
+ */
+export const Interactive: Story = {
+  args: {
+    config: baseConfig,
+    className: "min-h-[300px] w-[600px]",
+    children: <></>,
+  },
+  argTypes: {
+    config: {
+      control: { type: "object" },
+      description: "Chart configuration with series definitions",
+    },
+  },
+  render: (args) => (
+    <ChartContainer {...args}>
+      <RechartsBarChart data={chartData} accessibilityLayer>
+        <CartesianGrid strokeDasharray="3 3" />
+        <XAxis
+          dataKey="month"
+          tickLine={false}
+          tickMargin={10}
+          axisLine={false}
+        />
+        <YAxis />
+        <ChartTooltip content={<ChartTooltipContent />} />
+        <ChartLegend content={<ChartLegendContent />} />
+        <Bar dataKey="revenue" fill="var(--color-revenue)" radius={4} />
+        <Bar dataKey="expenses" fill="var(--color-expenses)" radius={4} />
+        <Bar dataKey="profit" fill="var(--color-profit)" radius={4} />
+      </RechartsBarChart>
+    </ChartContainer>
+  ),
+};
+
+/**
+ * Showcase of all chart variants and types
+ * Demonstrates different chart configurations
+ */
+export const Variants: Story = {
+  args: {
+    config: baseConfig,
+    className: "min-h-[300px] w-[600px]",
+    children: <></>,
+  },
+  render: () => (
+    <div className="grid grid-cols-2 gap-8 w-[1000px]">
+      {/* Bar Chart */}
+      <div className="space-y-2">
+        <h3 className="text-lg font-semibold">Bar Chart</h3>
+        <ChartContainer
+          config={{
+            desktop: { label: "Desktop", color: "var(--chart-1)" },
+            mobile: { label: "Mobile", color: "var(--chart-2)" },
+          }}
+          className="h-[200px]"
+        >
+          <RechartsBarChart data={chartData.slice(0, 4)}>
+            <XAxis dataKey="month" tickLine={false} axisLine={false} />
+            <ChartTooltip content={<ChartTooltipContent />} />
+            <Bar dataKey="revenue" fill="var(--color-desktop)" radius={2} />
+            <Bar dataKey="expenses" fill="var(--color-mobile)" radius={2} />
+          </RechartsBarChart>
+        </ChartContainer>
+      </div>
+
+      {/* Line Chart */}
+      <div className="space-y-2">
+        <h3 className="text-lg font-semibold">Line Chart</h3>
+        <ChartContainer
+          config={{
+            trend: { label: "Trend", color: "var(--chart-3)" },
+          }}
+          className="h-[200px]"
+        >
+          <RechartsLineChart data={chartData}>
+            <XAxis dataKey="month" tickLine={false} axisLine={false} />
+            <ChartTooltip content={<ChartTooltipContent />} />
+            <Line
+              dataKey="profit"
+              type="monotone"
+              stroke="var(--color-trend)"
+              strokeWidth={2}
+              dot={{ fill: "var(--color-trend)", strokeWidth: 2 }}
+            />
+          </RechartsLineChart>
+        </ChartContainer>
+      </div>
+
+      {/* Area Chart */}
+      <div className="space-y-2">
+        <h3 className="text-lg font-semibold">Area Chart</h3>
+        <ChartContainer
+          config={{
+            primary: { label: "Primary", color: "var(--chart-4)" },
+            secondary: { label: "Secondary", color: "var(--chart-5)" },
+          }}
+          className="h-[200px]"
+        >
+          <RechartsAreaChart data={chartData}>
+            <XAxis dataKey="month" tickLine={false} axisLine={false} />
+            <ChartTooltip content={<ChartTooltipContent />} />
+            <Area
+              dataKey="revenue"
+              type="natural"
+              fill="var(--color-primary)"
+              fillOpacity={0.6}
+              stroke="var(--color-primary)"
+            />
+            <Area
+              dataKey="expenses"
+              type="natural"
+              fill="var(--color-secondary)"
+              fillOpacity={0.4}
+              stroke="var(--color-secondary)"
+            />
+          </RechartsAreaChart>
+        </ChartContainer>
+      </div>
+
+      {/* Pie Chart */}
+      <div className="space-y-2">
+        <h3 className="text-lg font-semibold">Pie Chart</h3>
+        <ChartContainer
+          config={{
+            desktop: { label: "Desktop", color: "var(--chart-1)" },
+            mobile: { label: "Mobile", color: "var(--chart-2)" },
+            tablet: { label: "Tablet", color: "var(--chart-3)" },
+            other: { label: "Other", color: "var(--chart-4)" },
+          }}
+          className="h-[200px]"
+        >
+          <RechartsPieChart>
+            <ChartTooltip
+              content={<ChartTooltipContent nameKey="category" />}
+            />
+            <Pie
+              data={pieData}
+              dataKey="value"
+              nameKey="category"
+              innerRadius={30}
+              outerRadius={80}
+            />
+            <ChartLegend content={<ChartLegendContent />} />
+          </RechartsPieChart>
+        </ChartContainer>
+      </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Displays all chart variants including bar, line, area, and pie charts with different configurations.",
+      },
+    },
+  },
+};
+
+/**
+ * Real-world usage in a dashboard context
+ * Shows how charts integrate into actual applications
+ */
+export const InContext: Story = {
+  args: {
+    config: baseConfig,
+    className: "min-h-[300px] w-[600px]",
+    children: <></>,
+  },
+  render: () => (
+    <div className="max-w-4xl space-y-8 p-6 bg-background border rounded-lg">
+      {/* Dashboard Header */}
+      <div className="space-y-2">
+        <h2 className="text-2xl font-bold tracking-tight">
+          Analytics Dashboard
+        </h2>
+        <p className="text-muted-foreground">
+          Overview of revenue, expenses, and profit trends for Q1 2025
+        </p>
+      </div>
+
+      {/* Key Metrics */}
+      <div className="grid grid-cols-3 gap-4">
+        <div className="p-4 border rounded-lg">
+          <div className="text-sm font-medium text-muted-foreground">
+            Total Revenue
+          </div>
+          <div className="text-2xl font-bold">$26,108</div>
+          <div className="text-xs text-green-600">+12.5% from last period</div>
+        </div>
+        <div className="p-4 border rounded-lg">
+          <div className="text-sm font-medium text-muted-foreground">
+            Total Expenses
+          </div>
+          <div className="text-2xl font-bold">$12,560</div>
+          <div className="text-xs text-red-600">+8.2% from last period</div>
+        </div>
+        <div className="p-4 border rounded-lg">
+          <div className="text-sm font-medium text-muted-foreground">
+            Net Profit
+          </div>
+          <div className="text-2xl font-bold">$13,548</div>
+          <div className="text-xs text-green-600">+18.3% from last period</div>
+        </div>
+      </div>
+
+      {/* Main Chart */}
+      <div className="space-y-4">
+        <div className="flex items-center justify-between">
+          <h3 className="text-lg font-semibold">Financial Overview</h3>
+          <div className="text-sm text-muted-foreground">Last 6 months</div>
+        </div>
+        <ChartContainer config={baseConfig} className="h-[400px]">
+          <RechartsAreaChart data={chartData} accessibilityLayer>
+            <CartesianGrid strokeDasharray="3 3" />
+            <XAxis
+              dataKey="month"
+              tickLine={false}
+              tickMargin={10}
+              axisLine={false}
+            />
+            <YAxis
+              tickLine={false}
+              axisLine={false}
+              tickFormatter={(value) => `$${value.toLocaleString()}`}
+            />
+            <ChartTooltip
+              content={
+                <ChartTooltipContent
+                  formatter={(value) => [
+                    `$${value.toLocaleString()}`,
+                    undefined,
+                  ]}
+                  labelFormatter={(label) => `Month: ${label}`}
+                />
+              }
+            />
+            <ChartLegend content={<ChartLegendContent />} />
+            <Area
+              dataKey="revenue"
+              type="natural"
+              fill="var(--color-revenue)"
+              fillOpacity={0.6}
+              stroke="var(--color-revenue)"
+              strokeWidth={2}
+            />
+            <Area
+              dataKey="expenses"
+              type="natural"
+              fill="var(--color-expenses)"
+              fillOpacity={0.4}
+              stroke="var(--color-expenses)"
+              strokeWidth={2}
+            />
+            <Line
+              dataKey="profit"
+              type="monotone"
+              stroke="var(--color-profit)"
+              strokeWidth={3}
+              dot={{ fill: "var(--color-profit)", strokeWidth: 2, r: 4 }}
+            />
+          </RechartsAreaChart>
+        </ChartContainer>
+      </div>
+
+      {/* Secondary Charts */}
+      <div className="grid grid-cols-2 gap-6">
+        <div className="space-y-3">
+          <h4 className="font-medium">Monthly Trends</h4>
+          <ChartContainer
+            config={{
+              growth: { label: "Growth Rate", color: "var(--chart-5)" },
+            }}
+            className="h-[200px]"
+          >
+            <RechartsLineChart data={chartData}>
+              <XAxis dataKey="month" tickLine={false} axisLine={false} />
+              <ChartTooltip
+                content={
+                  <ChartTooltipContent
+                    formatter={(value) => [`${value}%`, "Growth"]}
+                  />
+                }
+              />
+              <Line
+                dataKey="profit"
+                type="monotone"
+                stroke="var(--color-growth)"
+                strokeWidth={2}
+                dot={false}
+              />
+            </RechartsLineChart>
+          </ChartContainer>
+        </div>
+
+        <div className="space-y-3">
+          <h4 className="font-medium">Performance Distribution</h4>
+          <ChartContainer
+            config={{
+              positive: { label: "Positive", color: "var(--chart-1)" },
+              negative: { label: "Negative", color: "var(--chart-2)" },
+            }}
+            className="h-[200px]"
+          >
+            <RechartsPieChart>
+              <ChartTooltip content={<ChartTooltipContent />} />
+              <Pie
+                data={[
+                  {
+                    name: "Positive",
+                    value: 75,
+                    fill: "var(--color-positive)",
+                  },
+                  {
+                    name: "Negative",
+                    value: 25,
+                    fill: "var(--color-negative)",
+                  },
+                ]}
+                dataKey="value"
+                innerRadius={40}
+                outerRadius={80}
+              />
+            </RechartsPieChart>
+          </ChartContainer>
+        </div>
+      </div>
+    </div>
+  ),
+  parameters: {
+    layout: "fullscreen",
+    docs: {
+      description: {
+        story:
+          "Demonstrates chart components in a realistic dashboard context with multiple chart types, formatting, and business-relevant data visualization.",
+      },
+    },
+  },
+};