@brcarddev/frontend-commons 1.0.2

package/src/components/molecules/ProgressSteps/progress-steps.test.tsx

@@ -0,0 +1,470 @@
+import { ElementType } from 'react';
+
+import { render, screen } from '@testing-library/react';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+
+import { User03, Briefcase01, Building06 } from '@/components/icons';
+
+import { ProgressSteps, ProgressStepsProps } from './progress-steps';
+
+vi.mock('@/components', async () => {
+  const actual = await vi.importActual('@/components');
+  return {
+    ...actual,
+    Icon: ({ icon: IconComponent, variant, ...props }: {
+      icon: ElementType;
+      variant: string;
+      [key: string]: unknown;
+    }) => (
+      <div
+        data-testid="mock-icon"
+        data-variant={variant}
+        {...props}
+      >
+        <IconComponent data-testid="icon-component" />
+      </div>
+    ),
+  };
+});
+
+describe('<ProgressSteps />', () => {
+  const mockSteps = [
+    {
+      icon: User03,
+      label: 'User Information',
+      description: 'Enter your personal details',
+    },
+    {
+      icon: Briefcase01,
+      label: 'Work Experience',
+      description: 'Add your professional background',
+    },
+    {
+      icon: Building06,
+      label: 'Company Details',
+      description: 'Provide company information',
+    },
+  ];
+
+  const defaultProps: ProgressStepsProps = {
+    steps: mockSteps,
+  };
+
+  const renderProgressSteps = (props: Partial<ProgressStepsProps> = {}) =>
+    render(<ProgressSteps {...defaultProps} {...props} />);
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  describe('Rendering', () => {
+    it('renders correctly with default props', () => {
+      renderProgressSteps();
+
+      const container = screen.getByRole('list');
+      const steps = screen.getAllByRole('listitem');
+
+      expect(container).toBeInTheDocument();
+      expect(steps).toHaveLength(3);
+    });
+
+    it('renders all step labels correctly', () => {
+      renderProgressSteps();
+
+      expect(screen.getByText('User Information')).toBeInTheDocument();
+      expect(screen.getByText('Work Experience')).toBeInTheDocument();
+      expect(screen.getByText('Company Details')).toBeInTheDocument();
+    });
+
+    it('renders all step descriptions correctly', () => {
+      renderProgressSteps();
+
+      expect(screen.getByText('Enter your personal details')).toBeInTheDocument();
+      expect(screen.getByText('Add your professional background')).toBeInTheDocument();
+      expect(screen.getByText('Provide company information')).toBeInTheDocument();
+    });
+
+    it('does not render when steps array is empty', () => {
+      const { container } = renderProgressSteps({ steps: [] });
+      expect(container.firstChild).toBeNull();
+    });
+
+    it('does not render when steps is undefined', () => {
+      const { container } = renderProgressSteps({ steps: [] });
+      expect(container.firstChild).toBeNull();
+    });
+
+    it('renders single step correctly', () => {
+      const singleStep = [ mockSteps[0] ];
+      renderProgressSteps({ steps: singleStep });
+
+      const steps = screen.getAllByRole('listitem');
+      expect(steps).toHaveLength(1);
+      expect(screen.getByText('User Information')).toBeInTheDocument();
+    });
+  });
+
+  describe('Active Step Logic', () => {
+    it('marks the correct step as active when specified', () => {
+      const stepsWithActive = [
+        { ...mockSteps[0] },
+        { ...mockSteps[1], active: true },
+        { ...mockSteps[2] },
+      ];
+
+      renderProgressSteps({ steps: stepsWithActive });
+
+      const steps = screen.getAllByRole('listitem');
+      expect(steps[1]).toHaveAttribute('aria-current', 'step');
+      expect(steps[0]).not.toHaveAttribute('aria-current');
+      expect(steps[2]).not.toHaveAttribute('aria-current');
+    });
+
+    it('handles no active step', () => {
+      renderProgressSteps();
+
+      const steps = screen.getAllByRole('listitem');
+      steps.forEach(step => {
+        expect(step).not.toHaveAttribute('aria-current');
+      });
+    });
+
+    it('handles first step as active', () => {
+      const stepsWithActive = [
+        { ...mockSteps[0], active: true },
+        { ...mockSteps[1] },
+        { ...mockSteps[2] },
+      ];
+
+      renderProgressSteps({ steps: stepsWithActive });
+
+      const steps = screen.getAllByRole('listitem');
+      expect(steps[0]).toHaveAttribute('aria-current', 'step');
+    });
+
+    it('handles last step as active', () => {
+      const stepsWithActive = [
+        { ...mockSteps[0] },
+        { ...mockSteps[1] },
+        { ...mockSteps[2], active: true },
+      ];
+
+      renderProgressSteps({ steps: stepsWithActive });
+
+      const steps = screen.getAllByRole('listitem');
+      expect(steps[2]).toHaveAttribute('aria-current', 'step');
+    });
+  });
+
+  describe('Completed Steps Logic', () => {
+    it('marks steps before active step as completed', () => {
+      const stepsWithActive = [
+        { ...mockSteps[0] },
+        { ...mockSteps[1] },
+        { ...mockSteps[2], active: true },
+      ];
+
+      renderProgressSteps({ steps: stepsWithActive });
+
+      const icons = screen.getAllByTestId('mock-icon');
+
+      expect(icons[0]).toHaveAttribute('data-variant', 'primary');
+      expect(icons[1]).toHaveAttribute('data-variant', 'primary');
+      expect(icons[2]).toHaveAttribute('data-variant', 'primary');
+    });
+
+    it('applies secondary variant to inactive, non-completed steps', () => {
+      const stepsWithActive = [
+        { ...mockSteps[0], active: true },
+        { ...mockSteps[1] },
+        { ...mockSteps[2] },
+      ];
+
+      renderProgressSteps({ steps: stepsWithActive });
+
+      const icons = screen.getAllByTestId('mock-icon');
+
+      expect(icons[0]).toHaveAttribute('data-variant', 'primary');
+      expect(icons[1]).toHaveAttribute('data-variant', 'secondary');
+      expect(icons[2]).toHaveAttribute('data-variant', 'secondary');
+    });
+  });
+
+  describe('Step Styling', () => {
+    it('applies opacity to inactive steps', () => {
+      const stepsWithActive = [
+        { ...mockSteps[0], active: true },
+        { ...mockSteps[1] },
+        { ...mockSteps[2] },
+      ];
+
+      renderProgressSteps({ steps: stepsWithActive });
+
+      const steps = screen.getAllByRole('listitem');
+
+      expect(steps[0]).not.toHaveClass('opacity-50');
+      expect(steps[1]).toHaveClass('opacity-50');
+      expect(steps[2]).toHaveClass('opacity-50');
+    });
+
+    it('applies correct gap and flex classes to container', () => {
+      renderProgressSteps();
+
+      const container = screen.getByRole('list');
+      expect(container).toHaveClass('flex', 'flex-col');
+    });
+
+    it('applies correct classes to step container', () => {
+      renderProgressSteps();
+
+      const steps = screen.getAllByRole('listitem');
+      steps.forEach(step => {
+        expect(step).toHaveClass('flex', 'gap-3');
+      });
+    });
+  });
+
+  describe('Separators', () => {
+    it('renders separators for all steps except the last', () => {
+      renderProgressSteps();
+
+      const separators = screen.getByRole('list').querySelectorAll('.h-\\[48px\\]');
+      expect(separators).toHaveLength(2);
+    });
+
+    it('does not render separator for the last step', () => {
+      const singleStep = [ mockSteps[0] ];
+      renderProgressSteps({ steps: singleStep });
+
+      const separators = screen.getByRole('list').querySelectorAll('.h-\\[48px\\]');
+      expect(separators).toHaveLength(0);
+    });
+
+    it('applies correct classes to separators', () => {
+      renderProgressSteps();
+
+      const separators = screen.getByRole('list').querySelectorAll('.h-\\[48px\\]');
+      separators.forEach(separator => {
+        expect(separator).toHaveClass('h-[48px]', 'w-[2px]', 'bg-gray-200');
+      });
+    });
+
+    it('applies opacity to separators when step is active', () => {
+      const stepsWithActive = [
+        { ...mockSteps[0], active: true },
+        { ...mockSteps[1] },
+        { ...mockSteps[2] },
+      ];
+
+      renderProgressSteps({ steps: stepsWithActive });
+
+      const separators = screen.getByRole('list').querySelectorAll('.h-\\[48px\\]');
+      expect(separators[0]).toHaveClass('opacity-50');
+    });
+  });
+
+  describe('Icons', () => {
+    it('renders icon for each step', () => {
+      renderProgressSteps();
+
+      const icons = screen.getAllByTestId('icon-component');
+      expect(icons).toHaveLength(3);
+    });
+
+    it('applies correct aria-label to icons', () => {
+      renderProgressSteps();
+
+      const icons = screen.getAllByTestId('mock-icon');
+      expect(icons[0]).toHaveAttribute('aria-label', 'Step 1 icon');
+      expect(icons[1]).toHaveAttribute('aria-label', 'Step 2 icon');
+      expect(icons[2]).toHaveAttribute('aria-label', 'Step 3 icon');
+    });
+  });
+
+  describe('Accessibility', () => {
+    it('has proper ARIA attributes for container', () => {
+      renderProgressSteps();
+
+      const container = screen.getByRole('list');
+      expect(container).toHaveAttribute('aria-label', 'Progress steps');
+    });
+
+    it('has proper ARIA attributes for steps', () => {
+      const stepsWithActive = [
+        { ...mockSteps[0] },
+        { ...mockSteps[1], active: true },
+        { ...mockSteps[2] },
+      ];
+
+      renderProgressSteps({ steps: stepsWithActive });
+
+      const steps = screen.getAllByRole('listitem');
+
+      steps.forEach(step => {
+        expect(step).toHaveAttribute('role', 'listitem');
+      });
+
+      expect(steps[1]).toHaveAttribute('aria-current', 'step');
+    });
+
+    it('applies aria-hidden to icon containers', () => {
+      renderProgressSteps();
+
+      const iconContainers = screen.getByRole('list').querySelectorAll('[aria-hidden="true"]');
+      expect(iconContainers).toHaveLength(3);
+    });
+  });
+
+  describe('Content Structure', () => {
+    it('renders step labels with correct classes', () => {
+      renderProgressSteps();
+
+      const labels = screen.getByRole('list').querySelectorAll('label');
+      expect(labels).toHaveLength(3);
+
+      labels.forEach(label => {
+        expect(label).toHaveClass('text-md', 'font-semibold', 'text-gray-700', 'line-clamp-1');
+      });
+    });
+
+    it('renders step descriptions with correct classes', () => {
+      renderProgressSteps();
+
+      const descriptions = screen.getByRole('list').querySelectorAll('p');
+      expect(descriptions).toHaveLength(3);
+
+      descriptions.forEach(description => {
+        expect(description).toHaveClass('text-md', 'text-gray-600', 'line-clamp-2');
+      });
+    });
+
+    it('maintains correct DOM structure', () => {
+      renderProgressSteps();
+
+      const steps = screen.getAllByRole('listitem');
+      steps.forEach(step => {
+        const flexContainers = step.querySelectorAll('.flex');
+        expect(flexContainers.length).toBeGreaterThanOrEqual(2);
+      });
+    });
+  });
+
+  describe('Component Structure', () => {
+    it('has correct display names', () => {
+      expect(ProgressSteps.displayName).toBe('ProgressSteps');
+    });
+
+    it('is memoized', () => {
+      const props1 = { steps: mockSteps };
+      const props2 = { steps: mockSteps };
+
+      const { rerender } = render(<ProgressSteps {...props1} />);
+      const component1 = ProgressSteps;
+
+      rerender(<ProgressSteps {...props2} />);
+      const component2 = ProgressSteps;
+
+      expect(component1).toBe(component2);
+    });
+  });
+
+  describe('Edge Cases', () => {
+    it('handles multiple active steps (uses first one)', () => {
+      const stepsWithMultipleActive = [
+        { ...mockSteps[0], active: true },
+        { ...mockSteps[1], active: true },
+        { ...mockSteps[2] },
+      ];
+
+      renderProgressSteps({ steps: stepsWithMultipleActive });
+
+      const steps = screen.getAllByRole('listitem');
+      expect(steps[0]).toHaveAttribute('aria-current', 'step');
+    });
+
+    it('handles very long labels and descriptions', () => {
+      const stepsWithLongContent = [
+        {
+          icon: User03,
+          label: 'This is a very long label that should be truncated with line-clamp-1 class',
+          description: 'This is a very long description that should be truncated with line-clamp-2 class and it keeps going and going to test the line clamping behavior',
+          active: true,
+        },
+      ];
+
+      renderProgressSteps({ steps: stepsWithLongContent });
+
+      const label = screen.getByRole('list').querySelector('label');
+      const description = screen.getByRole('list').querySelector('p');
+
+      expect(label).toHaveClass('line-clamp-1');
+      expect(description).toHaveClass('line-clamp-2');
+    });
+
+    it('handles large number of steps', () => {
+      const manySteps = Array.from({ length: 10 }, (_, index) => ({
+        icon: User03,
+        label: `Step ${index + 1}`,
+        description: `Description for step ${index + 1}`,
+        active: index === 5,
+      }));
+
+      renderProgressSteps({ steps: manySteps });
+
+      const steps = screen.getAllByRole('listitem');
+      expect(steps).toHaveLength(10);
+
+      const separators = screen.getByRole('list').querySelectorAll('.h-\\[48px\\]');
+      expect(separators).toHaveLength(9);
+    });
+  });
+
+  describe('Key Generation', () => {
+    it('generates unique keys for steps', () => {
+      const stepsWithDuplicateLabels = [
+        { icon: User03, label: 'Step', description: 'First step' },
+        { icon: Briefcase01, label: 'Step', description: 'Second step' },
+        { icon: Building06, label: 'Step', description: 'Third step' },
+      ];
+
+      renderProgressSteps({ steps: stepsWithDuplicateLabels });
+
+      const steps = screen.getAllByRole('listitem');
+      expect(steps).toHaveLength(3);
+    });
+  });
+
+  describe('Snapshots', () => {
+    it('matches snapshot with default props', () => {
+      const { container } = renderProgressSteps();
+      expect(container).toMatchSnapshot();
+    });
+
+    it('matches snapshot with active step', () => {
+      const stepsWithActive = [
+        { ...mockSteps[0] },
+        { ...mockSteps[1], active: true },
+        { ...mockSteps[2] },
+      ];
+
+      const { container } = renderProgressSteps({ steps: stepsWithActive });
+      expect(container).toMatchSnapshot('with-active-step');
+    });
+
+    it('matches snapshot with single step', () => {
+      const { container } = renderProgressSteps({ steps: [ mockSteps[0] ] });
+      expect(container).toMatchSnapshot('single-step');
+    });
+
+    it('matches snapshot with all completed steps', () => {
+      const stepsAllCompleted = [
+        { ...mockSteps[0] },
+        { ...mockSteps[1] },
+        { ...mockSteps[2] },
+      ];
+
+      const { container } = renderProgressSteps({ steps: stepsAllCompleted });
+      expect(container).toMatchSnapshot('no-active-step');
+    });
+  });
+});

