@keboola/design 1.0.0

package/src/components/Slider/useInteracting.ts

@@ -0,0 +1,64 @@
+import { useCallback, useRef, useState } from 'react';
+
+type InteractingRef = (element: HTMLElement | null) => void;
+
+export const useInteracting = (): readonly [boolean, InteractingRef] => {
+  const [isInteracting, setIsInteracting] = useState(false);
+  const cleanupRef = useRef<(() => void) | null>(null);
+
+  const setRef = useCallback<InteractingRef>((element) => {
+    cleanupRef.current?.();
+    cleanupRef.current = null;
+    if (!element) return;
+
+    let hover = false;
+    let focus = false;
+    let press = false;
+    const recompute = () => setIsInteracting(hover || focus || press);
+
+    const handleEnter = () => {
+      hover = true;
+      recompute();
+    };
+    const handleLeave = () => {
+      hover = false;
+      recompute();
+    };
+    const handleFocus = () => {
+      focus = true;
+      recompute();
+    };
+    const handleBlur = () => {
+      focus = false;
+      recompute();
+    };
+    const handleDown = () => {
+      press = true;
+      recompute();
+    };
+    const handleRelease = () => {
+      press = false;
+      recompute();
+    };
+
+    element.addEventListener('pointerenter', handleEnter);
+    element.addEventListener('pointerleave', handleLeave);
+    element.addEventListener('focus', handleFocus);
+    element.addEventListener('blur', handleBlur);
+    element.addEventListener('pointerdown', handleDown);
+    element.addEventListener('pointerup', handleRelease);
+    element.addEventListener('pointercancel', handleRelease);
+
+    cleanupRef.current = () => {
+      element.removeEventListener('pointerenter', handleEnter);
+      element.removeEventListener('pointerleave', handleLeave);
+      element.removeEventListener('focus', handleFocus);
+      element.removeEventListener('blur', handleBlur);
+      element.removeEventListener('pointerdown', handleDown);
+      element.removeEventListener('pointerup', handleRelease);
+      element.removeEventListener('pointercancel', handleRelease);
+    };
+  }, []);
+
+  return [isInteracting, setRef] as const;
+};

package/src/components/Switch/Switch.stories.tsx

