@campxdev/react-blueprint 1.1.8 → 1.1.9

package/src/stories/DataDisplay/DataTable.stories.tsx

@@ -1,61 +1,61 @@
-import { GridColDef, GridColumnGroupingModel } from "@mui/x-data-grid";
-import { Meta, StoryObj } from "@storybook/react";
-import { DataTable } from "../../components/DataDisplay/DataTable/DataTable";
+import { GridColDef, GridColumnGroupingModel } from '@mui/x-data-grid';
+import { Meta, StoryObj } from '@storybook/react';
+import { DataTable } from '../../components/DataDisplay/DataTable/DataTable';
 // Make sure the path to your component is correct
 
 const columns: GridColDef[] = [
-  { field: "id", headerName: "ID", flex: 1 },
-  { field: "firstName", headerName: "First name", flex: 3 },
-  { field: "lastName", headerName: "Last name", flex: 3 },
-  { field: "age", headerName: "Age", type: "number", flex: 1 },
+  { field: 'id', headerName: 'ID', flex: 1 },
+  { field: 'firstName', headerName: 'First name', flex: 3 },
+  { field: 'lastName', headerName: 'Last name', flex: 3 },
+  { field: 'age', headerName: 'Age', type: 'number', flex: 1 },
 ];
 
 const rows = [
-  { id: 1, lastName: "Snow", firstName: "Jon", age: 35 },
-  { id: 2, lastName: "Lannister", firstName: "Cersei", age: 42 },
-  { id: 3, lastName: "Lannister", firstName: "Jaime", age: 45 },
-  { id: 4, lastName: "Stark", firstName: "Arya", age: 16 },
-  { id: 5, lastName: "Targaryen", firstName: "Daenerys", age: null },
-  { id: 6, lastName: "Melisandre", firstName: null, age: 150 },
-  { id: 7, lastName: "Clifford", firstName: "Ferrara", age: 44 },
-  { id: 8, lastName: "Frances", firstName: "Rossini", age: 36 },
-  { id: 9, lastName: "Roxie", firstName: "Harvey", age: 65 },
-  { id: 10, lastName: "Baratheon", firstName: "Robert", age: 40 },
+  { id: 1, lastName: 'Snow', firstName: 'Jon', age: 35 },
+  { id: 2, lastName: 'Lannister', firstName: 'Cersei', age: 42 },
+  { id: 3, lastName: 'Lannister', firstName: 'Jaime', age: 45 },
+  { id: 4, lastName: 'Stark', firstName: 'Arya', age: 16 },
+  { id: 5, lastName: 'Targaryen', firstName: 'Daenerys', age: null },
+  { id: 6, lastName: 'Melisandre', firstName: null, age: 150 },
+  { id: 7, lastName: 'Clifford', firstName: 'Ferrara', age: 44 },
+  { id: 8, lastName: 'Frances', firstName: 'Rossini', age: 36 },
+  { id: 9, lastName: 'Roxie', firstName: 'Harvey', age: 65 },
+  { id: 10, lastName: 'Baratheon', firstName: 'Robert', age: 40 },
 ];
 
 const columnGroupingModel: GridColumnGroupingModel = [
   {
-    groupId: "full_name",
-    headerName: "Full Name",
-    description: "Full Name of Character",
-    children: [{ field: "firstName" }, { field: "lastName" }],
+    groupId: 'full_name',
+    headerName: 'Full Name',
+    description: 'Full Name of Character',
+    children: [{ field: 'firstName' }, { field: 'lastName' }],
   },
 ];
 
 // Define the default export with Meta type including the component type
 const meta: Meta<typeof DataTable> = {
-  title: "DataDisplay/DataTable",
+  title: 'DataDisplay/DataTable',
   component: DataTable,
   argTypes: {
     totalCount: {
-      control: "number",
-      description: "Total Number of rows",
+      control: 'number',
+      description: 'Total Number of rows',
     },
     limit: {
-      control: "number",
-      description: "Total Number of rows",
+      control: 'number',
+      description: 'Total Number of rows',
     },
     offset: {
-      control: "number",
-      description: "Total Number of rows",
+      control: 'number',
+      description: 'Total Number of rows',
     },
     onPageChange: {
-      action: "onPageChange", // This will log actions in the actions panel of Storybook
-      description: "Callback function when the page changes",
+      action: 'onPageChange', // This will log actions in the actions panel of Storybook
+      description: 'Callback function when the page changes',
     },
     onLimitChange: {
-      action: "onLimitChange", // This will log actions in the actions panel of Storybook
-      description: "Callback function when the limit changes",
+      action: 'onLimitChange', // This will log actions in the actions panel of Storybook
+      description: 'Callback function when the limit changes',
     },
   },
   args: {

package/src/stories/DataDisplay/SidePanel.stories.tsx

@@ -1,32 +1,32 @@
-import { Meta } from "@storybook/react/*";
+import { Meta } from '@storybook/react/*';
 import {
   SidePanel,
   SidePanelProps,
-} from "../../components/DataDisplay/SidePanel/SidePanel";
+} from '../../components/DataDisplay/SidePanel/SidePanel';
 
 export default {
-  title: "DataDisplay/SidePanel",
+  title: 'DataDisplay/SidePanel',
   component: SidePanel,
-  tags: ["autodocs"],
+  tags: ['autodocs'],
   argTypes: {
     children: {
-      control: "text",
-      description: "Content inside the Avatar component",
+      control: 'text',
+      description: 'Content inside the Avatar component',
     },
     src: {
-      control: "text",
-      description: "Image source for the Avatar component",
+      control: 'text',
+      description: 'Image source for the Avatar component',
     },
     variant: {
       control: {
-        type: "select",
-        options: ["circular", "rounded", "square"],
+        type: 'select',
+        options: ['circular', 'rounded', 'square'],
       },
-      description: "Variant of the Avatar component",
+      description: 'Variant of the Avatar component',
     },
     sx: {
-      control: "object",
-      description: "Custom styling for the Avatar component",
+      control: 'object',
+      description: 'Custom styling for the Avatar component',
     },
   },
 } as Meta<typeof SidePanel>;
@@ -34,6 +34,6 @@ export default {
 export const withText = {
   render: (args: SidePanelProps) => <SidePanel {...args} />,
   args: {
-    children: "SS",
+    children: 'SS',
   },
 };

package/src/stories/DataDisplay/SquareAvatar.stories.tsx

@@ -1,35 +1,35 @@
 // Import React and other necessary elements
 
-import { Meta } from "@storybook/react";
+import { Meta } from '@storybook/react';
 import {
   SquareAvatar,
   SquareAvatarProps,
-} 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/SquareAvatar",
+  title: 'DataDisplay/SquareAvatar',
   component: SquareAvatar,
-  tags: ["autodocs"],
+  tags: ['autodocs'],
   argTypes: {
     children: {
-      control: "text",
-      description: "Content inside the SquareAvatar component",
+      control: 'text',
+      description: 'Content inside the SquareAvatar component',
     },
     src: {
-      control: "text",
-      description: "Image source for the SquareAvatar component",
+      control: 'text',
+      description: 'Image source for the SquareAvatar component',
     },
     variant: {
       control: {
-        type: "select",
-        options: ["circular", "rounded", "square"],
+        type: 'select',
+        options: ['circular', 'rounded', 'square'],
       },
-      description: "Variant of the SquareAvatar component",
+      description: 'Variant of the SquareAvatar component',
     },
     sx: {
-      control: "object",
-      description: "Custom styling for the SquareAvatar component",
+      control: 'object',
+      description: 'Custom styling for the SquareAvatar component',
     },
   },
 } as Meta<typeof SquareAvatar>;
@@ -38,13 +38,13 @@ export default {
 export const withText = {
   render: (args: SquareAvatarProps) => <SquareAvatar {...args} />,
   args: {
-    text: "SQC01",
+    text: 'SQC01',
   },
 };
 
 export const withImage = {
   render: (args: SquareAvatarProps) => <SquareAvatar {...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',
   },
 };

package/src/stories/DesignSystem/colorTokens.stories.tsx

@@ -1,23 +1,23 @@
-import { Typography } from "../../components/DataDisplay/Typography/Typography";
-import { DarkColorTokens } from "../../themes/colorTokens/darkColorTokens";
-import { LightColorTokens } from "../../themes/colorTokens/lightColorTokens";
+import { Typography } from '../../components/DataDisplay/Typography/Typography';
+import { DarkColorTokens } from '../../themes/colorTokens/darkColorTokens';
+import { LightColorTokens } from '../../themes/colorTokens/lightColorTokens';
 
 export default {
-  title: "Design System/Color Palette",
+  title: 'Design System/Color Palette',
   parameters: {
     controls: { hideNoControlsWarning: true },
   },
 };
 
 const ColorBox = ({ color, name }: { color: string; name: string }) => (
-  <div style={{ display: "flex", alignItems: "center", marginBottom: 20 }}>
+  <div style={{ display: 'flex', alignItems: 'center', marginBottom: 20 }}>
     <div
       style={{
         width: 60,
         height: 60,
         backgroundColor: color,
         marginRight: 10,
-        border: "1px solid #ddd",
+        border: '1px solid #ddd',
         borderRadius: 5,
       }}
     />
@@ -51,10 +51,10 @@ const PaletteDisplay = ({
 export const ColorPalettes = () => (
   <div
     style={{
-      display: "grid",
-      gridTemplateColumns: "repeat(6, 1fr)",
-      gap: "20px",
-      padding: "20px",
+      display: 'grid',
+      gridTemplateColumns: 'repeat(6, 1fr)',
+      gap: '20px',
+      padding: '20px',
     }}
   >
     <div>

package/src/stories/DesignSystem/typography.stories.tsx

@@ -1,11 +1,11 @@
 // src/stories/Typography.stories.jsx
-import { Stack } from "@mui/material";
-import { Typography } from "../../components/DataDisplay/Typography/Typography";
+import { Stack } from '@mui/material';
+import { Typography } from '../../components/DataDisplay/Typography/Typography';
 
 // Update path as necessary
 
 export default {
-  title: "Design System/Typography",
+  title: 'Design System/Typography',
   component: Typography,
 };
 
@@ -19,11 +19,11 @@ const TypographyDisplay = ({
   text: string;
 }) => (
   <div style={{ marginBottom: 20 }}>
-    <Typography variant={variant} style={{ margin: "10px 0" }}>
+    <Typography variant={variant} style={{ margin: '10px 0' }}>
       {text}
     </Typography>
-    <div style={{ fontSize: "12px", color: "#666" }}>
-      Font: {fontInfo.family}, Weight: {fontInfo.weight}, FontSize:{" "}
+    <div style={{ fontSize: '12px', color: '#666' }}>
+      Font: {fontInfo.family}, Weight: {fontInfo.weight}, FontSize:{' '}
       {fontInfo.size}
     </div>
   </div>
@@ -33,52 +33,52 @@ export const TypographyStyles = () => (
   <Stack>
     <TypographyDisplay
       variant="h6"
-      fontInfo={{ family: "Poppins", weight: "800", size: "24px" }}
+      fontInfo={{ family: 'Poppins', weight: '800', size: '24px' }}
       text="Heading 6 (h6) - Lorem ipsum dolor sit."
     />
     <TypographyDisplay
       variant="subtitle1"
-      fontInfo={{ family: "Poppins", weight: "600", size: "18px" }}
+      fontInfo={{ family: 'Poppins', weight: '600', size: '18px' }}
       text="Subtitle 1 (subtitle1) - Lorem ipsum dolor sit."
     />
     <TypographyDisplay
       variant="subtitle2"
-      fontInfo={{ family: "Poppins", weight: "500", size: "16px" }}
+      fontInfo={{ family: 'Poppins', weight: '500', size: '16px' }}
       text="Subtitle 2 (subtitle2) - Lorem ipsum dolor sit."
     />
     <TypographyDisplay
       variant="subtitle3"
-      fontInfo={{ family: "Poppins", weight: "400", size: "14px" }}
+      fontInfo={{ family: 'Poppins', weight: '400', size: '14px' }}
       text="Subtitle 3 (subtitle3) - Lorem ipsum dolor sit."
     />
     <TypographyDisplay
       variant="body1"
-      fontInfo={{ family: "Heebo", weight: "600", size: "16px" }}
+      fontInfo={{ family: 'Heebo', weight: '600', size: '16px' }}
       text="Body 1 (body1) - Lorem ipsum dolor sit."
     />
     <TypographyDisplay
       variant="body2"
-      fontInfo={{ family: "Heebo", weight: "400", size: "14px" }}
+      fontInfo={{ family: 'Heebo', weight: '400', size: '14px' }}
       text="Body 2 (body2) - Lorem ipsum dolor sit."
     />
     <TypographyDisplay
       variant="caption"
-      fontInfo={{ family: "Heebo", weight: "400", size: "12px" }}
+      fontInfo={{ family: 'Heebo', weight: '400', size: '12px' }}
       text="Caption (caption) - Lorem ipsum dolor sit."
     />
     <TypographyDisplay
-      variant={"label1" as any}
-      fontInfo={{ family: "Heebo", weight: "400", size: "14px" }}
+      variant={'label1' as any}
+      fontInfo={{ family: 'Heebo', weight: '400', size: '14px' }}
       text="Label 1 (label1) - Lorem ipsum dolor sit."
     />
     <TypographyDisplay
-      variant={"label2" as any}
-      fontInfo={{ family: "Poppins", weight: "400", size: "12px" }}
+      variant={'label2' as any}
+      fontInfo={{ family: 'Poppins', weight: '400', size: '12px' }}
       text="Label 2 (label2) - Lorem ipsum dolor sit."
     />
     <TypographyDisplay
-      variant={"button1" as any}
-      fontInfo={{ family: "Poppins", weight: "600", size: "14px" }}
+      variant={'button1' as any}
+      fontInfo={{ family: 'Poppins', weight: '600', size: '14px' }}
       text="Button 1 (button1) - Lorem ipsum dolor sit."
     />
   </Stack>

package/src/stories/Feedback/Alert.stories.tsx

@@ -1,25 +1,25 @@
-import { Meta, StoryObj } from "@storybook/react";
-import { Alert } from "../../components/export";
+import { Meta, StoryObj } from '@storybook/react';
+import { Alert } from '../../components/export';
 
 export default {
-  title: "Feedback/Alert",
+  title: 'Feedback/Alert',
   component: Alert,
-  tags: ["autodocs"],
+  tags: ['autodocs'],
   argTypes: {
     severity: {
       control: {
-        type: "select",
-        options: ["success", "info", "warning", "error"],
+        type: 'select',
+        options: ['success', 'info', 'warning', 'error'],
       },
     },
-    message: { control: "text" },
+    message: { control: 'text' },
   },
 } as Meta<typeof Alert>;
 
 export const AlertSuccess: StoryObj<typeof Alert> = {
   render: (args) => <Alert {...args} />,
   args: {
-    severity: "success",
-    message: "Success Message Comes Here",
+    severity: 'success',
+    message: 'Success Message Comes Here',
   },
 };

package/src/stories/Feedback/Snackbar.stories.tsx

@@ -1,28 +1,28 @@
-import { Meta, StoryObj } from "@storybook/react";
-import { Snackbar } from "../../components/export";
+import { Meta, StoryObj } from '@storybook/react';
+import { Snackbar } from '../../components/export';
 
 export default {
-  title: "Feedback/Snackbar",
+  title: 'Feedback/Snackbar',
   component: Snackbar,
-  tags: ["autodocs"],
+  tags: ['autodocs'],
   argTypes: {
     severity: {
       control: {
-        type: "select",
-        options: ["success", "info", "warning", "error"],
+        type: 'select',
+        options: ['success', 'info', 'warning', 'error'],
       },
     },
-    message: { control: "text" },
-    open: { control: "boolean" },
-    onClose: { action: "closed" },
+    message: { control: 'text' },
+    open: { control: 'boolean' },
+    onClose: { action: 'closed' },
   },
 } as Meta<typeof Snackbar>;
 
 export const SnackbarSuccess: StoryObj<typeof Snackbar> = {
   render: (args) => <Snackbar {...args} />,
   args: {
-    severity: "success",
-    message: "Success or error or info or warning",
+    severity: 'success',
+    message: 'Success or error or info or warning',
     open: true,
   },
 };

package/src/stories/Feedback/Spinner.stories.tsx

@@ -1,14 +1,14 @@
 // Import React and other necessary elements
-import { Meta } from "@storybook/react";
-import { Spinner } from "../../components/export";
+import { Meta } from '@storybook/react';
+import { Spinner } from '../../components/export';
 
 // Make sure your TextField import is correct
 
 // Define the default export with Meta type including the component type
 export default {
-  title: "Feedback/Spinner",
+  title: 'Feedback/Spinner',
   component: Spinner,
-  tags: ["autodocs"],
+  tags: ['autodocs'],
   argTypes: {},
 } as Meta<typeof Spinner>;
 

package/src/stories/Feedback/Tooltip.stories.tsx

@@ -1,18 +1,18 @@
-import { Meta, StoryObj } from "@storybook/react";
+import { Meta, StoryObj } from '@storybook/react';
 import {
   Button,
   Icons,
   Tooltip,
   ToolTipContent,
-} from "../../components/export";
+} from '../../components/export';
 
 export default {
-  title: "Feedback/Tooltip",
+  title: 'Feedback/Tooltip',
   component: Tooltip,
-  tags: ["autodocs"],
+  tags: ['autodocs'],
   argTypes: {
     icon: { control: false },
-    message: { control: "text" },
+    message: { control: 'text' },
   },
 } as Meta<typeof Tooltip>;
 

package/src/stories/Feedback/Tutorial.stories.tsx

@@ -1,22 +1,22 @@
-import { Meta, StoryObj } from "@storybook/react";
-import { Tutorial, Typography } from "../../components/export";
+import { Meta, StoryObj } from '@storybook/react';
+import { Tutorial, Typography } from '../../components/export';
 
 export default {
-  title: "Feedback/Tutorial",
+  title: 'Feedback/Tutorial',
   component: Tutorial,
   parameters: {
     controls: {
-      exclude: ["children"],
+      exclude: ['children'],
     },
   },
   argTypes: {
     iconPosition: {
-      control: { type: "radio" },
-      options: ["left", "right"],
-      defaultValue: "right",
+      control: { type: 'radio' },
+      options: ['left', 'right'],
+      defaultValue: 'right',
     },
-    tourName: { control: "text" },
-    steps: { control: "object" },
+    tourName: { control: 'text' },
+    steps: { control: 'object' },
   },
 } as Meta<typeof Tutorial>;
 
@@ -26,13 +26,13 @@ export const PrimaryTutorial: StoryObj<typeof Tutorial> = {
       {/* Placeholder elements for the tutorial */}
       <div
         className="tutorial-target"
-        style={{ margin: "20px", border: "2px solid blue", padding: "10px" }}
+        style={{ margin: '20px', border: '2px solid blue', padding: '10px' }}
       >
         Target 1: This element is the first target of the tutorial.
       </div>
       <div
         className="next-target"
-        style={{ margin: "20px", border: "2px solid green", padding: "10px" }}
+        style={{ margin: '20px', border: '2px solid green', padding: '10px' }}
       >
         Target 2: This element is the next target of the tutorial.
       </div>
@@ -41,11 +41,11 @@ export const PrimaryTutorial: StoryObj<typeof Tutorial> = {
     </div>
   ),
   args: {
-    tourName: "Active Batches",
+    tourName: 'Active Batches',
     showProgress: false,
     steps: [
       {
-        target: ".tutorial-target",
+        target: '.tutorial-target',
         content: (
           <>
             <div>

package/src/stories/Input/Button.stories.tsx

@@ -1,43 +1,43 @@
 // Import React and other necessary elements
-import { Meta } from "@storybook/react";
-import { Button, ButtonProps } from "../../components/Input/Button/Button";
+import { Meta } from '@storybook/react';
+import { Button, ButtonProps } from '../../components/Input/Button/Button';
 
 // Make sure your TextField import is correct
 
 // Define the default export with Meta type including the component type
 export default {
-  title: "Input/Button",
+  title: 'Input/Button',
   component: Button,
-  tags: ["autodocs"],
+  tags: ['autodocs'],
   parameters: {
     design: {
-      type: "figma",
-      url: "https://www.figma.com/design/S5t9x8kNHEuzBGv6305qLf/Srikanth-PlayGround?node-id=2-20", // Replace with your actual Figma link
+      type: 'figma',
+      url: 'https://www.figma.com/design/S5t9x8kNHEuzBGv6305qLf/Srikanth-PlayGround?node-id=2-20', // Replace with your actual Figma link
     },
   },
   argTypes: {
     variant: {
-      control: "select",
-      options: ["contained", "outlined", "text", "string"],
-      description: "The Button Variant to use",
+      control: 'select',
+      options: ['contained', 'outlined', 'text', 'string'],
+      description: 'The Button Variant to use',
     },
     children: {
-      control: "text",
-      description: "text in button",
+      control: 'text',
+      description: 'text in button',
     },
     color: {
-      control: "select",
-      options: ["primary", "secondary"],
-      description: "The Button Variant to use",
+      control: 'select',
+      options: ['primary', 'secondary'],
+      description: 'The Button Variant to use',
     },
     disabled: {
-      control: "boolean",
-      description: "Disabled Button",
+      control: 'boolean',
+      description: 'Disabled Button',
       defaultValue: false,
     },
     loading: {
-      control: "boolean",
-      description: "Loading Button",
+      control: 'boolean',
+      description: 'Loading Button',
       defaultValue: false,
     },
   },
@@ -47,18 +47,18 @@ export default {
 export const Primary = {
   render: (args: ButtonProps) => <Button {...args} />,
   args: {
-    color: "primary",
-    variant: "contained",
-    children: "Primary Button",
+    color: 'primary',
+    variant: 'contained',
+    children: 'Primary Button',
   },
 };
 
 export const Secondary = {
   render: (args: ButtonProps) => <Button {...args} />,
   args: {
-    color: "secondary",
-    variant: "contained",
-    children: "Secondary Button",
+    color: 'secondary',
+    variant: 'contained',
+    children: 'Secondary Button',
   },
 };
 
@@ -66,7 +66,7 @@ export const Disabled = {
   render: (args: ButtonProps) => <Button {...args} />,
   args: {
     disabled: true,
-    variant: "contained",
-    children: "Disabled Button",
+    variant: 'contained',
+    children: 'Disabled Button',
   },
 };