@shohojdhara/atomix 0.1.17 → 0.1.18

package/src/components/DatePicker/types.ts

@@ -0,0 +1,167 @@
+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'
+  | 'right-end';
+
+export type DatePickerSize = 'sm' | 'md' | 'lg';
+
+export type DatePickerSelectionMode = 'single' | 'range';
+
+export interface DateRange {
+  startDate: Date | null;
+  endDate: Date | null;
+}
+
+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"
+   */
+  size?: DatePickerSize;
+}
+
+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
+   */
+  focus: () => void;
+}

package/src/components/DatePicker/utils.ts

@@ -0,0 +1,163 @@
+/**
+ * Get the name of a month by its index (0-11)
+ */
+export function getMonthName(month: number): string {
+  const date = new Date();
+  date.setMonth(month);
+
+  return date.toLocaleString('default', { month: 'long' });
+}
+
+/**
+ * Get the number of days in a month
+ */
+export function getDaysInMonth(year: number, month: number): number {
+  return new Date(year, month + 1, 0).getDate();
+}
+
+/**
+ * Get the day of the week of the first day of a month (0-6, where 0 is Sunday)
+ */
+export function getFirstDayOfMonth(year: number, month: number): number {
+  return new Date(year, month, 1).getDay();
+}
+
+/**
+ * Format a date according to the specified format
+ */
+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())
+    .replace('MM', month.toString().padStart(2, '0'))
+    .replace('M', month.toString())
+    .replace('dd', day.toString().padStart(2, '0'))
+    .replace('d', day.toString());
+}
+
+/**
+ * Format a date range for display
+ */
+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)}`;
+}
+
+/**
+ * Parse a date string according to the specified format
+ */
+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;
+}
+
+/**
+ * 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 } {
+  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 };
+}
+
+/**
+ * Check if a date is within a min and max range
+ */
+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 {
+  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

@@ -0,0 +1,359 @@
+import React, { useState } from 'react';
+import { Meta, StoryObj } from '@storybook/react';
+import { Dropdown, DropdownItem, DropdownDivider, DropdownHeader } from './index';
+import { Icon } from '../Icon';
+import { ThemeColor } from '../../lib/types/components';
+
+const meta: Meta<typeof Dropdown> = {
+  title: 'Components/Dropdown',
+  component: Dropdown,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        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',
+      ],
+      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',
+    },
+    variant: {
+      control: 'select',
+      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',
+    },
+    maxHeight: {
+      control: 'text',
+      description: 'Maximum height of the dropdown menu',
+    },
+    closeOnClickOutside: {
+      control: 'boolean',
+      description: 'Whether to close the dropdown when clicking outside',
+    },
+    closeOnEscape: {
+      control: 'boolean',
+      description: 'Whether to close the dropdown when pressing the Escape key',
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Dropdown>;
+
+/**
+ * Interactive dropdown component that can be used in Storybook
+ */
+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>
+  );
+};
+
+/**
+ * Basic dropdown example with default settings
+ */
+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>
+    ),
+    menu: (
+      <>
+        <DropdownItem>Menu item 1</DropdownItem>
+        <DropdownItem>Menu item 2</DropdownItem>
+        <DropdownItem>Menu item 3</DropdownItem>
+      </>
+    ),
+  },
+  render: args => <InteractiveDropdown {...args} />,
+};
+
+/**
+ * Dropdown that opens on click
+ */
+export const ClickTrigger: Story = {
+  args: {
+    ...Default.args,
+    trigger: 'click',
+  },
+  render: args => <InteractiveDropdown {...args} />,
+};
+
+/**
+ * Dropdown that opens on hover
+ */
+export const HoverTrigger: Story = {
+  args: {
+    ...Default.args,
+    trigger: 'hover',
+  },
+  render: args => <InteractiveDropdown {...args} />,
+};
+
+/**
+ * Dropdown menu items with icons
+ */
+export const WithIcons: Story = {
+  args: {
+    ...Default.args,
+    menu: (
+      <>
+        <DropdownItem icon={<Icon name="House" size="sm" />}>Home</DropdownItem>
+        <DropdownItem icon={<Icon name="User" size="sm" />}>Profile</DropdownItem>
+        <DropdownItem icon={<Icon name="Gear" size="sm" />}>Settings</DropdownItem>
+        <DropdownItem icon={<Icon name="SignOut" size="sm" />}>Logout</DropdownItem>
+      </>
+    ),
+  },
+  render: args => <InteractiveDropdown {...args} />,
+};
+
+/**
+ * Dropdown menu items as links
+ */
+export const WithLinks: Story = {
+  args: {
+    ...Default.args,
+    menu: (
+      <>
+        <DropdownItem href="#home">Home</DropdownItem>
+        <DropdownItem href="#about">About</DropdownItem>
+        <DropdownItem href="#services">Services</DropdownItem>
+        <DropdownItem href="#contact">Contact</DropdownItem>
+      </>
+    ),
+  },
+  render: args => <InteractiveDropdown {...args} />,
+};
+
+/**
+ * Dropdown with section headers and dividers
+ */
+export const WithHeader: Story = {
+  args: {
+    ...Default.args,
+    menu: (
+      <>
+        <DropdownHeader>Account Options</DropdownHeader>
+        <DropdownItem>Profile</DropdownItem>
+        <DropdownItem>Settings</DropdownItem>
+        <DropdownDivider />
+        <DropdownHeader>Help & Support</DropdownHeader>
+        <DropdownItem>Documentation</DropdownItem>
+        <DropdownItem>Contact Support</DropdownItem>
+      </>
+    ),
+  },
+  render: args => <InteractiveDropdown {...args} />,
+};
+
+/**
+ * Dropdown with an active menu item
+ */
+export const ActiveItem: Story = {
+  args: {
+    ...Default.args,
+    menu: (
+      <>
+        <DropdownItem active>Active Item</DropdownItem>
+        <DropdownItem>Regular Item</DropdownItem>
+        <DropdownItem>Regular Item</DropdownItem>
+      </>
+    ),
+  },
+  render: args => <InteractiveDropdown {...args} />,
+};
+
+/**
+ * Dropdown with a disabled menu item
+ */
+export const DisabledItem: Story = {
+  args: {
+    ...Default.args,
+    menu: (
+      <>
+        <DropdownItem>Regular Item</DropdownItem>
+        <DropdownItem disabled>Disabled Item</DropdownItem>
+        <DropdownItem>Regular Item</DropdownItem>
+      </>
+    ),
+  },
+  render: args => <InteractiveDropdown {...args} />,
+};
+
+/**
+ * Shows all possible dropdown placement options
+ */
+export const AllPlacements: Story = {
+  parameters: {
+    docs: {
+      description: {
+        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
+    const placements = [
+      { value: 'bottom-start', label: 'Bottom Start', icon: 'CaretDown' as const },
+      { value: 'bottom-end', label: 'Bottom End', icon: 'CaretDown' as const },
+      { value: 'top-start', label: 'Top Start', icon: 'CaretUp' as const },
+      { value: 'top-end', label: 'Top End', icon: 'CaretUp' as const },
+      { value: 'left-start', label: 'Left Start', icon: 'CaretLeft' as const },
+      { value: 'left-end', label: 'Left End', icon: 'CaretLeft' as const },
+      { 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}
+              className="u-d-flex u-align-items-center u-justify-content-center"
+            >
+              <Dropdown
+                trigger="click"
+                placement={placement.value as any}
+                defaultOpen={true}
+                closeOnClickOutside={false}
+                closeOnEscape={false}
+                children={
+                  <button className="c-btn c-btn--primary">
+                    {placement.label}{' '}
+                    <Icon name={placement.icon} className="c-dropdown__toggle-icon" size="sm" />
+                  </button>
+                }
+                menu={
+                  <>
+                    <DropdownItem>Menu item 1</DropdownItem>
+                    <DropdownItem>Menu item 2</DropdownItem>
+                    <DropdownItem>Menu item 3</DropdownItem>
+                  </>
+                }
+              />
+            </div>
+          ))}
+        </div>
+      </div>
+    );
+  },
+};
+
+/**
+ * Dropdown with all color variants
+ */
+export const AllVariants: Story = {
+  parameters: {
+    docs: {
+      description: {
+        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);
+      } else if (openDropdown === variant) {
+        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 => (
+            <Dropdown
+              key={color}
+              variant={color as ThemeColor}
+              trigger="click"
+              isOpen={openDropdown === color}
+              onOpenChange={isOpen => handleOpenChange(color, isOpen)}
+              children={
+                <button className={`c-btn c-btn--${color}`}>
+                  {color} <Icon name="CaretDown" className="c-dropdown__toggle-icon" size="sm" />
+                </button>
+              }
+              menu={
+                <>
+                  <DropdownItem>Menu item 1</DropdownItem>
+                  <DropdownItem>Menu item 2</DropdownItem>
+                </>
+              }
+            />
+          ))}
+        </div>
+      </div>
+    );
+  },
+};