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

package/src/ui/atoms/Checkbox/Checkbox.tsx

@@ -0,0 +1,103 @@
+'use client';
+
+import type { InputHTMLAttributes, ReactNode } from 'react';
+import { getTypographyClasses } from '../../tokens/typography';
+
+export interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> {
+  label?: ReactNode;
+  error?: boolean;
+  helperText?: string;
+}
+
+/**
+ * Checkbox Component
+ * 
+ * A styled checkbox input component.
+ * Follows Atomic Design principles as an Atom component.
+ * Uses Composite Pattern when combined with Label and ErrorMessage.
+ * 
+ * @example
+ * ```tsx
+ * <Checkbox 
+ *   id="terms"
+ *   label="I agree to the terms"
+ *   checked={checked}
+ *   onChange={handleChange}
+ * />
+ * ```
+ */
+export default function Checkbox({
+  id,
+  label,
+  error = false,
+  helperText,
+  className = '',
+  disabled = false,
+  ...props
+}: CheckboxProps) {
+  const checkboxId = id || `checkbox-${Math.random().toString(36).substr(2, 9)}`;
+  const errorId = error ? `${checkboxId}-error` : undefined;
+  const helperId = helperText ? `${checkboxId}-helper` : undefined;
+
+  const baseClasses = [
+    'h-4',
+    'w-4',
+    'rounded',
+    'border-gray-300',
+    'text-indigo-600',
+    'focus:ring-2',
+    'focus:ring-indigo-500',
+    'focus:ring-offset-2',
+    'disabled:opacity-50',
+    'disabled:cursor-not-allowed',
+    'cursor-pointer',
+  ];
+
+  const errorClasses = error
+    ? 'border-red-500 focus:ring-red-500'
+    : '';
+
+  const checkboxClasses = [
+    ...baseClasses,
+    errorClasses,
+  ].filter(Boolean).join(' ');
+
+  const labelClasses = [
+    getTypographyClasses('label'),
+    'ml-2',
+    disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer',
+  ].filter(Boolean).join(' ');
+
+  return (
+    <div className={`flex flex-col my-2 ${className}`}>
+      <div className="flex items-center">
+        <input
+          type="checkbox"
+          id={checkboxId}
+          className={checkboxClasses}
+          disabled={disabled}
+          aria-invalid={error}
+          aria-describedby={errorId || helperId}
+          {...props}
+        />
+        {label && (
+          <label
+            htmlFor={checkboxId}
+            className={labelClasses}
+          >
+            {label}
+          </label>
+        )}
+      </div>
+      {(error || helperText) && (
+        <div
+          id={errorId || helperId}
+          className={`mt-1 ${getTypographyClasses('caption')} ${error ? 'text-red-600' : 'text-gray-500'}`}
+          role={error ? 'alert' : undefined}
+        >
+          {error || helperText}
+        </div>
+      )}
+    </div>
+  );
+}

package/src/ui/atoms/Collapsible/Collapsible.tsx

