@keboola/design 2.0.1 → 2.1.0

package/src/components/Tabs.tsx

@@ -1,134 +0,0 @@
-import type { ReactNode } from 'react';
-import * as RadixTabs from '@radix-ui/react-tabs';
-
-import { X } from '../icons';
-import { cn } from '../utils';
-
-import { Button } from './Button';
-import { ScrollArea } from './ScrollArea';
-
-const TRIGGER_COMMON = {
-  main: 'tw-flex tw-justify-center tw-items-center tw-gap-1.5 tw-bg-transparent tw-group/tab-trigger tw-shrink-0',
-  border: 'tw-border-0 tw-border-b-[3px] tw-border-solid tw-border-transparent',
-  spacing: 'tw-pt-2.5 tw-pb-5 tw-px-0 tw-m-0',
-  font: 'tw-font-medium tw-leading-5 tw-text-neutral-400 tw-text-base',
-  active: 'data-[state=active]:tw-text-secondary-500 data-[state=active]:tw-border-secondary-500',
-  disabled:
-    'data-[disabled]:tw-text-neutral-400 data-[disabled]:tw-opacity-50 data-[disabled]:tw-cursor-not-allowed',
-  hover:
-    'hover:enabled:tw-text-secondary-500 hover:enabled:tw-border-secondary-500 hover:enabled:tw-cursor-pointer',
-};
-
-/**
- * Tab trigger descriptor. `value` keys the tab; `title` is the visible label; `onClose` makes the tab
- * closable (renders an x button on hover). Generic over `T` so consumers can use string-literal unions.
- */
-type Trigger<T extends string> = {
-  value: T;
-  title: ReactNode;
-  /** When set, renders an inline close button on the trigger. Called with the tab's `value`. */
-  onClose?: (value: T) => void;
-} & Omit<RadixTabs.TabsTriggerProps, 'title'>;
-
-/**
- * Tabbed navigation with a single content area. Built on Radix Tabs.
- *
- * **When to use:** switching between sibling views of the same context (overview / runs / settings on a
- * detail page; sections inside a modal body). The triggers row is horizontally scrollable on overflow.
- * **When NOT to use:** for top-level routing prefer `PageHeader` `headerNav` slot or `PageLayout.Tabs`;
- * for accordion-style disclosure use `Collapsible`.
- * **Composition:** pass `triggers` as the declarative list and one or more `TabsContent` children keyed
- * by `value`. Use `compact` for dense in-modal tabs.
- *
- * @see RECIPES.md#page-header-tabs — for the page-header + routed tabs pattern
- */
-const Tabs = <T extends string>({
-  triggers,
-  compact = false,
-  children,
-  defaultValue,
-  onValueChange,
-  rootClassName,
-  listClassName,
-  triggerClassName,
-  ...rest
-}: {
-  triggers: Trigger<T>[];
-  compact?: boolean;
-  children: ReactNode;
-  defaultValue?: string;
-  onValueChange?: (value: T) => void;
-  rootClassName?: string;
-  listClassName?: string;
-  triggerClassName?: string;
-} & Omit<RadixTabs.TabsProps, 'onValueChange'>) => {
-  const triggerClasses = cn(
-    ...Object.values(TRIGGER_COMMON),
-    { 'tw-text-sm tw-pb-4': compact },
-    triggerClassName,
-  );
-
-  return (
-    <RadixTabs.Root
-      {...rest}
-      data-slot="tabs-root"
-      className={cn('tw-flex tw-flex-col tw-gap-6', rootClassName)}
-      defaultValue={defaultValue || triggers[0]?.value}
-      onValueChange={onValueChange as (value: string) => void}
-    >
-      <ScrollArea
-        orientation="horizontal"
-        className="tw-shrink-0 tw-border-0 tw-border-b tw-border-solid tw-border-neutral-200"
-      >
-        <RadixTabs.List className={cn('tw-flex tw-gap-8 tw-shrink-0', listClassName)}>
-          {triggers.map(({ value, title, onClose, ...rest }) => {
-            if (onClose) {
-              return (
-                <RadixTabs.Trigger
-                  asChild
-                  key={value}
-                  value={value}
-                  className={triggerClasses}
-                  {...rest}
-                >
-                  <div>
-                    {title}
-                    <Button
-                      variant="inline"
-                      size="icon-3xs"
-                      disabled={rest.disabled}
-                      onClick={() => onClose(value)}
-                      // prevent focusing the tab when clicking the close button, keep focused other tab if any
-                      onMouseDown={(e) => e.preventDefault()}
-                      className="!tw-size-8 tw-opacity-0 tw-duration-200 group-hover/tab-trigger:tw-opacity-100"
-                      aria-label="Close tab"
-                    >
-                      <X className="tw-size-4" />
-                    </Button>
-                  </div>
-                </RadixTabs.Trigger>
-              );
-            }
-
-            return (
-              <RadixTabs.Trigger key={value} value={value} className={triggerClasses} {...rest}>
-                {title}
-              </RadixTabs.Trigger>
-            );
-          })}
-        </RadixTabs.List>
-      </ScrollArea>
-      {children}
-    </RadixTabs.Root>
-  );
-};
-
-/**
- * Content panel for a single tab. Matched to a `Tabs` trigger by `value`. Receives `tabIndex={-1}` so the
- * panel is focusable for screen readers without being a tab stop.
- */
-const TabsContent = (props: RadixTabs.TabsContentProps) => (
-  <RadixTabs.Content tabIndex={-1} {...props} />
-);
-
-export { Tabs, TabsContent, type Trigger };

