@brcarddev/frontend-commons 1.0.2

package/src/components/molecules/ColorPicker/color-picker.tsx

@@ -0,0 +1,106 @@
+'use client';
+
+import { ChangeEvent, ComponentProps, forwardRef, useRef } from 'react';
+
+import { cn } from '@/utils/cn';
+
+import { Box, Dropper, Flex, Label, Typography } from '@/components';
+
+export interface ColorPickerProps extends Omit<ComponentProps<'input'>, 'value' | 'onChange'> {
+  label?: string;
+  helperText?: string;
+  value?: string;
+  onChange?: (value: string) => void;
+  error?: string;
+  buttonText?: string;
+}
+
+export const ColorPicker = forwardRef<HTMLInputElement, ColorPickerProps>(
+  ({ label, helperText, value = '', onChange, error, disabled = false, buttonText = 'Selecionar', ...props }, ref) => {
+    const inputRef = useRef<HTMLInputElement | null>(null);
+
+    const handleClick = () => {
+      if (!disabled) {
+        inputRef.current?.click();
+      }
+    };
+
+    const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
+      onChange?.(e.target.value);
+    };
+
+    return (
+      <Box>
+        {label && (
+          <Label className="mb-1.5 block">
+            {label}
+          </Label>
+        )}
+
+        <Flex className="items-center relative">
+          <input
+            type="text"
+            value={value}
+            onChange={(e) => onChange?.(e.target.value)}
+            placeholder="#D92D20"
+            disabled={disabled}
+            className={cn(
+              'h-10 px-3 border rounded-l-md text-sm w-full',
+              'focus:outline-none focus:ring-2 focus:ring-ring focus:border-ring',
+              error && 'border-error-500',
+              disabled && 'bg-gray-100 text-gray-400 cursor-not-allowed'
+            )}
+            {...props}
+          />
+
+          <button
+            type="button"
+            onClick={handleClick}
+            disabled={disabled}
+            className={cn(
+              'h-10 px-3 border border-l-transparent rounded-r-2xl flex items-center gap-2 relative',
+              'transition-colors',
+              'font-semibold text-sm text-gray-700 whitespace-nowrap',
+              'cursor-pointer',
+              !disabled && 'hover:bg-gray-50',
+              disabled && 'text-gray-400 cursor-not-allowed'
+            )}
+          >
+            <Dropper className="size-4 text-gray-500" />
+            {buttonText}
+            <input
+              ref={(node) => {
+                if (typeof ref === 'function') {
+                  ref(node);
+                } else if (ref) {
+                  ref.current = node;
+                }
+
+                inputRef.current = node;
+              }}
+              type="color"
+              value={value}
+              onChange={handleChange}
+              disabled={disabled}
+              className="absolute inset-0 opacity-0 cursor-pointer"
+              style={{ width: '100%', height: '100%' }}
+            />
+          </button>
+        </Flex>
+
+        {(helperText || error) && (
+          <Typography
+            className={cn(
+              'text-sm mt-1',
+              error ? 'text-error-500' : 'text-gray-500'
+            )}
+          >
+            {error || helperText}
+          </Typography>
+        )}
+      </Box>
+    );
+  }
+);
+
+ColorPicker.displayName = 'ColorPicker';

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

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

package/src/components/molecules/ColorScale/color-scale.stories.tsx

@@ -0,0 +1,31 @@
+import { ColorScale } from './color-scale';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { generateScale } from '@/utils';
+
+const meta: Meta<typeof ColorScale> = {
+  title: 'Components/Data Display/ColorScale',
+  component: ColorScale,
+  tags: [ 'autodocs' ],
+};
+
+export default meta;
+type Story = StoryObj<typeof ColorScale>;
+
+export const ColorScaleComponent = () => {
+  const colors = generateScale('#D92D20FF', 9).reverse();
+  return (
+    <ColorScale
+      colors={colors}
+      principalLabel="Principal"
+      copiedLabel="Copiado"
+    />
+  );
+};
+
+export const Default: Story = {
+  render: () => (
+    <ColorScaleComponent/>
+  ),
+};

package/src/components/molecules/ColorScale/color-scale.tsx

