@brcarddev/frontend-commons 1.0.2

package/src/components/molecules/Select/select.tsx

@@ -0,0 +1,172 @@
+import * as React from 'react';
+
+import * as SelectPrimitive from '@radix-ui/react-select';
+import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from 'lucide-react';
+
+import { cn } from '@/utils';
+
+function Select ({ ...props }: React.ComponentProps<typeof SelectPrimitive.Root>) {
+  return <SelectPrimitive.Root data-slot="select" {...props} />;
+}
+
+function SelectGroup ({ ...props }: React.ComponentProps<typeof SelectPrimitive.Group>) {
+  return <SelectPrimitive.Group data-slot="select-group" {...props} />;
+}
+
+function SelectValue ({ ...props }: React.ComponentProps<typeof SelectPrimitive.Value>) {
+  return <SelectPrimitive.Value data-slot="select-value" {...props} />;
+}
+
+function SelectTrigger ({
+  className,
+  size = 'md',
+  children,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
+  size?: 'sm' | 'md' | 'lg';
+}) {
+  return (
+    <SelectPrimitive.Trigger
+      data-slot="select-trigger"
+      data-size={size}
+      className={cn(
+        'border-gray-200 bg-white cursor-pointer data-[placeholder]:text-muted-foreground [&_svg:not([class*=\'text-\'])]:text-muted-foreground focus-visible-primary aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive flex w-fit items-center justify-between gap-2 rounded-md border px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none disabled:cursor-not-allowed disabled:opacity-50 data-[size=md]:h-9 data-[size=sm]:h-8 data-[size=lg]:h-10 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <SelectPrimitive.Icon asChild>
+        <ChevronDownIcon className="size-4 opacity-50" />
+      </SelectPrimitive.Icon>
+    </SelectPrimitive.Trigger>
+  );
+}
+
+function SelectContent ({
+  className,
+  children,
+  position = 'popper',
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Content>) {
+  return (
+    <SelectPrimitive.Portal>
+      <SelectPrimitive.Content
+        data-slot="select-content"
+        className={cn(
+          'bg-popover text-popover-foreground 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-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md',
+          position === 'popper' &&
+            'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
+          className
+        )}
+        position={position}
+        {...props}
+      >
+        <SelectScrollUpButton />
+        <SelectPrimitive.Viewport
+          className={cn(
+            'p-1',
+            position === 'popper' &&
+              'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1'
+          )}
+        >
+          {children}
+        </SelectPrimitive.Viewport>
+        <SelectScrollDownButton />
+      </SelectPrimitive.Content>
+    </SelectPrimitive.Portal>
+  );
+}
+
+function SelectLabel ({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Label>) {
+  return (
+    <SelectPrimitive.Label
+      data-slot="select-label"
+      className={cn('text-muted-foreground px-2 py-1.5 text-xs', className)}
+      {...props}
+    />
+  );
+}
+
+function SelectItem ({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Item>) {
+  return (
+    <SelectPrimitive.Item
+      data-slot="select-item"
+      className={cn(
+        'focus:bg-accent focus:text-accent-foreground cursor-pointer [&_svg:not([class*=\'text-\'])]:text-muted-foreground relative flex w-full items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2',
+        className
+      )}
+      {...props}
+    >
+      <span className="absolute right-2 flex size-3.5 items-center justify-center">
+        <SelectPrimitive.ItemIndicator>
+          <CheckIcon className="size-4" />
+        </SelectPrimitive.ItemIndicator>
+      </span>
+      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+    </SelectPrimitive.Item>
+  );
+}
+
+function SelectSeparator ({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Separator>) {
+  return (
+    <SelectPrimitive.Separator
+      data-slot="select-separator"
+      className={cn('bg-border pointer-events-none -mx-1 my-1 h-px', className)}
+      {...props}
+    />
+  );
+}
+
+function SelectScrollUpButton ({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
+  return (
+    <SelectPrimitive.ScrollUpButton
+      data-slot="select-scroll-up-button"
+      className={cn('flex cursor-default items-center justify-center py-1', className)}
+      {...props}
+    >
+      <ChevronUpIcon className="size-4" />
+    </SelectPrimitive.ScrollUpButton>
+  );
+}
+
+function SelectScrollDownButton ({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
+  return (
+    <SelectPrimitive.ScrollDownButton
+      data-slot="select-scroll-down-button"
+      className={cn('flex cursor-default items-center justify-center py-1', className)}
+      {...props}
+    >
+      <ChevronDownIcon className="size-4" />
+    </SelectPrimitive.ScrollDownButton>
+  );
+}
+
+export {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+};

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

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

package/src/components/molecules/Sheet/sheet.stories.tsx

@@ -0,0 +1,141 @@
+import {
+  Sheet,
+  SheetTrigger,
+  SheetContent,
+  SheetHeader,
+  SheetFooter,
+  SheetTitle,
+  SheetDescription,
+} from './sheet';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Button } from '@/components';
+
+const meta: Meta = {
+  title: 'Components/Feedback/Sheet',
+  component: Sheet,
+  tags: [ 'autodocs' ],
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: `
+The Sheet component is used to display a side panel (or sliding modal) that appears from one of the edges of the screen.
+
+It is ideal for displaying supplementary content such as forms, filters, secondary navigation, or details of a selected item.
+
+Internally, the Sheet is built on \`@radix-ui/react-dialog\`, ensuring accessibility, managed focus, and smooth animations.
+        `,
+      },
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Sheet>;
+
+export const Default: Story = {
+  name: 'Default',
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Basic example of a side panel with title, description, and action footer.',
+      },
+    },
+  },
+  render: () => (
+    <Sheet>
+      <SheetTrigger asChild>
+        <Button>Open panel</Button>
+      </SheetTrigger>
+      <SheetContent side="right">
+        <SheetHeader>
+          <SheetTitle>Settings</SheetTitle>
+          <SheetDescription>
+            Make changes to your account preferences here. Click save when you're done.
+          </SheetDescription>
+        </SheetHeader>
+        <div className="p-4 space-y-4 text-sm">
+          <p>
+            This space can be filled with forms, options, or any other relevant content.
+          </p>
+          <p>The keyboard focus is automatically managed for accessibility.</p>
+        </div>
+        <SheetFooter>
+          <Button variant="outline">Cancel</Button>
+          <Button>Save</Button>
+        </SheetFooter>
+      </SheetContent>
+    </Sheet>
+  ),
+};
+
+export const Sides: Story = {
+  name: 'Sides',
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Demonstrates how the Sheet can be anchored to any of the four directions of the screen.',
+      },
+    },
+  },
+  render: () => (
+    <div className="flex flex-wrap gap-4">
+      {([ 'top', 'right', 'bottom', 'left' ] as const).map(side => (
+        <Sheet key={side}>
+          <SheetTrigger asChild>
+            <Button>Open from {side}</Button>
+          </SheetTrigger>
+          <SheetContent side={side}>
+            <SheetHeader>
+              <SheetTitle>{`Panel from the ${side} side`}</SheetTitle>
+              <SheetDescription>
+                This panel slides from the <strong>{side}</strong> edge of the screen.
+              </SheetDescription>
+            </SheetHeader>
+            <div className="p-4 text-sm">Demonstrative content for the {side} side.</div>
+          </SheetContent>
+        </Sheet>
+      ))}
+    </div>
+  ),
+};
+
+export const WithLongContent: Story = {
+  name: 'With long content',
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Simulates a usage with many internal elements, allowing observation of the behavior with vertical scrolling.',
+      },
+    },
+  },
+  render: () => (
+    <Sheet>
+      <SheetTrigger asChild>
+        <Button>Open long panel</Button>
+      </SheetTrigger>
+      <SheetContent side="left">
+        <SheetHeader>
+          <SheetTitle>Panel with scrolling</SheetTitle>
+          <SheetDescription>
+            Enough content to activate vertical scrolling.
+          </SheetDescription>
+        </SheetHeader>
+        <div className="p-4 space-y-4 overflow-y-auto max-h-[80vh]">
+          {Array.from({ length: 25 }, (_, i) => (
+            <p key={i}>Line of content #{i + 1}</p>
+          ))}
+        </div>
+        <SheetFooter>
+          <Button variant="outline">Close</Button>
+        </SheetFooter>
+      </SheetContent>
+    </Sheet>
+  ),
+};

