@keboola/design 2.0.1 → 2.1.0

package/src/blocks/InputOtp/InputOtp.tsx

@@ -1,62 +0,0 @@
-import type { ComponentProps, ReactNode, Ref } from 'react';
-import { OTPInput, REGEXP_ONLY_DIGITS } from 'input-otp';
-
-import { cn } from '../../utils';
-
-import { type InputOtpSizing, type InputOtpState, InputOtpVariantContext } from './context';
-import { InputOtpGroup } from './InputOtpGroup';
-import { InputOtpSeparator } from './InputOtpSeparator';
-import { InputOtpSlot } from './InputOtpSlot';
-
-// The `OTPInput` props union pairs `render` with `children?: never` (and vice versa).
-// `Extract` picks the children-arm so passing `render` is a compile error.
-type OtpInputProps = ComponentProps<typeof OTPInput>;
-type OtpInputChildrenProps = Omit<
-  Extract<OtpInputProps, { children: ReactNode }>,
-  'containerClassName'
->;
-
-type RootOwnProps = {
-  /** Visual size of each slot. Defaults to `md`. Matches InputGroup heights (sm/md/lg ≈ 32 / 36 / 40px). */
-  sizing?: InputOtpSizing;
-  /** Drives the error ring/border on each slot and `aria-invalid` on the inner input. */
-  state?: InputOtpState;
-  /** Class for the outer flex container that holds groups + separators. */
-  containerClassName?: string;
-};
-
-type RootProps = OtpInputChildrenProps & RootOwnProps;
-
-const Root = ({
-  ref,
-  sizing = 'md',
-  state = 'default',
-  pattern = REGEXP_ONLY_DIGITS,
-  containerClassName,
-  className,
-  children,
-  ...rest
-}: RootProps & { ref?: Ref<HTMLInputElement> }) => (
-  <InputOtpVariantContext value={{ sizing, state }}>
-    <OTPInput
-      {...rest}
-      ref={ref}
-      pattern={pattern}
-      aria-invalid={state === 'error' || undefined}
-      containerClassName={cn(
-        'tw-flex tw-items-center tw-gap-2 has-[:disabled]:tw-opacity-50',
-        containerClassName,
-      )}
-      className={cn('disabled:tw-cursor-not-allowed', className)}
-    >
-      {children}
-    </OTPInput>
-  </InputOtpVariantContext>
-);
-
-export const InputOtp = Object.assign(Root, {
-  Group: InputOtpGroup,
-  Slot: InputOtpSlot,
-  Separator: InputOtpSeparator,
-});
-export type { RootProps as InputOtpProps };

package/src/blocks/InputOtp/InputOtpGroup.tsx

@@ -1,13 +0,0 @@
-import type { ComponentProps, Ref } from 'react';
-
-import { cn } from '../../utils';
-
-type GroupProps = ComponentProps<'div'>;
-
-export const InputOtpGroup = ({
-  ref,
-  className,
-  ...props
-}: GroupProps & { ref?: Ref<HTMLDivElement> }) => (
-  <div ref={ref} className={cn('tw-flex tw-items-center tw-gap-2', className)} {...props} />
-);

package/src/blocks/InputOtp/InputOtpSeparator.tsx

@@ -1,23 +0,0 @@
-import type { ComponentProps, Ref } from 'react';
-
-import { Minus } from '../../icons';
-import { cn } from '../../utils';
-
-type SeparatorProps = ComponentProps<'div'>;
-
-export const InputOtpSeparator = ({
-  ref,
-  children,
-  className,
-  ...props
-}: SeparatorProps & { ref?: Ref<HTMLDivElement> }) => (
-  <div
-    ref={ref}
-    role="separator"
-    aria-orientation="vertical"
-    className={cn('tw-flex tw-items-center tw-text-muted-foreground', className)}
-    {...props}
-  >
-    {children ?? <Minus className="tw-size-4" />}
-  </div>
-);

package/src/blocks/InputOtp/InputOtpSlot.styles.ts

