@shohojdhara/atomix 0.1.16 → 0.1.17

package/src/components/DatePicker/types.ts

@@ -1,167 +0,0 @@
-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

@@ -1,152 +0,0 @@
-/**
- * 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

@@ -1,329 +0,0 @@
-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>
-    );
-  },
-};