@keboola/design 1.0.0

package/src/blocks/AIKit/QuestionBlock.stories.tsx

@@ -0,0 +1,99 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import type { QuestionStep } from './QuestionBlock';
+import { QuestionBlock } from './QuestionBlock';
+
+const steps: [QuestionStep, ...QuestionStep[]] = [
+  {
+    question: 'What kind of transformation do you need?',
+    header: 'Select all that apply',
+    options: [
+      {
+        id: 'aggregation',
+        label: 'Aggregation / Summarization',
+        description: 'Group, sum, average, count, data',
+      },
+      {
+        id: 'joining',
+        label: 'Joining / Merging tables',
+        description: 'Combine multiple tables together',
+      },
+      {
+        id: 'filtering',
+        label: 'Filtering / Cleaning',
+        description: 'Remove duplicates, filter rows, fix data quality',
+      },
+      {
+        id: 'custom-logic',
+        label: 'Custom business logic',
+        description: 'Apply specific calculations or business rules',
+      },
+      {
+        id: 'not-sure',
+        label: 'Not sure yet',
+        description: "I'd like to explore the data first and decide",
+      },
+    ],
+    showCustomAnswer: true,
+    multiSelect: true,
+  },
+  {
+    question: 'How often should this run?',
+    header: 'Pick one',
+    options: [
+      { id: 'hourly', label: 'Hourly', description: 'Run every hour' },
+      { id: 'daily', label: 'Daily', description: 'Run once a day' },
+      { id: 'weekly', label: 'Weekly', description: 'Run once a week' },
+      { id: 'manual', label: 'Manual', description: 'Only when triggered' },
+    ],
+    multiSelect: false,
+  },
+  {
+    question: 'Where should we write the output?',
+    header: 'Select destination',
+    options: [
+      { id: 'new-table', label: 'New table', description: 'Create a fresh output table' },
+      {
+        id: 'existing',
+        label: 'Existing table',
+        description: 'Append to or replace an existing table',
+      },
+      {
+        id: 'multiple',
+        label: 'Multiple tables',
+        description: 'Split output across several tables',
+      },
+    ],
+    multiSelect: false,
+  },
+];
+
+const meta: Meta<typeof QuestionBlock> = {
+  title: 'AI Kit/QuestionBlock',
+  component: QuestionBlock,
+  args: {
+    steps,
+    showSkip: true,
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ maxWidth: 800 }}>
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof QuestionBlock>;
+
+export const Default: Story = {
+  render: (args) => (
+    <QuestionBlock
+      {...args}
+      onSubmit={(answers) => alert(JSON.stringify(answers, null, 2))}
+      onClose={() => alert('Close')}
+    />
+  ),
+};

package/src/blocks/AIKit/QuestionBlock.tsx

