@brcarddev/frontend-commons 1.0.2

package/src/components/molecules/RadioGroup/radio-group.tsx

@@ -0,0 +1,55 @@
+import * as React from 'react';
+
+import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
+import { CircleIcon } from 'lucide-react';
+
+import { cn } from '@/utils/index';
+
+function RadioGroup({
+  className,
+  ...props
+}: React.ComponentProps<typeof RadioGroupPrimitive.Root>) {
+  return (
+    <RadioGroupPrimitive.Root
+      data-slot="radio-group"
+      className={cn('grid gap-3', className)}
+      {...props}
+    />
+  );
+}
+
+function RadioGroupItem({
+  className,
+  variant = 'primary',
+  ...props
+}: React.ComponentProps<typeof RadioGroupPrimitive.Item> & {
+  variant?: 'primary' | 'secondary';
+}) {
+  return (
+    <RadioGroupPrimitive.Item
+      data-slot="radio-group-item"
+      className={cn(
+        'border-input cursor-pointer focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive aspect-square size-4 shrink-0 rounded-full border shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
+        variant === 'primary' && 'text-primary',
+        variant === 'secondary' &&
+          'data-[state=checked]:bg-success-600 bg-white data-[state=checked]:border-0 text-white',
+        className
+      )}
+      {...props}
+    >
+      <RadioGroupPrimitive.Indicator
+        data-slot="radio-group-indicator"
+        className="relative flex items-center justify-center"
+      >
+        {variant === 'primary' && (
+          <CircleIcon className="fill-primary absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2" />
+        )}
+        {variant === 'secondary' && (
+          <CircleIcon className="fill-white absolute top-1/2 left-1/2 size-1.5 -translate-x-1/2 -translate-y-1/2" />
+        )}
+      </RadioGroupPrimitive.Indicator>
+    </RadioGroupPrimitive.Item>
+  );
+}
+
+export { RadioGroup, RadioGroupItem };

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

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

package/src/components/molecules/Resizable/resizable.stories.tsx

@@ -0,0 +1,52 @@
+import { ResizablePanel, ResizableHandle, ResizablePanelGroup } from './resizable';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+const meta: Meta<typeof ResizablePanel> = {
+  title: 'Components/Layout/Resizable',
+  component: ResizablePanel,
+  tags: [ 'autodocs' ],
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'Accessible resizable panel groups and layouts with keyboard support.',
+      },
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => (
+    <ResizablePanelGroup
+      direction="horizontal"
+      className="max-w-md rounded-lg border md:min-w-[450px]"
+    >
+      <ResizablePanel defaultSize={50}>
+        <div className="flex h-[200px] items-center justify-center p-6">
+          <span className="font-semibold">One</span>
+        </div>
+      </ResizablePanel>
+      <ResizableHandle />
+      <ResizablePanel defaultSize={50}>
+        <ResizablePanelGroup direction="vertical">
+          <ResizablePanel defaultSize={25}>
+            <div className="flex h-full items-center justify-center p-6">
+              <span className="font-semibold">Two</span>
+            </div>
+          </ResizablePanel>
+          <ResizableHandle />
+          <ResizablePanel defaultSize={75}>
+            <div className="flex h-full items-center justify-center p-6">
+              <span className="font-semibold">Three</span>
+            </div>
+          </ResizablePanel>
+        </ResizablePanelGroup>
+      </ResizablePanel>
+    </ResizablePanelGroup>
+  ),
+};

package/src/components/molecules/Resizable/resizable.test.tsx

@@ -0,0 +1,22 @@
+import { composeStories } from '@storybook/react';
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+
+import * as stories from './resizable.stories';
+
+const { Default } = composeStories(stories);
+
+describe('<Resizable />', () => {
+  it('should render the resizable component', () => {
+    render(<Default />);
+
+    expect(screen.getByText('One')).toBeInTheDocument();
+    expect(screen.getByText('Two')).toBeInTheDocument();
+    expect(screen.getByText('Three')).toBeInTheDocument();
+  });
+
+  it('matches snapshot', () => {
+    const { container } = render(<Default />);
+    expect(container).toMatchSnapshot();
+  });
+});

