@campxdev/react-blueprint 2.3.11 → 3.0.0-alpha.2

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

@@ -1,72 +1,144 @@
-// Import React and other necessary elements
-import { Meta } from '@storybook/react';
-import { Button, ButtonProps } from '../../components/Input/Button/Button';
+import { Icons } from '@/components/export';
+import type { Meta, StoryObj } from '@storybook/react';
+import { Button } 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 {
+const meta: Meta<typeof Button> = {
   title: 'Input/Button',
   component: Button,
   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
-    },
-  },
   argTypes: {
     variant: {
       control: 'select',
-      options: ['contained', 'outlined', 'text', 'string'],
-      description: 'The Button Variant to use',
+      options: [
+        'default',
+        'destructive',
+        'outline',
+        'secondary',
+        'ghost',
+        'link',
+      ],
     },
-    children: {
-      control: 'text',
-      description: 'text in button',
-    },
-    color: {
+    size: {
       control: 'select',
-      options: ['primary', 'secondary'],
-      description: 'The Button Variant to use',
+      options: ['default', 'sm', 'lg', 'icon', 'icon-sm', 'icon-lg'],
     },
-    disabled: {
+    loading: {
       control: 'boolean',
-      description: 'Disabled Button',
-      defaultValue: false,
     },
-    loading: {
+    disabled: {
       control: 'boolean',
-      description: 'Loading Button',
-      defaultValue: false,
     },
   },
-} as Meta<typeof Button>;
+};
 
-// Define stories directly as objects with render function
-export const Primary = {
-  render: (args: ButtonProps) => <Button {...args} />,
+export default meta;
+type Story = StoryObj<typeof Button>;
+
+// All Variants
+export const Default: Story = {
   args: {
-    color: 'primary',
-    variant: 'contained',
-    children: 'Primary Button',
+    children: 'Default Button',
+    variant: 'default',
   },
 };
 
-export const Secondary = {
-  render: (args: ButtonProps) => <Button {...args} />,
+export const Destructive: Story = {
+  args: {
+    children: 'Destructive Button',
+    variant: 'destructive',
+  },
+};
+
+export const Outline: Story = {
+  args: {
+    children: 'Outline Button',
+    variant: 'outline',
+  },
+};
+
+export const Secondary: Story = {
   args: {
-    color: 'secondary',
-    variant: 'contained',
     children: 'Secondary Button',
+    variant: 'secondary',
   },
 };
 
-export const Disabled = {
-  render: (args: ButtonProps) => <Button {...args} />,
+export const Ghost: Story = {
+  args: {
+    children: 'Ghost Button',
+    variant: 'ghost',
+  },
+};
+
+export const Link: Story = {
+  args: {
+    children: 'Link Button',
+    variant: 'link',
+  },
+};
+
+// Sizes
+export const Small: Story = {
+  args: {
+    children: 'Small Button',
+    size: 'sm',
+  },
+};
+
+export const Large: Story = {
+  args: {
+    children: 'Large Button',
+    size: 'lg',
+  },
+};
+
+export const Icon: Story = {
+  args: {
+    children: '🚀',
+    size: 'icon',
+  },
+};
+
+// States
+export const Disabled: Story = {
   args: {
-    disabled: true,
-    variant: 'contained',
     children: 'Disabled Button',
+    disabled: true,
   },
 };
+
+export const Loading: Story = {
+  args: {
+    children: 'Loading Button',
+    loading: true,
+  },
+};
+
+// All Variants Showcase
+export const AllVariants: Story = {
+  render: () => (
+    <div className="flex flex-col gap-4 p-4">
+      <div className="flex flex-wrap gap-2">
+        <Button variant="default">Default</Button>
+        <Button variant="destructive">Destructive</Button>
+        <Button variant="outline">Outline</Button>
+        <Button variant="secondary">Secondary</Button>
+        <Button variant="ghost">Ghost</Button>
+        <Button variant="link">Link</Button>
+      </div>
+      <div className="flex flex-wrap gap-2">
+        <Button startIcon={<Icons.CampxIcon />}>Start Icon</Button>
+        <Button endIcon={<Icons.CampxIcon />}>End Icon</Button>
+      </div>
+      <div className="flex flex-wrap gap-2">
+        <Button size="sm">Small</Button>
+        <Button size="default">Default</Button>
+        <Button size="lg">Large</Button>
+      </div>
+      <div className="flex flex-wrap gap-2">
+        <Button disabled>Disabled</Button>
+        <Button loading>Loading</Button>
+      </div>
+    </div>
+  ),
+};

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

@@ -1,18 +1,38 @@
-import { LocalizationProvider } from '@mui/x-date-pickers';
-import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
-import { Meta, StoryObj } from '@storybook/react/*';
+import { Meta, StoryObj } from '@storybook/react';
 import { add } from 'date-fns';
-import { Icons } from '../../components/Assets/Icons/Icons';
+import { CalendarRange } from 'lucide-react';
 import { DatePicker } from '../../components/Input/DatePicker/DatePicker';
 
 const meta: Meta<typeof DatePicker> = {
   title: 'Input/DatePicker',
   component: DatePicker,
+  tags: ['autodocs'],
+  argTypes: {
+    format: {
+      control: 'select',
+      options: ['yyyy', 'MMMM yyyy', 'dd MMMM yyyy', 'dd/MM/yyyy'],
+    },
+    views: {
+      control: 'object',
+    },
+    disabled: {
+      control: 'boolean',
+    },
+    required: {
+      control: 'boolean',
+    },
+    disablePast: {
+      control: 'boolean',
+    },
+    disableFuture: {
+      control: 'boolean',
+    },
+  },
   decorators: [
     (Story) => (
-      <LocalizationProvider dateAdapter={AdapterDateFns}>
+      <div className="p-4">
         <Story />
-      </LocalizationProvider>
+      </div>
     ),
   ],
 };
@@ -21,7 +41,7 @@ export default meta;
 
 type Story = StoryObj<typeof DatePicker>;
 
-export const Primary: Story = {
+export const Default: Story = {
   args: {
     label: 'Date Picker',
     name: 'date-picker',
@@ -30,36 +50,43 @@ export const Primary: Story = {
   },
 };
 
-export const Secondary: Story = {
+export const FullMonthText: Story = {
   args: {
-    ...Primary.args,
     label: 'Date Picker (Full Month Text)',
+    name: 'date-picker-full',
+    placeholder: 'Select Date',
     format: 'dd MMMM yyyy',
+    required: true,
   },
 };
 
-export const Tertiary: Story = {
+export const MonthYearOnly: Story = {
   args: {
-    ...Primary.args,
     label: 'Just Month Year',
+    name: 'date-picker-month-year',
+    placeholder: 'Select Month',
     format: 'MMMM yyyy',
     views: ['month', 'year'],
+    required: true,
   },
 };
 
-export const Quaternary: Story = {
+export const YearOnly: Story = {
   args: {
-    ...Primary.args,
     label: 'Just Year',
+    name: 'date-picker-year',
+    placeholder: 'Select Year',
     format: 'yyyy',
     views: ['year'],
+    required: true,
   },
 };
 
 export const WithShortcuts: Story = {
   args: {
-    ...Primary.args,
     label: 'With Shortcuts',
+    name: 'date-picker-shortcuts',
+    placeholder: 'Select Date',
     required: false,
     shortcutsItems: [
       { label: 'Today', getValue: () => new Date() },
@@ -85,8 +112,9 @@ export const WithShortcuts: Story = {
 
 export const WithDefaultValue: Story = {
   args: {
-    ...Primary.args,
     label: 'With Default Value',
+    name: 'date-picker-default',
+    placeholder: 'Select Date',
     required: false,
     value: new Date('2024/9/15'),
   },
@@ -94,8 +122,9 @@ export const WithDefaultValue: Story = {
 
 export const WithMinMaxDate: Story = {
   args: {
-    ...Primary.args,
     label: 'With Min and Max Date',
+    name: 'date-picker-minmax',
+    placeholder: 'Select Date',
     required: false,
     minDate: new Date('2024/8/15'),
     maxDate: new Date('2024/10/9'),
@@ -104,27 +133,29 @@ export const WithMinMaxDate: Story = {
 
 export const WithCustomIcon: Story = {
   args: {
-    ...Primary.args,
     label: 'With Custom Icon',
+    name: 'date-picker-icon',
+    placeholder: 'Select Date',
     required: false,
-    openPickerIcon: Icons.CareerIcon,
+    openPickerIcon: <CalendarRange />,
   },
 };
 
 export const WithPlaceHolderHelperText: Story = {
   args: {
-    ...Primary.args,
     label: 'With Place Holder, Helper Text',
-    required: false,
+    name: 'date-picker-helper',
     placeholder: 'CampX date',
+    required: false,
     helperText: 'Mandatory field',
   },
 };
 
 export const DisablePast: Story = {
   args: {
-    ...Primary.args,
     label: 'Disable Past Dates',
+    name: 'date-picker-no-past',
+    placeholder: 'Select Date',
     required: false,
     disablePast: true,
   },
@@ -132,17 +163,19 @@ export const DisablePast: Story = {
 
 export const DisableFuture: Story = {
   args: {
-    ...Primary.args,
     label: 'Disable Future Dates',
+    name: 'date-picker-no-future',
+    placeholder: 'Select Date',
     required: false,
     disableFuture: true,
   },
 };
 
-export const DisableSpecificDate: Story = {
+export const DisableWeekends: Story = {
   args: {
-    ...Primary.args,
-    label: 'Disable Specific Dates',
+    label: 'Disable Weekends',
+    name: 'date-picker-no-weekends',
+    placeholder: 'Select Date',
     required: false,
     shouldDisableDate: (date: Date) => {
       return date.getDay() === 0 || date.getDay() === 6;
@@ -150,10 +183,11 @@ export const DisableSpecificDate: Story = {
   },
 };
 
-export const DisableSpecificMonth: Story = {
+export const DisableFebruary: Story = {
   args: {
-    ...Primary.args,
-    label: 'Disable Specific Month (February)',
+    label: 'Disable February',
+    name: 'date-picker-no-feb',
+    placeholder: 'Select Date',
     required: false,
     shouldDisableMonth: (date: Date) => {
       return date.getMonth() === 1;
@@ -161,10 +195,11 @@ export const DisableSpecificMonth: Story = {
   },
 };
 
-export const DisableSpecificYear: Story = {
+export const DisableYear2022: Story = {
   args: {
-    ...Primary.args,
-    label: 'Disable Specific Year (2022)',
+    label: 'Disable Year 2022',
+    name: 'date-picker-no-2022',
+    placeholder: 'Select Date',
     required: false,
     shouldDisableYear: (date: Date) => {
       return date.getFullYear() === 2022;
@@ -172,12 +207,23 @@ export const DisableSpecificYear: Story = {
   },
 };
 
-export const ReadOnly = {
+export const Disabled: Story = {
   args: {
-    ...Primary.args,
-    label: 'Read Only',
+    label: 'Disabled',
+    name: 'date-picker-disabled',
+    placeholder: 'Select Date',
     required: false,
     disabled: true,
     value: new Date('2024/9/15'),
   },
 };
+
+export const WithError: Story = {
+  args: {
+    label: 'With Error',
+    name: 'date-picker-error',
+    placeholder: 'Select Date',
+    required: true,
+    error: 'This field is required',
+  },
+};