@brcarddev/frontend-commons 1.0.2

package/src/components/atoms/Textarea/textarea.stories.tsx

@@ -0,0 +1,169 @@
+import * as React from 'react';
+
+import { Textarea } from './textarea';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+const meta: Meta<typeof Textarea> = {
+  title: 'Components/Data Entry/Textarea',
+  component: Textarea,
+  tags: [ 'autodocs' ],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'Accessible and styled textarea component with Tailwind CSS. Supports visual states like focus, error, disabled, and filled. Ideal for multiline text fields in forms.',
+      },
+    },
+    controls: { expanded: true },
+  },
+  argTypes: {
+    'className': {
+      control: 'text',
+      description: 'Additional Tailwind utility classes for styling.',
+      table: {
+        category: 'Style',
+        type: { summary: 'string' },
+      },
+    },
+    'placeholder': {
+      control: 'text',
+      description: 'Text displayed when the textarea is empty.',
+      table: {
+        category: 'Content',
+        type: { summary: 'string' },
+      },
+    },
+    'disabled': {
+      control: 'boolean',
+      description: 'Disables the textarea, preventing editing.',
+      table: {
+        category: 'Behavior',
+        type: { summary: 'boolean' },
+      },
+    },
+    'value': {
+      control: 'text',
+      description: 'Controlled value of the textarea.',
+      table: {
+        category: 'State',
+        type: { summary: 'string' },
+      },
+    },
+    'defaultValue': {
+      control: 'text',
+      description: 'Initial value of the textarea in uncontrolled mode.',
+      table: {
+        category: 'State',
+        type: { summary: 'string' },
+      },
+    },
+    'required': {
+      control: 'boolean',
+      description: 'Marks the field as required.',
+      table: {
+        category: 'Validation',
+        type: { summary: 'boolean' },
+      },
+    },
+    'aria-invalid': {
+      control: 'boolean',
+      description: 'Defines the visual and semantic error state.',
+      table: {
+        category: 'Accessibility',
+        type: { summary: 'boolean' },
+      },
+    },
+    'onChange': {
+      action: 'changed',
+      description: 'Callback triggered when typing in the textarea.',
+      table: {
+        category: 'Events',
+        type: { summary: '(event: React.ChangeEvent<HTMLTextAreaElement>) => void' },
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Textarea>;
+
+export const Controlled: Story = {
+  render: args => {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const [ value, setValue ] = React.useState('');
+
+    return (
+      <div className="flex flex-col space-y-2">
+        <Textarea
+          {...args}
+          value={value}
+          onChange={e => setValue(e.target.value)}
+          placeholder="Type something..."
+        />
+        <span className="text-sm text-muted-foreground">Current value: {value}</span>
+      </div>
+    );
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Example of a textarea controlled by local state.',
+      },
+    },
+  },
+};
+
+export const Default: Story = {
+  args: {
+    placeholder: 'Type your message here...',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Basic textarea with placeholder.',
+      },
+    },
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    disabled: true,
+    defaultValue: 'Campo desabilitado.',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Disabled textarea for data entry.',
+      },
+    },
+  },
+};
+
+export const Filled: Story = {
+  args: {
+    defaultValue: 'Text already filled.',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Textarea already filled with initial value.',
+      },
+    },
+  },
+};
+
+export const Invalid: Story = {
+  args: {
+    'aria-invalid': true,
+    'defaultValue': 'Invalid text',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Displays the error state with appropriate visual styles.',
+      },
+    },
+  },
+};

package/src/components/atoms/Textarea/textarea.test.tsx

@@ -0,0 +1,56 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import { describe, it, expect, vi } from 'vitest';
+
+import { Textarea } from './textarea';
+
+describe('<Textarea />', () => {
+  it('renders the textarea correctly', () => {
+    render(<Textarea aria-label="Comment" />);
+    const textarea = screen.getByLabelText('Comment');
+    expect(textarea).toBeInTheDocument();
+    expect(textarea.tagName).toBe('TEXTAREA');
+  });
+
+  it('applies custom className in addition to default styles', () => {
+    render(<Textarea aria-label="Styled" className="custom-class" />);
+    const textarea = screen.getByLabelText('Styled');
+    expect(textarea).toHaveClass('custom-class');
+  });
+
+  it('calls onChange handler when value changes', () => {
+    const handleChange = vi.fn();
+    render(<Textarea aria-label="Description" onChange={handleChange} />);
+    const textarea = screen.getByLabelText('Description');
+    fireEvent.change(textarea, { target: { value: 'New text' } });
+    expect(handleChange).toHaveBeenCalledTimes(1);
+  });
+
+  it('is disabled when the disabled prop is passed', () => {
+    render(<Textarea aria-label="Disabled" disabled />);
+    const textarea = screen.getByLabelText('Disabled');
+    expect(textarea).toBeDisabled();
+  });
+
+  it('sets aria-invalid when provided', () => {
+    render(<Textarea aria-label="Invalid input" aria-invalid="true" />);
+    const textarea = screen.getByLabelText('Invalid input');
+    expect(textarea).toHaveAttribute('aria-invalid', 'true');
+  });
+
+  it('can be found using the data-slot attribute', () => {
+    render(<Textarea aria-label="Slot test" />);
+    const textarea = screen.getByLabelText('Slot test');
+    expect(textarea).toHaveAttribute('data-slot', 'textarea');
+  });
+
+  it('accepts and renders placeholder text', () => {
+    render(<Textarea aria-label="Bio" placeholder="Enter your bio" />);
+    const textarea = screen.getByPlaceholderText('Enter your bio');
+    expect(textarea).toBeInTheDocument();
+  });
+
+  it('should match snapshot', () => {
+    const { container } = render(<Textarea />);
+    expect(container).toMatchSnapshot();
+  });
+});

