@brcarddev/frontend-commons 1.0.2

package/src/components/molecules/Tabs/tabs.stories.tsx

@@ -0,0 +1,222 @@
+import { Settings, User, Bell } from 'lucide-react';
+
+import { Tabs, TabsList, TabsTrigger, TabsContent } from './tabs';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+const meta: Meta<typeof Tabs> = {
+  title: 'Components/Navigation/Tabs',
+  component: Tabs,
+  tags: [ 'autodocs' ],
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: `
+The Tabs component organizes content into separate sections, accessible through tab navigation.  
+It is ideal for displaying different groups of related information in the same space, improving the user experience with clear and accessible navigation.
+
+Internally, it is built on \`@radix-ui/react-tabs\`, ensuring keyboard accessibility, automatic focus, and responsive behavior.
+        `,
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Tabs>;
+
+export const Default: Story = {
+  name: 'Default',
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Basic example with three tabs, each displaying simple textual content.',
+      },
+    },
+  },
+  render: () => (
+    <div className='w-[500px]'>
+      <Tabs defaultValue="perfil">
+        <TabsList>
+          <TabsTrigger value="perfil">Profile</TabsTrigger>
+          <TabsTrigger value="notification">Notifications</TabsTrigger>
+          <TabsTrigger value="configs">Settings</TabsTrigger>
+        </TabsList>
+        <TabsContent value="perfil">
+          <div className="mt-4 text-sm">
+          User information, photo and personal preferences.
+          </div>
+        </TabsContent>
+        <TabsContent value="notification">
+          <div className="mt-4 text-sm">
+          Recent alerts, email status and permissions.
+          </div>
+        </TabsContent>
+        <TabsContent value="configs">
+          <div className="mt-4 text-sm">
+          Account preferences, authentication and app integration.
+          </div>
+        </TabsContent>
+      </Tabs>
+    </div>
+  ),
+};
+
+export const DisabledTabs: Story = {
+  name: 'Disabled tabs',
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Demonstration of how a tab can be disabled to prevent user interaction.',
+      },
+    },
+  },
+  render: () => (
+    <Tabs defaultValue="perfil">
+      <TabsList>
+        <TabsTrigger value="perfil">Perfil</TabsTrigger>
+        <TabsTrigger value="notification" disabled>
+          Notifications
+        </TabsTrigger>
+        <TabsTrigger value="configs">Settings</TabsTrigger>
+      </TabsList>
+      <TabsContent value="perfil">
+        <div className="mt-4 text-sm">
+          Disabled tabs cannot be clicked or focused.
+        </div>
+      </TabsContent>
+      <TabsContent value="configs">
+        <div className="mt-4 text-sm">This tab remains active by default.</div>
+      </TabsContent>
+    </Tabs>
+  ),
+};
+
+export const WithIcons: Story = {
+  name: 'With icons',
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Tabs can contain icons to visually reinforce the content they represent.',
+      },
+    },
+  },
+  render: () => (
+    <Tabs defaultValue="perfil">
+      <TabsList>
+        <TabsTrigger value="perfil">
+          <User />
+          Profile
+        </TabsTrigger>
+        <TabsTrigger value="notification">
+          <Bell />
+          Notifications
+        </TabsTrigger>
+        <TabsTrigger value="configs">
+          <Settings />
+          Settings
+        </TabsTrigger>
+      </TabsList>
+      <TabsContent value="perfil">
+        <div className="mt-4 text-sm">Details of the profile with a representative icon.</div>
+      </TabsContent>
+      <TabsContent value="notification">
+        <div className="mt-4 text-sm">Section of recent alerts and activities.</div>
+      </TabsContent>
+      <TabsContent value="configs">
+        <div className="mt-4 text-sm">Advanced technical settings and preferences.</div>
+      </TabsContent>
+    </Tabs>
+  ),
+};
+
+export const WithOutlinedVariant: Story = {
+  name: 'With outlined variant',
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Tabs can have a outlined variant with a different style.',
+      },
+    },
+  },
+  render: () => (
+    <Tabs defaultValue="perfil" variant="outlined" >
+      <TabsList>
+        <TabsTrigger value="perfil"> Perfil</TabsTrigger>
+        <TabsTrigger value="notification">Notifications</TabsTrigger>
+        <TabsTrigger value="configs">Settings</TabsTrigger>
+      </TabsList>
+      <TabsContent value="perfil">
+        <div className="mt-4 text-sm">
+          Disabled tabs cannot be clicked or focused.
+        </div>
+      </TabsContent>
+      <TabsContent value="configs">
+        <div className="mt-4 text-sm">This tab remains active by default.</div>
+      </TabsContent>
+    </Tabs>
+  ),
+};
+
+export const WithSecondaryVariant: Story = {
+  name: 'With secondary variant',
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Tabs can have a secondary variant with a different style.',
+      },
+    },
+  },
+  render: () => (
+    <Tabs defaultValue="perfil" variant="secondary" >
+      <TabsList>
+        <TabsTrigger value="perfil"> Perfil</TabsTrigger>
+        <TabsTrigger value="notification">Notifications</TabsTrigger>
+        <TabsTrigger value="configs">Settings</TabsTrigger>
+      </TabsList>
+      <TabsContent value="perfil">
+        <div className="mt-4 text-sm">
+          Disabled tabs cannot be clicked or focused.
+        </div>
+      </TabsContent>
+      <TabsContent value="configs">
+        <div className="mt-4 text-sm">This tab remains active by default.</div>
+      </TabsContent>
+    </Tabs>
+  ),
+};
+
+export const WithSquareVariant: Story = {
+  name: 'With square variant',
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Tabs can have a square variant with a different style.',
+      },
+    },
+  },
+  render: () => (
+    <Tabs defaultValue="perfil" variant="square">
+      <TabsList>
+        <TabsTrigger value="perfil">Perfil</TabsTrigger>
+        <TabsTrigger value="notification">Notifications</TabsTrigger>
+        <TabsTrigger value="configs">Settings</TabsTrigger>
+      </TabsList>
+      <TabsContent value="perfil">
+        <div className="mt-4 text-sm">
+          Disabled tabs cannot be clicked or focused.
+        </div>
+      </TabsContent>
+      <TabsContent value="configs">
+        <div className="mt-4 text-sm">This tab remains active by default.</div>
+      </TabsContent>
+    </Tabs>
+  ),
+};

