@brcarddev/frontend-commons 1.0.2

package/src/components/atoms/Slider/slider.tsx

@@ -0,0 +1,54 @@
+import * as React from 'react';
+
+import * as SliderPrimitive from '@radix-ui/react-slider';
+
+import { cn } from '@/utils/index';
+
+function Slider({
+  className,
+  defaultValue,
+  value,
+  min = 0,
+  max = 100,
+  ...props
+}: React.ComponentProps<typeof SliderPrimitive.Root>) {
+
+  return (
+    <SliderPrimitive.Root
+      data-slot="slider"
+      data-testid="slider"
+      defaultValue={defaultValue}
+      value={value}
+      min={min}
+      max={max}
+      className={cn(
+        'relative flex w-full touch-none items-center select-none data-[disabled]:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col',
+        className
+      )}
+      {...props}
+    >
+      <SliderPrimitive.Track
+        data-slot="slider-track"
+        data-testid="slider-track"
+        className={cn(
+          'bg-primary relative grow overflow-hidden rounded-full data-[orientation=horizontal]:h-2 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-2'
+        )}
+      >
+        <SliderPrimitive.Range
+          data-slot="slider-range"
+          data-testid="slider-range"
+          className={cn(
+            'bg-gray-600 absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full'
+          )}
+        />
+      </SliderPrimitive.Track>
+      <SliderPrimitive.Thumb
+        data-slot="slider-thumb"
+        data-testid="slider-thumb"
+        className="cursor-pointer border-primary border-[6px] bg-background ring-primary/10 block size-6 shrink-0 rounded-full shadow-sm transition-[color,box-shadow] hover:ring-6 focus-visible:ring-6 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50"
+      />
+    </SliderPrimitive.Root>
+  );
+}
+
+export { Slider };

package/src/components/atoms/Sonner/index.ts

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

package/src/components/atoms/Sonner/sonner.css

@@ -0,0 +1,39 @@
+[data-sonner-toaster] {
+  --normal-bg: rgba(255, 255, 255, 0.6) !important;
+  --normal-border: rgba(255, 255, 255, 0.1) !important;
+  --normal-shadow: 0 4px 30px rgba(0, 0, 0, 0.2) !important;
+  --normal-backdrop-filter: blur(5px) saturate(180%) !important;
+  --normal-box-shadow: inset 0 0 30px rgba(255, 255, 255, 0.05), 0 4px 30px rgba(0, 0, 0, 0.2) !important;
+}
+
+[data-sonner-toaster] [data-sonner-toast] {
+  background: rgba(255, 255, 255, 0.7) !important;
+  backdrop-filter: var(--normal-backdrop-filter) !important;
+  box-shadow: var(--normal-box-shadow) !important;
+  border: 1px solid var(--normal-border) !important;
+}
+
+[data-sonner-toaster] [data-sonner-toast] [data-close-button],
+[data-sonner-toaster] [data-sonner-toast] button:last-child {
+  position: absolute !important;
+  top: 50% !important;
+  left: 320px !important;
+  transform: translateY(-50%) !important;
+  background: transparent !important;
+  border: none !important;
+  cursor: pointer !important;
+  display: flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  width: 25px !important;
+  height: 25px !important;
+  z-index: 10 !important;
+}
+
+[data-sonner-toaster] [data-sonner-toast] [data-close-button] svg {
+  width: 20px !important;
+  height: 20px !important;
+  stroke-width: 2.5px !important;
+  color: #A4A7AE !important;
+}
+

package/src/components/atoms/Sonner/sonner.stories.tsx

