@keboola/design 1.0.0

package/src/hooks/useAutosizeInput.tsx

@@ -0,0 +1,107 @@
+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 };
+}

package/src/hooks/useElement.ts

@@ -0,0 +1,16 @@
+import { useCallback, useState } from 'react';
+
+// This hook is used to set an element reference and ensure that it only updates once, when element is first set.
+export const useElement = () => {
+  const [element, _setElement] = useState<HTMLElement | null>(null);
+
+  const setElement = useCallback((node: HTMLElement | null) => {
+    _setElement((prev) => {
+      // Only update if not already set
+      if (prev !== null) return prev;
+      return node;
+    });
+  }, []);
+
+  return [element, setElement] as const;
+};

package/src/hooks/useScrollbarPosition.ts

@@ -0,0 +1,68 @@
+import { useEffect, useState } from 'react';
+
+import { useElement } from './useElement';
+
+const calcPosition = ({
+  scrollHeight,
+  clientHeight,
+  scrollTop,
+}: {
+  scrollHeight: number;
+  clientHeight: number;
+  scrollTop: number;
+}) => {
+  // If content doesn't overflow, no scrollbar
+  if (scrollHeight <= clientHeight) return 'none';
+
+  if (scrollTop === 0) return 'top';
+
+  // At the bottom (with small tolerance for precision issues)
+  if (scrollTop + clientHeight >= scrollHeight - 1) return 'bottom';
+
+  return 'middle';
+};
+
+export const useScrollbarPosition = () => {
+  const [element, setElement] = useElement();
+  const [scrollbarPosition, setPosition] = useState<ReturnType<typeof calcPosition>>('none');
+
+  useEffect(() => {
+    if (element === null) return;
+
+    const updatePosition = () => {
+      if (element === null) return;
+
+      const position = calcPosition({
+        scrollHeight: element.scrollHeight,
+        clientHeight: element.clientHeight,
+        scrollTop: element.scrollTop,
+      });
+
+      setPosition(position);
+    };
+
+    // Initial check.
+    const rafId = requestAnimationFrame(updatePosition);
+
+    // Listening for scroll events.
+    element.addEventListener('scroll', updatePosition);
+
+    // Listen for the resize event that might affect scrollbar visibility.
+    const resizeObserver = new ResizeObserver(updatePosition);
+    resizeObserver.observe(element);
+
+    return () => {
+      cancelAnimationFrame(rafId);
+      element.removeEventListener('scroll', updatePosition);
+      resizeObserver.disconnect();
+    };
+  }, [element]);
+
+  return {
+    setElement,
+    isTop: scrollbarPosition === 'top',
+    isBottom: scrollbarPosition === 'bottom',
+    isMiddle: scrollbarPosition === 'middle',
+    isNone: scrollbarPosition === 'none',
+  };
+};

package/src/icon-names.ts

@@ -0,0 +1,20 @@
+import { fas } from '@awesome.me/kit-be8bcf7e5e/icons';
+
+/**
+ * Reads available FontAwesome solid icon names from the FA kit.
+ * Returns deduplicated, sorted kebab-case icon names (e.g. "chart-bar", "circle-check").
+ */
+export const getAvailableIconNames = (): string[] => {
+  const names = new Set<string>();
+  for (const def of Object.values(fas)) {
+    if (
+      def !== null &&
+      typeof def === 'object' &&
+      'iconName' in def &&
+      typeof def.iconName === 'string'
+    ) {
+      names.add(def.iconName);
+    }
+  }
+  return [...names].sort();
+};

package/src/index.ts