package/src/components/molecules/Sheet/sheet.test.tsx

@@ -0,0 +1,70 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, expect, it } from 'vitest';
+
+import { Sheet, SheetContent, SheetDescription, SheetTitle, SheetTrigger } from './sheet';
+
+function renderSheet() {
+  render(
+    <Sheet>
+      <SheetTrigger>Open Sheet</SheetTrigger>
+      <SheetContent>
+        <SheetTitle>Sheet Title</SheetTitle>
+        <SheetDescription>This is a description</SheetDescription>
+        <div>Sheet body content</div>
+      </SheetContent>
+    </Sheet>
+  );
+}
+
+describe('<Sheet />', () => {
+  const user = userEvent.setup();
+
+  it('renders the trigger button', () => {
+    renderSheet();
+    expect(screen.getByText(/open sheet/i)).toBeInTheDocument();
+  });
+
+  it('does not render the content initially', () => {
+    renderSheet();
+    expect(screen.queryByText(/sheet title/i)).not.toBeInTheDocument();
+  });
+
+  it('opens the sheet when the trigger is clicked', async () => {
+    renderSheet();
+
+    await user.click(screen.getByText(/open sheet/i));
+
+    expect(screen.getByText(/sheet title/i)).toBeInTheDocument();
+    expect(screen.getByText(/this is a description/i)).toBeInTheDocument();
+    expect(screen.getByText(/sheet body content/i)).toBeInTheDocument();
+  });
+
+  it('closes the sheet when the close button is clicked', async () => {
+    renderSheet();
+
+    await user.click(screen.getByText(/open sheet/i));
+
+    const closeButton = await screen.findByRole('button', { name: /close/i });
+    await user.click(closeButton);
+
+    expect(screen.queryByText(/sheet title/i)).not.toBeInTheDocument();
+  });
+
+  it('closes when clicking outside if overlay exists', async () => {
+    renderSheet();
+
+    await user.click(screen.getByText(/open sheet/i));
+
+    const overlay = await screen.findByTestId('sheet-overlay');
+
+    await user.click(overlay);
+
+    expect(screen.queryByText(/sheet title/i)).not.toBeInTheDocument();
+  });
+
+  it('should match snapshot', () => {
+    const { container } = render(<Sheet />);
+    expect(container).toMatchSnapshot();
+  });
+});

