@brcarddev/frontend-commons 1.0.2

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

@@ -0,0 +1,70 @@
+import * as React from 'react';
+
+import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';
+import { type VariantProps } from 'class-variance-authority';
+
+import { toggleVariants } from '@/components';
+import { cn } from '@/utils';
+
+const ToggleGroupContext = React.createContext<VariantProps<typeof toggleVariants>>({
+  size: 'default',
+  variant: 'default',
+});
+
+function ToggleGroup ({
+  className,
+  variant,
+  size,
+  children,
+  ...props
+}: React.ComponentProps<typeof ToggleGroupPrimitive.Root> &
+  VariantProps<typeof toggleVariants>) {
+  return (
+    <ToggleGroupPrimitive.Root
+      data-slot="toggle-group"
+      data-variant={variant}
+      data-size={size}
+      className={cn(
+        'group/toggle-group flex w-fit items-center rounded-md data-[variant=outline]:shadow-xs',
+        className
+      )}
+      {...props}
+    >
+      <ToggleGroupContext.Provider value={{ variant, size }}>
+        {children}
+      </ToggleGroupContext.Provider>
+    </ToggleGroupPrimitive.Root>
+  );
+}
+
+function ToggleGroupItem ({
+  className,
+  children,
+  variant,
+  size,
+  ...props
+}: React.ComponentProps<typeof ToggleGroupPrimitive.Item> &
+  VariantProps<typeof toggleVariants>) {
+  const context = React.useContext(ToggleGroupContext);
+
+  return (
+    <ToggleGroupPrimitive.Item
+      data-slot="toggle-group-item"
+      data-variant={context.variant || variant}
+      data-size={context.size || size}
+      className={cn(
+        toggleVariants({
+          variant: context.variant || variant,
+          size: context.size || size,
+        }),
+        'min-w-0 flex-1 shrink-0 rounded-none shadow-none first:rounded-l-md last:rounded-r-md focus:z-10 focus-visible:z-10 data-[variant=outline]:border-l-0 data-[variant=outline]:first:border-l',
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </ToggleGroupPrimitive.Item>
+  );
+}
+
+export { ToggleGroup, ToggleGroupItem };

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

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

package/src/components/molecules/Tooltip/tooltip.stories.tsx

@@ -0,0 +1,133 @@
+import { Info } from 'lucide-react';
+
+import { Tooltip, TooltipTrigger, TooltipContent } from './tooltip';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Button } from '@/components';
+
+const meta: Meta<typeof Tooltip> = {
+  title: 'Components/Data Display/Tooltip',
+  component: Tooltip,
+  tags: [ 'autodocs' ],
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: `
+The Tooltip component provides additional contextual information when the user passes the mouse, focuses, or holds an element.
+
+Based on \`@radix-ui/react-tooltip\`, the Tooltip offers full support for accessibility, customizable delay, and intelligent positioning.  
+Ideal for enriching the user experience with details without visually overloading the interface.
+        `,
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Tooltip>;
+
+export const Default: Story = {
+  name: 'Default',
+  parameters: {
+    docs: {
+      description: {
+        story: 'Simple tooltip displayed when hovering over a button.',
+      },
+    },
+  },
+  render: () => (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <Button variant="outline">Hover me</Button>
+      </TooltipTrigger>
+      <TooltipContent>Default tooltip with automatic positioning.</TooltipContent>
+    </Tooltip>
+  ),
+};
+
+export const Positioned: Story = {
+  name: 'Positioned',
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'You can position the Tooltip in any direction (top, right, bottom, left).',
+      },
+    },
+  },
+  render: () => (
+    <div className="flex flex-col items-center gap-4">
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <Button variant="outline">Top</Button>
+        </TooltipTrigger>
+        <TooltipContent side="top">Tooltip above</TooltipContent>
+      </Tooltip>
+
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <Button variant="outline">Bottom</Button>
+        </TooltipTrigger>
+        <TooltipContent side="bottom">Tooltip below</TooltipContent>
+      </Tooltip>
+
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <Button variant="outline">Right</Button>
+        </TooltipTrigger>
+        <TooltipContent side="right">Tooltip to the right</TooltipContent>
+      </Tooltip>
+
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <Button variant="outline">Left</Button>
+        </TooltipTrigger>
+        <TooltipContent side="left">Tooltip to the left</TooltipContent>
+      </Tooltip>
+    </div>
+  ),
+};
+
+export const WithDelay: Story = {
+  name: 'With delay',
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'The Tooltip can have a custom display delay with `delayDuration`.',
+      },
+    },
+  },
+  render: () => (
+    <Tooltip delayDuration={500}>
+      <TooltipTrigger asChild>
+        <Button variant="ghost">Hold for 500ms</Button>
+      </TooltipTrigger>
+      <TooltipContent>Shown after half a second.</TooltipContent>
+    </Tooltip>
+  ),
+};
+
+export const WithIcon: Story = {
+  name: 'With icon',
+  parameters: {
+    docs: {
+      description: {
+        story: 'Tooltip associated with an informative icon to provide contextual help.',
+      },
+    },
+  },
+  render: () => (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <button className="inline-flex items-center justify-center rounded-full p-2 hover:bg-muted">
+          <Info className="size-4" />
+          <span className="sr-only">More information</span>
+        </button>
+      </TooltipTrigger>
+      <TooltipContent>This is a useful tip about the feature!</TooltipContent>
+    </Tooltip>
+  ),
+};

