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

package/src/shadcn-components/Navigation/Tabs/Tabs.tsx

@@ -0,0 +1,64 @@
+import * as TabsPrimitive from '@radix-ui/react-tabs';
+import * as React from 'react';
+
+import { cn } from '@/lib/utils';
+
+function Tabs({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Root>) {
+  return (
+    <TabsPrimitive.Root
+      data-slot="tabs"
+      className={cn('flex flex-col gap-2', className)}
+      {...props}
+    />
+  );
+}
+
+function TabsList({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.List>) {
+  return (
+    <TabsPrimitive.List
+      data-slot="tabs-list"
+      className={cn(
+        'bg-background text-foreground inline-flex h-9 w-full sm:w-fit items-center justify-start sm:justify-center rounded-lg p-[3px] overflow-x-auto scrollbar-hide gap-3',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function TabsTrigger({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
+  return (
+    <TabsPrimitive.Trigger
+      data-slot="tabs-trigger"
+      className={cn(
+        "data-[state=active]:bg-muted data-[state=active]:text-secondary-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 sm:flex-none items-center justify-center gap-1.5 rounded-md border border-transparent px-3 sm:px-2 py-1 text-sm font-medium whitespace-nowrap transition-colors focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function TabsContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Content>) {
+  return (
+    <TabsPrimitive.Content
+      data-slot="tabs-content"
+      className={cn('outline-none w-full', className)}
+      {...props}
+    />
+  );
+}
+
+export { Tabs, TabsContent, TabsList, TabsTrigger };

package/src/stories/Assets/Icons.stories.tsx

@@ -1,25 +1,38 @@
 // Import React and other necessary elements
-import { Stack } from '@mui/material';
 import { Meta, StoryObj } from '@storybook/react/*';
 
 import { Icons, Typography } from '../../components/export';
 
 const IconsStory = () => {
   return (
-    <Stack gap={2} direction={'column'}>
-      {Object.entries(Icons).map(([key, Icon], index) => (
-        <Stack
-          key={index}
-          direction="row"
-          alignItems="center"
-          gap={4}
-          justifyContent="space-between"
-        >
-          <Typography>{key}</Typography>
-          <Icon />
-        </Stack>
-      ))}
-    </Stack>
+    <div className="flex flex-col gap-2">
+      <div className="mb-4 p-4 bg-red-50 border border-red-200 rounded-md">
+        <Typography className="text-red-800">
+          <strong>⚠️ Note:</strong> Custom Icons have been removed and replaced
+          with Lucide Icons. Please use{' '}
+          <a
+            href="https://lucide.dev/icons/"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="text-blue-600 underline hover:text-blue-800"
+          >
+            Lucide Icons
+          </a>{' '}
+          for all future icon needs.
+        </Typography>
+      </div>
+      <div className="flex flex-col gap-2">
+        {Object.entries(Icons).map(([key, Icon], index) => (
+          <div
+            key={index}
+            className="flex flex-row items-center gap-4 justify-between"
+          >
+            <Typography>{key}</Typography>
+            <Icon />
+          </div>
+        ))}
+      </div>
+    </div>
   );
 };
 

package/src/stories/Charts/BarChart.stories.tsx

@@ -1,145 +1,368 @@
-import { Meta } from '@storybook/react';
-import {
-  BarChart,
-  BarChartProps,
-} from '../../components/Charts/BarChart/BarChart';
-
-const data = [
-  {
-    name: 'Page A',
-    sub: 'PA',
-    uv: 4000,
-    pv: 2400,
-    amt: 2400,
-  },
-  {
-    name: 'Page B',
-    sub: 'PB',
-    uv: 3000,
-    pv: 1398,
-    amt: 2210,
-  },
-  {
-    name: 'Page C',
-    sub: 'PC',
-    uv: 2000,
-    pv: 9800,
-    amt: 2290,
-  },
-];
-
-const bars = [
-  { dataKey: 'uv', stackId: 'a', fill: '#0088FE' },
-  { dataKey: 'pv', stackId: 'a', fill: '#00C49F' },
-  { dataKey: 'amt', stackId: 'b', fill: '#FFBB28' },
-];
+import type { Meta, StoryObj } from '@storybook/react';
+import BarChart from '../../components/Charts/BarChart/BarChart';
+import { ChartConfig } from '../../components/Charts/export';
 
-export default {
+const meta: Meta<typeof BarChart> = {
   title: 'Charts/BarChart',
   component: BarChart,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
   argTypes: {
-    title: {
-      control: 'text',
-      description: 'Title of the chart',
-    },
-    titleSx: {
-      control: 'object',
-      description: 'Styling for the title',
+    variant: {
+      control: 'select',
+      options: ['vertical', 'horizontal'],
+      description: 'Chart orientation',
     },
-    width: {
-      control: 'number',
-      description: 'Width of the chart',
-    },
-    height: {
-      control: 'number',
-      description: 'Height of the chart',
-    },
-    margin: {
-      control: 'object',
-      description: 'Margin around the chart',
-    },
-    showToolTip: {
+    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',
-    },
-    bars: {
-      control: 'object',
-      description: 'Bars configuration',
-    },
-    cartesianGrid: {
-      control: 'object',
-      description: 'Configuration for the Cartesian grid',
-    },
-    axisLabelProps: {
-      control: 'object',
-      description: 'Labels for the axes',
-    },
-    axisStroke: {
-      control: 'color',
-      description: 'Stroke color for the axes',
+    showLabels: {
+      control: 'boolean',
+      description: 'Show labels on bars',
     },
-    barGap: {
-      control: 'number',
-      description: 'Gap between bars',
+    showGrid: {
+      control: 'boolean',
+      description: 'Show cartesian grid',
     },
     barSize: {
       control: 'number',
-      description: 'Size of the bars',
-    },
-    barChartStyle: {
-      control: 'object',
-      description: 'Styling for the bar chart',
+      description: 'Bar size in pixels',
     },
-    layout: {
-      control: {
-        type: 'radio',
-        options: ['horizontal', 'vertical'],
-      },
-      description: 'Layout of the chart',
+    radius: {
+      control: 'number',
+      description: 'Bar border radius',
     },
   },
-} as Meta<typeof BarChart>;
+};
+
+export default meta;
+type Story = StoryObj<typeof BarChart>;
+
+// Sample data for monthly revenue
+const monthlyRevenueData = [
+  { 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: ChartConfig = {
+  desktop: {
+    label: 'Desktop',
+    color: 'hsl(var(--chart-1))',
+  },
+  mobile: {
+    label: 'Mobile',
+    color: 'hsl(var(--chart-2))',
+  },
+};
+
+// Single data key for simpler examples
+const singleKeyData = [
+  { month: 'January', desktop: 186 },
+  { month: 'February', desktop: 305 },
+  { month: 'March', desktop: 237 },
+  { month: 'April', desktop: 73 },
+  { month: 'May', desktop: 209 },
+  { month: 'June', desktop: 214 },
+];
+
+// ============= VERTICAL BAR CHARTS =============
 
-export const Default = {
-  render: (args: BarChartProps) => <BarChart {...args} />,
+export const VerticalDefault: Story = {
   args: {
-    data: data,
-    bars: bars,
-    dataKey: 'sub',
-    containerSx: { width: '800px', height: '800px' },
-    cartesianGrid: { showCartesianGrid: true, size: 5 },
-    axisLabelProps: {
-      xLabel: { value: 'X-Axis', dy: 20 },
-      yLabel: { value: 'Y-Axis', dx: -20, angle: -90 },
-    },
-    legendSx: {
-      width: 150,
-      height: 150,
-      layout: 'vertical',
-      align: 'right',
-      verticalAlign: 'top',
-      iconType: 'line',
-    },
-    margin: { top: 20, left: 30, bottom: 20, right: 30 },
+    data: monthlyRevenueData,
+    dataKeys: ['desktop', 'mobile'],
+    xAxisKey: 'month',
+    config: chartConfig,
+    variant: 'vertical',
+    title: 'Bar Chart - Multiple',
+    subtitle: 'January - June 2024',
+    showTooltip: true,
+    showGrid: true,
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ width: '800px', padding: '20px' }}>
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export const VerticalWithLegend: Story = {
+  args: {
+    data: monthlyRevenueData,
+    dataKeys: ['desktop', 'mobile'],
+    xAxisKey: 'month',
+    config: chartConfig,
+    variant: 'vertical',
+    title: 'Revenue by Device Type',
+    subtitle: 'Desktop vs Mobile traffic',
+    showTooltip: true,
+    showLegend: true,
+    showGrid: true,
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ width: '800px', padding: '20px' }}>
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export const VerticalStacked: Story = {
+  args: {
+    data: monthlyRevenueData,
+    dataKeys: ['desktop', 'mobile'],
+    xAxisKey: 'month',
+    config: chartConfig,
+    variant: 'vertical',
+    title: 'Stacked Bar Chart',
+    subtitle: 'Total revenue by month',
+    showTooltip: true,
+    showLegend: true,
+    showGrid: true,
+    stackId: 'total',
   },
+  decorators: [
+    (Story) => (
+      <div style={{ width: '800px', padding: '20px' }}>
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export const VerticalWithLabels: Story = {
+  args: {
+    data: singleKeyData,
+    dataKeys: ['desktop'],
+    xAxisKey: 'month',
+    config: chartConfig,
+    variant: 'vertical',
+    title: 'Bar Chart with Labels',
+    subtitle: 'Values displayed on bars',
+    showTooltip: true,
+    showGrid: true,
+    showLabels: true,
+    labelPosition: 'top',
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ width: '800px', padding: '20px' }}>
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export const VerticalCustomLabels: Story = {
+  args: {
+    data: singleKeyData,
+    dataKeys: ['desktop'],
+    xAxisKey: 'month',
+    config: chartConfig,
+    variant: 'vertical',
+    title: 'Custom Label Formatter',
+    subtitle: 'Currency formatting',
+    showTooltip: true,
+    showGrid: false,
+    showLabels: true,
+    labelPosition: 'top',
+    labelFormatter: (value: number) => `$${value}`,
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ width: '800px', padding: '20px' }}>
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export const VerticalMinimal: Story = {
+  args: {
+    data: singleKeyData,
+    dataKeys: ['desktop'],
+    xAxisKey: 'month',
+    config: chartConfig,
+    variant: 'vertical',
+    showTooltip: false,
+    showGrid: false,
+    radius: 8,
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ width: '600px', padding: '20px' }}>
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+// ============= HORIZONTAL BAR CHARTS =============
+
+export const HorizontalDefault: Story = {
+  args: {
+    data: singleKeyData,
+    dataKeys: ['desktop'],
+    xAxisKey: 'month',
+    config: chartConfig,
+    variant: 'horizontal',
+    title: 'Bar Chart - Horizontal',
+    subtitle: 'January - June 2024',
+    showTooltip: true,
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ width: '800px', padding: '20px' }}>
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export const HorizontalMultiple: Story = {
+  args: {
+    data: monthlyRevenueData,
+    dataKeys: ['desktop', 'mobile'],
+    xAxisKey: 'month',
+    config: chartConfig,
+    variant: 'horizontal',
+    title: 'Horizontal Bar - Multiple Series',
+    subtitle: 'Desktop vs Mobile comparison',
+    showTooltip: true,
+    showLegend: true,
+    barSize: 25,
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ width: '900px', padding: '20px' }}>
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export const HorizontalStacked: Story = {
+  args: {
+    data: monthlyRevenueData,
+    dataKeys: ['desktop', 'mobile'],
+    xAxisKey: 'month',
+    config: chartConfig,
+    variant: 'horizontal',
+    title: 'Horizontal Stacked Bar Chart',
+    subtitle: 'Combined device metrics',
+    showTooltip: true,
+    showLegend: true,
+    stackId: 'total',
+    barSize: 30,
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ width: '900px', padding: '20px' }}>
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export const HorizontalCompact: Story = {
+  args: {
+    data: singleKeyData,
+    dataKeys: ['desktop'],
+    xAxisKey: 'month',
+    config: chartConfig,
+    variant: 'horizontal',
+    title: 'Compact Horizontal Chart',
+    subtitle: 'Smaller bars with custom formatting',
+    showTooltip: true,
+    barSize: 20,
+    height: 350,
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ width: '700px', padding: '20px' }}>
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export const HorizontalMinimal: Story = {
+  args: {
+    data: singleKeyData,
+    dataKeys: ['desktop'],
+    xAxisKey: 'month',
+    config: chartConfig,
+    variant: 'horizontal',
+    showTooltip: false,
+    hideXAxis: true,
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ width: '600px', padding: '20px' }}>
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+// ============= COMPARISON EXAMPLES =============
+
+export const Comparison: Story = {
+  render: () => (
+    <div
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '40px',
+        padding: '20px',
+      }}
+    >
+      <div>
+        <h3 style={{ marginBottom: '20px' }}>Vertical Bar Chart</h3>
+        <BarChart
+          data={monthlyRevenueData}
+          dataKeys={['desktop', 'mobile']}
+          xAxisKey="month"
+          config={chartConfig}
+          variant="vertical"
+          showTooltip
+          showLegend
+          showGrid
+        />
+      </div>
+      <div>
+        <h3 style={{ marginBottom: '20px' }}>Horizontal Bar Chart</h3>
+        <BarChart
+          data={monthlyRevenueData}
+          dataKeys={['desktop', 'mobile']}
+          xAxisKey="month"
+          config={chartConfig}
+          variant="horizontal"
+          showTooltip
+          showLegend
+        />
+      </div>
+    </div>
+  ),
+  decorators: [
+    (Story) => (
+      <div style={{ width: '900px' }}>
+        <Story />
+      </div>
+    ),
+  ],
 };