@fabio.caffarello/react-design-system 1.7.0 → 1.8.0

package/src/ui/molecules/TimePicker/TimePicker.tsx

@@ -0,0 +1,264 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { Clock } from 'lucide-react';
+import Input from '../../atoms/Input/Input';
+import Popover from '../../atoms/Popover/Popover';
+import Button from '../../atoms/Button/Button';
+import { getSpacingClass } from '../../tokens/spacing';
+
+export type TimeFormat = '12h' | '24h';
+
+export interface TimePickerProps {
+  value?: string; // Format: "HH:mm" for 24h or "hh:mm AM/PM" for 12h
+  defaultValue?: string;
+  format?: TimeFormat;
+  onChange?: (value: string) => void;
+  disabled?: boolean;
+  label?: string;
+  error?: boolean;
+  helperText?: string;
+  className?: string;
+}
+
+/**
+ * TimePicker Component
+ * 
+ * A time picker component for selecting time values.
+ * Supports 12h and 24h formats.
+ * Follows Atomic Design principles as a Molecule component.
+ * 
+ * @example
+ * ```tsx
+ * <TimePicker
+ *   value="14:30"
+ *   format="24h"
+ *   onChange={(value) => console.log(value)}
+ * />
+ * ```
+ */
+export default function TimePicker({
+  value: controlledValue,
+  defaultValue,
+  format = '24h',
+  onChange,
+  disabled = false,
+  label,
+  error = false,
+  helperText,
+  className = '',
+}: TimePickerProps) {
+  const [internalValue, setInternalValue] = useState(defaultValue || '');
+  const [hours, setHours] = useState(12);
+  const [minutes, setMinutes] = useState(0);
+  const [amPm, setAmPm] = useState<'AM' | 'PM'>('AM');
+
+  const isControlled = controlledValue !== undefined;
+  const currentValue = isControlled ? controlledValue : internalValue;
+
+  // Parse time value
+  const parseTime = (timeStr: string) => {
+    if (!timeStr) return { hours: 12, minutes: 0, amPm: 'AM' as const };
+
+    if (format === '24h') {
+      const [h, m] = timeStr.split(':').map(Number);
+      return { hours: h || 12, minutes: m || 0, amPm: 'AM' as const };
+    } else {
+      const match = timeStr.match(/(\d+):(\d+)\s*(AM|PM)/i);
+      if (match) {
+        return {
+          hours: parseInt(match[1]),
+          minutes: parseInt(match[2]),
+          amPm: (match[3].toUpperCase() as 'AM' | 'PM'),
+        };
+      }
+      return { hours: 12, minutes: 0, amPm: 'AM' as const };
+    }
+  };
+
+  // Format time value
+  const formatTime = (h: number, m: number, ap?: 'AM' | 'PM'): string => {
+    if (format === '24h') {
+      return `${String(h).padStart(2, '0')}:${String(m).padStart(2, '0')}`;
+    } else {
+      const displayHours = ap === 'PM' && h !== 12 ? h + 12 : ap === 'AM' && h === 12 ? 0 : h;
+      return `${String(displayHours === 0 ? 12 : displayHours > 12 ? displayHours - 12 : displayHours).padStart(2, '0')}:${String(m).padStart(2, '0')} ${ap || 'AM'}`;
+    }
+  };
+
+  // Initialize from value
+  useEffect(() => {
+    if (currentValue) {
+      const parsed = parseTime(currentValue);
+      setHours(parsed.hours);
+      setMinutes(parsed.minutes);
+      setAmPm(parsed.amPm);
+    }
+  }, [currentValue]);
+
+  const handleHoursChange = (newHours: number) => {
+    const validHours = format === '24h'
+      ? Math.max(0, Math.min(23, newHours))
+      : Math.max(1, Math.min(12, newHours));
+    
+    setHours(validHours);
+    const newValue = formatTime(validHours, minutes, format === '12h' ? amPm : undefined);
+    
+    if (!isControlled) {
+      setInternalValue(newValue);
+    }
+    onChange?.(newValue);
+  };
+
+  const handleMinutesChange = (newMinutes: number) => {
+    const validMinutes = Math.max(0, Math.min(59, newMinutes));
+    setMinutes(validMinutes);
+    const newValue = formatTime(hours, validMinutes, format === '12h' ? amPm : undefined);
+    
+    if (!isControlled) {
+      setInternalValue(newValue);
+    }
+    onChange?.(newValue);
+  };
+
+  const handleAmPmToggle = () => {
+    const newAmPm = amPm === 'AM' ? 'PM' : 'AM';
+    setAmPm(newAmPm);
+    const newValue = formatTime(hours, minutes, newAmPm);
+    
+    if (!isControlled) {
+      setInternalValue(newValue);
+    }
+    onChange?.(newValue);
+  };
+
+  const incrementHours = () => {
+    if (format === '24h') {
+      handleHoursChange((hours + 1) % 24);
+    } else {
+      const newHours = hours === 12 ? 1 : hours + 1;
+      handleHoursChange(newHours);
+    }
+  };
+
+  const decrementHours = () => {
+    if (format === '24h') {
+      handleHoursChange(hours === 0 ? 23 : hours - 1);
+    } else {
+      const newHours = hours === 1 ? 12 : hours - 1;
+      handleHoursChange(newHours);
+    }
+  };
+
+  const incrementMinutes = () => {
+    handleMinutesChange((minutes + 1) % 60);
+  };
+
+  const decrementMinutes = () => {
+    handleMinutesChange(minutes === 0 ? 59 : minutes - 1);
+  };
+
+  const timePickerContent = (
+    <div className={`${getSpacingClass('base', 'p')} min-w-[200px]`}>
+      <div className="flex items-center justify-center gap-4">
+        {/* Hours */}
+        <div className="flex flex-col items-center gap-2">
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={incrementHours}
+            disabled={disabled}
+            aria-label="Increment hours"
+          >
+            ↑
+          </Button>
+          <div className="text-2xl font-mono font-semibold w-12 text-center">
+            {String(hours).padStart(2, '0')}
+          </div>
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={decrementHours}
+            disabled={disabled}
+            aria-label="Decrement hours"
+          >
+            ↓
+          </Button>
+        </div>
+
+        <div className="text-2xl font-semibold">:</div>
+
+        {/* Minutes */}
+        <div className="flex flex-col items-center gap-2">
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={incrementMinutes}
+            disabled={disabled}
+            aria-label="Increment minutes"
+          >
+            ↑
+          </Button>
+          <div className="text-2xl font-mono font-semibold w-12 text-center">
+            {String(minutes).padStart(2, '0')}
+          </div>
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={decrementMinutes}
+            disabled={disabled}
+            aria-label="Decrement minutes"
+          >
+            ↓
+          </Button>
+        </div>
+
+        {/* AM/PM for 12h format */}
+        {format === '12h' && (
+          <div className="flex flex-col gap-2 ml-2">
+            <Button
+              variant={amPm === 'AM' ? 'primary' : 'outline'}
+              size="sm"
+              onClick={() => handleAmPmToggle()}
+              disabled={disabled}
+            >
+              AM
+            </Button>
+            <Button
+              variant={amPm === 'PM' ? 'primary' : 'outline'}
+              size="sm"
+              onClick={() => handleAmPmToggle()}
+              disabled={disabled}
+            >
+              PM
+            </Button>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+
+  return (
+    <div className={className}>
+      <Popover
+        trigger={
+          <Input
+            label={label}
+            value={currentValue || formatTime(hours, minutes, format === '12h' ? amPm : undefined)}
+            readOnly
+            disabled={disabled}
+            error={error}
+            helperText={helperText}
+            leftIcon={<Clock className="h-4 w-4" />}
+            className="cursor-pointer"
+          />
+        }
+        placement="bottom-start"
+        showCloseButton
+        title="Select Time"
+      >
+        {timePickerContent}
+      </Popover>
+    </div>
+  );
+}

package/src/ui/molecules/TimePicker/index.ts

@@ -0,0 +1,2 @@
+export { default } from './TimePicker';
+export type { TimePickerProps, TimeFormat } from './TimePicker';

package/src/ui/molecules/index.ts

@@ -2,7 +2,7 @@ export { default as InputWithLabel } from "./InputWithLabel/InputWithLabel";
 
 export { default as Card } from "./Card/Card";
 
-export { default as Form } from "./Form/Form";
+export * from "./Form";
 
 export { default as Breadcrumb } from "./Breadcrumb/Breadcrumb";
 export type { BreadcrumbItem } from "./Breadcrumb/Breadcrumb";
@@ -15,11 +15,24 @@ export type { EmptyStateProps } from "./EmptyState/EmptyState";
 export { default as Dropdown } from "./Dropdown/Dropdown";
 export type { DropdownProps, DropdownItem } from "./Dropdown/Dropdown";
 
-export { default as SidebarGroup } from "./SidebarGroup/SidebarGroup";
-export type { SidebarGroupProps } from "./SidebarGroup/SidebarGroup";
-
-export { default as SidebarHeader } from "./SidebarHeader/SidebarHeader";
-export type { SidebarHeaderProps } from "./SidebarHeader/SidebarHeader";
-
 export { default as NavbarGroup } from "./NavbarGroup/NavbarGroup";
 export type { NavbarGroupProps } from "./NavbarGroup/NavbarGroup";
+
+export * from "./DatePicker";
+
+export * from "./Tabs";
+
+export { default as SearchInput } from "./SearchInput/SearchInput";
+export type { SearchInputProps } from "./SearchInput/SearchInput";
+
+export { default as Rating } from "./Rating/Rating";
+export type { RatingProps, RatingSize, RatingVariant } from "./Rating/Rating";
+
+export { default as FileUpload } from "./FileUpload/FileUpload";
+export type { FileUploadProps, FileUploadFile } from "./FileUpload/FileUpload";
+
+export { default as TimePicker } from "./TimePicker/TimePicker";
+export type { TimePickerProps, TimeFormat } from "./TimePicker/TimePicker";
+
+export { default as ColorPicker } from "./ColorPicker/ColorPicker";
+export type { ColorPickerProps, ColorFormat } from "./ColorPicker/ColorPicker";

package/src/ui/organisms/CommandPalette/CommandPalette.stories.tsx

@@ -0,0 +1,218 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { useState } from 'react';
+import CommandPalette from './CommandPalette';
+import Button from '../../atoms/Button/Button';
+import {
+  FileText,
+  Folder,
+  Settings,
+  Search,
+  User,
+  LogOut,
+  Moon,
+  Sun,
+  Bell,
+} from 'lucide-react';
+
+const meta: Meta<typeof CommandPalette> = {
+  title: 'Organisms/CommandPalette',
+  component: CommandPalette,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'fullscreen',
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof CommandPalette>;
+
+const basicCommands = [
+  { id: '1', label: 'New File', action: () => alert('New File') },
+  { id: '2', label: 'Open File', action: () => alert('Open File') },
+  { id: '3', label: 'Save', action: () => alert('Save') },
+  { id: '4', label: 'Save As', action: () => alert('Save As') },
+];
+
+export const Default: Story = {
+  render: () => {
+    const [open, setOpen] = useState(false);
+    return (
+      <div className="p-8">
+        <Button onClick={() => setOpen(true)}>Open Command Palette</Button>
+        <CommandPalette
+          items={basicCommands}
+          open={open}
+          onOpenChange={setOpen}
+        />
+        <p className="mt-4 text-sm text-gray-600">
+          Press Cmd/Ctrl + K to open, or click the button above
+        </p>
+      </div>
+    );
+  },
+};
+
+export const WithIcons: Story = {
+  render: () => {
+    const [open, setOpen] = useState(false);
+    const commandsWithIcons = [
+      { id: '1', label: 'New File', icon: <FileText className="h-4 w-4" />, action: () => alert('New File') },
+      { id: '2', label: 'Open Folder', icon: <Folder className="h-4 w-4" />, action: () => alert('Open Folder') },
+      { id: '3', label: 'Search', icon: <Search className="h-4 w-4" />, action: () => alert('Search') },
+      { id: '4', label: 'Settings', icon: <Settings className="h-4 w-4" />, action: () => alert('Settings') },
+    ];
+    
+    return (
+      <div className="p-8">
+        <Button onClick={() => setOpen(true)}>Open Command Palette</Button>
+        <CommandPalette
+          items={commandsWithIcons}
+          open={open}
+          onOpenChange={setOpen}
+        />
+      </div>
+    );
+  },
+};
+
+export const WithGroups: Story = {
+  render: () => {
+    const [open, setOpen] = useState(false);
+    const groupedCommands = [
+      { id: '1', label: 'New File', group: 'File', action: () => alert('New File') },
+      { id: '2', label: 'Open File', group: 'File', action: () => alert('Open File') },
+      { id: '3', label: 'Save', group: 'File', action: () => alert('Save') },
+      { id: '4', label: 'User Settings', group: 'Settings', action: () => alert('User Settings') },
+      { id: '5', label: 'Preferences', group: 'Settings', action: () => alert('Preferences') },
+      { id: '6', label: 'Search', group: 'Actions', action: () => alert('Search') },
+    ];
+    
+    return (
+      <div className="p-8">
+        <Button onClick={() => setOpen(true)}>Open Command Palette</Button>
+        <CommandPalette
+          items={groupedCommands}
+          open={open}
+          onOpenChange={setOpen}
+        />
+      </div>
+    );
+  },
+};
+
+export const WithDescriptions: Story = {
+  render: () => {
+    const [open, setOpen] = useState(false);
+    const commandsWithDescriptions = [
+      {
+        id: '1',
+        label: 'New File',
+        description: 'Create a new file',
+        icon: <FileText className="h-4 w-4" />,
+        action: () => alert('New File'),
+      },
+      {
+        id: '2',
+        label: 'Open File',
+        description: 'Open an existing file',
+        icon: <Folder className="h-4 w-4" />,
+        action: () => alert('Open File'),
+      },
+      {
+        id: '3',
+        label: 'User Profile',
+        description: 'View and edit your profile',
+        icon: <User className="h-4 w-4" />,
+        action: () => alert('User Profile'),
+      },
+      {
+        id: '4',
+        label: 'Notifications',
+        description: 'View your notifications',
+        icon: <Bell className="h-4 w-4" />,
+        action: () => alert('Notifications'),
+      },
+    ];
+    
+    return (
+      <div className="p-8">
+        <Button onClick={() => setOpen(true)}>Open Command Palette</Button>
+        <CommandPalette
+          items={commandsWithDescriptions}
+          open={open}
+          onOpenChange={setOpen}
+        />
+      </div>
+    );
+  },
+};
+
+export const WithKeywords: Story = {
+  render: () => {
+    const [open, setOpen] = useState(false);
+    const commandsWithKeywords = [
+      {
+        id: '1',
+        label: 'Toggle Dark Mode',
+        description: 'Switch between light and dark theme',
+        keywords: ['dark', 'theme', 'mode', 'light'],
+        icon: <Moon className="h-4 w-4" />,
+        action: () => alert('Toggle Dark Mode'),
+      },
+      {
+        id: '2',
+        label: 'Toggle Light Mode',
+        description: 'Switch to light theme',
+        keywords: ['light', 'theme', 'mode', 'bright'],
+        icon: <Sun className="h-4 w-4" />,
+        action: () => alert('Toggle Light Mode'),
+      },
+      {
+        id: '3',
+        label: 'Sign Out',
+        description: 'Sign out of your account',
+        keywords: ['logout', 'exit', 'signout', 'leave'],
+        icon: <LogOut className="h-4 w-4" />,
+        action: () => alert('Sign Out'),
+      },
+    ];
+    
+    return (
+      <div className="p-8">
+        <Button onClick={() => setOpen(true)}>Open Command Palette</Button>
+        <CommandPalette
+          items={commandsWithKeywords}
+          open={open}
+          onOpenChange={setOpen}
+        />
+        <p className="mt-4 text-sm text-gray-600">
+          Try searching for "dark", "theme", "logout", etc.
+        </p>
+      </div>
+    );
+  },
+};
+
+export const ManyCommands: Story = {
+  render: () => {
+    const [open, setOpen] = useState(false);
+    const manyCommands = Array.from({ length: 50 }, (_, i) => ({
+      id: String(i + 1),
+      label: `Command ${i + 1}`,
+      description: `Description for command ${i + 1}`,
+      group: `Group ${Math.floor(i / 10) + 1}`,
+      action: () => alert(`Command ${i + 1}`),
+    }));
+    
+    return (
+      <div className="p-8">
+        <Button onClick={() => setOpen(true)}>Open Command Palette</Button>
+        <CommandPalette
+          items={manyCommands}
+          open={open}
+          onOpenChange={setOpen}
+        />
+      </div>
+    );
+  },
+};

package/src/ui/organisms/CommandPalette/CommandPalette.test.tsx

@@ -0,0 +1,85 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import CommandPalette from './CommandPalette';
+
+const mockItems = [
+  { id: '1', label: 'New File', action: vi.fn() },
+  { id: '2', label: 'Save', action: vi.fn() },
+  { id: '3', label: 'Open', action: vi.fn() },
+];
+
+describe('CommandPalette', () => {
+  it('renders trigger when provided', () => {
+    render(
+      <CommandPalette
+        items={mockItems}
+        trigger={<button>Open</button>}
+      />
+    );
+    expect(screen.getByText('Open')).toBeInTheDocument();
+  });
+
+  it('opens on trigger click', async () => {
+    render(
+      <CommandPalette
+        items={mockItems}
+        trigger={<button>Open</button>}
+      />
+    );
+    
+    const trigger = screen.getByText('Open');
+    fireEvent.click(trigger);
+    
+    await waitFor(() => {
+      expect(screen.getByPlaceholderText(/Type a command/i)).toBeInTheDocument();
+    });
+  });
+
+  it('filters items based on search query', async () => {
+    render(
+      <CommandPalette
+        items={mockItems}
+        open
+      />
+    );
+    
+    const input = screen.getByPlaceholderText(/Type a command/i);
+    fireEvent.change(input, { target: { value: 'Save' } });
+    
+    await waitFor(() => {
+      expect(screen.getByText('Save')).toBeInTheDocument();
+      expect(screen.queryByText('New File')).not.toBeInTheDocument();
+    });
+  });
+
+  it('handles keyboard navigation', async () => {
+    render(
+      <CommandPalette
+        items={mockItems}
+        open
+      />
+    );
+    
+    const input = screen.getByPlaceholderText(/Type a command/i);
+    fireEvent.keyDown(input, { key: 'ArrowDown' });
+    fireEvent.keyDown(input, { key: 'Enter' });
+    
+    expect(mockItems[1].action).toHaveBeenCalled();
+  });
+
+  it('closes on Escape key', async () => {
+    const handleOpenChange = vi.fn();
+    render(
+      <CommandPalette
+        items={mockItems}
+        open
+        onOpenChange={handleOpenChange}
+      />
+    );
+    
+    const input = screen.getByPlaceholderText(/Type a command/i);
+    fireEvent.keyDown(input, { key: 'Escape' });
+    
+    expect(handleOpenChange).toHaveBeenCalledWith(false);
+  });
+});