@brcarddev/frontend-commons 1.0.2

package/src/components/atoms/InputWithButton/input-with-button.tsx

@@ -0,0 +1,170 @@
+import { ComponentProps, forwardRef } from 'react';
+
+import { useMask } from '@react-input/mask';
+
+import { Box, Flex, RenderCondition, Typography } from '@/components';
+import { cn } from '@/utils';
+
+const INPUT_BASE_CLASSES = [
+  'w-full flex',
+  'placeholder:text-gray-500 leading-10! placeholder:leading-10!',
+  'border border-gray-300 flex w-full min-w-0 bg-white',
+  'shadow-xs transition-[color,box-shadow] outline-none',
+  'disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50',
+].join(' ');
+
+const SIZE_CLASSES = {
+  sm: 'px-3 h-10',
+  md: 'px-[14px] h-10',
+  lg: 'px-4 h-11',
+} as const;
+
+const TEXT_SIZE_CLASSES = {
+  sm: 'text-sm',
+  md: 'text-base',
+  lg: 'text-base',
+} as const;
+
+const BUTTON_SIZE_CLASSES = {
+  sm: 'px-3',
+  md: 'px-3',
+  lg: 'px-4',
+} as const;
+
+const FOCUS_CLASSES = 'focus-visible-primary';
+const ERROR_CLASSES = 'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border-destructive ring-destructive/20';
+const SUCCESS_CLASSES = 'border-green-500 ring-green-500/20';
+
+export interface InputWithButtonProps extends Omit<ComponentProps<'input'>, 'size'> {
+  /** Text displayed on the button */
+  buttonText?: string;
+
+  /** Callback triggered when the button is clicked */
+  onButtonClick?: () => void;
+
+  /** Whether the button is in a loading state */
+  buttonLoading?: boolean;
+
+  /** Whether the button is disabled */
+  buttonDisabled?: boolean;
+
+  /** Error message to display below the input field */
+  error?: string;
+
+  /** Whether the input has a success state */
+  success?: boolean;
+
+  /** Size of the input and button: 'sm', 'md', or 'lg' */
+  size?: keyof typeof SIZE_CLASSES;
+
+  /** Mask pattern for the input */
+  mask?: string;
+
+  /** Whether the input is in a loading state */
+  loading?: boolean;
+
+  /** Custom icon to display in the button */
+  buttonIcon?: React.ReactNode;
+
+  /** Test ID for testing purposes */
+  'data-testid'?: string;
+}
+
+export const InputWithButton = forwardRef<HTMLInputElement, InputWithButtonProps>(({
+  buttonText = 'Ação',
+  onButtonClick,
+  buttonLoading = false,
+  buttonDisabled = false,
+  error,
+  success = false,
+  size = 'md',
+  mask,
+  loading = false,
+  disabled = false,
+  buttonIcon,
+  className,
+  'data-testid': testId,
+  ...props
+}, ref) => {
+  const maskedInputRef = useMask({
+    mask: mask || '',
+    replacement: { _: /\d/ },
+  });
+
+  const isDisabled = disabled || loading;
+  const isButtonDisabled = buttonDisabled || buttonLoading || isDisabled;
+
+  const inputClasses = cn(
+    INPUT_BASE_CLASSES,
+    SIZE_CLASSES[size],
+    TEXT_SIZE_CLASSES[size],
+    FOCUS_CLASSES,
+    'rounded-l-md border-r-0',
+    {
+      [ERROR_CLASSES]: error,
+      [SUCCESS_CLASSES]: success && !error,
+    },
+    className
+  );
+
+  const buttonClasses = cn(
+    'border flex items-center gap-2 rounded-r-2xl bg-white',
+    BUTTON_SIZE_CLASSES[size],
+    TEXT_SIZE_CLASSES[size],
+    'font-semibold text-gray-700 cursor-pointer whitespace-nowrap',
+    'transition-colors',
+    !isButtonDisabled && 'hover:bg-gray-50',
+    isButtonDisabled && 'text-gray-400 cursor-not-allowed border-gray-200'
+  );
+
+  const inputRef = mask ? maskedInputRef : ref;
+
+  return (
+    <Box>
+      <Flex className="h-fit">
+        <div className="relative flex-1">
+          <input
+            ref={inputRef}
+            type="text"
+            disabled={isDisabled}
+            data-slot="input"
+            data-testid={testId}
+            className={inputClasses}
+            aria-invalid={!!error}
+            maxLength={props.maxLength ?? (mask ? mask.length : 255)}
+            {...props}
+          />
+        </div>
+
+        <button
+          type="button"
+          disabled={isButtonDisabled}
+          className={buttonClasses}
+          onClick={onButtonClick}
+        >
+          <RenderCondition condition={buttonLoading}>
+            <div className="size-5 animate-spin rounded-full border-2 border-gray-300 border-t-gray-600" />
+          </RenderCondition>
+          <RenderCondition condition={!!buttonIcon && !buttonLoading}>
+            <div className="size-5 text-gray-400">
+              {buttonIcon}
+            </div>
+          </RenderCondition>
+          <RenderCondition condition={!!buttonText}>
+            {buttonText}
+          </RenderCondition>
+        </button>
+      </Flex>
+
+      {error && (
+        <Box className="mt-1.5">
+          <Flex className="items-center gap-1 text-error-500 text-sm">
+            <Typography className="text-sm">{error}</Typography>
+          </Flex>
+        </Box>
+      )}
+    </Box>
+  );
+});
+
+InputWithButton.displayName = 'InputWithButton';

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

