@campxdev/react-blueprint 2.3.11 → 3.0.0-alpha.2

package/src/stories/Charts/LineChart.stories.tsx

@@ -1,112 +1,243 @@
-import { Meta } from '@storybook/react';
-import {
-  LineChart,
-  LineChartProps,
-} from '../../components/Charts/LineChart/LineChart';
+import type { Meta, StoryObj } from '@storybook/react';
+import { LineChart } from '../../components/Charts/LineChart/LineChart';
+import { ChartConfig } from '../../components/Charts/export';
 
-const data = [
-  { name: 'Page A', uv: 4000, pv: 2400, amt: 2400 },
-  { name: 'Page B', uv: 3000, pv: 1398, amt: 2210 },
-  { name: 'Page C', uv: 2000, pv: 9800, amt: 2290 },
-  { name: 'Page D', uv: 2780, pv: 3908, amt: 2000 },
-  { name: 'Page E', uv: 1890, pv: 4800, amt: 2181 },
-  { name: 'Page F', uv: 2390, pv: 3800, amt: 2500 },
-  { name: 'Page G', uv: 3490, pv: 4300, amt: 2100 },
-];
-
-const lines = [
-  { type: 'monotone', dataKey: 'uv', stroke: '#8884d8' },
-  { type: 'monotone', dataKey: 'pv', stroke: '#82ca9d' },
-];
-
-export default {
+const meta: Meta<typeof LineChart> = {
   title: 'Charts/LineChart',
   component: LineChart,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
   argTypes: {
     title: {
       control: 'text',
-      description: 'Title of the chart',
+      description: 'Chart title',
     },
-    titleSx: {
-      control: 'object',
-      description: 'Styling for the title',
-    },
-    width: {
-      control: 'number',
-      description: 'Width of the chart',
-    },
-    height: {
-      control: 'number',
-      description: 'Height of the chart',
-    },
-    margin: {
-      control: 'object',
-      description: 'Margin around the chart',
+    showSubtitle: {
+      control: 'boolean',
+      description: 'Show subtitle',
     },
     showToolTip: {
       control: 'boolean',
-      description: 'Toggle tooltip visibility',
+      description: 'Show tooltip on hover',
     },
     showLegend: {
       control: 'boolean',
-      description: 'Toggle legend visibility',
-    },
-    legendSx: {
-      control: 'object',
-      description: 'Styling for the legend',
-    },
-    containerSx: {
-      control: 'object',
-      description: 'Styling for the container',
-    },
-    dataKey: {
-      control: 'text',
-      description: 'Key for the X axis',
+      description: 'Show legend',
     },
-    data: {
-      control: 'object',
-      description: 'Data for the chart',
-    },
-    lines: {
-      control: 'object',
-      description: 'Lines configuration',
-    },
-    cartesianGrid: {
-      control: 'object',
-      description: 'Configuration for the Cartesian grid',
-    },
-    axisLabelProps: {
-      control: 'object',
-      description: 'Labels for the axes',
+    width: {
+      control: 'number',
+      description: 'Chart width in pixels',
     },
-    lineChartStyle: {
-      control: 'object',
-      description: 'Styling for the bar chart',
+    height: {
+      control: 'number',
+      description: 'Chart height in pixels',
     },
   },
-} as Meta<typeof LineChart>;
+};
+
+export default meta;
+type Story = StoryObj<typeof LineChart>;
+
+// Sample data for page metrics
+const pageMetricsData = [
+  { name: 'Page A', uv: 4000, pv: 2400, amt: 2400 },
+  { name: 'Page B', uv: 3000, pv: 1398, amt: 2210 },
+  { name: 'Page C', uv: 2000, pv: 9800, amt: 2290 },
+  { name: 'Page D', uv: 2780, pv: 3908, amt: 2000 },
+  { name: 'Page E', uv: 1890, pv: 4800, amt: 2181 },
+  { name: 'Page F', uv: 2390, pv: 3800, amt: 2500 },
+  { name: 'Page G', uv: 3490, pv: 4300, amt: 2100 },
+];
+
+const chartConfig: ChartConfig = {
+  uv: {
+    label: 'Unique Visitors',
+    color: 'oklch(0.646 0.222 41.116)', // Using direct color value from --chart-1
+  },
+  pv: {
+    label: 'Page Views',
+    color: 'oklch(0.6 0.118 184.704)', // Using direct color value from --chart-2
+  },
+  amt: {
+    label: 'Amount',
+    color: 'oklch(0.398 0.07 227.392)', // Using direct color value from --chart-3
+  },
+};
+
+const lines = [
+  {
+    type: 'monotone' as const,
+    dataKey: 'uv',
+    stroke: 'var(--color-uv)',
+    strokeWidth: 2,
+  },
+  {
+    type: 'monotone' as const,
+    dataKey: 'pv',
+    stroke: 'var(--color-pv)',
+    strokeWidth: 2,
+  },
+];
+
+const singleLine = [
+  {
+    type: 'monotone' as const,
+    dataKey: 'uv',
+    stroke: 'var(--color-uv)',
+    strokeWidth: 2,
+  },
+];
+
+export const Default: Story = {
+  args: {
+    title: 'Line Chart - Multiple Lines',
+    subTitle: 'Page metrics over time',
+    showSubtitle: true,
+    width: 700,
+    height: 400,
+    showToolTip: true,
+    showLegend: true,
+    dataKey: 'name',
+    data: pageMetricsData,
+    lines: lines,
+    config: chartConfig,
+    cartesianGrid: { showCartesianGrid: true, size: 3 },
+    margin: { top: 30, right: 20, bottom: 30, left: 20 },
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ width: '800px', padding: '20px' }}>
+        <Story />
+      </div>
+    ),
+  ],
+};
 
