@brcarddev/frontend-commons 1.0.2

package/src/components/molecules/Breadcrumb/breadcrumb.test.tsx

@@ -0,0 +1,118 @@
+import { render, screen } from '@testing-library/react';
+import { describe, it, expect } from 'vitest';
+
+import {
+  Breadcrumb,
+  BreadcrumbList,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+  BreadcrumbEllipsis,
+} from './breadcrumb';
+import '@testing-library/jest-dom';
+
+describe('<Breadcrumb />', () => {
+  it('renders the Breadcrumb nav with appropriate aria attributes', () => {
+    render(<Breadcrumb />);
+    const nav = screen.getByTestId('breadcrumb-nav');
+    expect(nav).toBeInTheDocument();
+    expect(nav).toHaveAttribute('aria-label', 'breadcrumb');
+    expect(nav).toHaveAttribute('data-slot', 'breadcrumb');
+  });
+
+  it('renders the list with expected structure and class', () => {
+    render(<BreadcrumbList />);
+    const list = screen.getByTestId('breadcrumb-list');
+    expect(list.tagName).toBe('OL');
+    expect(list).toHaveClass('flex', 'items-center');
+    expect(list).toHaveAttribute('data-slot', 'breadcrumb-list');
+  });
+
+  it('renders an item inside the breadcrumb', () => {
+    render(
+      <BreadcrumbList>
+        <BreadcrumbItem>Home</BreadcrumbItem>
+      </BreadcrumbList>
+    );
+    const item = screen.getByTestId('breadcrumb-item');
+    expect(item).toBeInTheDocument();
+    expect(item.tagName).toBe('LI');
+    expect(item).toHaveTextContent('Home');
+    expect(item).toHaveAttribute('data-slot', 'breadcrumb-item');
+  });
+
+  it('renders a breadcrumb link', () => {
+    render(
+      <BreadcrumbList>
+        <BreadcrumbItem>
+          <BreadcrumbLink href="/home">Home</BreadcrumbLink>
+        </BreadcrumbItem>
+      </BreadcrumbList>
+    );
+    const link = screen.getByTestId('breadcrumb-link');
+    expect(link).toBeInTheDocument();
+    expect(link).toHaveAttribute('href', '/home');
+    expect(link).toHaveTextContent('Home');
+    expect(link).toHaveAttribute('data-slot', 'breadcrumb-link');
+  });
+
+  it('renders the current page with proper accessibility attributes', () => {
+    render(
+      <BreadcrumbList>
+        <BreadcrumbPage>Dashboard</BreadcrumbPage>
+      </BreadcrumbList>
+    );
+    const page = screen.getByTestId('breadcrumb-page');
+    expect(page).toBeInTheDocument();
+    expect(page).toHaveAttribute('aria-current', 'page');
+    expect(page).toHaveAttribute('aria-disabled', 'true');
+    expect(page).toHaveAttribute('role', 'link');
+    expect(page).toHaveTextContent('Dashboard');
+    expect(page).toHaveAttribute('data-slot', 'breadcrumb-page');
+  });
+
+  it('renders a separator with icon by default', () => {
+    render(
+      <BreadcrumbList>
+        <BreadcrumbSeparator />
+      </BreadcrumbList>
+    );
+    const separator = screen.getByTestId('breadcrumb-separator');
+    expect(separator).toBeInTheDocument();
+    expect(separator).toHaveAttribute('role', 'presentation');
+    expect(separator).toHaveAttribute('aria-hidden', 'true');
+    expect(separator).toContainHTML('svg');
+    expect(separator).toHaveAttribute('data-slot', 'breadcrumb-separator');
+  });
+
+  it('renders a custom separator when provided', () => {
+    render(
+      <BreadcrumbList>
+        <BreadcrumbSeparator data-testid="custom-separator">/</BreadcrumbSeparator>
+      </BreadcrumbList>
+    );
+    const separator = screen.getByTestId('custom-separator');
+    expect(separator).toHaveTextContent('/');
+  });
+
+  it('renders ellipsis with hidden accessible text', () => {
+    render(
+      <BreadcrumbList>
+        <BreadcrumbEllipsis />
+      </BreadcrumbList>
+    );
+    const ellipsis = screen.getByTestId('breadcrumb-ellipsis');
+    expect(ellipsis).toBeInTheDocument();
+    expect(ellipsis).toContainHTML('svg');
+    expect(ellipsis).toHaveAttribute('role', 'presentation');
+    expect(ellipsis).toHaveAttribute('aria-hidden', 'true');
+    const srText = screen.getByText('More');
+    expect(srText).toHaveClass('sr-only');
+  });
+
+  it('should match snapshot', () => {
+    const { container } = render(<Breadcrumb />);
+    expect(container).toMatchSnapshot();
+  });
+});