package/src/components/molecules/ProgressSteps/progress-steps.tsx

@@ -0,0 +1,140 @@
+import { ElementType, memo, useMemo } from 'react';
+
+import { Icon } from '@/components';
+import { cn } from '@/utils';
+
+const SEPARATOR_HEIGHT = 'h-[48px]';
+const SEPARATOR_WIDTH = 'w-[2px]';
+
+interface StepLabelProps {
+  label: string;
+}
+
+const StepLabel = memo(({ label }: StepLabelProps) => (
+  <label className="text-md font-semibold text-gray-700 line-clamp-1">
+    {label}
+  </label>
+));
+StepLabel.displayName = 'StepLabel';
+
+interface StepDescriptionProps {
+  description: string;
+}
+
+const StepDescription = memo(({ description }: StepDescriptionProps) => (
+  <p className="text-md text-gray-600 line-clamp-2">
+    {description}
+  </p>
+));
+StepDescription.displayName = 'StepDescription';
+
+interface StepProps {
+  icon: ElementType;
+  label: string;
+  description: string;
+  active?: boolean;
+  completed?: boolean;
+  hasSeparator?: boolean;
+  stepIndex?: number;
+}
+
+const Step = memo(({
+  icon,
+  label,
+  description,
+  active = false,
+  completed = false,
+  hasSeparator = false,
+  stepIndex = 0,
+}: StepProps) => {
+  const containerClasses = cn('flex gap-3', {
+    'opacity-50': !active,
+    'mb-1': hasSeparator,
+  });
+
+  const separatorClasses = cn(
+    SEPARATOR_HEIGHT,
+    SEPARATOR_WIDTH,
+    'bg-gray-200',
+    {
+      'opacity-50': active,
+    }
+  );
+
+  const iconVariant = (!active && !completed) ? 'secondary' : 'primary';
+
+  return (
+    <div
+      className={containerClasses}
+      role="listitem"
+      aria-current={active ? 'step' : undefined}
+    >
+      <div
+        className="flex flex-col items-center gap-1"
+        aria-hidden="true"
+      >
+        <Icon
+          icon={icon}
+          variant={iconVariant}
+          aria-label={`Step ${stepIndex + 1} icon`}
+        />
+        {hasSeparator && (
+          <div className={separatorClasses} />
+        )}
+      </div>
+      <div className="flex flex-col">
+        <StepLabel label={label} />
+        <StepDescription description={description} />
+      </div>
+    </div>
+  );
+});
+Step.displayName = 'Step';
+
+export interface ProgressStepsProps {
+  steps: Array<{
+    icon: ElementType;
+    label: string;
+    description: string;
+    active?: boolean;
+  }>;
+}
+
+const ProgressSteps = memo(({ steps }: ProgressStepsProps) => {
+  const activeStepIndex = useMemo(() =>
+    steps.findIndex(step => step.active),
+  [ steps ]
+  );
+
+  const enrichedSteps = useMemo(() =>
+    steps.map((step, index) => ({
+      ...step,
+      completed: activeStepIndex > index,
+      hasSeparator: index < steps.length - 1,
+    })),
+  [ steps, activeStepIndex ]
+  );
+
+  if (!steps?.length) {
+    return null;
+  }
+
+  return (
+    <div
+      className="flex flex-col"
+      role="list"
+      aria-label="Progress steps"
+    >
+      {enrichedSteps.map((step, index) => (
+        <Step
+          key={`${step.label}-${index}`}
+          {...step}
+          stepIndex={index}
+        />
+      ))}
+    </div>
+  );
+});
+ProgressSteps.displayName = 'ProgressSteps';
+
+export { ProgressSteps };

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

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

