@campxdev/react-blueprint 1.9.6 → 2.0.1

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

@@ -1,178 +0,0 @@
-import { LocalizationProvider } from '@mui/x-date-pickers';
-import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFnsV3';
-import { Meta, StoryObj } from '@storybook/react/*';
-import { add } from 'date-fns';
-import { Icons } from '../../components/Assets/Icons/Icons';
-import { DatePicker } from '../../components/Input/DatePicker/DatePicker';
-
-const meta: Meta<typeof DatePicker> = {
-  title: 'Input/DatePicker',
-  component: DatePicker,
-  decorators: [
-    (Story) => (
-      <LocalizationProvider dateAdapter={AdapterDateFns}>
-        <Story />
-      </LocalizationProvider>
-    ),
-  ],
-};
-
-export default meta;
-
-type Story = StoryObj<typeof DatePicker>;
-
-export const Primary: Story = {
-  args: { label: 'Date Picker', name: 'date-picker',placeholder:'Select Date', required: true },
-};
-
-export const Secondary: Story = {
-  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'],
-  },
-};
-
-export const Quaternary: Story = {
-  args: {
-    ...Primary.args,
-    label: 'Just Year',
-    format: 'yyyy',
-    views: ['year'],
-  },
-};
-
-export const WithShortcuts: Story = {
-  args: {
-    ...Primary.args,
-    label: 'With Shortcuts',
-    required: false,
-    shortcutsItems: [
-      { label: 'Today', getValue: () => new Date() },
-      { label: 'Tomorrow', getValue: () => add(new Date(), { days: 1 }) },
-      { label: 'Yesterday', getValue: () => add(new Date(), { days: -1 }) },
-      {
-        label: 'Independence Day',
-        getValue: () => {
-          const currentYear = new Date().getFullYear();
-          return new Date(currentYear, 6, 15);
-        },
-      },
-      {
-        label: 'Christmas',
-        getValue: () => {
-          const currentYear = new Date().getFullYear();
-          return new Date(currentYear, 11, 25);
-        },
-      },
-    ],
-  },
-};
-
-export const WithDefaultValue: Story = {
-  args: {
-    ...Primary.args,
-    label: 'With Default Value',
-    required: false,
-    value: new Date('2024/9/15'),
-  },
-};
-
-export const WithMinMaxDate: Story = {
-  args: {
-    ...Primary.args,
-    label: 'With Min and Max Date',
-    required: false,
-    minDate: new Date('2024/8/15'),
-    maxDate: new Date('2024/10/9'),
-  },
-};
-
-export const WithCustomIcon: Story = {
-  args: {
-    ...Primary.args,
-    label: 'With Custom Icon',
-    required: false,
-    openPickerIcon: Icons.CareerIcon,
-  },
-};
-
-export const WithPlaceHolderHelperText: Story = {
-  args: {
-    ...Primary.args,
-    label: 'With Place Holder, Helper Text',
-    required: false,
-    placeholder: 'CampX date',
-    helperText: 'Mandatory field',
-  },
-};
-
-export const DisablePast: Story = {
-  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,
-  },
-};
-
-export const DisableSpecificDate: Story = {
-  args: {
-    ...Primary.args,
-    label: 'Disable Specific Dates',
-    required: false,
-    shouldDisableDate: (date: Date) => {
-      return date.getDay() === 0 || date.getDay() === 6;
-    },
-  },
-};
-
-export const DisableSpecificMonth: Story = {
-  args: {
-    ...Primary.args,
-    label: 'Disable Specific Month (February)',
-    required: false,
-    shouldDisableMonth: (date: Date) => {
-      return date.getMonth() === 1;
-    },
-  },
-};
-
-export const DisableSpecificYear: Story = {
-  args: {
-    ...Primary.args,
-    label: 'Disable Specific Year (2022)',
-    required: false,
-    shouldDisableYear: (date: Date) => {
-      return date.getFullYear() === 2022;
-    },
-  },
-};
-
-export const ReadOnly = {
-  args: {
-    ...Primary.args,
-    label: 'Read Only',
-    required: false,
-    disabled: true,
-    value: new Date('2024/9/15'),
-  },
-};

package/src/stories/Input/DateTimePicker.stories.tsx