-export const Default = {
-  render: (args: LineChartProps) => <LineChart {...args} />,
+export const WithAxisLabels: Story = {
   args: {
-    title: 'Line Chart Example',
+    title: 'Line Chart with Axis Labels',
+    subTitle: 'UV and PV comparison',
+    showSubtitle: true,
     width: 700,
-    height: 500,
+    height: 400,
     showToolTip: true,
     showLegend: true,
     dataKey: 'name',
-    data: data,
+    data: pageMetricsData,
     lines: lines,
+    config: chartConfig,
     cartesianGrid: { showCartesianGrid: true, size: 3 },
     axisLabelProps: {
       xLabel: { value: 'Pages', dy: 20 },
       yLabel: { value: 'Values', dx: -10, angle: -90 },
     },
+    margin: { top: 30, right: 20, bottom: 30, left: 20 },
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ width: '800px', padding: '20px' }}>
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export const SingleLine: Story = {
+  args: {
+    title: 'Single Line Chart',
+    subTitle: 'Unique visitors only',
+    showSubtitle: true,
+    width: 700,
+    height: 400,
+    showToolTip: true,
+    showLegend: false,
+    dataKey: 'name',
+    data: pageMetricsData,
+    lines: singleLine,
+    config: chartConfig,
+    cartesianGrid: { showCartesianGrid: true, size: 3 },
+    margin: { top: 30, right: 20, bottom: 30, left: 20 },
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ width: '800px', padding: '20px' }}>
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export const WithoutGrid: Story = {
+  args: {
+    title: 'Line Chart - No Grid',
+    subTitle: 'Clean view without grid lines',
+    showSubtitle: true,
+    width: 700,
+    height: 400,
+    showToolTip: true,
+    showLegend: true,
+    dataKey: 'name',
+    data: pageMetricsData,
+    lines: lines,
+    config: chartConfig,
+    cartesianGrid: { showCartesianGrid: false },
+    margin: { top: 30, right: 20, bottom: 30, left: 20 },
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ width: '800px', padding: '20px' }}>
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export const Minimal: Story = {
+  args: {
+    width: 600,
+    height: 300,
+    showToolTip: false,
+    showLegend: false,
+    dataKey: 'name',
+    data: pageMetricsData,
+    lines: singleLine,
+    config: chartConfig,
+    cartesianGrid: { showCartesianGrid: false },
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ width: '700px', padding: '20px' }}>
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export const CompactView: Story = {
+  args: {
+    title: 'Compact Line Chart',
+    width: 500,
+    height: 250,
+    showToolTip: true,
+    showLegend: true,
+    dataKey: 'name',
+    data: pageMetricsData,
+    lines: lines,
+    config: chartConfig,
+    cartesianGrid: { showCartesianGrid: true, size: 3 },
+    margin: { top: 20, right: 15, bottom: 20, left: 15 },
     legendSx: {
-      layout: 'horizontal',
-      align: 'center',
       verticalAlign: 'top',
+      align: 'right',
     },
-    margin: { top: 30, right: 20, bottom: 30, left: 20 },
   },
+  decorators: [
+    (Story) => (
+      <div style={{ width: '600px', padding: '20px' }}>
+        <Story />
+      </div>
+    ),
+  ],
 };

package/src/stories/Charts/PieChart.stories.tsx

@@ -1,45 +1,66 @@
-import { Meta } from '@storybook/react';
-import {
-  PieChart,
-  PieChartProps,
-} from '../../components/Charts/PieChart/PieChart';
+import type { Meta, StoryObj } from '@storybook/react';
+import { PieChart } from '../../components/Charts/PieChart/PieChart';
+import { ChartConfig } from '../../components/Charts/export';
 
 const pieData1 = [
-  { name: 'Group A', value: 400 },
-  { name: 'Group B', value: 300 },
-  { name: 'Group C', value: 300 },
-  { name: 'Group D', value: 200 },
+  { category: 'groupA', value: 400 },
+  { category: 'groupB', value: 300 },
+  { category: 'groupC', value: 300 },
+  { category: 'groupD', value: 200 },
 ];
 
 const pieData2 = [
-  { name: 'Group A', value: 2400 },
-  { name: 'Group B', value: 4567 },
-  { name: 'Group C', value: 1398 },
-  { name: 'Group D', value: 9800 },
+  { category: 'groupA', value: 2400 },
+  { category: 'groupB', value: 4567 },
+  { category: 'groupC', value: 1398 },
+  { category: 'groupD', value: 9800 },
 ];
 
 const colors1 = ['#0088FE', '#00C49F', '#FFBB28', '#FF8042'];
 const colors2 = ['#721C24', '#D33F6A', '#FFC0CB', '#341F97'];
 
-export default {
+const chartConfig: ChartConfig = {
+  groupA: {
+    label: 'Group A',
+    color: '#0088FE',
+  },
+  groupB: {
+    label: 'Group B',
+    color: '#00C49F',
+  },
+  groupC: {
+    label: 'Group C',
+    color: '#FFBB28',
+  },
+  groupD: {
+    label: 'Group D',
+    color: '#FF8042',
+  },
+};
+
+const meta: Meta<typeof PieChart> = {
   title: 'Charts/PieChart',
   component: PieChart,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
   argTypes: {
     title: {
       control: 'text',
-      description: 'Title of the chart',
+      description: 'Chart title',
     },
-    titleSx: {
-      control: 'object',
-      description: 'Styling for the title',
+    showSubtitle: {
+      control: 'boolean',
+      description: 'Show subtitle',
     },
     width: {
       control: 'number',
-      description: 'Width of the chart',
+      description: 'Chart width in pixels',
     },
     height: {
       control: 'number',
-      description: 'Height of the chart',
+      description: 'Chart height in pixels',
     },
     margin: {
       control: 'object',
@@ -47,46 +68,32 @@ export default {
     },
     showToolTip: {
       control: 'boolean',
-      description: 'Toggle tooltip visibility',
+      description: 'Show tooltip on hover',
     },
     showLegend: {
       control: 'boolean',
-      description: 'Toggle legend visibility',
-    },
-    legendSx: {
-      control: 'object',
-      description: 'Styling for the legend',
-    },
-    containerSx: {
-      control: 'object',
-      description: 'Styling for the container',
-    },
-    pie1: {
-      control: 'object',
-      description: 'Configuration for the first pie',
-    },
-    pie2: {
-      control: 'object',
-      description: 'Configuration for the second pie',
-    },
-    pieChartStyle: {
-      control: 'object',
-      description: 'Styling for the bar chart',
+      description: 'Show legend',
     },
   },
-} as Meta<typeof PieChart>;
+};
+
+export default meta;
+type Story = StoryObj<typeof PieChart>;
 
-export const Default = {
-  render: (args: PieChartProps) => <PieChart {...args} />,
+export const Default: Story = {
   args: {
     title: 'Pie Chart Example',
+    subTitle: 'Nested pie chart with two datasets',
+    showSubtitle: true,
     width: 500,
     height: 500,
     showToolTip: true,
     showLegend: true,
+    config: chartConfig,
     pie1: {
       data: pieData1,
       dataKey: 'value',
+      nameKey: 'category',
       outerRadius: 80,
       fill: '#8884d8',
       colors: colors1,
@@ -94,6 +101,7 @@ export const Default = {
     pie2: {
       data: pieData2,
       dataKey: 'value',
+      nameKey: 'category',
       innerRadius: 90,
       outerRadius: 120,
       fill: '#82ca9d',
@@ -105,22 +113,31 @@ export const Default = {
       align: 'center',
       verticalAlign: 'bottom',
     },
-    containerSx: { padding: 2 },
     margin: { top: 20, right: 20, bottom: 20, left: 20 },
   },
+  decorators: [
+    (Story) => (
+      <div style={{ width: '600px', padding: '20px' }}>
+        <Story />
+      </div>
+    ),
+  ],
 };
 
-export const SinglePie = {
-  render: (args: PieChartProps) => <PieChart {...args} />,
+export const SinglePie: Story = {
   args: {
     title: 'Single Pie Chart Example',
+    subTitle: 'Simple pie chart with one dataset',
+    showSubtitle: true,
     width: 500,
     height: 500,
     showToolTip: true,
     showLegend: true,
+    config: chartConfig,
     pie1: {
       data: pieData1,
       dataKey: 'value',
+      nameKey: 'category',
       outerRadius: 100,
       fill: '#8884d8',
       label: true,
@@ -131,7 +148,13 @@ export const SinglePie = {
       align: 'center',
       verticalAlign: 'bottom',
     },
-    containerSx: { border: '1px solid black', padding: 2 },
     margin: { top: 20, right: 20, bottom: 20, left: 20 },
   },
+  decorators: [
+    (Story) => (
+      <div style={{ width: '600px', padding: '20px' }}>
+        <Story />
+      </div>
+    ),
+  ],
 };

package/src/stories/Charts/Treemap.stories.tsx

@@ -1,5 +1,6 @@
-import { Meta } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 import TreeMap from '../../components/Charts/TreeMap/TreeMap';
+import { ChartConfig } from '../../components/Charts/export';
 
 const data = [
   {
@@ -143,17 +144,40 @@ const COLORS = [
   '#F8C12D',
 ];
 
-export default {
+const chartConfig: ChartConfig = {
+  size: {
+    label: 'Size',
+    color: '#F8C12D',
+  },
+};
+
+const meta: Meta<typeof TreeMap> = {
   title: 'Charts/TreeMap',
   component: TreeMap,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
   argTypes: {
     title: {
       control: 'text',
       description: 'Title of the TreeMap',
     },
-    titleSx: {
+    titleProps: {
       control: 'object',
-      description: 'Styling for the title',
+      description: 'Props for the title typography',
+    },
+    showSubtitle: {
+      control: 'boolean',
+      description: 'Show subtitle',
+    },
+    subTitle: {
+      control: 'text',
+      description: 'Subtitle text',
+    },
+    subTitleProps: {
+      control: 'object',
+      description: 'Props for the subtitle typography',
     },
     dataKey: {
       control: 'text',
@@ -199,26 +223,35 @@ export default {
       control: 'text',
       description: 'Animation easing',
     },
-    treeMapStyle: {
-      control: 'object',
-      description: 'Styling for the TreeMap',
-    },
-    containerSx: {
-      control: 'object',
-      description: 'Styling for the container',
+    className: {
+      control: 'text',
+      description: 'Additional CSS classes',
     },
   },
-} as Meta<typeof TreeMap>;
+};
 
-export const Default = () => {
-  return (
-    <TreeMap
-      title="Tree Map Example"
-      width={800}
-      height={600}
-      data={data}
-      colors={COLORS}
-      dataKey={'size'}
-    />
-  );
+export default meta;
+type Story = StoryObj<typeof TreeMap>;
+
+export const Default: Story = {
+  args: {
+    title: 'Tree Map Example',
+    width: 800,
+    height: 600,
+    data: data,
+    colors: COLORS,
+    dataKey: 'size',
+    config: chartConfig,
+    showToolTip: true,
+    isAnimationActive: false,
+    fill: '#F8C12D',
+    stroke: '#fff',
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ width: '900px', padding: '20px' }}>
+        <Story />
+      </div>
+    ),
+  ],
 };