@tpzdsp/next-toolkit 1.0.1

package/src/components/ErrorText/ErrorText.stories.tsx

@@ -0,0 +1,34 @@
+/* eslint-disable storybook/no-renderer-packages */
+import type { Meta, StoryFn } from '@storybook/react';
+
+import { ErrorText, type ErrorTextProps } from './ErrorText';
+
+export default {
+  children: 'Error text',
+  component: ErrorText,
+} as Meta;
+
+const Template: StoryFn<ErrorTextProps> = (args) => <ErrorText {...args} />;
+
+export const DefaultError = Template.bind({});
+DefaultError.args = {
+  children: 'Error message',
+};
+
+export const CustomStyling = Template.bind({});
+CustomStyling.args = {
+  className: 'text-3xl',
+  children: 'Error message with large text',
+};
+
+export const ComplexChildren = Template.bind({});
+ComplexChildren.args = {
+  children: (
+    <div>
+      Error message with link{' '}
+      <a className="underline text-link" href="/">
+        Link
+      </a>
+    </div>
+  ),
+};

package/src/components/ErrorText/ErrorText.test.tsx

@@ -0,0 +1,35 @@
+import { describe, expect, it } from 'vitest';
+
+import { ErrorText } from './ErrorText';
+import { render, screen } from '../../utils/renderers';
+
+describe('ErrorText', () => {
+  it('renders with default ErrorText', () => {
+    render(<ErrorText>Error message</ErrorText>);
+
+    expect(screen.getByRole('alert')).toHaveTextContent(/error message/i);
+  });
+
+  it('renders with custom styles', () => {
+    render(<ErrorText className="bg-orange-500">Error text</ErrorText>);
+
+    const error = screen.getByRole('alert');
+
+    expect(error).toHaveClass(/bg-orange-500/i);
+    expect(error).not.toHaveClass(/bg-green-500/i);
+    expect(error).toHaveTextContent(/error text/i);
+  });
+
+  it('renders with complex children', () => {
+    render(
+      <ErrorText>
+        <a href="/">Error link</a>
+      </ErrorText>,
+    );
+
+    const linkElement = screen.getByRole('link', { name: /error link/i });
+
+    expect(linkElement).toBeInTheDocument();
+    expect(linkElement).toHaveAttribute('href', '/');
+  });
+});

package/src/components/ErrorText/ErrorText.tsx

@@ -0,0 +1,17 @@
+import { twMerge } from 'tailwind-merge';
+
+import type { ExtendProps } from '../../types';
+
+export type ErrorTextProps = ExtendProps<'p'>;
+
+export const ErrorText = ({ className, children, ...props }: ErrorTextProps) => {
+  return (
+    <p
+      role="alert"
+      className={twMerge('mb-3 text-base text-error font-bold', className)}
+      {...props}
+    >
+      {children}
+    </p>
+  );
+};

package/src/components/Heading/Heading.stories.tsx

@@ -0,0 +1,21 @@
+/* eslint-disable storybook/no-renderer-packages */
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Heading, type HeadingProps } from './Heading';
+
+export default {
+  children: 'Heading',
+  component: Heading,
+} as Meta;
+
+export const AllHeadings: StoryObj<typeof Heading> = {
+  render: () => (
+    <div>
+      {(['h1', 'h2', 'h3', 'h4', 'h5', 'h6'] as HeadingProps['type'][]).map((type) => (
+        <Heading key={type} type={type}>
+          {type.toUpperCase()} Example
+        </Heading>
+      ))}
+    </div>
+  ),
+};

package/src/components/Heading/Heading.test.tsx

@@ -0,0 +1,24 @@
+import { describe, expect, it } from 'vitest';
+
+import { Heading, type HeadingProps } from './Heading';
+import { render, screen } from '../../utils/renderers';
+
+describe('Heading Component', () => {
+  const headingTypes: HeadingProps['type'][] = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
+
+  it.each(headingTypes)('renders correct HTML element for type "%s"', (type) => {
+    render(<Heading type={type}>Test {type}</Heading>);
+
+    const heading = screen.getByRole('heading', { name: `Test ${type}` });
+
+    expect(heading).toBeInTheDocument();
+  });
+
+  it.each(headingTypes)('applies correct styles for type "%s"', (type) => {
+    render(<Heading type={type}>Styled {type}</Heading>);
+
+    const heading = screen.getByText(`Styled ${type}`);
+
+    expect(heading).toHaveClass('font-bold text-text-primary');
+  });
+});