package/src/components/atoms/Textarea/textarea.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react';
+
+import { cn } from '@/utils';
+
+function Textarea ({ className, ...props }: React.ComponentProps<'textarea'>) {
+  return (
+    <textarea
+      data-slot="textarea"
+      className={cn(
+        'rounded-2xl bg-white border border-gray-300 focus-visible-primary',
+        'disabled:cursor-not-allowed disabled:opacity-50',
+        'flex field-sizing-content',
+        'placeholder:text-gray-500 placeholder:text-base text-base',
+        'min-h-16 w-full',
+        'px-3 py-2',
+        'transition-[color,box-shadow]',
+        'outline-none',
+        className
+      )}
+      maxLength={props.maxLength ?? 1000}
+      {...props}
+    />
+  );
+}
+
+export { Textarea };

package/src/components/atoms/Toggle/index.ts

@@ -0,0 +1 @@
+export * from './toggle';

package/src/components/atoms/Toggle/toggle.stories.tsx

@@ -0,0 +1,170 @@
+/* eslint-disable react-hooks/rules-of-hooks */
+import React from 'react';
+
+import { Bold } from 'lucide-react';
+
+import { Toggle } from './toggle';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+const meta: Meta<typeof Toggle> = {
+  title: 'Components/Data Entry/Toggle',
+  component: Toggle,
+  tags: [ 'autodocs' ],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'Toggle button based on Radix UI Toggle. Supports style variants, sizes, controlled state, and icons. Ideal for actions like bold, italic, or any binary state control.',
+      },
+    },
+    controls: { expanded: true },
+  },
+  argTypes: {
+    'variant': {
+      control: 'radio',
+      options: [ 'default', 'outline' ],
+      description: 'Visual style of the button.',
+      table: {
+        category: 'Style',
+        type: { summary: '"default" | "outline"' },
+        defaultValue: { summary: 'default' },
+      },
+    },
+    'size': {
+      control: 'radio',
+      options: [ 'default', 'sm', 'lg' ],
+      description: 'Button size.',
+      table: {
+        category: 'Size',
+        type: { summary: '"default" | "sm" | "lg"' },
+        defaultValue: { summary: 'default' },
+      },
+    },
+    'pressed': {
+      control: 'boolean',
+      description: 'Controls the pressed state of the button.',
+      table: {
+        category: 'State',
+        type: { summary: 'boolean' },
+      },
+    },
+    'defaultPressed': {
+      control: 'boolean',
+      description: 'Defines the initial state of the button (uncontrolled mode).',
+      table: {
+        category: 'State',
+        type: { summary: 'boolean' },
+      },
+    },
+    'disabled': {
+      control: 'boolean',
+      description: 'Disables button interaction.',
+      table: {
+        category: 'Behavior',
+        type: { summary: 'boolean' },
+      },
+    },
+    'aria-invalid': {
+      control: 'boolean',
+      description: 'Applies visual and semantic error styles.',
+      table: {
+        category: 'Accessibility',
+        type: { summary: 'boolean' },
+      },
+    },
+    'onPressedChange': {
+      action: 'pressed changed',
+      description: 'Triggered when the button is activated or deactivated.',
+      table: {
+        category: 'Events',
+        type: {
+          summary: '(pressed: boolean) => void',
+        },
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Toggle>;
+
+export const Controlled: Story = {
+  render: args => {
+    const [ pressed, setPressed ] = React.useState(false);
+
+    return (
+      <Toggle {...args} pressed={pressed} onPressedChange={setPressed}>
+        {pressed ? 'Activated' : 'Deactivated'}
+      </Toggle>
+    );
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Controlled example with external state.',
+      },
+    },
+  },
+};
+
+export const Default: Story = {
+  args: {
+    children: 'Default toggle',
+    defaultPressed: false,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Basic toggle with default style.',
+      },
+    },
+  },
+};
+
+export const Outline: Story = {
+  args: {
+    children: 'Toggle with border',
+    variant: 'outline',
+    defaultPressed: true,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Toggle with "outline" style, more visible on light backgrounds.',
+      },
+    },
+  },
+};
+
+export const Sizes: Story = {
+  render: () => (
+    <div className="flex items-center gap-4">
+      <Toggle size="sm">Small</Toggle>
+      <Toggle size="default">Medium</Toggle>
+      <Toggle size="lg">Large</Toggle>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Demonstrates the three available button sizes.',
+      },
+    },
+  },
+};
+
+export const WithIcon: Story = {
+  args: {
+    children: <Bold />,
+    defaultPressed: false,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Toggle with icon. Ideal for text editors and formatting tools.',
+      },
+    },
+  },
+};

