@brcarddev/frontend-commons 1.0.2

package/src/components/molecules/Alert/alert.tsx

@@ -0,0 +1,67 @@
+import * as React from 'react';
+
+import { cva, type VariantProps } from 'class-variance-authority';
+
+import { cn } from '@/utils/index';
+
+const alertVariants = cva(
+  'relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current',
+  {
+    variants: {
+      variant: {
+        default: 'bg-card text-card-foreground',
+        destructive:
+          'text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  }
+);
+
+function Alert({
+  className,
+  variant,
+  ...props
+}: React.ComponentProps<'div'> & VariantProps<typeof alertVariants>) {
+  return (
+    <div
+      data-slot="alert"
+      role="alert"
+      className={cn(alertVariants({ variant }), className)}
+      {...props}
+    />
+  );
+}
+
+function AlertTitle({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="alert-title"
+      className={cn(
+        'col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function AlertDescription({
+  className,
+  ...props
+}: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="alert-description"
+      className={cn(
+        'text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Alert, AlertDescription, AlertTitle };

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

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

package/src/components/molecules/AlertDialog/alert-dialog.stories.tsx

@@ -0,0 +1,55 @@
+import {
+  AlertDialog,
+  AlertDialogTrigger,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogCancel,
+  AlertDialogAction,
+} from './alert-dialog';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Button } from '@/components';
+
+const meta: Meta = {
+  title: 'Components/Data Display/AlertDialog',
+  component: AlertDialog,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'A modal dialog that interrupts the user with important content and expects a response.',
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj
+
+export const Default: Story = {
+  render: () => (
+    <AlertDialog>
+      <AlertDialogTrigger asChild>
+        <Button>
+          Open Alert
+        </Button>
+      </AlertDialogTrigger>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
+          <AlertDialogDescription>
+            This action cannot be undone. This will permanently delete your data.
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel>Cancel</AlertDialogCancel>
+          <AlertDialogAction>Continue</AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  ),
+};

package/src/components/molecules/AlertDialog/alert-dialog.test.tsx

@@ -0,0 +1,34 @@
+import { composeStories } from '@storybook/react';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+
+import * as stories from './alert-dialog.stories';
+
+const { Default } = composeStories(stories);
+
+describe('<AlertDialog />', () => {
+  const renderAlertDialog = () => render(<Default />);
+
+  it('opens and displays content when triggered', async () => {
+    renderAlertDialog();
+
+    expect(screen.queryByText('Are you absolutely sure?')).not.toBeInTheDocument();
+
+    fireEvent.click(screen.getByText('Open Alert'));
+
+    await waitFor(() => {
+      expect(screen.getByText('Are you absolutely sure?')).toBeInTheDocument();
+      expect(
+        screen.getByText('This action cannot be undone. This will permanently delete your data.')
+      ).toBeInTheDocument();
+    });
+
+    expect(screen.getByText('Cancel')).toBeInTheDocument();
+    expect(screen.getByText('Continue')).toBeInTheDocument();
+  });
+
+  it('matches snapshot', () => {
+    const { container } = renderAlertDialog();
+    expect(container).toMatchSnapshot();
+  });
+});

package/src/components/molecules/AlertDialog/alert-dialog.tsx

@@ -0,0 +1,172 @@
+import * as React from 'react';
+
+import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
+
+import { buttonVariants } from '@/components/atoms/Button';
+
+import { cn } from '@/utils';
+
+const AlertDialog = ({ children, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Root>) => (
+  <AlertDialogPrimitive.Root {...props}>
+    {children}
+  </AlertDialogPrimitive.Root>
+);
+AlertDialog.displayName = AlertDialogPrimitive.Root.displayName;
+
+const AlertDialogPortal = ({ children, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) => (
+  <AlertDialogPrimitive.Portal {...props}>
+    {children}
+  </AlertDialogPrimitive.Portal>
+);
+AlertDialogPortal.displayName = AlertDialogPrimitive.Portal.displayName;
+
+const AlertDialogTrigger = ({ children, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) => (
+  <AlertDialogPrimitive.Trigger {...props}>
+    {children}
+  </AlertDialogPrimitive.Trigger>
+);
+AlertDialogTrigger.displayName = AlertDialogPrimitive.Trigger.displayName;
+
+const AlertDialogOverlay = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Overlay
+    className={cn(
+      'backdrop-blur-sm fixed inset-0 z-50 bg-overlay data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+      className
+    )}
+    {...props}
+    ref={ref}
+  />
+));
+AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
+
+const AlertDialogContent = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPortal>
+    <AlertDialogOverlay />
+    <AlertDialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        'bg-blur fixed left-[50%] top-[50%] z-50 grid w-full max-w-[400px] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-2xl shadow-modal duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]',
+        className
+      )}
+      {...props}
+    />
+  </AlertDialogPortal>
+));
+AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;
+
+const AlertDialogHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      'flex flex-col space-y-2 text-center sm:text-left bg-white p-6 rounded-t-2xl',
+      className
+    )}
+    {...props}
+  />
+);
+AlertDialogHeader.displayName = 'AlertDialogHeader';
+
+const AlertDialogFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2 bg-white p-6 rounded-b-2xl',
+      className
+    )}
+    {...props}
+  />
+);
+AlertDialogFooter.displayName = 'AlertDialogFooter';
+
+const AlertDialogTitle = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Title
+    ref={ref}
+    className={cn('text-lg font-semibold', className)}
+    {...props}
+  />
+));
+AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
+
+const AlertDialogDescription = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Description
+    ref={ref}
+    className={cn('text-sm text-muted-foreground', className)}
+    {...props}
+  />
+));
+AlertDialogDescription.displayName =
+  AlertDialogPrimitive.Description.displayName;
+
+const AlertDialogAction = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Action>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Action
+    ref={ref}
+    className={cn(buttonVariants(), className)}
+    {...props}
+  />
+));
+AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
+
+const AlertDialogCancel = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Cancel
+    ref={ref}
+    className={cn(
+      buttonVariants({ variant: 'outline' }),
+      'mt-2 sm:mt-0',
+      className
+    )}
+    {...props}
+  />
+));
+AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;
+
+const AlertDialogClose = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Cancel
+    ref={ref}
+    className={cn(
+      'absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground',
+      className
+    )}
+    {...props}
+  />
+));
+AlertDialogClose.displayName = AlertDialogPrimitive.Cancel.displayName;
+
+export {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogClose,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogOverlay,
+  AlertDialogPortal,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+};

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

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