package/src/components/Heading/Heading.tsx

@@ -0,0 +1,21 @@
+export type HeadingProps = {
+  type: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+  children: React.ReactNode;
+};
+
+export const Heading = ({ type, children }: HeadingProps) => {
+  switch (type) {
+    case 'h1':
+      return <h1 className="py-4 text-4xl font-bold text-text-primary">{children}</h1>;
+    case 'h2':
+      return <h2 className="py-3 text-3xl font-bold text-text-primary">{children}</h2>;
+    case 'h3':
+      return <h3 className="py-3 text-xl font-bold text-text-primary">{children}</h3>;
+    case 'h4':
+      return <h4 className="py-3 text-lg font-bold text-text-primary">{children}</h4>;
+    case 'h5':
+      return <h5 className="py-2 text-base font-bold text-text-primary">{children}</h5>;
+    case 'h6':
+      return <h6 className="py-2 text-sm font-bold text-text-primary">{children}</h6>;
+  }
+};

package/src/components/Hint/Hint.stories.tsx

@@ -0,0 +1,40 @@
+/* eslint-disable storybook/no-renderer-packages */
+import type { Meta, StoryFn } from '@storybook/react';
+import { fn } from '@storybook/test';
+
+import { Hint, type HintProps } from './Hint';
+import { Button } from '../Button/Button';
+
+export default {
+  children: 'Hint',
+  component: Hint,
+} as Meta;
+
+const Template: StoryFn<HintProps> = (args) => <Hint {...args} />;
+
+export const DefaultHint = Template.bind({});
+DefaultHint.args = {
+  children: 'Hint message',
+};
+
+export const CustomStyling = Template.bind({});
+CustomStyling.args = {
+  className: 'text-3xl',
+  children: 'Error message with extra large text',
+};
+
+export const ComplexChildren = Template.bind({});
+ComplexChildren.args = {
+  children: (
+    <div>
+      Hint message with link and button{' '}
+      <a className="underline text-link" href="/">
+        Link
+      </a>
+      {/* // eslint-disable-next-line custom/padding-between-jsx-elements */}
+      <Button variant="primary" onClick={fn()}>
+        Click
+      </Button>
+    </div>
+  ),
+};

package/src/components/Hint/Hint.test.tsx

@@ -0,0 +1,35 @@
+import { describe, expect, it } from 'vitest';
+
+import { Hint } from './Hint';
+import { render, screen } from '../../utils/renderers';
+
+describe('Hint', () => {
+  it('renders with default Hint message', () => {
+    render(<Hint>Hint text</Hint>);
+    expect(screen.getByText(/hint text/i)).toHaveTextContent(/hint text/i);
+  });
+
+  it('renders with custom styles', () => {
+    render(<Hint className="bg-orange-500">hint message</Hint>);
+
+    const hintElement = screen.getByText(/hint message/i);
+
+    expect(hintElement).toHaveClass(/bg-orange-500/i);
+    expect(hintElement).not.toHaveClass(/bg-green-500/i);
+  });
+
+  it('renders with complex children', () => {
+    render(
+      <Hint>
+        Some description text <a href="/">Link</a>
+      </Hint>,
+    );
+
+    const linkElement = screen.getByRole('link', { name: /link/i });
+
+    expect(screen.getByText(/some description text/i)).toBeInTheDocument();
+
+    expect(linkElement).toBeInTheDocument();
+    expect(linkElement).toHaveAttribute('href', '/');
+  });
+});

package/src/components/Hint/Hint.tsx

@@ -0,0 +1,13 @@
+import { twMerge } from 'tailwind-merge';
+
+import type { ExtendProps } from '../../types';
+
+export type HintProps = ExtendProps<'div'>;
+
+export const Hint = ({ className, children, ...props }: HintProps) => {
+  return (
+    <div className={twMerge('mb-2 text-lg text-text-secondary', className)} {...props}>
+      {children}
+    </div>
+  );
+};

package/src/components/Paragraph/Paragraph.stories.tsx