@@ -0,0 +1,74 @@
+'use client';
+
+import { useState } from 'react';
+
+import { Badge, Box, Check } from '@/components';
+import { cn } from '@/utils';
+
+type ColorScaleProps = {
+  colors: string[];
+  principalLabel: string;
+  copiedLabel: string;
+};
+
+export function ColorScale({ colors, principalLabel, copiedLabel }: ColorScaleProps) {
+  const middleIndex = Math.floor(colors.length / 2);
+  const [ hoveredIndex, setHoveredIndex ] = useState<number | null>(null);
+  const [ copiedIndex, setCopiedIndex ] = useState<number | null>(null);
+
+  const activeIndex = hoveredIndex ?? middleIndex;
+
+  const handleCopy = async (color: string, index: number) => {
+    try {
+      await navigator.clipboard.writeText(color.toUpperCase());
+      setCopiedIndex(index);
+
+      setTimeout(() => {
+        setCopiedIndex(null);
+      }, 1500);
+    } catch (err) {
+      console.error('Erro ao copiar cor:', err);
+    }
+  };
+
+  return (
+    <div className='flex items-center justify-center'>
+      {colors.map((color, index) => (
+        <Box
+          key={color + index}
+          onMouseEnter={() => setHoveredIndex(index)}
+          onMouseLeave={() => setHoveredIndex(null)}
+          onClick={() => handleCopy(color, index)}
+          className={cn(
+            'w-24 h-16 cursor-pointer transition-all relative border',
+            index === activeIndex
+              ? 'h-20 rounded-xl border-2 shadow-2xl border-white z-10'
+              : 'border-transparent',
+            index === 0 && 'rounded-l-xl',
+            index === colors.length - 1 && 'rounded-r-xl'
+          )}
+          style={{ backgroundColor: color }}>
+          {index === activeIndex && (
+            <Badge className='absolute bottom-2 left-1/2 -translate-x-1/2 translate-y-full bg-white text-gray-700 rounded-2xl shadow-2xl flex items-center gap-1'>
+              {copiedIndex === index ? (
+                <>
+                  {copiedLabel} <Check className='text-gray-600 size-4' />
+                </>
+              ) : index === middleIndex ? (
+                hoveredIndex === middleIndex ? (
+                  color.toUpperCase()
+                ) : (
+                  principalLabel
+                )
+              ) : (
+                color.toUpperCase()
+              )}
+            </Badge>
+          )}
+        </Box>
+      ))}
+    </div>
+  );
+}
+
+ColorScale.displayName = 'ColorScale';

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

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

package/src/components/molecules/Command/command.stories.tsx

@@ -0,0 +1,71 @@
+/* eslint-disable react-hooks/rules-of-hooks */
+import React from 'react';
+
+import { CommandDialog, CommandInput, CommandList, CommandItem, CommandEmpty, CommandGroup, CommandShortcut } from './command';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+const meta: Meta = {
+  title: 'Components/Data Display/Command',
+  component: CommandDialog,
+  tags: [ 'autodocs' ],
+  parameters: {
+    docs: {
+      description: {
+        component: 'Command search and selection component.',
+      },
+    },
+  },
+};
+
+export default meta;
+
+export const Default: StoryObj = {
+  render: () => {
+    const [ open, setOpen ] = React.useState(false);
+
+    React.useEffect(() => {
+      const down = (e: KeyboardEvent) => {
+        if (e.key === 'j' && (e.metaKey || e.ctrlKey)) {
+          e.preventDefault();
+          setOpen((open) => !open);
+        }
+      };
+
+      document.addEventListener('keydown', down);
+      return () => document.removeEventListener('keydown', down);
+    }, []);
+
+    return (
+      <>
+        <p className="text-sm text-muted-foreground">
+        Press{' '}
+          <kbd className="pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground opacity-100">
+            <span className="text-xs">ctrl +</span>J
+          </kbd>
+        </p>
+        <CommandDialog open={open} onOpenChange={setOpen}>
+          <CommandInput placeholder="Type a command or search..." />
+          <CommandList>
+            <CommandEmpty>No results found.</CommandEmpty>
+
+            <CommandGroup heading="Settings">
+              <CommandItem>
+                <span>Profile</span>
+                <CommandShortcut>⌘P</CommandShortcut>
+              </CommandItem>
+              <CommandItem>
+                <span>Billing</span>
+                <CommandShortcut>⌘B</CommandShortcut>
+              </CommandItem>
+              <CommandItem>
+                <span>Settings</span>
+                <CommandShortcut>⌘S</CommandShortcut>
+              </CommandItem>
+            </CommandGroup>
+          </CommandList>
+        </CommandDialog>
+      </>
+    );
+  },
+};