package/src/components/molecules/Avatar/avatar.stories.tsx

@@ -0,0 +1,98 @@
+import { Avatar, AvatarImage, AvatarFallback } from './avatar';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+const meta: Meta<typeof Avatar> = {
+  title: 'Components/Data Display/Avatar',
+  component: Avatar,
+  tags: [ 'autodocs' ],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'Avatar component based on Radix UI. Supports image, fallback with initials, and responsive styles. Ideal for representing users in web applications.',
+      },
+    },
+  },
+  argTypes: {
+    className: {
+      control: false,
+      table: {
+        category: 'Style',
+        type: { summary: 'string' },
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Avatar>;
+
+export const CustomSizeAndStyle: Story = {
+  render: () => (
+    <Avatar className="size-16 border-2 border-primary">
+      <AvatarImage
+        src="https://api.dicebear.com/7.x/initials/svg?seed=Jane+Doe"
+        alt="Jane Doe"
+      />
+      <AvatarFallback className="text-lg font-bold">JD</AvatarFallback>
+    </Avatar>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Custom avatar with larger size and styled border.',
+      },
+    },
+  },
+};
+
+export const LoadingState: Story = {
+  render: () => (
+    <Avatar>
+      <AvatarImage src="" alt="Imagem inexistente" />
+      <AvatarFallback>...</AvatarFallback>
+    </Avatar>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Simulates the loading state or absence of image using a fallback with ellipses.',
+      },
+    },
+  },
+};
+
+export const WithFallbackOnly: Story = {
+  render: () => (
+    <Avatar>
+      <AvatarFallback>JD</AvatarFallback>
+    </Avatar>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders only the fallback with text, useful when there is no image available.',
+      },
+    },
+  },
+};
+
+export const WithImage: Story = {
+  render: () => (
+    <Avatar>
+      <AvatarImage src="https://github.com/vercel.png" alt="User avatar" />
+      <AvatarFallback>VC</AvatarFallback>
+    </Avatar>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Displays an avatar image with fallback in case of image loading failure.',
+      },
+    },
+  },
+};

package/src/components/molecules/Avatar/avatar.test.tsx

@@ -0,0 +1,55 @@
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+
+import { Avatar, AvatarImage, AvatarFallback } from './avatar';
+import '@testing-library/jest-dom';
+
+describe('<Avatar />', () => {
+  it('should render the Avatar root container with appropriate roles and class', () => {
+    render(<Avatar />);
+    const avatar = screen.getByTestId('avatar-root');
+    expect(avatar).toBeInTheDocument();
+    expect(avatar).toHaveAttribute('data-slot', 'avatar');
+    expect(avatar).toHaveClass('rounded-full');
+  });
+
+  it('should render AvatarFallback when image fails to load', () => {
+    render(
+      <Avatar>
+        <AvatarImage
+          src="invalid-url"
+          alt="Broken avatar"
+          onError={e => e.currentTarget.remove()}
+        />
+        <AvatarFallback>JD</AvatarFallback>
+      </Avatar>
+    );
+
+    const fallback = screen.getByTestId('avatar-fallback');
+    expect(fallback).toBeInTheDocument();
+    expect(fallback).toHaveTextContent('JD');
+    expect(fallback).toHaveAttribute('data-slot', 'avatar-fallback');
+    expect(fallback).toHaveClass('flex', 'items-center', 'justify-center');
+  });
+
+  it('should apply custom class names correctly', () => {
+    render(<Avatar className="custom-class" />);
+    const avatar = screen.getByTestId('avatar-root');
+    expect(avatar).toHaveClass('custom-class');
+  });
+
+  it('should render children inside Avatar', () => {
+    render(
+      <Avatar>
+        <span>Child Element</span>
+      </Avatar>
+    );
+    const child = screen.getByText('Child Element');
+    expect(child).toBeInTheDocument();
+  });
+
+  it('should match snapshot', () => {
+    const { container } = render(<Avatar />);
+    expect(container).toMatchSnapshot();
+  });
+});

