@brcarddev/frontend-commons 1.0.2

package/src/components/molecules/ContextMenu/context-menu.tsx

@@ -0,0 +1,259 @@
+import * as React from 'react';
+
+import * as ContextMenuPrimitive from '@radix-ui/react-context-menu';
+import { CheckIcon, ChevronRightIcon, CircleIcon } from 'lucide-react';
+
+import { cn } from '@/utils/index';
+
+function ContextMenu({
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Root>) {
+  return <ContextMenuPrimitive.Root data-slot="context-menu" data-testid="context-menu" {...props} />;
+}
+
+function ContextMenuTrigger({
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Trigger>) {
+  return (
+    <ContextMenuPrimitive.Trigger data-slot="context-menu-trigger" data-testid="context-menu-trigger" {...props} />
+  );
+}
+
+function ContextMenuGroup({
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Group>) {
+  return (
+    <ContextMenuPrimitive.Group data-slot="context-menu-group" data-testid="context-menu-group" {...props} />
+  );
+}
+
+function ContextMenuPortal({
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Portal>) {
+  return (
+    <ContextMenuPrimitive.Portal data-slot="context-menu-portal" data-testid="context-menu-portal" {...props} />
+  );
+}
+
+function ContextMenuSub({
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Sub>) {
+  return <ContextMenuPrimitive.Sub data-slot="context-menu-sub" data-testid="context-menu-sub" {...props} />;
+}
+
+function ContextMenuRadioGroup({
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.RadioGroup>) {
+  return (
+    <ContextMenuPrimitive.RadioGroup
+      data-slot="context-menu-radio-group"
+      data-testid="context-menu-radio-group"
+      {...props}
+    />
+  );
+}
+
+function ContextMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.SubTrigger> & {
+  inset?: boolean
+}) {
+  return (
+    <ContextMenuPrimitive.SubTrigger
+      data-slot="context-menu-sub-trigger"
+      data-inset={inset}
+      className={cn(
+        'focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
+        className
+      )}
+      data-testid="context-menu-sub-trigger"
+      {...props}
+    >
+      {children}
+      <ChevronRightIcon className="ml-auto" />
+    </ContextMenuPrimitive.SubTrigger>
+  );
+}
+
+function ContextMenuSubContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.SubContent>) {
+  return (
+    <ContextMenuPrimitive.SubContent
+      data-slot="context-menu-sub-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 z-50 min-w-[8rem] origin-(--radix-context-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg',
+        className
+      )}
+      data-testid="context-menu-sub-content"
+      {...props}
+    />
+  );
+}
+
+function ContextMenuContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Content>) {
+  return (
+    <ContextMenuPrimitive.Portal>
+      <ContextMenuPrimitive.Content
+        data-slot="context-menu-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 z-50 max-h-(--radix-context-menu-content-available-height) min-w-[8rem] origin-(--radix-context-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md',
+          className
+        )}
+        data-testid="context-menu-content"
+        {...props}
+      />
+    </ContextMenuPrimitive.Portal>
+  );
+}
+
+function ContextMenuItem({
+  className,
+  inset,
+  variant = 'default',
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Item> & {
+  inset?: boolean
+  variant?: 'default' | 'destructive'
+}) {
+  return (
+    <ContextMenuPrimitive.Item
+      data-slot="context-menu-item"
+      data-inset={inset}
+      data-variant={variant}
+      className={cn(
+        'focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*=\'text-\'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
+        className
+      )}
+      data-testid="context-menu-item"
+      {...props}
+    />
+  );
+}
+
+function ContextMenuCheckboxItem({
+  className,
+  children,
+  checked,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.CheckboxItem>) {
+  return (
+    <ContextMenuPrimitive.CheckboxItem
+      data-slot="context-menu-checkbox-item"
+      className={cn(
+        'focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 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',
+        className
+      )}
+      data-testid="context-menu-checkbox-item"
+      checked={checked}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <ContextMenuPrimitive.ItemIndicator>
+          <CheckIcon className="size-4" />
+        </ContextMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </ContextMenuPrimitive.CheckboxItem>
+  );
+}
+
+function ContextMenuRadioItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.RadioItem>) {
+  return (
+    <ContextMenuPrimitive.RadioItem
+      data-slot="context-menu-radio-item"
+      className={cn(
+        'focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 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',
+        className
+      )}
+      data-testid="context-menu-radio-item"
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <ContextMenuPrimitive.ItemIndicator>
+          <CircleIcon className="size-2 fill-current" />
+        </ContextMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </ContextMenuPrimitive.RadioItem>
+  );
+}
+
+function ContextMenuLabel({
+  className,
+  inset,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Label> & {
+  inset?: boolean
+}) {
+  return (
+    <ContextMenuPrimitive.Label
+      data-slot="context-menu-label"
+      data-inset={inset}
+      className={cn(
+        'text-foreground px-2 py-1.5 text-sm font-medium data-[inset]:pl-8',
+        className
+      )}
+      data-testid="context-menu-label"
+      {...props}
+    />
+  );
+}
+
+function ContextMenuSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Separator>) {
+  return (
+    <ContextMenuPrimitive.Separator
+      data-slot="context-menu-separator"
+      className={cn('bg-border -mx-1 my-1 h-px', className)}
+      {...props}
+    />
+  );
+}
+
+function ContextMenuShortcut({
+  className,
+  ...props
+}: React.ComponentProps<'span'>) {
+  return (
+    <span
+      data-slot="context-menu-shortcut"
+      className={cn(
+        'text-muted-foreground ml-auto text-xs tracking-widest',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+export {
+  ContextMenu,
+  ContextMenuCheckboxItem,
+  ContextMenuContent,
+  ContextMenuGroup,
+  ContextMenuItem,
+  ContextMenuLabel,
+  ContextMenuPortal,
+  ContextMenuRadioGroup,
+  ContextMenuRadioItem,
+  ContextMenuSeparator,
+  ContextMenuShortcut,
+  ContextMenuSub,
+  ContextMenuSubContent,
+  ContextMenuSubTrigger,
+  ContextMenuTrigger,
+};

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

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

package/src/components/molecules/DatePicker/date-picker.stories.tsx

@@ -0,0 +1,204 @@
+import { useState } from 'react';
+
+import { PopoverClose } from '@radix-ui/react-popover';
+import { type DateRange } from 'react-day-picker';
+
+import { DatePicker } from './date-picker';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Box, Button, Flex } from '@/components';
+
+const meta: Meta<typeof DatePicker> = {
+  title: 'Components/Data Entry/DatePicker',
+  component: DatePicker,
+  tags: [ 'autodocs' ],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'A date picker component that supports single date selection, multiple dates, ranges, and optional time selection. Built on top of react-day-picker with a clean, accessible interface.',
+      },
+    },
+    controls: { expanded: true },
+  },
+  argTypes: {
+    'mode': {
+      control: { type: 'select' },
+      options: [ 'single', 'multiple', 'range', 'month' ],
+      description: 'The selection mode for the date picker',
+    },
+    'placeholder': {
+      control: { type: 'text' },
+      description: 'Placeholder text when no date is selected',
+    },
+    'disabled': {
+      control: { type: 'boolean' },
+      description: 'Whether the date picker is disabled',
+    },
+    'data-testid': {
+      control: { type: 'text' },
+      description: 'Test identifier for the component',
+    },
+    'size': {
+      control: { type: 'select' },
+      options: [ 'sm', 'md', 'lg' ],
+      description: 'Size of the date picker',
+    },
+    'rounded': {
+      control: { type: 'select' },
+      options: [ 'md', 'lg', 'xl', '2xl', '3xl', 'full' ],
+      description: 'Rounded corners of the date picker',
+    },
+    'locale': {
+      control: { type: 'select' },
+      options: [ 'pt-BR', 'en', 'es' ],
+      description: 'Locale used to format month and weekdays',
+    },
+    'withTime': {
+      control: { type: 'boolean' },
+      description: 'Whether to allow selecting a time along with the date',
+    },
+    'timeLabel': {
+      control: { type: 'text' },
+      description: 'Label for the time input',
+    },
+    'timePlaceholder': {
+      control: { type: 'text' },
+      description: 'Placeholder for the time input',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof DatePicker>;
+
+export const DateRangePicker: Story = {
+  render: ({ size, rounded }) => {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const [ range, setRange ] = useState<DateRange>();
+    return (
+      <DatePicker
+        mode="range"
+        value={range}
+        onChange={setRange}
+        placeholder="Select date range"
+        size={size}
+        rounded={rounded}
+        footer={
+          <Flex className='w-full justify-end gap-2'>
+            <PopoverClose asChild>
+              <Button variant='outline' size='sm'>
+                Cancel
+              </Button>
+            </PopoverClose>
+            <Button size='sm'>
+              Apply
+            </Button>
+          </Flex>
+        }
+      />
+    );
+  },
+};
+
+export const Default: Story = {
+  render: () => {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const [ date, setDate ] = useState<Date>();
+    return (
+      <DatePicker
+        value={date}
+        onChange={setDate}
+        placeholder="Select a date"
+        maxDate={new Date()}
+      />
+    );
+  },
+};
+
+export const Disabled: Story = {
+  render: () => (
+    <DatePicker disabled placeholder="Cannot pick" />
+  ),
+};
+
+export const MonthPicker: Story = {
+  render: () => {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const [ month, setMonth ] = useState<Date>();
+    return (
+      <Box className='w-[200px]'>
+        <DatePicker
+          mode="month"
+          value={month}
+          onChange={setMonth}
+          placeholder="Selecione um mês"
+          maxDate={new Date()}
+          minDate={new Date(2025, 0, 1)}
+        />
+      </Box>
+    );
+  },
+};
+
+export const MultipleDates: Story = {
+  render: () => {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const [ dates, setDates ] = useState<Date[]>();
+    return (
+      <DatePicker
+        mode="multiple"
+        value={dates}
+        onChange={setDates}
+        placeholder="Select multiple dates"
+      />
+    );
+  },
+};
+
+export const WithCustomPlaceholder: Story = {
+  render: () => {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const [ date, setDate ] = useState<Date>();
+    return (
+      <DatePicker
+        value={date}
+        onChange={setDate}
+        placeholder="Choose your preferred date"
+      />
+    );
+  },
+};
+
+export const WithTestId: Story = {
+  render: () => {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const [ date, setDate ] = useState<Date>();
+    return (
+      <DatePicker
+        value={date}
+        onChange={setDate}
+        placeholder="Select a date"
+        data-testid="custom-date-picker"
+      />
+    );
+  },
+};
+
+export const WithTime: Story = {
+  render: () => {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const [ date, setDate ] = useState<Date>();
+    return (
+      <DatePicker
+        value={date}
+        onChange={setDate}
+        placeholder="Select date and time"
+        withTime
+        timeLabel="Time"
+      />
+    );
+  },
+};

package/src/components/molecules/DatePicker/date-picker.test.tsx

@@ -0,0 +1,27 @@
+import { composeStories } from '@storybook/react';
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+
+import * as stories from './date-picker.stories';
+
+const { Default, Disabled } = composeStories(stories);
+
+describe('<DatePicker />', () => {
+  it('should render the date picker with the placeholder', () => {
+    render(<Default />);
+
+    expect(screen.getByText('Select a date')).toBeInTheDocument();
+  });
+
+  it('should render the date picker disabled', () => {
+    render(<Disabled />);
+
+    expect(screen.getByText('Cannot pick')).toBeInTheDocument();
+  });
+
+  it('matches snapshot', () => {
+    const { container } = render(<Default />);
+
+    expect(container).toMatchSnapshot();
+  });
+});