@@ -0,0 +1,261 @@
+import { Button } from '../Button';
+
+import { Toaster } from './sonner';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { useToast } from '@/hooks';
+
+const meta: Meta<typeof Toaster> = {
+  title: 'Components/Feedback/Toaster',
+  component: Toaster,
+  tags: [ 'autodocs' ],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'Wrapper for the `Toaster` from the [sonner](https://sonner.emilkowal.ski/) library, with custom theme, styles, and CSS variables for integration with the design system.',
+      },
+    },
+    layout: 'centered',
+  },
+  argTypes: {
+    position: {
+      control: 'select',
+      options: [
+        'top-left',
+        'top-center',
+        'top-right',
+        'bottom-left',
+        'bottom-center',
+        'bottom-right',
+      ],
+      description: 'Position where the toasts will be displayed on the screen.',
+      table: {
+        category: 'Behavior',
+        type: { summary: 'string' },
+        defaultValue: { summary: 'bottom-right' },
+      },
+    },
+    richColors: {
+      control: 'boolean',
+      description: 'Activates a richer color palette, based on the system theme.',
+      table: {
+        category: 'Style',
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
+      },
+    },
+    invert: {
+      control: 'boolean',
+      description: 'Inverts the style based on the position. Ex: `top` vs `bottom`.',
+      table: {
+        category: 'Behavior',
+        type: { summary: 'boolean' },
+      },
+    },
+    closeButton: {
+      control: 'boolean',
+      description: 'Shows a button to manually close the toast.',
+      table: {
+        category: 'Accessibility',
+        type: { summary: 'boolean' },
+      },
+    },
+    duration: {
+      control: 'number',
+      description: 'Duration (in ms) of the toast visible before disappearing.',
+      table: {
+        category: 'Time',
+        type: { summary: 'number' },
+        defaultValue: { summary: '3000' },
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Toaster>;
+
+export const Error: Story = {
+  render: args => {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const { error } = useToast();
+    return (
+      <>
+        <Button
+          onClick={() => error('Notificação padrão exibida!')}
+        >
+          Exibir Toast
+        </Button>
+        <Toaster {...args} />
+      </>
+    );
+  },
+  args: {
+    position: 'bottom-right',
+    duration: 3000,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Toaster with error configuration, button to trigger an example notification.',
+      },
+    },
+  },
+};
+
+export const Info: Story = {
+  render: args => {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const { info } = useToast();
+    return (
+      <>
+        <Button
+          onClick={() => info('Notificação padrão exibida!', { description: 'Descrição da notificação.' })}
+        >
+          Exibir Toast
+        </Button>
+        <Toaster {...args} />
+      </>
+    );
+  },
+  args: {
+    position: 'bottom-right',
+    duration: 3000,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Toaster with default configuration, button to trigger an example notification.',
+      },
+    },
+  },
+};
+
+export const Loading: Story = {
+  render: args => {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const { loading, dismiss } = useToast();
+    return (
+      <>
+        <Button
+          onClick={() => {
+            const id = loading('Carregando dados...');
+            setTimeout(() => dismiss(id), 2000);
+          }}
+        >
+          Exibir Toast
+        </Button>
+        <Toaster {...args} />
+      </>
+    );
+  },
+  args: {
+    position: 'bottom-right',
+    duration: 3000,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Toaster with loading configuration, auto dismiss after 2s.',
+      },
+    },
+  },
+};
+
+export const Promise: Story = {
+  render: args => {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const { promise } = useToast();
+    return (
+      <>
+        <Button
+          onClick={() =>
+            promise(
+              new globalThis.Promise<void>(resolve => {
+                window.setTimeout(() => resolve(), 1500);
+              }),
+              {
+                loading: 'Processando...',
+                success: 'Concluído com sucesso!',
+                error: 'Falha ao processar.',
+              }
+            )
+          }
+        >
+          Exibir Toast
+        </Button>
+        <Toaster {...args} />
+      </>
+    );
+  },
+  args: {
+    position: 'bottom-right',
+    duration: 3000,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Toaster with promise lifecycle (loading/success/error).',
+      },
+    },
+  },
+};
+
+export const Success: Story = {
+  render: args => {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const { success } = useToast();
+    return (
+      <>
+        <Button
+          onClick={() => success('Notificação padrão exibida!')}
+        >
+          Exibir Toast
+        </Button>
+        <Toaster {...args} />
+      </>
+    );
+  },
+  args: {
+    position: 'bottom-right',
+    duration: 3000,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Toaster with success configuration, button to trigger an example notification.',
+      },
+    },
+  },
+};
+
+export const Warning: Story = {
+  render: args => {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const { warning } = useToast();
+    return (
+      <>
+        <Button
+          onClick={() => warning('Notificação padrão exibida!')}
+        >
+          Exibir Toast
+        </Button>
+        <Toaster {...args} />
+      </>
+    );
+  },
+  args: {
+    position: 'bottom-right',
+    duration: 3000,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Toaster with warning configuration, button to trigger an example notification.',
+      },
+    },
+  },
+};

