@keboola/design 2.0.0 → 2.1.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/MermaidDiagram/MermaidDiagram.stories.tsx

@@ -1,87 +0,0 @@
-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>
-    ),
-  ],
-};

package/src/blocks/MermaidDiagram/MermaidDiagram.tsx

@@ -1,266 +0,0 @@
-import { useEffect, useId, useRef, useState } from 'react';
-import { renderMermaidSVG } from 'beautiful-mermaid';
-import type mermaid from 'mermaid';
-
-import colors from '@keboola/tailwind-config/colors';
-
-import { Skeleton } from '../../components/Skeleton/Skeleton';
-import { ZoomableSvg } from '../../components/ZoomableSvg';
-import { cn } from '../../utils';
-
-type MermaidModule = { default: typeof mermaid };
-
-let mermaidPromise: Promise<MermaidModule> | null = null;
-
-const getMermaid = (): Promise<MermaidModule> => {
-  if (!mermaidPromise) {
-    mermaidPromise = import('mermaid')
-      .then((m) => {
-        m.default.initialize({
-          startOnLoad: false,
-          securityLevel: 'strict',
-          theme: 'base',
-          themeVariables: {
-            primaryColor: colors.secondary[100],
-            primaryTextColor: colors.neutral[800],
-            primaryBorderColor: colors.secondary[700],
-            secondaryColor: colors.white,
-            secondaryTextColor: colors.neutral[800],
-            secondaryBorderColor: colors.neutral[150],
-            tertiaryColor: colors.warning[100],
-            tertiaryTextColor: colors.neutral[800],
-            tertiaryBorderColor: colors.warning[500],
-            lineColor: colors.neutral[300],
-            textColor: colors.neutral[800],
-            mainBkg: colors.secondary[100],
-            nodeBorder: colors.secondary[700],
-            clusterBkg: colors.white,
-            clusterBorder: colors.neutral[150],
-            titleColor: colors.neutral[800],
-            edgeLabelBackground: colors.white,
-            nodeTextColor: colors.neutral[800],
-            actorBorder: colors.secondary[700],
-            actorBkg: colors.secondary[100],
-            actorTextColor: colors.neutral[800],
-            actorLineColor: colors.neutral[300],
-            signalColor: colors.neutral[800],
-            signalTextColor: colors.neutral[800],
-            labelBoxBkgColor: colors.secondary[100],
-            labelBoxBorderColor: colors.secondary[700],
-            labelTextColor: colors.neutral[800],
-            loopTextColor: colors.neutral[800],
-            noteBorderColor: colors.warning[500],
-            noteBkgColor: colors.warning[100],
-            noteTextColor: colors.neutral[800],
-            sectionBkgColor: colors.secondary[100],
-            altSectionBkgColor: colors.white,
-            sectionBkgColor2: colors.neutral[100],
-            taskBorderColor: colors.secondary[700],
-            taskBkgColor: colors.secondary[100],
-            taskTextColor: colors.neutral[800],
-            taskTextDarkColor: colors.neutral[800],
-            taskTextLightColor: colors.neutral[800],
-            activeTaskBorderColor: colors.primary.DEFAULT,
-            activeTaskBkgColor: colors.secondary[200],
-            doneTaskBorderColor: colors.primary[600],
-            doneTaskBkgColor: colors.primary[100],
-            critBorderColor: colors.error[500],
-            critBkgColor: colors.error[100],
-            fontFamily: 'Inter, system-ui, sans-serif',
-            fontSize: '14px',
-          },
-        });
-        return m;
-      })
-      .catch((err) => {
-        mermaidPromise = null;
-        throw err;
-      });
-  }
-  return mermaidPromise;
-};
-
-const stripFontImports = (svg: string): string =>
-  svg.replace(/@import\s+url\([^)]*fonts\.googleapis\.com[^)]*\);?\s*/g, '');
-
-const tryFastRender = (code: string): string | null => {
-  try {
-    return stripFontImports(
-      renderMermaidSVG(code, {
-        bg: colors.white,
-        fg: colors.neutral[800],
-        transparent: true,
-        font: 'Inter, system-ui, sans-serif',
-      }),
-    );
-  } catch {
-    return null;
-  }
-};
-
-const makeResponsive = (svgString: string): string => {
-  const viewBoxMatch = svgString.match(/viewBox="[^"]*\s([\d.]+)\s[\d.]+"/);
-  const vbWidth = viewBoxMatch ? Math.round(Number(viewBoxMatch[1])) : undefined;
-
-  let result = svgString
-    .replace(/(<svg[^>]*?)\s+width="[^"]*"/i, '$1 width="100%"')
-    .replace(/(<svg[^>]*?)\s+height="[^"]*"/i, '$1');
-
-  if (!vbWidth) return result;
-
-  const hasStyle = /(<svg[^>]*?)\s+style="([^"]*)"/i.test(result);
-  if (hasStyle) {
-    result = result.replace(/(<svg[^>]*?)\s+style="([^"]*)"/i, (_m, pre, styles) => {
-      const cleaned = styles.replace(/max-width:\s*[^;"]*;?\s*/g, '').trim();
-      const combined = [cleaned, `max-width: ${vbWidth}px`].filter(Boolean).join('; ');
-      return `${pre} style="${combined}"`;
-    });
-  } else {
-    result = result.replace(/<svg/, `<svg style="max-width: ${vbWidth}px"`);
-  }
-
-  return result;
-};
-
-const RENDER_DEBOUNCE_MS = 300;
-
-// Module-level SVG cache — persists across component remounts (e.g. tab switches
-// that cause React to remount the tree). Same code always produces the same SVG.
-const svgCache = new Map<string, string>();
-
-type Props = {
-  /** Mermaid diagram source code. Supports flowchart, sequence, class, state, ER,
-   *  pie, gantt, and mindmap. Gantt `dateFormat HH:mm` (time-only) is not supported
-   *  by mermaid's dayjs parser — use `dateFormat YYYY-MM-DD HH:mm` with `axisFormat %H:%M` instead. */
-  code: string;
-};
-
-export const MermaidDiagram = ({ code }: Props) => {
-  const id = useId();
-  const [svg, setSvg] = useState<string | null>(() => {
-    const cached = svgCache.get(code);
-    if (cached) return cached;
-    const fast = tryFastRender(code);
-    if (fast) {
-      svgCache.set(code, fast);
-      return fast;
-    }
-    return null;
-  });
-  const [renderFailed, setRenderFailed] = useState(false);
-  const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-  const renderIdRef = useRef(0);
-
-  // Synchronously reset stale state when code changes to avoid one-frame flash
-  const [prevCode, setPrevCode] = useState(code);
-  if (code !== prevCode) {
-    setPrevCode(code);
-    const cached = svgCache.get(code);
-    const fast = cached ?? tryFastRender(code);
-    if (fast && !cached) svgCache.set(code, fast);
-    setSvg(fast);
-    setRenderFailed(false);
-  }
-
-  useEffect(() => {
-    // Skip if we already have a cached result (instant on remount)
-    if (svgCache.has(code)) {
-      setSvg(svgCache.get(code)!);
-      setRenderFailed(false);
-      return;
-    }
-
-    // Try fast synchronous render immediately
-    const fastResult = tryFastRender(code);
-    if (fastResult) {
-      svgCache.set(code, fastResult);
-      setSvg(fastResult);
-      setRenderFailed(false);
-      return;
-    }
-
-    // Fallback: debounce the async mermaid render
-    setSvg(null);
-    const currentRenderId = ++renderIdRef.current;
-    setRenderFailed(false);
-
-    if (debounceRef.current) {
-      clearTimeout(debounceRef.current);
-    }
-
-    debounceRef.current = setTimeout(() => {
-      getMermaid()
-        .then(async (mermaidModule) => {
-          if (renderIdRef.current !== currentRenderId) return;
-          const rendererId = `mermaid-${id.replaceAll(':', '')}`;
-          const container = document.createElement('div');
-          container.style.visibility = 'hidden';
-          container.style.position = 'absolute';
-          container.style.top = '-9999px';
-          container.style.width = '900px';
-          document.body.appendChild(container);
-          try {
-            const result = await mermaidModule.default.render(rendererId, code, container);
-            if (renderIdRef.current === currentRenderId && result) {
-              svgCache.set(code, result.svg);
-              setSvg(result.svg);
-              setRenderFailed(false);
-            }
-          } finally {
-            container.remove();
-          }
-        })
-        .catch((err) => {
-          if (renderIdRef.current === currentRenderId) {
-            console.error('[MermaidDiagram] fallback failed:', err);
-            setSvg(null);
-            setRenderFailed(true);
-          }
-        });
-    }, RENDER_DEBOUNCE_MS);
-
-    const timer = debounceRef.current;
-    const renderId = renderIdRef;
-    return () => {
-      renderId.current++;
-      if (timer) {
-        clearTimeout(timer);
-      }
-    };
-  }, [code, id]);
-
-  const processedSvg = svg ? makeResponsive(svg) : null;
-
-  if (renderFailed) {
-    return (
-      <pre
-        className={cn(
-          'tw-my-3 tw-overflow-auto tw-whitespace-pre-wrap tw-break-all',
-          'tw-py-3 tw-px-4',
-          'tw-bg-neutral-50',
-          'tw-rounded-md tw-text-neutral-400',
-          'tw-text-sm tw-font-mono',
-        )}
-      >
-        <code>{code}</code>
-      </pre>
-    );
-  }
-
-  if (processedSvg) {
-    return (
-      <ZoomableSvg
-        key={code}
-        html={processedSvg}
-        copyText={`\`\`\`mermaid\n${code}\n\`\`\``}
-        className="tw-my-3"
-      />
-    );
-  }
-
-  return (
-    <div className="tw-my-3 tw-overflow-hidden tw-rounded-md tw-border tw-border-neutral-150 tw-bg-neutral-50 tw-p-6">
-      <Skeleton className="tw-h-40" />
-    </div>
-  );
-};

package/src/blocks/MermaidDiagram/index.ts

@@ -1 +0,0 @@
-export { MermaidDiagram } from './MermaidDiagram';