@@ -43,7 +43,7 @@ export default function Collapsible({
   className = '',
   ...props
 }: CollapsibleProps) {
-  const { isOpen, toggle, setOpen } = useCollapsible({
+  const { isOpen, toggle } = useCollapsible({
     defaultOpen,
     open,
     onOpenChange,
@@ -94,7 +94,7 @@ export default function Collapsible({
         aria-expanded={isOpen}
         aria-controls={contentId}
         aria-disabled={disabled}
-        className="w-full text-left"
+        className="w-full text-left focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 rounded-md"
       >
         {trigger}
       </button>

package/src/ui/atoms/Input/Input.stories.tsx

@@ -1,15 +1,76 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import Input from "./Input";
+import type { Meta, StoryObj } from '@storybook/react';
+import Input from './Input';
 
 const meta: Meta<typeof Input> = {
-  title: "UI/Atoms/Input",
+  title: 'Atoms/Input',
   component: Input,
+  tags: ['autodocs'],
+  argTypes: {
+    label: {
+      control: 'text',
+    },
+    error: {
+      control: 'boolean',
+    },
+    size: {
+      control: 'select',
+      options: ['sm', 'md', 'lg'],
+    },
+    variant: {
+      control: 'select',
+      options: ['default', 'outlined', 'filled'],
+    },
+    disabled: {
+      control: 'boolean',
+    },
+  },
 };
 
-export const Primary: StoryObj<typeof Input> = {
+export default meta;
+type Story = StoryObj<typeof Input>;
+
+export const Default: Story = {
   args: {
-    placeholder: "Hello from Storybook",
+    label: 'Email',
+    type: 'email',
+    placeholder: 'Enter your email',
   },
 };
 
-export default meta;
+export const WithError: Story = {
+  args: {
+    label: 'Email',
+    type: 'email',
+    placeholder: 'Enter your email',
+    error: true,
+    helperText: 'Please enter a valid email address',
+  },
+};
+
+export const Sizes: Story = {
+  render: () => (
+    <div className="space-y-4">
+      <Input label="Small" size="sm" placeholder="Small input" />
+      <Input label="Medium" size="md" placeholder="Medium input" />
+      <Input label="Large" size="lg" placeholder="Large input" />
+    </div>
+  ),
+};
+
+export const Variants: Story = {
+  render: () => (
+    <div className="space-y-4">
+      <Input label="Default" variant="default" placeholder="Default variant" />
+      <Input label="Outlined" variant="outlined" placeholder="Outlined variant" />
+      <Input label="Filled" variant="filled" placeholder="Filled variant" />
+    </div>
+  ),
+};
+
+export const Disabled: Story = {
+  args: {
+    label: 'Disabled Input',
+    placeholder: 'This input is disabled',
+    disabled: true,
+  },
+};

package/src/ui/atoms/Input/Input.tsx

@@ -1,19 +1,122 @@
-import type { HTMLProps } from "react";
+'use client';
 
-type Props = HTMLProps<HTMLInputElement>;
+import type { InputHTMLAttributes, ReactNode } from 'react';
+import { getTypographyClasses } from '../../tokens/typography';
+import { getColorClass } from '../../tokens/colors';
 
-export default function Input({ className, ...props }: Props) {
-  const classNames = [
-    className,
-    "px-large",
-    "border",
-    "border-1",
-    "border-grey-light",
-    "rounded",
-    "lh-form-element",
-    "h-form-element",
-    "text-base",
+export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {
+  label?: ReactNode;
+  error?: boolean;
+  helperText?: string;
+  size?: 'sm' | 'md' | 'lg';
+  variant?: 'default' | 'outlined' | 'filled';
+}
+
+/**
+ * Input Component
+ * 
+ * A styled text input component with label and error support.
+ * Follows Atomic Design principles as an Atom component.
+ * Uses Composite Pattern when combined with Label and ErrorMessage.
+ * 
+ * @example
+ * ```tsx
+ * <Input 
+ *   id="email"
+ *   label="Email"
+ *   type="email"
+ *   placeholder="Enter your email"
+ *   error={hasError}
+ *   helperText={errorMessage}
+ * />
+ * ```
+ */
+export default function Input({
+  id,
+  label,
+  error = false,
+  helperText,
+  size = 'md',
+  variant = 'outlined',
+  className = '',
+  disabled = false,
+  ...props
+}: InputProps) {
+  const inputId = id || `input-${Math.random().toString(36).substr(2, 9)}`;
+  const errorId = error ? `${inputId}-error` : undefined;
+  const helperId = helperText ? `${inputId}-helper` : undefined;
+
+  // Size classes
+  const sizeClasses = {
+    sm: 'h-8 text-sm px-3',
+    md: 'h-10 text-base px-4',
+    lg: 'h-12 text-lg px-5',
+  };
+
+  // Variant classes
+  const variantClasses = {
+    default: 'border-0 border-b-2 border-gray-300 focus:border-indigo-500',
+    outlined: 'border border-gray-300 focus:border-indigo-500',
+    filled: 'bg-gray-100 border-0 focus:bg-white focus:ring-2 focus:ring-indigo-500',
+  };
+
+  const baseClasses = [
+    'w-full',
+    'rounded-md',
+    'transition-colors',
+    'focus:outline-none',
+    'focus:ring-2',
+    'focus:ring-offset-2',
+    'disabled:opacity-50',
+    'disabled:cursor-not-allowed',
+    sizeClasses[size],
+    variantClasses[variant],
   ];
 
-  return <input className={classNames.join(" ")} {...props} />;
+  const errorClasses = error
+    ? 'border-red-500 focus:border-red-500 focus:ring-red-500'
+    : '';
+
+  const inputClasses = [
+    ...baseClasses,
+    errorClasses,
+    className,
+  ].filter(Boolean).join(' ');
+
+  const labelClasses = [
+    'block',
+    getTypographyClasses('label'),
+      'mb-1',
+    disabled ? 'opacity-50' : '',
+  ].filter(Boolean).join(' ');
+
+  return (
+    <div className="w-full">
+      {label && (
+        <label
+          htmlFor={inputId}
+          className={labelClasses}
+        >
+          {label}
+        </label>
+      )}
+      <input
+        id={inputId}
+        className={inputClasses}
+        disabled={disabled}
+        aria-invalid={error}
+        aria-describedby={errorId || helperId}
+        {...props}
+      />
+      {(error || helperText) && (
+        <div
+          id={errorId || helperId}
+          className={`mt-1 ${getTypographyClasses('caption')} ${error ? getColorClass('error', 'DEFAULT', 'text') : 'text-gray-500'}`}
+          role={error ? 'alert' : undefined}
+        >
+          {error || helperText}
+        </div>
+      )}
+    </div>
+  );
 }

package/src/ui/atoms/Radio/Radio.stories.tsx

@@ -0,0 +1,72 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import Radio from './Radio';
+
+const meta: Meta<typeof Radio> = {
+  title: 'Atoms/Radio',
+  component: Radio,
+  tags: ['autodocs'],
+  argTypes: {
+    label: {
+      control: 'text',
+    },
+    error: {
+      control: 'boolean',
+    },
+    disabled: {
+      control: 'boolean',
+    },
+    checked: {
+      control: 'boolean',
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Radio>;
+
+export const Default: Story = {
+  args: {
+    name: 'option',
+    label: 'Option 1',
+    value: '1',
+    checked: false,
+  },
+};
+
+export const Checked: Story = {
+  args: {
+    name: 'option',
+    label: 'Selected option',
+    value: '1',
+    checked: true,
+  },
+};
+
+export const WithError: Story = {
+  args: {
+    name: 'option',
+    label: 'Option with error',
+    value: '1',
+    error: true,
+    helperText: 'Please select an option',
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    name: 'option',
+    label: 'Disabled option',
+    value: '1',
+    disabled: true,
+  },
+};
+
+export const RadioGroup: Story = {
+  render: () => (
+    <div className="space-y-2">
+      <Radio name="group" label="Option 1" value="1" />
+      <Radio name="group" label="Option 2" value="2" checked />
+      <Radio name="group" label="Option 3" value="3" />
+    </div>
+  ),
+};

package/src/ui/atoms/Radio/Radio.test.tsx

@@ -0,0 +1,32 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { vi } from 'vitest';
+import Radio from './Radio';
+
+describe('Radio', () => {
+  it('renders radio with label', () => {
+    render(<Radio name="test" label="Test radio" value="test" />);
+    expect(screen.getByLabelText('Test radio')).toBeInTheDocument();
+  });
+
+  it('handles click events', async () => {
+    const handleChange = vi.fn();
+    render(<Radio name="test" label="Test" value="test" onChange={handleChange} />);
+    
+    const radio = screen.getByLabelText('Test');
+    await userEvent.click(radio);
+    
+    expect(handleChange).toHaveBeenCalledTimes(1);
+  });
+
+  it('shows error state', () => {
+    render(<Radio name="test" label="Test" value="test" error helperText="Error message" />);
+    expect(screen.getByText('Error message')).toBeInTheDocument();
+    expect(screen.getByRole('radio')).toHaveAttribute('aria-invalid', 'true');
+  });
+
+  it('is disabled when disabled prop is true', () => {
+    render(<Radio name="test" label="Test" value="test" disabled />);
+    expect(screen.getByRole('radio')).toBeDisabled();
+  });
+});

package/src/ui/atoms/Radio/Radio.tsx

@@ -0,0 +1,104 @@
+'use client';
+
+import type { InputHTMLAttributes, ReactNode } from 'react';
+import { getTypographyClasses } from '../../tokens/typography';
+
+export interface RadioProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> {
+  label?: ReactNode;
+  error?: boolean;
+  helperText?: string;
+}
+
+/**
+ * Radio Component
+ * 
+ * A styled radio input component.
+ * Follows Atomic Design principles as an Atom component.
+ * Uses Composite Pattern when combined with Label and ErrorMessage.
+ * 
+ * @example
+ * ```tsx
+ * <Radio 
+ *   id="option1"
+ *   name="options"
+ *   label="Option 1"
+ *   value="1"
+ *   checked={selected === "1"}
+ *   onChange={handleChange}
+ * />
+ * ```
+ */
+export default function Radio({
+  id,
+  label,
+  error = false,
+  helperText,
+  className = '',
+  disabled = false,
+  ...props
+}: RadioProps) {
+  const radioId = id || `radio-${Math.random().toString(36).substr(2, 9)}`;
+  const errorId = error ? `${radioId}-error` : undefined;
+  const helperId = helperText ? `${radioId}-helper` : undefined;
+
+  const baseClasses = [
+    'h-4',
+    'w-4',
+    'border-gray-300',
+    'text-indigo-600',
+    'focus:ring-2',
+    'focus:ring-indigo-500',
+    'focus:ring-offset-2',
+    'disabled:opacity-50',
+    'disabled:cursor-not-allowed',
+    'cursor-pointer',
+  ];
+
+  const errorClasses = error
+    ? 'border-red-500 focus:ring-red-500'
+    : '';
+
+  const radioClasses = [
+    ...baseClasses,
+    errorClasses,
+  ].filter(Boolean).join(' ');
+
+  const labelClasses = [
+    getTypographyClasses('label'),
+    'ml-2',
+    disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer',
+  ].filter(Boolean).join(' ');
+
+  return (
+    <div className={`flex flex-col my-2 ${className}`}>
+      <div className="flex items-center">
+        <input
+          type="radio"
+          id={radioId}
+          className={radioClasses}
+          disabled={disabled}
+          aria-invalid={error}
+          aria-describedby={errorId || helperId}
+          {...props}
+        />
+        {label && (
+          <label
+            htmlFor={radioId}
+            className={labelClasses}
+          >
+            {label}
+          </label>
+        )}
+      </div>
+      {(error || helperText) && (
+        <div
+          id={errorId || helperId}
+          className={`mt-1 ${getTypographyClasses('caption')} ${error ? 'text-red-600' : 'text-gray-500'}`}
+          role={error ? 'alert' : undefined}
+        >
+          {error || helperText}
+        </div>
+      )}
+    </div>
+  );
+}

package/src/ui/atoms/index.ts

@@ -3,6 +3,7 @@ export { default as Info } from "./Info/Info";
 export { default as Text } from "./Text/Text";
 
 export { default as Input } from "./Input/Input";
+export type { InputProps } from "./Input/Input";
 
 export { default as Button } from "./Button/Button";
 
@@ -31,3 +32,9 @@ export type { SidebarItemProps } from "./SidebarItem/SidebarItem";
 
 export { default as Collapsible } from "./Collapsible/Collapsible";
 export type { CollapsibleProps } from "./Collapsible/Collapsible";
+
+export { default as Checkbox } from "./Checkbox/Checkbox";
+export type { CheckboxProps } from "./Checkbox/Checkbox";
+
+export { default as Radio } from "./Radio/Radio";
+export type { RadioProps } from "./Radio/Radio";

package/src/ui/index.ts

@@ -2,3 +2,17 @@ export * from "./atoms";
 export * from "./molecules";
 export * from "./organisms";
 export * from "./tokens/sidebar";
+export * from "./tokens/spacing";
+export * from "./tokens/typography";
+export * from "./tokens/colors";
+export * from "./tokens/breakpoints";
+export * from "./tokens/tokens.factory";
+export * from "./tokens/themes/light";
+export * from "./tokens/themes/dark";
+export * from "./providers/ThemeProvider";
+
+// Export helper functions for convenience
+export { getSpacingClass, getSpacing } from "./tokens/spacing";
+export { getTypographyClasses, getTypography } from "./tokens/typography";
+export { getColorClass, getColor } from "./tokens/colors";
+export { getBreakpoint, getMediaQuery } from "./tokens/breakpoints";

package/src/ui/molecules/InputWithLabel/InputWithLabel.tsx

@@ -1,11 +1,12 @@
 import type { HTMLProps } from "react";
-import { Text, Input } from "../../atoms";
+import { Text, Input, type InputProps } from "../../atoms";
 
-interface Props extends HTMLProps<HTMLInputElement> {
+interface Props extends Omit<HTMLProps<HTMLInputElement>, 'size'> {
   label: string;
+  size?: InputProps['size'];
 }
 
-export default function InputWithLabel({ label, ...props }: Props) {
+export default function InputWithLabel({ label, size, ...props }: Props) {
   if (!props.id) {
     console.error("InputWithLabel component requires an id prop");
   }
@@ -15,7 +16,7 @@ export default function InputWithLabel({ label, ...props }: Props) {
       <Text as="label" htmlFor={props.id} className="cursor-pointer">
         {label}
       </Text>
-      <Input {...props} />
+      <Input {...props} size={size} />
     </div>
   );
 }