@shohojdhara/atomix 0.1.16 → 0.1.18

package/src/components/DatePicker/DatePicker.stories.tsx

@@ -15,10 +15,10 @@ const meta: Meta<typeof DatePicker> = {
     value: { control: 'date' },
     startDate: { control: 'date' },
     endDate: { control: 'date' },
-    selectionMode: { 
+    selectionMode: {
       control: { type: 'radio' },
       options: ['single', 'range'],
-      description: 'Selection mode - single date or date range'
+      description: 'Selection mode - single date or date range',
     },
     minDate: { control: 'date' },
     maxDate: { control: 'date' },
@@ -30,24 +30,24 @@ const meta: Meta<typeof DatePicker> = {
     showTodayButton: { control: 'boolean' },
     showWeekNumbers: { control: 'boolean' },
     inline: { control: 'boolean' },
-    size: { 
-      control: { type: 'select' }, 
-      options: ['sm', 'md', 'lg'] 
+    size: {
+      control: { type: 'select' },
+      options: ['sm', 'md', 'lg'],
     },
     placement: {
       control: { type: 'select' },
       options: [
-        'top-start', 
-        'top-end', 
-        'bottom-start', 
-        'bottom-end', 
-        'left-start', 
-        'left-end', 
-        'right-start', 
-        'right-end'
-      ]
-    }
-  }
+        'top-start',
+        'top-end',
+        'bottom-start',
+        'bottom-end',
+        'left-start',
+        'left-end',
+        'right-start',
+        'right-end',
+      ],
+    },
+  },
 };
 
 export default meta;
@@ -63,126 +63,129 @@ export const Default: Story = {
     showWeekNumbers: false,
     size: 'md',
     placement: 'bottom-start',
-    selectionMode: 'single'
+    selectionMode: 'single',
   },