package/src/components/molecules/Tooltip/tooltip.test.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, expect, it } from 'vitest';
+
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/components';
+
+function renderTooltip ({
+  content = 'Tooltip content',
+}: {
+  content?: React.ReactNode;
+} = {}) {
+  return render(
+    <Tooltip>
+      <TooltipTrigger data-testid="tooltip-trigger" asChild>
+        <button>Hover me</button>
+      </TooltipTrigger>
+      <TooltipContent data-testid="tooltip-content">{content}</TooltipContent>
+    </Tooltip>
+  );
+}
+
+describe('<Tooltip />', () => {
+  const user = userEvent.setup();
+
+  it('does not show the tooltip initially', () => {
+    renderTooltip();
+    const content = screen.queryByTestId('tooltip-content');
+    expect(content).not.toBeInTheDocument();
+  });
+
+  it('shows the tooltip on hover', async () => {
+    renderTooltip();
+
+    const trigger = screen.getByTestId('tooltip-trigger');
+    await user.hover(trigger);
+
+    const content = await screen.findByTestId('tooltip-content');
+    expect(content).toBeVisible();
+  });
+
+  it('renders the tooltip with the correct content on hover', async () => {
+    renderTooltip({ content: 'Custom tooltip content' });
+
+    const trigger = screen.getByTestId('tooltip-trigger');
+    await user.hover(trigger);
+
+    const content = await screen.findByTestId('tooltip-content');
+    expect(content).toBeVisible();
+    expect(content).toHaveTextContent('Custom tooltip content');
+  });
+
+  it('should match snapshot', () => {
+    const { container } = renderTooltip();
+    expect(container).toMatchSnapshot();
+  });
+});

package/src/components/molecules/Tooltip/tooltip.tsx