package/src/components/molecules/Command/command.test.tsx

@@ -0,0 +1,50 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, expect, it } from 'vitest';
+
+import {
+  CommandDialog,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
+} from './command';
+
+describe('<Command />', () => {
+  const renderCommand = () =>
+    render(
+      <CommandDialog open>
+        <CommandInput placeholder="Search..." />
+        <CommandList>
+          <CommandEmpty>No results</CommandEmpty>
+          <CommandGroup heading="Group One">
+            <CommandItem>Item One</CommandItem>
+            <CommandSeparator />
+            <CommandItem>Item Two</CommandItem>
+          </CommandGroup>
+        </CommandList>
+      </CommandDialog>
+    );
+
+  it('should render input and items correctly', () => {
+    renderCommand();
+
+    expect(screen.getByPlaceholderText('Search...')).toBeInTheDocument();
+    expect(screen.getByText('Item One')).toBeInTheDocument();
+  });
+
+  it('should show empty message when no results', async () => {
+    renderCommand();
+
+    await userEvent.type(screen.getByPlaceholderText('Search...'), 'non-existent');
+
+    expect(screen.getByText('No results')).toBeInTheDocument();
+  });
+
+  it('matches snapshot', () => {
+    const { container } = renderCommand();
+    expect(container).toMatchSnapshot();
+  });
+});

package/src/components/molecules/Command/command.tsx

