@keboola/design 2.0.0 → 2.1.0

package/src/blocks/AIKit/index.ts

@@ -1,12 +0,0 @@
-export * from './AnswerSummary';
-export * from './CollapsibleStepHeader';
-export * from './InlineStepDetail';
-export * from './InlineStepLabel';
-export * from './MessageBubble';
-export * from './PlanApproval';
-export * from './PlanRewritingIndicator';
-export * from './PromptInput';
-export * from './Question';
-export * from './QuestionBlock';
-export * from './SuggestedPrompt';
-export * from './ThinkingIndicator';

package/src/blocks/AutoSaveTextarea/AutoSaveTextarea.stories.tsx

@@ -1,78 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-
-import { AutoSaveTextarea } from './AutoSaveTextarea';
-
-const simulateSave = (value: string) =>
-  new Promise<void>((resolve) => {
-    console.log('Saving:', value);
-    setTimeout(resolve, 1000);
-  });
-
-export default {
-  component: AutoSaveTextarea,
-  args: {
-    placeholder: 'Type something and blur to save...',
-    onSave: simulateSave,
-  },
-} satisfies Meta<typeof AutoSaveTextarea>;
-
-type Story = StoryObj<typeof AutoSaveTextarea>;
-
-export const Default: Story = {};
-
-export const WithSavedValue: Story = {
-  args: {
-    savedValue: 'Previously saved instructions',
-  },
-};
-
-export const Disabled: Story = {
-  args: {
-    disabled: true,
-    savedValue: 'Cannot edit this',
-  },
-};
-
-export const SecondaryVariant: Story = {
-  args: {
-    variant: 'secondary',
-    minRows: 3,
-    savedValue: 'Secondary variant textarea',
-  },
-};
-
-export const WithMaxLength: Story = {
-  args: {
-    maxLength: 100,
-    savedValue: 'Short text',
-    variant: 'secondary',
-    minRows: 3,
-  },
-};
-
-export const ExceedingMaxLength: Story = {
-  args: {
-    maxLength: 20,
-    savedValue:
-      'This text is way too long and exceeds the character limit that was set for this textarea',
-    variant: 'secondary',
-    minRows: 3,
-  },
-};
-
-export const Grow: Story = {
-  args: {
-    grow: true,
-    variant: 'secondary',
-    maxLength: 4000,
-    savedValue:
-      'Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.',
-  },
-  decorators: [
-    (Story) => (
-      <div className="tw-flex tw-h-[500px] tw-w-80 tw-flex-col tw-overflow-hidden tw-p-4">
-        <Story />
-      </div>
-    ),
-  ],
-};

package/src/blocks/AutoSaveTextarea/AutoSaveTextarea.tsx