package/src/components/atoms/Toggle/toggle.test.tsx

@@ -0,0 +1,62 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+
+import { Toggle } from './toggle';
+
+describe('<Toggle />', () => {
+  it('renders the toggle button with default variant and size', () => {
+    render(<Toggle aria-label="Toggle theme" />);
+    const toggle = screen.getByLabelText('Toggle theme');
+    expect(toggle).toBeInTheDocument();
+    expect(toggle).toHaveAttribute('aria-pressed', 'false');
+  });
+
+  it('applies custom className along with variant styles', () => {
+    render(<Toggle aria-label="Custom Toggle" className="custom-class" />);
+    const toggle = screen.getByLabelText('Custom Toggle');
+    expect(toggle).toHaveClass('custom-class');
+  });
+
+  it('respects the `variant` and `size` props', () => {
+    render(<Toggle aria-label="Styled Toggle" variant="outline" size="sm" />);
+    const toggle = screen.getByLabelText('Styled Toggle');
+    expect(toggle.className).toMatch(/border/); // outline has border
+    expect(toggle.className).toMatch(/h-8/); // sm has h-8
+  });
+
+  it('toggles aria-pressed on click', () => {
+    render(<Toggle aria-label="Toggle status" />);
+    const toggle = screen.getByLabelText('Toggle status');
+    expect(toggle).toHaveAttribute('aria-pressed', 'false');
+    fireEvent.click(toggle);
+    expect(toggle).toHaveAttribute('aria-pressed', 'true');
+    fireEvent.click(toggle);
+    expect(toggle).toHaveAttribute('aria-pressed', 'false');
+  });
+
+  it('does not toggle when disabled', () => {
+    render(<Toggle aria-label="Disabled toggle" disabled />);
+    const toggle = screen.getByLabelText('Disabled toggle');
+    expect(toggle).toBeDisabled();
+    expect(toggle).toHaveAttribute('aria-pressed', 'false');
+    fireEvent.click(toggle);
+    expect(toggle).toHaveAttribute('aria-pressed', 'false'); // still false
+  });
+
+  it('sets aria-invalid when passed', () => {
+    render(<Toggle aria-label="Invalid toggle" aria-invalid="true" />);
+    const toggle = screen.getByLabelText('Invalid toggle');
+    expect(toggle).toHaveAttribute('aria-invalid', 'true');
+  });
+
+  it('is accessible via data-slot attribute', () => {
+    render(<Toggle aria-label="Slot test" />);
+    const toggle = screen.getByLabelText('Slot test');
+    expect(toggle).toHaveAttribute('data-slot', 'toggle');
+  });
+
+  it('should match snapshot', () => {
+    const { container } = render(<Toggle />);
+    expect(container).toMatchSnapshot();
+  });
+});

package/src/components/atoms/Toggle/toggle.tsx