@@ -0,0 +1,30 @@
+/* eslint-disable storybook/no-renderer-packages */
+import type { Meta, StoryFn } from '@storybook/react';
+
+import { Paragraph, type ParagraphProps } from './Paragraph';
+
+export default {
+  children: 'Paragraph',
+  component: Paragraph,
+} as Meta;
+
+const Template: StoryFn<ParagraphProps> = (args) => <Paragraph {...args} />;
+
+export const JustText = Template.bind({});
+JustText.args = {
+  children: 'Hello, this is some simple text',
+};
+
+export const ImageAndText = Template.bind({});
+ImageAndText.args = {
+  children: (
+    <div>
+      <img
+        src="https://images.unsplash.com/photo-1563991655280-cb95c90ca2fb?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8M3x8bm8lMjBjb3B5cmlnaHR8ZW58MHx8MHx8fDA%3D"
+        alt="Card"
+      />
+
+      <p>This is text about the image</p>
+    </div>
+  ),
+};

package/src/components/Paragraph/Paragraph.test.tsx

@@ -0,0 +1,12 @@
+import { describe, expect, it } from 'vitest';
+
+import { Paragraph } from './Paragraph';
+import { render, screen } from '../../utils/renderers';
+
+describe('Paragraph', () => {
+  it('renders with text', () => {
+    render(<Paragraph>Some test text</Paragraph>);
+
+    expect(screen.getByRole('paragraph')).toBeInTheDocument();
+  });
+});

package/src/components/Paragraph/Paragraph.tsx

@@ -0,0 +1,7 @@
+export type ParagraphProps = {
+  children: React.ReactNode;
+};
+
+export const Paragraph = ({ children }: ParagraphProps) => {
+  return <p className="pb-4 text-sm text-text-primary">{children}</p>;
+};

package/src/components/container/Container.tsx

@@ -0,0 +1,38 @@
+import type { ReactNode } from 'react';
+
+import { cn } from '../../utils';
+
+export type ContainerProps = {
+  children: ReactNode;
+  className?: string;
+  size?: 'sm' | 'md' | 'lg' | 'xl' | 'full';
+  centerContent?: boolean;
+};
+
+const containerSizes = {
+  sm: 'max-w-3xl',
+  md: 'max-w-5xl',
+  lg: 'max-w-7xl',
+  xl: 'max-w-screen-2xl',
+  full: 'max-w-none',
+};
+
+export const Container = ({
+  children,
+  className,
+  size = 'lg',
+  centerContent = false,
+}: ContainerProps) => {
+  return (
+    <div
+      className={cn(
+        'mx-auto px-4 sm:px-6 lg:px-8',
+        containerSizes[size],
+        centerContent && 'flex items-center justify-center min-h-screen',
+        className,
+      )}
+    >
+      {children}
+    </div>
+  );
+};

package/src/components/dropdown/DropdownMenu.test.tsx

