@keboola/design 1.0.0

package/src/components/Card/Card.tsx

@@ -0,0 +1,25 @@
+import type { HTMLAttributes } from 'react';
+import type { VariantProps } from 'class-variance-authority';
+
+import { CardContent } from './CardContent';
+import { CardHeader } from './CardHeader';
+import { CardTitle } from './CardTitle';
+import { cardClassnames } from './styles';
+
+type Props = HTMLAttributes<HTMLDivElement> & VariantProps<typeof cardClassnames>;
+
+export const Card = ({
+  children,
+  className,
+  bordered = false,
+  padding = 'small',
+  ...rest
+}: Props) => (
+  <div className={cardClassnames({ className, bordered, padding })} {...rest}>
+    {children}
+  </div>
+);
+
+Card.Header = CardHeader;
+Card.Content = CardContent;
+Card.Title = CardTitle;

package/src/components/Card/CardContent.tsx

@@ -0,0 +1,5 @@
+import type { HTMLAttributes } from 'react';
+
+type Props = HTMLAttributes<HTMLDivElement>;
+
+export const CardContent = ({ children, ...rest }: Props) => <div {...rest}>{children}</div>;

package/src/components/Card/CardHeader.tsx

@@ -0,0 +1,5 @@
+import type { HTMLAttributes } from 'react';
+
+type Props = HTMLAttributes<HTMLDivElement>;
+
+export const CardHeader = ({ children, ...rest }: Props) => <div {...rest}>{children}</div>;

package/src/components/Card/CardTitle.tsx

@@ -0,0 +1,13 @@
+import type { HTMLAttributes } from 'react';
+
+import { cn } from '../../utils';
+
+import { cardTitleClassnames } from './styles';
+
+type Props = HTMLAttributes<HTMLHeadingElement>;
+
+export const CardTitle = ({ children, className, ...rest }: Props) => (
+  <h3 className={cn(cardTitleClassnames, className)} {...rest}>
+    {children}
+  </h3>
+);

package/src/components/Card/index.ts

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

package/src/components/Card/styles.ts

@@ -0,0 +1,32 @@
+import { cva } from 'class-variance-authority';
+
+import { cn } from '../../utils';
+
+export const cardClassnames = cva(
+  ['tw-bg-white', 'tw-flex', 'tw-flex-col', 'tw-rounded-lg', 'tw-gap-4'],
+  {
+    defaultVariants: {
+      padding: 'small',
+    },
+    variants: {
+      bordered: {
+        true: 'tw-border tw-border-solid tw-border-neutral-200',
+        false: 'tw-shadow-[0_2px_6px_0_rgba(100,135,153,0.13)]',
+      },
+      padding: {
+        none: 'tw-p-0',
+        small: 'tw-px-6 tw-py-4',
+        medium: 'tw-p-7',
+        large: 'tw-p-8',
+      },
+    },
+  },
+);
+
+export const cardTitleClassnames = cn(
+  'tw-m-0',
+  'tw-leading-6',
+  'tw-font-medium',
+  'tw-text-base',
+  'tw-neutral-800',
+);

package/src/components/Checkbox/Checkbox.stories.tsx