package/src/components/ThemeProvider/AIGradientSvg.tsx

@@ -1,18 +0,0 @@
-export const AIGradientsSvg = () => (
-  <svg width="0" height="0" style={{ position: 'absolute', visibility: 'hidden' }}>
-    <defs>
-      {/*aigradient-600*/}
-      <linearGradient id="aigradient-600" x1="0%" y1="0%" x2="100%" y2="100%">
-        <stop offset="0%" stopColor="#61E4FF" />
-        <stop offset="50%" stopColor="#1F8FFF" />
-        <stop offset="100%" stopColor="#7C5CFF" />
-      </linearGradient>
-
-      {/*aigradient-700*/}
-      <linearGradient id="aigradient-700" x1="0%" y1="0%" x2="100%" y2="100%">
-        <stop offset="0%" stopColor="#075fb8" />
-        <stop offset="100%" stopColor="#5b2cb8" />
-      </linearGradient>
-    </defs>
-  </svg>
-);

package/src/components/ThemeProvider/ThemeProvider.tsx

@@ -1,25 +0,0 @@
-import type { ReactNode } from 'react';
-import { all } from '@awesome.me/kit-be8bcf7e5e/icons';
-import { library } from '@fortawesome/fontawesome-svg-core';
-
-import { AIGradientsSvg } from './AIGradientSvg';
-
-library.add(...all);
-
-type Props = {
-  children: ReactNode;
-};
-
-/**
- * Responsibilities:
- * - Register svg gradients
- * - Register fontawesome icons
- */
-export const ThemeProvider = ({ children }: Props) => {
-  return (
-    <>
-      <AIGradientsSvg />
-      {children}
-    </>
-  );
-};

package/src/components/ThemeProvider/index.ts

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

package/src/components/TimePicker/TimePicker.tsx

@@ -1,95 +0,0 @@
-import { useState } from 'react';
-import type { ReactNode } from 'react';
-import type { PopoverContentProps, PopoverProps } from '@radix-ui/react-popover';
-
-import { Popover } from '../Popover';
-import { ScrollArea } from '../ScrollArea';
-
-import { TimePickerButton } from './TimePickerButton';
-import { pad, parseTime, scrollToSelected } from './utils';
-
-const HOURS = Array.from({ length: 24 }, (_, i) => i);
-const MINUTES = Array.from({ length: 60 }, (_, i) => i);
-
-type Props = {
-  children?: ReactNode;
-  defaultSelected?: string | null;
-  selected?: string | null;
-  onSelect?: (time: string) => void;
-} & Pick<PopoverProps, 'open' | 'onOpenChange' | 'defaultOpen'> &
-  Pick<PopoverContentProps, 'align' | 'alignOffset' | 'sideOffset'>;
-
-export const TimePicker = ({
-  align = 'end',
-  alignOffset = -18,
-  children,
-  defaultOpen,
-  defaultSelected,
-  onOpenChange,
-  onSelect,
-  open,
-  selected,
-  sideOffset = 12,
-}: Props) => {
-  const [internalSelected, setInternalSelected] = useState<string | null>(defaultSelected ?? null);
-
-  const isControlled = selected !== undefined;
-  const currentValue = isControlled ? selected : internalSelected;
-
-  const parsed = parseTime(currentValue);
-  const hour = parsed.hour ?? null;
-  const minute = parsed.minute ?? null;
-
-  const handleSelect = (time: string) => {
-    if (!isControlled) {
-      setInternalSelected(time);
-    }
-    onSelect?.(time);
-  };
-
-  const handleHourSelect = (h: number) => {
-    const m = minute ?? 0;
-    handleSelect(`${pad(h)}:${pad(m)}`);
-  };
-
-  const handleMinuteSelect = (m: number) => {
-    const h = hour ?? 0;
-    handleSelect(`${pad(h)}:${pad(m)}`);
-  };
-
-  return (
-    <Popover defaultOpen={defaultOpen} onOpenChange={onOpenChange} open={open}>
-      <Popover.Trigger asChild>{children}</Popover.Trigger>
-      <Popover.Content
-        align={align}
-        alignOffset={alignOffset}
-        sideOffset={sideOffset}
-        className="tw-flex tw-flex-row"
-      >
-        <ScrollArea type="always" ref={scrollToSelected} viewPortClassName="tw-h-60 tw-px-3">
-          {HOURS.map((value) => (
-            <TimePickerButton
-              key={value}
-              onClick={() => handleHourSelect(value)}
-              aria-selected={value === hour}
-            >
-              {pad(value)}
-            </TimePickerButton>
-          ))}
-        </ScrollArea>
-
-        <ScrollArea type="always" ref={scrollToSelected} viewPortClassName="tw-h-60 tw-px-3">
-          {MINUTES.map((value) => (
-            <TimePickerButton
-              key={value}
-              onClick={() => handleMinuteSelect(value)}
-              aria-selected={value === minute}
-            >
-              {pad(value)}
-            </TimePickerButton>
-          ))}
-        </ScrollArea>
-      </Popover.Content>
-    </Popover>
-  );
-};