@@ -0,0 +1,47 @@
+/* eslint-disable react-refresh/only-export-components */
+import * as React from 'react';
+
+import * as TogglePrimitive from '@radix-ui/react-toggle';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+import { cn } from '@/utils';
+
+const toggleVariants = cva(
+  'inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium hover:bg-muted hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*=\'size-\'])]:size-4 [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none transition-[color,box-shadow] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive whitespace-nowrap',
+  {
+    variants: {
+      variant: {
+        default: 'bg-transparent',
+        outline:
+          'border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground',
+      },
+      size: {
+        default: 'h-9 px-2 min-w-9',
+        sm: 'h-8 px-1.5 min-w-8',
+        lg: 'h-10 px-2.5 min-w-10',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  }
+);
+
+function Toggle ({
+  className,
+  variant,
+  size,
+  ...props
+}: React.ComponentProps<typeof TogglePrimitive.Root> &
+  VariantProps<typeof toggleVariants>) {
+  return (
+    <TogglePrimitive.Root
+      data-slot="toggle"
+      className={cn(toggleVariants({ variant, size, className }))}
+      {...props}
+    />
+  );
+}
+
+export { Toggle, toggleVariants };

package/src/components/atoms/Typography/index.ts

@@ -0,0 +1 @@
+export * from './typography';

package/src/components/atoms/Typography/typography.stories.tsx

@@ -0,0 +1,95 @@
+import { Typography } from './typography';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+const meta: Meta<typeof Typography> = {
+  title: 'Components/Data Display/Typography',
+  component: Typography,
+  tags: [ 'autodocs' ],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'Reusable typography component with support for different variants like title, paragraph, and auxiliary text.',
+      },
+    },
+    controls: { expanded: true },
+  },
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: [ 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'lead', 'paragraph', 'small' ],
+      description: 'Defines the typographic style.',
+      table: {
+        type: { summary: 'h1 | h2 | h3 | h4 | h5 | h6 | lead | paragraph | small' },
+        defaultValue: { summary: 'paragraph' },
+      },
+    },
+    as: {
+      control: 'text',
+      description: 'Overwrites the default HTML element used.',
+      table: {
+        type: { summary: 'React.ElementType' },
+      },
+    },
+    className: {
+      control: 'text',
+      description: 'Additional TailwindCSS classes for styling.',
+    },
+    children: {
+      control: 'text',
+      description: 'Text content displayed in the component.',
+    },
+  },
+  args: {
+    children: 'Example text for the Typography component',
+    variant: 'paragraph',
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Heading1: Story = {
+  args: {
+    variant: 'h1',
+    children: 'Main H1 Title',
+  },
+};
+
+export const Heading2: Story = {
+  args: {
+    variant: 'h2',
+    children: 'Subtitle H2',
+  },
+};
+
+export const Lead: Story = {
+  args: {
+    variant: 'lead',
+    children: 'Intermediate highlighted text.',
+  },
+};
+
+export const Paragraph: Story = {
+  args: {
+    variant: 'paragraph',
+    children: 'This is an example paragraph explaining something in more detail.',
+  },
+};
+
+export const SmallText: Story = {
+  args: {
+    variant: 'small',
+    children: 'Small text for observations or captions.',
+  },
+};
+
+export const WithCustomElement: Story = {
+  args: {
+    variant: 'h3',
+    as: 'label',
+    children: 'Label for input',
+    className: 'text-red-500',
+  },
+};

package/src/components/atoms/Typography/typography.test.tsx

@@ -0,0 +1,66 @@
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+
+import { Typography } from './typography';
+
+describe('<Typography />', () => {
+  it('renders with default variant (paragraph)', () => {
+    render(<Typography>Default text</Typography>);
+    const element = screen.getByText('Default text');
+    expect(element.tagName.toLowerCase()).toBe('p');
+    expect(element).toHaveClass('text-base');
+    expect(element).toHaveAttribute('data-slot', 'typography');
+  });
+
+  it('renders with specific variant: h2', () => {
+    render(<Typography variant="h2">Heading Level 2</Typography>);
+    const element = screen.getByText('Heading Level 2');
+    expect(element.tagName.toLowerCase()).toBe('h2');
+    expect(element).toHaveClass('text-4xl');
+  });
+
+  it('renders with variant "small" using default tag <span>', () => {
+    render(<Typography variant="small">Small text</Typography>);
+    const element = screen.getByText('Small text');
+    expect(element.tagName.toLowerCase()).toBe('span');
+    expect(element).toHaveClass('text-sm');
+  });
+
+  it('overrides default tag using `as` prop', () => {
+    render(
+      <Typography variant="h3" as="div">
+        Custom tag with h3 variant
+      </Typography>
+    );
+    const element = screen.getByText('Custom tag with h3 variant');
+    expect(element.tagName.toLowerCase()).toBe('div');
+    expect(element).toHaveClass('text-3xl');
+  });
+
+  it('applies custom className along with variant classes', () => {
+    render(
+      <Typography variant="lead" className="custom-class">
+        Custom class test
+      </Typography>
+    );
+    const element = screen.getByText('Custom class test');
+    expect(element).toHaveClass('custom-class');
+    expect(element).toHaveClass('text-xl');
+  });
+
+  it('passes through additional props', () => {
+    render(
+      <Typography variant="h4" id="heading-id" aria-label="Heading Label">
+        Extra props test
+      </Typography>
+    );
+    const element = screen.getByText('Extra props test');
+    expect(element).toHaveAttribute('id', 'heading-id');
+    expect(element).toHaveAttribute('aria-label', 'Heading Label');
+  });
+
+  it('should match snapshot', () => {
+    const { container } = render(<Typography>Text</Typography>);
+    expect(container).toMatchSnapshot();
+  });
+});