@brcarddev/frontend-commons 1.0.2

package/src/components/molecules/HoverCard/hover-card.test.tsx

@@ -0,0 +1,42 @@
+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 './hover-card.stories';
+
+const { Default } = composeStories(stories);
+
+describe('<HoverCard />', () => {
+  const renderHoverCard = () => render(<Default />);
+
+  it('should render the hover card trigger', () => {
+    renderHoverCard();
+
+    expect(screen.getByTestId('hover-card-trigger')).toBeInTheDocument();
+  });
+
+  it('should render the hover card content', async () => {
+    renderHoverCard();
+
+    await userEvent.hover(screen.getByTestId('hover-card-trigger'));
+
+    expect(screen.getByTestId('hover-card-content')).toBeInTheDocument();
+  });
+
+  it('should close the hover card when the trigger is hovered out', async () => {
+    renderHoverCard();
+
+    await userEvent.hover(screen.getByTestId('hover-card-trigger'));
+
+    await userEvent.unhover(screen.getByTestId('hover-card-trigger'));
+
+    expect(screen.queryByTestId('hover-card-content')).not.toBeInTheDocument();
+  });
+
+  it('matches snapshot', () => {
+    const { container } = renderHoverCard();
+
+    expect(container).toMatchSnapshot();
+  });
+});

package/src/components/molecules/HoverCard/hover-card.tsx

@@ -0,0 +1,44 @@
+import * as React from 'react';
+
+import * as HoverCardPrimitive from '@radix-ui/react-hover-card';
+
+import { cn } from '@/utils/index';
+
+function HoverCard({
+  ...props
+}: React.ComponentProps<typeof HoverCardPrimitive.Root>) {
+  return <HoverCardPrimitive.Root data-slot="hover-card" data-testid="hover-card" {...props} />;
+}
+
+function HoverCardTrigger({
+  ...props
+}: React.ComponentProps<typeof HoverCardPrimitive.Trigger>) {
+  return (
+    <HoverCardPrimitive.Trigger data-slot="hover-card-trigger" data-testid="hover-card-trigger" {...props} />
+  );
+}
+
+function HoverCardContent({
+  className,
+  align = 'center',
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof HoverCardPrimitive.Content>) {
+  return (
+    <HoverCardPrimitive.Portal data-slot="hover-card-portal" data-testid="hover-card-portal">
+      <HoverCardPrimitive.Content
+        data-slot="hover-card-content"
+        data-testid="hover-card-content"
+        align={align}
+        sideOffset={sideOffset}
+        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 w-64 origin-(--radix-hover-card-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden',
+          className
+        )}
+        {...props}
+      />
+    </HoverCardPrimitive.Portal>
+  );
+}
+
+export { HoverCard, HoverCardContent, HoverCardTrigger };

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

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

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

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

package/src/components/molecules/InputOTP/input-otp.stories.tsx