@@ -1,103 +0,0 @@
-import { type ComponentProps, useState } from 'react';
-
-import { CircleCheck, Loader2 } from '../../icons';
-import { cn } from '../../utils';
-import { Textarea } from '../Textarea';
-
-type AutoSaveTextareaProps = {
-  savedValue?: string;
-  onSave: (value: string) => Promise<void>;
-  placeholder?: string;
-  disabled?: boolean;
-  grow?: boolean;
-} & Pick<
-  ComponentProps<typeof Textarea>,
-  'variant' | 'minRows' | 'maxRows' | 'className' | 'containerClassName' | 'maxLength'
->;
-
-export const AutoSaveTextarea = ({
-  savedValue,
-  onSave,
-  placeholder,
-  disabled,
-  grow = false,
-  ...textareaProps
-}: AutoSaveTextareaProps) => {
-  const { maxLength, ...restTextareaProps } = textareaProps;
-  const [value, setValue] = useState<string | null>(null);
-  const [isSaving, setIsSaving] = useState(false);
-
-  const currentValue = value ?? savedValue ?? '';
-  const isOverLimit = maxLength != null && currentValue.length > maxLength;
-  const isChanged = value !== null && savedValue !== value.trim();
-
-  const onSaveHandler = (blurValue = '') => {
-    if (!isChanged || isOverLimit) return;
-
-    setIsSaving(true);
-    onSave(blurValue.trim())
-      .catch(() => {})
-      .finally(() => {
-        setIsSaving(false);
-      });
-  };
-
-  return (
-    <div
-      className={cn(
-        'tw-relative',
-        // `-mx-1 + px-3` gives the focus ring 4px of horizontal breathing room inside
-        // ancestors that clip with `overflow: hidden` and no horizontal padding (e.g. the
-        // Kai sidebar's TabsContent). `-my-1 + py-1` keeps the original zero vertical inset.
-        grow &&
-          '-tw-m-1 tw-flex tw-min-h-0 tw-flex-1 tw-flex-col tw-overflow-hidden tw-px-3 tw-py-1',
-      )}
-    >
-      <Textarea
-        {...restTextareaProps}
-        containerClassName={cn(
-          // Descendant selectors match InputGroup's `[&>textarea]:!tw-min-h-[…]` specificity
-          // so the textarea fills the wrapper instead of being pinned to the sizing min-height.
-          grow &&
-            'tw-min-h-0 tw-flex-1 tw-overflow-hidden [&>textarea]:!tw-min-h-full [&>textarea]:!tw-max-h-full [&>textarea]:tw-overflow-y-auto',
-          restTextareaProps.containerClassName,
-        )}
-        state={isOverLimit ? 'error' : undefined}
-        value={currentValue}
-        onValueChange={setValue}
-        onValueBlur={() => onSaveHandler(value ?? '')}
-        placeholder={placeholder}
-        disabled={disabled || isSaving}
-        disableResize={grow}
-        // `grow` fills the container regardless of content length; skip the 4-row cap.
-        maxRows={grow ? 'unlimited' : restTextareaProps.maxRows}
-      />
-      <div
-        className={cn(
-          'tw-mt-1 tw-flex tw-items-center tw-text-xs',
-          maxLength != null ? 'tw-justify-between' : 'tw-justify-end',
-        )}
-      >
-        {maxLength != null && (
-          <span className={cn(isOverLimit ? 'tw-text-error-500' : 'tw-text-neutral-400')}>
-            {currentValue.length} / {maxLength}
-          </span>
-        )}
-        <span className="tw-flex tw-items-center tw-gap-1 tw-text-neutral-400">
-          {isOverLimit && 'Character limit exceeded'}
-          {!isOverLimit && isChanged && !isSaving && 'Unsaved'}
-          {!isOverLimit && isChanged && isSaving && (
-            <>
-              <Loader2 className="tw-size-4 tw-animate-spin" /> Saving
-            </>
-          )}
-          {!isOverLimit && value !== null && !isChanged && !isSaving && (
-            <>
-              <CircleCheck className="tw-size-4 tw-text-primary-500" /> Saved
-            </>
-          )}
-        </span>
-      </div>
-    </div>
-  );
-};

package/src/blocks/AutoSaveTextarea/index.ts

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

package/src/blocks/ClipboardButton/ClipboardButton.stories.tsx

@@ -1,28 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-
-import { withTooltipProvider } from '../../utils';
-
-import { ClipboardButton } from './ClipboardButton';
-import { ClipboardInline } from './ClipboardInline';
-
-export default {
-  component: ClipboardButton,
-  decorators: [withTooltipProvider],
-  args: {
-    text: 'Text written to clipboard',
-  },
-} satisfies Meta<typeof ClipboardButton>;
-
-type Story = StoryObj<typeof ClipboardButton>;
-
-export const AsIconButton: Story = {
-  render: ({ text }) => <ClipboardButton size="icon" variant="invisible" text={text} />,
-};
-
-export const AsButton: Story = {
-  render: ({ text }) => <ClipboardButton text={text}>Copy To Clipboard</ClipboardButton>,
-};
-
-export const AsInlineButton: Story = {
-  render: ({ text }) => <ClipboardInline text={text}>Copy to Clipboard</ClipboardInline>,
-};

package/src/blocks/ClipboardButton/ClipboardButton.tsx

