@keboola/design 2.0.1 → 3.0.0

package/src/blocks/Form/connectors/SelectField.tsx

@@ -1,73 +0,0 @@
-import type { ComponentProps, ReactNode } from 'react';
-
-import { Select } from '@keboola/design';
-
-import { useFieldContext } from '../contexts';
-
-import { FieldShell } from './FieldShell';
-
-type Option = {
-  value: string;
-  label: ReactNode;
-};
-
-type TriggerProps = ComponentProps<typeof Select.Trigger>;
-type RootProps = ComponentProps<typeof Select.Root>;
-
-type Props = {
-  label?: ReactNode;
-  required?: boolean;
-  help?: ReactNode;
-  className?: string;
-  options: readonly Option[];
-  placeholder?: string;
-  triggerClassName?: string;
-  variant?: TriggerProps['variant'];
-  state?: TriggerProps['state'];
-  sizing?: TriggerProps['sizing'];
-} & Omit<RootProps, 'value' | 'onValueChange' | 'children'>;
-
-export const SelectField = ({
-  label,
-  required,
-  help,
-  className,
-  options,
-  placeholder,
-  triggerClassName,
-  variant,
-  state,
-  sizing,
-  ...rootProps
-}: Props) => {
-  const field = useFieldContext<string>();
-
-  return (
-    <FieldShell field={field} label={label} required={required} help={help} className={className}>
-      <Select.Root
-        value={field.state.value ?? ''}
-        onValueChange={(value) => {
-          field.handleChange(value);
-        }}
-        {...rootProps}
-      >
-        <Select.Trigger
-          id={field.name}
-          className={triggerClassName ?? 'tw-w-full'}
-          placeholder={placeholder}
-          variant={variant}
-          state={state}
-          sizing={sizing}
-          onBlur={field.handleBlur}
-        />
-        <Select.Content variant={variant === 'argo' ? 'argo' : 'default'}>
-          {options.map((option) => (
-            <Select.Item key={option.value} value={option.value}>
-              {option.label}
-            </Select.Item>
-          ))}
-        </Select.Content>
-      </Select.Root>
-    </FieldShell>
-  );
-};

package/src/blocks/Form/connectors/SwitchField.tsx

@@ -1,34 +0,0 @@
-import type { ComponentProps, ReactNode } from 'react';
-
-import { Switch } from '@keboola/design';
-
-import { useFieldContext } from '../contexts';
-
-import { FieldShell } from './FieldShell';
-
-type Props = {
-  label?: ReactNode;
-  help?: ReactNode;
-  className?: string;
-} & Omit<ComponentProps<typeof Switch>, 'id' | 'name' | 'checked' | 'onCheckedChange'>;
-
-export const SwitchField = ({ label, help, className, children, ...switchProps }: Props) => {
-  const field = useFieldContext<boolean>();
-
-  return (
-    <FieldShell field={field} help={help} className={className}>
-      <Switch
-        id={field.name}
-        name={field.name}
-        checked={field.state.value ?? false}
-        onCheckedChange={(checked) => {
-          field.handleChange(checked);
-        }}
-        onBlur={field.handleBlur}
-        {...switchProps}
-      >
-        {children ?? label}
-      </Switch>
-    </FieldShell>
-  );
-};

package/src/blocks/Form/connectors/TextAreaField.tsx

@@ -1,36 +0,0 @@
-import type { ComponentProps, ReactNode } from 'react';
-
-import { FormGroup } from '@keboola/design';
-
-import { useFieldContext } from '../contexts';
-
-import { FieldShell } from './FieldShell';
-
-type Props = {
-  label?: ReactNode;
-  required?: boolean;
-  help?: ReactNode;
-  className?: string;
-} & Omit<
-  ComponentProps<typeof FormGroup.Textarea>,
-  'id' | 'name' | 'value' | 'onValueChange' | 'onBlur'
->;
-
-export const TextAreaField = ({ label, required, help, className, ...inputProps }: Props) => {
-  const field = useFieldContext<string>();
-
-  return (
-    <FieldShell field={field} label={label} required={required} help={help} className={className}>
-      <FormGroup.Textarea
-        id={field.name}
-        name={field.name}
-        value={field.state.value ?? ''}
-        onValueChange={(value) => {
-          field.handleChange(value);
-        }}
-        onBlur={field.handleBlur}
-        {...inputProps}
-      />
-    </FieldShell>
-  );
-};