@@ -0,0 +1,87 @@
+export * from './components/Button';
+export * from './components/ButtonGroup';
+export * from './components/Calendar';
+export * from './components/DatePicker';
+export * from './components/TimePicker';
+export * from './components/Input';
+export * from './components/InputGroup';
+export * from './components/Label';
+export * from './components/Card';
+export * from './components/Clipboard';
+export * from './components/Switch';
+export * from './components/HelpBlock';
+export * from './components/HoverCard';
+export * from './components/Separator';
+export * from './components/RadioGroup';
+export * from './components/Slider';
+export * from './components/Search';
+export * from './components/Select';
+export * from './components/Checkbox';
+export * from './components/DropdownMenu';
+export * from './components/Popover';
+export * from './components/ScrollArea';
+export * from './components/Modal';
+export * from './components/FullScreenModal';
+export * from './components/Popconfirm';
+export * from './blocks/SplitButton';
+export * from './components/Sheet';
+export * from './components/Sidebar';
+export * from './components/Command';
+export * from './components/Combobox';
+export * from './components/Badge';
+export * from './components/Breadcrumb';
+export * from './components/Navbar';
+export * from './components/Pagination';
+export * from './components/Icon';
+export * from './components/ThemeProvider';
+export * from './components/Avatar';
+export * from './components/MarkedText';
+export * from './components/Toggle';
+export * from './components/Timeline';
+export * from './components/Kbd';
+export * from './components/Collapsible';
+export * from './components/Progress';
+export * from './components/DiffView';
+export * from './blocks/Textarea';
+export * from './blocks/MultiCombobox';
+export { FormGroup, type ValidityState } from './components/FormGroup';
+export { Link } from './components/Link';
+export { Tabs, TabsContent, type Trigger } from './components/Tabs';
+export { Alert } from './components/Alert';
+export { CodeEditor, SqlEditor, type SqlDialectName } from './components/CodeEditor';
+export * from './components/MergeEditor';
+export { Collapse } from './components/Collapse';
+export { CollapsiblePanel } from './components/CollapsiblePanel';
+export { Tooltip, TooltipProvider, type Props as TooltipProps } from './components/Tooltip';
+export { PanelWithDetails } from './components/PanelWithDetails';
+export { Skeleton } from './components/Skeleton/Skeleton';
+export { SkeletonList } from './components/Skeleton/SkeletonList';
+export { EmptySearchContent } from './components/EmptySearchContent';
+export { cn, copyToClipboard, isMac } from './utils';
+export { DotsLoader } from './components/DotsLoader';
+export { Slot } from '@radix-ui/react-slot';
+export { Table } from './components/Table';
+export { mergeRefs } from './utils/mergeRefs';
+export * from './components/Resizable';
+export * from './components/Toast';
+export * from './blocks/EmptyConfigurationActionCard';
+export * from './blocks/EmptyState';
+export * from './blocks/ErrorState';
+export * from './blocks/PageLayout';
+export * from './blocks/PageHeader';
+export * from './blocks/SearchInput';
+export * from './blocks/SearchInputWithNavigation';
+export * from './blocks/Tagger';
+export * from './blocks/MultiActionButtonGroup';
+export * from './blocks/ClipboardButton';
+export * from './blocks/AIKit';
+export * from './blocks/AutoSaveTextarea';
+export * from './blocks/ColorInput';
+export * from './blocks/NumberInput';
+export * from './blocks/PasswordInput';
+export * from './blocks/Form';
+export { Truncated } from './components/Truncated';
+export * from './components/ZoomableSvg';
+
+export * from './hooks/useAutosizeInput';
+export * from './hooks/useScrollbarPosition';

package/src/styles.css