@@ -0,0 +1,210 @@
+import { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { Label } from '../Label';
+
+import { Checkbox } from './Checkbox';
+
+type Story = StoryObj<typeof Checkbox>;
+
+export default {
+  component: Checkbox,
+  args: {
+    disabled: false,
+  },
+  argTypes: {
+    children: { control: { type: 'text' } },
+    description: { control: { type: 'text' } },
+    variant: { control: { type: 'select' }, options: ['default', 'boxed'] },
+    position: { control: { type: 'select' }, options: ['start', 'end'] },
+  },
+} satisfies Meta<typeof Checkbox>;
+
+export const Default: Story = {
+  args: {
+    children: 'Label',
+  },
+};
+
+export const Indeterminate: Story = {
+  args: {
+    id: 'indeterminate-checkbox',
+    checked: 'indeterminate',
+  },
+};
+
+export const Controlled: Story = {
+  args: {
+    id: 'controlled-checkbox',
+    children: 'Controlled',
+  },
+  render: (props) => {
+    const [checked, setChecked] = useState<boolean | 'indeterminate'>(false);
+    return <Checkbox {...props} checked={checked} onCheckedChange={setChecked} />;
+  },
+};
+
+export const WithCustomLabel: Story = {
+  render: (props) => (
+    <div className="tw-flex tw-items-center tw-gap-2">
+      <Label htmlFor="custom" className="tw-text-error-500">
+        Custom Label
+      </Label>
+
+      <Checkbox {...props} id="custom" />
+    </div>
+  ),
+};
+
+export const WithTooltip: Story = {
+  args: {
+    id: 'tooltip-checkbox',
+    tooltip: 'Hover to see this hint',
+  },
+};
+
+export const WithTooltipDisabled: Story = {
+  name: 'With Tooltip / Disabled',
+  args: {
+    id: 'tooltip-disabled-checkbox',
+    disabled: true,
+    checked: true,
+    tooltip: 'This option cannot be changed because the row is locked.',
+  },
+};
+
+export const WithTooltipAndLabel: Story = {
+  name: 'With Tooltip / Label',
+  args: {
+    id: 'tooltip-label-checkbox',
+    children: 'Send marketing email',
+    tooltip: 'You can change this any time in your account settings',
+  },
+};
+
+export const WithTooltipIndeterminate: Story = {
+  name: 'With Tooltip / Indeterminate',
+  args: {
+    id: 'tooltip-indeterminate-checkbox',
+    checked: 'indeterminate',
+    tooltip: 'Deselect all',
+  },
+};
+
+export const Argo: Story = {
+  args: {
+    argo: true,
+    children: 'Accept terms and conditions',
+    description: '',
+    variant: 'default',
+    position: 'start',
+  },
+};
+
+export const ArgoDisabled: Story = {
+  name: 'Argo / Disabled',
+  render: () => (
+    <div className="tw-flex tw-flex-col tw-gap-4">
+      <Checkbox argo disabled>
+        Disabled unchecked
+      </Checkbox>
+      <Checkbox argo disabled checked>
+        Disabled checked
+      </Checkbox>
+    </div>
+  ),
+};
+
+export const ArgoControlled: Story = {
+  name: 'Argo / Controlled',
+  render: () => {
+    const [checked, setChecked] = useState<boolean | 'indeterminate'>(false);
+    return (
+      <Checkbox
+        argo
+        checked={checked}
+        onCheckedChange={setChecked}
+        description="Click to toggle the checkbox state."
+      >
+        Controlled checkbox
+      </Checkbox>
+    );
+  },
+};
+
+export const ArgoAllStates: Story = {
+  name: 'Argo / All States',
+  render: () => (
+    <div className="tw-flex tw-flex-col tw-gap-8">
+      <div>
+        <h3 className="tw-mb-3 tw-text-sm tw-font-medium">Default</h3>
+        <div className="tw-flex tw-flex-col tw-gap-3">
+          <Checkbox argo description="Checkbox is off">
+            Off
+          </Checkbox>
+          <Checkbox argo checked description="Checkbox is on">
+            On
+          </Checkbox>
+        </div>
+      </div>
+
+      <div>
+        <h3 className="tw-mb-3 tw-text-sm tw-font-medium">Disabled</h3>
+        <div className="tw-flex tw-flex-col tw-gap-3">
+          <Checkbox argo disabled description="Disabled off">
+            Off
+          </Checkbox>
+          <Checkbox argo disabled checked description="Disabled on">
+            On
+          </Checkbox>
+        </div>
+      </div>
+
+      <div>
+        <h3 className="tw-mb-3 tw-text-sm tw-font-medium">Position End</h3>
+        <div className="tw-flex tw-flex-col tw-gap-3">
+          <Checkbox argo position="end" description="Checkbox on the right">
+            Off
+          </Checkbox>
+          <Checkbox argo checked position="end" description="Checkbox on the right">
+            On
+          </Checkbox>
+        </div>
+      </div>
+
+      <div>
+        <h3 className="tw-mb-3 tw-text-sm tw-font-medium">Boxed</h3>
+        <div className="tw-flex tw-flex-col tw-gap-3">
+          <Checkbox argo variant="boxed" description="Boxed off">
+            Off
+          </Checkbox>
+          <Checkbox argo checked variant="boxed" description="Boxed on">
+            On
+          </Checkbox>
+        </div>
+      </div>
+
+      <div>
+        <h3 className="tw-mb-3 tw-text-sm tw-font-medium">Boxed + Position End</h3>
+        <div className="tw-flex tw-flex-col tw-gap-3">
+          <Checkbox argo variant="boxed" position="end" description="Boxed end off">
+            Off
+          </Checkbox>
+          <Checkbox argo checked variant="boxed" position="end" description="Boxed end on">
+            On
+          </Checkbox>
+        </div>
+      </div>
+
+      <div>
+        <h3 className="tw-mb-3 tw-text-sm tw-font-medium">Standalone (no label)</h3>
+        <div className="tw-flex tw-gap-4">
+          <Checkbox argo />
+          <Checkbox argo checked />
+          <Checkbox argo disabled />
+          <Checkbox argo disabled checked />
+        </div>
+      </div>
+    </div>
+  ),
+};

package/src/components/Checkbox/Checkbox.test.tsx

@@ -0,0 +1,140 @@
+import { useState } from 'react';
+import type { ComponentProps, ReactNode } from 'react';
+import { Provider as TooltipProvider } from '@radix-ui/react-tooltip';
+import { act, fireEvent, render, screen } from '@testing-library/react';
+import { userEvent } from 'storybook/test';
+import { describe, expect, it, vi } from 'vitest';
+
+import { Checkbox } from './Checkbox';
+
+const renderInTooltipProvider = (ui: ReactNode) =>
+  render(<TooltipProvider delayDuration={0}>{ui}</TooltipProvider>);
+
+describe('<Checkbox />', () => {
+  it('renders an accessible checkbox', () => {
+    render(<Checkbox id="t" />);
+    expect(screen.queryByRole('checkbox')).not.toBeNull();
+  });
+
+  it('fires onCheckedChange with a boolean from the boolean overload', async () => {
+    const onCheckedChange = vi.fn<(checked: boolean) => void>();
+    render(<Checkbox id="t" checked={false} onCheckedChange={onCheckedChange} />);
+
+    await act(async () => {
+      await userEvent.click(screen.getByRole('checkbox'));
+    });
+
+    expect(onCheckedChange).toHaveBeenCalledTimes(1);
+    expect(onCheckedChange).toHaveBeenCalledWith(true);
+  });
+
+  it('reports the indeterminate state via aria-checked="mixed"', () => {
+    render(<Checkbox id="t" checked="indeterminate" />);
+    expect(screen.getByRole('checkbox').getAttribute('aria-checked')).toBe('mixed');
+  });
+
+  it('does not fire onCheckedChange when disabled', async () => {
+    const onCheckedChange = vi.fn();
+    render(<Checkbox id="t" disabled checked={false} onCheckedChange={onCheckedChange} />);
+
+    await act(async () => {
+      await userEvent.click(screen.getByRole('checkbox'));
+    });
+
+    expect(onCheckedChange).not.toHaveBeenCalled();
+  });
+
+  it('toggles when used uncontrolled', async () => {
+    render(<Checkbox id="t" defaultChecked={false} />);
+    const cb = screen.getByRole('checkbox');
+    expect(cb.getAttribute('aria-checked')).toBe('false');
+
+    await act(async () => {
+      await userEvent.click(cb);
+    });
+
+    expect(cb.getAttribute('aria-checked')).toBe('true');
+  });
+
+  it('reflects controlled state changes', async () => {
+    const ControlledTest = (props: ComponentProps<typeof Checkbox>) => {
+      const [checked, setChecked] = useState(false);
+      return <Checkbox {...props} checked={checked} onCheckedChange={setChecked} />;
+    };
+    render(<ControlledTest id="t" />);
+    const cb = screen.getByRole('checkbox');
+    expect(cb.getAttribute('aria-checked')).toBe('false');
+
+    await act(async () => {
+      await userEvent.click(cb);
+    });
+
+    expect(cb.getAttribute('aria-checked')).toBe('true');
+  });
+
+  it('toggles via the label when children are provided (htmlFor wiring)', () => {
+    const onCheckedChange = vi.fn();
+    render(
+      <Checkbox id="t" checked={false} onCheckedChange={onCheckedChange}>
+        Accept terms
+      </Checkbox>,
+    );
+
+    fireEvent.click(screen.getByText('Accept terms'));
+
+    expect(onCheckedChange).toHaveBeenCalledWith(true);
+  });
+
+  describe('tooltip', () => {
+    it('shows the tooltip on hover for a bare checkbox', async () => {
+      const user = userEvent.setup();
+      renderInTooltipProvider(<Checkbox id="t" tooltip="Bare hint" />);
+
+      expect(screen.queryByRole('tooltip')).toBeNull();
+
+      await act(async () => {
+        await user.hover(screen.getByRole('checkbox'));
+      });
+
+      const tip = await screen.findByRole('tooltip');
+      expect(tip.textContent).toContain('Bare hint');
+    });
+
+    it('shows the tooltip on hover when a label is present', async () => {
+      const user = userEvent.setup();
+      renderInTooltipProvider(
+        <Checkbox id="t" tooltip="Labelled hint">
+          With label
+        </Checkbox>,
+      );
+
+      expect(screen.queryByRole('tooltip')).toBeNull();
+
+      await act(async () => {
+        await user.hover(screen.getByText('With label'));
+      });
+
+      const tip = await screen.findByRole('tooltip');
+      expect(tip.textContent).toContain('Labelled hint');
+    });
+
+    it('shows the tooltip on hover even when the checkbox is disabled', async () => {
+      const user = userEvent.setup();
+      renderInTooltipProvider(
+        <Checkbox id="t" disabled checked tooltip="Locked because the row is read-only" />,
+      );
+
+      await act(async () => {
+        await user.hover(screen.getByRole('checkbox'));
+      });
+
+      const tip = await screen.findByRole('tooltip');
+      expect(tip.textContent).toContain('Locked because the row is read-only');
+    });
+
+    it('does not render a tooltip when the prop is omitted', () => {
+      render(<Checkbox id="t" />);
+      expect(screen.queryByRole('tooltip')).toBeNull();
+    });
+  });
+});

package/src/components/Checkbox/Checkbox.tsx

@@ -0,0 +1,86 @@
+import { useId } from 'react';
+import type { ComponentProps, JSX, ReactNode } from 'react';
+import type { CheckedState } from '@radix-ui/react-checkbox';
+import { Indicator, Root } from '@radix-ui/react-checkbox';
+import type { VariantProps } from 'class-variance-authority';
+
+import { cn } from '../../utils';
+import { FieldBox } from '../FieldBox';
+import type { fieldBoxVariants } from '../FieldBox/styles';
+import { Icon } from '../Icon';
+import type { Props as TooltipProps } from '../Tooltip';
+import { Tooltip } from '../Tooltip';
+
+import { indicatorVariants, rootVariants } from './styles';
+
+type Props = {
+  id?: string | number;
+  argo?: boolean;
+  description?: ReactNode;
+  variant?: VariantProps<typeof fieldBoxVariants>['variant'];
+  position?: 'start' | 'end';
+  tooltip?: TooltipProps['tooltip'];
+  tooltipPlacement?: TooltipProps['placement'];
+} & Omit<ComponentProps<typeof Root>, 'id'>;
+
+// First overload - for strict boolean usage
+export function Checkbox(
+  prop: Omit<Props, 'checked' | 'onCheckedChange'> & {
+    checked?: boolean;
+    onCheckedChange?: (checked: boolean) => void;
+  },
+): JSX.Element;
+
+// Second overload - for CheckedState usage (boolean | 'indeterminate')
+export function Checkbox(
+  prop: Omit<Props, 'checked' | 'onCheckedChange'> & {
+    checked?: CheckedState;
+    onCheckedChange?: (checked: CheckedState) => void;
+  },
+): JSX.Element;
+
+export function Checkbox({
+  className,
+  id: idProp,
+  children,
+  argo = false,
+  description,
+  variant,
+  position,
+  tooltip,
+  tooltipPlacement = 'top',
+  ...rest
+}: Props) {
+  const fallbackId = useId();
+  const id = idProp?.toString() ?? fallbackId;
+  const styleVariant = argo ? 'argo' : 'default';
+
+  const checkboxElement = (
+    <Root id={id} {...rest} className={cn(rootVariants({ variant: styleVariant, className }))}>
+      <Indicator className={cn(indicatorVariants({ variant: styleVariant }))}>
+        <Icon icon="check" className="tw-hidden tw-size-3 group-data-[state=checked]:tw-block" />
+        <Icon
+          icon="minus"
+          className="tw-hidden tw-size-3 group-data-[state=indeterminate]:tw-block"
+        />
+      </Indicator>
+    </Root>
+  );
+
+  const rendered = !children ? (
+    checkboxElement
+  ) : (
+    <FieldBox htmlFor={id} variant={variant} position={position} control={checkboxElement}>
+      <FieldBox.Title>{children}</FieldBox.Title>
+      {description && <FieldBox.Description>{description}</FieldBox.Description>}
+    </FieldBox>
+  );
+
+  if (!tooltip) return rendered;
+
+  return (
+    <Tooltip tooltip={tooltip} placement={tooltipPlacement} triggerAsChild>
+      {rendered}
+    </Tooltip>
+  );
+}

package/src/components/Checkbox/index.ts

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

package/src/components/Checkbox/styles.ts

@@ -0,0 +1,77 @@
+import { cva } from 'class-variance-authority';
+
+export const rootVariants = cva(
+  [
+    // reset
+    'tailwindcss-preflight',
+
+    // position
+    'tw-flex',
+    'tw-items-center',
+    'tw-justify-center',
+
+    'tw-peer',
+    'tw-size-4',
+    'tw-shrink-0',
+    'tw-cursor-pointer',
+
+    // border
+    'tw-border',
+    'tw-border-solid',
+
+    // disabled
+    'disabled:tw-opacity-50',
+    'disabled:tw-cursor-not-allowed',
+  ],
+  {
+    defaultVariants: {
+      variant: 'default',
+    },
+    variants: {
+      variant: {
+        default: [
+          'tw-rounded',
+          'tw-border-neutral-200',
+
+          'data-[state=checked]:tw-bg-secondary-500',
+          'data-[state=checked]:tw-border-secondary-500',
+
+          'data-[state=indeterminate]:tw-bg-white',
+          'data-[state=indeterminate]:tw-border-neutral-200',
+        ],
+        argo: [
+          'tw-rounded',
+          'tw-border-input',
+          'tw-transition-colors',
+
+          'data-[state=checked]:tw-bg-primary',
+          'data-[state=checked]:tw-border-primary',
+
+          'data-[state=indeterminate]:tw-bg-primary',
+          'data-[state=indeterminate]:tw-border-primary',
+
+          // focus
+          'focus-visible:tw-outline-none',
+          'focus-visible:tw-border-primary',
+          'focus-visible:tw-ring-2',
+          'focus-visible:tw-ring-primary/50',
+        ],
+      },
+    },
+  },
+);
+
+export const indicatorVariants = cva(['tw-group', 'tw-flex', 'tw-items-center'], {
+  defaultVariants: {
+    variant: 'default',
+  },
+  variants: {
+    variant: {
+      default: [
+        'data-[state=checked]:tw-text-white',
+        'data-[state=indeterminate]:tw-text-neutral-200',
+      ],
+      argo: ['tw-text-primary-foreground'],
+    },
+  },
+});

package/src/components/Clipboard/Clipboard.stories.tsx

@@ -0,0 +1,44 @@
+import type { ComponentProps } from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { withTooltipProvider } from '../../utils';
+
+import { Clipboard } from './Clipboard';
+
+type ClipboardProps = ComponentProps<typeof Clipboard>;
+type TooltipVariant = NonNullable<ClipboardProps['tooltipVariant']>;
+const variants: TooltipVariant[] = ['action', 'explanatory'];
+
+export default {
+  component: Clipboard,
+  decorators: [withTooltipProvider],
+  args: {
+    tooltipVariant: 'action',
+    text: 'Text written to clipboard',
+  },
+  argTypes: {
+    tooltipVariant: {
+      type: { name: 'enum', value: variants },
+    },
+  },
+} satisfies Meta<typeof Clipboard>;
+
+type Story = StoryObj<typeof Clipboard>;
+
+/**
+ * Clipboard, by default, renders a button with the label used in the clipboard text.
+ */
+export const Default: Story = {};
+
+export const OnCustomButton: Story = {
+  render: (props) => (
+    <Clipboard {...props}>
+      <button
+        type="button"
+        className="tw-rounded-md tw-bg-neutral-100 tw-p-2 hover:tw-bg-neutral-150"
+      >
+        Copy
+      </button>
+    </Clipboard>
+  ),
+};