package/src/components/atoms/Sonner/sonner.test.tsx

@@ -0,0 +1,24 @@
+import { render, screen } from '@testing-library/react';
+import { toast } from 'sonner';
+import { describe, expect, it } from 'vitest';
+
+import { Toaster } from './sonner';
+
+describe('<Toaster />', () => {
+  it('should render without crashing', () => {
+    expect(() => render(<Toaster />)).not.toThrow();
+  });
+
+  it('should display a toast message when triggered', async () => {
+    render(<Toaster />);
+
+    toast('Hello toast!');
+    const toastElement = await screen.findByText('Hello toast!');
+    expect(toastElement).toBeInTheDocument();
+  });
+
+  it('should match snapshot', () => {
+    const { container } = render(<Toaster />);
+    expect(container).toMatchSnapshot();
+  });
+});

package/src/components/atoms/Sonner/sonner.tsx

@@ -0,0 +1,13 @@
+import { Toaster as Sonner, ToasterProps } from 'sonner';
+import './sonner.css';
+
+const Toaster = ({ ...props }: ToasterProps) => {
+  return (
+    <Sonner
+      data-testid="toaster"
+      {...props}
+    />
+  );
+};
+
+export { Toaster };

package/src/components/atoms/Switch/index.ts

@@ -0,0 +1 @@
+export { Switch } from './switch';

package/src/components/atoms/Switch/switch.stories.tsx

@@ -0,0 +1,128 @@
+import * as React from 'react';
+
+import { Switch } from './switch';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+const meta: Meta<typeof Switch> = {
+  title: 'Components/Data Entry/Switch',
+  component: Switch,
+  tags: [ 'autodocs' ],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'Accessible switch component based on `@radix-ui/react-switch`, with support for theme, animations, and visual states (on/off, focus, disabled).',
+      },
+    },
+    controls: { expanded: true },
+  },
+  argTypes: {
+    className: {
+      control: 'text',
+      description: 'Additional Tailwind utility classes for customization.',
+      table: {
+        category: 'Style',
+        type: { summary: 'string' },
+      },
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Disables the switch, making it non-interactive.',
+      table: {
+        category: 'Behavior',
+        type: { summary: 'boolean' },
+      },
+    },
+    defaultChecked: {
+      control: 'boolean',
+      description: 'Sets the initial state as "on".',
+      table: {
+        category: 'State',
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
+      },
+    },
+    alwaysOn: {
+      control: 'boolean',
+      description: 'Sets the switch to always be on.',
+      table: {
+        category: 'State',
+        type: { summary: 'boolean' },
+      },
+    },
+    onCheckedChange: {
+      action: 'checkedChange',
+      description: 'Callback executed when the switch state changes.',
+      table: {
+        category: 'Events',
+        type: { summary: '(checked: boolean) => void' },
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Switch>;
+
+export const Checked: Story = {
+  args: {
+    defaultChecked: true,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Switch already started in the "on" state.',
+      },
+    },
+  },
+};
+
+export const Default: Story = {
+  args: {
+    defaultChecked: false,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Basic switch not marked by default.',
+      },
+    },
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    disabled: true,
+    defaultChecked: false,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Disabled switch, without possibility of interaction.',
+      },
+    },
+  },
+};
+
+export const WithLabel: Story = {
+  render: args => {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const [ enabled, setEnabled ] = React.useState(false);
+
+    return (
+      <label className="flex items-center space-x-3">
+        <Switch {...args} checked={enabled} onCheckedChange={val => setEnabled(val)} />
+        <span className="text-sm font-medium">{enabled ? 'Ativado' : 'Desativado'}</span>
+      </label>
+    );
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Example of the switch used with a descriptive label, showing its current state dynamically.',
+      },
+    },
+  },
+};

package/src/components/atoms/Switch/switch.test.tsx