@@ -0,0 +1,213 @@
+import { describe, expect, it } from 'vitest';
+
+import { DropdownMenu, type DropdownMenuItem, type DrowndownMenuButton } from './DropdownMenu';
+import { render, screen, userEvent, waitFor } from '../../utils/renderers';
+
+type Item = { label: string };
+
+const ITEMS: Item[] = [{ label: 'A' }, { label: 'B' }, { label: 'C' }, { label: 'D' }];
+
+const CustomButton = ({ ...props }: DrowndownMenuButton) => {
+  return <button {...props}>Some Custom Text</button>;
+};
+
+const CustomItem = ({ label, ...props }: DropdownMenuItem<Item>) => {
+  return (
+    <a {...props} role="link">
+      {label}
+    </a>
+  );
+};
+
+describe('DropdownMenu Component', () => {
+  it('should render with no menu when unopened', () => {
+    render(<DropdownMenu items={ITEMS}></DropdownMenu>);
+
+    expect(screen.getByRole('button', { name: /menu/i })).toBeInTheDocument();
+    expect(() => screen.getByRole('menu')).toThrow();
+  });
+
+  it('should render with menu when opened', async () => {
+    render(<DropdownMenu items={ITEMS}></DropdownMenu>);
+
+    const user = userEvent.setup();
+
+    await user.click(screen.getByRole('button', { name: /menu/i }));
+
+    for (const item of ITEMS) {
+      expect(await screen.findByRole('menuitem', { name: item.label })).toBeInTheDocument();
+    }
+  });
+
+  it('should render with a custom item component', async () => {
+    render(<DropdownMenu items={ITEMS} itemRenderer={CustomItem}></DropdownMenu>);
+
+    const user = userEvent.setup();
+
+    await user.click(screen.getByRole('button', { name: /menu/i }));
+
+    for (const item of ITEMS) {
+      expect(await screen.findByRole('link', { name: item.label })).toBeInTheDocument();
+    }
+  });
+
+  it('should render with a custom button component', () => {
+    render(<DropdownMenu items={ITEMS} buttonRenderer={CustomButton}></DropdownMenu>);
+
+    expect(screen.getByRole('button', { name: /some custom text/i })).toBeInTheDocument();
+  });
+
+  it('should open the menu when button is clicked', async () => {
+    render(<DropdownMenu items={ITEMS} />);
+
+    const user = userEvent.setup();
+
+    const button = screen.getByRole('button', { name: /menu/i });
+
+    await user.click(button);
+
+    expect(await screen.findByRole('menu')).toBeInTheDocument();
+  });
+
+  it('should open the menu when Space or Enter is pressed', async () => {
+    render(<DropdownMenu items={ITEMS} />);
+
+    const user = userEvent.setup();
+
+    const button = screen.getByRole('button', { name: /menu/i });
+
+    button.focus();
+
+    await user.keyboard(' ');
+
+    expect(await screen.findByRole('menu')).toBeInTheDocument();
+
+    // pressing another key will close the menu but assuming the menu wasnt open already this would open it anyway
+    await user.keyboard('{Enter}');
+
+    await waitFor(() => expect(screen.queryByRole('menu')).not.toBeInTheDocument());
+  });
+
+  it('should close when Escape is pressed', async () => {
+    render(<DropdownMenu items={ITEMS} />);
+
+    const user = userEvent.setup();
+
+    const button = screen.getByRole('button', { name: /menu/i });
+
+    await user.click(button);
+
+    expect(await screen.findByRole('menu')).toBeInTheDocument();
+
+    await user.keyboard('{Escape}');
+
+    await waitFor(() => expect(screen.queryByRole('menu')).not.toBeInTheDocument());
+  });
+
+  it('should close when clicking outside', async () => {
+    render(
+      <>
+        <DropdownMenu items={ITEMS} />
+
+        <button>Outside</button>
+      </>,
+    );
+
+    const user = userEvent.setup();
+
+    const button = screen.getByRole('button', { name: /menu/i });
+
+    await user.click(button);
+
+    expect(await screen.findByRole('menu')).toBeInTheDocument();
+
+    // click away to another element, which should close the menu
+    await user.click(screen.getByRole('button', { name: /outside/i }));
+
+    await waitFor(() => expect(screen.queryByRole('menu')).not.toBeInTheDocument());
+  });
+
+  it('should close when focus moves outside (blur)', async () => {
+    render(
+      <>
+        <DropdownMenu items={ITEMS} />
+
+        <button>Outside</button>
+      </>,
+    );
+
+    const user = userEvent.setup();
+
+    const button = screen.getByRole('button', { name: /menu/i });
+
+    await user.click(button);
+
+    expect(await screen.findByRole('menu')).toBeInTheDocument();
+
+    // move focus away from the menu, which should close it
+    await user.tab();
+
+    await waitFor(() => expect(screen.queryByRole('menu')).not.toBeInTheDocument());
+  });
+
+  it('should navigate items with ArrowUp/ArrowDown', async () => {
+    render(<DropdownMenu items={ITEMS} />);
+
+    const user = userEvent.setup();
+
+    const button = screen.getByRole('button', { name: /menu/i });
+
+    await user.click(button);
+
+    const items = screen.getAllByRole('menuitem');
+
+    // first element is focussed when the menu is open
+    expect(items[0]).toHaveFocus();
+
+    await user.keyboard('{ArrowDown}');
+    expect(items[1]).toHaveFocus();
+
+    await user.keyboard('{ArrowUp}');
+    expect(items[0]).toHaveFocus();
+  });
+
+  it('should select an item with Enter or Space', async () => {
+    render(<DropdownMenu items={ITEMS} />);
+
+    const user = userEvent.setup();
+
+    const button = screen.getByRole('button', { name: /menu/i });
+
+    await user.click(button);
+    const items = screen.getAllByRole('menuitem');
+
+    await user.keyboard('{ArrowDown}');
+    await user.keyboard('{Enter}');
+
+    await waitFor(() => expect(screen.queryByRole('menu')).not.toBeInTheDocument());
+
+    await user.click(button);
+
+    expect(items[0]).toHaveFocus();
+  });
+
+  it('should move focus away when pressing Tab', async () => {
+    render(
+      <>
+        <DropdownMenu items={ITEMS} />
+
+        <button>Other Button</button>
+      </>,
+    );
+
+    const user = userEvent.setup();
+
+    const button = screen.getByRole('button', { name: /menu/i });
+
+    await user.click(button);
+
+    await user.tab();
+
+    await waitFor(() => expect(screen.queryByRole('menu')).not.toBeInTheDocument());
+  });
+});

