@keboola/design 1.0.0

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

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

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

@@ -0,0 +1,46 @@
+import type { ReactNode } from 'react';
+import type { AnyFieldApi } from '@tanstack/react-form';
+
+import { FormGroup, Label } from '@keboola/design';
+
+type Props = {
+  field: AnyFieldApi;
+  label?: ReactNode;
+  required?: boolean;
+  help?: ReactNode;
+  className?: string;
+  children: ReactNode;
+};
+
+const errorMessage = (field: AnyFieldApi): string | undefined => {
+  const first = field.state.meta.errors[0];
+  if (!first) return undefined;
+  if (typeof first === 'string') return first;
+  if (typeof first === 'object' && first !== null && 'message' in first) {
+    const message = (first as { message: unknown }).message;
+    return typeof message === 'string' ? message : undefined;
+  }
+  return undefined;
+};
+
+export const FieldShell = ({ field, label, required, help, className, children }: Props) => {
+  const error = errorMessage(field);
+  const showError = field.state.meta.isTouched && !!error;
+
+  return (
+    <FormGroup className={className} state={showError ? 'error' : undefined}>
+      {label && (
+        <Label htmlFor={field.name}>
+          {label}
+          {required && <span className="tw-ml-0.5 tw-text-secondary-500">*</span>}
+        </Label>
+      )}
+      {children}
+      {showError ? (
+        <FormGroup.Help>{error}</FormGroup.Help>
+      ) : (
+        help && <FormGroup.Help>{help}</FormGroup.Help>
+      )}
+    </FormGroup>
+  );
+};

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

@@ -0,0 +1,36 @@
+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.NumberInput>,
+  'id' | 'name' | 'value' | 'onValueChange' | 'onBlur'
+>;
+
+export const NumberField = ({ label, required, help, className, ...inputProps }: Props) => {
+  const field = useFieldContext<number | null>();
+
+  return (
+    <FieldShell field={field} label={label} required={required} help={help} className={className}>
+      <FormGroup.NumberInput
+        id={field.name}
+        name={field.name}
+        value={field.state.value ?? null}
+        onValueChange={(value) => {
+          field.handleChange(value);
+        }}
+        onBlur={field.handleBlur}
+        {...inputProps}
+      />
+    </FieldShell>
+  );
+};

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

@@ -0,0 +1,38 @@
+import type { ComponentProps, ReactNode } from 'react';
+
+import { PasswordInput } from '@keboola/design';
+
+import { useFieldContext } from '../contexts';
+
+import { FieldShell } from './FieldShell';
+
+type Props = {
+  label?: ReactNode;
+  required?: boolean;
+  help?: ReactNode;
+  className?: string;
+} & Omit<
+  ComponentProps<typeof PasswordInput>,
+  'id' | 'name' | 'value' | 'onValueChange' | 'onBlur'
+>;
+
+export const PasswordField = ({ label, required, help, className, ...inputProps }: Props) => {
+  const field = useFieldContext<string>();
+  const showError = field.state.meta.isTouched && field.state.meta.errors.length > 0;
+
+  return (
+    <FieldShell field={field} label={label} required={required} help={help} className={className}>
+      <PasswordInput
+        id={field.name}
+        name={field.name}
+        value={field.state.value ?? ''}
+        state={showError ? 'error' : undefined}
+        onValueChange={(value) => {
+          field.handleChange(value);
+        }}
+        onBlur={field.handleBlur}
+        {...inputProps}
+      />
+    </FieldShell>
+  );
+};

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

@@ -0,0 +1,73 @@
+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

@@ -0,0 +1,34 @@
+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

@@ -0,0 +1,36 @@
+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

@@ -0,0 +1,36 @@
+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

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

package/src/blocks/Form/formHook.ts

@@ -0,0 +1,30 @@
+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';
+
+export const { useAppForm, withForm } = createFormHook({
+  fieldContext,
+  formContext,
+  fieldComponents: {
+    TextField,
+    NumberField,
+    PasswordField,
+    TextAreaField,
+    SelectField,
+    CheckboxField,
+    SwitchField,
+  },
+  formComponents: {
+    FormBody,
+    SubmitButton,
+  },
+});

package/src/blocks/Form/index.ts

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

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

@@ -0,0 +1,38 @@
+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

@@ -0,0 +1,21 @@
+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/MermaidDiagram/MermaidDiagram.stories.tsx

@@ -0,0 +1,87 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { withHiddenFullscreen, withTooltipProvider } from '../../utils/decorators';
+
+import { MermaidDiagram } from './MermaidDiagram';
+
+const meta: Meta<typeof MermaidDiagram> = {
+  title: 'Blocks/MermaidDiagram',
+  component: MermaidDiagram,
+  decorators: [withTooltipProvider, withHiddenFullscreen],
+  parameters: {
+    layout: 'padded',
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof MermaidDiagram>;
+
+export const Flowchart: Story = {
+  args: {
+    code: `graph TD
+    A[Data Source] --> B[Extract]
+    B --> C[Transform]
+    C --> D[Load]
+    D --> E[Data Warehouse]`,
+  },
+};
+
+export const SequenceDiagram: Story = {
+  args: {
+    code: `sequenceDiagram
+    participant U as User
+    participant K as Keboola
+    participant S as Snowflake
+    U->>K: Upload data
+    K->>K: Transform
+    K->>S: Export results
+    S-->>U: Query results`,
+  },
+};
+
+export const ERDiagram: Story = {
+  args: {
+    code: `erDiagram
+    CUSTOMERS ||--o{ ORDERS : places
+    ORDERS ||--|{ LINE_ITEMS : contains
+    PRODUCTS ||--o{ LINE_ITEMS : "ordered in"`,
+  },
+};
+
+export const GanttWithTime: Story = {
+  name: 'Gantt (time axis)',
+  args: {
+    code: `gantt
+    title Daily Pipeline
+    dateFormat YYYY-MM-DD HH:mm
+    axisFormat %H:%M
+    section Extraction
+        Shopify orders sync     :e1, 2024-01-01 06:00, 20min
+        Google Ads report       :e2, 2024-01-01 06:00, 15min
+    section Transformation
+        Revenue attribution     :t1, after e1, 25min
+    section Loading
+        Write to Snowflake      :l1, after t1, 10min`,
+  },
+};
+
+export const InvalidSyntax: Story = {
+  args: {
+    code: 'this is not valid mermaid syntax',
+  },
+};
+
+export const InNarrowContainer: Story = {
+  args: {
+    code: `graph LR
+    A[Source] --> B[Transform] --> C[Destination]`,
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ width: 350 }}>
+        <Story />
+      </div>
+    ),
+  ],
+};