@shohojdhara/atomix 0.1.16 → 0.1.18

package/src/components/DatePicker/types.ts

@@ -2,14 +2,14 @@ import React from 'react';
 
 export type DatePickerViewMode = 'days' | 'months' | 'years';
 
-export type DatePickerPlacement = 
-  | 'top-start' 
-  | 'top-end' 
-  | 'bottom-start' 
-  | 'bottom-end' 
-  | 'left-start' 
-  | 'left-end' 
-  | 'right-start' 
+export type DatePickerPlacement =
+  | 'top-start'
+  | 'top-end'
+  | 'bottom-start'
+  | 'bottom-end'
+  | 'left-start'
+  | 'left-end'
+  | 'right-start'
   | 'right-end';
 
 export type DatePickerSize = 'sm' | 'md' | 'lg';
@@ -26,117 +26,117 @@ export interface DatePickerProps {
    * The currently selected date value
    */
   value?: Date | null;
-  
+
   /**
    * Callback function when date is changed
    */
   onChange?: (date: Date | null) => void;
-  
+
   /**
    * Selection mode - single date or date range
    * @default "single"
    */
   selectionMode?: DatePickerSelectionMode;
-  
+
   /**
    * The start date of the range (only used when selectionMode is "range")
    */
   startDate?: Date | null;
-  
+
   /**
    * The end date of the range (only used when selectionMode is "range")
    */
   endDate?: Date | null;
-  
+
   /**
    * Callback function when date range is changed
    */
   onRangeChange?: (range: DateRange) => void;
-  
+
   /**
    * Format for the date display (follows Intl.DateTimeFormat patterns)
    * @default "MM/dd/yyyy"
    */
   format?: string;
-  
+
   /**
    * Minimum selectable date
    */
   minDate?: Date;
-  
+
   /**
    * Maximum selectable date
    */
   maxDate?: Date;
-  
+
   /**
    * Placeholder text for the input
    * @default "Select date..."
    */
   placeholder?: string;
-  
+
   /**
    * Whether the datepicker is disabled
    * @default false
    */
   disabled?: boolean;
-  
+
   /**
    * Whether the datepicker is read-only
    * @default false
    */
   readOnly?: boolean;
-  
+
   /**
    * Whether to show a clear button
    * @default true
    */
   clearable?: boolean;
-  
+
   /**
    * Whether to show the "Today" button
    * @default true
    */
   showTodayButton?: boolean;
-  
+
   /**
    * Whether to show week numbers
    * @default false
    */
   showWeekNumbers?: boolean;
-  
+
   /**
    * Whether to display the datepicker inline (always visible)
    * @default false
    */
   inline?: boolean;
-  
+
   /**
    * ID for the input element
    */
   id?: string;
-  
+
   /**
    * Name for the input element
    */
   name?: string;
-  
+
   /**
    * Additional class name for the datepicker component
    */
   className?: string;
-  
+
   /**
    * Placement of the dropdown calendar
    * @default "bottom-start"
    */
   placement?: DatePickerPlacement;
-  
+
   /**
    * Additional class name for the input element
    */
   inputClassName?: string;
-  
+
   /**
    * Size of the input field
    * @default "md"
@@ -149,17 +149,17 @@ export interface DatePickerRef {
    * Open the datepicker
    */
   open: () => void;
-  
+
   /**
    * Close the datepicker
    */
   close: () => void;
-  
+
   /**
    * Clear the selected date
    */
   clear: () => void;
-  
+
   /**
    * Set focus on the input element
    */

package/src/components/DatePicker/utils.ts

@@ -4,7 +4,7 @@
 export function getMonthName(month: number): string {
   const date = new Date();
   date.setMonth(month);
-  
+
   return date.toLocaleString('default', { month: 'long' });
 }
 
@@ -27,11 +27,11 @@ export function getFirstDayOfMonth(year: number, month: number): number {
  */
 export function formatDate(date: Date, format: string): string {
   if (!date) return '';
-  
+
   const day = date.getDate();
   const month = date.getMonth() + 1;
   const year = date.getFullYear();
-  
+
   // Simple formatting for the most common patterns
   return format
     .replace('yyyy', year.toString())
@@ -44,13 +44,17 @@ export function formatDate(date: Date, format: string): string {
 /**
  * Format a date range for display
  */
-export function formatDateRange(startDate: Date | null, endDate: Date | null, format: string): string {
+export function formatDateRange(
+  startDate: Date | null,
+  endDate: Date | null,
+  format: string
+): string {
   if (!startDate) return '';
-  
+
   if (!endDate) {
     return `${formatDate(startDate, format)} - Select end date`;
   }
-  
+
   return `${formatDate(startDate, format)} - ${formatDate(endDate, format)}`;
 }
 
@@ -59,49 +63,49 @@ export function formatDateRange(startDate: Date | null, endDate: Date | null, fo
  */
 export function parseDate(dateStr: string, format: string): Date | null {
   if (!dateStr) return null;
-  
+
   // Simple parsing for common formats
   const normalized = format.toLowerCase();
-  
+
   if (normalized === 'mm/dd/yyyy') {
     const parts = dateStr.split('/');
     if (parts.length !== 3) return null;
-    
+
     const month = parseInt(parts[0], 10) - 1;
     const day = parseInt(parts[1], 10);
     const year = parseInt(parts[2], 10);
-    
+
     if (isNaN(month) || isNaN(day) || isNaN(year)) return null;
-    
+
     return new Date(year, month, day);
   }
-  
+
   if (normalized === 'dd/mm/yyyy') {
     const parts = dateStr.split('/');
     if (parts.length !== 3) return null;
-    
+
     const day = parseInt(parts[0], 10);
     const month = parseInt(parts[1], 10) - 1;
     const year = parseInt(parts[2], 10);
-    
+
     if (isNaN(month) || isNaN(day) || isNaN(year)) return null;
-    
+
     return new Date(year, month, day);
   }
-  
+
   if (normalized === 'yyyy-mm-dd') {
     const parts = dateStr.split('-');
     if (parts.length !== 3) return null;
-    
+
     const year = parseInt(parts[0], 10);
     const month = parseInt(parts[1], 10) - 1;
     const day = parseInt(parts[2], 10);
-    
+
     if (isNaN(month) || isNaN(day) || isNaN(year)) return null;
-    
+
     return new Date(year, month, day);
   }
-  
+
   // Fallback to native parsing
   const parsedDate = new Date(dateStr);
   return isNaN(parsedDate.getTime()) ? null : parsedDate;
@@ -110,18 +114,21 @@ export function parseDate(dateStr: string, format: string): Date | null {
 /**
  * Try to parse a date range string (e.g. "01/01/2023 - 01/15/2023")
  */
-export function parseDateRange(rangeStr: string, format: string): { startDate: Date | null, endDate: Date | null } {
+export function parseDateRange(
+  rangeStr: string,
+  format: string
+): { startDate: Date | null; endDate: Date | null } {
   if (!rangeStr) return { startDate: null, endDate: null };
-  
+
   const parts = rangeStr.split('-');
   if (parts.length !== 2) return { startDate: null, endDate: null };
-  
+
   const startDateStr = parts[0].trim();
   const endDateStr = parts[1].trim();
-  
+
   const startDate = parseDate(startDateStr, format);
   const endDate = parseDate(endDateStr, format);
-  
+
   return { startDate, endDate };
 }
 
@@ -130,23 +137,27 @@ export function parseDateRange(rangeStr: string, format: string): { startDate: D
  */
 export function isDateInRange(date: Date, minDate?: Date, maxDate?: Date): boolean {
   if (!date) return false;
-  
+
   if (minDate && date < minDate) return false;
   if (maxDate && date > maxDate) return false;
-  
+
   return true;
 }
 
 /**
  * Check if a date is between startDate and endDate (inclusive)
  */
-export function isDateInSelectedRange(date: Date, startDate: Date | null, endDate: Date | null): boolean {
+export function isDateInSelectedRange(
+  date: Date,
+  startDate: Date | null,
+  endDate: Date | null
+): boolean {
   if (!date || !startDate || !endDate) return false;
-  
+
   // Handle case where end date is before start date
   if (endDate < startDate) {
     return date >= endDate && date <= startDate;
   }
-  
+
   return date >= startDate && date <= endDate;
 }

package/src/components/Dropdown/Dropdown.stories.tsx

@@ -12,46 +12,61 @@ const meta: Meta<typeof Dropdown> = {
     layout: 'centered',
     docs: {
       description: {
-        component: 'Dropdown component with a toggleable menu. The dropdown menu appears on click or hover, depending on the trigger prop.'
-      }
-    }
+        component:
+          'Dropdown component with a toggleable menu. The dropdown menu appears on click or hover, depending on the trigger prop.',
+      },
+    },
   },
   argTypes: {
     placement: {
       control: 'select',
       options: [
-        'bottom-start', 'bottom-end',
-        'top-start', 'top-end',
-        'left-start', 'left-end',
-        'right-start', 'right-end'
+        'bottom-start',
+        'bottom-end',
+        'top-start',
+        'top-end',
+        'left-start',
+        'left-end',
+        'right-start',
+        'right-end',
       ],
-      description: 'The placement of the dropdown menu relative to the trigger element'
+      description: 'The placement of the dropdown menu relative to the trigger element',
     },
     trigger: {
       control: 'radio',
       options: ['click', 'hover'],
-      description: 'How the dropdown is triggered - by click or hover'
+      description: 'How the dropdown is triggered - by click or hover',
     },
     variant: {
       control: 'select',
-      options: ['primary', 'secondary', 'tertiary', 'success', 'info', 'warning', 'error', 'light', 'dark'],
-      description: 'The color variant of the dropdown'
+      options: [
+        'primary',
+        'secondary',
+        'tertiary',
+        'success',
+        'info',
+        'warning',
+        'error',
+        'light',
+        'dark',
+      ],
+      description: 'The color variant of the dropdown',
     },
     minWidth: {
       control: 'text',
-      description: 'Minimum width of the dropdown menu'
+      description: 'Minimum width of the dropdown menu',
     },
     maxHeight: {
       control: 'text',
-      description: 'Maximum height of the dropdown menu'
+      description: 'Maximum height of the dropdown menu',
     },
     closeOnClickOutside: {
       control: 'boolean',
-      description: 'Whether to close the dropdown when clicking outside'
+      description: 'Whether to close the dropdown when clicking outside',
     },
     closeOnEscape: {
       control: 'boolean',
-      description: 'Whether to close the dropdown when pressing the Escape key'
+      description: 'Whether to close the dropdown when pressing the Escape key',
     },
   },
 };
@@ -64,14 +79,13 @@ type Story = StoryObj<typeof Dropdown>;
  */
 const InteractiveDropdown = (args: React.ComponentProps<typeof Dropdown>) => {
   const [isOpen, setIsOpen] = useState(false);
-  
+
   return (
-    <div className="u-p-4" style={{ minHeight: '300px', display: 'flex', alignItems: 'flex-start' }}>
-      <Dropdown 
-        {...args} 
-        isOpen={isOpen}
-        onOpenChange={setIsOpen}
-      />
+    <div
+      className="u-p-4"
+      style={{ minHeight: '300px', display: 'flex', alignItems: 'flex-start' }}
+    >
+      <Dropdown {...args} isOpen={isOpen} onOpenChange={setIsOpen} />
     </div>
   );
 };
@@ -83,7 +97,11 @@ export const Default: Story = {
   args: {
     trigger: 'click',
     placement: 'bottom-start',
-    children: <button className="c-btn c-btn--primary">Dropdown <Icon name="CaretDown" className="c-dropdown__toggle-icon" size="sm" /></button>,
+    children: (
+      <button className="c-btn c-btn--primary">
+        Dropdown <Icon name="CaretDown" className="c-dropdown__toggle-icon" size="sm" />
+      </button>
+    ),
     menu: (
       <>
         <DropdownItem>Menu item 1</DropdownItem>
@@ -92,7 +110,7 @@ export const Default: Story = {
       </>
     ),
   },
-  render: (args) => <InteractiveDropdown {...args} />,
+  render: args => <InteractiveDropdown {...args} />,
 };
 
 /**
@@ -103,7 +121,7 @@ export const ClickTrigger: Story = {
     ...Default.args,
     trigger: 'click',
   },
-  render: (args) => <InteractiveDropdown {...args} />,
+  render: args => <InteractiveDropdown {...args} />,
 };
 
 /**
@@ -114,7 +132,7 @@ export const HoverTrigger: Story = {
     ...Default.args,
     trigger: 'hover',
   },
-  render: (args) => <InteractiveDropdown {...args} />,
+  render: args => <InteractiveDropdown {...args} />,
 };
 
 /**
@@ -132,7 +150,7 @@ export const WithIcons: Story = {
       </>
     ),
   },
-  render: (args) => <InteractiveDropdown {...args} />,
+  render: args => <InteractiveDropdown {...args} />,
 };
 
 /**
@@ -150,7 +168,7 @@ export const WithLinks: Story = {
       </>
     ),
   },
-  render: (args) => <InteractiveDropdown {...args} />,
+  render: args => <InteractiveDropdown {...args} />,
 };
 
 /**
@@ -171,7 +189,7 @@ export const WithHeader: Story = {
       </>
     ),
   },
-  render: (args) => <InteractiveDropdown {...args} />,
+  render: args => <InteractiveDropdown {...args} />,
 };
 
 /**
@@ -188,7 +206,7 @@ export const ActiveItem: Story = {
       </>
     ),
   },
-  render: (args) => <InteractiveDropdown {...args} />,
+  render: args => <InteractiveDropdown {...args} />,
 };
 
 /**
@@ -205,7 +223,7 @@ export const DisabledItem: Story = {
       </>
     ),
   },
-  render: (args) => <InteractiveDropdown {...args} />,
+  render: args => <InteractiveDropdown {...args} />,
 };
 
 /**
@@ -215,9 +233,10 @@ export const AllPlacements: Story = {
   parameters: {
     docs: {
       description: {
-        story: 'The Dropdown component supports various placement options to position the menu relative to the trigger element.'
-      }
-    }
+        story:
+          'The Dropdown component supports various placement options to position the menu relative to the trigger element.',
+      },
+    },
   },
   render: () => {
     // All possible placement options with properly typed icon names
@@ -231,19 +250,22 @@ export const AllPlacements: Story = {
       { value: 'right-start', label: 'Right Start', icon: 'CaretRight' as const },
       { value: 'right-end', label: 'Right End', icon: 'CaretRight' as const },
     ];
-    
+
     // Create a grid layout with plenty of space for dropdowns to display correctly
     return (
       <div className="u-p-5" style={{ height: '650px' }}>
-        <div className="u-d-grid" style={{ 
-          gridTemplateColumns: 'repeat(4, 1fr)', 
-          gridTemplateRows: 'repeat(2, 1fr)', 
-          gap: '1.5rem',
-          height: '100%'
-        }}>
-          {placements.map((placement) => (
-            <div 
-              key={placement.value} 
+        <div
+          className="u-d-grid"
+          style={{
+            gridTemplateColumns: 'repeat(4, 1fr)',
+            gridTemplateRows: 'repeat(2, 1fr)',
+            gap: '1.5rem',
+            height: '100%',
+          }}
+        >
+          {placements.map(placement => (
+            <div
+              key={placement.value}
               className="u-d-flex u-align-items-center u-justify-content-center"
             >
               <Dropdown
@@ -254,7 +276,8 @@ export const AllPlacements: Story = {
                 closeOnEscape={false}
                 children={
                   <button className="c-btn c-btn--primary">
-                    {placement.label} <Icon name={placement.icon} className="c-dropdown__toggle-icon" size="sm" />
+                    {placement.label}{' '}
+                    <Icon name={placement.icon} className="c-dropdown__toggle-icon" size="sm" />
                   </button>
                 }
                 menu={
@@ -273,7 +296,6 @@ export const AllPlacements: Story = {
   },
 };
 
-
 /**
  * Dropdown with all color variants
  */
@@ -281,13 +303,14 @@ export const AllVariants: Story = {
   parameters: {
     docs: {
       description: {
-        story: 'The Dropdown component supports various color variants to match your design system.'
-      }
-    }
+        story:
+          'The Dropdown component supports various color variants to match your design system.',
+      },
+    },
   },
   render: () => {
     const [openDropdown, setOpenDropdown] = useState<string | null>(null);
-    
+
     const handleOpenChange = (variant: string, isOpen: boolean) => {
       if (isOpen) {
         setOpenDropdown(variant);
@@ -295,20 +318,27 @@ export const AllVariants: Story = {
         setOpenDropdown(null);
       }
     };
-    
+
     return (
       <div className="u-p-4" style={{ minHeight: '300px' }}>
         <div className="u-d-flex u-flex-wrap u-gap-3">
           {[
-            'primary', 'secondary', 'tertiary', 'success', 
-            'info', 'warning', 'error', 'light', 'dark'
-          ].map((color) => (
+            'primary',
+            'secondary',
+            'tertiary',
+            'success',
+            'info',
+            'warning',
+            'error',
+            'light',
+            'dark',
+          ].map(color => (
             <Dropdown
               key={color}
               variant={color as ThemeColor}
               trigger="click"
               isOpen={openDropdown === color}
-              onOpenChange={(isOpen) => handleOpenChange(color, isOpen)}
+              onOpenChange={isOpen => handleOpenChange(color, isOpen)}
               children={
                 <button className={`c-btn c-btn--${color}`}>
                   {color} <Icon name="CaretDown" className="c-dropdown__toggle-icon" size="sm" />