@keboola/design 1.0.0

package/src/components/ZoomableSvg/ZoomableSvg.stories.tsx

@@ -0,0 +1,53 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { withHiddenFullscreen, withTooltipProvider } from '../../utils/decorators';
+
+import { ZoomableSvg } from './ZoomableSvg';
+
+const SAMPLE_SVG = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 200">
+  <rect x="10" y="10" width="120" height="60" rx="8" fill="#e0f0ff" stroke="#075fb8" stroke-width="2"/>
+  <text x="70" y="45" text-anchor="middle" font-family="Inter, sans-serif" font-size="14" fill="#222529">Source</text>
+  <rect x="260" y="10" width="120" height="60" rx="8" fill="#e0f0ff" stroke="#075fb8" stroke-width="2"/>
+  <text x="320" y="45" text-anchor="middle" font-family="Inter, sans-serif" font-size="14" fill="#222529">Destination</text>
+  <line x1="130" y1="40" x2="260" y2="40" stroke="#a2aab8" stroke-width="2" marker-end="url(#arrow)"/>
+  <defs><marker id="arrow" markerWidth="10" markerHeight="7" refX="10" refY="3.5" orient="auto"><polygon points="0 0, 10 3.5, 0 7" fill="#a2aab8"/></marker></defs>
+  <rect x="140" y="120" width="120" height="60" rx="8" fill="#fff3e0" stroke="#f59300" stroke-width="2"/>
+  <text x="200" y="155" text-anchor="middle" font-family="Inter, sans-serif" font-size="14" fill="#222529">Transform</text>
+  <line x1="70" y1="70" x2="200" y2="120" stroke="#a2aab8" stroke-width="1.5" stroke-dasharray="5 3"/>
+  <line x1="200" y1="120" x2="320" y2="70" stroke="#a2aab8" stroke-width="1.5" stroke-dasharray="5 3"/>
+</svg>`;
+
+const meta: Meta<typeof ZoomableSvg> = {
+  title: 'Components/ZoomableSvg',
+  component: ZoomableSvg,
+  decorators: [withTooltipProvider, withHiddenFullscreen],
+  parameters: {
+    layout: 'padded',
+  },
+  args: {
+    html: SAMPLE_SVG,
+    copyText: 'Sample SVG code',
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof ZoomableSvg>;
+
+export const Default: Story = {};
+
+export const WithoutCopy: Story = {
+  args: {
+    copyText: undefined,
+  },
+};
+
+export const InNarrowContainer: Story = {
+  decorators: [
+    (Story) => (
+      <div style={{ width: 300 }}>
+        <Story />
+      </div>
+    ),
+  ],
+};

package/src/components/ZoomableSvg/ZoomableSvg.tsx

@@ -0,0 +1,198 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+import { ClipboardButton } from '../../blocks/ClipboardButton';
+import { cn } from '../../utils';
+import { Button } from '../Button';
+import { Tooltip } from '../Tooltip';
+
+const MIN_SCALE = 0.5;
+const MAX_SCALE = 3;
+const ZOOM_STEP = 0.1;
+
+type Props = {
+  /** Raw HTML/SVG string. Caller is responsible for sanitizing user-generated content before passing. */
+  html: string;
+  copyText?: string;
+  className?: string;
+};
+
+export const ZoomableSvg = ({ html, copyText, className }: Props) => {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [scale, setScale] = useState(1);
+  const [translate, setTranslate] = useState({ x: 0, y: 0 });
+  const [isFullscreen, setIsFullscreen] = useState(false);
+
+  useEffect(() => {
+    if (!isFullscreen) return;
+    const onKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        e.stopPropagation();
+        setIsFullscreen(false);
+      }
+    };
+    document.addEventListener('keydown', onKeyDown, { capture: true });
+    return () => document.removeEventListener('keydown', onKeyDown, { capture: true });
+  }, [isFullscreen]);
+
+  const dragRef = useRef<{
+    startX: number;
+    startY: number;
+    startTx: number;
+    startTy: number;
+  } | null>(null);
+
+  useEffect(() => {
+    const el = containerRef.current;
+    if (!el) return;
+
+    const onWheel = (e: WheelEvent) => {
+      if (!e.ctrlKey && !e.metaKey) return;
+      e.preventDefault();
+      const delta = e.deltaY > 0 ? -ZOOM_STEP : ZOOM_STEP;
+      setScale((s) => Math.min(MAX_SCALE, Math.max(MIN_SCALE, s + delta)));
+    };
+
+    el.addEventListener('wheel', onWheel, { passive: false });
+    return () => el.removeEventListener('wheel', onWheel);
+  }, []);
+
+  const didDragRef = useRef(false);
+
+  const handleMouseDown = useCallback(
+    (e: React.MouseEvent) => {
+      if (e.button !== 0) return;
+      e.preventDefault();
+      didDragRef.current = false;
+      dragRef.current = {
+        startX: e.clientX,
+        startY: e.clientY,
+        startTx: translate.x,
+        startTy: translate.y,
+      };
+    },
+    [translate],
+  );
+
+  const handleMouseMove = useCallback((e: React.MouseEvent) => {
+    if (!dragRef.current) return;
+    didDragRef.current = true;
+    setTranslate({
+      x: dragRef.current.startTx + e.clientX - dragRef.current.startX,
+      y: dragRef.current.startTy + e.clientY - dragRef.current.startY,
+    });
+  }, []);
+
+  const handleMouseUp = useCallback(() => {
+    dragRef.current = null;
+  }, []);
+
+  const handleReset = useCallback(() => {
+    setScale(1);
+    setTranslate({ x: 0, y: 0 });
+  }, []);
+
+  const isZoomed = Math.abs(scale - 1) > 0.001 || translate.x !== 0 || translate.y !== 0;
+
+  const handleClick = useCallback((e: React.MouseEvent) => {
+    if (didDragRef.current) {
+      e.stopPropagation();
+    }
+  }, []);
+
+  const stopPropagation = useCallback((e: React.SyntheticEvent) => {
+    e.stopPropagation();
+  }, []);
+
+  const diagramContent = (
+    <div
+      role="presentation"
+      className={cn('tw-group/zoom tw-relative', isFullscreen && 'tw-h-full')}
+      onClick={handleClick}
+    >
+      <div
+        role="presentation"
+        ref={containerRef}
+        className={cn(
+          'tw-overflow-hidden tw-cursor-grab active:tw-cursor-grabbing tw-p-3',
+          isFullscreen && 'tw-h-full',
+        )}
+        onMouseDown={handleMouseDown}
+        onMouseMove={handleMouseMove}
+        onMouseUp={handleMouseUp}
+        onMouseLeave={handleMouseUp}
+      >
+        <div
+          className={cn(
+            'tw-flex tw-justify-center tw-origin-center',
+            isFullscreen && 'tw-h-full [&>svg]:tw-h-full',
+          )}
+          style={{ transform: `translate(${translate.x}px, ${translate.y}px) scale(${scale})` }}
+          dangerouslySetInnerHTML={{ __html: html }}
+        />
+      </div>
+      <div
+        role="presentation"
+        className="tw-absolute tw-right-1 tw-top-1 tw-flex tw-gap-1 tw-opacity-0 tw-transition-opacity group-hover/zoom:tw-opacity-100"
+        onClick={stopPropagation}
+      >
+        {isZoomed && (
+          <Tooltip tooltip="Reset zoom" placement="top" triggerAsChild>
+            <Button size="small" variant="outline" onClick={handleReset} argo>
+              Reset
+            </Button>
+          </Tooltip>
+        )}
+        {copyText && (
+          <ClipboardButton
+            text={copyText}
+            tooltip="Copy code"
+            size="icon-sm"
+            variant="outline"
+            argo
+          />
+        )}
+        <Tooltip
+          tooltip={isFullscreen ? 'Exit fullscreen' : 'Fullscreen'}
+          placement="top"
+          triggerAsChild
+        >
+          <Button
+            size="icon-sm"
+            variant="outline"
+            icon={
+              isFullscreen
+                ? 'down-left-and-up-right-to-center'
+                : 'up-right-and-down-left-from-center'
+            }
+            aria-label={isFullscreen ? 'Exit fullscreen' : 'Fullscreen'}
+            onClick={() => setIsFullscreen((f) => !f)}
+            argo
+          />
+        </Tooltip>
+      </div>
+    </div>
+  );
+
+  if (isFullscreen) {
+    return (
+      <div
+        role="presentation"
+        className="tw-fixed tw-inset-0 tw-z-[1060] tw-bg-neutral-50 tw-p-4"
+        onClick={stopPropagation}
+      >
+        {diagramContent}
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className={cn(
+        'tw-overflow-hidden tw-rounded-md tw-border tw-border-neutral-150 tw-bg-neutral-50',
+        className,
+      )}
+    >
+      {diagramContent}
+    </div>
+  );
+};

package/src/components/ZoomableSvg/index.ts

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

package/src/constants/keyCodes.ts

@@ -0,0 +1,5 @@
+export const keyCodes = {
+  ENTER: 'Enter',
+  ESCAPE: 'Escape',
+  SPACE: ' ',
+};

package/src/docs/Colors.mdx

@@ -0,0 +1,19 @@
+import { Meta, ColorPalette, ColorItem } from '@storybook/addon-docs/blocks';
+import colors from '@keboola/tailwind-config/colors';
+
+<Meta title="Colors" />
+
+# Colors
+
+<ColorPalette>
+  <ColorItem title="Neutral" colors={colors.neutral} />
+  <ColorItem title="Primary" colors={colors.primary} />
+  <ColorItem title="Secondary" colors={colors.secondary} />
+  <ColorItem title="Warning" colors={colors.warning} />
+  <ColorItem title="Error" colors={colors.error} />
+  <ColorItem title="Purple" colors={colors.purple} />
+  <ColorItem title="Cyan" colors={colors.cyan} />
+  <ColorItem title="Teal" colors={colors.teal} />
+  <ColorItem title="Yellow" colors={colors.yellow} />
+  <ColorItem title="Pink" colors={colors.pink} />
+</ColorPalette>

package/src/docs/Spacing.mdx

@@ -0,0 +1,35 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+
+<Meta title="Spacing" />
+
+export const Box = ({ size, fontSize, text = true }) => {
+  return (
+    <div>
+      <div
+        style={{
+          width: `${size}px`,
+          height: `${size}px`,
+          fontSize,
+        }}
+        className="tw-flex tw-items-center tw-justify-center tw-bg-primary-500 tw-text-white"
+      >
+        {text ? `${size}` : ''}
+      </div>
+      <div className="tw-mt-6">{size}px</div>
+    </div>
+  );
+};
+
+# Spacing
+
+<div className="tw-flex tw-items-end tw-gap-12">
+  <Box size={4} text={false} />
+  <Box size={8} fontSize="6px" />
+  <Box size={12} fontSize="6px" />
+  <Box size={16} fontSize="6px" />
+  <Box size={24} fontSize="6px" />
+  <Box size={32} fontSize="8px" />
+  <Box size={40} fontSize="12px" />
+  <Box size={48} fontSize="12px" />
+  <Box size={64} fontSize="16px" />
+</div>

package/src/docs/Typography.mdx

@@ -0,0 +1,63 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+
+import { Link } from '../components/Link';
+import { Typeset } from './components/Typeset';
+
+<Meta title="Typography" />
+
+# Typography
+
+## Inter (main font)
+
+### Weights
+
+<Typeset
+  items={[
+    { label: 'normal (400)', className: 'tw-font-normal' },
+    { label: 'medium (500)', className: 'tw-font-medium' },
+    { label: 'semibold (600)', className: 'tw-font-semibold' },
+  ]}
+  sampleContent="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+/>
+
+### Body
+
+<Typeset
+  items={[
+    { label: 'Normal - 14/20', className: 'tw-text-sm tw-font-normal' },
+    { label: 'Medium - 14/20', className: 'tw-text-sm tw-font-medium' },
+    { label: 'Normal - 12/16', className: 'tw-text-xs tw-font-normal' },
+    { label: 'Medium - 12/16', className: 'tw-text-xs tw-font-medium' },
+  ]}
+  sampleContent="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+/>
+
+### Links
+
+<Typeset
+  items={[
+    {
+      label: 'Heading 3 - 16/24',
+      elementType: 'h3',
+    },
+    { label: 'Normal - 14/20', elementType: 'span'},
+    { label: 'Medium - 14/20', elementType: 'span', className: 'tw-font-medium' },
+    { label: 'Medium - 12/16', elementType: 'span', className: 'tw-text-xs tw-font-medium' }
+
+]}
+sampleContent={<Link href="#">This is a link</Link>}
+/>
+
+### Headings
+
+<Typeset
+  items={[
+    { label: 'H1', elementType: 'h1' },
+    { label: 'H2', elementType: 'h2' },
+    { label: 'H3', elementType: 'h3' },
+    { label: 'H4', elementType: 'h4' },
+  ]}
+  sampleContent="Lorem ipsum dolor sit amet"
+/>
+
+{/* TODO: Show more versions (letter spacings,...), add controls and add monospace font */}

package/src/docs/components/Typeset.tsx

@@ -0,0 +1,35 @@
+import { createElement, Fragment } from 'react';
+import type { ReactNode } from 'react';
+import { Unstyled } from '@storybook/addon-docs/blocks';
+
+type Props = {
+  items: {
+    label: string;
+    className?: string;
+    elementType?: keyof HTMLElementTagNameMap;
+  }[];
+  sampleContent: ReactNode;
+};
+
+export const Typeset = (props: Props) => {
+  return (
+    <Unstyled>
+      <div className="tw-grid tw-grid-cols-5 tw-items-center tw-gap-x-5 tw-gap-y-2 tw-p-5">
+        {props.items.map(({ label, className, elementType = 'span' }) => (
+          <Fragment key={label}>
+            {createElement(
+              elementType || 'span',
+              { className: `${className} tw-justify-self-end` },
+              label,
+            )}
+            {createElement(
+              elementType || 'span',
+              { className: `${className} tw-col-span-4` },
+              props.sampleContent,
+            )}
+          </Fragment>
+        ))}
+      </div>
+    </Unstyled>
+  );
+};

package/src/hooks/useAutosizeInput.stories.tsx

@@ -0,0 +1,142 @@
+import { type ChangeEvent, useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { Icon } from '../components/Icon';
+import { TextInput } from '../components/Input/TextInput/TextInput';
+import { InputGroup } from '../components/InputGroup';
+
+import { useAutosizeInput } from './useAutosizeInput';
+
+type Story = StoryObj;
+
+export default {
+  title: 'Hooks/useAutosizeInput',
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'Hook that measures text width and returns `inputRef`, `inputStyle`, and `sizerElement` ' +
+          'to make any `<input>` auto-resize to its content. ' +
+          'Compose with `InputGroup` for design-system styling, or use with a plain `<input>` for lightweight inline editing.',
+      },
+    },
+  },
+} satisfies Meta;
+
+const PLAIN_INPUT_CLASS =
+  'tw-rounded tw-border tw-border-solid tw-border-neutral-200 tw-bg-white tw-px-1.5 tw-py-0.5 tw-text-sm tw-text-neutral-800 focus:tw-border-secondary-500 focus:tw-outline-none';
+
+const PlainAutosizeInput = ({
+  defaultValue = '',
+  placeholder,
+  minWidth = 40,
+}: {
+  defaultValue?: string;
+  placeholder?: string;
+  minWidth?: number;
+}) => {
+  const [value, setValue] = useState(defaultValue);
+  const { inputRef, inputStyle, sizerElement } = useAutosizeInput({
+    value,
+    placeholder,
+    minWidth,
+  });
+
+  return (
+    <div className="tw-relative tw-inline-block">
+      <input
+        ref={inputRef}
+        value={value}
+        placeholder={placeholder}
+        onChange={(e: ChangeEvent<HTMLInputElement>) => setValue(e.target.value)}
+        style={inputStyle}
+        className={PLAIN_INPUT_CLASS}
+      />
+      {sizerElement}
+    </div>
+  );
+};
+
+export const PlainInput: Story = {
+  render: () => <PlainAutosizeInput placeholder="Type to resize…" />,
+};
+
+export const WithTextInput: Story = {
+  render: () => {
+    const Demo = () => {
+      const [value, setValue] = useState('');
+      const { inputRef, inputStyle, sizerElement } = useAutosizeInput({
+        value,
+        placeholder: 'Type to resize…',
+        minWidth: 40,
+      });
+
+      return (
+        <div className="tw-relative tw-inline-block">
+          <TextInput
+            ref={inputRef}
+            value={value}
+            onValueChange={setValue}
+            placeholder="Type to resize…"
+            style={inputStyle}
+            className="!tw-inline-flex"
+          />
+          {sizerElement}
+        </div>
+      );
+    };
+    return <Demo />;
+  },
+};
+
+export const WithInputGroup: Story = {
+  render: () => {
+    const Demo = () => {
+      const [value, setValue] = useState('');
+      const { inputRef, inputStyle, sizerElement } = useAutosizeInput({
+        value,
+        placeholder: 'Search…',
+        minWidth: 40,
+      });
+
+      return (
+        <InputGroup className="!tw-inline-flex">
+          <InputGroup.Addon align="inline-start">
+            <Icon icon="magnifying-glass" className="tw-size-4 tw-text-neutral-400" />
+          </InputGroup.Addon>
+          <InputGroup.Input
+            ref={inputRef}
+            value={value}
+            placeholder="Search…"
+            onChange={(e) => setValue(e.target.value)}
+            style={inputStyle}
+          />
+          {sizerElement}
+        </InputGroup>
+      );
+    };
+    return <Demo />;
+  },
+};
+
+export const ResizeComparison: Story = {
+  render: () => (
+    <div className="tw-flex tw-flex-col tw-gap-3 tw-text-sm">
+      <div className="tw-flex tw-items-center tw-gap-3">
+        <span className="tw-w-32 tw-text-neutral-500">empty (minWidth)</span>
+        <PlainAutosizeInput placeholder="…" />
+      </div>
+      <div className="tw-flex tw-items-center tw-gap-3">
+        <span className="tw-w-32 tw-text-neutral-500">short text</span>
+        <PlainAutosizeInput defaultValue="Hi" placeholder="…" />
+      </div>
+      <div className="tw-flex tw-items-center tw-gap-3">
+        <span className="tw-w-32 tw-text-neutral-500">long text</span>
+        <PlainAutosizeInput
+          defaultValue="The quick brown fox jumps over the lazy dog"
+          placeholder="…"
+        />
+      </div>
+    </div>
+  ),
+};

package/src/hooks/useAutosizeInput.test.tsx

@@ -0,0 +1,77 @@
+import { useState } from 'react';
+import { fireEvent, render, screen } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+
+import { useAutosizeInput } from './useAutosizeInput';
+
+const Harness = ({
+  value: valueProp,
+  placeholder,
+  minWidth,
+}: {
+  value?: string;
+  placeholder?: string;
+  minWidth?: number;
+}) => {
+  const [value, setValue] = useState(valueProp ?? '');
+  const { inputRef, inputStyle, sizerElement } = useAutosizeInput({
+    value,
+    placeholder,
+    minWidth,
+  });
+
+  return (
+    <div style={{ position: 'relative' }}>
+      <input
+        ref={inputRef}
+        value={value}
+        placeholder={placeholder}
+        onChange={(e) => setValue(e.target.value)}
+        style={inputStyle}
+      />
+      {sizerElement}
+    </div>
+  );
+};
+
+const getInput = () => screen.getByPlaceholderText('Type') as HTMLInputElement;
+const getValueSizer = (container: HTMLElement) =>
+  container.querySelector('[data-slot="autosize-sizer"]') as HTMLSpanElement | null;
+const getPlaceholderSizer = (container: HTMLElement) =>
+  container.querySelector('[data-slot="autosize-placeholder-sizer"]') as HTMLSpanElement | null;
+
+describe('useAutosizeInput', () => {
+  describe('sizer text', () => {
+    it('mirrors the value in the value sizer', () => {
+      const { container } = render(<Harness value="hello" placeholder="Type" />);
+      expect(getValueSizer(container)?.textContent).toBe('hello');
+    });
+
+    it('updates the value sizer on typing', () => {
+      const { container } = render(<Harness placeholder="Type" />);
+      fireEvent.change(getInput(), { target: { value: 'typed' } });
+      expect(getValueSizer(container)?.textContent).toBe('typed');
+    });
+  });
+
+  describe('placeholder sizer', () => {
+    it('renders placeholder sizer when placeholder is set', () => {
+      const { container } = render(<Harness placeholder="Type" />);
+      expect(getPlaceholderSizer(container)?.textContent).toBe('Type');
+    });
+
+    it('omits placeholder sizer when no placeholder', () => {
+      const { container } = render(<Harness value="x" />);
+      expect(getPlaceholderSizer(container)).toBeNull();
+    });
+  });
+
+  describe('input style', () => {
+    it('applies minWidth and content-box sizing', () => {
+      render(<Harness placeholder="Type" minWidth={42} />);
+      const input = getInput();
+      expect(input.style.width).toBe('42px');
+      expect(input.style.boxSizing).toBe('content-box');
+    });
+  });
+});