package/src/components/dropdown/DropdownMenu.tsx

@@ -0,0 +1,106 @@
+'use client';
+
+import type { ComponentType } from 'react';
+
+import { LuChevronDown } from 'react-icons/lu';
+import { twMerge } from 'tailwind-merge';
+
+import {
+  type ButtonRendererProps,
+  type ItemRendererProps,
+  useDropdownMenu,
+} from './useDropdownMenu';
+
+export type DropdownMenuItem<ItemProps extends object> = ItemRendererProps & {
+  label: string;
+} & ItemProps;
+
+export type DrowndownMenuButton = ButtonRendererProps;
+
+type DropdownMenuProps<ItemProps extends object> = {
+  items: DropdownMenuItem<ItemProps>[];
+  containerClassName?: string;
+  menuContainerClassName?: string;
+  buttonRenderer?: ComponentType<ButtonRendererProps>;
+  buttonClassName?: string;
+  itemRenderer?: ComponentType<DropdownMenuItem<ItemProps>>;
+  itemClassName?: string;
+};
+
+const DefaultButton = ({ state: { isOpen }, ...props }: ButtonRendererProps) => {
+  return (
+    <button
+      {...props}
+      aria-label="Open Menu"
+      className={twMerge(
+        `text-black flex gap-2 items-center justify-center border rounded-md border-gray-300
+        bg-white px-2 py-1 text-sm shadow-sm focus:border-brand focus:outline-none focus:ring-1
+        focus:ring-brand`,
+        props.className,
+      )}
+    >
+      <span className="text-base pointer-events-none">Menu</span>
+
+      <LuChevronDown className={`pointer-events-none ${isOpen ? 'rotate-180' : ''}`} />
+    </button>
+  );
+};
+
+const DefaultItem = <Item extends object>({ label, ...props }: DropdownMenuItem<Item>) => {
+  return (
+    <div
+      {...props}
+      aria-label={label}
+      className={twMerge(
+        `text-black cursor-pointer hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-300 px-2
+        py-1`,
+        props.className,
+      )}
+    >
+      {label}
+    </div>
+  );
+};
+
+export const DropdownMenu = <Item extends object>({
+  items,
+  containerClassName,
+  menuContainerClassName,
+  buttonRenderer = DefaultButton,
+  buttonClassName,
+  itemRenderer = DefaultItem,
+  itemClassName,
+}: DropdownMenuProps<Item>) => {
+  // rebind to avoid linting errors
+  const ButtonRenderer = buttonRenderer;
+  const ItemRenderer = itemRenderer;
+
+  const { isOpen, buttonProps, itemProps } = useDropdownMenu(items.length);
+
+  return (
+    <div className={twMerge('relative', containerClassName)}>
+      <ButtonRenderer {...buttonProps} className={buttonClassName} />
+
+      <div
+        style={{ display: isOpen ? 'flex' : 'none' }}
+        aria-hidden={!isOpen}
+        className={twMerge(
+          `absolute right-0 mt-1 bg-white border shadow-md rounded-md min-w-full flex-col gap-0
+          z-[999] divide-y divide-slate-400`,
+          menuContainerClassName,
+        )}
+        role="menu"
+      >
+        {items.map((item, i) => (
+          <ItemRenderer
+            {...item}
+            {...itemProps[i]}
+            key={i}
+            label={item.label}
+            className={itemClassName}
+          />
+        ))}
+      </div>
+    </div>
+  );
+};