@@ -0,0 +1,177 @@
+import { useState } from 'react';
+import type { ComponentProps } from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { Tooltip, TooltipProvider } from '../Tooltip';
+
+import { Switch } from './Switch';
+
+type Story = StoryObj<typeof Switch>;
+
+type SwitchProps = ComponentProps<typeof Switch>;
+type Size = NonNullable<SwitchProps['size']>;
+
+const sizes: Size[] = ['small', 'medium', 'large'];
+
+export default {
+  component: Switch,
+  args: {
+    size: 'medium',
+    disabled: false,
+  },
+  argTypes: {
+    children: { control: { type: 'text' } },
+    size: {
+      type: { name: 'enum', value: sizes },
+    },
+  },
+} satisfies Meta<typeof Switch>;
+
+export const Default: Story = {
+  args: {
+    children: 'Label',
+  },
+};
+
+export const WithCustomLabel: Story = {
+  render: (props) => (
+    <Switch {...props} id="wifi">
+      <span className="tw-text-error-500">Custom label</span>
+    </Switch>
+  ),
+};
+
+export const WithTooltip: Story = {
+  render: (props) => (
+    <TooltipProvider>
+      <Tooltip triggerAsChild tooltip="Hello">
+        <Switch {...props} id="wifi">
+          Label
+        </Switch>
+      </Tooltip>
+    </TooltipProvider>
+  ),
+};
+
+export const Argo: Story = {
+  args: {
+    argo: true,
+    children: 'Airplane Mode',
+    description: '',
+    variant: 'default',
+    position: 'start',
+  },
+  argTypes: {
+    description: { control: { type: 'text' } },
+    variant: { control: { type: 'select' }, options: ['default', 'boxed'] },
+    position: { control: { type: 'select' }, options: ['start', 'end'] },
+  },
+};
+
+export const ArgoDisabled: Story = {
+  name: 'Argo / Disabled',
+  render: () => (
+    <div className="tw-flex tw-flex-col tw-gap-4">
+      <Switch argo disabled>
+        Disabled off
+      </Switch>
+      <Switch argo disabled checked>
+        Disabled on
+      </Switch>
+    </div>
+  ),
+};
+
+export const ArgoControlled: Story = {
+  name: 'Argo / Controlled',
+  render: () => {
+    const [checked, setChecked] = useState(false);
+    return (
+      <Switch
+        argo
+        checked={checked}
+        onCheckedChange={setChecked}
+        description="Click to toggle the switch state."
+      >
+        Controlled switch
+      </Switch>
+    );
+  },
+};
+
+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">
+          <Switch argo description="Switch is off">
+            Off
+          </Switch>
+          <Switch argo checked description="Switch is on">
+            On
+          </Switch>
+        </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">
+          <Switch argo disabled description="Disabled off">
+            Off
+          </Switch>
+          <Switch argo disabled checked description="Disabled on">
+            On
+          </Switch>
+        </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">
+          <Switch argo position="end" description="Switch on the right">
+            Off
+          </Switch>
+          <Switch argo checked position="end" description="Switch on the right">
+            On
+          </Switch>
+        </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">
+          <Switch argo variant="boxed" description="Boxed off">
+            Off
+          </Switch>
+          <Switch argo checked variant="boxed" description="Boxed on">
+            On
+          </Switch>
+        </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">
+          <Switch argo variant="boxed" position="end" description="Boxed end off">
+            Off
+          </Switch>
+          <Switch argo checked variant="boxed" position="end" description="Boxed end on">
+            On
+          </Switch>
+        </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">
+          <Switch argo />
+          <Switch argo checked />
+          <Switch argo disabled />
+          <Switch argo disabled checked />
+        </div>
+      </div>
+    </div>
+  ),
+};

package/src/components/Switch/Switch.tsx

@@ -0,0 +1,58 @@
+import { useId } from 'react';
+import type { ComponentProps, ElementRef, ReactNode, Ref } from 'react';
+import { Root, Thumb } from '@radix-ui/react-switch';
+import type { VariantProps } from 'class-variance-authority';
+
+import { FieldBox } from '../FieldBox';
+import type { fieldBoxVariants } from '../FieldBox/styles';
+
+import { switchVariants, thumbVariants } from './styles';
+
+type Props = {
+  id?: string | number;
+  children?: ReactNode;
+  argo?: boolean;
+  description?: ReactNode;
+  variant?: VariantProps<typeof fieldBoxVariants>['variant'];
+  position?: 'start' | 'end';
+} & Omit<ComponentProps<typeof Root>, 'asChild' | 'id'> &
+  Omit<VariantProps<typeof switchVariants>, 'variant'>;
+
+export const Switch = ({
+  ref,
+  className,
+  size,
+  disabled = false,
+  id: idProp,
+  children,
+  argo = false,
+  description,
+  variant,
+  position,
+  ...props
+}: Props & { ref?: Ref<ElementRef<'button'>> }) => {
+  const fallbackId = useId();
+  const id = idProp?.toString() ?? fallbackId;
+  const switchVariant = argo ? 'argo' : 'default';
+
+  const switchElement = (
+    <Root
+      {...props}
+      ref={ref}
+      id={id}
+      disabled={disabled}
+      className={switchVariants({ className, size, variant: switchVariant })}
+    >
+      <Thumb className={thumbVariants({ size, variant: switchVariant })} />
+    </Root>
+  );
+
+  if (!children) return switchElement;
+
+  return (
+    <FieldBox htmlFor={id} variant={variant} position={position} control={switchElement}>
+      <FieldBox.Title>{children}</FieldBox.Title>
+      {description && <FieldBox.Description>{description}</FieldBox.Description>}
+    </FieldBox>
+  );
+};