package/src/blocks/Form/connectors/TextField.tsx

@@ -1,36 +0,0 @@
-import type { ComponentProps, ReactNode } from 'react';
-
-import { FormGroup } from '@keboola/design';
-
-import { useFieldContext } from '../contexts';
-
-import { FieldShell } from './FieldShell';
-
-type Props = {
-  label?: ReactNode;
-  required?: boolean;
-  help?: ReactNode;
-  className?: string;
-} & Omit<
-  ComponentProps<typeof FormGroup.TextInput>,
-  'id' | 'name' | 'value' | 'onChange' | 'onBlur'
->;
-
-export const TextField = ({ label, required, help, className, ...inputProps }: Props) => {
-  const field = useFieldContext<string>();
-
-  return (
-    <FieldShell field={field} label={label} required={required} help={help} className={className}>
-      <FormGroup.TextInput
-        id={field.name}
-        name={field.name}
-        value={field.state.value ?? ''}
-        onChange={(e) => {
-          field.handleChange(e.target.value);
-        }}
-        onBlur={field.handleBlur}
-        {...inputProps}
-      />
-    </FieldShell>
-  );
-};

package/src/blocks/Form/contexts.ts

@@ -1,4 +0,0 @@
-import { createFormHookContexts } from '@tanstack/react-form';
-
-export const { fieldContext, useFieldContext, formContext, useFormContext } =
-  createFormHookContexts();

package/src/blocks/Form/formHook.ts

@@ -1,45 +0,0 @@
-import { createFormHook } from '@tanstack/react-form';
-
-import { FormBody } from './components/FormBody';
-import { SubmitButton } from './components/SubmitButton';
-import { CheckboxField } from './connectors/CheckboxField';
-import { NumberField } from './connectors/NumberField';
-import { PasswordField } from './connectors/PasswordField';
-import { SelectField } from './connectors/SelectField';
-import { SwitchField } from './connectors/SwitchField';
-import { TextAreaField } from './connectors/TextAreaField';
-import { TextField } from './connectors/TextField';
-import { fieldContext, formContext } from './contexts';
-
-/**
- * Typed form hook + `withForm` binding for the design system.
- *
- * **When to use:** any form layout that has validation, server-side errors, or a submit state — pages,
- * modals, drawers, multi-step wizards. Use `useAppForm({ defaultValues, validators, onSubmit })` at the
- * top of the form component, then render the typed `field.TextField` / `field.NumberField` /
- * `field.PasswordField` / `field.TextAreaField` / `field.SelectField` / `field.CheckboxField` /
- * `field.SwitchField` connectors inside `form.AppForm` → `form.FormBody`. Submit via `form.SubmitButton`.
- * **When NOT to use:** for a single uncontrolled `<input>` use `TextInput` directly; for a bare label + input
- * pair without validation use `FormGroup` + `FormGroup.TextInput`.
- * **Composition:** schema-library agnostic — pass any [Standard Schema](https://standardschema.dev/) validator
- * (zod, valibot, …) in the consuming app. Server errors come from `setServerFieldErrors` (also re-exported).
- *
- * @see RECIPES.md#modal-form — for the canonical form-in-modal composition
- */
-export const { useAppForm, withForm } = createFormHook({
-  fieldContext,
-  formContext,
-  fieldComponents: {
-    TextField,
-    NumberField,
-    PasswordField,
-    TextAreaField,
-    SelectField,
-    CheckboxField,
-    SwitchField,
-  },
-  formComponents: {
-    FormBody,
-    SubmitButton,
-  },
-});

package/src/blocks/Form/index.ts

@@ -1,2 +0,0 @@
-export { useAppForm, withForm } from './formHook';
-export { setServerFieldErrors, type ServerFieldError } from './setServerFieldErrors';

package/src/blocks/Form/setServerFieldErrors.test.ts

