@brcarddev/frontend-commons 1.0.2

package/src/components/organisms/Carousel/carousel.tsx

@@ -0,0 +1,383 @@
+import * as React from 'react';
+
+import useEmblaCarousel, {
+  type UseEmblaCarouselType,
+} from 'embla-carousel-react';
+
+import { cn } from '@/utils/index';
+
+import { Button, ChevronLeft, ChevronRight } from '@/components';
+
+type CarouselApi = UseEmblaCarouselType[1]
+type UseCarouselParameters = Parameters<typeof useEmblaCarousel>
+type CarouselOptions = UseCarouselParameters[0]
+type CarouselPlugin = UseCarouselParameters[1]
+
+type CarouselProps = {
+  opts?: CarouselOptions
+  plugins?: CarouselPlugin
+  orientation?: 'horizontal' | 'vertical'
+  setApi?: (api: CarouselApi) => void
+}
+
+type CarouselContextProps = {
+  carouselRef: ReturnType<typeof useEmblaCarousel>[0]
+  api: ReturnType<typeof useEmblaCarousel>[1]
+  scrollPrev: () => void
+  scrollNext: () => void
+  scrollTo: (index: number) => void
+  canScrollPrev: boolean
+  canScrollNext: boolean
+  selectedIndex: number
+  snapCount: number
+} & CarouselProps
+
+const CarouselContext = React.createContext<CarouselContextProps | null>(null);
+
+function useCarousel() {
+  const context = React.useContext(CarouselContext);
+
+  if (!context) {
+    throw new Error('useCarousel must be used within a <Carousel />');
+  }
+
+  return context;
+}
+
+function Carousel({
+  orientation = 'horizontal',
+  opts,
+  setApi,
+  plugins,
+  className,
+  children,
+  ...props
+}: React.ComponentProps<'div'> & CarouselProps) {
+  const [ carouselRef, api ] = useEmblaCarousel(
+    {
+      ...opts,
+      axis: orientation === 'horizontal' ? 'x' : 'y',
+    },
+    plugins
+  );
+  const [ canScrollPrev, setCanScrollPrev ] = React.useState(false);
+  const [ canScrollNext, setCanScrollNext ] = React.useState(false);
+  const [ selectedIndex, setSelectedIndex ] = React.useState(0);
+  const [ snapCount, setSnapCount ] = React.useState(0);
+
+  const onSelect = React.useCallback((api: CarouselApi) => {
+    if (!api) return;
+
+    setCanScrollPrev(api.canScrollPrev());
+    setCanScrollNext(api.canScrollNext());
+    setSelectedIndex(api.selectedScrollSnap());
+    setSnapCount(api.scrollSnapList().length);
+  }, []);
+
+  const scrollPrev = React.useCallback(() => {
+    api?.scrollPrev();
+  }, [ api ]);
+
+  const scrollNext = React.useCallback(() => {
+    api?.scrollNext();
+  }, [ api ]);
+
+  const scrollTo = React.useCallback((index: number) => {
+    api?.scrollTo(index);
+  }, [ api ]);
+
+  const handleKeyDown = React.useCallback(
+    (event: React.KeyboardEvent<HTMLDivElement>) => {
+      if (event.key === 'ArrowLeft') {
+        event.preventDefault();
+        scrollPrev();
+      } else if (event.key === 'ArrowRight') {
+        event.preventDefault();
+        scrollNext();
+      }
+    },
+    [ scrollPrev, scrollNext ]
+  );
+
+  React.useEffect(() => {
+    if (!api || !setApi) return;
+
+    setApi(api);
+  }, [ api, setApi ]);
+
+  React.useEffect(() => {
+    if (!api) return;
+
+    onSelect(api);
+    api.on('reInit', onSelect);
+    api.on('select', onSelect);
+
+    return () => {
+      api?.off('select', onSelect);
+    };
+  }, [ api, onSelect ]);
+
+  return (
+    <CarouselContext.Provider
+      value={{
+        carouselRef,
+        api,
+        opts,
+        orientation:
+          orientation || (opts?.axis === 'y' ? 'vertical' : 'horizontal'),
+        scrollPrev,
+        scrollNext,
+        scrollTo,
+        canScrollPrev,
+        canScrollNext,
+        selectedIndex,
+        snapCount,
+      }}
+    >
+      <div
+        onKeyDownCapture={handleKeyDown}
+        className={cn('relative', className)}
+        role="region"
+        aria-roledescription="carousel"
+        data-slot="carousel"
+        {...props}
+      >
+        {children}
+      </div>
+    </CarouselContext.Provider>
+  );
+}
+
+function CarouselContent({ className, ...props }: React.ComponentProps<'div'>) {
+  const { carouselRef, orientation } = useCarousel();
+
+  return (
+    <div
+      ref={carouselRef}
+      className="overflow-hidden"
+      data-slot="carousel-content"
+    >
+      <div
+        className={cn(
+          'flex',
+          orientation === 'horizontal' ? '-ml-4' : '-mt-4 flex-col',
+          className
+        )}
+        {...props}
+      />
+    </div>
+  );
+}
+
+function CarouselItem({ className, ...props }: React.ComponentProps<'div'>) {
+  const { orientation } = useCarousel();
+
+  return (
+    <div
+      role="group"
+      aria-roledescription="slide"
+      data-slot="carousel-item"
+      className={cn(
+        'min-w-0 shrink-0 grow-0 basis-full',
+        orientation === 'horizontal' ? 'pl-4' : 'pt-4',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function CarouselPrevious({
+  className,
+  variant = 'outline',
+  placement = 'floating',
+  ...props
+}: Omit<React.ComponentProps<typeof Button>, 'children' | 'variant' | 'size' > & { placement?: 'floating' | 'inline', variant?: 'overlay' | 'outline' }) {
+  const { orientation, scrollPrev, canScrollPrev } = useCarousel();
+
+  return (
+    <Button
+      data-slot="carousel-previous"
+      variant='ghost'
+      size='icon'
+      className={cn(
+        variant === 'overlay' ? 'text-white hover:text-brand-600!' : 'text-gray-400',
+        placement === 'floating'
+          ? orientation === 'horizontal'
+            ? 'absolute top-1/2 -left-12 -translate-y-1/2'
+            : 'absolute -top-12 left-1/2 -translate-x-1/2 rotate-90'
+          : '',
+        className
+      )}
+      disabled={!canScrollPrev}
+      onClick={scrollPrev}
+      {...props}
+    >
+      <ChevronLeft className='size-5' />
+      <span className="sr-only">Previous slide</span>
+    </Button>
+  );
+}
+
+function CarouselNext({
+  className,
+  variant = 'outline',
+  placement = 'floating',
+  ...props
+}: Omit<React.ComponentProps<typeof Button>, 'children' | 'variant' | 'size' > & { placement?: 'floating' | 'inline', variant?: 'overlay' | 'outline' }) {
+  const { orientation, scrollNext, canScrollNext } = useCarousel();
+
+  return (
+    <Button
+      data-slot="carousel-next"
+      variant='ghost'
+      size='icon'
+      className={cn(
+        variant === 'overlay' ? 'text-white hover:text-brand-600!' : 'text-gray-400',
+        placement === 'floating'
+          ? orientation === 'horizontal'
+            ? 'absolute top-1/2 -right-12 -translate-y-1/2'
+            : 'absolute -bottom-12 left-1/2 -translate-x-1/2 rotate-90'
+          : '',
+        className
+      )}
+      disabled={!canScrollNext}
+      onClick={scrollNext}
+      {...props}
+    >
+      <ChevronRight className='size-5' />
+      <span className="sr-only">Next slide</span>
+    </Button>
+  );
+}
+
+function CarouselDots({
+  className,
+  dotClassName,
+  activeDotClassName,
+  'aria-label': ariaLabel = 'Carousel pagination',
+  ...props
+}: React.ComponentProps<'div'> & {
+  dotClassName?: string
+  activeDotClassName?: string
+}) {
+  const { selectedIndex, snapCount, scrollTo } = useCarousel();
+
+  if (snapCount <= 1) return null;
+
+  return (
+    <div
+      role="tablist"
+      aria-label={ariaLabel}
+      className={cn('flex items-center gap-1', className)}
+      data-slot="carousel-dots"
+      {...props}
+    >
+      {Array.from({ length: snapCount }).map((_, index) => {
+        const isActive = index === selectedIndex;
+        return (
+          <button
+            key={index}
+            type="button"
+            role="tab"
+            aria-selected={isActive}
+            aria-label={`Go to slide ${index + 1}`}
+            onClick={() => scrollTo(index)}
+            className={cn(
+              'h-6 w-6 rounded-full flex items-center justify-center cursor-pointer transition-all hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-brand-600',
+              dotClassName,
+              isActive && activeDotClassName
+            )}
+          >
+            <div className={cn('size-1 rounded-full flex-shrink-0 transition-all', isActive ? 'bg-white ring-4 ring-brand-600' : 'bg-gray-400')} />
+          </button>
+        );
+      })}
+    </div>
+  );
+}
+
+type CarouselControlsProps = React.ComponentProps<'div'> & {
+  showPrev?: boolean
+  showNext?: boolean
+  showDots?: boolean
+  gapClassName?: string
+  prevProps?: Partial<React.ComponentProps<typeof CarouselPrevious>>
+  nextProps?: Partial<React.ComponentProps<typeof CarouselNext>>
+  dotsProps?: Partial<React.ComponentProps<typeof CarouselDots>>
+  variant?: 'overlay' | 'outline'
+}
+
+function CarouselControls({
+  className,
+  showPrev = true,
+  showNext = true,
+  showDots = true,
+  gapClassName = 'gap-1',
+  prevProps,
+  nextProps,
+  dotsProps,
+  variant = 'overlay',
+  ...props
+}: CarouselControlsProps) {
+  return (
+    <div
+      className={cn('flex items-center justify-center', gapClassName, className)}
+      data-slot="carousel-controls"
+      {...props}
+    >
+      {showPrev ? <CarouselPrevious placement="inline" variant={variant} {...prevProps} /> : null}
+      {showDots ? <CarouselDots {...dotsProps} /> : null}
+      {showNext ? <CarouselNext placement="inline" variant={variant} {...nextProps} /> : null}
+    </div>
+  );
+}
+
+type OverlayPosition = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'center'
+
+function CarouselOverlay({
+  position = 'bottom-right',
+  className,
+  children,
+  ...props
+}: React.ComponentProps<'div'> & { position?: OverlayPosition }) {
+  const positionClass =
+    position === 'top-left'
+      ? 'top-6 left-6'
+      : position === 'top-right'
+        ? 'top-6 right-6'
+        : position === 'bottom-left'
+          ? 'bottom-6 left-6'
+          : position === 'center'
+            ? 'inset-0 flex items-center justify-center'
+            : 'bottom-6 right-6';
+
+  return (
+    <div
+      className={cn(
+        'pointer-events-auto absolute z-10',
+        position === 'center' ? '' : positionClass,
+        className
+      )}
+      data-slot="carousel-overlay"
+      {...props}
+    >
+      {children ?? (
+        <div>
+          <CarouselControls variant="overlay" />
+        </div>
+      )}
+    </div>
+  );
+}
+
+export {
+  Carousel, type CarouselApi,
+  CarouselContent,
+  CarouselControls,
+  CarouselDots,
+  CarouselItem,
+  CarouselNext,
+  CarouselOverlay, CarouselPrevious,
+};
+

package/src/components/organisms/Carousel/index.ts

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

package/src/components/organisms/Chart/chart.stories.tsx

@@ -0,0 +1,102 @@
+// src/components/ChartContainer/ChartContainer.stories.tsx
+
+import { Meta, StoryObj } from '@storybook/react';
+import { CartesianGrid, Legend, Line, LineChart, Tooltip, XAxis, YAxis } from 'recharts';
+
+import { ChartContainer, ChartLegendContent, ChartTooltipContent } from './chart';
+
+const meta: Meta<typeof ChartContainer> = {
+  title: 'Components/Data Display/ChartContainer',
+  component: ChartContainer,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'Container for charts using Recharts with support for themes and custom styles.',
+      },
+    },
+  },
+  tags: [ 'autodocs' ],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof ChartContainer>;
+
+const sampleData = [
+  { name: 'Jan', uv: 400, pv: 240 },
+  { name: 'Feb', uv: 300, pv: 139 },
+  { name: 'Mar', uv: 200, pv: 980 },
+  { name: 'Apr', uv: 278, pv: 390 },
+  { name: 'May', uv: 189, pv: 480 },
+];
+
+const config = {
+  uv: {
+    label: 'Usuários',
+    color: '#8884d8',
+  },
+  pv: {
+    label: 'Visualizações',
+    color: '#82ca9d',
+  },
+};
+
+export const CustomColors: Story = {
+  render: () => (
+    <ChartContainer
+      config={{
+        uv: {
+          label: 'Usuários',
+          color: '#ff7300',
+        },
+        pv: {
+          label: 'Visualizações',
+          color: '#387908',
+        },
+      }}
+    >
+      <LineChart data={sampleData}>
+        <CartesianGrid strokeDasharray="3 3" />
+        <XAxis dataKey="name" />
+        <YAxis />
+        <Tooltip content={<ChartTooltipContent />} />
+        <Legend content={<ChartLegendContent />} />
+        <Line type="monotone" dataKey="uv" stroke="#ff7300" />
+        <Line type="monotone" dataKey="pv" stroke="#387908" />
+      </LineChart>
+    </ChartContainer>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Example of ChartContainer with custom colors for each line of the chart.',
+      },
+    },
+  },
+};
+
+export const Default: Story = {
+  render: () => (
+    <ChartContainer config={config}>
+      <LineChart data={sampleData}>
+        <CartesianGrid strokeDasharray="3 3" />
+        <XAxis dataKey="name" />
+        <YAxis />
+        <Tooltip content={<ChartTooltipContent />} />
+        <Legend content={<ChartLegendContent />} />
+        <Line type="monotone" dataKey="uv" stroke="#8884d8" />
+        <Line type="monotone" dataKey="pv" stroke="#82ca9d" />
+      </LineChart>
+    </ChartContainer>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Example of the default ChartContainer with two sets of data: Users and Views.',
+      },
+    },
+  },
+};