-  render: (args) => {
+  render: args => {
     const [date, setDate] = useState<Date | null>(null);
     return (
-      <div style={{ width: '300px' }} className='u-mt-20 u-mx-auto u-items-center'>
-        <DatePicker
-          {...args}
-          value={date}
-          onChange={setDate}
-        />
+      <div style={{ width: '300px' }} className="u-mt-20 u-mx-auto u-items-center">
+        <DatePicker {...args} value={date} onChange={setDate} />
       </div>
     );
-  }
+  },
 };
 
 export const WithInitialDate: Story = {
   args: {
-    selectionMode: 'single'
+    selectionMode: 'single',
   },
-  render: (args) => {
+  render: args => {
     const initialDate = new Date();
     const [date, setDate] = useState<Date | null>(initialDate);
     return (
-      <div style={{ width: '300px' }} className='u-mt-20 u-mx-auto u-items-center'>
-        <DatePicker
-          {...args}
-          value={date}
-          onChange={setDate}
-        />
+      <div style={{ width: '300px' }} className="u-mt-20 u-mx-auto u-items-center">
+        <DatePicker {...args} value={date} onChange={setDate} />
       </div>
     );
-  }
+  },
 };
 
 export const Inline: Story = {
   args: {
     inline: true,
     showWeekNumbers: true,
-    selectionMode: 'single'
+    selectionMode: 'single',
   },
-  render: (args) => {
+  render: args => {
     const [date, setDate] = useState<Date | null>(new Date());
     return (
-      <div style={{ width: '300px' }} className='u-mt-20 u-mx-auto u-items-center'>
-        <DatePicker
-          {...args}
-          value={date}
-          onChange={setDate}
-        />
+      <div style={{ width: '300px' }} className="u-mt-20 u-mx-auto u-items-center">
+        <DatePicker {...args} value={date} onChange={setDate} />
       </div>
     );
-  }
+  },
 };
 
 export const DateRangeSelection: Story = {
   args: {
     selectionMode: 'range',
-    placeholder: 'Select date range...'
+    placeholder: 'Select date range...',
   },
-  render: (args) => {
+  render: args => {
     const [dateRange, setDateRange] = useState<DateRange>({
       startDate: null,
-      endDate: null
+      endDate: null,
     });
-    
+
     const handleRangeChange = (range: DateRange) => {
       setDateRange(range);
     };
-    
+
     return (
-      <div style={{width: '300px' }} className='u-d-flex u-flex-column u-gap-4 u-mt-20 u-mx-auto u-items-center'>
+      <div
+        style={{ width: '300px' }}
+        className="u-d-flex u-flex-column u-gap-4 u-mt-20 u-mx-auto u-items-center"
+      >
         <DatePicker
           {...args}
           startDate={dateRange.startDate}
           endDate={dateRange.endDate}
           onRangeChange={handleRangeChange}
         />
-        <div style={{ marginTop: '1rem', padding: '0.75rem', backgroundColor: '#f5f5f5', borderRadius: '0.25rem' }}>
+        <div
+          style={{
+            marginTop: '1rem',
+            padding: '0.75rem',
+            backgroundColor: '#f5f5f5',
+            borderRadius: '0.25rem',
+          }}
+        >
           <p>
-            Selected range: {dateRange.startDate && dateRange.endDate
+            Selected range:{' '}
+            {dateRange.startDate && dateRange.endDate
               ? formatDateRange(dateRange.startDate, dateRange.endDate, 'MM/dd/yyyy')
-              : (dateRange.startDate
+              : dateRange.startDate
                 ? formatDateRange(dateRange.startDate, null, 'MM/dd/yyyy')
-                : 'No range selected'
-              )
-            }
+                : 'No range selected'}
           </p>
         </div>
       </div>
     );
-  }
+  },
 };
 
 export const DateRangeWithLimits: Story = {
   args: {
     selectionMode: 'range',
-    placeholder: 'Select date range...'
+    placeholder: 'Select date range...',
   },
-  render: (args) => {
+  render: args => {
     // Set min date to 7 days ago
     const minDate = new Date();
     minDate.setDate(minDate.getDate() - 7);
-    
+
     // Set max date to 14 days from now
     const maxDate = new Date();
     maxDate.setDate(maxDate.getDate() + 14);
-    
+
     const [dateRange, setDateRange] = useState<DateRange>({
       startDate: null,
-      endDate: null
+      endDate: null,
     });
-    
+
     const handleRangeChange = (range: DateRange) => {
       setDateRange(range);
     };
-    
+
     return (
-      <div style={{ width: '400px' }} className='u-d-flex u-flex-column u-gap-4 u-mt-20 u-mx-auto u-items-center'>
-        <p className='u-text-info u-px-2 u-py-4 u-bg-info-subtle u-fs-xs u-text-center'>Select a date range between  {minDate.toLocaleDateString()} and {maxDate.toLocaleDateString()}</p>
+      <div
+        style={{ width: '400px' }}
+        className="u-d-flex u-flex-column u-gap-4 u-mt-20 u-mx-auto u-items-center"
+      >
+        <p className="u-text-info u-px-2 u-py-4 u-bg-info-subtle u-fs-xs u-text-center">
+          Select a date range between {minDate.toLocaleDateString()} and{' '}
+          {maxDate.toLocaleDateString()}
+        </p>
         <DatePicker
           {...args}
           startDate={dateRange.startDate}
@@ -193,128 +196,119 @@ export const DateRangeWithLimits: Story = {
         />
       </div>
     );
-  }
+  },
 };
 
 export const InlineRangeSelection: Story = {
   args: {
     selectionMode: 'range',
     inline: true,
-    showWeekNumbers: true
+    showWeekNumbers: true,
   },
-  render: (args) => {
+  render: args => {
     const [dateRange, setDateRange] = useState<DateRange>({
       startDate: null,
-      endDate: null
+      endDate: null,
     });
-    
+
     const handleRangeChange = (range: DateRange) => {
       setDateRange(range);
     };
-    
+
     return (
-      <div style={{ width: '300px' }} className='u-d-flex u-flex-column u-gap-4 u-mt-20 u-mx-auto u-items-center'>
+      <div
+        style={{ width: '300px' }}
+        className="u-d-flex u-flex-column u-gap-4 u-mt-20 u-mx-auto u-items-center"
+      >
         <DatePicker
           {...args}
           startDate={dateRange.startDate}
           endDate={dateRange.endDate}
           onRangeChange={handleRangeChange}
         />
-        <div style={{ marginTop: '1rem', padding: '0.75rem', backgroundColor: '#f5f5f5', borderRadius: '0.25rem' }}>
+        <div
+          style={{
+            marginTop: '1rem',
+            padding: '0.75rem',
+            backgroundColor: '#f5f5f5',
+            borderRadius: '0.25rem',
+          }}
+        >
           <p>
-            Selected range: {dateRange.startDate && dateRange.endDate
+            Selected range:{' '}
+            {dateRange.startDate && dateRange.endDate
               ? formatDateRange(dateRange.startDate, dateRange.endDate, 'MM/dd/yyyy')
-              : (dateRange.startDate
+              : dateRange.startDate
                 ? formatDateRange(dateRange.startDate, null, 'MM/dd/yyyy')
-                : 'No range selected'
-              )
-            }
+                : 'No range selected'}
           </p>
         </div>
       </div>
     );
-  }
+  },
 };
 
 export const Sizes: Story = {
-  render: (args) => {
+  render: args => {
     const [date, setDate] = useState<Date | null>(null);
-    
+
     return (
-      <div style={{width: '300px'}} className={'u-d-flex u-flex-column u-gap-4 u-mt-20 u-mx-auto u-items-center'}>
-        <DatePicker
-          {...args}
-          size="sm"
-          placeholder="Small (sm)"
-          value={date}
-          onChange={setDate}
-        />
-        <DatePicker
-          {...args}
-          size="md"
-          placeholder="Medium (md)"
-          value={date}
-          onChange={setDate}
-        />
-        <DatePicker
-          {...args}
-          size="lg"
-          placeholder="Large (lg)"
-          value={date}
-          onChange={setDate}
-        />
+      <div
+        style={{ width: '300px' }}
+        className={'u-d-flex u-flex-column u-gap-4 u-mt-20 u-mx-auto u-items-center'}
+      >
+        <DatePicker {...args} size="sm" placeholder="Small (sm)" value={date} onChange={setDate} />
+        <DatePicker {...args} size="md" placeholder="Medium (md)" value={date} onChange={setDate} />
+        <DatePicker {...args} size="lg" placeholder="Large (lg)" value={date} onChange={setDate} />
       </div>
     );
-  }
+  },
 };
 
 export const Disabled: Story = {
   args: {
     disabled: true,
-    placeholder: 'Disabled DatePicker'
+    placeholder: 'Disabled DatePicker',
   },
-  render: (args) => {
+  render: args => {
     const [date, setDate] = useState<Date | null>(null);
     return (
-        <div style={{ width: '300px' }} className='u-mt-20 u-mx-auto'>
-          <DatePicker
-              {...args}
-              value={date}
-              onChange={setDate}
-          />
-        </div>
+      <div style={{ width: '300px' }} className="u-mt-20 u-mx-auto">
+        <DatePicker {...args} value={date} onChange={setDate} />
+      </div>
     );
-  }
+  },
 };
 
 export const ReadOnly: Story = {
   args: {
     readOnly: true,
-    placeholder: 'Read-only DatePicker'
+    placeholder: 'Read-only DatePicker',
   },
-  render: (args) => {
+  render: args => {
     const initialDate = new Date();
     const [date, setDate] = useState<Date | null>(initialDate);
     return (
-        <div className="u-mt-20 u-mx-auto" style={{ width: '300px' }} data-testid="read-only-datepicker">
-          <DatePicker
-            {...args}
-            value={date}
-            onChange={setDate}/>
-        </div>
+      <div
+        className="u-mt-20 u-mx-auto"
+        style={{ width: '300px' }}
+        data-testid="read-only-datepicker"
+      >
+        <DatePicker {...args} value={date} onChange={setDate} />
+      </div>
     );
-  }
+  },
 };
 
 export const DifferentFormats: Story = {
-  render: (args) => {
+  render: args => {
     const initialDate = new Date();
     const [date1, setDate1] = useState<Date | null>(initialDate);
     const [date2, setDate2] = useState<Date | null>(initialDate);
     const [date3, setDate3] = useState<Date | null>(initialDate);
-    
+
     return (
-      <div className='u-w-75 u-mx-auto u-mt-20 u-d-flex u-gap-3'>
+      <div className="u-w-75 u-mx-auto u-mt-20 u-d-flex u-gap-3">
         <DatePicker
           {...args}
           format="MM/dd/yyyy"
@@ -338,40 +332,34 @@ export const DifferentFormats: Story = {
         />
       </div>
     );
-  }
+  },
 };
 
 export const Playground: Story = {
-  render: (args) => {
+  render: args => {
     const [date, setDate] = useState<Date | null>(null);
     const [dateRange, setDateRange] = useState<DateRange>({
       startDate: null,
-      endDate: null
+      endDate: null,
     });
-    
+
     const handleSingleDateChange = (date: Date | null) => {
       setDate(date);
     };
-    
+
     const handleRangeChange = (range: DateRange) => {
       setDateRange(range);
     };
-    
-    return (
-      args.selectionMode === 'single' ? (
-        <DatePicker
-          {...args}
-          value={date}
-          onChange={handleSingleDateChange}
-        />
-      ) : (
-        <DatePicker
-          {...args}
-          startDate={dateRange.startDate}
-          endDate={dateRange.endDate}
-          onRangeChange={handleRangeChange}
-        />
-      )
+
+    return args.selectionMode === 'single' ? (
+      <DatePicker {...args} value={date} onChange={handleSingleDateChange} />
+    ) : (
+      <DatePicker
+        {...args}
+        startDate={dateRange.startDate}
+        endDate={dateRange.endDate}
+        onRangeChange={handleRangeChange}
+      />
     );
-  }
+  },
 };