@campxdev/react-blueprint 1.1.8 → 1.1.9

package/src/stories/Input/DatePicker.stories.tsx

@@ -26,15 +26,29 @@ export const Primary: Story = {
 };
 
 export const Secondary: Story = {
-  args: { ...Primary.args, label: 'Date Picker (Full Month Text)', format: 'dd MMMM yyyy' },
+  args: {
+    ...Primary.args,
+    label: 'Date Picker (Full Month Text)',
+    format: 'dd MMMM yyyy',
+  },
 };
 
 export const Tertiary: Story = {
-  args: { ...Primary.args, label: 'Just Month Year', format: 'MMMM yyyy', views: ['month', 'year'] },
+  args: {
+    ...Primary.args,
+    label: 'Just Month Year',
+    format: 'MMMM yyyy',
+    views: ['month', 'year'],
+  },
 };
 
 export const Quaternary: Story = {
-  args: { ...Primary.args, label: 'Just Year', format: 'yyyy', views: ['year'] },
+  args: {
+    ...Primary.args,
+    label: 'Just Year',
+    format: 'yyyy',
+    views: ['year'],
+  },
 };
 
 export const WithShortcuts: Story = {
@@ -65,7 +79,12 @@ export const WithShortcuts: Story = {
 };
 
 export const WithDefaultValue: Story = {
-  args: { ...Primary.args, label: 'With Default Value', required: false, value: new Date('2024/9/15') },
+  args: {
+    ...Primary.args,
+    label: 'With Default Value',
+    required: false,
+    value: new Date('2024/9/15'),
+  },
 };
 
 export const WithMinMaxDate: Story = {
@@ -79,7 +98,12 @@ export const WithMinMaxDate: Story = {
 };
 
 export const WithCustomIcon: Story = {
-  args: { ...Primary.args, label: 'With Custom Icon', required: false, openPickerIcon: Icons.CareerIcon },
+  args: {
+    ...Primary.args,
+    label: 'With Custom Icon',
+    required: false,
+    openPickerIcon: Icons.CareerIcon,
+  },
 };
 
 export const WithPlaceHolderHelperText: Story = {
@@ -93,11 +117,21 @@ export const WithPlaceHolderHelperText: Story = {
 };
 
 export const DisablePast: Story = {
-  args: { ...Primary.args, label: 'Disable Past Dates', required: false, disablePast: true },
+  args: {
+    ...Primary.args,
+    label: 'Disable Past Dates',
+    required: false,
+    disablePast: true,
+  },
 };
 
 export const DisableFuture: Story = {
-  args: { ...Primary.args, label: 'Disable Future Dates', required: false, disableFuture: true },
+  args: {
+    ...Primary.args,
+    label: 'Disable Future Dates',
+    required: false,
+    disableFuture: true,
+  },
 };
 
 export const DisableSpecificDate: Story = {
@@ -134,5 +168,11 @@ export const DisableSpecificYear: Story = {
 };
 
 export const ReadOnly = {
-  args: { ...Primary.args, label: 'Read Only', required: false, disabled: true, value: new Date('2024/9/15') },
+  args: {
+    ...Primary.args,
+    label: 'Read Only',
+    required: false,
+    disabled: true,
+    value: new Date('2024/9/15'),
+  },
 };

package/src/stories/Input/IconButtons.stories.tsx

@@ -1,10 +1,10 @@
-import { Stack } from "@mui/material";
-import { Meta, StoryObj } from "@storybook/react/*";
-import { IconButtons } from "../../components/Input/IconButtons/IconButtons";
+import { Stack } from '@mui/material';
+import { Meta, StoryObj } from '@storybook/react/*';
+import { IconButtons } from '../../components/Input/IconButtons/IconButtons';
 
 const IconButtonsStory = () => {
   return (
-    <Stack gap={2} direction={"row"}>
+    <Stack gap={2} direction={'row'}>
       {Object.values(IconButtons).map((IconButton) => (
         <IconButton />
       ))}
@@ -13,9 +13,9 @@ const IconButtonsStory = () => {
 };
 
 export default {
-  title: "Input/IconButtons",
+  title: 'Input/IconButtons',
   component: IconButtonsStory,
-  tags: ["autodocs"],
+  tags: ['autodocs'],
   argTypes: {},
 } as Meta<typeof IconButtonsStory>;
 

package/src/stories/Input/MultiCheckBox.stories.tsx

@@ -1,14 +1,14 @@
-import { Meta, StoryFn } from "@storybook/react";
-import { useState } from "react";
+import { Meta, StoryFn } from '@storybook/react';
+import { useState } from 'react';
 import {
   MultiCheckBox,
   MultiCheckboxProps,
-} from "../../components/Input/MultiCheckBox/MultiCheckBox";
+} from '../../components/Input/MultiCheckBox/MultiCheckBox';
 
 export default {
-  title: "Input/MultiCheckBox",
+  title: 'Input/MultiCheckBox',
   component: MultiCheckBox,
-  tags: ["autodocs"],
+  tags: ['autodocs'],
   argTypes: {},
 } as Meta<typeof MultiCheckBox>;
 
@@ -27,23 +27,23 @@ const MultiCheckBoxStory: StoryFn<MultiCheckboxProps> = (args) => {
 
 export const Default = MultiCheckBoxStory.bind({});
 Default.args = {
-  label: "First Name",
-  name: "firstName",
+  label: 'First Name',
+  name: 'firstName',
   options: [
     {
-      label: "Option 1",
-      value: "value1",
+      label: 'Option 1',
+      value: 'value1',
     },
     {
-      label: "Option 2",
-      value: "value2",
+      label: 'Option 2',
+      value: 'value2',
     },
     {
-      label: "Option 3",
-      value: "value3",
+      label: 'Option 3',
+      value: 'value3',
     },
   ],
   required: true,
-  direction: "row",
-  values: ["value2"],
+  direction: 'row',
+  values: ['value2'],
 };

package/src/stories/Input/OtpInput.stories.tsx

@@ -1,12 +1,12 @@
-import { Meta } from "@storybook/react";
+import { Meta } from '@storybook/react';
 import OtpInput, {
   OtpInputProps,
-} from "../../components/Input/OtpInput/OtpInput";
+} from '../../components/Input/OtpInput/OtpInput';
 
 export default {
-  title: "Input/OtpInput",
+  title: 'Input/OtpInput',
   component: OtpInput,
-  tags: ["autodocs"],
+  tags: ['autodocs'],
   argTypes: {},
 } as Meta<typeof OtpInput>;
 
@@ -15,7 +15,7 @@ export const Default = {
   args: {
     length: 6,
     onChangeOtp: (otp: string) => {
-      console.log("OTP Value:", otp);
+      console.log('OTP Value:', otp);
     },
   },
 };

package/src/stories/Input/Password.stories.tsx

@@ -1,22 +1,22 @@
-import { Meta } from "@storybook/react";
+import { Meta } from '@storybook/react';
 import {
   PasswordField,
   PasswordFieldProps,
-} from "../../components/Input/PasswordField/PasswordField";
+} from '../../components/Input/PasswordField/PasswordField';
 
 export default {
-  title: "Input/PasswordField",
+  title: 'Input/PasswordField',
   component: PasswordField,
-  tags: ["autodocs"],
+  tags: ['autodocs'],
   argTypes: {},
 } as Meta<typeof PasswordField>;
 
 export const Default = {
   render: (args: PasswordFieldProps) => <PasswordField {...args} />,
   args: {
-    label: "Password",
+    label: 'Password',
     required: true,
-    value: "KAHPS9888B",
-    helperText: "Password should be alpha-numeric with special character",
+    value: 'KAHPS9888B',
+    helperText: 'Password should be alpha-numeric with special character',
   },
 };

package/src/stories/Input/RadioGroup.stories.tsx

@@ -1,16 +1,16 @@
 // Import React and other necessary elements
 
-import { Meta } from "@storybook/react";
+import { Meta } from '@storybook/react';
 import {
   RadioGroup,
   RadioGroupProps,
-} from "../../components/Input/RadioGroup/RadioGroup";
+} from '../../components/Input/RadioGroup/RadioGroup';
 
 // Define the default export with Meta type including the component type
 export default {
-  title: "Input/RadioGroup",
+  title: 'Input/RadioGroup',
   component: RadioGroup,
-  tags: ["autodocs"],
+  tags: ['autodocs'],
   argTypes: {},
 } as Meta<typeof RadioGroup>;
 
@@ -18,27 +18,27 @@ export default {
 export const Default = {
   render: (args: RadioGroupProps) => <RadioGroup {...args} />,
   args: {
-    label: "Radio",
+    label: 'Radio',
     options: [
       {
-        label: "Option 1",
-        value: "1",
+        label: 'Option 1',
+        value: '1',
       },
       {
-        label: "Option 2",
-        value: "2",
+        label: 'Option 2',
+        value: '2',
       },
       {
-        label: "Option 3",
-        value: "3",
+        label: 'Option 3',
+        value: '3',
       },
       {
-        label: "Option 4",
-        value: "4",
+        label: 'Option 4',
+        value: '4',
       },
     ],
     onChange: (event: any, value: any) => {},
     row: true,
-    defaultValue: "3",
+    defaultValue: '3',
   },
 };

package/src/stories/Input/SearchBar.stories.tsx

@@ -1,21 +1,21 @@
-import { Meta, StoryObj } from "@storybook/react/*";
-import { SearchBar } from "../../components/Input/SearchBar/SearchBar";
+import { Meta, StoryObj } from '@storybook/react/*';
+import { SearchBar } from '../../components/Input/SearchBar/SearchBar';
 
 const meta: Meta<typeof SearchBar> = {
-  title: "Input/SearchBar",
+  title: 'Input/SearchBar',
   component: SearchBar,
   argTypes: {
     placeholder: {
-      description: "The placeholder text",
+      description: 'The placeholder text',
     },
     label: {
-      description: "Can be a ReactNode or String",
+      description: 'Can be a ReactNode or String',
     },
     value: {
-      description: "Current value of the search input.",
+      description: 'Current value of the search input.',
     },
     onSearch: {
-      description: "Function to handle search",
+      description: 'Function to handle search',
     },
   },
 };
@@ -32,20 +32,20 @@ export const Primary: Story = {
 export const WithPlaceHolder: Story = {
   args: {
     ...Primary.args,
-    placeholder: "Search By Name/Email",
+    placeholder: 'Search By Name/Email',
   },
 };
 
 export const WithLabel: Story = {
   args: {
     ...Primary.args,
-    label: "Searching Students",
+    label: 'Searching Students',
   },
 };
 
 export const WithValue: Story = {
   args: {
     ...WithLabel.args,
-    value: "Chrome",
+    value: 'Chrome',
   },
 };

package/src/stories/Input/SingleCheckBox.stories.tsx

@@ -1,14 +1,14 @@
-import { Meta, StoryFn } from "@storybook/react";
-import { useState } from "react";
+import { Meta, StoryFn } from '@storybook/react';
+import { useState } from 'react';
 import {
   CheckboxProps,
   SingleCheckBox,
-} from "../../components/Input/SingleCheckBox/SIngleCheckBox";
+} from '../../components/Input/SingleCheckBox/SIngleCheckBox';
 
 export default {
-  title: "Input/SingleCheckBox",
+  title: 'Input/SingleCheckBox',
   component: SingleCheckBox,
-  tags: ["autodocs"],
+  tags: ['autodocs'],
   argTypes: {},
 } as Meta<typeof SingleCheckBox>;
 
@@ -27,8 +27,8 @@ const SingleCheckBoxStory: StoryFn<CheckboxProps> = (args) => {
 
 export const Default = SingleCheckBoxStory.bind({});
 Default.args = {
-  label: "First Name",
+  label: 'First Name',
   required: true,
-  value: "ok",
+  value: 'ok',
   onChange: (event: any) => {},
 };

package/src/stories/Input/SingleSelect.stories.tsx

@@ -1,81 +1,81 @@
 // Import React and other necessary elements
-import { Meta } from "@storybook/react";
+import { Meta } from '@storybook/react';
 import {
   SingleSelect,
   SingleSelectProps,
-} from "../../components/Input/SingleSelect/SingleSelect";
+} from '../../components/Input/SingleSelect/SingleSelect';
 
 // Make sure your TextField import is correct
 
 const topFilms = [
-  { label: "The Shawshank Redemption", value: 1994 },
-  { label: "The Godfather", value: 1972 },
-  { label: "The Godfather: Part II", value: 1974 },
-  { label: "The Dark Knight", value: 2008 },
-  { label: "12 Angry Men", value: 1957 },
+  { label: 'The Shawshank Redemption', value: 1994 },
+  { label: 'The Godfather', value: 1972 },
+  { label: 'The Godfather: Part II', value: 1974 },
+  { label: 'The Dark Knight', value: 2008 },
+  { label: '12 Angry Men', value: 1957 },
   { label: "Schindler's List", value: 1993 },
-  { label: "Pulp Fiction", value: 1994 },
+  { label: 'Pulp Fiction', value: 1994 },
   {
-    label: "The Lord of the Rings: The Return of the King",
+    label: 'The Lord of the Rings: The Return of the King',
     value: 2003,
   },
-  { label: "The Good, the Bad and the Ugly", value: 1966 },
-  { label: "Fight Club", value: 1999 },
+  { label: 'The Good, the Bad and the Ugly', value: 1966 },
+  { label: 'Fight Club', value: 1999 },
   {
-    label: "The Lord of the Rings: The Fellowship of the Ring",
+    label: 'The Lord of the Rings: The Fellowship of the Ring',
     value: 2001,
   },
   {
-    label: "Star Wars: Episode V - The Empire Strikes Back",
+    label: 'Star Wars: Episode V - The Empire Strikes Back',
     value: 1980,
   },
-  { label: "Forrest Gump", value: 1994 },
-  { label: "Inception", value: 2010 },
+  { label: 'Forrest Gump', value: 1994 },
+  { label: 'Inception', value: 2010 },
   {
-    label: "The Lord of the Rings: The Two Towers",
+    label: 'The Lord of the Rings: The Two Towers',
     value: 2002,
   },
   { label: "One Flew Over the Cuckoo's Nest", value: 1975 },
-  { label: "Goodfellas", value: 1990 },
-  { label: "The Matrix", value: 1999 },
-  { label: "Seven Samurai", value: 1954 },
+  { label: 'Goodfellas', value: 1990 },
+  { label: 'The Matrix', value: 1999 },
+  { label: 'Seven Samurai', value: 1954 },
   {
-    label: "Star Wars: Episode IV - A New Hope",
+    label: 'Star Wars: Episode IV - A New Hope',
     value: 1977,
   },
-  { label: "City of God", value: 2002 },
-  { label: "Se7en", value: 1995 },
-  { label: "The Silence of the Lambs", value: 1991 },
+  { label: 'City of God', value: 2002 },
+  { label: 'Se7en', value: 1995 },
+  { label: 'The Silence of the Lambs', value: 1991 },
   { label: "It's a Wonderful Life", value: 1946 },
-  { label: "Life Is Beautiful", value: 1997 },
-  { label: "The Usual Suspects", value: 1995 },
-  { label: "Léon: The Professional", value: 1994 },
-  { label: "Spirited Away", value: 2001 },
-  { label: "Saving Private Ryan", value: 1998 },
-  { label: "Once Upon a Time in the West", value: 1968 },
-  { label: "American History X", value: 1998 },
-  { label: "Interstellar", value: 2014 },
+  { label: 'Life Is Beautiful', value: 1997 },
+  { label: 'The Usual Suspects', value: 1995 },
+  { label: 'Léon: The Professional', value: 1994 },
+  { label: 'Spirited Away', value: 2001 },
+  { label: 'Saving Private Ryan', value: 1998 },
+  { label: 'Once Upon a Time in the West', value: 1968 },
+  { label: 'American History X', value: 1998 },
+  { label: 'Interstellar', value: 2014 },
 ];
 // Define the default export with Meta type including the component type
 export default {
-  title: "Input/SingleSelect",
+  title: 'Input/SingleSelect',
   component: SingleSelect,
   argTypes: {
     label: {
-      control: "text",
-      description: "Label of the field",
+      control: 'text',
+      description: 'Label of the field',
     },
     required: {
-      control: "boolean",
-      description: "Required property of the field",
+      control: 'boolean',
+      description: 'Required property of the field',
     },
     optionsApiEndPoint: {
-      control: "text",
-      description: "API end point for options",
+      control: 'text',
+      description: 'API end point for options',
     },
     useCampxAxios: {
-      control: "boolean",
-      description: "Boolean to use campx axios",
+      control: 'boolean',
+      description: 'Boolean to use campx axios',
     },
   },
 } as Meta<typeof SingleSelect>;
@@ -84,14 +84,14 @@ export const Default = {
   render: (args: SingleSelectProps) => <SingleSelect {...args} />,
   args: {
     required: true,
-    label: "Single Select",
+    label: 'Single Select',
   },
 };
 export const Primary = {
   render: (args: SingleSelectProps) => <SingleSelect {...args} />,
   args: {
     options: topFilms,
-    label: "Single Select",
+    label: 'Single Select',
     required: false,
   },
 };
@@ -99,8 +99,8 @@ export const Primary = {
 export const WithAPIEndPoint = {
   render: (args: SingleSelectProps) => <SingleSelect {...args} />,
   args: {
-    optionsApiEndPoint: "dropdowns/classrooms",
-    label: "Select Classroom",
+    optionsApiEndPoint: 'dropdowns/classrooms',
+    label: 'Select Classroom',
     required: false,
   },
 };
@@ -108,7 +108,7 @@ export const WithAPIEndPoint = {
 export const SingleSelectWithValue = {
   render: (args: SingleSelectProps) => <SingleSelect {...args} />,
   args: {
-    label: "Select Select",
+    label: 'Select Select',
     options: topFilms,
     required: true,
     value: 1994,
@@ -118,8 +118,8 @@ export const SingleSelectWithValue = {
 export const SingleSelectWithValueAndApi = {
   render: (args: SingleSelectProps) => <SingleSelect {...args} />,
   args: {
-    optionsApiEndPoint: "dropdowns/classrooms",
-    label: "Select Classroom",
+    optionsApiEndPoint: 'dropdowns/classrooms',
+    label: 'Select Classroom',
     required: true,
     value: 1,
   },

package/src/stories/Input/Switch.stories.tsx

@@ -1,32 +1,32 @@
 // Import React and other necessary elements
-import { Meta } from "@storybook/react";
-import { Switch, SwitchProps } from "../../components/Input/Switch/Switch";
+import { Meta } from '@storybook/react';
+import { Switch, SwitchProps } from '../../components/Input/Switch/Switch';
 
 // Make sure your TextField import is correct
 
 // Define the default export with Meta type including the component type
 export default {
-  title: "Input/Switch",
+  title: 'Input/Switch',
   component: Switch,
-  tags: ["autodocs"],
+  tags: ['autodocs'],
   argTypes: {
     variant: {
-      control: "select",
-      options: ["contained", "outlined", "text", "string"],
-      description: "The Switch Variant to use",
+      control: 'select',
+      options: ['contained', 'outlined', 'text', 'string'],
+      description: 'The Switch Variant to use',
     },
     children: {
-      control: "text",
-      description: "text in Switch",
+      control: 'text',
+      description: 'text in Switch',
     },
     color: {
-      control: "select",
-      options: ["primary", "secondary"],
-      description: "The Switch Variant to use",
+      control: 'select',
+      options: ['primary', 'secondary'],
+      description: 'The Switch Variant to use',
     },
     disabled: {
-      control: "boolean",
-      description: "Disabled Switch",
+      control: 'boolean',
+      description: 'Disabled Switch',
       defaultValue: false,
     },
   },
@@ -36,18 +36,18 @@ export default {
 export const Primary = {
   render: (args: SwitchProps) => <Switch {...args} />,
   args: {
-    color: "primary",
-    variant: "contained",
-    children: "Primary Switch",
+    color: 'primary',
+    variant: 'contained',
+    children: 'Primary Switch',
   },
 };
 
 export const Secondary = {
   render: (args: SwitchProps) => <Switch {...args} />,
   args: {
-    color: "secondary",
-    variant: "contained",
-    children: "Secondary Switch",
+    color: 'secondary',
+    variant: 'contained',
+    children: 'Secondary Switch',
   },
 };
 
@@ -55,7 +55,7 @@ export const Disabled = {
   render: (args: SwitchProps) => <Switch {...args} />,
   args: {
     disabled: true,
-    variant: "contained",
-    children: "Disabled Switch",
+    variant: 'contained',
+    children: 'Disabled Switch',
   },
 };