@@ -0,0 +1,212 @@
+@tailwind base;
+@tailwind utilities;
+@tailwind components;
+
+/*
+ * Semantic color tokens — read by Tailwind via rgb(var(--color-*) / <alpha-value>) in
+ * packages/tailwind-config/colors.ts. Channel values are stored as space-separated RGB so
+ * Tailwind opacity modifiers (e.g. `tw-bg-muted/50`) resolve correctly.
+ * Primitive scales (neutral-*, primary-*, error-*, warning-*, etc.) remain hardcoded in colors.ts.
+ */
+:root {
+  /* Surface */
+  --color-background: 249 250 251; /* #f9fafb */
+  --color-foreground: 30 41 59; /* #1e293b */
+
+  /* Popover */
+  --color-popover: 255 255 255; /* #ffffff */
+  --color-popover-foreground: 30 41 59; /* #1e293b */
+
+  /* Accent */
+  --color-accent: 224 242 254; /* #e0f2fe */
+  --color-accent-foreground: 13 65 127; /* #0d417f */
+
+  /* Border / Input */
+  --color-border: 229 231 235; /* #e5e7eb */
+  --color-input: 203 213 225; /* #cbd5e1 */
+
+  /* Destructive */
+  --color-destructive: 220 38 38; /* #dc2626 */
+  --color-destructive-foreground: 255 255 255; /* #ffffff */
+
+  /* Success */
+  --color-success: 31 157 97; /* #1f9d61 */
+
+  /* Muted */
+  --color-muted: 241 245 249; /* #f1f5f9 */
+  --color-muted-foreground: 100 116 139; /* #64748b */
+
+  /* Sidebar */
+  --color-sidebar: 255 255 255; /* #ffffff */
+  --color-sidebar-foreground: 30 41 59; /* #1e293b */
+  --color-sidebar-primary: 31 143 255; /* #1f8fff */
+  --color-sidebar-primary-foreground: 255 255 255; /* #ffffff */
+  --color-sidebar-accent: 219 234 254; /* #dbeafe */
+  --color-sidebar-accent-foreground: 30 41 59; /* #1e293b */
+  --color-sidebar-border: 229 231 235; /* #e5e7eb */
+  --color-sidebar-ring: 31 143 255; /* #1f8fff */
+}
+
+/* Dark-mode seam — placeholder values; finalize palette in a follow-up PR. */
+/* TODO finalize dark palette (UT-3936 follow-up) */
+[data-theme='dark'] {
+  /* Surface */
+  --color-background: 30 41 59; /* #1e293b */
+  --color-foreground: 241 245 249; /* #f1f5f9 */
+
+  /* Popover */
+  --color-popover: 30 41 59; /* #1e293b */
+  --color-popover-foreground: 241 245 249; /* #f1f5f9 */
+
+  /* Accent */
+  --color-accent: 30 58 95; /* #1e3a5f */
+  --color-accent-foreground: 147 197 253; /* #93c5fd */
+
+  /* Border / Input */
+  --color-border: 51 65 85; /* #334155 */
+  --color-input: 71 85 105; /* #475569 */
+
+  /* Destructive */
+  --color-destructive: 239 68 68; /* #ef4444 */
+  --color-destructive-foreground: 255 255 255; /* #ffffff */
+
+  /* Success */
+  --color-success: 34 197 94; /* #22c55e */
+
+  /* Muted */
+  --color-muted: 30 41 59; /* #1e293b */
+  --color-muted-foreground: 148 163 184; /* #94a3b8 */
+
+  /* Sidebar */
+  --color-sidebar: 15 23 42; /* #0f172a */
+  --color-sidebar-foreground: 241 245 249; /* #f1f5f9 */
+  --color-sidebar-primary: 31 143 255; /* #1f8fff */
+  --color-sidebar-primary-foreground: 255 255 255; /* #ffffff */
+  --color-sidebar-accent: 30 58 95; /* #1e3a5f */
+  --color-sidebar-accent-foreground: 241 245 249; /* #f1f5f9 */
+  --color-sidebar-border: 51 65 85; /* #334155 */
+  --color-sidebar-ring: 31 143 255; /* #1f8fff */
+}
+
+@layer base {
+  @font-face {
+    font-family: 'Inter';
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+    src:
+      local(''),
+      url('https://ui.keboola-assets.com/misc-ui-assets/v0.17.0-0-g78ee112/inter-v12-latin-ext_latin/1.0.0/inter-v12-latin-ext_latin-regular.woff2')
+        format('woff2');
+  }
+
+  @font-face {
+    font-family: 'Inter';
+    font-style: normal;
+    font-weight: 500;
+    font-display: swap;
+    src:
+      local(''),
+      url('https://ui.keboola-assets.com/misc-ui-assets/v0.17.0-0-g78ee112/inter-v12-latin-ext_latin/1.0.0/inter-v12-latin-ext_latin-500.woff2')
+        format('woff2');
+  }
+
+  @font-face {
+    font-family: 'Inter';
+    font-style: normal;
+    font-weight: 600;
+    font-display: swap;
+    src:
+      local(''),
+      url('https://ui.keboola-assets.com/misc-ui-assets/v0.17.0-0-g78ee112/inter-v12-latin-ext_latin/1.0.0/inter-v12-latin-ext_latin-600.woff2')
+        format('woff2');
+  }
+
+  html {
+    @apply tw-font-sans;
+    font-size: 16px;
+    line-height: 24px;
+    overscroll-behavior-y: none;
+  }
+
+  body {
+    @apply tw-text-sm/[1.42857143];
+  }
+
+  h1 {
+    font-size: 28px;
+    line-height: 32px;
+    font-weight: 500;
+  }
+
+  h2 {
+    font-size: 22px;
+    line-height: 32px;
+    @apply tw-text-neutral-900;
+    font-weight: 500;
+  }
+
+  h3 {
+    font-size: 16px;
+    line-height: 24px;
+    @apply tw-text-neutral-900;
+    font-weight: 500;
+    margin: 0;
+  }
+
+  h4 {
+    font-size: 14px;
+    line-height: 20px;
+    font-weight: 500;
+    @apply tw-text-neutral-900;
+    margin: 0;
+  }
+
+  h5 {
+    font-size: 12px;
+    line-height: 20px;
+    font-weight: 500;
+    @apply tw-text-neutral-900;
+    margin: 0;
+  }
+
+  h1 small,
+  h2 small,
+  h3 small,
+  h4 small,
+  h5 small,
+  h6 small {
+    @apply tw-text-neutral-400;
+    font-size: 75%;
+  }
+
+  b,
+  strong {
+    @apply tw-font-semibold;
+  }
+}
+
+@layer components {
+  [data-tooltip-content='true'] .tw-prose {
+    @apply tw-prose-invert;
+  }
+
+  .tw-prose blockquote {
+    border-left: 4px solid theme('colors.neutral.300');
+    background-color: theme('colors.neutral.50');
+    padding: 12px 16px;
+    border-radius: 2px;
+    color: theme('colors.neutral.800');
+    font-size: 14px;
+    font-style: italic;
+    font-weight: normal;
+    quotes: none;
+  }
+
+  /* Ensure Google Picker (3rd party modal) always has pointer events enabled */
+  /* The Google Picker uses class "picker" for its container div */
+  .picker,
+  .picker * {
+    pointer-events: auto !important;
+  }
+}