@@ -0,0 +1,83 @@
+import { type ReactNode, useState } from 'react';
+
+import type { QuestionOption } from './Question';
+import { Question } from './Question';
+
+type QuestionStep = {
+  question: string;
+  header?: string;
+  options: readonly QuestionOption[];
+  multiSelect?: boolean;
+  showCustomAnswer?: boolean;
+  customAnswerPlaceholder?: string;
+};
+
+type QuestionAnswers = {
+  selections: Record<number, readonly string[]>;
+  customAnswers: Record<number, string>;
+};
+
+type Props = {
+  steps: readonly [QuestionStep, ...QuestionStep[]];
+  showSkip?: boolean;
+  onSubmit?: (answers: QuestionAnswers) => void;
+  onClose?: () => void;
+  renderPreview?: (content: string) => ReactNode;
+  className?: string;
+};
+
+export const QuestionBlock = ({
+  steps,
+  showSkip = true,
+  onSubmit,
+  onClose,
+  renderPreview,
+  className,
+}: Props) => {
+  const [currentStep, setCurrentStep] = useState(1);
+  const [selections, setSelections] = useState<Record<number, readonly string[]>>({});
+  const [customAnswers, setCustomAnswers] = useState<Record<number, string>>({});
+  const stepData = steps[currentStep - 1]!;
+  const isLastStep = currentStep === steps.length;
+
+  const advance = (updatedSelections?: Record<number, readonly string[]>) => {
+    const finalSelections = updatedSelections ?? selections;
+    if (isLastStep) {
+      onSubmit?.({ selections: finalSelections, customAnswers });
+    } else {
+      setCurrentStep((s) => Math.min(s + 1, steps.length));
+    }
+  };
+
+  const handleSelectionChange = (ids: readonly string[]) => {
+    const updated = { ...selections, [currentStep]: ids };
+    setSelections(updated);
+    if (!stepData.multiSelect) {
+      advance(updated);
+    }
+  };
+
+  return (
+    <Question
+      key={currentStep}
+      {...stepData}
+      selectedOptionIds={selections[currentStep] ?? []}
+      onSelectionChange={handleSelectionChange}
+      customAnswer={customAnswers[currentStep] ?? ''}
+      onCustomAnswerChange={(value) =>
+        setCustomAnswers((prev) => ({ ...prev, [currentStep]: value }))
+      }
+      currentStep={currentStep}
+      totalSteps={steps.length}
+      showSkip={showSkip && !isLastStep}
+      onNext={() => advance()}
+      onPrevious={() => setCurrentStep((s) => Math.max(s - 1, 1))}
+      onSkip={() => setCurrentStep((s) => Math.min(s + 1, steps.length))}
+      onClose={onClose}
+      renderPreview={renderPreview}
+      className={className}
+    />
+  );
+};
+
+export type { QuestionStep, QuestionAnswers, Props as QuestionBlockProps };

package/src/blocks/AIKit/SuggestedPrompt.stories.tsx