@@ -1,43 +0,0 @@
-import type { ComponentProps, ReactNode } from 'react';
-
-import { Button } from '../../components/Button';
-import { Clipboard } from '../../components/Clipboard';
-import { Copy } from '../../icons';
-
-type ClipboardProps = Pick<
-  ComponentProps<typeof Clipboard>,
-  'text' | 'tooltip' | 'tooltipPlacement' | 'tooltipVariant'
->;
-
-type ButtonProps = Omit<ComponentProps<typeof Button>, 'disabled' | 'icon'>;
-
-type Props = ClipboardProps & ButtonProps & { icon?: ReactNode };
-
-const DEFAULT_ICON: ReactNode = <Copy />;
-
-export const ClipboardButton = ({
-  // clipboard props
-  text,
-  tooltip,
-  tooltipPlacement,
-  tooltipVariant,
-
-  // button props
-  icon = DEFAULT_ICON,
-  variant = 'outline',
-  children,
-  ...rest
-}: Props) => (
-  <Clipboard
-    asChild
-    tooltip={tooltip}
-    tooltipPlacement={tooltipPlacement}
-    tooltipVariant={tooltipVariant}
-    text={text}
-  >
-    <Button {...rest} variant={variant} disabled={!text}>
-      {icon}
-      {children}
-    </Button>
-  </Clipboard>
-);

package/src/blocks/ClipboardButton/ClipboardInline.tsx

@@ -1,40 +0,0 @@
-import type { ComponentProps } from 'react';
-
-import { ButtonInline } from '../../components/Button';
-import { Clipboard } from '../../components/Clipboard';
-import { Copy } from '../../icons';
-
-type ClipboardProps = Pick<
-  ComponentProps<typeof Clipboard>,
-  'text' | 'tooltip' | 'tooltipPlacement' | 'tooltipVariant'
->;
-
-type ButtonProps = Omit<ComponentProps<typeof ButtonInline>, 'disabled'>;
-
-type Props = { hideIcon?: boolean } & ClipboardProps & ButtonProps;
-
-export const ClipboardInline = ({
-  // clipboard props
-  text,
-  tooltip,
-  tooltipPlacement,
-  tooltipVariant,
-
-  // button props
-  children = 'Copy To Clipboard',
-  hideIcon = false,
-  ...rest
-}: Props) => (
-  <Clipboard
-    asChild
-    text={text}
-    tooltip={tooltip}
-    tooltipPlacement={tooltipPlacement}
-    tooltipVariant={tooltipVariant}
-  >
-    <ButtonInline {...rest} disabled={!text}>
-      {!hideIcon && <Copy className="tw-size-4" />}
-      {children}
-    </ButtonInline>
-  </Clipboard>
-);

package/src/blocks/ClipboardButton/index.ts

@@ -1,2 +0,0 @@
-export { ClipboardButton } from './ClipboardButton';
-export { ClipboardInline } from './ClipboardInline';

package/src/blocks/ColorInput/ColorInput.stories.tsx

@@ -1,109 +0,0 @@
-import { useState } from 'react';
-import type { ComponentProps, FormEventHandler } from 'react';
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { action } from 'storybook/actions';
-
-import { Button } from '../../components/Button';
-
-import { ColorInput } from './ColorInput';
-
-type Story = StoryObj<typeof ColorInput>;
-type ColorInputProps = ComponentProps<typeof ColorInput>;
-type State = NonNullable<ColorInputProps['state']>;
-type Variant = NonNullable<ColorInputProps['variant']>;
-type Sizing = NonNullable<ColorInputProps['sizing']>;
-type FocusVariant = NonNullable<ColorInputProps['focusVariant']>;
-
-const states: State[] = ['default', 'error', 'warning'];
-const variants: Variant[] = ['primary', 'secondary', 'argo'];
-const sizings: Sizing[] = ['small', 'default', 'medium'];
-const focusVariants: FocusVariant[] = ['default', 'on', 'off'];
-
-/**
- * Color input with a swatch indicator, hex text entry (RGB or RGBA), and an
- * OS-native color picker. Works in both controlled and uncontrolled modes.
- */
-export default {
-  component: ColorInput,
-  args: {
-    placeholder: 'Placeholder',
-    variant: 'primary',
-    state: 'default',
-    sizing: 'default',
-    focusVariant: 'default',
-    allowClear: false,
-    readOnly: false,
-    disabled: false,
-
-    onValueChange: action('onValueChange'),
-    onValueBlur: action('onValueBlur'),
-  },
-  argTypes: {
-    state: {
-      description: 'Set validation state',
-      type: { name: 'enum', value: states },
-    },
-
-    variant: {
-      defaultValue: 'primary',
-      description: 'Set Variant',
-      type: { name: 'enum', value: variants },
-    },
-
-    sizing: {
-      defaultValue: 'default',
-      description: 'Set Sizing',
-      type: { name: 'enum', value: sizings },
-    },
-
-    focusVariant: {
-      defaultValue: 'default',
-      description: 'Set Focus Variant',
-      type: { name: 'enum', value: focusVariants },
-    },
-  },
-} satisfies Meta<typeof ColorInput>;
-
-export const Basic: Story = {};
-
-const ControlledDemo = (props: ComponentProps<typeof ColorInput>) => {
-  const [value, setValue] = useState('');
-  const handleOnValueChange = (value: string) => {
-    action('onValueChange')(value);
-    setValue(value);
-  };
-
-  return <ColorInput {...props} value={value} onValueChange={handleOnValueChange} />;
-};
-
-export const Controlled: Story = {
-  render: ControlledDemo,
-};
-
-const UncontrolledDemo = (props: ComponentProps<typeof ColorInput>) => {
-  const handleSubmit: FormEventHandler<HTMLFormElement> = (event) => {
-    event.preventDefault();
-    const values = new FormData(event.currentTarget);
-    action('onSubmit')(Object.fromEntries(values.entries()));
-  };
-
-  return (
-    <form className="tw-flex tw-gap-2" onSubmit={handleSubmit}>
-      <ColorInput
-        {...props}
-        onValueChange={action('onValueChange')}
-        onValueBlur={action('onValueBlur')}
-      />
-      <Button type="submit">Submit</Button>
-    </form>
-  );
-};
-
-export const Uncontrolled: Story = {
-  render: UncontrolledDemo,
-  args: {
-    defaultValue: '#ff0000',
-    allowClear: true,
-    name: 'uncontrolled-color-input',
-  },
-};