package/src/components/organisms/Chart/chart.test.tsx

@@ -0,0 +1,105 @@
+import { render } from '@testing-library/react';
+import { Legend, Line, LineChart, Tooltip, XAxis, YAxis } from 'recharts';
+import { describe, expect, it, vi } from 'vitest';
+
+import { ChartContainer, ChartLegendContent, ChartTooltipContent } from './chart';
+
+const chartConfig = {
+  views: {
+    label: 'View',
+    color: '#4f46e5',
+  },
+  clicks: {
+    label: 'Clicks',
+    color: '#ec4899',
+  },
+};
+
+const mockData = [
+  { name: 'Jan', views: 400, clicks: 240 },
+  { name: 'Feb', views: 300, clicks: 139 },
+];
+
+const renderChart = () => {
+  return render(
+    <ChartContainer config={chartConfig} data-testid="chart-container">
+      <LineChart data={mockData}>
+        <XAxis dataKey="name" />
+        <YAxis />
+        <Tooltip content={<ChartTooltipContent />} />
+        <Legend content={<ChartLegendContent />} />
+        <Line type="monotone" dataKey="views" stroke="#4f46e5" />
+      </LineChart>
+    </ChartContainer>
+  );
+};
+
+describe('<Chart />', () => {
+  it('renders ChartContainer with children and chart config', () => {
+    const { getByTestId } = renderChart();
+
+    expect(getByTestId('chart-container')).toBeInTheDocument();
+  });
+
+  it('renders legend with correct labels and colors', () => {
+    const { getByText } = render(
+      <ChartContainer config={chartConfig}>
+        <ChartLegendContent
+          payload={[
+            { dataKey: 'views', value: 'views', color: '#4f46e5' },
+            { dataKey: 'clicks', value: 'clicks', color: '#ec4899' },
+          ]}
+        />
+      </ChartContainer>
+    );
+
+    expect(getByText('View')).toBeInTheDocument();
+    expect(getByText('Clicks')).toBeInTheDocument();
+  });
+
+  it('throws error when useChart is used outside ChartContainer', () => {
+    const consoleError = vi.spyOn(console, 'error').mockImplementation(() => {});
+
+    expect(() => {
+      render(<ChartTooltipContent />);
+    }).toThrow('useChart must be used within a <ChartContainer />');
+
+    consoleError.mockRestore();
+  });
+
+  it('renders tooltip content with formatted label and value', () => {
+    const { container } = render(
+      <ChartContainer config={chartConfig}>
+        <ChartTooltipContent
+          active
+          payload={[
+            {
+              name: 'views',
+              value: 400,
+              payload: { fill: '#4f46e5' },
+              dataKey: 'views',
+            },
+          ]}
+        />
+      </ChartContainer>
+    );
+
+    expect(container.textContent).toContain('View');
+    expect(container.textContent).toContain('400');
+  });
+
+  it('does not render tooltip if not active', () => {
+    const { queryByTestId } = render(
+      <ChartContainer config={chartConfig}>
+        <ChartTooltipContent active={false} />
+      </ChartContainer>
+    );
+
+    expect(queryByTestId('chart-tooltip')).toBeNull();
+  });
+
+  it('should match snapshot', () => {
+    const { container } = renderChart();
+    expect(container).toMatchSnapshot();
+  });
+});