@wakastellar/ui 3.5.2 → 4.0.0

package/src/components/waka-charts/WakaAreaChart.stories.tsx

@@ -0,0 +1,116 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { WakaAreaChart } from './WakaAreaChart'
+
+const data = [
+  { name: 'Q1', revenue: 12000, costs: 6000, profit: 6000 },
+  { name: 'Q2', revenue: 18000, costs: 9500, profit: 8500 },
+  { name: 'Q3', revenue: 24000, costs: 11200, profit: 12800 },
+  { name: 'Q4', revenue: 31000, costs: 13500, profit: 17500 },
+]
+
+const meta: Meta<typeof WakaAreaChart> = {
+  title: 'Components/Charts/WakaAreaChart',
+  component: WakaAreaChart,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component:
+          'Area chart with gradient fills, stacked mode, and configurable opacity. Built on Recharts AreaChart primitive.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    variant: { control: 'select', options: ['default', 'gradient', 'outline', 'glass'] },
+    fillOpacity: { control: { type: 'range', min: 0, max: 1, step: 0.05 } },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaAreaChart>
+
+export const Default: Story = {
+  args: {
+    data,
+    dataKeys: ['revenue'],
+    title: 'Quarterly Revenue',
+    description: '2026 fiscal year',
+  },
+  render: (args) => (
+    <div className="w-[600px]">
+      <WakaAreaChart {...args} />
+    </div>
+  ),
+}
+
+export const Gradient: Story = {
+  args: {
+    data,
+    dataKeys: ['revenue'],
+    variant: 'gradient',
+    title: 'Gradient Fill',
+  },
+  render: (args) => (
+    <div className="w-[600px]">
+      <WakaAreaChart {...args} />
+    </div>
+  ),
+}
+
+export const Stacked: Story = {
+  args: {
+    data,
+    dataKeys: ['costs', 'profit'],
+    stacked: true,
+    legend: true,
+    title: 'Stacked Costs & Profit',
+  },
+  render: (args) => (
+    <div className="w-[600px]">
+      <WakaAreaChart {...args} />
+    </div>
+  ),
+}
+
+export const LowOpacity: Story = {
+  args: {
+    data,
+    dataKeys: ['revenue', 'profit'],
+    fillOpacity: 0.2,
+    legend: true,
+    title: 'Low Fill Opacity',
+  },
+  render: (args) => (
+    <div className="w-[600px]">
+      <WakaAreaChart {...args} />
+    </div>
+  ),
+}
+
+export const Loading: Story = {
+  args: {
+    data,
+    dataKeys: ['revenue'],
+    loading: true,
+    title: 'Loading',
+  },
+  render: (args) => (
+    <div className="w-[600px]">
+      <WakaAreaChart {...args} />
+    </div>
+  ),
+}
+
+export const EmptyState: Story = {
+  args: {
+    data: [],
+    dataKeys: ['revenue'],
+    title: 'No revenue yet',
+  },
+  render: (args) => (
+    <div className="w-[600px]">
+      <WakaAreaChart {...args} />
+    </div>
+  ),
+}

package/src/components/waka-charts/WakaBarChart.stories.tsx

@@ -0,0 +1,137 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { WakaBarChart } from './WakaBarChart'
+
+const data = [
+  { name: 'Jan', sales: 4000, profit: 2400, expenses: 1600 },
+  { name: 'Feb', sales: 3000, profit: 1398, expenses: 1602 },
+  { name: 'Mar', sales: 5000, profit: 3800, expenses: 1200 },
+  { name: 'Apr', sales: 4780, profit: 3908, expenses: 872 },
+  { name: 'May', sales: 6890, profit: 4800, expenses: 2090 },
+  { name: 'Jun', sales: 5390, profit: 3800, expenses: 1590 },
+]
+
+const emptyData: typeof data = []
+
+const meta: Meta<typeof WakaBarChart> = {
+  title: 'Components/Charts/WakaBarChart',
+  component: WakaBarChart,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component:
+          'Bar chart based on Recharts. Supports single/multi-series, stacked, horizontal layout, gradients, and custom theming via CSS variables.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    variant: { control: 'select', options: ['default', 'gradient', 'outline', 'glass'] },
+    size: { control: 'select', options: ['sm', 'md', 'lg', 'xl', 'auto'] },
+    layout: { control: 'inline-radio', options: ['vertical', 'horizontal'] },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaBarChart>
+
+export const Default: Story = {
+  args: {
+    data,
+    dataKeys: ['sales'],
+    title: 'Monthly Sales',
+    description: 'Total revenue per month',
+  },
+  render: (args) => (
+    <div className="w-[600px]">
+      <WakaBarChart {...args} />
+    </div>
+  ),
+}
+
+export const MultiSeries: Story = {
+  args: {
+    data,
+    dataKeys: ['sales', 'profit', 'expenses'],
+    title: 'Sales vs Profit vs Expenses',
+    legend: true,
+    tooltip: true,
+  },
+  render: (args) => (
+    <div className="w-[700px]">
+      <WakaBarChart {...args} />
+    </div>
+  ),
+}
+
+export const Stacked: Story = {
+  args: {
+    data,
+    dataKeys: ['profit', 'expenses'],
+    stacked: true,
+    title: 'Profit & Expenses (Stacked)',
+    variant: 'gradient',
+    legend: true,
+  },
+  render: (args) => (
+    <div className="w-[600px]">
+      <WakaBarChart {...args} />
+    </div>
+  ),
+}
+
+export const HorizontalLayout: Story = {
+  args: {
+    data,
+    dataKeys: ['sales'],
+    layout: 'horizontal',
+    title: 'Horizontal Layout',
+  },
+  render: (args) => (
+    <div className="w-[600px]">
+      <WakaBarChart {...args} />
+    </div>
+  ),
+}
+
+export const Loading: Story = {
+  args: {
+    data,
+    dataKeys: ['sales'],
+    loading: true,
+    title: 'Loading State',
+  },
+  render: (args) => (
+    <div className="w-[600px]">
+      <WakaBarChart {...args} />
+    </div>
+  ),
+}
+
+export const EmptyState: Story = {
+  args: {
+    data: emptyData,
+    dataKeys: ['sales'],
+    title: 'No data available',
+    description: 'Edge case: empty dataset',
+  },
+  render: (args) => (
+    <div className="w-[600px]">
+      <WakaBarChart {...args} />
+    </div>
+  ),
+}
+
+export const ErrorState: Story = {
+  args: {
+    data,
+    dataKeys: ['sales'],
+    error: 'Failed to fetch chart data',
+    title: 'Error State',
+  },
+  render: (args) => (
+    <div className="w-[600px]">
+      <WakaBarChart {...args} />
+    </div>
+  ),
+}

package/src/components/waka-charts/WakaChart.stories.tsx

@@ -0,0 +1,135 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { WakaChart } from './WakaChart'
+
+const meta: Meta<typeof WakaChart> = {
+  title: 'Components/Charts/WakaChart',
+  component: WakaChart,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component:
+          'Low-level container for charts. Manages dynamic Recharts loading, theming, loading and error states. Most users should reach for WakaBarChart, WakaLineChart, etc. Use WakaChart only to compose a custom Recharts visualization while preserving the WakaStart chrome.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    variant: { control: 'select', options: ['default', 'gradient', 'outline', 'glass'] },
+    size: { control: 'select', options: ['sm', 'md', 'lg', 'xl', 'auto'] },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaChart>
+
+const data = [
+  { name: 'A', value: 30 },
+  { name: 'B', value: 80 },
+  { name: 'C', value: 45 },
+  { name: 'D', value: 60 },
+]
+
+export const Default: Story = {
+  args: {
+    title: 'Custom Chart',
+    description: 'Composed with the WakaChart container',
+    size: 'md',
+    children: (rc) => {
+      if (!rc) return null
+      const { ResponsiveContainer, BarChart, Bar, XAxis, YAxis, Tooltip, CartesianGrid } = rc
+      return (
+        <ResponsiveContainer width="100%" height="100%">
+          <BarChart data={data}>
+            <CartesianGrid strokeDasharray="3 3" />
+            <XAxis dataKey="name" />
+            <YAxis />
+            <Tooltip />
+            <Bar dataKey="value" fill="var(--primary)" />
+          </BarChart>
+        </ResponsiveContainer>
+      )
+    },
+  },
+  render: (args) => (
+    <div className="w-[600px]">
+      <WakaChart {...args} />
+    </div>
+  ),
+}
+
+export const Loading: Story = {
+  args: {
+    loading: true,
+    title: 'Fetching…',
+    children: () => null,
+  },
+  render: (args) => (
+    <div className="w-[600px]">
+      <WakaChart {...args} />
+    </div>
+  ),
+}
+
+export const ErrorState: Story = {
+  args: {
+    error: 'Could not load chart data',
+    title: 'Error',
+    children: () => null,
+  },
+  render: (args) => (
+    <div className="w-[600px]">
+      <WakaChart {...args} />
+    </div>
+  ),
+}
+
+export const VariantGradient: Story = {
+  args: {
+    variant: 'gradient',
+    title: 'Gradient container',
+    size: 'lg',
+    children: (rc) => {
+      if (!rc) return null
+      const { ResponsiveContainer, LineChart, Line, XAxis, YAxis, Tooltip } = rc
+      return (
+        <ResponsiveContainer width="100%" height="100%">
+          <LineChart data={data}>
+            <XAxis dataKey="name" />
+            <YAxis />
+            <Tooltip />
+            <Line type="monotone" dataKey="value" stroke="var(--primary)" />
+          </LineChart>
+        </ResponsiveContainer>
+      )
+    },
+  },
+  render: (args) => (
+    <div className="w-[600px]">
+      <WakaChart {...args} />
+    </div>
+  ),
+}
+
+export const Compact: Story = {
+  args: {
+    size: 'sm',
+    title: 'Small variant',
+    children: (rc) => {
+      if (!rc) return null
+      const { ResponsiveContainer, BarChart, Bar } = rc
+      return (
+        <ResponsiveContainer width="100%" height="100%">
+          <BarChart data={data}>
+            <Bar dataKey="value" fill="var(--primary)" />
+          </BarChart>
+        </ResponsiveContainer>
+      )
+    },
+  },
+  render: (args) => (
+    <div className="w-[400px]">
+      <WakaChart {...args} />
+    </div>
+  ),
+}

package/src/components/waka-charts/WakaCharts.mdx

@@ -0,0 +1,137 @@
+import { Meta, Canvas, Controls, Source, ArgTypes } from '@storybook/addon-docs/blocks'
+import * as Stories from './WakaCharts.stories'
+
+<Meta of={Stories} />
+
+# WakaCharts
+
+Recharts wrappers (Line, Bar, Pie, Area) with WakaStart theming, tooltips, and skeleton states.
+
+## Installation
+
+The component is exported from the root entry point of `@wakastellar/ui`:
+
+<Source language="tsx" code={`import { WakaCharts } from '@wakastellar/ui'`} />
+
+If you use the CLI scaffolder:
+
+<Source language="bash" code={`npx wakastellar-ui add waka-charts`} />
+
+## Usage
+
+<Canvas of={Stories.BarChartDefault} />
+
+<Controls of={Stories.BarChartDefault} />
+
+## Examples
+
+### Bar Chart Multi Series
+
+<Canvas of={Stories.BarChartMultiSeries} />
+
+### Bar Chart Stacked
+
+<Canvas of={Stories.BarChartStacked} />
+
+### Bar Chart Sizes
+
+<Canvas of={Stories.BarChartSizes} />
+
+### Line Chart Default
+
+<Canvas of={Stories.LineChartDefault} />
+
+### Line Chart Multi Series
+
+<Canvas of={Stories.LineChartMultiSeries} />
+
+### Line Chart Curves
+
+<Canvas of={Stories.LineChartCurves} />
+
+### Line Chart Dots
+
+<Canvas of={Stories.LineChartDots} />
+
+### Area Chart Default
+
+<Canvas of={Stories.AreaChartDefault} />
+
+### Area Chart Stacked
+
+<Canvas of={Stories.AreaChartStacked} />
+
+### Area Chart Gradient
+
+<Canvas of={Stories.AreaChartGradient} />
+
+### Area Chart Fill Opacity
+
+<Canvas of={Stories.AreaChartFillOpacity} />
+
+### Pie Chart Default
+
+<Canvas of={Stories.PieChartDefault} />
+
+### Pie Chart Donut
+
+<Canvas of={Stories.PieChartDonut} />
+
+### Pie Chart Labels
+
+<Canvas of={Stories.PieChartLabels} />
+
+### Pie Chart Sizes
+
+<Canvas of={Stories.PieChartSizes} />
+
+### Sparkline Default
+
+<Canvas of={Stories.SparklineDefault} />
+
+### Sparkline Sizes
+
+<Canvas of={Stories.SparklineSizes} />
+
+### Sparkline Colors
+
+<Canvas of={Stories.SparklineColors} />
+
+### Sparkline With Metrics
+
+<Canvas of={Stories.SparklineWithMetrics} />
+
+### Sparkline In Table
+
+<Canvas of={Stories.SparklineInTable} />
+
+### Dashboard Example
+
+<Canvas of={Stories.DashboardExample} />
+
+
+## API Reference
+
+<ArgTypes of={Stories.BarChartDefault} />
+
+## Accessibility
+
+- Full keyboard navigation (Tab, Shift+Tab, Enter, Space, Arrow keys where applicable).
+- Compatible with screen readers via Radix UI primitives.
+- Focus ring visible at all times; never `outline: none` without a replacement.
+- Color contrast meets WCAG AA in both light and dark themes.
+
+## Theming
+
+All visual tokens are CSS custom properties consumed via Tailwind v4. Override
+in your app's `globals.css` to customize:
+
+<Source language="css" code={`:root {
+  --primary: oklch(0.65 0.18 250);
+  --primary-foreground: oklch(0.98 0 0);
+}`} />
+
+## Related
+
+- See the audit fiche: \`docs/audit/components/waka-charts.md\`
+- See the [accessibility dimension report](?path=/docs/dimensions-accessibility--docs)

package/src/components/waka-charts/WakaCharts.stories.tsx

@@ -46,7 +46,6 @@ const meta: Meta = {
       },
     },
   },
-  tags: ['autodocs'],
 }
 
 export default meta

package/src/components/waka-charts/WakaLineChart.stories.tsx

@@ -0,0 +1,135 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { WakaLineChart } from './WakaLineChart'
+
+const data = [
+  { name: 'Mon', users: 4000, sessions: 2400, pageviews: 6400 },
+  { name: 'Tue', users: 3000, sessions: 1398, pageviews: 4398 },
+  { name: 'Wed', users: 5000, sessions: 3800, pageviews: 8800 },
+  { name: 'Thu', users: 4780, sessions: 3908, pageviews: 8688 },
+  { name: 'Fri', users: 6890, sessions: 4800, pageviews: 11690 },
+  { name: 'Sat', users: 3390, sessions: 2380, pageviews: 5770 },
+  { name: 'Sun', users: 4490, sessions: 3300, pageviews: 7790 },
+]
+
+const meta: Meta<typeof WakaLineChart> = {
+  title: 'Components/Charts/WakaLineChart',
+  component: WakaLineChart,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component:
+          'Line chart based on Recharts. Supports multi-series, configurable curve types (linear, monotone, step, basis, natural), dots, and active hover dots.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    variant: { control: 'select', options: ['default', 'gradient', 'outline', 'glass'] },
+    curve: { control: 'select', options: ['linear', 'monotone', 'step', 'basis', 'natural'] },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaLineChart>
+
+export const Default: Story = {
+  args: {
+    data,
+    dataKeys: ['users'],
+    title: 'Daily Active Users',
+    description: 'Last 7 days',
+  },
+  render: (args) => (
+    <div className="w-[600px]">
+      <WakaLineChart {...args} />
+    </div>
+  ),
+}
+
+export const MultiSeries: Story = {
+  args: {
+    data,
+    dataKeys: ['users', 'sessions', 'pageviews'],
+    title: 'Traffic Overview',
+    legend: true,
+    tooltip: true,
+  },
+  render: (args) => (
+    <div className="w-[700px]">
+      <WakaLineChart {...args} />
+    </div>
+  ),
+}
+
+export const SmoothCurve: Story = {
+  args: {
+    data,
+    dataKeys: ['users', 'sessions'],
+    curve: 'monotone',
+    title: 'Monotone Curve',
+    legend: true,
+  },
+  render: (args) => (
+    <div className="w-[600px]">
+      <WakaLineChart {...args} />
+    </div>
+  ),
+}
+
+export const StepCurve: Story = {
+  args: {
+    data,
+    dataKeys: ['users'],
+    curve: 'step',
+    title: 'Step Curve',
+  },
+  render: (args) => (
+    <div className="w-[600px]">
+      <WakaLineChart {...args} />
+    </div>
+  ),
+}
+
+export const WithDots: Story = {
+  args: {
+    data,
+    dataKeys: ['users', 'sessions'],
+    dots: true,
+    activeDot: true,
+    legend: true,
+    title: 'With Visible Dots',
+  },
+  render: (args) => (
+    <div className="w-[600px]">
+      <WakaLineChart {...args} />
+    </div>
+  ),
+}
+
+export const Loading: Story = {
+  args: {
+    data,
+    dataKeys: ['users'],
+    loading: true,
+    title: 'Loading…',
+  },
+  render: (args) => (
+    <div className="w-[600px]">
+      <WakaLineChart {...args} />
+    </div>
+  ),
+}
+
+export const EmptyState: Story = {
+  args: {
+    data: [],
+    dataKeys: ['users'],
+    title: 'No data',
+  },
+  render: (args) => (
+    <div className="w-[600px]">
+      <WakaLineChart {...args} />
+    </div>
+  ),
+}