@@ -0,0 +1 @@
+export { Label } from './label';

package/src/components/atoms/Label/label.stories.tsx

@@ -0,0 +1,90 @@
+import { Label } from './label';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+const meta: Meta<typeof Label> = {
+  title: 'Components/General/Label',
+  component: Label,
+  tags: [ 'autodocs' ],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'Renders an accessible label associated with controls.',
+      },
+    },
+    controls: {
+      expanded: true,
+    },
+  },
+  argTypes: {
+    htmlFor: {
+      control: 'text',
+      description: 'ID of the element that the label describes',
+      table: {
+        category: 'Accessibility',
+        type: { summary: 'string' },
+      },
+    },
+    className: {
+      control: 'text',
+      description: 'Additional Tailwind classes for styling',
+      table: {
+        category: 'Style',
+        type: { summary: 'string' },
+      },
+    },
+    children: {
+      control: 'text',
+      description: 'Textual or JSX content to be displayed in the label',
+      table: {
+        category: 'Content',
+        type: { summary: 'React.ReactNode' },
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Label>;
+
+export const AsPartOfForm: Story = {
+  render: args => (
+    <div className="space-y-2">
+      <Label {...args} htmlFor="inputId">
+        {args.children}
+      </Label>
+      <input
+        id="inputId"
+        type="text"
+        className="px-3 py-2 border rounded w-full"
+        placeholder="Digite algo"
+      />
+    </div>
+  ),
+  args: {
+    children: 'Name',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Example of how to use the Label component associated with an input.',
+      },
+    },
+  },
+};
+
+export const Default: Story = {
+  args: {
+    htmlFor: 'email',
+    children: 'Email address',
+  },
+};
+
+export const WithCustomClass: Story = {
+  args: {
+    htmlFor: 'nome',
+    children: 'Full name',
+    className: 'text-red-500 uppercase',
+  },
+};

package/src/components/atoms/Label/label.test.tsx

@@ -0,0 +1,59 @@
+import { render, screen } from '@testing-library/react';
+import { describe, it, expect } from 'vitest';
+
+import { Label } from './label';
+
+describe('<Label />', () => {
+  it('should render the label with given text', () => {
+    render(<Label htmlFor="email">Email</Label>);
+    const label = screen.getByText('Email');
+    expect(label).toBeInTheDocument();
+    expect(label.tagName.toLowerCase()).toBe('label');
+  });
+
+  it('should associate with input via htmlFor', () => {
+    render(
+      <>
+        <Label htmlFor="username">Username</Label>
+        <input id="username" />
+      </>
+    );
+    const input = screen.getByRole('textbox');
+    const label = screen.getByText('Username');
+    expect(label).toHaveAttribute('for', 'username');
+    expect(input).toHaveAccessibleName('Username');
+  });
+
+  it('should render custom class names if provided', () => {
+    render(
+      <Label htmlFor="custom" className="text-red-500">
+        Custom
+      </Label>
+    );
+    const label = screen.getByText('Custom');
+    expect(label).toHaveClass('text-red-500');
+  });
+
+  it('should apply disabled styles via peer-disabled class', () => {
+    render(
+      <div>
+        <input id="input" disabled className="peer" />
+        <Label htmlFor="input">Disabled Input</Label>
+      </div>
+    );
+    const label = screen.getByText('Disabled Input');
+    expect(label).toBeInTheDocument();
+  });
+
+  it('should have correct default classes applied', () => {
+    render(<Label htmlFor="email">Email</Label>);
+    const label = screen.getByText('Email');
+    expect(label.className).toMatch(/text-sm/);
+    expect(label.className).toMatch(/font-medium/);
+  });
+
+  it('should match snapshot', () => {
+    const { container } = render(<Label htmlFor="test">Test Label</Label>);
+    expect(container).toMatchSnapshot();
+  });
+});

package/src/components/atoms/Label/label.tsx

@@ -0,0 +1,43 @@
+import * as React from 'react';
+
+import * as LabelPrimitive from '@radix-ui/react-label';
+
+import { Flex, HelpCircle, Tooltip, TooltipContent, TooltipTrigger } from '@/components';
+import { cn } from '@/utils';
+
+interface LabelProps extends React.ComponentProps<typeof LabelPrimitive.Root> {
+  required?: boolean;
+  helpText?: string;
+  error?: boolean;
+}
+
+function Label ({
+  className,
+  required,
+  helpText,
+  error,
+  ...props
+}: LabelProps) {
+  return (
+    <Flex className="gap-0.5">
+      <LabelPrimitive.Root
+        data-error={!!error}
+        className={cn('flex items-center gap-2 text-sm text-gray-700 leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50 data-[error=true]:text-error-500', className)}
+        {...props}
+      />
+      {required && <span className="text-error-500 font-medium leading-none">*</span>}
+      {helpText && (
+        <Tooltip>
+          <TooltipTrigger>
+            <HelpCircle className='size-4 text-gray-400' />
+          </TooltipTrigger>
+          <TooltipContent>
+            {helpText}
+          </TooltipContent>
+        </Tooltip>
+      )}
+    </Flex>
+  );
+}
+
+export { Label };

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

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

package/src/components/atoms/Progress/progress.stories.tsx

@@ -0,0 +1,30 @@
+import { Progress } from './progress';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+const meta: Meta<typeof Progress> = {
+  title: 'Components/Feedback/Progress',
+  component: Progress,
+  tags: [ 'autodocs' ],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'Progress component based on `@radix-ui/react-progress`. Used to display the progress of a task or process.',
+      },
+    },
+    controls: {
+      expanded: true,
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    value: 50,
+  },
+};