@@ -1,52 +0,0 @@
-import { cva, type VariantProps } from 'class-variance-authority';
-
-// Slot sizes mirror InputGroup (`small` / `medium` / `default` ≈ 32 / 36 / 40px) so an OTP
-// field can sit next to a regular text input without the row jumping.
-export const slotVariants = cva(
-  [
-    'tw-relative',
-    'tw-flex',
-    'tw-items-center',
-    'tw-justify-center',
-    'tw-border',
-    'tw-border-input',
-    'tw-bg-background',
-    'tw-text-foreground',
-    'tw-font-medium',
-    'tw-tabular-nums',
-    'tw-rounded-lg',
-    'tw-transition',
-    'tw-outline-none',
-    // active slot sits above its neighbours so its ring isn't clipped
-    'data-[active=true]:tw-z-10',
-    'data-[active=true]:tw-border-primary',
-    'data-[active=true]:tw-ring-2',
-    'data-[active=true]:tw-ring-primary/50',
-  ],
-  {
-    defaultVariants: {
-      sizing: 'md',
-      state: 'default',
-    },
-    variants: {
-      sizing: {
-        sm: ['tw-h-8', 'tw-w-8', 'tw-text-sm'],
-        md: ['tw-h-9', 'tw-w-9', 'tw-text-base'],
-        lg: ['tw-h-10', 'tw-w-10', 'tw-text-lg'],
-      },
-      // `!` forces the border colour over the base `tw-border-input` once tailwind-merge dedupes.
-      // Matches the pattern InputGroup uses for its argo error state.
-      state: {
-        default: [],
-        error: [
-          '!tw-border-destructive',
-          'tw-bg-destructive/5',
-          'data-[active=true]:!tw-border-destructive',
-          'data-[active=true]:tw-ring-destructive/40',
-        ],
-      },
-    },
-  },
-);
-
-export type SlotVariants = VariantProps<typeof slotVariants>;

package/src/blocks/InputOtp/InputOtpSlot.tsx

@@ -1,44 +0,0 @@
-import type { ComponentProps, Ref } from 'react';
-
-import { cn } from '../../utils';
-
-import { useInputOtpRenderContext, useInputOtpVariant } from './context';
-import { slotVariants } from './InputOtpSlot.styles';
-
-type SlotProps = Omit<ComponentProps<'div'>, 'children'> & {
-  index: number;
-};
-
-export const InputOtpSlot = ({
-  ref,
-  index,
-  className,
-  ...props
-}: SlotProps & { ref?: Ref<HTMLDivElement> }) => {
-  const { slots } = useInputOtpRenderContext();
-  const { sizing, state } = useInputOtpVariant();
-  const slot = slots[index];
-  const char = slot?.char ?? null;
-  const isActive = slot?.isActive ?? false;
-  const hasFakeCaret = slot?.hasFakeCaret ?? false;
-
-  return (
-    <div
-      ref={ref}
-      data-active={isActive || undefined}
-      data-slot-index={index}
-      className={cn(slotVariants({ sizing, state }), className)}
-      {...props}
-    >
-      {char}
-      {hasFakeCaret && (
-        <div
-          aria-hidden="true"
-          className="tw-pointer-events-none tw-absolute tw-inset-0 tw-flex tw-items-center tw-justify-center"
-        >
-          <div className="tw-h-1/2 tw-w-px tw-animate-caret-blink tw-bg-foreground" />
-        </div>
-      )}
-    </div>
-  );
-};

package/src/blocks/InputOtp/context.ts

@@ -1,23 +0,0 @@
-import { createContext, use } from 'react';
-import { OTPInputContext } from 'input-otp';
-
-import { type SlotVariants } from './InputOtpSlot.styles';
-
-type Sizing = NonNullable<SlotVariants['sizing']>;
-type State = NonNullable<SlotVariants['state']>;
-
-type InputOtpVariantContextValue = {
-  sizing: Sizing;
-  state: State;
-};
-
-export const InputOtpVariantContext = createContext<InputOtpVariantContextValue>({
-  sizing: 'md',
-  state: 'default',
-});
-
-export const useInputOtpVariant = () => use(InputOtpVariantContext);
-
-export const useInputOtpRenderContext = () => use(OTPInputContext);
-
-export type { Sizing as InputOtpSizing, State as InputOtpState };

package/src/blocks/InputOtp/index.ts

@@ -1,23 +0,0 @@
-import { use } from 'react';
-import { OTPInputContext, type RenderProps } from 'input-otp';
-
-export {
-  REGEXP_ONLY_CHARS,
-  REGEXP_ONLY_DIGITS,
-  REGEXP_ONLY_DIGITS_AND_CHARS,
-  type SlotProps as InputOtpRenderSlotProps,
-} from 'input-otp';
-
-/**
- * Access the `input-otp` render context (slots, focus, hover) — use this inside a custom
- * child of `<InputOtp>` to render slots yourself. Throws if called outside `<InputOtp>`.
- */
-export const useInputOtpContext = (): RenderProps => {
-  const ctx = use(OTPInputContext);
-  if (!ctx.slots) {
-    throw new Error('useInputOtpContext must be used inside <InputOtp>.');
-  }
-  return ctx;
-};
-
-export * from './InputOtp';

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';