package/src/components/TimePicker/TimePickerButton.tsx

@@ -1,39 +0,0 @@
-import type { ComponentProps, ElementRef, Ref } from 'react';
-
-import { cn } from '../../utils';
-
-type Props = ComponentProps<'button'>;
-
-export const TimePickerButton = ({
-  ref,
-  className,
-  children,
-  ...rest
-}: Props & { ref?: Ref<ElementRef<'button'>> }) => (
-  <button
-    {...rest}
-    ref={ref}
-    type="button"
-    className={cn(
-      'tailwindcss-preflight',
-
-      'tw-flex',
-      'tw-items-center',
-      'tw-justify-center',
-
-      'tw-size-10',
-      'tw-rounded',
-      'tw-transition-colors',
-      'tw-select-none',
-      'hover:tw-bg-secondary-200',
-      'focus-visible:tw-outline',
-      'focus-visible:tw-outline-2',
-      'focus-visible:tw-outline-secondary-500',
-      'aria-selected:tw-bg-secondary-500',
-      'aria-selected:tw-text-white',
-      className,
-    )}
-  >
-    {children}
-  </button>
-);

package/src/components/TimePicker/index.ts

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

package/src/components/TimePicker/utils.ts

@@ -1,31 +0,0 @@
-export const pad = (n: number) => n.toString().padStart(2, '0');
-
-export const parseTime = (time?: string | null) => {
-  if (!time) return { hour: null, minute: null };
-
-  const match = /^(\d{1,2}):(\d{1,2})$/.exec(time.trim());
-  if (!match) return { hour: null, minute: null };
-
-  const hour = Number(match[1]);
-  const minute = Number(match[2]);
-  if (
-    Number.isNaN(hour) ||
-    Number.isNaN(minute) ||
-    hour < 0 ||
-    hour > 23 ||
-    minute < 0 ||
-    minute > 59
-  )
-    return { hour: null, minute: null };
-
-  return { hour, minute };
-};
-
-export const scrollToSelected = (viewport: HTMLDivElement | null) => {
-  if (!viewport) return;
-  // Defer scroll until after the popover open animation completes and layout is calculated
-  requestAnimationFrame(() => {
-    const selected = viewport.querySelector('[aria-selected="true"]');
-    selected?.scrollIntoView({ block: 'center' });
-  });
-};

package/src/components/Timeline/Timeline.stories.tsx