package/src/components/Switch/index.ts

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

package/src/components/Switch/styles.ts

@@ -0,0 +1,173 @@
+import { cva } from 'class-variance-authority';
+
+export const switchVariants = cva(
+  [
+    'tailwindcss-preflight',
+    'tw-shrink-0',
+    'tw-cursor-pointer',
+    'disabled:tw-cursor-not-allowed',
+    'disabled:tw-opacity-50',
+  ],
+  {
+    defaultVariants: {
+      size: 'medium',
+      variant: 'default',
+    },
+    variants: {
+      variant: {
+        default: [
+          'tw-peer/switch',
+          'tw-group/switch',
+          'tw-relative',
+
+          // positioning
+          'tw-flex',
+          'tw-items-center',
+          'tw-gap-2',
+
+          'tw-min-h-5',
+
+          // label
+          'tw-text-neutral-800',
+          'tw-font-normal',
+
+          // before pseudo element
+          'before:tw-content-[" "]',
+          'before:tw-block',
+          'before:tw-relative',
+
+          // color
+          'aria-checked:before:tw-bg-primary-500',
+          'before:tw-bg-neutral-200',
+
+          // hover
+          'aria-checked:before:hover:tw-bg-primary-600',
+          'before:hover:tw-bg-neutral-300',
+
+          // disabled
+          'before:disabled:hover:tw-bg-neutral-200',
+
+          // others
+          'tw-transition-colors',
+
+          'focus-visible:tw-outline-none',
+          'before:focus-visible:tw-outline',
+          'before:focus-visible:tw-outline-1',
+          'before:focus-visible:tw-outline-secondary-500',
+          'before:focus-visible:tw-ring-4',
+          'before:focus-visible:tw-ring-secondary-200',
+        ],
+        argo: [
+          'tw-peer',
+          'tw-inline-flex',
+          'tw-items-center',
+
+          // track
+          'tw-w-9',
+          'tw-h-5',
+          'tw-rounded-full',
+          'tw-border',
+          'tw-border-transparent',
+          'tw-bg-input',
+          'tw-transition-colors',
+
+          // checked
+          'data-[state=checked]:tw-bg-primary',
+
+          // focus
+          'focus-visible:tw-outline-none',
+          'focus-visible:tw-border-primary',
+          'focus-visible:tw-ring-3',
+          'focus-visible:tw-ring-primary/50',
+        ],
+      },
+      size: {
+        small: [],
+        medium: [],
+        large: [],
+      },
+    },
+    compoundVariants: [
+      {
+        variant: 'default',
+        size: 'small',
+        class: ['before:tw-w-6', 'before:tw-h-4', 'before:tw-rounded-lg'],
+      },
+      {
+        variant: 'default',
+        size: 'medium',
+        class: ['before:tw-w-8', 'before:tw-h-4', 'before:tw-rounded-lg'],
+      },
+      {
+        variant: 'default',
+        size: 'large',
+        class: ['before:tw-w-10', 'before:tw-h-5', 'before:tw-rounded-xl'],
+      },
+    ],
+  },
+);
+
+export const thumbVariants = cva(
+  ['tw-block', 'tw-shrink-0', 'tw-pointer-events-none', 'tw-bg-white', 'tw-rounded-full'],
+  {
+    defaultVariants: {
+      size: 'medium',
+      variant: 'default',
+    },
+    variants: {
+      variant: {
+        default: [
+          'tw-absolute',
+          'tw-left-0',
+          'tw-transition-transform',
+          'tw-ease-in-out',
+          'tw-shadow-[0_2px_5px_rgba(0,0,0,.26)]',
+        ],
+        argo: [
+          'tw-size-4',
+          'tw-shadow-sm',
+          'tw-transition-transform',
+          'data-[state=checked]:tw-translate-x-[16px]',
+          'data-[state=unchecked]:tw-translate-x-0.5',
+        ],
+      },
+      size: {
+        small: [],
+        medium: [],
+        large: [],
+      },
+    },
+    compoundVariants: [
+      {
+        variant: 'default',
+        size: 'small',
+        class: [
+          'tw-w-3',
+          'tw-h-3',
+          'data-[state=checked]:tw-translate-x-2.5',
+          'data-[state=unchecked]:tw-translate-x-0.5',
+        ],
+      },
+      {
+        variant: 'default',
+        size: 'medium',
+        class: [
+          'tw-w-3',
+          'tw-h-3',
+          'data-[state=checked]:tw-translate-x-[18px]',
+          'data-[state=unchecked]:tw-translate-x-0.5',
+        ],
+      },
+      {
+        variant: 'default',
+        size: 'large',
+        class: [
+          'tw-w-3.5',
+          'tw-h-3.5',
+          'data-[state=checked]:tw-translate-x-6',
+          'data-[state=unchecked]:tw-translate-x-0.5',
+        ],
+      },
+    ],
+  },
+);