package/src/components/molecules/Avatar/avatar.tsx

@@ -0,0 +1,55 @@
+import * as React from 'react';
+
+import * as AvatarPrimitive from '@radix-ui/react-avatar';
+
+import { cn } from '@/utils';
+
+function Avatar ({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Root>) {
+  return (
+    <AvatarPrimitive.Root
+      data-slot="avatar"
+      data-testid="avatar-root"
+      className={cn(
+        'relative flex size-8 shrink-0 overflow-hidden rounded-full',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function AvatarImage ({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Image>) {
+  return (
+    <AvatarPrimitive.Image
+      data-slot="avatar-image"
+      data-testid="avatar-image"
+      className={cn('aspect-square size-full', className)}
+      {...props}
+    />
+  );
+}
+
+function AvatarFallback ({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
+  return (
+    <AvatarPrimitive.Fallback
+      data-slot="avatar-fallback"
+      data-testid="avatar-fallback"
+      className={cn(
+        'bg-muted flex size-full items-center justify-center rounded-full',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Avatar, AvatarFallback, AvatarImage };

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

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

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

@@ -0,0 +1,125 @@
+import {
+  Breadcrumb,
+  BreadcrumbList,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+  BreadcrumbEllipsis,
+} from './breadcrumb';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Button } from '@/components';
+
+const meta: Meta<typeof Breadcrumb> = {
+  title: 'Components/Navigation/Breadcrumb',
+  component: Breadcrumb,
+  tags: [ 'autodocs' ],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'Breadcrumb navigation component accessible and highly customizable, based on semantic elements and Lucide React icons.',
+      },
+    },
+  },
+  argTypes: {
+    className: {
+      control: false,
+      table: {
+        category: 'Style',
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Breadcrumb>;
+
+export const Default: Story = {
+  render: () => (
+    <Breadcrumb>
+      <BreadcrumbList>
+        <BreadcrumbItem>
+          <BreadcrumbLink href="/">Home</BreadcrumbLink>
+        </BreadcrumbItem>
+        <BreadcrumbSeparator />
+        <BreadcrumbItem>
+          <BreadcrumbLink href="/docs">Docs</BreadcrumbLink>
+        </BreadcrumbItem>
+        <BreadcrumbSeparator />
+        <BreadcrumbItem>
+          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
+        </BreadcrumbItem>
+      </BreadcrumbList>
+    </Breadcrumb>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Default breadcrumb with separators and three-level navigation.',
+      },
+    },
+  },
+};
+
+export const WithCustomLink: Story = {
+  render: () => (
+    <Breadcrumb>
+      <BreadcrumbList>
+        <BreadcrumbItem>
+          <BreadcrumbLink asChild>
+            <Button variant="link" size="sm">
+              Início
+            </Button>
+          </BreadcrumbLink>
+        </BreadcrumbItem>
+        <BreadcrumbSeparator />
+        <BreadcrumbItem>
+          <BreadcrumbPage>Atual</BreadcrumbPage>
+        </BreadcrumbItem>
+      </BreadcrumbList>
+    </Breadcrumb>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Uses `asChild` to render a styled button as a navigation item.',
+      },
+    },
+  },
+};
+
+export const WithEllipsis: Story = {
+  render: () => (
+    <Breadcrumb>
+      <BreadcrumbList>
+        <BreadcrumbItem>
+          <BreadcrumbLink href="/">Home</BreadcrumbLink>
+        </BreadcrumbItem>
+        <BreadcrumbSeparator />
+        <BreadcrumbItem>
+          <BreadcrumbEllipsis />
+        </BreadcrumbItem>
+        <BreadcrumbSeparator />
+        <BreadcrumbItem>
+          <BreadcrumbLink href="/docs/components">Components</BreadcrumbLink>
+        </BreadcrumbItem>
+        <BreadcrumbSeparator />
+        <BreadcrumbItem>
+          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
+        </BreadcrumbItem>
+      </BreadcrumbList>
+    </Breadcrumb>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'When there are many levels of navigation, the `BreadcrumbEllipsis` can be used to indicate hidden paths.',
+      },
+    },
+  },
+};