@campxdev/react-blueprint 1.9.6 → 2.0.1

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

@@ -1,41 +0,0 @@
-// 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>
-  );
-};
-
-export default {
-  title: 'Assets/Icons',
-  component: IconsStory,
-  tags: ['autodocs'],
-  argTypes: {},
-} as Meta<typeof IconsStory>;
-
-type Story = StoryObj<typeof IconsStory>;
-
-export const Icon: Story = {
-  render: (args: any) => (
-    <>
-      <IconsStory />
-    </>
-  ),
-};

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

@@ -1,145 +0,0 @@
-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' },
-];
-
-export default {
-  title: 'Charts/BarChart',
-  component: BarChart,
-  argTypes: {
-    title: {
-      control: 'text',
-      description: 'Title of the chart',
-    },
-    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',
-    },
-    showToolTip: {
-      control: 'boolean',
-      description: 'Toggle tooltip visibility',
-    },
-    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',
-    },
-    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',
-    },
-    barGap: {
-      control: 'number',
-      description: 'Gap between bars',
-    },
-    barSize: {
-      control: 'number',
-      description: 'Size of the bars',
-    },
-    barChartStyle: {
-      control: 'object',
-      description: 'Styling for the bar chart',
-    },
-    layout: {
-      control: {
-        type: 'radio',
-        options: ['horizontal', 'vertical'],
-      },
-      description: 'Layout of the chart',
-    },
-  },
-} as Meta<typeof BarChart>;
-
-export const Default = {
-  render: (args: BarChartProps) => <BarChart {...args} />,
-  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 },
-  },
-};

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

@@ -1,112 +0,0 @@
-import { Meta } from '@storybook/react';
-import {
-  LineChart,
-  LineChartProps,
-} from '../../components/Charts/LineChart/LineChart';
-
-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 {
-  title: 'Charts/LineChart',
-  component: LineChart,
-  argTypes: {
-    title: {
-      control: 'text',
-      description: 'Title of the chart',
-    },
-    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',
-    },
-    showToolTip: {
-      control: 'boolean',
-      description: 'Toggle tooltip visibility',
-    },
-    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',
-    },
-    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',
-    },
-    lineChartStyle: {
-      control: 'object',
-      description: 'Styling for the bar chart',
-    },
-  },
-} as Meta<typeof LineChart>;
-
-export const Default = {
-  render: (args: LineChartProps) => <LineChart {...args} />,
-  args: {
-    title: 'Line Chart Example',
-    width: 700,
-    height: 500,
-    showToolTip: true,
-    showLegend: true,
-    dataKey: 'name',
-    data: data,
-    lines: lines,
-    cartesianGrid: { showCartesianGrid: true, size: 3 },
-    axisLabelProps: {
-      xLabel: { value: 'Pages', dy: 20 },
-      yLabel: { value: 'Values', dx: -10, angle: -90 },
-    },
-    legendSx: {
-      layout: 'horizontal',
-      align: 'center',
-      verticalAlign: 'top',
-    },
-    margin: { top: 30, right: 20, bottom: 30, left: 20 },
-  },
-};

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