@@ -0,0 +1,52 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot } from './input-otp';
+
+const meta: Meta<typeof InputOTP> = {
+  title: 'Components/Data entry/InputOTP',
+  component: InputOTP,
+  tags: [ 'autodocs' ],
+  args: {
+    maxLength: 6,
+  },
+  parameters: {
+    layout: 'centered',
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof InputOTP>;
+
+export const Default: Story = {
+  render: () => (
+    <InputOTP maxLength={6}>
+      <InputOTPGroup>
+        <InputOTPSlot index={0} />
+        <InputOTPSlot index={1} />
+        <InputOTPSlot index={2} />
+      </InputOTPGroup>
+      <InputOTPSeparator />
+      <InputOTPGroup>
+        <InputOTPSlot index={3} />
+        <InputOTPSlot index={4} />
+        <InputOTPSlot index={5} />
+      </InputOTPGroup>
+    </InputOTP>
+  ),
+};
+
+export const Disabled: Story = {
+  args: {
+    disabled: true,
+  },
+  render: () => (
+    <InputOTP maxLength={6} disabled>
+      <InputOTPGroup>
+        <InputOTPSlot index={0} />
+        <InputOTPSlot index={1} />
+        <InputOTPSlot index={2} />
+      </InputOTPGroup>
+    </InputOTP>
+  ),
+};

package/src/components/molecules/InputOTP/input-otp.test.tsx

@@ -0,0 +1,28 @@
+import { composeStories } from '@storybook/react';
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+
+import * as stories from './input-otp.stories';
+
+const { Default, Disabled } = composeStories(stories);
+
+describe('<InputOTP />', () => {
+  it('should render a text input by default', () => {
+    render(<Default />);
+
+    const inputOTP = screen.getByRole('textbox');
+    expect(inputOTP).toBeInTheDocument();
+  });
+
+  it('should disable input when disabled prop is true', () => {
+    render(<Disabled />);
+    const inputOTP = screen.getByRole('textbox');
+    expect(inputOTP).toBeDisabled();
+  });
+
+  it('matches snapshot', () => {
+    const { container } = render(<Default />);
+    expect(container).toMatchSnapshot();
+  });
+});
+

package/src/components/molecules/InputOTP/input-otp.tsx

@@ -0,0 +1,76 @@
+import * as React from 'react';
+
+import { OTPInput, OTPInputContext } from 'input-otp';
+import { MinusIcon } from 'lucide-react';
+
+import { cn } from '@/utils/index';
+
+function InputOTP({
+  className,
+  containerClassName,
+  ...props
+}: React.ComponentProps<typeof OTPInput> & {
+  containerClassName?: string
+}) {
+  return (
+    <OTPInput
+      data-slot="input-otp"
+      containerClassName={cn(
+        'flex items-center gap-2 has-disabled:opacity-50',
+        containerClassName
+      )}
+      className={cn('disabled:cursor-not-allowed', className)}
+      {...props}
+    />
+  );
+}
+
+function InputOTPGroup({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="input-otp-group"
+      className={cn('flex items-center gap-5', className)}
+      {...props}
+    />
+  );
+}
+
+function InputOTPSlot({
+  index,
+  className,
+  ...props
+}: React.ComponentProps<'div'> & {
+  index: number
+}) {
+  const inputOTPContext = React.useContext(OTPInputContext);
+  const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {};
+
+  return (
+    <div
+      data-slot="input-otp-slot"
+      data-active={isActive}
+      className={cn(
+        'data-[active=true]:ring-primary data-[active=true]:ring-offset-2 data-[active=true]:ring-[2px] aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive border relative flex h-10 w-10 items-center justify-center text-sm shadow-xs transition-all outline-none rounded-lg data-[active=true]:z-10',
+        className
+      )}
+      {...props}
+    >
+      {char}
+      {hasFakeCaret && (
+        <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
+          <div className="animate-caret-blink bg-foreground h-4 w-px duration-1000" />
+        </div>
+      )}
+    </div>
+  );
+}
+
+function InputOTPSeparator({ ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div data-slot="input-otp-separator" role="separator" {...props}>
+      <MinusIcon />
+    </div>
+  );
+}
+
+export { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot };

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

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

package/src/components/molecules/Menubar/menubar.stories.tsx

@@ -0,0 +1,113 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { Menubar, MenubarSubTrigger, MenubarSub, MenubarContent, MenubarItem, MenubarMenu, MenubarSeparator, MenubarShortcut, MenubarTrigger, MenubarSubContent, MenubarCheckboxItem, MenubarRadioGroup, MenubarRadioItem } from './menubar';
+
+const meta: Meta<typeof Menubar> = {
+  title: 'Components/Data display/Menubar',
+  component: Menubar,
+  tags: [ 'autodocs' ],
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'A visually persistent menu commonly found in desktop applications that provides quick access to a consistent set of commands.',
+      },
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Menubar>;
+
+export const Default: Story = {
+  render: () => (
+    <Menubar>
+      <MenubarMenu>
+        <MenubarTrigger>File</MenubarTrigger>
+        <MenubarContent>
+          <MenubarItem>
+          New Tab <MenubarShortcut>⌘T</MenubarShortcut>
+          </MenubarItem>
+          <MenubarItem>
+          New Window <MenubarShortcut>⌘N</MenubarShortcut>
+          </MenubarItem>
+          <MenubarItem disabled>New Incognito Window</MenubarItem>
+          <MenubarSeparator />
+          <MenubarSub>
+            <MenubarSubTrigger>Share</MenubarSubTrigger>
+            <MenubarSubContent>
+              <MenubarItem>Email link</MenubarItem>
+              <MenubarItem>Messages</MenubarItem>
+              <MenubarItem>Notes</MenubarItem>
+            </MenubarSubContent>
+          </MenubarSub>
+          <MenubarSeparator />
+          <MenubarItem>
+          Print... <MenubarShortcut>⌘P</MenubarShortcut>
+          </MenubarItem>
+        </MenubarContent>
+      </MenubarMenu>
+      <MenubarMenu>
+        <MenubarTrigger>Edit</MenubarTrigger>
+        <MenubarContent>
+          <MenubarItem>
+          Undo <MenubarShortcut>⌘Z</MenubarShortcut>
+          </MenubarItem>
+          <MenubarItem>
+          Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>
+          </MenubarItem>
+          <MenubarSeparator />
+          <MenubarSub>
+            <MenubarSubTrigger>Find</MenubarSubTrigger>
+            <MenubarSubContent>
+              <MenubarItem>Search the web</MenubarItem>
+              <MenubarSeparator />
+              <MenubarItem>Find...</MenubarItem>
+              <MenubarItem>Find Next</MenubarItem>
+              <MenubarItem>Find Previous</MenubarItem>
+            </MenubarSubContent>
+          </MenubarSub>
+          <MenubarSeparator />
+          <MenubarItem>Cut</MenubarItem>
+          <MenubarItem>Copy</MenubarItem>
+          <MenubarItem>Paste</MenubarItem>
+        </MenubarContent>
+      </MenubarMenu>
+      <MenubarMenu>
+        <MenubarTrigger>View</MenubarTrigger>
+        <MenubarContent>
+          <MenubarCheckboxItem>Always Show Bookmarks Bar</MenubarCheckboxItem>
+          <MenubarCheckboxItem checked>
+          Always Show Full URLs
+          </MenubarCheckboxItem>
+          <MenubarSeparator />
+          <MenubarItem inset>
+          Reload <MenubarShortcut>⌘R</MenubarShortcut>
+          </MenubarItem>
+          <MenubarItem disabled inset>
+          Force Reload <MenubarShortcut>⇧⌘R</MenubarShortcut>
+          </MenubarItem>
+          <MenubarSeparator />
+          <MenubarItem inset>Toggle Fullscreen</MenubarItem>
+          <MenubarSeparator />
+          <MenubarItem inset>Hide Sidebar</MenubarItem>
+        </MenubarContent>
+      </MenubarMenu>
+      <MenubarMenu>
+        <MenubarTrigger>Profiles</MenubarTrigger>
+        <MenubarContent>
+          <MenubarRadioGroup value="benoit">
+            <MenubarRadioItem value="andy">Andy</MenubarRadioItem>
+            <MenubarRadioItem value="benoit">Benoit</MenubarRadioItem>
+            <MenubarRadioItem value="Luis">Luis</MenubarRadioItem>
+          </MenubarRadioGroup>
+          <MenubarSeparator />
+          <MenubarItem inset>Edit...</MenubarItem>
+          <MenubarSeparator />
+          <MenubarItem inset>Add Profile...</MenubarItem>
+        </MenubarContent>
+      </MenubarMenu>
+    </Menubar>
+  ),
+};

package/src/components/molecules/Menubar/menubar.test.tsx

@@ -0,0 +1,42 @@
+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 './menubar.stories';
+
+const { Default } = composeStories(stories);
+
+describe('<Menubar />', () => {
+  const renderMenubar = () => render(<Default />);
+
+  it('should render a menubar', () => {
+    renderMenubar();
+
+    const menubar = screen.getByRole('menubar');
+    expect(menubar).toBeInTheDocument();
+  });
+
+  it('should render a menubar trigger', () => {
+    renderMenubar();
+
+    const [ firstTrigger ] = screen.getAllByTestId('menubar-trigger');
+    expect(firstTrigger).toBeInTheDocument();
+  });
+
+  it('should open the menubar when the trigger is clicked', async () => {
+    renderMenubar();
+
+    const [ firstTrigger ] = screen.getAllByTestId('menubar-trigger');
+
+    await userEvent.click(firstTrigger);
+
+    const menubarContent = screen.getByTestId('menubar-content');
+    expect(menubarContent).toBeInTheDocument();
+  });
+
+  it('matches snapshot', () => {
+    const { container } = renderMenubar();
+    expect(container).toMatchSnapshot();
+  });
+});