package/src/components/atoms/Progress/progress.test.tsx

@@ -0,0 +1,63 @@
+import { faker } from '@faker-js/faker';
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+
+import { Progress } from './progress';
+
+describe('<Progress />', () => {
+  it('should render the progress bar with a default value of 0 when no value prop is provided', () => {
+    render(<Progress />);
+    const progressBar = screen.getByTestId('progress-bar');
+    expect(progressBar).toBeInTheDocument();
+    expect(progressBar).toHaveAttribute('data-state', 'indeterminate');
+    expect(screen.getByTestId('progress-indicator')).toHaveStyle('transform: translateX(-100%)');
+  });
+
+  it('should render the progress bar with the correct value and aria attributes', () => {
+    const progressValue = faker.number.int({ min: 1, max: 100 });
+
+    render(<Progress value={progressValue} />);
+    const progressBar = screen.getByTestId('progress-bar');
+    expect(progressBar).toBeInTheDocument();
+    expect(progressBar).toHaveAttribute('data-state', 'indeterminate');
+    expect(screen.getByTestId('progress-indicator')).toHaveStyle(`transform: translateX(-${100 - progressValue}%)`);
+  });
+
+  it('should render the progress bar with a custom class name', () => {
+    const customClassName = faker.lorem.word();
+    render(<Progress className={customClassName} />);
+    const progressBar = screen.getByTestId('progress-bar');
+    expect(progressBar).toBeInTheDocument();
+    expect(progressBar).toHaveClass(customClassName);
+  });
+
+  it('should be accessible and have appropriate ARIA attributes', () => {
+    const progressValue = faker.number.int({ min: 1, max: 100 });
+
+    render(<Progress value={progressValue} />);
+    const progressBar = screen.getByRole('progressbar');
+    expect(progressBar).toBeInTheDocument();
+    expect(progressBar).toHaveAttribute('aria-valuemin', '0');
+    expect(progressBar).toHaveAttribute('aria-valuemax', '100');
+  });
+
+  it('should handle value 0 correctly, indicating empty progress', () => {
+    render(<Progress value={0} />);
+    const progressBar = screen.getByTestId('progress-bar');
+    expect(progressBar).toBeInTheDocument();
+    expect(screen.getByTestId('progress-indicator')).toHaveStyle('transform: translateX(-100%)');
+  });
+
+  it('should handle value 100 correctly, indicating full progress', () => {
+    render(<Progress value={100} />);
+    const progressBar = screen.getByTestId('progress-bar');
+    expect(progressBar).toBeInTheDocument();
+    expect(screen.getByTestId('progress-indicator')).toHaveStyle('transform: translateX(-0%)');
+  });
+
+  it('matches snapshot', () => {
+    const { container } = render(<Progress />);
+
+    expect(container).toMatchSnapshot();
+  });
+});