@@ -1,124 +0,0 @@
-import { LocalizationProvider } from '@mui/x-date-pickers';
-import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFnsV3';
-import { Meta, StoryObj } from '@storybook/react';
-import { add } from 'date-fns';
-import { DateTimePicker, Icons } from '../../components/export';
-
-const meta: Meta<typeof DateTimePicker> = {
-  title: 'Input/DateTimePicker',
-  component: DateTimePicker,
-  decorators: [
-    (Story) => (
-      <LocalizationProvider dateAdapter={AdapterDateFns}>
-        <Story />
-      </LocalizationProvider>
-    ),
-  ],
-};
-
-export default meta;
-
-type Story = StoryObj<typeof DateTimePicker>;
-
-const shortcutsItems = [
-  { label: 'Now', getValue: () => new Date() },
-  { label: '1 Hour Later', getValue: () => add(new Date(), { hours: 1 }) },
-  { label: '1 Hour Ago', getValue: () => add(new Date(), { hours: -1 }) },
-  {
-    label: 'New Year',
-    getValue: () => new Date(new Date().getFullYear(), 0, 1, 0, 0),
-  },
-];
-
-export const Primary: Story = {
-  args: {
-    label: 'Date Time Picker',
-    name: 'date-time-picker',
-    placeholder: 'Select Date and Time',
-    required: true,
-  },
-};
-
-export const WithShortcuts: Story = {
-  args: {
-    ...Primary.args,
-    label: 'With Shortcuts',
-    shortcutsItems,
-  },
-};
-
-export const CustomFormat: Story = {
-  args: {
-    ...Primary.args,
-    label: 'Custom Format',
-    format: 'MMM dd, yyyy hh:mm a',
-  },
-};
-
-export const ViewsYearMonth: Story = {
-  args: {
-    ...Primary.args,
-    label: 'Year and Month Views',
-    views: ['year', 'month'],
-  },
-};
-
-export const WithHelperText: Story = {
-  args: {
-    ...Primary.args,
-    label: 'With Helper Text',
-    helperText: 'Please select a valid date and time',
-  },
-};
-
-export const MinMaxDates: Story = {
-  args: {
-    ...Primary.args,
-    label: 'With Min and Max Dates',
-    minDate: new Date('2024-01-01'),
-    maxDate: new Date('2024-12-31'),
-  },
-};
-
-export const CustomIcon: Story = {
-  args: {
-    ...Primary.args,
-    label: 'With Custom Icon',
-    openPickerIcon: Icons.CareerIcon,
-  },
-};
-
-export const ReadOnly: Story = {
-  args: {
-    ...Primary.args,
-    label: 'Read Only',
-    required: false,
-    disabled: true,
-    value: new Date('2024-09-15 14:30'),
-  },
-};
-
-export const DisableFutureDates: Story = {
-  args: {
-    ...Primary.args,
-    label: 'Disable Future Dates',
-    disableFuture: true,
-  },
-};
-
-export const DisablePastDates: Story = {
-  args: {
-    ...Primary.args,
-    label: 'Disable Past Dates',
-    disablePast: true,
-  },
-};
-
-export const DisableSpecificDates: Story = {
-  args: {
-    ...Primary.args,
-    label: 'Disable Weekends',
-    shouldDisableDate: (date: Date) =>
-      date.getDay() === 0 || date.getDay() === 6,
-  },
-};

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

@@ -1,30 +0,0 @@
-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'}>
-      {Object.values(IconButtons).map((IconButton) => (
-        <IconButton />
-      ))}
-    </Stack>
-  );
-};
-
-export default {
-  title: 'Input/IconButtons',
-  component: IconButtonsStory,
-  tags: ['autodocs'],
-  argTypes: {},
-} as Meta<typeof IconButtonsStory>;
-
-type Story = StoryObj<typeof IconButtonsStory>;
-
-export const Icon: Story = {
-  render: (args: any) => (
-    <>
-      <IconButtonsStory />
-    </>
-  ),
-};

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

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

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

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

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

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

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

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

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

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

package/src/stories/Input/Select.stories.tsx

@@ -1,70 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { Select } from '../../components/export';
-// Adjust the import path as necessary
-
-const meta: Meta<typeof Select> = {
-  title: 'Input/Select',
-  component: Select,
-  argTypes: {
-    options: {
-      description: 'Array of options with label, value, and optional color',
-      control: 'object',
-    },
-    value: {
-      description: 'Selected value for the Select component',
-      control: 'text',
-    },
-    onChange: {
-      description: 'Function to handle value changes',
-      action: 'changed',
-    },
-    containerSx: {
-      description: 'SX props for styling the container',
-      control: 'object',
-    },
-  },
-};
-export default meta;
-
-type Story = StoryObj<typeof Select>;
-
-export const Default: Story = {
-  args: {
-    value: undefined,
-    options: [
-      { label: 'Red Option', value: 'red', color: 'red' },
-      { label: 'Green Option', value: 'green', color: 'green' },
-      { label: 'Blue Option', value: 'blue', color: 'blue' },
-      { label: 'Pink Option', value: 'pink', color: 'pink' },
-      { label: 'Yellow Option', value: 'yellow', color: 'yellow' },
-      { label: 'Orange Option', value: 'orange', color: 'orange' },
-    ],
-    containerSx: {
-      width: 200,
-    },
-  },
-};
-
-export const WithPreselectedValue: Story = {
-  args: {
-    ...Default.args,
-    value: 'green',
-  },
-};
-
-export const WithPlaceHolder: Story = {
-  args: {
-    ...Default.args,
-    // placeholder: 'Select an option...',
-  },
-};
-
-export const EmptyOptions: Story = {
-  args: {
-    value: '',
-    options: [],
-    containerSx: {
-      width: 200,
-    },
-  },
-};

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

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