@@ -1,246 +0,0 @@
-import type { ComponentProps } from 'react';
-import type { Meta, StoryObj } from '@storybook/react-vite';
-
-import { Check, Circle, Search, Warehouse } from '../../icons';
-import { Alert } from '../Alert';
-import { ButtonInline } from '../Button';
-
-import { Timeline } from './Timeline';
-
-type TimelineProps = ComponentProps<typeof Timeline>;
-type Variant = NonNullable<TimelineProps['variant']>;
-const variants: Variant[] = ['dashed', 'solid'];
-
-/**
- * Timeline component shows a list of events in chronological order.
- */
-export default {
-  component: Timeline,
-  args: {
-    variant: 'dashed',
-  },
-  argTypes: {
-    variant: {
-      description: 'Set Variant',
-      type: {
-        name: 'enum',
-        value: variants,
-      },
-    },
-  },
-} satisfies Meta<typeof Timeline>;
-
-type Story = StoryObj<typeof Timeline>;
-
-export const Default: Story = {
-  render: (props) => (
-    <Timeline {...props}>
-      <Timeline.Item>
-        <Timeline.Connector asChild>
-          <time>2025-05-12</time>
-        </Timeline.Connector>
-        <Timeline.Content>First</Timeline.Content>
-      </Timeline.Item>
-
-      <Timeline.Item>
-        <Timeline.Connector asChild>
-          <time>2025-04-08</time>
-        </Timeline.Connector>
-        <Timeline.Content>Second</Timeline.Content>
-      </Timeline.Item>
-
-      <Timeline.Item>
-        <Timeline.Connector>Unknown</Timeline.Connector>
-        <Timeline.Content>Custom Label</Timeline.Content>
-      </Timeline.Item>
-    </Timeline>
-  ),
-};
-
-/**
- * Connector is a visual element that connects two items in the timeline.
- * It can have different alignments and variants.
- */
-export const Connector: Story = {
-  render: (props) => (
-    <Timeline {...props}>
-      <Timeline.Item>
-        <Timeline.Connector align="center" variant="line" />
-        <Timeline.Content>
-          <Alert>Great stuff</Alert>
-        </Timeline.Content>
-      </Timeline.Item>
-
-      <Timeline.Item>
-        <Timeline.Connector align="start" offset={2} variant="line" />
-        <Timeline.Content>
-          <Alert>Connector at the start with offset</Alert>
-        </Timeline.Content>
-      </Timeline.Item>
-
-      <Timeline.Item>
-        <Timeline.Connector align="center" variant="line" />
-        <Timeline.Content className="tw-flex-col tw-gap-2">
-          <Alert>Centered connector</Alert>
-          <Alert>Something else..</Alert>
-        </Timeline.Content>
-      </Timeline.Item>
-    </Timeline>
-  ),
-};
-
-export const Icons: Story = {
-  render: (props) => (
-    <Timeline {...props}>
-      <Timeline.Item>
-        <Timeline.Connector variant="icon">
-          <Check />
-        </Timeline.Connector>
-        <Timeline.Content>Checked</Timeline.Content>
-      </Timeline.Item>
-
-      <Timeline.Item>
-        <Timeline.Connector variant="icon">
-          <Circle />
-        </Timeline.Connector>
-        <Timeline.Content>Dot</Timeline.Content>
-      </Timeline.Item>
-
-      <Timeline.Item>
-        <Timeline.Connector variant="icon">
-          <Search />
-        </Timeline.Connector>
-        <Timeline.Content>Search</Timeline.Content>
-      </Timeline.Item>
-    </Timeline>
-  ),
-};
-
-export const Lines: Story = {
-  render: (props) => (
-    <Timeline {...props}>
-      <Timeline.Item>
-        <Timeline.Connector variant="line" />
-        <Timeline.Content>First</Timeline.Content>
-      </Timeline.Item>
-
-      <Timeline.Item>
-        <Timeline.Connector variant="line" />
-        <Timeline.Content>Second</Timeline.Content>
-      </Timeline.Item>
-
-      <Timeline.Item>
-        <Timeline.Connector variant="line" />
-        <Timeline.Content>Custom Label</Timeline.Content>
-      </Timeline.Item>
-    </Timeline>
-  ),
-};
-
-export const ConnectorAlign: Story = {
-  render: (props) => (
-    <Timeline {...props}>
-      <Timeline.Item>
-        <Timeline.Connector offset={12} variant="line" />
-        <Timeline.Content className="tw-flex-col">
-          <h1>Start align with an offset to center it on the heading.</h1>
-          <Alert>Hello</Alert>
-        </Timeline.Content>
-      </Timeline.Item>
-
-      <Timeline.Item>
-        <Timeline.Connector variant="line" />
-        <Timeline.Content>For pure text, no extra alignment is needed.</Timeline.Content>
-      </Timeline.Item>
-
-      <Timeline.Item>
-        <Timeline.Connector align="center" variant="line" />
-        <Timeline.Content className="tw-flex-col tw-gap-1">
-          <Alert>Hello</Alert>
-          <Alert>Center align of connector, offset is not necessary</Alert>
-          <Alert>Hello</Alert>
-        </Timeline.Content>
-      </Timeline.Item>
-    </Timeline>
-  ),
-};
-
-export const Nested: Story = {
-  render: (props) => (
-    <Timeline {...props}>
-      <Timeline.Item>
-        <Timeline.Connector align="start" asChild variant="label">
-          <time>2025-12-24</time>
-        </Timeline.Connector>
-        <Timeline.Content className="tw-flex-col">
-          <h4>Documentation Query</h4>
-          <p className="tw-text-neutral-400">How to create SQL transformation</p>
-        </Timeline.Content>
-      </Timeline.Item>
-
-      <Timeline.Item>
-        <Timeline.Connector variant="label">2025-12-24</Timeline.Connector>
-        <Timeline.Content>
-          <Timeline variant="solid">
-            <Timeline.Item>
-              <Timeline.Connector variant="icon">
-                <Warehouse />
-              </Timeline.Connector>
-              <Timeline.Content className="tw-gap-2">
-                <h4>Create SQL Transformation</h4>
-              </Timeline.Content>
-            </Timeline.Item>
-
-            <Timeline.Item>
-              <Timeline.Connector variant="line" />
-              <Timeline.Content className="tw-gap-2">
-                <Warehouse className="tw-size-4 tw-text-neutral-400" />
-                <div className="tw-flex tw-flex-col">
-                  <h4>Documentation Query</h4>
-                  <div className="tw-flex tw-gap-2">
-                    <ButtonInline variant="link-reverse">Data Source</ButtonInline>
-                    <span className="tw-text-neutral-400">Salesforce</span>
-                  </div>
-                </div>
-              </Timeline.Content>
-            </Timeline.Item>
-            <Timeline.Item>
-              <Timeline.Connector variant="line" />
-              <Timeline.Content className="tw-gap-2">
-                <Warehouse className="tw-size-4 tw-text-neutral-400" />
-                <div className="tw-flex tw-flex-col">
-                  <h4>Documentation Query</h4>
-                  <div className="tw-flex tw-gap-2">
-                    <ButtonInline variant="link-reverse">Data Source</ButtonInline>
-                    <span className="tw-text-neutral-400">Salesforce</span>
-                  </div>
-                </div>
-              </Timeline.Content>
-            </Timeline.Item>
-            <Timeline.Item>
-              <Timeline.Connector align="start" variant="line" />
-              <Timeline.Content className="tw-gap-2">
-                <Warehouse className="tw-size-4 tw-text-neutral-400" />
-                <div className="tw-flex tw-flex-col">
-                  <h4>Documentation Query</h4>
-                  <div className="tw-flex tw-gap-2">
-                    <ButtonInline variant="link-reverse">Data Source</ButtonInline>
-                    <span className="tw-text-neutral-400">Salesforce</span>
-                  </div>
-                </div>
-              </Timeline.Content>
-            </Timeline.Item>
-          </Timeline>
-        </Timeline.Content>
-      </Timeline.Item>
-
-      <Timeline.Item>
-        <Timeline.Connector variant="label">2025-12-24</Timeline.Connector>
-        <Timeline.Content className="tw-flex-col">
-          <h4>List of Configurations</h4>
-          <p className="tw-text-neutral-400">Extractor Writer</p>
-        </Timeline.Content>
-      </Timeline.Item>
-    </Timeline>
-  ),
-};

package/src/components/Timeline/Timeline.tsx

@@ -1,35 +0,0 @@
-import type { ComponentProps } from 'react';
-
-import { cn } from '../../utils';
-
-import { TimelineConnector } from './TimelineConnector';
-import { TimelineContent } from './TimelineContent';
-import { TimelineItem } from './TimelineItem';
-
-type Props = ComponentProps<'ul'> & {
-  variant?: 'solid' | 'dashed';
-};
-
-export const Timeline = ({ className, variant = 'dashed', ...rest }: Props) => {
-  return (
-    <ul
-      {...rest}
-      data-variant={variant}
-      className={cn(
-        'tailwindcss-preflight',
-        'tw-overflow-y-hidden',
-        // reset default styling
-        'tw-p-0',
-        'tw-grid',
-        'tw-grid-cols-[auto_1fr]',
-        'tw-group/timeline',
-        'tw-gap-x-4',
-        className,
-      )}
-    />
-  );
-};
-
-Timeline.Item = TimelineItem;
-Timeline.Content = TimelineContent;
-Timeline.Connector = TimelineConnector;