@campxdev/react-blueprint 1.1.7 → 1.1.9

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

@@ -1,11 +1,11 @@
 // Import React and other necessary elements
-import { Stack } from "@mui/material";
-import { Meta, StoryObj } from "@storybook/react/*";
-import { Icons } from "../../components/Assets/Icons/Icons";
+import { Stack } from '@mui/material';
+import { Meta, StoryObj } from '@storybook/react/*';
+import { Icons } from '../../components/Assets/Icons/Icons';
 
 const IconsStory = () => {
   return (
-    <Stack gap={2} direction={"row"}>
+    <Stack gap={2} direction={'row'}>
       {Object.values(Icons).map((Icon) => (
         <Icon />
       ))}
@@ -14,9 +14,9 @@ const IconsStory = () => {
 };
 
 export default {
-  title: "Assets/Icons",
+  title: 'Assets/Icons',
   component: IconsStory,
-  tags: ["autodocs"],
+  tags: ['autodocs'],
   argTypes: {},
 } as Meta<typeof IconsStory>;
 

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

@@ -1,24 +1,24 @@
-import { Meta } from "@storybook/react";
+import { Meta } from '@storybook/react';
 import {
   BarChart,
   BarChartProps,
-} from "../../components/Charts/BarChart/BarChart";
+} from '../../components/Charts/BarChart/BarChart';
 
 const data = [
   {
-    name: "Page A",
+    name: 'Page A',
     uv: 4000,
     pv: 2400,
     amt: 2400,
   },
   {
-    name: "Page B",
+    name: 'Page B',
     uv: 3000,
     pv: 1398,
     amt: 2210,
   },
   {
-    name: "Page C",
+    name: 'Page C',
     uv: 2000,
     pv: 9800,
     amt: 2290,
@@ -26,93 +26,93 @@ const data = [
 ];
 
 const bars = [
-  { dataKey: "uv", stackId: "a", fill: "#0088FE" },
-  { dataKey: "pv", stackId: "a", fill: "#00C49F" },
-  { dataKey: "amt", stackId: "b", fill: "#FFBB28" },
+  { dataKey: 'uv', stackId: 'a', fill: '#0088FE' },
+  { dataKey: 'pv', stackId: 'a', fill: '#00C49F' },
+  { dataKey: 'amt', stackId: 'b', fill: '#FFBB28' },
 ];
 
 export default {
-  title: "Charts/BarChart",
+  title: 'Charts/BarChart',
   component: BarChart,
   argTypes: {
     title: {
-      control: "text",
-      description: "Title of the chart",
+      control: 'text',
+      description: 'Title of the chart',
     },
     titleSx: {
-      control: "object",
-      description: "Styling for the title",
+      control: 'object',
+      description: 'Styling for the title',
     },
     width: {
-      control: "number",
-      description: "Width of the chart",
+      control: 'number',
+      description: 'Width of the chart',
     },
     height: {
-      control: "number",
-      description: "Height of the chart",
+      control: 'number',
+      description: 'Height of the chart',
     },
     margin: {
-      control: "object",
-      description: "Margin around the chart",
+      control: 'object',
+      description: 'Margin around the chart',
     },
     showToolTip: {
-      control: "boolean",
-      description: "Toggle tooltip visibility",
+      control: 'boolean',
+      description: 'Toggle tooltip visibility',
     },
     showLegend: {
-      control: "boolean",
-      description: "Toggle legend visibility",
+      control: 'boolean',
+      description: 'Toggle legend visibility',
     },
     legendSx: {
-      control: "object",
-      description: "Styling for the legend",
+      control: 'object',
+      description: 'Styling for the legend',
     },
     containerSx: {
-      control: "object",
-      description: "Styling for the container",
+      control: 'object',
+      description: 'Styling for the container',
     },
     dataKey: {
-      control: "text",
-      description: "Key for the X axis",
+      control: 'text',
+      description: 'Key for the X axis',
     },
     data: {
-      control: "object",
-      description: "Data for the chart",
+      control: 'object',
+      description: 'Data for the chart',
     },
     bars: {
-      control: "object",
-      description: "Bars configuration",
+      control: 'object',
+      description: 'Bars configuration',
     },
     cartesianGrid: {
-      control: "object",
-      description: "Configuration for the Cartesian grid",
+      control: 'object',
+      description: 'Configuration for the Cartesian grid',
     },
     axisLabelProps: {
-      control: "object",
-      description: "Labels for the axes",
+      control: 'object',
+      description: 'Labels for the axes',
     },
     axisStroke: {
-      control: "color",
-      description: "Stroke color for the axes",
+      control: 'color',
+      description: 'Stroke color for the axes',
     },
     barGap: {
-      control: "number",
-      description: "Gap between bars",
+      control: 'number',
+      description: 'Gap between bars',
     },
     barSize: {
-      control: "number",
-      description: "Size of the bars",
+      control: 'number',
+      description: 'Size of the bars',
     },
     barChartStyle: {
-      control: "object",
-      description: "Styling for the bar chart",
+      control: 'object',
+      description: 'Styling for the bar chart',
     },
     layout: {
       control: {
-        type: "radio",
-        options: ["horizontal", "vertical"],
+        type: 'radio',
+        options: ['horizontal', 'vertical'],
       },
-      description: "Layout of the chart",
+      description: 'Layout of the chart',
     },
   },
 } as Meta<typeof BarChart>;
@@ -122,20 +122,20 @@ export const Default = {
   args: {
     data: data,
     bars: bars,
-    dataKey: "name",
-    containerSx: { width: "800px", height: "800px" },
+    dataKey: 'name',
+    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 },
+      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",
+      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,87 +1,87 @@
-import { Meta } from "@storybook/react";
+import { Meta } from '@storybook/react';
 import {
   LineChart,
   LineChartProps,
-} from "../../components/Charts/LineChart/LineChart";
+} 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 },
+  { 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" },
+  { type: 'monotone', dataKey: 'uv', stroke: '#8884d8' },
+  { type: 'monotone', dataKey: 'pv', stroke: '#82ca9d' },
 ];
 
 export default {
-  title: "Charts/LineChart",
+  title: 'Charts/LineChart',
   component: LineChart,
   argTypes: {
     title: {
-      control: "text",
-      description: "Title of the chart",
+      control: 'text',
+      description: 'Title of the chart',
     },
     titleSx: {
-      control: "object",
-      description: "Styling for the title",
+      control: 'object',
+      description: 'Styling for the title',
     },
     width: {
-      control: "number",
-      description: "Width of the chart",
+      control: 'number',
+      description: 'Width of the chart',
     },
     height: {
-      control: "number",
-      description: "Height of the chart",
+      control: 'number',
+      description: 'Height of the chart',
     },
     margin: {
-      control: "object",
-      description: "Margin around the chart",
+      control: 'object',
+      description: 'Margin around the chart',
     },
     showToolTip: {
-      control: "boolean",
-      description: "Toggle tooltip visibility",
+      control: 'boolean',
+      description: 'Toggle tooltip visibility',
     },
     showLegend: {
-      control: "boolean",
-      description: "Toggle legend visibility",
+      control: 'boolean',
+      description: 'Toggle legend visibility',
     },
     legendSx: {
-      control: "object",
-      description: "Styling for the legend",
+      control: 'object',
+      description: 'Styling for the legend',
     },
     containerSx: {
-      control: "object",
-      description: "Styling for the container",
+      control: 'object',
+      description: 'Styling for the container',
     },
     dataKey: {
-      control: "text",
-      description: "Key for the X axis",
+      control: 'text',
+      description: 'Key for the X axis',
     },
     data: {
-      control: "object",
-      description: "Data for the chart",
+      control: 'object',
+      description: 'Data for the chart',
     },
     lines: {
-      control: "object",
-      description: "Lines configuration",
+      control: 'object',
+      description: 'Lines configuration',
     },
     cartesianGrid: {
-      control: "object",
-      description: "Configuration for the Cartesian grid",
+      control: 'object',
+      description: 'Configuration for the Cartesian grid',
     },
     axisLabelProps: {
-      control: "object",
-      description: "Labels for the axes",
+      control: 'object',
+      description: 'Labels for the axes',
     },
     lineChartStyle: {
-      control: "object",
-      description: "Styling for the bar chart",
+      control: 'object',
+      description: 'Styling for the bar chart',
     },
   },
 } as Meta<typeof LineChart>;
@@ -89,23 +89,23 @@ export default {
 export const Default = {
   render: (args: LineChartProps) => <LineChart {...args} />,
   args: {
-    title: "Line Chart Example",
+    title: 'Line Chart Example',
     width: 700,
     height: 500,
     showToolTip: true,
     showLegend: true,
-    dataKey: "name",
+    dataKey: 'name',
     data: data,
     lines: lines,
     cartesianGrid: { showCartesianGrid: true, size: 3 },
     axisLabelProps: {
-      xLabel: { value: "Pages", dy: 20 },
-      yLabel: { value: "Values", dx: -10, angle: -90 },
+      xLabel: { value: 'Pages', dy: 20 },
+      yLabel: { value: 'Values', dx: -10, angle: -90 },
     },
     legendSx: {
-      layout: "horizontal",
-      align: "center",
-      verticalAlign: "top",
+      layout: 'horizontal',
+      align: 'center',
+      verticalAlign: 'top',
     },
     margin: { top: 30, right: 20, bottom: 30, left: 20 },
   },

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

@@ -1,77 +1,77 @@
-import { Meta } from "@storybook/react";
+import { Meta } from '@storybook/react';
 import {
   PieChart,
   PieChartProps,
-} from "../../components/Charts/PieChart/PieChart";
+} 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 },
+  { 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 },
+  { 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"];
+const colors1 = ['#0088FE', '#00C49F', '#FFBB28', '#FF8042'];
+const colors2 = ['#721C24', '#D33F6A', '#FFC0CB', '#341F97'];
 
 export default {
-  title: "Charts/PieChart",
+  title: 'Charts/PieChart',
   component: PieChart,
   argTypes: {
     title: {
-      control: "text",
-      description: "Title of the chart",
+      control: 'text',
+      description: 'Title of the chart',
     },
     titleSx: {
-      control: "object",
-      description: "Styling for the title",
+      control: 'object',
+      description: 'Styling for the title',
     },
     width: {
-      control: "number",
-      description: "Width of the chart",
+      control: 'number',
+      description: 'Width of the chart',
     },
     height: {
-      control: "number",
-      description: "Height of the chart",
+      control: 'number',
+      description: 'Height of the chart',
     },
     margin: {
-      control: "object",
-      description: "Margin around the chart",
+      control: 'object',
+      description: 'Margin around the chart',
     },
     showToolTip: {
-      control: "boolean",
-      description: "Toggle tooltip visibility",
+      control: 'boolean',
+      description: 'Toggle tooltip visibility',
     },
     showLegend: {
-      control: "boolean",
-      description: "Toggle legend visibility",
+      control: 'boolean',
+      description: 'Toggle legend visibility',
     },
     legendSx: {
-      control: "object",
-      description: "Styling for the legend",
+      control: 'object',
+      description: 'Styling for the legend',
     },
     containerSx: {
-      control: "object",
-      description: "Styling for the container",
+      control: 'object',
+      description: 'Styling for the container',
     },
     pie1: {
-      control: "object",
-      description: "Configuration for the first pie",
+      control: 'object',
+      description: 'Configuration for the first pie',
     },
     pie2: {
-      control: "object",
-      description: "Configuration for the second pie",
+      control: 'object',
+      description: 'Configuration for the second pie',
     },
     pieChartStyle: {
-      control: "object",
-      description: "Styling for the bar chart",
+      control: 'object',
+      description: 'Styling for the bar chart',
     },
   },
 } as Meta<typeof PieChart>;
@@ -79,31 +79,31 @@ export default {
 export const Default = {
   render: (args: PieChartProps) => <PieChart {...args} />,
   args: {
-    title: "Pie Chart Example",
+    title: 'Pie Chart Example',
     width: 500,
     height: 500,
     showToolTip: true,
     showLegend: true,
     pie1: {
       data: pieData1,
-      dataKey: "value",
+      dataKey: 'value',
       outerRadius: 80,
-      fill: "#8884d8",
+      fill: '#8884d8',
       colors: colors1,
     },
     pie2: {
       data: pieData2,
-      dataKey: "value",
+      dataKey: 'value',
       innerRadius: 90,
       outerRadius: 120,
-      fill: "#82ca9d",
+      fill: '#82ca9d',
       label: true,
       colors: colors2,
     },
     legendSx: {
-      layout: "horizontal",
-      align: "center",
-      verticalAlign: "bottom",
+      layout: 'horizontal',
+      align: 'center',
+      verticalAlign: 'bottom',
     },
     containerSx: { padding: 2 },
     margin: { top: 20, right: 20, bottom: 20, left: 20 },
@@ -113,25 +113,25 @@ export const Default = {
 export const SinglePie = {
   render: (args: PieChartProps) => <PieChart {...args} />,
   args: {
-    title: "Single Pie Chart Example",
+    title: 'Single Pie Chart Example',
     width: 500,
     height: 500,
     showToolTip: true,
     showLegend: true,
     pie1: {
       data: pieData1,
-      dataKey: "value",
+      dataKey: 'value',
       outerRadius: 100,
-      fill: "#8884d8",
+      fill: '#8884d8',
       label: true,
-      colors: ["#8884d8", "#83a6ed", "#8dd1e1", "#82ca9d"],
+      colors: ['#8884d8', '#83a6ed', '#8dd1e1', '#82ca9d'],
     },
     legendSx: {
-      layout: "horizontal",
-      align: "center",
-      verticalAlign: "bottom",
+      layout: 'horizontal',
+      align: 'center',
+      verticalAlign: 'bottom',
     },
-    containerSx: { border: "1px solid black", padding: 2 },
+    containerSx: { border: '1px solid black', padding: 2 },
     margin: { top: 20, right: 20, bottom: 20, left: 20 },
   },
 };