package/src/components/molecules/Tabs/tabs.test.tsx

@@ -0,0 +1,113 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, expect, it } from 'vitest';
+
+import { Tabs, TabsContent, TabsList, TabsTrigger } from './tabs';
+
+function renderTabs(variant?: 'primary' | 'secondary') {
+  render(
+    <Tabs variant={variant}>
+      <TabsList>
+        <TabsTrigger value="tab-1">Tab 1</TabsTrigger>
+        <TabsTrigger value="tab-2">Tab 2</TabsTrigger>
+      </TabsList>
+      <TabsContent value="tab-1" data-testid="tab-1-content">
+        Tab 1 Content
+      </TabsContent>
+      <TabsContent value="tab-2" data-testid="tab-2-content">
+        Tab 2 Content
+      </TabsContent>
+    </Tabs>
+  );
+}
+
+describe('<Tabs />', () => {
+  const user = userEvent.setup();
+
+  it('should render the tabs component', () => {
+    renderTabs();
+
+    expect(screen.getByRole('tablist')).toBeInTheDocument();
+  });
+
+  it('should render the tab content', () => {
+    renderTabs();
+
+    expect(screen.getByTestId('tab-1-content')).toBeInTheDocument();
+    expect(screen.getByTestId('tab-2-content')).toBeInTheDocument();
+  });
+
+  it('should switch between tabs', async () => {
+    renderTabs();
+
+    await user.click(screen.getByText(/tab 1/i));
+    expect(screen.getByText(/tab 1 content/i)).toBeInTheDocument();
+  });
+
+  it('should be focusable and switch with keyboard (tab)', async () => {
+    renderTabs();
+
+    await user.tab();
+    expect(screen.getByText(/tab 1 content/i)).toBeInTheDocument();
+  });
+
+  it('should be focusable and switch with keyboard (shift + tab)', async () => {
+    renderTabs();
+
+    await user.tab();
+    await user.tab({ shift: true });
+
+    expect(screen.getByText(/tab 1 content/i)).toBeInTheDocument();
+  });
+
+  it('should be focusable and switch with keyboard (enter)', async () => {
+    renderTabs();
+
+    await user.tab();
+    await user.keyboard('{Enter}');
+
+    expect(screen.getByText(/tab 1 content/i)).toBeInTheDocument();
+  });
+
+  it('should be focusable and switch with keyboard (space)', async () => {
+    renderTabs();
+
+    await user.tab();
+    await user.keyboard('{Space}');
+
+    expect(screen.getByText(/tab 1 content/i)).toBeInTheDocument();
+  });
+
+  it('should be focusable and switch with keyboard (arrow keys)', async () => {
+    renderTabs();
+
+    await user.tab();
+    await user.keyboard('{ArrowRight}');
+
+    expect(screen.getByText(/tab 2 content/i)).toBeInTheDocument();
+  });
+
+  it('should apply primary variant styles by default', () => {
+    renderTabs();
+
+    const tabsRoot = screen.getByRole('tablist').parentElement;
+    expect(tabsRoot).toHaveAttribute('data-variant', 'primary');
+  });
+
+  it('should apply secondary variant styles when variant is secondary', () => {
+    renderTabs('secondary');
+
+    const tabsRoot = screen.getByRole('tablist').parentElement;
+    expect(tabsRoot).toHaveAttribute('data-variant', 'secondary');
+  });
+
+  it('should match snapshot', () => {
+    const { container } = render(<Tabs />);
+    expect(container).toMatchSnapshot();
+  });
+
+  it('should match snapshot with secondary variant', () => {
+    const { container } = render(<Tabs variant="secondary" />);
+    expect(container).toMatchSnapshot();
+  });
+});

