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

package/src/ui/molecules/Tabs/TabsList.tsx

@@ -0,0 +1,98 @@
+'use client';
+
+import { useTabsContext } from './TabsContext';
+import { useRef, useEffect, type HTMLAttributes, ReactNode } from 'react';
+import { getRadiusClass } from '../../tokens';
+
+export interface TabsListProps extends HTMLAttributes<HTMLDivElement> {
+  children: ReactNode;
+}
+
+/**
+ * TabsList Component
+ * 
+ * Container for tab triggers.
+ * Manages keyboard navigation between tabs.
+ * Must be used within a Tabs component.
+ */
+export function TabsList({
+  children,
+  className = '',
+  ...props
+}: TabsListProps) {
+  const { orientation } = useTabsContext();
+  const listRef = useRef<HTMLDivElement>(null);
+
+  // Handle keyboard navigation at list level
+  useEffect(() => {
+    const list = listRef.current;
+    if (!list) return;
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+      const triggers = Array.from(
+        list.querySelectorAll<HTMLButtonElement>('[role="tab"]:not([disabled])')
+      );
+      const currentIndex = triggers.findIndex(trigger => trigger === document.activeElement);
+
+      if (currentIndex === -1) return;
+
+      let nextIndex = currentIndex;
+
+      if (orientation === 'horizontal') {
+        if (e.key === 'ArrowRight') {
+          e.preventDefault();
+          nextIndex = (currentIndex + 1) % triggers.length;
+        } else if (e.key === 'ArrowLeft') {
+          e.preventDefault();
+          nextIndex = (currentIndex - 1 + triggers.length) % triggers.length;
+        }
+      } else {
+        if (e.key === 'ArrowDown') {
+          e.preventDefault();
+          nextIndex = (currentIndex + 1) % triggers.length;
+        } else if (e.key === 'ArrowUp') {
+          e.preventDefault();
+          nextIndex = (currentIndex - 1 + triggers.length) % triggers.length;
+        }
+      }
+
+      if (e.key === 'Home') {
+        e.preventDefault();
+        nextIndex = 0;
+      } else if (e.key === 'End') {
+        e.preventDefault();
+        nextIndex = triggers.length - 1;
+      }
+
+      if (nextIndex !== currentIndex) {
+        triggers[nextIndex]?.focus();
+      }
+    };
+
+    list.addEventListener('keydown', handleKeyDown);
+    return () => list.removeEventListener('keydown', handleKeyDown);
+  }, [orientation]);
+
+  const orientationClasses = orientation === 'vertical'
+    ? 'flex-col space-y-1'
+    : 'flex-row space-x-1';
+
+  return (
+    <div
+      ref={listRef}
+      role="tablist"
+      aria-orientation={orientation}
+      className={`
+        inline-flex
+        ${orientationClasses}
+        p-1
+        bg-gray-100
+        ${getRadiusClass('md')}
+        ${className}
+      `}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+}

package/src/ui/molecules/Tabs/TabsProvider.tsx

@@ -0,0 +1,53 @@
+'use client';
+
+import { useState, useCallback, type ReactNode } from 'react';
+import { TabsContext, type TabsContextValue } from './TabsContext';
+
+export interface TabsProviderProps {
+  defaultValue?: string;
+  value?: string;
+  onValueChange?: (value: string) => void;
+  orientation?: 'horizontal' | 'vertical';
+  activationMode?: 'automatic' | 'manual';
+  children: ReactNode;
+}
+
+/**
+ * TabsProvider Component
+ * 
+ * Provides Tabs context to children.
+ * Manages active tab state and handles controlled/uncontrolled modes.
+ */
+export function TabsProvider({
+  defaultValue,
+  value: controlledValue,
+  onValueChange,
+  orientation = 'horizontal',
+  activationMode = 'automatic',
+  children,
+}: TabsProviderProps) {
+  const [uncontrolledValue, setUncontrolledValue] = useState<string>(defaultValue || '');
+
+  const isControlled = controlledValue !== undefined;
+  const value = isControlled ? controlledValue : uncontrolledValue;
+
+  const handleValueChange = useCallback((newValue: string) => {
+    if (!isControlled) {
+      setUncontrolledValue(newValue);
+    }
+    onValueChange?.(newValue);
+  }, [isControlled, onValueChange]);
+
+  const contextValue: TabsContextValue = {
+    value,
+    onValueChange: handleValueChange,
+    orientation,
+    activationMode,
+  };
+
+  return (
+    <TabsContext.Provider value={contextValue}>
+      {children}
+    </TabsContext.Provider>
+  );
+}