@@ -1,38 +0,0 @@
-import { describe, expect, it, vi } from 'vitest';
-
-import { setServerFieldErrors } from './setServerFieldErrors';
-
-describe('setServerFieldErrors', () => {
-  it('marks each field touched and writes the error message', () => {
-    const meta = { email: { isTouched: false, errors: [], errorMap: {} } };
-    const setFieldMeta = vi.fn(
-      (field: string, updater: (prev: typeof meta.email) => typeof meta.email) => {
-        meta[field as keyof typeof meta] = updater(meta[field as keyof typeof meta]);
-      },
-    );
-    const form = { setFieldMeta } as unknown as Parameters<typeof setServerFieldErrors>[0];
-
-    setServerFieldErrors(form, [{ field: 'email', message: 'Email already in use' }]);
-
-    expect(setFieldMeta).toHaveBeenCalledWith('email', expect.any(Function));
-    expect(meta.email).toMatchObject({
-      isTouched: true,
-      errors: ['Email already in use'],
-      errorMap: { onServer: 'Email already in use' },
-    });
-  });
-
-  it('handles multiple errors in one call', () => {
-    const setFieldMeta = vi.fn();
-    const form = { setFieldMeta } as unknown as Parameters<typeof setServerFieldErrors>[0];
-
-    setServerFieldErrors(form, [
-      { field: 'email', message: 'taken' },
-      { field: 'username', message: 'too short' },
-    ]);
-
-    expect(setFieldMeta).toHaveBeenCalledTimes(2);
-    expect(setFieldMeta).toHaveBeenNthCalledWith(1, 'email', expect.any(Function));
-    expect(setFieldMeta).toHaveBeenNthCalledWith(2, 'username', expect.any(Function));
-  });
-});

package/src/blocks/Form/setServerFieldErrors.ts

@@ -1,21 +0,0 @@
-import type { AnyFormApi } from '@tanstack/react-form';
-
-export type ServerFieldError = {
-  field: string;
-  message: string;
-};
-
-/**
- * Map a list of server-returned field errors onto a TanStack form instance.
- * Marks each field as touched so the error renders immediately.
- */
-export const setServerFieldErrors = (form: AnyFormApi, errors: readonly ServerFieldError[]) => {
-  for (const { field, message } of errors) {
-    form.setFieldMeta(field, (meta) => ({
-      ...meta,
-      isTouched: true,
-      errors: [message],
-      errorMap: { ...meta.errorMap, onServer: message },
-    }));
-  }
-};

package/src/blocks/InputOtp/InputOtp.stories.tsx