package/src/components/Table/Table.stories.tsx

@@ -0,0 +1,106 @@
+import type { ComponentProps } from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { Table } from './Table';
+
+const invoices = [
+  {
+    invoice: 'INV001 dhuishduiashd iusahdiuahsdiuhas iudhaisudhsaiudh iauh',
+    paymentStatus: 'Paid',
+    totalAmount: '$250.00',
+    paymentMethod: 'Credit Card',
+  },
+  {
+    invoice: 'INV002',
+    paymentStatus: 'Pending',
+    totalAmount: '$150.00',
+    paymentMethod: 'PayPal',
+  },
+  {
+    invoice: 'INV003',
+    paymentStatus: 'Unpaid',
+    totalAmount: '$350.00',
+    paymentMethod: 'Bank Transfer',
+  },
+  {
+    invoice: 'INV004',
+    paymentStatus: 'Paid',
+    totalAmount: '$450.00',
+    paymentMethod: 'Credit Card',
+  },
+  {
+    invoice: 'INV005',
+    paymentStatus: 'Paid',
+    totalAmount: '$550.00',
+    paymentMethod: 'PayPal',
+  },
+  {
+    invoice: 'INV006',
+    paymentStatus: 'Pending',
+    totalAmount: '$200.00',
+    paymentMethod: 'Bank Transfer',
+  },
+  {
+    invoice: 'INV007',
+    paymentStatus: 'Unpaid',
+    totalAmount: '$300.00',
+    paymentMethod: 'Credit Card',
+  },
+];
+
+const Component = (props: ComponentProps<typeof Table>) => (
+  <Table {...props}>
+    <Table.Header>
+      <Table.Row>
+        <Table.Head>Invoice</Table.Head>
+        <Table.Head>Status</Table.Head>
+        <Table.Head>Method</Table.Head>
+        <Table.Head>Amount</Table.Head>
+      </Table.Row>
+    </Table.Header>
+    <Table.Body>
+      {invoices.map((invoice) => (
+        <Table.Row key={invoice.invoice}>
+          <Table.Cell>{invoice.invoice}</Table.Cell>
+          <Table.Cell>{invoice.paymentStatus}</Table.Cell>
+          <Table.Cell>{invoice.paymentMethod}</Table.Cell>
+          <Table.Cell>{invoice.totalAmount}</Table.Cell>
+        </Table.Row>
+      ))}
+    </Table.Body>
+    <Table.Footer>
+      <Table.Row>
+        <Table.Cell colSpan={3}>Total</Table.Cell>
+        <Table.Cell>$2,500.00</Table.Cell>
+      </Table.Row>
+    </Table.Footer>
+  </Table>
+);
+
+const meta: Meta<typeof Table> = {
+  component: Table,
+  parameters: {
+    layout: 'centered',
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Table>;
+
+export const Basic: Story = {
+  render: Component,
+};
+
+export const Overflow: Story = {
+  render: () => (
+    <div className="tw-flex tw-size-[220px]">
+      <div className="tw-overflow-auto">
+        <Component />
+      </div>
+    </div>
+  ),
+};
+
+export const Bordered: Story = {
+  render: (props) => <Component {...props} bordered />,
+};

package/src/components/Table/Table.tsx

@@ -0,0 +1,51 @@
+import type { ComponentProps } from 'react';
+
+import { cn } from '../../utils';
+
+import { TableBody } from './TableBody';
+import { TableCell } from './TableCell';
+import { TableFooter } from './TableFooter';
+import { TableHead } from './TableHead';
+import { TableHeader } from './TableHeader';
+import { TableRow } from './TableRow';
+
+type Props = {
+  borderCollapsed?: boolean;
+  bordered?: boolean;
+  containerClassName?: string;
+} & ComponentProps<'table'>;
+
+export const Table = ({
+  borderCollapsed = true,
+  bordered = false,
+  containerClassName,
+  className,
+  ...props
+}: Props) => {
+  return (
+    <div
+      className={cn(
+        'tw-relative tw-w-full',
+        bordered &&
+          'tw-overflow-auto tw-rounded-[10px] tw-border tw-border-solid tw-border-neutral-150',
+        containerClassName,
+      )}
+    >
+      <table
+        className={cn(
+          'tw-w-full tw-caption-bottom tw-text-sm',
+          borderCollapsed ? 'tw-border-collapse' : 'tw-border-separate tw-border-spacing-y-1',
+          className,
+        )}
+        {...props}
+      />
+    </div>
+  );
+};
+
+Table.Header = TableHeader;
+Table.Head = TableHead;
+Table.Body = TableBody;
+Table.Row = TableRow;
+Table.Cell = TableCell;
+Table.Footer = TableFooter;

package/src/components/Table/TableBody.tsx

@@ -0,0 +1,22 @@
+import type { ComponentProps } from 'react';
+
+import { cn } from '../../utils';
+
+export const TableBody = ({
+  withBorderSeparator = true,
+  className,
+  ...props
+}: { withBorderSeparator?: boolean } & ComponentProps<'tbody'>) => {
+  return (
+    <tbody
+      className={cn(
+        {
+          '[&_tr]:tw-border-0 [&_tr]:tw-border-b-neutral-150 [&_tr]:tw-border-b [&_tr]:tw-border-solid [&_tr:last-child]:tw-border-0':
+            withBorderSeparator,
+        },
+        className,
+      )}
+      {...props}
+    />
+  );
+};

package/src/components/Table/TableCell.tsx

@@ -0,0 +1,7 @@
+import type { ComponentProps } from 'react';
+
+import { cn } from '../../utils';
+
+export const TableCell = ({ className, ...props }: ComponentProps<'td'>) => {
+  return <td className={cn('tw-px-3 tw-py-2', className)} {...props} />;
+};

package/src/components/Table/TableFooter.tsx

@@ -0,0 +1,15 @@
+import type { ComponentProps } from 'react';
+
+import { cn } from '../../utils';
+
+export const TableFooter = ({ className, ...props }: ComponentProps<'tfoot'>) => {
+  return (
+    <tfoot
+      className={cn(
+        'tw-bg-muted/50 tw-border-t tw-font-medium [&>tr]:last:tw-border-b-0',
+        className,
+      )}
+      {...props}
+    />
+  );
+};

package/src/components/Table/TableHead.tsx

@@ -0,0 +1,15 @@
+import type { ComponentProps } from 'react';
+
+import { cn } from '../../utils';
+
+export const TableHead = ({ className, ...props }: ComponentProps<'th'>) => {
+  return (
+    <th
+      className={cn(
+        'tw-px-3 tw-py-2 tw-text-left tw-font-medium tw-whitespace-nowrap [&:has([role=checkbox])]:tw-pr-0 [&>[role=checkbox]]:tw-translate-y-[2px]',
+        className,
+      )}
+      {...props}
+    />
+  );
+};