@@ -0,0 +1,177 @@
+import * as React from 'react';
+
+import { Command as CommandPrimitive } from 'cmdk';
+import { SearchIcon } from 'lucide-react';
+
+import { cn } from '@/utils/index';
+
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from '@/components';
+
+function Command({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive>) {
+  return (
+    <CommandPrimitive
+      data-slot="command"
+      className={cn(
+        'bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function CommandDialog({
+  title = 'Command Palette',
+  description = 'Search for a command to run...',
+  children,
+  ...props
+}: React.ComponentProps<typeof Dialog> & {
+  title?: string
+  description?: string
+}) {
+  return (
+    <Dialog {...props}>
+      <DialogHeader className="sr-only">
+        <DialogTitle>{title}</DialogTitle>
+        <DialogDescription>{description}</DialogDescription>
+      </DialogHeader>
+      <DialogContent className="overflow-hidden p-0">
+        <Command className="[&_[cmdk-group-heading]]:text-muted-foreground **:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+          {children}
+        </Command>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+function CommandInput({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Input>) {
+  return (
+    <div
+      data-slot="command-input-wrapper"
+      className="flex h-9 items-center gap-2 border-b px-3"
+    >
+      <SearchIcon className="size-4 shrink-0 opacity-50" />
+      <CommandPrimitive.Input
+        data-slot="command-input"
+        className={cn(
+          'placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50',
+          className
+        )}
+        {...props}
+      />
+    </div>
+  );
+}
+
+function CommandList({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.List>) {
+  return (
+    <CommandPrimitive.List
+      data-slot="command-list"
+      className={cn(
+        'max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function CommandEmpty({
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Empty>) {
+  return (
+    <CommandPrimitive.Empty
+      data-slot="command-empty"
+      className="py-6 text-center text-sm"
+      {...props}
+    />
+  );
+}
+
+function CommandGroup({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Group>) {
+  return (
+    <CommandPrimitive.Group
+      data-slot="command-group"
+      className={cn(
+        'text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function CommandSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Separator>) {
+  return (
+    <CommandPrimitive.Separator
+      data-slot="command-separator"
+      className={cn('bg-border -mx-1 h-px', className)}
+      {...props}
+    />
+  );
+}
+
+function CommandItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Item>) {
+  return (
+    <CommandPrimitive.Item
+      data-slot="command-item"
+      className={cn(
+        'data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_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=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function CommandShortcut({
+  className,
+  ...props
+}: React.ComponentProps<'span'>) {
+  return (
+    <span
+      data-slot="command-shortcut"
+      className={cn(
+        'text-muted-foreground ml-auto text-xs tracking-widest',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+export {
+  Command,
+  CommandDialog,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
+  CommandShortcut,
+};

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

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

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

@@ -0,0 +1,69 @@
+import { ContextMenu, ContextMenuTrigger, ContextMenuContent, ContextMenuItem, ContextMenuRadioGroup, ContextMenuShortcut, ContextMenuSub, ContextMenuSubTrigger, ContextMenuSubContent, ContextMenuSeparator, ContextMenuCheckboxItem, ContextMenuLabel, ContextMenuRadioItem } from './context-menu';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+const meta: Meta = {
+  title: 'Components/Data Display/ContextMenu',
+  component: ContextMenu,
+  tags: [ 'autodocs' ],
+  parameters: {
+    docs: {
+      description: {
+        component: 'Displays a menu located at the pointer, triggered by a right click or a long press.',
+      },
+    },
+  },
+};
+export default meta;
+
+export const Default: StoryObj = {
+  render: () => (
+    <ContextMenu>
+      <ContextMenuTrigger className="flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed text-sm">
+        Right click here
+      </ContextMenuTrigger>
+      <ContextMenuContent className="w-64">
+        <ContextMenuItem inset>
+          Back
+          <ContextMenuShortcut>⌘[</ContextMenuShortcut>
+        </ContextMenuItem>
+        <ContextMenuItem inset disabled>
+          Forward
+          <ContextMenuShortcut>⌘]</ContextMenuShortcut>
+        </ContextMenuItem>
+        <ContextMenuItem inset>
+          Reload
+          <ContextMenuShortcut>⌘R</ContextMenuShortcut>
+        </ContextMenuItem>
+        <ContextMenuSub>
+          <ContextMenuSubTrigger inset>More Tools</ContextMenuSubTrigger>
+          <ContextMenuSubContent className="w-48">
+            <ContextMenuItem>
+              Save Page As...
+              <ContextMenuShortcut>⇧⌘S</ContextMenuShortcut>
+            </ContextMenuItem>
+            <ContextMenuItem>Create Shortcut...</ContextMenuItem>
+            <ContextMenuItem>Name Window...</ContextMenuItem>
+            <ContextMenuSeparator />
+            <ContextMenuItem>Developer Tools</ContextMenuItem>
+          </ContextMenuSubContent>
+        </ContextMenuSub>
+        <ContextMenuSeparator />
+        <ContextMenuCheckboxItem checked>
+          Show Bookmarks Bar
+          <ContextMenuShortcut>⌘⇧B</ContextMenuShortcut>
+        </ContextMenuCheckboxItem>
+        <ContextMenuCheckboxItem>Show Full URLs</ContextMenuCheckboxItem>
+        <ContextMenuSeparator />
+        <ContextMenuRadioGroup value="pedro">
+          <ContextMenuLabel inset>People</ContextMenuLabel>
+          <ContextMenuSeparator />
+          <ContextMenuRadioItem value="pedro">
+            Pedro Duarte
+          </ContextMenuRadioItem>
+          <ContextMenuRadioItem value="colm">Colm Tuite</ContextMenuRadioItem>
+        </ContextMenuRadioGroup>
+      </ContextMenuContent>
+    </ContextMenu>
+  ),
+};

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

@@ -0,0 +1,25 @@
+import { composeStories } from '@storybook/react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, expect, it } from 'vitest';
+
+import * as stories from './context-menu.stories';
+
+const { Default } = composeStories(stories);
+
+describe('<ContextMenu />', () => {
+  const renderContextMenu = () => render(<Default />);
+
+  it('should open on right click', async () => {
+    renderContextMenu();
+
+    await userEvent.pointer({ keys: '[MouseRight]', target: screen.getByTestId('context-menu-trigger') });
+
+    expect(screen.getByTestId('context-menu-content')).toBeVisible();
+  });
+
+  it('matches snapshot', () => {
+    const { container } = renderContextMenu();
+    expect(container).toMatchSnapshot();
+  });
+});