@@ -1,137 +0,0 @@
-import { Meta } from '@storybook/react';
-import {
-  PieChart,
-  PieChartProps,
-} from '../../components/Charts/PieChart/PieChart';
-
-const pieData1 = [
-  { name: 'Group A', value: 400 },
-  { name: 'Group B', value: 300 },
-  { name: 'Group C', value: 300 },
-  { name: 'Group D', value: 200 },
-];
-
-const pieData2 = [
-  { name: 'Group A', value: 2400 },
-  { name: 'Group B', value: 4567 },
-  { name: 'Group C', value: 1398 },
-  { name: 'Group D', value: 9800 },
-];
-
-const colors1 = ['#0088FE', '#00C49F', '#FFBB28', '#FF8042'];
-const colors2 = ['#721C24', '#D33F6A', '#FFC0CB', '#341F97'];
-
-export default {
-  title: 'Charts/PieChart',
-  component: PieChart,
-  argTypes: {
-    title: {
-      control: 'text',
-      description: 'Title of the chart',
-    },
-    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',
-    },
-    showToolTip: {
-      control: 'boolean',
-      description: 'Toggle tooltip visibility',
-    },
-    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',
-    },
-  },
-} as Meta<typeof PieChart>;
-
-export const Default = {
-  render: (args: PieChartProps) => <PieChart {...args} />,
-  args: {
-    title: 'Pie Chart Example',
-    width: 500,
-    height: 500,
-    showToolTip: true,
-    showLegend: true,
-    pie1: {
-      data: pieData1,
-      dataKey: 'value',
-      outerRadius: 80,
-      fill: '#8884d8',
-      colors: colors1,
-    },
-    pie2: {
-      data: pieData2,
-      dataKey: 'value',
-      innerRadius: 90,
-      outerRadius: 120,
-      fill: '#82ca9d',
-      label: true,
-      colors: colors2,
-    },
-    legendSx: {
-      layout: 'horizontal',
-      align: 'center',
-      verticalAlign: 'bottom',
-    },
-    containerSx: { padding: 2 },
-    margin: { top: 20, right: 20, bottom: 20, left: 20 },
-  },
-};
-
-export const SinglePie = {
-  render: (args: PieChartProps) => <PieChart {...args} />,
-  args: {
-    title: 'Single Pie Chart Example',
-    width: 500,
-    height: 500,
-    showToolTip: true,
-    showLegend: true,
-    pie1: {
-      data: pieData1,
-      dataKey: 'value',
-      outerRadius: 100,
-      fill: '#8884d8',
-      label: true,
-      colors: ['#8884d8', '#83a6ed', '#8dd1e1', '#82ca9d'],
-    },
-    legendSx: {
-      layout: 'horizontal',
-      align: 'center',
-      verticalAlign: 'bottom',
-    },
-    containerSx: { border: '1px solid black', padding: 2 },
-    margin: { top: 20, right: 20, bottom: 20, left: 20 },
-  },
-};

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