package/src/components/molecules/Sheet/sheet.tsx

@@ -0,0 +1,133 @@
+import * as React from 'react';
+
+import * as SheetPrimitive from '@radix-ui/react-dialog';
+import { XIcon } from 'lucide-react';
+
+import { cn } from '@/utils';
+
+function Sheet ({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {
+  return <SheetPrimitive.Root data-slot="sheet" {...props} />;
+}
+
+function SheetTrigger ({ ...props }: React.ComponentProps<typeof SheetPrimitive.Trigger>) {
+  return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />;
+}
+
+function SheetClose ({ ...props }: React.ComponentProps<typeof SheetPrimitive.Close>) {
+  return <SheetPrimitive.Close data-slot="sheet-close" {...props} />;
+}
+
+function SheetPortal ({ ...props }: React.ComponentProps<typeof SheetPrimitive.Portal>) {
+  return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />;
+}
+
+function SheetOverlay ({
+  className,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Overlay>) {
+  return (
+    <SheetPrimitive.Overlay
+      data-slot="sheet-overlay"
+      data-testid="sheet-overlay"
+      className={cn(
+        'backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-overlay',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function SheetContent ({
+  className,
+  children,
+  side = 'right',
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Content> & {
+  side?: 'top' | 'right' | 'bottom' | 'left';
+}) {
+  return (
+    <SheetPortal>
+      <SheetOverlay />
+      <SheetPrimitive.Content
+        data-slot="sheet-content"
+        className={cn(
+          'bg-blur data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-modal transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500',
+          side === 'right' &&
+            'data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 sm:max-w-sm',
+          side === 'left' &&
+            'data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 sm:max-w-sm',
+          side === 'top' &&
+            'data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto',
+          side === 'bottom' &&
+            'data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto',
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <SheetPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none">
+          <XIcon className="size-4" />
+          <span className="sr-only">Close</span>
+        </SheetPrimitive.Close>
+      </SheetPrimitive.Content>
+    </SheetPortal>
+  );
+}
+
+function SheetHeader ({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="sheet-header"
+      className={cn('flex flex-col gap-1.5 p-4 bg-white', className)}
+      {...props}
+    />
+  );
+}
+
+function SheetFooter ({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="sheet-footer"
+      className={cn('mt-auto flex flex-col gap-2 p-4 bg-white', className)}
+      {...props}
+    />
+  );
+}
+
+function SheetTitle ({
+  className,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Title>) {
+  return (
+    <SheetPrimitive.Title
+      data-slot="sheet-title"
+      className={cn('text-foreground font-semibold', className)}
+      {...props}
+    />
+  );
+}
+
+function SheetDescription ({
+  className,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Description>) {
+  return (
+    <SheetPrimitive.Description
+      data-slot="sheet-description"
+      className={cn('text-muted-foreground text-sm', className)}
+      {...props}
+    />
+  );
+}
+
+export {
+  Sheet,
+  SheetClose,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+};

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

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