package/src/components/molecules/RadioGroup/radio-group.stories.tsx

@@ -0,0 +1,42 @@
+import { RadioGroup, RadioGroupItem } from './radio-group';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Label } from '@/components';
+
+const meta: Meta<typeof RadioGroup> = {
+  title: 'Components/Data Entry/RadioGroup',
+  component: RadioGroup,
+  tags: [ 'autodocs' ],
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'A set of checkable buttons—known as radio buttons—where no more than one of the buttons can be checked at a time.',
+      },
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => (
+    <RadioGroup defaultValue="comfortable">
+      <div className="flex items-center space-x-2">
+        <RadioGroupItem value="default" id="r1" variant="primary" />
+        <Label htmlFor="r1">Default</Label>
+      </div>
+      <div className="flex items-center space-x-2">
+        <RadioGroupItem value="comfortable" id="r2" variant="secondary" />
+        <Label htmlFor="r2">Comfortable</Label>
+      </div>
+      <div className="flex items-center space-x-2">
+        <RadioGroupItem value="compact" id="r3" variant="primary" />
+        <Label htmlFor="r3">Compact</Label>
+      </div>
+    </RadioGroup>
+  ),
+};

package/src/components/molecules/RadioGroup/radio-group.test.tsx

@@ -0,0 +1,22 @@
+import { composeStories } from '@storybook/react';
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+
+import * as stories from './radio-group.stories';
+
+const { Default } = composeStories(stories);
+
+describe('<RadioGroup />', () => {
+  it('should render the radio group', () => {
+    render(<Default />);
+
+    expect(screen.getByRole('radio', { name: 'Default' })).toBeInTheDocument();
+    expect(screen.getByRole('radio', { name: 'Comfortable' })).toBeInTheDocument();
+    expect(screen.getByRole('radio', { name: 'Compact' })).toBeInTheDocument();
+  });
+
+  it('matches snapshot', () => {
+    const { container } = render(<Default />);
+    expect(container).toMatchSnapshot();
+  });
+});