package/src/utils/classNames.test.ts

@@ -0,0 +1,16 @@
+import { test } from 'vitest';
+
+import { extractExternalClasses } from './classNames';
+
+test('extractExternalClasses', () => {
+  expect(extractExternalClasses()).toEqual(['', '']);
+  expect(extractExternalClasses('')).toEqual(['', '']);
+  expect(extractExternalClasses('cls-1 extCls-1 extCls-2 cls-2')).toEqual([
+    'extCls-1 extCls-2',
+    'cls-1 cls-2',
+  ]);
+  expect(extractExternalClasses('first second-class lastClasss')).toEqual([
+    '',
+    'first second-class lastClasss',
+  ]);
+});

package/src/utils/classNames.ts

@@ -0,0 +1,27 @@
+import { clsx } from 'clsx';
+import { extendTailwindMerge } from 'tailwind-merge';
+
+const twMerge = extendTailwindMerge({
+  prefix: 'tw-',
+});
+
+type Mapping = Record<string, unknown>;
+type Argument = string | boolean | undefined | Mapping;
+
+export const cn = (...classes: Argument[]) => twMerge(clsx(...classes));
+
+export const extractExternalClasses = (className?: string) => {
+  if (!className) {
+    return ['', ''];
+  }
+
+  const [extCls, rest] = className.split(' ').reduce(
+    (acc, cls) => {
+      acc[cls.startsWith('extCls-') ? 0 : 1].push(cls);
+      return acc;
+    },
+    [[], []] as [string[], string[]],
+  );
+
+  return [extCls.join(' '), rest.join(' ')];
+};