package/src/ui/molecules/Tabs/TabsTrigger.tsx

@@ -0,0 +1,111 @@
+'use client';
+
+import { useTabsContext } from './TabsContext';
+import type { HTMLAttributes, ReactNode, KeyboardEvent } from 'react';
+import { getColorClass, getRadiusClass } from '../../tokens';
+
+export interface TabsTriggerProps extends HTMLAttributes<HTMLButtonElement> {
+  value: string;
+  children: ReactNode;
+  disabled?: boolean;
+}
+
+/**
+ * TabsTrigger Component
+ * 
+ * Individual tab trigger button.
+ * Must be used within a TabsList component.
+ */
+export function TabsTrigger({
+  value,
+  children,
+  disabled = false,
+  className = '',
+  onClick,
+  onKeyDown,
+  ...props
+}: TabsTriggerProps) {
+  const { value: activeValue, onValueChange, orientation: _orientation, activationMode } = useTabsContext();
+
+  const isActive = activeValue === value;
+
+  const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
+    if (disabled) return;
+    if (activationMode === 'automatic' || isActive) {
+      onValueChange(value);
+    }
+    onClick?.(e);
+  };
+
+  const handleFocus = (e: React.FocusEvent<HTMLButtonElement>) => {
+    // In automatic mode, activate tab on focus
+    if (activationMode === 'automatic' && !disabled && !isActive) {
+      onValueChange(value);
+    }
+    props.onFocus?.(e);
+  };
+
+  const handleKeyDown = (e: KeyboardEvent<HTMLButtonElement>) => {
+    if (disabled) return;
+
+    // Let parent handle arrow keys, Home, End
+    if (
+      e.key === 'ArrowRight' ||
+      e.key === 'ArrowLeft' ||
+      e.key === 'ArrowDown' ||
+      e.key === 'ArrowUp' ||
+      e.key === 'Home' ||
+      e.key === 'End'
+    ) {
+      // These are handled by TabsList
+      return;
+    }
+
+    // Handle Enter/Space for manual activation
+    if (activationMode === 'manual' && (e.key === 'Enter' || e.key === ' ')) {
+      e.preventDefault();
+      onValueChange(value);
+      return;
+    }
+
+    onKeyDown?.(e);
+  };
+
+  return (
+    <button
+      type="button"
+      role="tab"
+      aria-selected={isActive}
+      aria-controls={`tabpanel-${value}`}
+      id={`tab-${value}`}
+      tabIndex={disabled ? -1 : isActive ? 0 : -1}
+      disabled={disabled}
+      onClick={handleClick}
+      onFocus={handleFocus}
+      onKeyDown={handleKeyDown}
+      className={`
+        inline-flex
+        items-center
+        justify-center
+        px-3
+        py-1.5
+        text-sm
+        font-medium
+        transition-colors
+        focus:outline-none
+        focus:ring-2
+        focus:ring-offset-2
+        ${getRadiusClass('sm')}
+        ${isActive
+          ? `${getColorClass('primary', 'DEFAULT', 'bg')} ${getColorClass('primary', 'contrast', 'text')}`
+          : `${getColorClass('neutral', 'light', 'text')} hover:${getColorClass('neutral', 'DEFAULT', 'bg')}`
+        }
+        ${disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'}
+        ${className}
+      `}
+      {...props}
+    >
+      {children}
+    </button>
+  );
+}

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

@@ -0,0 +1,23 @@
+/**
+ * Tabs Components
+ * 
+ * Tabs component with compound components pattern and full accessibility support.
+ */
+
+export { default as Tabs } from './Tabs';
+export type { TabsProps } from './Tabs';
+
+export { TabsList } from './TabsList';
+export type { TabsListProps } from './TabsList';
+
+export { TabsTrigger } from './TabsTrigger';
+export type { TabsTriggerProps } from './TabsTrigger';
+
+export { TabsContent } from './TabsContent';
+export type { TabsContentProps } from './TabsContent';
+
+export { TabsProvider } from './TabsProvider';
+export type { TabsProviderProps } from './TabsProvider';
+
+export { TabsContext, useTabsContext, useTabsContextOptional } from './TabsContext';
+export type { TabsContextValue } from './TabsContext';

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