@@ -1,214 +0,0 @@
-import { useState } from 'react';
-import type { ComponentProps, FormEventHandler } from 'react';
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { action } from 'storybook/actions';
-
-import { Button } from '../../components/Button';
-import { FormGroup } from '../../components/FormGroup';
-import { Label } from '../../components/Label';
-
-import { REGEXP_ONLY_DIGITS_AND_CHARS } from './index';
-import { InputOtp } from './InputOtp';
-
-type Story = StoryObj<typeof InputOtp>;
-type InputOtpProps = ComponentProps<typeof InputOtp>;
-type Sizing = NonNullable<InputOtpProps['sizing']>;
-type State = NonNullable<InputOtpProps['state']>;
-
-const sizings: Sizing[] = ['sm', 'md', 'lg'];
-const states: State[] = ['default', 'error'];
-
-const ContiguousSlots = ({ length }: { length: number }) => (
-  <InputOtp.Group>
-    {Array.from({ length }, (_, index) => (
-      <InputOtp.Slot key={index} index={index} />
-    ))}
-  </InputOtp.Group>
-);
-
-const SplitSlots = ({ length }: { length: number }) => {
-  const half = Math.ceil(length / 2);
-  return (
-    <>
-      <InputOtp.Group>
-        {Array.from({ length: half }, (_, index) => (
-          <InputOtp.Slot key={index} index={index} />
-        ))}
-      </InputOtp.Group>
-      {length > half && (
-        <>
-          <InputOtp.Separator />
-          <InputOtp.Group>
-            {Array.from({ length: length - half }, (_, i) => (
-              <InputOtp.Slot key={half + i} index={half + i} />
-            ))}
-          </InputOtp.Group>
-        </>
-      )}
-    </>
-  );
-};
-
-export default {
-  component: InputOtp,
-  parameters: {
-    docs: {
-      description: {
-        component: [
-          'OTP / verification-code input. Wraps the headless `input-otp` primitive with a',
-          'Keboola-themed slot, group, and separator using semantic Tailwind tokens. Paste,',
-          'SMS autofill, and per-character focus management are inherited from `input-otp`.',
-          '',
-          '**When to use:** entering a short fixed-length code — MFA / 2FA, email confirmation,',
-          'sudo-mode step-up, invite acceptance.',
-          '',
-          '**When NOT to use:** free-form text → `TextInput` / `FormGroup.TextInput`;',
-          'variable-length secrets → `PasswordInput`; numeric values → `NumberInput`.',
-          '',
-          '**Composition:** wrap slots in `InputOtp.Group`s, optionally separated by',
-          '`InputOtp.Separator`. For full control over slot rendering, call',
-          '`useInputOtpContext()` inside a custom child.',
-          '',
-          '**Sizing:** `sm` / `md` / `lg` match InputGroup heights (≈ 32 / 36 / 40px) so an OTP',
-          'field can sit next to a regular text input without the row jumping.',
-        ].join('\n'),
-      },
-    },
-  },
-  args: {
-    maxLength: 6,
-    sizing: 'md',
-    state: 'default',
-    disabled: false,
-    autoFocus: false,
-    onComplete: action('onComplete'),
-    onChange: action('onChange'),
-  },
-  argTypes: {
-    sizing: {
-      description: 'Slot size',
-      type: { name: 'enum', value: sizings },
-    },
-    state: {
-      description: 'Validation state',
-      type: { name: 'enum', value: states },
-    },
-  },
-  render: (args) => (
-    <InputOtp {...args}>
-      <ContiguousSlots length={args.maxLength} />
-    </InputOtp>
-  ),
-} satisfies Meta<typeof InputOtp>;
-
-export const Default: Story = {};
-
-export const WithSeparator: Story = {
-  render: (args) => (
-    <InputOtp {...args}>
-      <SplitSlots length={args.maxLength} />
-    </InputOtp>
-  ),
-};
-
-export const Sizing: Story = {
-  render: (args) => (
-    <div className="tw-flex tw-flex-col tw-gap-6">
-      {sizings.map((sizing) => (
-        <div key={sizing} className="tw-flex tw-flex-col tw-gap-1">
-          <span className="tw-text-xs tw-text-muted-foreground">{sizing}</span>
-          <InputOtp {...args} sizing={sizing}>
-            <ContiguousSlots length={args.maxLength} />
-          </InputOtp>
-        </div>
-      ))}
-    </div>
-  ),
-};
-
-export const States: Story = {
-  render: (args) => (
-    <div className="tw-flex tw-flex-col tw-gap-6">
-      <div className="tw-flex tw-flex-col tw-gap-1">
-        <span className="tw-text-xs tw-text-muted-foreground">default</span>
-        <InputOtp {...args} state="default">
-          <ContiguousSlots length={args.maxLength} />
-        </InputOtp>
-      </div>
-      <div className="tw-flex tw-flex-col tw-gap-1">
-        <span className="tw-text-xs tw-text-muted-foreground">error</span>
-        <InputOtp {...args} state="error" defaultValue="123">
-          <ContiguousSlots length={args.maxLength} />
-        </InputOtp>
-      </div>
-      <div className="tw-flex tw-flex-col tw-gap-1">
-        <span className="tw-text-xs tw-text-muted-foreground">disabled</span>
-        <InputOtp {...args} disabled defaultValue="42">
-          <ContiguousSlots length={args.maxLength} />
-        </InputOtp>
-      </div>
-    </div>
-  ),
-};
-
-export const Alphanumeric: Story = {
-  args: {
-    pattern: REGEXP_ONLY_DIGITS_AND_CHARS,
-  },
-};
-
-const ControlledDemo = (props: InputOtpProps) => {
-  const [value, setValue] = useState('');
-  return (
-    <div className="tw-flex tw-flex-col tw-gap-3">
-      <InputOtp
-        {...props}
-        value={value}
-        onChange={(next) => {
-          action('onChange')(next);
-          setValue(next);
-        }}
-      >
-        <SplitSlots length={props.maxLength} />
-      </InputOtp>
-      <span className="tw-text-sm tw-text-muted-foreground">Entered: {value || '(empty)'}</span>
-    </div>
-  );
-};
-
-export const Controlled: Story = {
-  render: ControlledDemo,
-};
-
-const UncontrolledDemo = (props: InputOtpProps) => {
-  const handleSubmit: FormEventHandler<HTMLFormElement> = (event) => {
-    event.preventDefault();
-    const values = new FormData(event.currentTarget);
-    action('onSubmit')(Object.fromEntries(values.entries()));
-  };
-
-  return (
-    <form className="tw-flex tw-items-end tw-gap-3" onSubmit={handleSubmit}>
-      <InputOtp {...props} name="code" defaultValue="" onComplete={action('onComplete')}>
-        <SplitSlots length={props.maxLength} />
-      </InputOtp>
-      <Button type="submit">Verify</Button>
-    </form>
-  );
-};
-
-export const Uncontrolled: Story = {
-  render: UncontrolledDemo,
-};
-
-export const WithLabel: Story = {
-  render: (args) => (
-    <FormGroup className="tw-max-w-sm">
-      <Label>Verification code</Label>
-      <InputOtp {...args}>
-        <SplitSlots length={args.maxLength} />
-      </InputOtp>
-      <FormGroup.Help>We just sent a 6-digit code to your authenticator app.</FormGroup.Help>
-    </FormGroup>
-  ),
-};