package/src/utils/copyToClipboard.ts

@@ -0,0 +1,3 @@
+export const copyToClipboard = (text: string) => {
+  return navigator.clipboard.writeText(text);
+};

package/src/utils/createChangeInputEvent.ts

@@ -0,0 +1,28 @@
+import type { ChangeEvent } from 'react';
+
+export const createChangeInputEvent = (input: HTMLInputElement) => {
+  const changeEvent: ChangeEvent<HTMLInputElement> = {
+    target: input,
+    currentTarget: input,
+    type: 'change',
+    nativeEvent: new Event('change', { bubbles: true }),
+    bubbles: true,
+    cancelable: false,
+    defaultPrevented: false,
+    eventPhase: 2, // AT_TARGET
+    isTrusted: false, // Synthetic events are not trusted
+    preventDefault: () => {}, // Provide dummy functions if not needed
+    isDefaultPrevented: () => false,
+    stopPropagation: () => {},
+    isPropagationStopped: () => false,
+    persist: () => {},
+    timeStamp: Date.now(),
+  };
+
+  Object.defineProperty(changeEvent, 'target', {
+    value: input,
+    writable: false,
+  });
+
+  return changeEvent;
+};

package/src/utils/createPrefixedString.ts

@@ -0,0 +1,2 @@
+export const createPrefixedString = (prefix: string) => (literals: TemplateStringsArray) =>
+  literals.reduce((acc, literal) => acc + literal, `${prefix}-`);

package/src/utils/debounce.test.ts

@@ -0,0 +1,63 @@
+import { vi } from 'vitest';
+
+import { debounce } from './debounce';
+
+const fn = vi.fn();
+
+describe(debounce.name, () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+  });
+  afterEach(() => {
+    vi.useRealTimers();
+    vi.clearAllTimers();
+    vi.resetAllMocks();
+  });
+
+  it('should delay function execution by the specified time', () => {
+    const debounced = debounce(fn, 1000);
+
+    debounced();
+
+    expect(fn).not.toHaveBeenCalled();
+
+    vi.advanceTimersByTime(500);
+    expect(fn).not.toHaveBeenCalled();
+
+    vi.advanceTimersByTime(500);
+    expect(fn).toHaveBeenCalledTimes(1); // Now it should call the function
+  });
+
+  it('should reset the timer if called again within the delay', () => {
+    const debounced = debounce(fn, 1000);
+
+    debounced();
+    vi.advanceTimersByTime(500);
+
+    debounced(); // reset timer
+    vi.advanceTimersByTime(500);
+
+    debounced(); // reset timer again
+
+    vi.advanceTimersByTime(999);
+    expect(fn).not.toHaveBeenCalled();
+
+    vi.advanceTimersByTime(1);
+    expect(fn).toHaveBeenCalledTimes(1);
+  });
+
+  it('should call the function only once when debounce is executed multiple times quickly', () => {
+    const debounced = debounce(fn, 1000);
+
+    // Call the debounced function multiple times quickly
+    debounced();
+    debounced();
+    debounced();
+
+    // Advance time by 1000ms
+    vi.advanceTimersByTime(1000);
+
+    // The function should only run once
+    expect(fn).toHaveBeenCalledTimes(1);
+  });
+});

package/src/utils/debounce.ts

@@ -0,0 +1,17 @@
+type DebouncedFn<T extends (...args: any[]) => void> = {
+  (...args: Parameters<T>): void;
+  cancel: () => void;
+};
+
+export const debounce = <T extends (...args: any[]) => void>(
+  fn: T,
+  delay: number,
+): DebouncedFn<T> => {
+  let timeoutId: ReturnType<typeof setTimeout>;
+  const debounced = (...args: Parameters<T>) => {
+    clearTimeout(timeoutId);
+    timeoutId = setTimeout(() => fn(...args), delay);
+  };
+  debounced.cancel = () => clearTimeout(timeoutId);
+  return debounced;
+};