@@ -0,0 +1,145 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { useState } from 'react';
+import TimePicker from './TimePicker';
+
+const meta: Meta<typeof TimePicker> = {
+  title: 'Molecules/TimePicker',
+  component: TimePicker,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: {
+    format: {
+      control: 'select',
+      options: ['12h', '24h'],
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof TimePicker>;
+
+export const Default: Story = {
+  render: (args) => {
+    const [value, setValue] = useState(args.defaultValue || '');
+    return (
+      <div className="w-64">
+        <TimePicker
+          {...args}
+          value={value}
+          onChange={setValue}
+        />
+        <p className="mt-2 text-sm text-gray-600">Selected: {value || 'None'}</p>
+      </div>
+    );
+  },
+};
+
+export const Format24h: Story = {
+  render: (args) => {
+    const [value, setValue] = useState(args.defaultValue || '14:30');
+    return (
+      <div className="w-64">
+        <TimePicker
+          {...args}
+          value={value}
+          onChange={setValue}
+          format="24h"
+        />
+        <p className="mt-2 text-sm text-gray-600">Selected: {value}</p>
+      </div>
+    );
+  },
+};
+
+export const Format12h: Story = {
+  render: (args) => {
+    const [value, setValue] = useState(args.defaultValue || '02:30 PM');
+    return (
+      <div className="w-64">
+        <TimePicker
+          {...args}
+          value={value}
+          onChange={setValue}
+          format="12h"
+        />
+        <p className="mt-2 text-sm text-gray-600">Selected: {value}</p>
+      </div>
+    );
+  },
+};
+
+export const WithLabel: Story = {
+  render: () => {
+    const [value, setValue] = useState('');
+    return (
+      <div className="w-64">
+        <TimePicker
+          label="Start Time"
+          value={value}
+          onChange={setValue}
+        />
+      </div>
+    );
+  },
+};
+
+export const WithError: Story = {
+  render: () => {
+    const [value, setValue] = useState('');
+    return (
+      <div className="w-64">
+        <TimePicker
+          label="Time"
+          value={value}
+          onChange={setValue}
+          error
+          helperText="Please select a valid time"
+        />
+      </div>
+    );
+  },
+};
+
+export const Disabled: Story = {
+  render: () => (
+    <div className="w-64">
+      <TimePicker
+        label="Time"
+        defaultValue="09:00"
+        disabled
+      />
+    </div>
+  ),
+};
+
+export const InForm: Story = {
+  render: () => {
+    const [startTime, setStartTime] = useState('');
+    const [endTime, setEndTime] = useState('');
+    
+    return (
+      <div className="w-96 space-y-4 p-4 border border-gray-200 rounded-lg">
+        <h3 className="text-lg font-semibold">Schedule</h3>
+        <TimePicker
+          label="Start Time"
+          value={startTime}
+          onChange={setStartTime}
+          format="12h"
+        />
+        <TimePicker
+          label="End Time"
+          value={endTime}
+          onChange={setEndTime}
+          format="12h"
+        />
+        {startTime && endTime && (
+          <p className="text-sm text-gray-600">
+            Duration: {startTime} - {endTime}
+          </p>
+        )}
+      </div>
+    );
+  },
+};

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

@@ -0,0 +1,41 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import TimePicker from './TimePicker';
+
+describe('TimePicker', () => {
+  it('renders correctly', () => {
+    render(<TimePicker />);
+    const input = screen.getByRole('textbox');
+    expect(input).toBeInTheDocument();
+  });
+
+  it('displays label when provided', () => {
+    render(<TimePicker label="Select Time" />);
+    expect(screen.getByText('Select Time')).toBeInTheDocument();
+  });
+
+  it('handles 24h format', () => {
+    const handleChange = vi.fn();
+    render(<TimePicker format="24h" onChange={handleChange} />);
+    // TimePicker opens on click, but we can test the input
+    const input = screen.getByRole('textbox');
+    expect(input).toBeInTheDocument();
+  });
+
+  it('handles 12h format', () => {
+    render(<TimePicker format="12h" />);
+    const input = screen.getByRole('textbox');
+    expect(input).toBeInTheDocument();
+  });
+
+  it('handles disabled state', () => {
+    render(<TimePicker disabled />);
+    const input = screen.getByRole('textbox');
+    expect(input).toBeDisabled();
+  });
+
+  it('displays error state', () => {
+    render(<TimePicker error helperText="Invalid time" />);
+    expect(screen.getByText('Invalid time')).toBeInTheDocument();
+  });
+});