@keboola/design 1.0.0

package/src/blocks/MermaidDiagram/MermaidDiagram.tsx

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

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

package/src/blocks/MultiActionButtonGroup/MultiActionButton.stories.tsx

@@ -0,0 +1,118 @@
+import type { ComponentType } from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { TooltipProvider } from '../../components/Tooltip';
+
+import { MultiActionButton } from './MultiActionButton';
+import { MultiActionButtonGroup } from './MultiActionButtonGroup';
+
+const withProvider = (Story: ComponentType) => {
+  return (
+    <TooltipProvider>
+      <Story />
+    </TooltipProvider>
+  );
+};
+
+export default {
+  component: MultiActionButton,
+  args: {
+    disabled: false,
+    isLoading: false,
+    tooltipContent: 'Action',
+    icon: 'trash',
+    onClick: () => alert('Button clicked'),
+  },
+  argTypes: {
+    tooltipVariant: {
+      description: 'Tooltip variant',
+      control: 'select',
+      options: ['action', 'explanatory'],
+    },
+  },
+  decorators: [withProvider],
+} satisfies Meta<typeof MultiActionButton>;
+
+type Story = StoryObj<typeof MultiActionButton>;
+
+export const Default: Story = {
+  args: {
+    icon: 'pen',
+    tooltipContent: 'Edit',
+  },
+};
+
+export const Delete: Story = {
+  args: {
+    icon: 'trash',
+    tooltipContent: 'Delete',
+  },
+};
+
+export const Loading: Story = {
+  args: {
+    icon: 'pen',
+    tooltipContent: 'Saving...',
+    isLoading: true,
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    icon: 'trash',
+    tooltipContent: 'Delete (disabled)',
+    disabled: true,
+  },
+};
+
+export const ButtonGroup: Story = {
+  render: () => (
+    <MultiActionButtonGroup>
+      <MultiActionButtonGroup.Button
+        icon="pen"
+        label="Edit"
+        tooltipContent="Edit"
+        onClick={() => alert('Edit clicked')}
+      />
+      <MultiActionButtonGroup.Button
+        icon="copy"
+        label="Copy"
+        tooltipContent="Copy"
+        onClick={() => alert('Copy clicked')}
+      />
+      <MultiActionButtonGroup.Button
+        icon="trash"
+        label="Delete"
+        tooltipContent="Delete"
+        onClick={() => alert('Delete clicked')}
+      />
+    </MultiActionButtonGroup>
+  ),
+};
+
+export const ButtonGroupWithMixedStates: Story = {
+  render: () => (
+    <MultiActionButtonGroup>
+      <MultiActionButtonGroup.Button
+        icon="pen"
+        label="Edit"
+        tooltipContent="Edit"
+        onClick={() => alert('Edit clicked')}
+      />
+      <MultiActionButtonGroup.Button
+        icon="copy"
+        label="Copy"
+        tooltipContent="Processing..."
+        isLoading={true}
+        onClick={() => {}}
+      />
+      <MultiActionButtonGroup.Button
+        icon="trash"
+        label="Delete"
+        tooltipContent="Delete (disabled)"
+        disabled={true}
+        onClick={() => {}}
+      />
+    </MultiActionButtonGroup>
+  ),
+};

package/src/blocks/MultiActionButtonGroup/MultiActionButton.tsx

@@ -0,0 +1,40 @@
+import type { ComponentProps, ReactNode } from 'react';
+
+import { Button } from '../../components/Button';
+import type { Icon } from '../../components/Icon';
+import { Tooltip } from '../../components/Tooltip';
+
+type Props = {
+  disabled?: boolean;
+  icon: ComponentProps<typeof Icon>['icon'];
+  isLoading?: boolean;
+  label: string;
+  onClick: ComponentProps<typeof Button>['onClick'];
+  tooltipContent: ReactNode;
+  tooltipVariant?: ComponentProps<typeof Tooltip>['variant'];
+  'data-testid'?: string;
+};
+
+export const MultiActionButton = ({
+  disabled,
+  icon,
+  isLoading,
+  label,
+  onClick,
+  tooltipContent,
+  tooltipVariant,
+  'data-testid': dataTestId,
+}: Props) => (
+  <Tooltip placement="top" tooltip={tooltipContent} triggerAsChild variant={tooltipVariant}>
+    <Button
+      disabled={disabled}
+      icon={icon}
+      isLoading={isLoading}
+      aria-label={label}
+      onClick={onClick}
+      variant="invisible"
+      size="icon"
+      data-testid={dataTestId}
+    />
+  </Tooltip>
+);

package/src/blocks/MultiActionButtonGroup/MultiActionButtonGroup.tsx

@@ -0,0 +1,16 @@
+import type { PropsWithChildren } from 'react';
+
+import { ButtonGroup } from '../../components/ButtonGroup';
+import { cn } from '../../utils';
+
+import { MultiActionButton } from './MultiActionButton';
+
+type Props = {
+  className?: string;
+} & PropsWithChildren;
+
+export const MultiActionButtonGroup = ({ children, className }: Props) => (
+  <ButtonGroup className={cn('tw-text-nowrap', className)}>{children}</ButtonGroup>
+);
+
+MultiActionButtonGroup.Button = MultiActionButton;

package/src/blocks/MultiActionButtonGroup/index.ts

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