@@ -1,224 +0,0 @@
-import { Meta } from '@storybook/react';
-import TreeMap from '../../components/Charts/TreeMap/TreeMap';
-
-const data = [
-  {
-    name: 'axis',
-    children: [
-      { name: 'Axes', size: 1302 },
-      { name: 'Axis', size: 24593 },
-      { name: 'AxisGridLine', size: 652 },
-      { name: 'AxisLabel', size: 636 },
-      { name: 'CartesianAxes', size: 6703 },
-    ],
-  },
-  {
-    name: 'controls',
-    children: [
-      { name: 'AnchorControl', size: 2138 },
-      { name: 'ClickControl', size: 3824 },
-      { name: 'Control', size: 1353 },
-      { name: 'ControlList', size: 4665 },
-      { name: 'DragControl', size: 2649 },
-      { name: 'ExpandControl', size: 2832 },
-      { name: 'HoverControl', size: 4896 },
-      { name: 'IControl', size: 763 },
-      { name: 'PanZoomControl', size: 5222 },
-      { name: 'SelectionControl', size: 7862 },
-      { name: 'TooltipControl', size: 8435 },
-    ],
-  },
-  {
-    name: 'data',
-    children: [
-      { name: 'Data', size: 20544 },
-      { name: 'DataList', size: 19788 },
-      { name: 'DataSprite', size: 10349 },
-      { name: 'EdgeSprite', size: 3301 },
-      { name: 'NodeSprite', size: 19382 },
-      {
-        name: 'render',
-        children: [
-          { name: 'ArrowType', size: 698 },
-          { name: 'EdgeRenderer', size: 5569 },
-          { name: 'IRenderer', size: 353 },
-          { name: 'ShapeRenderer', size: 2247 },
-        ],
-      },
-      { name: 'ScaleBinding', size: 11275 },
-      { name: 'Tree', size: 7147 },
-      { name: 'TreeBuilder', size: 9930 },
-    ],
-  },
-  {
-    name: 'events',
-    children: [
-      { name: 'DataEvent', size: 7313 },
-      { name: 'SelectionEvent', size: 6880 },
-      { name: 'TooltipEvent', size: 3701 },
-      { name: 'VisualizationEvent', size: 2117 },
-    ],
-  },
-  {
-    name: 'legend',
-    children: [
-      { name: 'Legend', size: 20859 },
-      { name: 'LegendItem', size: 4614 },
-      { name: 'LegendRange', size: 10530 },
-    ],
-  },
-  {
-    name: 'operator',
-    children: [
-      {
-        name: 'distortion',
-        children: [
-          { name: 'BifocalDistortion', size: 4461 },
-          { name: 'Distortion', size: 6314 },
-          { name: 'FisheyeDistortion', size: 3444 },
-        ],
-      },
-      {
-        name: 'encoder',
-        children: [
-          { name: 'ColorEncoder', size: 3179 },
-          { name: 'Encoder', size: 4060 },
-          { name: 'PropertyEncoder', size: 4138 },
-          { name: 'ShapeEncoder', size: 1690 },
-          { name: 'SizeEncoder', size: 1830 },
-        ],
-      },
-      {
-        name: 'filter',
-        children: [
-          { name: 'FisheyeTreeFilter', size: 5219 },
-          { name: 'GraphDistanceFilter', size: 3165 },
-          { name: 'VisibilityFilter', size: 3509 },
-        ],
-      },
-      { name: 'IOperator', size: 1286 },
-      {
-        name: 'label',
-        children: [
-          { name: 'Labeler', size: 9956 },
-          { name: 'RadialLabeler', size: 3899 },
-          { name: 'StackedAreaLabeler', size: 3202 },
-        ],
-      },
-      {
-        name: 'layout',
-        children: [
-          { name: 'AxisLayout', size: 6725 },
-          { name: 'BundledEdgeRouter', size: 3727 },
-          { name: 'CircleLayout', size: 9317 },
-          { name: 'CirclePackingLayout', size: 12003 },
-          { name: 'DendrogramLayout', size: 4853 },
-          { name: 'ForceDirectedLayout', size: 8411 },
-          { name: 'IcicleTreeLayout', size: 4864 },
-          { name: 'IndentedTreeLayout', size: 3174 },
-          { name: 'Layout', size: 7881 },
-          { name: 'NodeLinkTreeLayout', size: 12870 },
-          { name: 'PieLayout', size: 2728 },
-          { name: 'RadialTreeLayout', size: 12348 },
-          { name: 'RandomLayout', size: 870 },
-          { name: 'StackedAreaLayout', size: 9121 },
-          { name: 'TreeMapLayout', size: 9191 },
-        ],
-      },
-      { name: 'Operator', size: 2490 },
-      { name: 'OperatorList', size: 5248 },
-      { name: 'OperatorSequence', size: 4190 },
-      { name: 'OperatorSwitch', size: 2581 },
-      { name: 'SortOperator', size: 2023 },
-    ],
-  },
-];
-
-const COLORS = [
-  '#8889DD',
-  '#9597E4',
-  '#8DC77B',
-  '#A5D297',
-  '#E2CF45',
-  '#F8C12D',
-];
-
-export default {
-  title: 'Charts/TreeMap',
-  component: TreeMap,
-  argTypes: {
-    title: {
-      control: 'text',
-      description: 'Title of the TreeMap',
-    },
-    titleSx: {
-      control: 'object',
-      description: 'Styling for the title',
-    },
-    dataKey: {
-      control: 'text',
-      description: 'Key for the data value',
-    },
-    width: {
-      control: 'number',
-      description: 'Width of the TreeMap',
-    },
-    height: {
-      control: 'number',
-      description: 'Height of the TreeMap',
-    },
-    margin: {
-      control: 'object',
-      description: 'Margin around the TreeMap',
-    },
-    aspectRatio: {
-      control: 'number',
-      description: 'Aspect ratio of the TreeMap',
-    },
-    fill: {
-      control: 'color',
-      description: 'Fill color for the TreeMap',
-    },
-    stroke: {
-      control: 'color',
-      description: 'Stroke color for the TreeMap',
-    },
-    colors: {
-      control: { type: 'object' },
-      description: 'Array of colors for the TreeMap',
-    },
-    showToolTip: {
-      control: 'boolean',
-      description: 'Toggle tooltip visibility',
-    },
-    isAnimationActive: {
-      control: 'boolean',
-      description: 'Toggle animation',
-    },
-    animationEasing: {
-      control: 'text',
-      description: 'Animation easing',
-    },
-    treeMapStyle: {
-      control: 'object',
-      description: 'Styling for the TreeMap',
-    },
-    containerSx: {
-      control: 'object',
-      description: 'Styling for the container',
-    },
-  },
-} as Meta<typeof TreeMap>;
-
-export const Default = () => {
-  return (
-    <TreeMap
-      title="Tree Map Example"
-      width={800}
-      height={600}
-      data={data}
-      colors={COLORS}
-      dataKey={'size'}
-    />
-  );
-};