@@ -0,0 +1,70 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import { describe, it, expect, vi } from 'vitest';
+
+import { Switch } from './switch';
+
+describe('<Switch />', () => {
+  it('should render the switch with default attributes', () => {
+    render(<Switch />);
+    const switchElement = screen.getByTestId('switch');
+
+    expect(switchElement).toBeInTheDocument();
+    expect(switchElement).toHaveAttribute('data-slot', 'switch');
+    expect(switchElement).toHaveClass('peer');
+  });
+
+  it('should contain a thumb element inside', () => {
+    render(<Switch />);
+    const thumb = screen
+      .getByTestId('switch')
+      ?.querySelector('[data-slot="switch-thumb"]');
+
+    expect(thumb).toBeInTheDocument();
+  });
+
+  it('should toggle state when clicked', async () => {
+    render(<Switch />);
+    const switchElement = screen.getByTestId('switch');
+
+    // Initial state should be unchecked
+    expect(switchElement).toHaveAttribute('data-state', 'unchecked');
+
+    fireEvent.click(switchElement);
+    expect(switchElement).toHaveAttribute('data-state', 'checked');
+
+    fireEvent.click(switchElement);
+    expect(switchElement).toHaveAttribute('data-state', 'unchecked');
+  });
+
+  it('should be disabled if prop is passed', () => {
+    render(<Switch disabled />);
+    const switchElement = screen.getByTestId('switch');
+
+    expect(switchElement).toBeDisabled();
+  });
+
+  it('should apply custom className if provided', () => {
+    render(<Switch className="custom-class" />);
+    const switchElement = screen.getByTestId('switch');
+
+    expect(switchElement).toHaveClass('custom-class');
+  });
+
+  it('should call onCheckedChange when toggled', () => {
+    const onCheckedChange = vi.fn();
+    render(<Switch onCheckedChange={onCheckedChange} />);
+
+    const switchElement = screen.getByTestId('switch');
+    fireEvent.click(switchElement);
+
+    expect(onCheckedChange).toHaveBeenCalledWith(true);
+
+    fireEvent.click(switchElement);
+    expect(onCheckedChange).toHaveBeenCalledWith(false);
+  });
+
+  it('should match snapshot', () => {
+    const { container } = render(<Switch />);
+    expect(container).toMatchSnapshot();
+  });
+});

package/src/components/atoms/Switch/switch.tsx

@@ -0,0 +1,61 @@
+import * as React from 'react';
+
+import * as SwitchPrimitive from '@radix-ui/react-switch';
+
+import { cn } from '@/utils';
+
+function Switch ({
+  className,
+  alwaysOn = false,
+  ...props
+}: React.ComponentProps<typeof SwitchPrimitive.Root> & { alwaysOn?: boolean }) {
+  const switchRootClasses = cn(
+    'inline-flex h-5 p-0.5 w-9 shrink-0 items-center rounded-full',
+
+    'data-[state=checked]:bg-primary',
+    'data-[state=unchecked]:bg-gray-200',
+    {
+      '!bg-primary': alwaysOn,
+    },
+
+    'border border-transparent shadow-xs',
+
+    'transition-all',
+    'cursor-pointer peer',
+
+    'outline-none',
+    'focus-visible-primary',
+
+    'disabled:cursor-not-allowed disabled:opacity-50',
+
+    className
+  );
+
+  const switchThumbClasses = cn(
+    'block size-4 rounded-full',
+
+    'bg-white',
+
+    'transition-transform',
+    'data-[state=checked]:translate-x-[calc(100%-2px)]',
+    'data-[state=unchecked]:translate-x-0',
+
+    'pointer-events-none ring-0'
+  );
+
+  return (
+    <SwitchPrimitive.Root
+      data-slot="switch"
+      data-testid="switch"
+      className={switchRootClasses}
+      {...props}
+    >
+      <SwitchPrimitive.Thumb
+        data-slot="switch-thumb"
+        className={switchThumbClasses}
+      />
+    </SwitchPrimitive.Root>
+  );
+}
+
+export { Switch };

package/src/components/atoms/Textarea/index.ts

@@ -0,0 +1 @@
+export { Textarea } from '@/components/atoms/Textarea/textarea';