package/src/blocks/ColorInput/ColorInput.test.tsx

@@ -1,163 +0,0 @@
-import { fireEvent, render, screen } from '@testing-library/react';
-import { describe, expect, it, vi } from 'vitest';
-
-import { ColorInput } from './ColorInput';
-
-const getTextInput = () => screen.getByPlaceholderText('color') as HTMLInputElement;
-const getColorPicker = () => document.querySelector<HTMLInputElement>('input[type="color"]')!;
-const queryClearButton = () => screen.queryByLabelText('Clear color');
-
-describe('<ColorInput />', () => {
-  describe('controlled state', () => {
-    it('renders empty when value is null', () => {
-      render(<ColorInput placeholder="color" value={null} />);
-      expect(getTextInput().value).toBe('');
-    });
-
-    it('renders empty when value is undefined and no defaultValue', () => {
-      render(<ColorInput placeholder="color" />);
-      expect(getTextInput().value).toBe('');
-    });
-
-    it('renders the controlled value', () => {
-      render(<ColorInput placeholder="color" value="#abcdef" onValueChange={vi.fn()} />);
-      expect(getTextInput().value).toBe('#abcdef');
-    });
-
-    it('emits raw onValueChange on every keystroke', () => {
-      const onValueChange = vi.fn();
-      render(<ColorInput placeholder="color" value="" onValueChange={onValueChange} />);
-      fireEvent.change(getTextInput(), { target: { value: 'aabbcc' } });
-      expect(onValueChange).toHaveBeenCalledWith('aabbcc');
-    });
-
-    it('emits sanitized value via onValueBlur on blur', () => {
-      const onValueChange = vi.fn();
-      const onValueBlur = vi.fn();
-      render(
-        <ColorInput
-          placeholder="color"
-          value="aabbcc"
-          onValueChange={onValueChange}
-          onValueBlur={onValueBlur}
-        />,
-      );
-      fireEvent.blur(getTextInput());
-      expect(onValueBlur).toHaveBeenCalledWith('#aabbcc');
-      expect(onValueChange).toHaveBeenCalledWith('#aabbcc');
-    });
-
-    it('snaps invalid input to its sanitized prefix on blur', () => {
-      const onValueBlur = vi.fn();
-      render(<ColorInput placeholder="color" value="aabbzz" onValueBlur={onValueBlur} />);
-      fireEvent.blur(getTextInput());
-      expect(onValueBlur).toHaveBeenCalledWith('#aabb');
-    });
-
-    it('clears the value on blur when no valid hex digits remain', () => {
-      const onValueBlur = vi.fn();
-      render(<ColorInput placeholder="color" value="gabc" onValueBlur={onValueBlur} />);
-      fireEvent.blur(getTextInput());
-      expect(onValueBlur).toHaveBeenCalledWith('');
-    });
-  });
-
-  describe('uncontrolled state', () => {
-    it('seeds the input from defaultValue', () => {
-      render(<ColorInput placeholder="color" defaultValue="#abc" />);
-      expect(getTextInput().value).toBe('#abc');
-    });
-
-    it('treats null defaultValue as empty', () => {
-      render(<ColorInput placeholder="color" defaultValue={null} />);
-      expect(getTextInput().value).toBe('');
-    });
-
-    it('keeps raw text in the DOM while typing', () => {
-      const onValueChange = vi.fn();
-      render(<ColorInput placeholder="color" onValueChange={onValueChange} />);
-      const input = getTextInput();
-      fireEvent.change(input, { target: { value: 'aabbcc' } });
-      expect(input.value).toBe('aabbcc');
-      expect(onValueChange).toHaveBeenLastCalledWith('aabbcc');
-    });
-
-    it('sanitizes the visible value on blur', () => {
-      render(<ColorInput placeholder="color" />);
-      const input = getTextInput();
-      fireEvent.change(input, { target: { value: 'aabbcc' } });
-      fireEvent.blur(input);
-      expect(input.value).toBe('#aabbcc');
-    });
-  });
-
-  describe('clear button', () => {
-    it('is hidden when there is no value', () => {
-      render(<ColorInput placeholder="color" allowClear />);
-      expect(queryClearButton()).toBeNull();
-    });
-
-    it('is hidden when disabled', () => {
-      render(<ColorInput placeholder="color" allowClear disabled defaultValue="#abc" />);
-      expect(queryClearButton()).toBeNull();
-    });
-
-    it('is hidden when readOnly', () => {
-      render(<ColorInput placeholder="color" allowClear readOnly defaultValue="#abc" />);
-      expect(queryClearButton()).toBeNull();
-    });
-
-    it('clears the DOM input in uncontrolled mode', () => {
-      const onValueChange = vi.fn();
-      render(
-        <ColorInput
-          placeholder="color"
-          allowClear
-          defaultValue="#abc"
-          onValueChange={onValueChange}
-        />,
-      );
-      const input = getTextInput();
-      expect(input.value).toBe('#abc');
-      fireEvent.click(queryClearButton()!);
-      expect(input.value).toBe('');
-      expect(onValueChange).toHaveBeenCalledWith('');
-    });
-
-    it('emits onValueChange("") in controlled mode without mutating the DOM directly', () => {
-      const onValueChange = vi.fn();
-      render(
-        <ColorInput placeholder="color" allowClear value="#abcdef" onValueChange={onValueChange} />,
-      );
-      fireEvent.click(queryClearButton()!);
-      expect(onValueChange).toHaveBeenCalledWith('');
-    });
-
-    it('synthesizes an onChange event when clearing', () => {
-      const onChange = vi.fn();
-      render(<ColorInput placeholder="color" allowClear defaultValue="#abc" onChange={onChange} />);
-      fireEvent.click(queryClearButton()!);
-      expect(onChange).toHaveBeenCalled();
-      expect(onChange.mock.lastCall?.[0].target.value).toBe('');
-    });
-  });
-
-  describe('color picker', () => {
-    it('applies the picked color to the text input in uncontrolled mode', () => {
-      const onValueChange = vi.fn();
-      render(<ColorInput placeholder="color" onValueChange={onValueChange} />);
-      const picker = getColorPicker();
-      fireEvent.change(picker, { target: { value: '#112233' } });
-      expect(getTextInput().value).toBe('#112233');
-      expect(onValueChange).toHaveBeenCalledWith('#112233');
-    });
-
-    it('emits onValueChange with the picked color in controlled mode', () => {
-      const onValueChange = vi.fn();
-      render(<ColorInput placeholder="color" value="#abcdef" onValueChange={onValueChange} />);
-      const picker = getColorPicker();
-      fireEvent.change(picker, { target: { value: '#112233' } });
-      expect(onValueChange).toHaveBeenCalledWith('#112233');
-    });
-  });
-});