@regardio/react 0.5.5 → 0.6.0

package/src/icon-button/icon-button.stories.tsx

@@ -2,6 +2,26 @@ import type { Meta, StoryObj } from '@storybook/react-vite';
 import { IconButton } from './icon-button';
 
 const meta: Meta<typeof IconButton> = {
+  argTypes: {
+    disabled: {
+      control: 'boolean',
+      description: 'Disable the button',
+    },
+    size: {
+      control: 'select',
+      description: 'Icon button size',
+      options: ['sm', 'md', 'lg'],
+    },
+    title: {
+      control: 'text',
+      description: 'Title for tooltip and accessibility',
+    },
+    variant: {
+      control: 'select',
+      description: 'Button variant',
+      options: ['primary', 'secondary', 'outline', 'ghost', 'destructive'],
+    },
+  },
   component: IconButton,
   parameters: {
     layout: 'centered',
@@ -11,7 +31,7 @@ const meta: Meta<typeof IconButton> = {
 };
 
 export default meta;
-type Story = StoryObj<typeof IconButton>;
+type Story = StoryObj<typeof meta>;
 
 const PlusIcon = () => (
   <svg
@@ -61,30 +81,131 @@ const CloseIcon = () => (
   </svg>
 );
 
+const SettingsIcon = () => (
+  <svg
+    fill="none"
+    height="24"
+    stroke="currentColor"
+    strokeWidth="2"
+    viewBox="0 0 24 24"
+    width="24"
+  >
+    <circle
+      cx="12"
+      cy="12"
+      r="3"
+    />
+    <path d="m12 1v6m0 6v6m4.22-13.22 4.24 4.24M1.54 8.96l4.24 4.24m12.44 0 4.24 4.24M1.54 15.04l4.24-4.24" />
+  </svg>
+);
+
 export const Default: Story = {
   args: {
     icon: <PlusIcon />,
+    title: 'Add',
   },
 };
 
 export const Close: Story = {
   args: {
     icon: <CloseIcon />,
+    title: 'Close',
+    variant: 'ghost',
+  },
+};
+
+export const Settings: Story = {
+  args: {
+    icon: <SettingsIcon />,
+    title: 'Settings',
+    variant: 'secondary',
+  },
+};
+
+export const Small: Story = {
+  args: {
+    icon: <PlusIcon />,
+    size: 'sm',
+    title: 'Add',
+  },
+};
+
+export const Large: Story = {
+  args: {
+    icon: <PlusIcon />,
+    size: 'lg',
+    title: 'Add',
   },
 };
 
-export const WithCustomClass: Story = {
+export const Disabled: Story = {
   args: {
-    className: 'p-2 bg-gray-100 rounded hover:bg-gray-200',
+    disabled: true,
     icon: <PlusIcon />,
+    title: 'Add',
+  },
+};
+
+export const WithAriaLabel: Story = {
+  args: {
+    'aria-label': 'Close dialog',
+    icon: <CloseIcon />,
   },
 };
 
-export const AllIcons: Story = {
+export const AllVariants: Story = {
   render: () => (
-    <div style={{ display: 'flex', gap: '16px' }}>
-      <IconButton icon={<PlusIcon />} />
-      <IconButton icon={<CloseIcon />} />
+    <div className="flex gap-4">
+      <IconButton
+        icon={<PlusIcon />}
+        title="Add"
+        variant="primary"
+      />
+      <IconButton
+        icon={<SettingsIcon />}
+        title="Settings"
+        variant="secondary"
+      />
+      <IconButton
+        icon={<CloseIcon />}
+        title="Close"
+        variant="ghost"
+      />
+      <IconButton
+        icon={<PlusIcon />}
+        title="Delete"
+        variant="destructive"
+      />
     </div>
   ),
 };
+
+export const AllSizes: Story = {
+  render: () => (
+    <div className="flex items-center gap-4">
+      <IconButton
+        icon={<PlusIcon />}
+        size="sm"
+        title="Small"
+      />
+      <IconButton
+        icon={<PlusIcon />}
+        size="md"
+        title="Medium"
+      />
+      <IconButton
+        icon={<PlusIcon />}
+        size="lg"
+        title="Large"
+      />
+    </div>
+  ),
+};
+
+export const Interactive: Story = {
+  args: {
+    icon: <PlusIcon />,
+    onClick: () => alert('Icon button clicked!'),
+    title: 'Add item',
+  },
+};

package/src/icon-button/icon-button.test.tsx

@@ -0,0 +1,152 @@
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+import { IconButton } from './icon-button';
+
+const TestIcon = () => (
+  <svg
+    data-testid="test-icon"
+    height="24"
+    viewBox="0 0 24 24"
+    width="24"
+  >
+    <circle
+      cx="12"
+      cy="12"
+      r="10"
+    />
+  </svg>
+);
+
+describe('IconButton', () => {
+  it('renders with icon', () => {
+    render(
+      <IconButton
+        icon={<TestIcon />}
+        title="Test"
+      />,
+    );
+    expect(screen.getByTestId('test-icon')).toBeInTheDocument();
+  });
+
+  it('applies size variants', () => {
+    render(
+      <IconButton
+        data-testid="size-button"
+        icon={<TestIcon />}
+        size="lg"
+        title="Test"
+      />,
+    );
+    const button = screen.getByTestId('size-button');
+    expect(button).toHaveClass('p-3');
+  });
+
+  it('applies variant styles from Button', () => {
+    render(
+      <IconButton
+        data-testid="variant-button"
+        icon={<TestIcon />}
+        title="Test"
+        variant="secondary"
+      />,
+    );
+    const button = screen.getByTestId('variant-button');
+    expect(button).toHaveClass('bg-gray-100');
+  });
+
+  it('uses title as aria-label when provided', () => {
+    render(
+      <IconButton
+        icon={<TestIcon />}
+        title="Add item"
+      />,
+    );
+    const button = screen.getByRole('button', { name: 'Add item' });
+    expect(button).toHaveAttribute('aria-label', 'Add item');
+  });
+
+  it('uses aria-label when provided', () => {
+    render(
+      <IconButton
+        aria-label="Custom label"
+        icon={<TestIcon />}
+      />,
+    );
+    const button = screen.getByRole('button', { name: 'Custom label' });
+    expect(button).toHaveAttribute('aria-label', 'Custom label');
+  });
+
+  it('prioritizes aria-label over title', () => {
+    render(
+      <IconButton
+        aria-label="Custom label"
+        data-testid="priority-button"
+        icon={<TestIcon />}
+        title="Add item"
+      />,
+    );
+    const button = screen.getByTestId('priority-button');
+    expect(button).toHaveAttribute('aria-label', 'Custom label');
+  });
+
+  it('handles disabled state', () => {
+    render(
+      <IconButton
+        data-testid="disabled-button"
+        disabled
+        icon={<TestIcon />}
+        title="Test"
+      />,
+    );
+    const button = screen.getByTestId('disabled-button');
+    expect(button).toBeDisabled();
+  });
+
+  it('passes through other props', () => {
+    render(
+      <IconButton
+        data-testid="custom-button"
+        icon={<TestIcon />}
+        title="Test"
+      />,
+    );
+    expect(screen.getByTestId('custom-button')).toBeInTheDocument();
+  });
+
+  it('applies custom className', () => {
+    render(
+      <IconButton
+        className="custom-class"
+        data-testid="custom-class-button"
+        icon={<TestIcon />}
+        title="Test"
+      />,
+    );
+    const button = screen.getByTestId('custom-class-button');
+    expect(button).toHaveClass('custom-class');
+  });
+
+  it('centers icon properly', () => {
+    render(
+      <IconButton
+        data-testid="center-button"
+        icon={<TestIcon />}
+        title="Test"
+      />,
+    );
+    const button = screen.getByTestId('center-button');
+    expect(button).toHaveClass('flex', 'items-center', 'justify-center');
+  });
+
+  it('sets title attribute', () => {
+    render(
+      <IconButton
+        data-testid="title-button"
+        icon={<TestIcon />}
+        title="Tooltip text"
+      />,
+    );
+    const button = screen.getByTestId('title-button');
+    expect(button).toHaveAttribute('title', 'Tooltip text');
+  });
+});

package/src/icon-button/icon-button.tsx

@@ -1,20 +1,54 @@
+import { tv } from '@regardio/tailwind/utils';
 import type { ComponentProps, ReactNode } from 'react';
+import { Button } from '../button';
 
-export interface IconButtonProps extends ComponentProps<'button'> {
+const iconButtonVariants = {
+  default: ['p-2'],
+  lg: ['p-3'],
+  md: ['p-2'],
+  sm: ['p-1'],
+} as const;
+
+const iconButton = tv({
+  base: ['flex', 'items-center', 'justify-center'],
+  defaultVariants: {
+    size: 'md',
+  },
+  variants: {
+    size: iconButtonVariants,
+  },
+});
+
+export type IconButtonSize = keyof typeof iconButtonVariants;
+
+export interface IconButtonProps extends Omit<ComponentProps<typeof Button>, 'size'> {
   icon: ReactNode;
+  size?: IconButtonSize;
+  title?: string;
+  'aria-label'?: string;
+  children?: never; // Prevent children, only icon allowed
 }
 
-export const IconButton = (props: IconButtonProps) => {
-  const { className, icon } = props;
-
-  const defaultClassName = 'p-0';
+export const IconButton = ({
+  icon,
+  size = 'md',
+  title,
+  'aria-label': ariaLabel,
+  className,
+  ...props
+}: IconButtonProps) => {
+  // Use title for both title and aria-label if aria-label not provided
+  const finalAriaLabel = ariaLabel || title;
+  const finalTitle = title || ariaLabel;
 
   return (
-    <button
-      className={className ? className : defaultClassName}
-      type={'button'}
+    <Button
+      aria-label={finalAriaLabel}
+      className={iconButton({ className, size })}
+      title={finalTitle}
+      {...props}
     >
       {icon}
-    </button>
+    </Button>
   );
 };

package/src/input/index.ts

@@ -0,0 +1,2 @@
+export type { InputProps, InputSize, InputVariant } from './input';
+export { Input } from './input';

package/src/input/input.stories.tsx

@@ -0,0 +1,151 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Input } from './input';
+
+const meta = {
+  argTypes: {
+    disabled: {
+      control: 'boolean',
+      description: 'Disable the input',
+    },
+    placeholder: {
+      control: 'text',
+      description: 'Input placeholder',
+    },
+    size: {
+      control: 'select',
+      description: 'Input size',
+      options: ['sm', 'md', 'lg'],
+    },
+    variant: {
+      control: 'select',
+      description: 'Input variant',
+      options: ['default', 'error', 'success'],
+    },
+  },
+  component: Input,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  title: 'Components/Input',
+} satisfies Meta<typeof Input>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    placeholder: 'Enter text...',
+  },
+};
+
+export const ErrorState: Story = {
+  args: {
+    placeholder: 'Error state',
+    variant: 'error',
+  },
+};
+
+export const Success: Story = {
+  args: {
+    placeholder: 'Success state',
+    variant: 'success',
+  },
+};
+
+export const Small: Story = {
+  args: {
+    placeholder: 'Small input',
+    size: 'sm',
+  },
+};
+
+export const Large: Story = {
+  args: {
+    placeholder: 'Large input',
+    size: 'lg',
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    disabled: true,
+    placeholder: 'Disabled input',
+  },
+};
+
+export const WithValue: Story = {
+  args: {
+    defaultValue: 'Default value',
+  },
+};
+
+export const EmailInput: Story = {
+  args: {
+    placeholder: 'Enter your email',
+    type: 'email',
+  },
+};
+
+export const PasswordInput: Story = {
+  args: {
+    placeholder: 'Enter your password',
+    type: 'password',
+  },
+};
+
+export const NumberInput: Story = {
+  args: {
+    placeholder: 'Enter a number',
+    type: 'number',
+  },
+};
+
+export const WithCustomClass: Story = {
+  args: {
+    className: 'shadow-lg border-blue-300',
+    placeholder: 'Custom styled input',
+  },
+};
+
+export const AllVariants: Story = {
+  render: () => (
+    <div className="space-y-4 w-64">
+      <Input placeholder="Default input" />
+      <Input
+        placeholder="Error input"
+        variant="error"
+      />
+      <Input
+        placeholder="Success input"
+        variant="success"
+      />
+    </div>
+  ),
+};
+
+export const AllSizes: Story = {
+  render: () => (
+    <div className="space-y-4 w-64">
+      <Input
+        placeholder="Small input"
+        size="sm"
+      />
+      <Input
+        placeholder="Medium input"
+        size="md"
+      />
+      <Input
+        placeholder="Large input"
+        size="lg"
+      />
+    </div>
+  ),
+};
+
+export const Interactive: Story = {
+  args: {
+    onValueChange: (value: string) => console.log('Input changed:', value),
+    placeholder: 'Type something...',
+  },
+};

package/src/input/input.test.tsx

@@ -0,0 +1,65 @@
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+import { Input } from './input';
+
+describe('Input', () => {
+  it('renders input with default props', () => {
+    render(<Input placeholder="Test input" />);
+    expect(screen.getByPlaceholderText('Test input')).toBeInTheDocument();
+  });
+
+  it('applies variant styles', () => {
+    render(
+      <Input
+        placeholder="Error input"
+        variant="error"
+      />,
+    );
+    expect(screen.getByPlaceholderText('Error input')).toHaveClass('border-red-300');
+  });
+
+  it('applies size styles', () => {
+    render(
+      <Input
+        placeholder="Large input"
+        size="lg"
+      />,
+    );
+    expect(screen.getByPlaceholderText('Large input')).toHaveClass('px-4', 'py-3', 'text-lg');
+  });
+
+  it('applies custom className', () => {
+    render(
+      <Input
+        className="custom-input"
+        placeholder="Custom input"
+      />,
+    );
+    expect(screen.getByPlaceholderText('Custom input')).toHaveClass('custom-input');
+  });
+
+  it('passes through other props', () => {
+    render(
+      <Input
+        data-testid="test-input"
+        name="test"
+      />,
+    );
+    expect(screen.getByTestId('test-input')).toHaveAttribute('name', 'test');
+  });
+
+  it('handles disabled state', () => {
+    render(
+      <Input
+        disabled
+        placeholder="Disabled input"
+      />,
+    );
+    expect(screen.getByPlaceholderText('Disabled input')).toBeDisabled();
+  });
+
+  it('handles value changes', () => {
+    render(<Input defaultValue="test value" />);
+    expect(screen.getByDisplayValue('test value')).toBeInTheDocument();
+  });
+});