@keboola/design 2.0.0 → 2.1.0

package/src/components/ZoomableSvg/ZoomableSvg.tsx

@@ -1,200 +0,0 @@
-import { useCallback, useEffect, useRef, useState } from 'react';
-
-import { ClipboardButton } from '../../blocks/ClipboardButton';
-import { Maximize2, Minimize2 } from '../../icons';
-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"
-            aria-label={isFullscreen ? 'Exit fullscreen' : 'Fullscreen'}
-            onClick={() => setIsFullscreen((f) => !f)}
-            argo
-          >
-            {isFullscreen ? (
-              <Minimize2 className="tw-size-4" />
-            ) : (
-              <Maximize2 className="tw-size-4" />
-            )}
-          </Button>
-        </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

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

package/src/constants/keyCodes.ts

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

package/src/docs/Colors.mdx

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

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

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

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

@@ -1,142 +0,0 @@
-import { type ChangeEvent, useState } from 'react';
-import type { Meta, StoryObj } from '@storybook/react-vite';
-
-import { TextInput } from '../components/Input/TextInput/TextInput';
-import { InputGroup } from '../components/InputGroup';
-import { Search } from '../icons';
-
-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">
-            <Search 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

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

package/src/hooks/useAutosizeInput.tsx

@@ -1,107 +0,0 @@
-import {
-  type CSSProperties,
-  type ReactNode,
-  type RefObject,
-  useLayoutEffect,
-  useMemo,
-  useRef,
-  useState,
-} from 'react';
-
-const SIZER_STYLE = {
-  position: 'absolute',
-  top: 0,
-  left: 0,
-  visibility: 'hidden',
-  height: 0,
-  overflow: 'scroll',
-  whiteSpace: 'pre',
-} satisfies CSSProperties;
-
-const CARET_BUFFER_PX = 2;
-
-const FONT_PROPERTIES = [
-  'fontSize',
-  'fontFamily',
-  'fontWeight',
-  'fontStyle',
-  'letterSpacing',
-  'textTransform',
-] as const;
-
-function syncFontStyles(source: HTMLElement, ...targets: (HTMLElement | null)[]) {
-  const computed = window.getComputedStyle(source);
-  for (const target of targets) {
-    if (!target) continue;
-    for (const prop of FONT_PROPERTIES) {
-      target.style[prop] = computed[prop];
-    }
-  }
-}
-
-export type UseAutosizeInputOptions = {
-  value?: string;
-  placeholder?: string;
-  minWidth?: number;
-};
-
-export type UseAutosizeInputReturn = {
-  inputRef: RefObject<HTMLInputElement | null>;
-  inputStyle: CSSProperties;
-  sizerElement: ReactNode;
-};
-
-/**
- * Render `sizerElement` inside a positioned ancestor (e.g. `position: relative`,
- * `inline-flex`, or `InputGroup`) so the absolutely-positioned measurement spans
- * don't anchor to the viewport.
- */
-export function useAutosizeInput({
-  value = '',
-  placeholder,
-  minWidth = 1,
-}: UseAutosizeInputOptions): UseAutosizeInputReturn {
-  const inputRef = useRef<HTMLInputElement>(null);
-  const [sizerNode, setSizerNode] = useState<HTMLSpanElement | null>(null);
-  const [placeholderSizerNode, setPlaceholderSizerNode] = useState<HTMLSpanElement | null>(null);
-  const [width, setWidth] = useState(minWidth);
-
-  useLayoutEffect(() => {
-    if (inputRef.current) {
-      syncFontStyles(inputRef.current, sizerNode, placeholderSizerNode);
-    }
-  }, [sizerNode, placeholderSizerNode]);
-
-  useLayoutEffect(() => {
-    if (!sizerNode) return;
-    let next = sizerNode.scrollWidth;
-    if (placeholderSizerNode) {
-      next = Math.max(next, placeholderSizerNode.scrollWidth);
-    }
-    setWidth(Math.max(next + CARET_BUFFER_PX, minWidth));
-  }, [value, placeholder, minWidth, sizerNode, placeholderSizerNode]);
-
-  const inputStyle = useMemo<CSSProperties>(
-    () => ({ width, boxSizing: 'content-box', flex: 'none' }),
-    [width],
-  );
-
-  const sizerElement = (
-    <>
-      <span ref={setSizerNode} data-slot="autosize-sizer" style={SIZER_STYLE}>
-        {value}
-      </span>
-      {placeholder && (
-        <span
-          ref={setPlaceholderSizerNode}
-          data-slot="autosize-placeholder-sizer"
-          style={SIZER_STYLE}
-        >
-          {placeholder}
-        </span>
-      )}
-    </>
-  );
-
-  return { inputRef, inputStyle, sizerElement };
-}