package/src/components/atoms/Progress/progress.tsx

@@ -0,0 +1,32 @@
+import * as React from 'react';
+
+import * as ProgressPrimitive from '@radix-ui/react-progress';
+
+import { cn } from '@/utils/index';
+
+function Progress({
+  className,
+  value,
+  ...props
+}: React.ComponentProps<typeof ProgressPrimitive.Root>) {
+  return (
+    <ProgressPrimitive.Root
+      data-slot="progress"
+      data-testid="progress-bar"
+      className={cn(
+        'bg-primary/20 relative h-2 w-full overflow-hidden rounded-full',
+        className
+      )}
+      {...props}
+    >
+      <ProgressPrimitive.Indicator
+        data-slot="progress-indicator"
+        data-testid="progress-indicator"
+        className="bg-primary h-full w-full flex-1 transition-all"
+        style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
+      />
+    </ProgressPrimitive.Root>
+  );
+}
+
+export { Progress };

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

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

package/src/components/atoms/RenderCondition/render-condition.stories.tsx

@@ -0,0 +1,28 @@
+import { RenderCondition } from './render-condition';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+const meta: Meta<typeof RenderCondition> = {
+  title: 'Components/Data Display/RenderCondition',
+  component: RenderCondition,
+  tags: [ 'autodocs' ],
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'RenderCondition is a component that renders a child element based on a condition.',
+      },
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    condition: true,
+    children: <div>RenderCondition is true</div>,
+  },
+};

package/src/components/atoms/RenderCondition/render-condition.test.tsx

@@ -0,0 +1,27 @@
+import { render } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+
+import { RenderCondition } from './render-condition';
+
+describe('<RenderCondition />', () => {
+  it('should render the children when the condition is true', () => {
+    const { getByText } = render(
+      <RenderCondition condition={true}>
+        <div>Test</div>
+      </RenderCondition>
+    );
+
+    expect(getByText('Test')).toBeInTheDocument();
+  });
+
+  it('should not render the children when the condition is false', () => {
+    const { queryByText } = render(
+      <RenderCondition condition={false}>
+        <div>Test</div>
+      </RenderCondition>
+    );
+
+    expect(queryByText('Test')).toBeNull();
+  });
+});
+

package/src/components/atoms/RenderCondition/render-condition.tsx

@@ -0,0 +1,9 @@
+import { ReactNode } from 'react';
+
+interface RenderConditionProps {
+  children: ReactNode;
+  condition: boolean;
+}
+
+export const RenderCondition = ({ children, condition }: RenderConditionProps) =>
+  (condition ? <>{children}</> : null);

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

@@ -0,0 +1 @@
+export * from './rich-text-editor';