package/src/blocks/InputOtp/InputOtp.test.tsx

@@ -1,162 +0,0 @@
-import { useState } from 'react';
-import { fireEvent, render, screen } from '@testing-library/react';
-import { beforeAll, describe, expect, it, vi } from 'vitest';
-
-import { REGEXP_ONLY_DIGITS, useInputOtpContext } from './index';
-import { InputOtp } from './InputOtp';
-
-// `input-otp` uses ResizeObserver to align its hidden input over the slots;
-// jsdom doesn't ship one, so stub a no-op implementation for the suite.
-beforeAll(() => {
-  vi.stubGlobal(
-    'ResizeObserver',
-    class {
-      observe() {}
-      unobserve() {}
-      disconnect() {}
-    },
-  );
-});
-
-const SixDigit = (props: Partial<React.ComponentProps<typeof InputOtp>> = {}) => (
-  <InputOtp aria-label="code" maxLength={6} {...props}>
-    <InputOtp.Group>
-      <InputOtp.Slot index={0} />
-      <InputOtp.Slot index={1} />
-      <InputOtp.Slot index={2} />
-      <InputOtp.Slot index={3} />
-      <InputOtp.Slot index={4} />
-      <InputOtp.Slot index={5} />
-    </InputOtp.Group>
-  </InputOtp>
-);
-
-const getInput = () => screen.getByLabelText('code') as HTMLInputElement;
-
-describe('<InputOtp />', () => {
-  it('renders one slot per maxLength position', () => {
-    render(<SixDigit />);
-    const slots = document.querySelectorAll('[data-slot-index]');
-    expect(slots).toHaveLength(6);
-  });
-
-  it('displays typed characters in their slots', () => {
-    const Controlled = () => {
-      const [value, setValue] = useState('');
-      return <SixDigit value={value} onChange={setValue} />;
-    };
-    render(<Controlled />);
-    fireEvent.change(getInput(), { target: { value: '123' } });
-    const slots = document.querySelectorAll('[data-slot-index]');
-    expect(slots[0]?.textContent).toBe('1');
-    expect(slots[1]?.textContent).toBe('2');
-    expect(slots[2]?.textContent).toBe('3');
-    expect(slots[3]?.textContent).toBe('');
-  });
-
-  it('fires onComplete exactly once when maxLength is reached', () => {
-    const onComplete = vi.fn();
-    render(<SixDigit onComplete={onComplete} />);
-    fireEvent.change(getInput(), { target: { value: '123456' } });
-    expect(onComplete).toHaveBeenCalledTimes(1);
-    expect(onComplete).toHaveBeenCalledWith('123456');
-  });
-
-  it('re-fires onComplete after editing and retyping a completed code', () => {
-    const onComplete = vi.fn();
-    const Controlled = () => {
-      const [value, setValue] = useState('');
-      return <SixDigit value={value} onChange={setValue} onComplete={onComplete} />;
-    };
-    render(<Controlled />);
-    fireEvent.change(getInput(), { target: { value: '123456' } });
-    fireEvent.change(getInput(), { target: { value: '12345' } });
-    fireEvent.change(getInput(), { target: { value: '123459' } });
-    expect(onComplete).toHaveBeenCalledTimes(2);
-    expect(onComplete).toHaveBeenLastCalledWith('123459');
-  });
-
-  it('truncates input beyond maxLength', () => {
-    const onChange = vi.fn();
-    render(<SixDigit onChange={onChange} />);
-    fireEvent.change(getInput(), { target: { value: '1234567890' } });
-    expect(onChange).toHaveBeenLastCalledWith('123456');
-  });
-
-  it('rejects characters that fail the pattern', () => {
-    const onChange = vi.fn();
-    render(<SixDigit pattern={REGEXP_ONLY_DIGITS} onChange={onChange} />);
-    fireEvent.change(getInput(), { target: { value: 'abc' } });
-    expect(onChange).not.toHaveBeenCalled();
-    expect(getInput().value).toBe('');
-  });
-
-  it('marks the input as aria-invalid when state="error"', () => {
-    render(<SixDigit state="error" />);
-    expect(getInput().getAttribute('aria-invalid')).toBe('true');
-  });
-
-  it('does not set aria-invalid in the default state', () => {
-    render(<SixDigit />);
-    expect(getInput().getAttribute('aria-invalid')).toBeNull();
-  });
-
-  it('blocks input when disabled', () => {
-    render(<SixDigit disabled />);
-    expect(getInput().disabled).toBe(true);
-  });
-
-  it('seeds the value from defaultValue', () => {
-    render(<SixDigit defaultValue="42" />);
-    const slots = document.querySelectorAll('[data-slot-index]');
-    expect(slots[0]?.textContent).toBe('4');
-    expect(slots[1]?.textContent).toBe('2');
-  });
-
-  it('exposes the render context to custom children via useInputOtpContext', () => {
-    const FirstSlotChar = () => {
-      const { slots } = useInputOtpContext();
-      return <span data-testid="first-slot-char">{slots[0]?.char ?? ''}</span>;
-    };
-    const Controlled = () => {
-      const [value, setValue] = useState('');
-      return (
-        <InputOtp aria-label="code" maxLength={6} value={value} onChange={setValue}>
-          <FirstSlotChar />
-        </InputOtp>
-      );
-    };
-    render(<Controlled />);
-    fireEvent.change(getInput(), { target: { value: '7' } });
-    expect(screen.getByTestId('first-slot-char').textContent).toBe('7');
-  });
-
-  it('throws if useInputOtpContext is called outside <InputOtp>', () => {
-    const Bare = () => {
-      useInputOtpContext();
-      return null;
-    };
-    const consoleError = vi.spyOn(console, 'error').mockImplementation(() => {});
-    expect(() => render(<Bare />)).toThrow(/inside <InputOtp>/);
-    consoleError.mockRestore();
-  });
-
-  it('renders a custom separator when provided', () => {
-    render(
-      <InputOtp aria-label="code" maxLength={6}>
-        <InputOtp.Group>
-          <InputOtp.Slot index={0} />
-          <InputOtp.Slot index={1} />
-          <InputOtp.Slot index={2} />
-        </InputOtp.Group>
-        <InputOtp.Separator>·</InputOtp.Separator>
-        <InputOtp.Group>
-          <InputOtp.Slot index={3} />
-          <InputOtp.Slot index={4} />
-          <InputOtp.Slot index={5} />
-        </InputOtp.Group>
-      </InputOtp>,
-    );
-    expect(screen.getByRole('separator')).toHaveTextContent('·');
-  });
-});