package/src/components/molecules/Tabs/tabs.tsx

@@ -0,0 +1,102 @@
+import * as React from 'react';
+
+import * as TabsPrimitive from '@radix-ui/react-tabs';
+
+import { cn } from '@/utils';
+
+interface TabsProps extends React.ComponentProps<typeof TabsPrimitive.Root> {
+  variant?: 'primary' | 'secondary' | 'square' | 'outlined';
+}
+
+function Tabs({ className, variant = 'primary', ...props }: TabsProps) {
+  return (
+    <TabsPrimitive.Root
+      data-slot="tabs"
+      data-variant={variant}
+      className={cn('flex flex-col gap-2 group', className)}
+      {...props}
+    />
+  );
+}
+
+function TabsList({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.List>) {
+  return (
+    <TabsPrimitive.List
+      data-slot="tabs-list"
+      className={cn(
+        'w-full flex',
+        'group-data-[variant=outlined]:bg-gray-50',
+        'group-data-[variant=outlined]:rounded-lg group-data-[variant=outlined]:border group-data-[variant=outlined]:border-gray-200',
+        'group-data-[variant=secondary]:bg-gray-50',
+        'group-data-[variant=secondary]:p-1 group-data-[variant=secondary]:gap-1',
+        'group-data-[variant=secondary]:rounded-lg group-data-[variant=secondary]:border group-data-[variant=secondary]:border-gray-200',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function TabsTrigger({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
+  return (
+    <TabsPrimitive.Trigger
+      data-slot="tabs-trigger"
+      className={cn(
+        'border border-gray-200 data-[state=active]:border-b-primary data-[state=active]:border-b-2',
+        'bg-gray-100 text-gray-500 data-[state=active]:bg-white data-[state=active]:text-primary',
+        'cursor-pointer flex flex-1 items-center justify-center gap-2 p-3 text-md font-medium whitespace-nowrap transition-[color,box-shadow]',
+        'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring focus-visible:ring-[3px] focus-visible:outline-1',
+        'disabled:pointer-events-none disabled:opacity-50',
+        'hover:bg-gray-50',
+        '[&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
+        'first:rounded-tl-lg last:rounded-tr-lg',
+        'min-w-fit',
+
+        'group-data-[variant=secondary]:text-gray-700',
+        'group-data-[variant=secondary]:rounded-sm',
+        'group-data-[variant=secondary]:py-2 group-data-[variant=secondary]:px-3',
+        'group-data-[variant=secondary]:border-0 group-data-[variant=secondary]:bg-transparent',
+        'group-data-[variant=secondary]:data-[state=active]:bg-white group-data-[variant=secondary]:data-[state=active]:text-gray-700 group-data-[variant=secondary]:data-[state=active]:border-b-0',
+        'group-data-[variant=secondary]:data-[state=active]:shadow-sm',
+        'group-data-[variant=secondary]:bg-transparent',
+        'group-data-[variant=secondary]:hover:bg-white group-data-[variant=secondary]:hover:shadow-sm',
+
+        'group-data-[variant=outlined]:text-gray-700',
+        'group-data-[variant=outlined]:rounded-sm',
+        'group-data-[variant=outlined]:border-0 group-data-[variant=outlined]:bg-transparent',
+        'group-data-[variant=outlined]:data-[state=active]:bg-white group-data-[variant=outlined]:data-[state=active]:text-gray-700 group-data-[variant=outlined]:data-[state=active]:border-b-0',
+        'group-data-[variant=outlined]:data-[state=active]:shadow-sm',
+        'group-data-[variant=outlined]:bg-transparent',
+
+        'group-data-[variant=square]:rounded-none!',
+        'group-data-[variant=square]:text-sm! group-data-[variant=square]:leading-none!',
+        'group-data-[variant=square]:p-3!',
+        'group-data-[variant=square]:data-[state=active]:border-t-0! group-data-[variant=square]:data-[state=active]:border-l-0! group-data-[variant=square]:data-[state=active]:border-r-0! ',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function TabsContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Content>) {
+  return (
+    <TabsPrimitive.Content
+      data-slot="tabs-content"
+      className={cn('flex-1 outline-none', className)}
+      {...props}
+    />
+  );
+}
+
+export type { TabsProps };
+export { Tabs, TabsContent, TabsList, TabsTrigger };

package/src/components/molecules/ToggleGroup/index.ts

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

package/src/components/molecules/ToggleGroup/toggle-group.stories.tsx

@@ -0,0 +1,117 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { ToggleGroup, ToggleGroupItem } from './toggle-group';
+
+const meta: Meta<typeof ToggleGroup> = {
+  title: 'Components/Data Entry/ToggleGroup',
+  component: ToggleGroup,
+  subcomponents: { ToggleGroupItem },
+  tags: [ 'autodocs' ],
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component:
+          'Button group component (toggle) based on Radix UI. Ideal for selecting one or multiple options. Supports variations in style and size.',
+      },
+    },
+  },
+  argTypes: {
+    type: {
+      control: 'select',
+      options: [ 'single', 'multiple' ],
+      description: 'Selection type: single or multiple.',
+      defaultValue: 'single',
+    },
+    size: {
+      control: 'select',
+      options: [ 'sm', 'default', 'lg' ],
+      description: 'Button size.',
+    },
+    variant: {
+      control: 'select',
+      options: [ 'default', 'outline' ],
+      description: 'Button style.',
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Disable the entire group.',
+    },
+    orientation: {
+      control: 'select',
+      options: [ 'horizontal', 'vertical' ],
+      description: 'Group orientation.',
+    },
+    value: {
+      control: 'text',
+      description: 'Selected value (controlled).',
+    },
+    onValueChange: {
+      action: 'onValueChange',
+      description: 'Callback when a value is selected.',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof ToggleGroup>;
+
+export const Default: Story = {
+  args: {
+    type: 'single',
+    size: 'default',
+    variant: 'default',
+    orientation: 'horizontal',
+    children: (
+      <>
+        <ToggleGroupItem value="left">Left</ToggleGroupItem>
+        <ToggleGroupItem value="center">Center</ToggleGroupItem>
+        <ToggleGroupItem value="right">Right</ToggleGroupItem>
+      </>
+    ),
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    ...Default.args,
+    disabled: true,
+  },
+};
+
+export const LargeSize: Story = {
+  args: {
+    ...Default.args,
+    size: 'lg',
+  },
+};
+
+export const MultipleSelection: Story = {
+  args: {
+    type: 'multiple',
+    size: 'default',
+    variant: 'default',
+    children: (
+      <>
+        <ToggleGroupItem value="bold">Bold</ToggleGroupItem>
+        <ToggleGroupItem value="italic">Italic</ToggleGroupItem>
+        <ToggleGroupItem value="underline">Underline</ToggleGroupItem>
+      </>
+    ),
+  },
+};
+
+export const OutlineVariant: Story = {
+  args: {
+    ...Default.args,
+    variant: 'outline',
+  },
+};
+
+export const VerticalOrientation: Story = {
+  args: {
+    ...Default.args,
+    orientation: 'vertical',
+  },
+};

package/src/components/molecules/ToggleGroup/toggle-group.test.tsx

@@ -0,0 +1,100 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, expect, it } from 'vitest';
+
+import { ToggleGroup, ToggleGroupItem } from './toggle-group';
+
+function renderToggleGroup(
+  props: React.ComponentProps<typeof ToggleGroup> & {
+    items?: string[];
+  }
+) {
+  const { items = [ 'one', 'two' ], ...rest } = props;
+
+  return render(
+    <ToggleGroup {...rest} data-testid="toggle-group">
+      {items.map((item, i) => (
+        <ToggleGroupItem key={item} value={item} data-testid={`toggle-item-${i}`}>
+          {item}
+        </ToggleGroupItem>
+      ))}
+    </ToggleGroup>
+  );
+}
+
+describe('<ToggleGroup />', () => {
+  it('renders the toggle group and items', () => {
+    renderToggleGroup({ type: 'single' });
+    expect(screen.getByTestId('toggle-group')).toBeInTheDocument();
+    expect(screen.getByTestId('toggle-item-0')).toBeInTheDocument();
+    expect(screen.getByTestId('toggle-item-1')).toBeInTheDocument();
+  });
+
+  it('selects a single item and toggles state', async () => {
+    const { getByTestId } = renderToggleGroup({
+      type: 'single',
+      defaultValue: 'B',
+      items: [ 'A', 'B', 'C' ],
+    });
+
+    const itemA = getByTestId('toggle-item-0');
+    const itemB = getByTestId('toggle-item-1');
+    const itemC = getByTestId('toggle-item-2');
+
+    expect(itemB).toHaveAttribute('data-state', 'on');
+    expect(itemA).not.toHaveAttribute('data-state', 'on');
+    expect(itemC).not.toHaveAttribute('data-state', 'on');
+
+    await userEvent.click(itemC);
+    expect(itemC).toHaveAttribute('data-state', 'on');
+    expect(itemB).not.toHaveAttribute('data-state', 'on');
+  });
+  it('selects multiple items when type is multiple', async () => {
+    const user = userEvent.setup();
+    renderToggleGroup({
+      type: 'multiple',
+      defaultValue: [ 'one' ],
+    });
+
+    const item0 = screen.getByTestId('toggle-item-0');
+    const item1 = screen.getByTestId('toggle-item-1');
+
+    await user.click(item1);
+    expect(item0.getAttribute('aria-pressed')).toBe('true');
+    expect(item1.getAttribute('aria-pressed')).toBe('true');
+  });
+
+  it('applies variant and size via context', () => {
+    renderToggleGroup({ type: 'single', variant: 'outline', size: 'lg' });
+
+    const item0 = screen.getByTestId('toggle-item-0');
+    expect(item0.dataset.variant).toBe('outline');
+    expect(item0.dataset.size).toBe('lg');
+  });
+
+  it('is keyboard accessible and allows arrow key navigation', async () => {
+    const user = userEvent.setup();
+    renderToggleGroup({ type: 'single' });
+
+    const item0 = screen.getByTestId('toggle-item-0');
+    const item1 = screen.getByTestId('toggle-item-1');
+
+    await user.tab();
+    expect(item0).toHaveFocus();
+
+    await user.keyboard('[ArrowRight]');
+    expect(item1).toHaveFocus();
+  });
+
+  it('accepts and applies extra className', () => {
+    renderToggleGroup({ type: 'single', className: 'custom-class' });
+
+    const group = screen.getByTestId('toggle-group');
+    expect(group.className).toContain('custom-class');
+  });
+
+  it('should match snapshot', () => {
+    const { container } = renderToggleGroup({ type: 'single' });
+    expect(container).toMatchSnapshot();
+  });
+});