@@ -0,0 +1,58 @@
+import * as React from 'react';
+
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+
+import { cn } from '@/utils';
+
+function TooltipProvider ({
+  delayDuration = 0,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
+  return (
+    <TooltipPrimitive.Provider
+      data-slot="tooltip-provider"
+      delayDuration={delayDuration}
+      {...props}
+    />
+  );
+}
+
+function Tooltip ({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Root>) {
+  return (
+    <TooltipProvider>
+      <TooltipPrimitive.Root data-slot="tooltip" {...props} />
+    </TooltipProvider>
+  );
+}
+
+function TooltipTrigger ({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
+  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />;
+}
+
+function TooltipContent ({
+  className,
+  sideOffset = 0,
+  children,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
+  return (
+    <TooltipPrimitive.Portal>
+      <TooltipPrimitive.Content
+        data-slot="tooltip-content"
+        sideOffset={sideOffset}
+        className={cn(
+          'bg-black text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-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 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance',
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <TooltipPrimitive.Arrow className="bg-black fill-black z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
+      </TooltipPrimitive.Content>
+    </TooltipPrimitive.Portal>
+  );
+}
+
+export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };

package/src/components/molecules/index.ts

@@ -0,0 +1,33 @@
+export * from './Accordion';
+export * from './Alert';
+export * from './AlertDialog';
+export * from './Avatar';
+export * from './Breadcrumb';
+export * from './Card';
+export * from './Collapsible';
+export * from './ColorPicker';
+export * from './ColorScale';
+export * from './Command';
+export * from './ContextMenu';
+export * from './DatePicker';
+export * from './Dialog';
+export * from './Drawer';
+export * from './Dropdown';
+export * from './DropdownMenu';
+export * from './HoverCard';
+export * from './InputOTP';
+export * from './Menubar';
+export * from './NavigationMenu';
+export * from './Pagination';
+export * from './PaginationDotGroup';
+export * from './PDFViewer';
+export * from './Popover';
+export * from './ProgressSteps';
+export * from './RadioGroup';
+export * from './Resizable';
+export * from './ScrollArea';
+export * from './Select';
+export * from './Sheet';
+export * from './Tabs';
+export * from './ToggleGroup';
+export * from './Tooltip';

package/src/components/organisms/Carousel/carousel.stories.tsx

@@ -0,0 +1,94 @@
+import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, CarouselControls, CarouselOverlay } from './carousel';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Card, CardContent } from '@/components';
+
+const meta: Meta<typeof Carousel> = {
+  title: 'Components/Layout/Carousel',
+  component: Carousel,
+  tags: [ 'autodocs' ],
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'A carousel with motion and swipe built using Embla.',
+      },
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => (
+    <Carousel className="w-full max-w-xs">
+      <CarouselContent>
+        {Array.from({ length: 5 }).map((_, index) => (
+          <CarouselItem key={index}>
+            <div className="p-1">
+              <Card>
+                <CardContent className="flex aspect-square items-center justify-center p-6">
+                  <span className="text-4xl font-semibold">{index + 1}</span>
+                </CardContent>
+              </Card>
+            </div>
+          </CarouselItem>
+        ))}
+      </CarouselContent>
+      <CarouselPrevious />
+      <CarouselNext />
+    </Carousel>
+  ),
+};
+
+export const InlineControls: Story = {
+  render: () => (
+    <Carousel className="w-full max-w-md">
+      <CarouselContent>
+        {Array.from({ length: 7 }).map((_, index) => (
+          <CarouselItem key={index} className="md:basis-1/2">
+            <div className="p-1">
+              <Card>
+                <CardContent className="flex aspect-video items-center justify-center p-6">
+                  <span className="text-2xl font-semibold">Slide {index + 1}</span>
+                </CardContent>
+              </Card>
+            </div>
+          </CarouselItem>
+        ))}
+      </CarouselContent>
+      <div className="mt-4">
+        <CarouselControls variant="outline" />
+      </div>
+    </Carousel>
+  ),
+};
+
+export const OverlayBottomRight: Story = {
+  render: () => (
+    <Carousel className="w-full max-w-xl">
+      <CarouselContent>
+        {Array.from({ length: 5 }).map((_, index) => (
+          <CarouselItem key={index}>
+            <Card>
+              <CardContent className="flex aspect-video items-center justify-center p-0">
+                <img
+                  alt={`Image ${index + 1}`}
+                  src={`https://picsum.photos/seed/${index + 1}/800/450`}
+                  className="h-full w-full object-cover"
+                />
+              </CardContent>
+            </Card>
+          </CarouselItem>
+        ))}
+      </CarouselContent>
+      <CarouselOverlay position="bottom-right">
+        <CarouselControls />
+      </CarouselOverlay>
+    </Carousel>
+  ),
+};
+

package/src/components/organisms/Carousel/carousel.test.tsx

@@ -0,0 +1,24 @@
+import { composeStories } from '@storybook/react';
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+
+import * as stories from './carousel.stories';
+
+const { Default } = composeStories(stories);
+
+describe('<Carousel />', () => {
+  it('should render the carousel', () => {
+    render(<Default />);
+
+    expect(screen.getByText('1')).toBeInTheDocument();
+    expect(screen.getByText('2')).toBeInTheDocument();
+    expect(screen.getByText('3')).toBeInTheDocument();
+    expect(screen.getByText('4')).toBeInTheDocument();
+    expect(screen.getByText('5')).toBeInTheDocument();
+  });
+
+  it('matches snapshot', () => {
+    const { container } = render(<Default />);
+    expect(container).toMatchSnapshot();
+  });
+});