@campxdev/react-blueprint 1.1.7 → 1.1.9

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

@@ -1,211 +1,211 @@
-import { Meta } from "@storybook/react";
-import TreeMap from "../../components/Charts/TreeMap/TreeMap";
+import { Meta } from '@storybook/react';
+import TreeMap from '../../components/Charts/TreeMap/TreeMap';
 
 const data = [
   {
-    name: "axis",
+    name: 'axis',
     children: [
-      { name: "Axes", size: 1302 },
-      { name: "Axis", size: 24593 },
-      { name: "AxisGridLine", size: 652 },
-      { name: "AxisLabel", size: 636 },
-      { name: "CartesianAxes", size: 6703 },
+      { name: 'Axes', size: 1302 },
+      { name: 'Axis', size: 24593 },
+      { name: 'AxisGridLine', size: 652 },
+      { name: 'AxisLabel', size: 636 },
+      { name: 'CartesianAxes', size: 6703 },
     ],
   },
   {
-    name: "controls",
+    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: '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",
+    name: 'data',
     children: [
-      { name: "Data", size: 20544 },
-      { name: "DataList", size: 19788 },
-      { name: "DataSprite", size: 10349 },
-      { name: "EdgeSprite", size: 3301 },
-      { name: "NodeSprite", size: 19382 },
+      { name: 'Data', size: 20544 },
+      { name: 'DataList', size: 19788 },
+      { name: 'DataSprite', size: 10349 },
+      { name: 'EdgeSprite', size: 3301 },
+      { name: 'NodeSprite', size: 19382 },
       {
-        name: "render",
+        name: 'render',
         children: [
-          { name: "ArrowType", size: 698 },
-          { name: "EdgeRenderer", size: 5569 },
-          { name: "IRenderer", size: 353 },
-          { name: "ShapeRenderer", size: 2247 },
+          { 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: 'ScaleBinding', size: 11275 },
+      { name: 'Tree', size: 7147 },
+      { name: 'TreeBuilder', size: 9930 },
     ],
   },
   {
-    name: "events",
+    name: 'events',
     children: [
-      { name: "DataEvent", size: 7313 },
-      { name: "SelectionEvent", size: 6880 },
-      { name: "TooltipEvent", size: 3701 },
-      { name: "VisualizationEvent", size: 2117 },
+      { name: 'DataEvent', size: 7313 },
+      { name: 'SelectionEvent', size: 6880 },
+      { name: 'TooltipEvent', size: 3701 },
+      { name: 'VisualizationEvent', size: 2117 },
     ],
   },
   {
-    name: "legend",
+    name: 'legend',
     children: [
-      { name: "Legend", size: 20859 },
-      { name: "LegendItem", size: 4614 },
-      { name: "LegendRange", size: 10530 },
+      { name: 'Legend', size: 20859 },
+      { name: 'LegendItem', size: 4614 },
+      { name: 'LegendRange', size: 10530 },
     ],
   },
   {
-    name: "operator",
+    name: 'operator',
     children: [
       {
-        name: "distortion",
+        name: 'distortion',
         children: [
-          { name: "BifocalDistortion", size: 4461 },
-          { name: "Distortion", size: 6314 },
-          { name: "FisheyeDistortion", size: 3444 },
+          { name: 'BifocalDistortion', size: 4461 },
+          { name: 'Distortion', size: 6314 },
+          { name: 'FisheyeDistortion', size: 3444 },
         ],
       },
       {
-        name: "encoder",
+        name: 'encoder',
         children: [
-          { name: "ColorEncoder", size: 3179 },
-          { name: "Encoder", size: 4060 },
-          { name: "PropertyEncoder", size: 4138 },
-          { name: "ShapeEncoder", size: 1690 },
-          { name: "SizeEncoder", size: 1830 },
+          { name: 'ColorEncoder', size: 3179 },
+          { name: 'Encoder', size: 4060 },
+          { name: 'PropertyEncoder', size: 4138 },
+          { name: 'ShapeEncoder', size: 1690 },
+          { name: 'SizeEncoder', size: 1830 },
         ],
       },
       {
-        name: "filter",
+        name: 'filter',
         children: [
-          { name: "FisheyeTreeFilter", size: 5219 },
-          { name: "GraphDistanceFilter", size: 3165 },
-          { name: "VisibilityFilter", size: 3509 },
+          { name: 'FisheyeTreeFilter', size: 5219 },
+          { name: 'GraphDistanceFilter', size: 3165 },
+          { name: 'VisibilityFilter', size: 3509 },
         ],
       },
-      { name: "IOperator", size: 1286 },
+      { name: 'IOperator', size: 1286 },
       {
-        name: "label",
+        name: 'label',
         children: [
-          { name: "Labeler", size: 9956 },
-          { name: "RadialLabeler", size: 3899 },
-          { name: "StackedAreaLabeler", size: 3202 },
+          { name: 'Labeler', size: 9956 },
+          { name: 'RadialLabeler', size: 3899 },
+          { name: 'StackedAreaLabeler', size: 3202 },
         ],
       },
       {
-        name: "layout",
+        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: '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 },
+      { 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",
+  '#8889DD',
+  '#9597E4',
+  '#8DC77B',
+  '#A5D297',
+  '#E2CF45',
+  '#F8C12D',
 ];
 
 export default {
-  title: "Charts/TreeMap",
+  title: 'Charts/TreeMap',
   component: TreeMap,
   argTypes: {
     title: {
-      control: "text",
-      description: "Title of the TreeMap",
+      control: 'text',
+      description: 'Title of the TreeMap',
     },
     titleSx: {
-      control: "object",
-      description: "Styling for the title",
+      control: 'object',
+      description: 'Styling for the title',
     },
     dataKey: {
-      control: "text",
-      description: "Key for the data value",
+      control: 'text',
+      description: 'Key for the data value',
     },
     width: {
-      control: "number",
-      description: "Width of the TreeMap",
+      control: 'number',
+      description: 'Width of the TreeMap',
     },
     height: {
-      control: "number",
-      description: "Height of the TreeMap",
+      control: 'number',
+      description: 'Height of the TreeMap',
     },
     margin: {
-      control: "object",
-      description: "Margin around the TreeMap",
+      control: 'object',
+      description: 'Margin around the TreeMap',
     },
     aspectRatio: {
-      control: "number",
-      description: "Aspect ratio of the TreeMap",
+      control: 'number',
+      description: 'Aspect ratio of the TreeMap',
     },
     fill: {
-      control: "color",
-      description: "Fill color for the TreeMap",
+      control: 'color',
+      description: 'Fill color for the TreeMap',
     },
     stroke: {
-      control: "color",
-      description: "Stroke color for the TreeMap",
+      control: 'color',
+      description: 'Stroke color for the TreeMap',
     },
     colors: {
-      control: { type: "object" },
-      description: "Array of colors for the TreeMap",
+      control: { type: 'object' },
+      description: 'Array of colors for the TreeMap',
     },
     showToolTip: {
-      control: "boolean",
-      description: "Toggle tooltip visibility",
+      control: 'boolean',
+      description: 'Toggle tooltip visibility',
     },
     isAnimationActive: {
-      control: "boolean",
-      description: "Toggle animation",
+      control: 'boolean',
+      description: 'Toggle animation',
     },
     animationEasing: {
-      control: "text",
-      description: "Animation easing",
+      control: 'text',
+      description: 'Animation easing',
     },
     treeMapStyle: {
-      control: "object",
-      description: "Styling for the TreeMap",
+      control: 'object',
+      description: 'Styling for the TreeMap',
     },
     containerSx: {
-      control: "object",
-      description: "Styling for the container",
+      control: 'object',
+      description: 'Styling for the container',
     },
   },
 } as Meta<typeof TreeMap>;
@@ -218,7 +218,7 @@ export const Default = () => {
       height={600}
       data={data}
       colors={COLORS}
-      dataKey={"size"}
+      dataKey={'size'}
     />
   );
 };

package/src/stories/DataDisplay/AccordionGroup.stories.tsx

@@ -1,7 +1,6 @@
-import ImageList from '@mui/material/ImageList';
-import ImageListItem from '@mui/material/ImageListItem';
+import { ImageList, ImageListItem } from '@mui/material';
 import { Meta, StoryObj } from '@storybook/react/*';
-import { AccordionGroup } from '../../components/DataDisplay/AccordionGroup/AccordionGroup';
+import { AccordionGroup } from '../../components/export';
 
 const StandardImageList = () => {
   return (
@@ -71,15 +70,6 @@ const itemData = [
   },
 ];
 
-const meta: Meta<typeof AccordionGroup> = {
-  title: 'DataDisplay/Accordion',
-  component: AccordionGroup,
-};
-
-export default meta;
-
-type Story = StoryObj<typeof AccordionGroup>;
-
 const primaryData = [
   {
     title: 'Accordion 1',
@@ -122,6 +112,15 @@ const SecondaryData = [
   },
 ];
 
+const meta: Meta<typeof AccordionGroup> = {
+  title: 'DataDisplay/AccordionGroup',
+  component: AccordionGroup,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof AccordionGroup>;
+
 export const Primary: Story = {
   args: { data: primaryData },
 };

package/src/stories/DataDisplay/Card.stories.tsx

@@ -1,80 +1,80 @@
-import { Meta } from "@storybook/react";
-import { Card, CardProps } from "../../components/DataDisplay/Card/Card";
-import { Stack } from "@mui/material";
-import { GridMenuIcon } from "@mui/x-data-grid";
+import { Meta } from '@storybook/react';
+import { Card, CardProps } from '../../components/DataDisplay/Card/Card';
+import { Stack } from '@mui/material';
+import { GridMenuIcon } from '@mui/x-data-grid';
 
 export default {
-  title: "DataDisplay/Card",
+  title: 'DataDisplay/Card',
   component: Card,
-  tags: ["autodocs"],
+  tags: ['autodocs'],
   argTypes: {},
 } as Meta<typeof Card>;
 
 export const Standard = {
   render: (args: CardProps) => <Card {...args} />,
   args: {
-    title: "Academic Administrator WS",
+    title: 'Academic Administrator WS',
     caption:
-      "A centralized hub designed to streamline and manage administrative tasks efficiently.",
+      'A centralized hub designed to streamline and manage administrative tasks efficiently.',
     fields: [
       {
-        title: "Start year / End Year",
-        value: "2024 / 2028",
+        title: 'Start year / End Year',
+        value: '2024 / 2028',
       },
       {
-        title: "Current Sem",
-        value: "1",
+        title: 'Current Sem',
+        value: '1',
       },
       {
-        title: "Total Students",
-        value: "1324",
+        title: 'Total Students',
+        value: '1324',
       },
     ],
     footer: {
-      buttonText: "View Details",
+      buttonText: 'View Details',
       onClick: () => alert(`Details Viewed`),
     },
   },
 };
 export const StandardWithImage = {
   render: (args: CardProps) => (
-    <Stack flexDirection={"row"} gap={"20px"}>
-      <Card {...args} /> <Card {...args} /> <Card {...args} />{" "}
+    <Stack flexDirection={'row'} gap={'20px'}>
+      <Card {...args} /> <Card {...args} /> <Card {...args} />{' '}
     </Stack>
   ),
 
   args: {
-    title: "ECE 2024 - 25",
-    caption: "Started on July 24, 2024",
-    status: "Active",
+    title: 'ECE 2024 - 25',
+    caption: 'Started on July 24, 2024',
+    status: 'Active',
     fields: [
       {
-        title: "Start year / End Year",
-        value: "2024 / 2028",
+        title: 'Start year / End Year',
+        value: '2024 / 2028',
       },
       {
-        title: "Current Sem",
-        value: "1",
+        title: 'Current Sem',
+        value: '1',
       },
       {
-        title: "Total Students",
-        value: "1324",
+        title: 'Total Students',
+        value: '1324',
       },
       {
-        title: "Total Students",
-        value: "1324",
+        title: 'Total Students',
+        value: '1324',
       },
       {
-        title: "Total Students",
-        value: "1324",
+        title: 'Total Students',
+        value: '1324',
       },
     ],
     footer: {
-      buttonText: "View Details",
+      buttonText: 'View Details',
       onClick: () => alert(`Details Viewed`),
     },
     imageSrc:
-      "https://i.pinimg.com/564x/aa/a5/90/aaa5903de24897afa5b07fd9f4092866.jpg",
+      'https://i.pinimg.com/564x/aa/a5/90/aaa5903de24897afa5b07fd9f4092866.jpg',
     moreOptions: true,
   },
 };
@@ -82,7 +82,7 @@ export const StandardWithImage = {
 export const Statistic = {
   render: (args: CardProps) => <Card {...args} />,
   args: {
-    title: "ECE 2024 - 25",
-    caption: "Started on July 24, 2024",
+    title: 'ECE 2024 - 25',
+    caption: 'Started on July 24, 2024',
   },
 };

package/src/stories/DataDisplay/Chips.stories.tsx

@@ -1,32 +1,32 @@
-import { Meta } from "@storybook/react";
-import { useState } from "react";
-import Chips from "../../components/DataDisplay/Chips/Chips";
+import { Meta } from '@storybook/react';
+import { useState } from 'react';
+import Chips from '../../components/DataDisplay/Chips/Chips';
 
 const sampleChips = [
   {
-    label: "Chip1",
+    label: 'Chip1',
     value: 1,
   },
   {
-    label: "Chip2",
+    label: 'Chip2',
     value: 2,
   },
   {
-    label: "Chip3",
+    label: 'Chip3',
     value: 3,
   },
 ];
 
 export default {
-  title: "DataDisplay/Chips",
+  title: 'DataDisplay/Chips',
   component: Chips,
-  tags: ["autodocs"],
+  tags: ['autodocs'],
   argTypes: {},
 } as Meta<typeof Chips>;
 
 export const Default = {
   render: () => {
-    const [selected, setSelected] = useState<string | number | string[]>("");
+    const [selected, setSelected] = useState<string | number | string[]>('');
 
     return (
       <Chips
@@ -43,7 +43,7 @@ export const Default = {
 
 export const ClickableChip = {
   render: () => {
-    const [selected, setSelected] = useState<string | number | string[]>("");
+    const [selected, setSelected] = useState<string | number | string[]>('');
 
     return (
       <Chips

package/src/stories/DataDisplay/CircularAvatar.stories.tsx

@@ -1,16 +1,16 @@
 // Import React and other necessary elements
 
-import { Meta } from "@storybook/react";
+import { Meta } from '@storybook/react';
 import {
   CircularAvatar,
   CircularAvatarProps,
-} from "../../components/DataDisplay/Avatar/Avatar";
+} from '../../components/DataDisplay/Avatar/Avatar';
 
 // Define the default export with Meta type including the component type
 export default {
-  title: "DataDisplay/CircularAvatar",
+  title: 'DataDisplay/CircularAvatar',
   component: CircularAvatar,
-  tags: ["autodocs"],
+  tags: ['autodocs'],
   argTypes: {},
 } as Meta<typeof CircularAvatar>;
 
@@ -18,13 +18,13 @@ export default {
 export const withText = {
   render: (args: CircularAvatarProps) => <CircularAvatar {...args} />,
   args: {
-    text: "Sh auy",
+    text: 'Sh auy',
   },
 };
 
 export const withImage = {
   render: (args: CircularAvatarProps) => <CircularAvatar {...args} />,
   args: {
-    src: "https://images.unsplash.com/photo-1534528741775-53994a69daeb?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwyNzM3ODF8MHwxfGFsbHwxfHx8fHx8fHwxNjM4MjM2MDg0&ixlib=rb-1.2.1&q=80&w=400",
+    src: 'https://images.unsplash.com/photo-1534528741775-53994a69daeb?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwyNzM3ODF8MHwxfGFsbHwxfHx8fHx8fHwxNjM4MjM2MDg0&ixlib=rb-1.2.1&q=80&w=400',
   },
 };