package/src/components/molecules/Resizable/resizable.tsx

@@ -0,0 +1,55 @@
+import * as React from 'react';
+
+import { GripVerticalIcon } from 'lucide-react';
+import * as ResizablePrimitive from 'react-resizable-panels';
+
+import { cn } from '@/utils/index';
+
+function ResizablePanelGroup({
+  className,
+  ...props
+}: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) {
+  return (
+    <ResizablePrimitive.PanelGroup
+      data-slot="resizable-panel-group"
+      className={cn(
+        'flex h-full w-full data-[panel-group-direction=vertical]:flex-col',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function ResizablePanel({
+  ...props
+}: React.ComponentProps<typeof ResizablePrimitive.Panel>) {
+  return <ResizablePrimitive.Panel data-slot="resizable-panel" {...props} />;
+}
+
+function ResizableHandle({
+  withHandle,
+  className,
+  ...props
+}: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {
+  withHandle?: boolean
+}) {
+  return (
+    <ResizablePrimitive.PanelResizeHandle
+      data-slot="resizable-handle"
+      className={cn(
+        'bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:outline-hidden data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90',
+        className
+      )}
+      {...props}
+    >
+      {withHandle && (
+        <div className="bg-border z-10 flex h-4 w-3 items-center justify-center rounded-xs border">
+          <GripVerticalIcon className="size-2.5" />
+        </div>
+      )}
+    </ResizablePrimitive.PanelResizeHandle>
+  );
+}
+
+export { ResizableHandle, ResizablePanel, ResizablePanelGroup };

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

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

package/src/components/molecules/ScrollArea/scroll-area.stories.tsx

@@ -0,0 +1,93 @@
+import { ScrollArea, ScrollBar } from './scroll-area';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Separator } from '@/components';
+
+const meta: Meta<typeof ScrollArea> = {
+  title: 'Components/Layout/ScrollArea',
+  component: ScrollArea,
+  tags: [ 'autodocs' ],
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'Augments native scroll functionality for custom, cross-browser styling.',
+      },
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => {
+    const tags = Array.from({ length: 50 }).map(
+      (_, i, a) => `v1.2.0-beta.${a.length - i}`
+    );
+
+    return (
+      <ScrollArea className="h-20 w-48 rounded-md border">
+        <div className="p-4">
+          <h4 className="mb-4 text-sm font-medium leading-none">Tags</h4>
+          {tags.map((tag) => (
+            <>
+              <div key={tag} className="text-sm">
+                {tag}
+              </div>
+              <Separator className="my-2" />
+            </>
+          ))}
+        </div>
+      </ScrollArea>
+    );
+  },
+};
+
+export const Horizontal: Story = {
+  render: () => {
+    const works = [
+      {
+        artist: 'Ornella Binni',
+        art: 'https://images.unsplash.com/photo-1465869185982-5a1a7522cbcb?auto=format&fit=crop&w=300&q=80',
+      },
+      {
+        artist: 'Tom Byrom',
+        art: 'https://images.unsplash.com/photo-1548516173-3cabfa4607e9?auto=format&fit=crop&w=300&q=80',
+      },
+      {
+        artist: 'Vladimir Malyavko',
+        art: 'https://images.unsplash.com/photo-1494337480532-3725c85fd2ab?auto=format&fit=crop&w=300&q=80',
+      },
+    ];
+
+    return (
+      <ScrollArea className="w-96 whitespace-nowrap rounded-md border">
+        <div className="flex w-max space-x-4 p-4">
+          {works.map((artwork) => (
+            <figure key={artwork.artist} className="shrink-0">
+              <div className="overflow-hidden rounded-md">
+                <img
+                  src={artwork.art}
+                  alt={`Photo by ${artwork.artist}`}
+                  className="aspect-[3/4] h-fit w-fit object-cover"
+                  width={300}
+                  height={400}
+                />
+              </div>
+              <figcaption className="pt-2 text-xs text-muted-foreground">
+              Photo by{' '}
+                <span className="font-semibold text-foreground">
+                  {artwork.artist}
+                </span>
+              </figcaption>
+            </figure>
+          ))}
+        </div>
+        <ScrollBar orientation="horizontal" />
+      </ScrollArea>
+    );
+  },
+};

package/src/components/molecules/ScrollArea/scroll-area.test.tsx

@@ -0,0 +1,28 @@
+import { composeStories } from '@storybook/react';
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+
+import * as stories from './scroll-area.stories';
+
+const { Default, Horizontal } = composeStories(stories);
+
+describe('<ScrollArea />', () => {
+  it('should render the default scroll area', () => {
+    render(<Default />);
+
+    expect(screen.getByText('Tags')).toBeInTheDocument();
+  });
+
+  it('should render the horizontal scroll area', () => {
+    render(<Horizontal />);
+
+    expect(screen.getByRole('img', { name: 'Photo by Ornella Binni' })).toBeInTheDocument();
+    expect(screen.getByRole('img', { name: 'Photo by Tom Byrom' })).toBeInTheDocument();
+    expect(screen.getByRole('img', { name: 'Photo by Vladimir Malyavko' })).toBeInTheDocument();
+  });
+
+  it('matches snapshot', () => {
+    const { container } = render(<Default />);
+    expect(container).toMatchSnapshot();
+  });
+});

package/src/components/molecules/ScrollArea/scroll-area.tsx

@@ -0,0 +1,57 @@
+import * as React from 'react';
+
+import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
+
+import { cn } from '@/utils/index';
+
+function ScrollArea({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof ScrollAreaPrimitive.Root>) {
+  return (
+    <ScrollAreaPrimitive.Root
+      data-slot="scroll-area"
+      className={cn('relative', className)}
+      {...props}
+    >
+      <ScrollAreaPrimitive.Viewport
+        data-slot="scroll-area-viewport"
+        className="focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1"
+      >
+        {children}
+      </ScrollAreaPrimitive.Viewport>
+      <ScrollBar />
+      <ScrollAreaPrimitive.Corner />
+    </ScrollAreaPrimitive.Root>
+  );
+}
+
+function ScrollBar({
+  className,
+  orientation = 'vertical',
+  ...props
+}: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>) {
+  return (
+    <ScrollAreaPrimitive.ScrollAreaScrollbar
+      data-slot="scroll-area-scrollbar"
+      orientation={orientation}
+      className={cn(
+        'flex touch-none p-px transition-colors select-none',
+        orientation === 'vertical' &&
+          'h-full w-2.5 border-l border-l-transparent',
+        orientation === 'horizontal' &&
+          'h-2.5 flex-col border-t border-t-transparent',
+        className
+      )}
+      {...props}
+    >
+      <ScrollAreaPrimitive.ScrollAreaThumb
+        data-slot="scroll-area-thumb"
+        className="bg-border relative flex-1 rounded-full"
+      />
+    </ScrollAreaPrimitive.ScrollAreaScrollbar>
+  );
+}
+
+export { ScrollArea, ScrollBar };

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

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

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

@@ -0,0 +1,63 @@
+import { Select, SelectTrigger, SelectContent, SelectItem, SelectValue } from './select';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+const meta: Meta<typeof Select> = {
+  title: 'Components/Data entry/Select',
+  component: Select,
+  tags: [ 'autodocs' ],
+  parameters: {
+    layout: 'centered',
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Select>;
+
+export const Default: Story = {
+  render: () => (
+    <Select defaultValue="option1">
+      <SelectTrigger>
+        <SelectValue placeholder="Select an option" />
+      </SelectTrigger>
+      <SelectContent>
+        <SelectItem value="option1">Option 1</SelectItem>
+        <SelectItem value="option2">Option 2</SelectItem>
+        <SelectItem value="option3">Option 3</SelectItem>
+      </SelectContent>
+    </Select>
+  ),
+};
+
+export const DisabledOption: Story = {
+  render: () => (
+    <Select defaultValue="banana">
+      <SelectTrigger>
+        <SelectValue />
+      </SelectTrigger>
+      <SelectContent>
+        <SelectItem value="banana">Banana</SelectItem>
+        <SelectItem value="maçã" disabled>
+          Apple (unavailable)
+        </SelectItem>
+        <SelectItem value="laranja">Orange</SelectItem>
+      </SelectContent>
+    </Select>
+  ),
+};
+
+export const WithPlaceholder: Story = {
+  render: () => (
+    <Select>
+      <SelectTrigger>
+        <SelectValue placeholder="Choose a fruit" />
+      </SelectTrigger>
+      <SelectContent>
+        <SelectItem value="banana">Banana</SelectItem>
+        <SelectItem value="maçã">Apple</SelectItem>
+        <SelectItem value="laranja">Orange</SelectItem>
+      </SelectContent>
+    </Select>
+  ),
+};

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

@@ -0,0 +1,80 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, expect, it } from 'vitest';
+
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from './select';
+
+const renderSelect = ({
+  disabled = false,
+  defaultValue,
+}: { disabled?: boolean; defaultValue?: string } = {}) => {
+  render(
+    <Select defaultValue={defaultValue}>
+      <SelectTrigger data-testid="select-trigger" disabled={disabled}>
+        <SelectValue placeholder="Select an option" />
+      </SelectTrigger>
+      <SelectContent>
+        <SelectItem value="option1">Option 1</SelectItem>
+        <SelectItem value="option2">Option 2</SelectItem>
+        <SelectItem value="option3">Option 3</SelectItem>
+      </SelectContent>
+    </Select>
+  );
+};
+
+describe('<Select /> component', () => {
+  const user = userEvent.setup();
+
+  it('renders the trigger with placeholder text', () => {
+    renderSelect();
+    expect(screen.getByText('Select an option')).toBeInTheDocument();
+  });
+
+  it('displays all items when the trigger is clicked', async () => {
+    renderSelect();
+
+    await user.click(screen.getByTestId('select-trigger'));
+
+    expect(screen.getByText('Option 1')).toBeVisible();
+    expect(screen.getByText('Option 2')).toBeVisible();
+    expect(screen.getByText('Option 3')).toBeVisible();
+  });
+
+  it('selects an option when it is clicked', async () => {
+    renderSelect();
+
+    await user.click(screen.getByTestId('select-trigger'));
+    await user.click(screen.getByText('Option 2'));
+
+    expect(screen.getByText('Option 2')).toBeInTheDocument();
+  });
+
+  it('updates the selected value visually after selection', async () => {
+    renderSelect();
+
+    await user.click(screen.getByTestId('select-trigger'));
+    await user.click(screen.getByText('Option 3'));
+
+    const selectedValue = screen.getByText('Option 3');
+    expect(selectedValue).toBeVisible();
+  });
+
+  it('does not allow interaction when the trigger is disabled', async () => {
+    renderSelect({ disabled: true });
+
+    await user.click(screen.getByTestId('select-trigger'));
+
+    expect(screen.queryByText('Option 1')).not.toBeInTheDocument();
+  });
+
+  it('renders correctly with a default selected value', () => {
+    renderSelect({ defaultValue: 'option1' });
+
+    expect(screen.getByText('Option 1')).toBeInTheDocument();
+  });
+
+  it('should match snapshot', () => {
+    const { container } = render(<Select />);
+    expect(container).toMatchSnapshot();
+  });
+});