@@ -0,0 +1,88 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { Icon } from '../../components/Icon';
+
+import { SuggestedPrompt } from './SuggestedPrompt';
+
+const meta: Meta<typeof SuggestedPrompt> = {
+  title: 'AI Kit/SuggestedPrompt',
+  component: SuggestedPrompt,
+  parameters: {
+    layout: 'padded',
+  },
+  argTypes: {
+    disabled: {
+      control: 'boolean',
+      description: 'Whether the button is disabled',
+    },
+    onClick: {
+      action: 'clicked',
+      description: 'Callback when the suggestion is clicked',
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof SuggestedPrompt>;
+
+export const Default: Story = {
+  args: {
+    label: 'What can you help me with?',
+    disabled: false,
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    label: 'What can you help me with?',
+    disabled: true,
+  },
+};
+
+export const LongLabel: Story = {
+  render: () => (
+    <div className="tw-w-64">
+      <SuggestedPrompt
+        label="Help me analyze my data and create a visualization dashboard with charts and graphs"
+        onClick={() => console.log('Clicked')}
+      />
+    </div>
+  ),
+};
+
+export const WithCustomIcon: Story = {
+  args: {
+    label: 'Run a transformation',
+    icon: (
+      <Icon
+        className="tw-size-4 tw-shrink-0 tw-basis-4 tw-text-secondary-500"
+        fixedWidth
+        icon="play"
+      />
+    ),
+    disabled: false,
+  },
+};
+
+export const MultiplePrompts: Story = {
+  render: () => {
+    const labels = [
+      'What can you help me with?',
+      'Analyze my data',
+      'Create a new transformation',
+      'Show me recent jobs',
+    ];
+
+    return (
+      <div className="tw-flex tw-flex-col tw-gap-1">
+        {labels.map((label) => (
+          <SuggestedPrompt
+            key={label}
+            label={label}
+            onClick={() => console.log('Clicked:', label)}
+          />
+        ))}
+      </div>
+    );
+  },
+};

package/src/blocks/AIKit/SuggestedPrompt.tsx

@@ -0,0 +1,35 @@
+import type { ReactNode } from 'react';
+
+import { Icon } from '../../components/Icon';
+import { cn } from '../../utils';
+
+type Props = {
+  label: string;
+  disabled?: boolean;
+  onClick: () => void;
+  icon?: ReactNode;
+  className?: string;
+};
+
+export const SuggestedPrompt = ({ label, disabled, onClick, icon, className }: Props) => {
+  return (
+    <button
+      type="button"
+      disabled={disabled}
+      className={cn(
+        'tw-group tailwindcss-preflight tw-flex tw-items-center tw-justify-start tw-gap-2 tw-whitespace-nowrap tw-rounded-lg tw-p-2 tw-text-left tw-text-sm tw-font-medium tw-text-neutral-600 tw-transition-colors not-disabled:hover:tw-bg-neutral-100 disabled:tw-cursor-not-allowed disabled:tw-opacity-50',
+        className,
+      )}
+      onClick={onClick}
+    >
+      {icon ?? (
+        <Icon
+          className="group-not-disabled:group-hover:[&_path]:tw-fill-secondary-600 tw-size-4 tw-shrink-0 tw-basis-4 [&_path]:tw-fill-aigradient-600"
+          fixedWidth
+          icon={['far', 'file-lines']}
+        />
+      )}
+      <div className="tw-whitespace-normal tw-text-left">{label}</div>
+    </button>
+  );
+};

package/src/blocks/AIKit/ThinkingIndicator.stories.tsx

@@ -0,0 +1,21 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { ThinkingIndicator } from './ThinkingIndicator';
+
+export default {
+  title: 'AI Kit/ThinkingIndicator',
+  component: ThinkingIndicator,
+  args: {
+    label: 'Thinking...',
+  },
+} satisfies Meta<typeof ThinkingIndicator>;
+
+type Story = StoryObj<typeof ThinkingIndicator>;
+
+export const Default: Story = {};
+
+export const CustomLabel: Story = {
+  args: {
+    label: 'Processing...',
+  },
+};

package/src/blocks/AIKit/ThinkingIndicator.tsx

@@ -0,0 +1,14 @@
+import { Icon } from '../../components/Icon';
+
+type ThinkingIndicatorProps = {
+  label?: string;
+};
+
+export const ThinkingIndicator = ({ label = 'Thinking...' }: ThinkingIndicatorProps) => {
+  return (
+    <div className="tw-flex tw-items-center tw-gap-2" data-testid="chat-thinking-indicator">
+      <Icon icon="spinner" spin className="tw-size-4 tw-text-secondary-500" />
+      <span className="tw-text-sm tw-italic tw-text-secondary-500">{label}</span>
+    </div>
+  );
+};

package/src/blocks/AIKit/index.ts

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

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

@@ -0,0 +1,103 @@
+import { type ComponentProps, useState } from 'react';
+
+import { Icon } from '../../components/Icon';
+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-text-neutral-400">
+          {isOverLimit && 'Character limit exceeded'}
+          {!isOverLimit && isChanged && !isSaving && 'Unsaved'}
+          {!isOverLimit && isChanged && isSaving && (
+            <>
+              <Icon spin icon="spinner" className="tw-mr-1" /> Saving
+            </>
+          )}
+          {!isOverLimit && value !== null && !isChanged && !isSaving && (
+            <>
+              <Icon icon="check-circle" className="tw-text-primary-500" /> Saved
+            </>
+          )}
+        </span>
+      </div>
+    </div>
+  );
+};

package/src/blocks/AutoSaveTextarea/index.ts

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

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

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

@@ -0,0 +1,41 @@
+import type { ComponentProps } from 'react';
+
+import { Button } from '../../components/Button';
+import { Clipboard } from '../../components/Clipboard';
+
+type ClipboardProps = Pick<
+  ComponentProps<typeof Clipboard>,
+  'text' | 'tooltip' | 'tooltipPlacement' | 'tooltipVariant'
+>;
+
+type ButtonProps = Omit<ComponentProps<typeof Button>, 'disabled'>;
+
+type Props = ClipboardProps & ButtonProps;
+
+const DEFAULT_ICON: Props['icon'] = '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} icon={icon} variant={variant} disabled={!text}>
+      {children}
+    </Button>
+  </Clipboard>
+);

package/src/blocks/ClipboardButton/ClipboardInline.tsx

@@ -0,0 +1,41 @@
+import type { ComponentProps } from 'react';
+
+import { Icon } from '@keboola/design';
+
+import { ButtonInline } from '../../components/Button';
+import { Clipboard } from '../../components/Clipboard';
+
+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 && <Icon icon="copy" />}
+      {children}
+    </ButtonInline>
+  </Clipboard>
+);

package/src/blocks/ClipboardButton/index.ts

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