package/src/components/molecules/Breadcrumb/breadcrumb.tsx

@@ -0,0 +1,120 @@
+import * as React from 'react';
+
+import { Slot } from '@radix-ui/react-slot';
+import { ChevronRight, MoreHorizontal } from 'lucide-react';
+
+import { cn } from '@/utils';
+
+function Breadcrumb ({ ...props }: React.ComponentProps<'nav'>) {
+  return (
+    <nav
+      aria-label="breadcrumb"
+      data-slot="breadcrumb"
+      data-testid="breadcrumb-nav"
+      {...props}
+    />
+  );
+}
+
+function BreadcrumbList ({ className, ...props }: React.ComponentProps<'ol'>) {
+  return (
+    <ol
+      data-slot="breadcrumb-list"
+      data-testid="breadcrumb-list"
+      className={cn(
+        'text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function BreadcrumbItem ({ className, ...props }: React.ComponentProps<'li'>) {
+  return (
+    <li
+      data-slot="breadcrumb-item"
+      data-testid="breadcrumb-item"
+      className={cn('inline-flex items-center gap-1.5', className)}
+      {...props}
+    />
+  );
+}
+
+function BreadcrumbLink ({
+  asChild,
+  className,
+  ...props
+}: React.ComponentProps<'a'> & {
+  asChild?: boolean;
+}) {
+  const Comp = asChild ? Slot : 'a';
+
+  return (
+    <Comp
+      data-slot="breadcrumb-link"
+      data-testid="breadcrumb-link"
+      className={cn('hover:text-foreground transition-colors', className)}
+      {...props}
+    />
+  );
+}
+
+function BreadcrumbPage ({ className, ...props }: React.ComponentProps<'span'>) {
+  return (
+    <span
+      data-slot="breadcrumb-page"
+      data-testid="breadcrumb-page"
+      role="link"
+      aria-disabled="true"
+      aria-current="page"
+      className={cn('text-foreground font-normal', className)}
+      {...props}
+    />
+  );
+}
+
+function BreadcrumbSeparator ({
+  children,
+  className,
+  ...props
+}: React.ComponentProps<'li'>) {
+  return (
+    <li
+      data-slot="breadcrumb-separator"
+      data-testid="breadcrumb-separator"
+      role="presentation"
+      aria-hidden="true"
+      className={cn('[&>svg]:size-3.5', className)}
+      {...props}
+    >
+      {children ?? <ChevronRight />}
+    </li>
+  );
+}
+
+function BreadcrumbEllipsis ({ className, ...props }: React.ComponentProps<'span'>) {
+  return (
+    <span
+      data-slot="breadcrumb-ellipsis"
+      data-testid="breadcrumb-ellipsis"
+      role="presentation"
+      aria-hidden="true"
+      className={cn('flex size-9 items-center justify-center', className)}
+      {...props}
+    >
+      <MoreHorizontal className="size-4" />
+      <span className="sr-only">More</span>
+    </span>
+  );
+}
+
+export {
+  Breadcrumb,
+  BreadcrumbEllipsis,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+};

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

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

package/src/components/molecules/Card/card.stories.tsx

@@ -0,0 +1,109 @@
+import {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  CardContent,
+  CardFooter,
+  CardAction,
+} from './card';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+const meta: Meta<typeof Card> = {
+  title: 'Components/Layout/Card',
+  component: Card,
+  tags: [ 'autodocs' ],
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component:
+          'A versatile card component with support for header, content, actions, and footer. Ideal for presenting grouped content with a clear visual structure.',
+      },
+    },
+  },
+  argTypes: {
+    className: {
+      control: 'text',
+      description: 'Additional CSS class for customizing the card style',
+    },
+    children: {
+      control: false,
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Card>;
+
+export const Default: Story = {
+  args: {
+    children: (
+      <>
+        <CardHeader>
+          <CardTitle>Default Card</CardTitle>
+          <CardDescription>This is a card with a title and description.</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <p>Main card content. Can include text, inputs, images, and more.</p>
+        </CardContent>
+        <CardFooter>
+          <button className="btn-primary">Action</button>
+        </CardFooter>
+      </>
+    ),
+  },
+};
+
+export const SomeContent: Story = {
+  args: {
+    children: (
+      <CardContent>
+        <p>A simple card with content.</p>
+      </CardContent>
+    ),
+  },
+};
+
+export const WithActions: Story = {
+  args: {
+    children: (
+      <>
+        <CardHeader>
+          <CardTitle>Card with Actions</CardTitle>
+          <CardDescription>
+            This card presents action buttons in the header.
+          </CardDescription>
+          <CardAction>
+            <button className="btn-secondary">Edit</button>
+          </CardAction>
+        </CardHeader>
+        <CardContent>
+          <p>This content can be updated or modified.</p>
+        </CardContent>
+        <CardFooter>
+          <button className="btn-primary">Save</button>
+          <button className="btn-outline ml-2">Cancel</button>
+        </CardFooter>
+      </>
+    ),
+  },
+};
+
+export const WithCustomClasses: Story = {
+  args: {
+    className: 'bg-blue-50 border-blue-200',
+    children: (
+      <>
+        <CardHeader>
+          <CardTitle>Custom Layout</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <p>This card has custom colors via className.</p>
+        </CardContent>
+      </>
+    ),
+  },
+};

package/src/components/molecules/Card/card.test.tsx

@@ -0,0 +1,103 @@
+import { render, screen } from '@testing-library/react';
+import { describe, it, expect } from 'vitest';
+
+import {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  CardAction,
+  CardContent,
+  CardFooter,
+} from './card';
+import '@testing-library/jest-dom';
+
+describe('<Card />', () => {
+  it('renders the Card root element with correct styles and attributes', () => {
+    render(<Card>Test Content</Card>);
+    const card = screen.getByTestId('card');
+    expect(card).toBeInTheDocument();
+    expect(card).toHaveAttribute('data-slot', 'card');
+    expect(card).toHaveTextContent('Test Content');
+    expect(card).toHaveClass('rounded-xl', 'shadow-sm', 'bg-card');
+  });
+
+  it('renders the CardHeader with proper slot and layout class', () => {
+    render(<CardHeader>Header</CardHeader>);
+    const header = screen.getByTestId('card-header');
+    expect(header).toBeInTheDocument();
+    expect(header).toHaveAttribute('data-slot', 'card-header');
+    expect(header).toHaveTextContent('Header');
+    expect(header.className).toMatch(/grid/);
+  });
+
+  it('renders the CardTitle with semantic emphasis', () => {
+    render(<CardTitle>Title</CardTitle>);
+    const title = screen.getByTestId('card-title');
+    expect(title).toBeInTheDocument();
+    expect(title).toHaveAttribute('data-slot', 'card-title');
+    expect(title).toHaveTextContent('Title');
+    expect(title).toHaveClass('font-semibold');
+  });
+
+  it('renders the CardDescription with muted text', () => {
+    render(<CardDescription>Description</CardDescription>);
+    const description = screen.getByTestId('card-description');
+    expect(description).toBeInTheDocument();
+    expect(description).toHaveAttribute('data-slot', 'card-description');
+    expect(description).toHaveTextContent('Description');
+    expect(description).toHaveClass('text-muted-foreground');
+  });
+
+  it('renders the CardAction in the correct layout position', () => {
+    render(<CardAction>Action</CardAction>);
+    const action = screen.getByTestId('card-action');
+    expect(action).toBeInTheDocument();
+    expect(action).toHaveAttribute('data-slot', 'card-action');
+    expect(action).toHaveTextContent('Action');
+    expect(action.className).toMatch(/col-start-2/);
+  });
+
+  it('renders the CardContent with proper padding', () => {
+    render(<CardContent>Main Content</CardContent>);
+    const content = screen.getByTestId('card-content');
+    expect(content).toBeInTheDocument();
+    expect(content).toHaveAttribute('data-slot', 'card-content');
+    expect(content).toHaveTextContent('Main Content');
+    expect(content).toHaveClass('px-6');
+  });
+
+  it('renders the CardFooter with alignment and padding', () => {
+    render(<CardFooter>Footer</CardFooter>);
+    const footer = screen.getByTestId('card-footer');
+    expect(footer).toBeInTheDocument();
+    expect(footer).toHaveAttribute('data-slot', 'card-footer');
+    expect(footer).toHaveTextContent('Footer');
+    expect(footer).toHaveClass('items-center');
+  });
+
+  it('renders full card layout with children components', () => {
+    render(
+      <Card>
+        <CardHeader>
+          <CardTitle>Title</CardTitle>
+          <CardDescription>Description</CardDescription>
+          <CardAction>Action</CardAction>
+        </CardHeader>
+        <CardContent>Main content</CardContent>
+        <CardFooter>Footer content</CardFooter>
+      </Card>
+    );
+
+    expect(screen.getByText('Title')).toBeInTheDocument();
+    expect(screen.getByText('Description')).toBeInTheDocument();
+    expect(screen.getByText('Action')).toBeInTheDocument();
+    expect(screen.getByText('Main content')).toBeInTheDocument();
+    expect(screen.getByText('Footer content')).toBeInTheDocument();
+  });
+
+  it('should match snapshot', () => {
+    const { container } = render(<Card />);
+    expect(container).toMatchSnapshot();
+  });
+});

package/src/components/molecules/Card/card.tsx

@@ -0,0 +1,78 @@
+import * as React from 'react';
+
+import { cn } from '@/utils';
+
+function Card({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="card"
+      data-testid="card"
+      className={cn('bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm', className)}
+      {...props}
+    />
+  );
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="card-header"
+      data-testid="card-header"
+      className={cn(
+        '@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="card-title"
+      data-testid="card-title"
+      className={cn('leading-none font-semibold', className)}
+      {...props}
+    />
+  );
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="card-description"
+      data-testid="card-description"
+      className={cn('text-muted-foreground text-sm', className)}
+      {...props}
+    />
+  );
+}
+
+function CardAction({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="card-action"
+      data-testid="card-action"
+      className={cn('col-start-2 row-span-2 row-start-1 self-start justify-self-end', className)}
+      {...props}
+    />
+  );
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<'div'>) {
+  return <div data-slot="card-content" data-testid="card-content" className={cn('px-6', className)} {...props} />;
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="card-footer"
+      data-testid="card-footer"
+      className={cn('flex items-center px-6 [.border-t]:pt-6', className)}
+      {...props}
+    />
+  );
+}
+
+export { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle };

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

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

package/src/components/molecules/Collapsible/collapsible.stories.tsx

@@ -0,0 +1,28 @@
+import { Collapsible, CollapsibleTrigger, CollapsibleContent } from './collapsible';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+const meta: Meta<typeof Collapsible> = {
+  title: 'Components/Data Display/Collapsible',
+  component: Collapsible,
+  tags: [ 'autodocs' ],
+  parameters: {
+    docs: {
+      description: {
+        component: 'Accessible and styled accordion component to show/hide content. Can contain one or more expandable items.',
+      },
+    },
+  },
+};
+export default meta;
+
+type Story = StoryObj<typeof Collapsible>;
+
+export const Default: Story = {
+  render: () => (
+    <Collapsible>
+      <CollapsibleTrigger>Open</CollapsibleTrigger>
+      <CollapsibleContent>This is the content</CollapsibleContent>
+    </Collapsible>
+  ),
+};

package/src/components/molecules/Collapsible/collapsible.test.tsx

@@ -0,0 +1,36 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, expect, it } from 'vitest';
+
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from './collapsible';
+
+describe('<Collapsible />', () => {
+  const renderCollapsible = () =>
+    render(
+      <Collapsible>
+        <CollapsibleTrigger>Toggle</CollapsibleTrigger>
+        <CollapsibleContent>Content</CollapsibleContent>
+      </Collapsible>
+    );
+
+  it('should not show content initially', () => {
+    renderCollapsible();
+    expect(screen.queryByText('Content')).toBeNull();
+  });
+
+  it('should toggle content visibility', async () => {
+    renderCollapsible();
+    expect(screen.queryByText('Content')).toBeNull();
+    await userEvent.click(screen.getByText('Toggle'));
+    expect(screen.getByText('Content')).toBeVisible();
+  });
+
+  it('matches snapshot', () => {
+    const { container } = renderCollapsible();
+    expect(container).toMatchSnapshot();
+  });
+});

package/src/components/molecules/Collapsible/collapsible.tsx

@@ -0,0 +1,31 @@
+import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
+
+function Collapsible({
+  ...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.Root>) {
+  return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />;
+}
+
+function CollapsibleTrigger({
+  ...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>) {
+  return (
+    <CollapsiblePrimitive.CollapsibleTrigger
+      data-slot="collapsible-trigger"
+      {...props}
+    />
+  );
+}
+
+function CollapsibleContent({
+  ...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>) {
+  return (
+    <CollapsiblePrimitive.CollapsibleContent
+      data-slot="collapsible-content"
+      {...props}
+    />
+  );
+}
+
+export { Collapsible, CollapsibleContent, CollapsibleTrigger };

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

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

package/src/components/molecules/ColorPicker/color-picker.stories.tsx

@@ -0,0 +1,40 @@
+import { useState } from 'react';
+
+import { ColorPicker } from './color-picker';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+const meta: Meta<typeof ColorPicker> = {
+  title: 'Components/Data Entry/ColorPicker',
+  component: ColorPicker,
+  tags: [ 'autodocs' ],
+  parameters: {
+    docs: {
+      description: {
+        component: 'Campo de seleção de cor com input hexadecimal e botão para abrir o seletor visual.',
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof ColorPicker>;
+
+const ColorPickerStoryDemo = () => {
+  const [ color, setColor ] = useState('#D92D20');
+
+  return (
+    <div className="max-w-sm">
+      <ColorPicker
+        label="Cor principal"
+        helperText="Formato: Hexadecimal (Ex: #D92D20)"
+        value={color}
+        onChange={setColor}
+      />
+    </div>
+  );
+};
+
+export const Default: Story = {
+  render: () => <ColorPickerStoryDemo />,
+};