@keboola/design 2.0.1 → 2.1.0

package/src/blocks/AIKit/Question.tsx

@@ -1,350 +0,0 @@
-import { type KeyboardEvent, type ReactNode, useState } from 'react';
-
-import { Button } from '../../components/Button';
-import { Checkbox } from '../../components/Checkbox';
-import { TextInput } from '../../components/Input';
-import { Progress } from '../../components/Progress';
-import { Tooltip } from '../../components/Tooltip';
-import { ChevronLeft, ChevronRight, X } from '../../icons';
-import { cn } from '../../utils';
-
-type QuestionOption = {
-  id: string;
-  label: string;
-  description?: string;
-  preview?: string;
-};
-
-type Props = {
-  question: string;
-  header?: string;
-  options: readonly QuestionOption[];
-  multiSelect?: boolean;
-  selectedOptionIds?: readonly string[];
-  onSelectionChange?: (selectedIds: readonly string[]) => void;
-  customAnswer?: string;
-  onCustomAnswerChange?: (value: string) => void;
-  onCustomAnswerConfirm?: () => void;
-  showCustomAnswer?: boolean;
-  customAnswerPlaceholder?: string;
-  showSkip?: boolean;
-  onSkip?: () => void;
-  onClose?: () => void;
-  onNext?: () => void;
-  submitTooltip?: ReactNode;
-  onPrevious?: () => void;
-  currentStep?: number;
-  totalSteps?: number;
-  renderPreview?: (content: string) => ReactNode;
-  className?: string;
-};
-
-const handleKeyDown = (callback: () => void) => (e: KeyboardEvent) => {
-  if (e.key === 'Enter' || e.key === ' ') {
-    e.preventDefault();
-    callback();
-  }
-};
-
-export const Question = ({
-  question,
-  header,
-  options,
-  multiSelect = true,
-  selectedOptionIds = [],
-  onSelectionChange,
-  customAnswer = '',
-  onCustomAnswerChange,
-  onCustomAnswerConfirm,
-  showCustomAnswer = true,
-  customAnswerPlaceholder = 'Type your answer…',
-  showSkip = true,
-  onSkip,
-  onClose,
-  onNext,
-  submitTooltip,
-  onPrevious,
-  currentStep,
-  totalSteps,
-  renderPreview,
-  className,
-}: Props) => {
-  const [isCustomExpanded, setIsCustomExpanded] = useState(false);
-  const isCustomSelected = isCustomExpanded || customAnswer.length > 0;
-  const hasSteps = currentStep != null && totalSteps != null;
-  const progressValue = hasSteps ? (currentStep / totalSteps) * 100 : 0;
-  const isFirstStep = currentStep === 1;
-  const isLastStep = hasSteps && currentStep === totalSteps;
-
-  const handleOptionToggle = (optionId: string) => {
-    if (multiSelect) {
-      const isSelected = selectedOptionIds.includes(optionId);
-      const nextIds = isSelected
-        ? selectedOptionIds.filter((id) => id !== optionId)
-        : [...selectedOptionIds, optionId];
-      onSelectionChange?.(nextIds);
-    } else {
-      // Single-select: picking a real option deselects "Other" and drops any
-      // typed custom answer so it can't leak into the submitted answer.
-      setIsCustomExpanded(false);
-      onCustomAnswerChange?.('');
-      onSelectionChange?.([optionId]);
-    }
-  };
-
-  const handleCustomToggle = (checked: boolean) => {
-    setIsCustomExpanded(checked);
-    if (checked) {
-      // Single-select: "Other" and a real option are mutually exclusive.
-      if (!multiSelect) {
-        onSelectionChange?.([]);
-      }
-    } else {
-      onCustomAnswerChange?.('');
-    }
-  };
-
-  // Typing into (or focusing) the custom input selects "Other" directly — no
-  // need to click the row/checkbox first.
-  const handleCustomFocus = () => {
-    setIsCustomExpanded(true);
-    if (!multiSelect) {
-      onSelectionChange?.([]);
-    }
-  };
-
-  const handleCustomRowClick = () => {
-    // Multi-select: the row toggles the checkbox. Single-select: clicking only
-    // selects (never deselects, so a second click can't wipe typed text) —
-    // switch away by picking a real option instead.
-    if (multiSelect) {
-      handleCustomToggle(!isCustomSelected);
-    } else {
-      handleCustomFocus();
-    }
-  };
-
-  return (
-    <div
-      className={cn(
-        'tw-flex tw-max-w-[800px] tw-flex-col tw-gap-4 tw-overflow-hidden tw-rounded-xl tw-border tw-border-solid tw-border-border tw-bg-neutral-50 tw-shadow-lg',
-        className,
-      )}
-      data-testid="question-root"
-      data-question-step={currentStep}
-      data-question-total-steps={totalSteps}
-      data-question-multi-select={multiSelect}
-    >
-      <div className="tw-flex tw-items-start tw-gap-2 tw-pl-4 tw-pr-2 tw-pt-4">
-        <div className="tw-flex tw-min-w-0 tw-flex-1 tw-flex-col tw-gap-1">
-          <p className="tw-m-0 tw-text-base tw-font-semibold tw-leading-6 tw-text-neutral-800">
-            {question}
-          </p>
-          {header && <p className="tw-m-0 tw-text-xs tw-leading-4 tw-text-neutral-500">{header}</p>}
-        </div>
-        {onClose && (
-          <Button
-            argo
-            variant="outline"
-            size="icon-sm"
-            aria-label="Close"
-            onClick={onClose}
-            data-testid="question-close-button"
-          >
-            <X className="tw-size-4" />
-          </Button>
-        )}
-      </div>
-
-      <div className="tw-px-4">
-        <div className="tw-flex tw-flex-col tw-gap-4 tw-border-0 tw-border-l tw-border-solid tw-border-primary tw-px-4 tw-py-2">
-          {options.map((option) => (
-            <div
-              key={option.id}
-              className="tw--mx-2 tw--my-1.5 tw-flex tw-cursor-pointer tw-items-start tw-gap-2 tw-rounded-md tw-px-2 tw-py-1.5 hover:tw-bg-neutral-100"
-              onClick={() => handleOptionToggle(option.id)}
-              onKeyDown={handleKeyDown(() => handleOptionToggle(option.id))}
-              role="button"
-              tabIndex={0}
-              data-testid={`question-option-${option.id}`}
-            >
-              {multiSelect && (
-                <Checkbox
-                  checked={selectedOptionIds.includes(option.id)}
-                  onCheckedChange={() => handleOptionToggle(option.id)}
-                  onClick={(e) => e.stopPropagation()}
-                  className="tw-shrink-0"
-                />
-              )}
-              <div className="tw-flex tw-min-w-0 tw-flex-1 tw-items-start tw-gap-3">
-                <div className="tw-flex tw-flex-col tw-gap-1.5">
-                  <span className="tw-text-sm tw-font-medium tw-leading-none tw-text-neutral-800">
-                    {option.label}
-                  </span>
-                  {option.description && (
-                    <span className="tw-text-sm tw-font-normal tw-leading-5 tw-text-muted-foreground">
-                      {option.description}
-                    </span>
-                  )}
-                </div>
-                {option.preview && (
-                  <div
-                    className={cn(
-                      'tw-ml-auto tw-flex tw-max-h-40 tw-min-w-0 tw-max-w-[50%] tw-flex-col tw-overflow-hidden tw-rounded-md',
-                      !renderPreview &&
-                        'tw-overflow-auto tw-border tw-border-solid tw-border-neutral-200 tw-bg-white tw-p-2',
-                    )}
-                  >
-                    {renderPreview ? (
-                      renderPreview(option.preview)
-                    ) : (
-                      <pre className="tw-m-0 tw-overflow-visible tw-border-0 tw-bg-transparent tw-p-0 tw-font-mono tw-text-xs tw-leading-5 tw-text-neutral-700">
-                        {option.preview}
-                      </pre>
-                    )}
-                  </div>
-                )}
-              </div>
-            </div>
-          ))}
-
-          {showCustomAnswer && (
-            <div className="tw-flex tw-flex-col tw-gap-2">
-              <div
-                className="tw--mx-2 tw--my-1.5 tw-flex tw-cursor-pointer tw-items-start tw-gap-2 tw-rounded-md tw-px-2 tw-py-1.5 hover:tw-bg-neutral-100"
-                onClick={handleCustomRowClick}
-                onKeyDown={handleKeyDown(handleCustomRowClick)}
-                role="button"
-                tabIndex={0}
-              >
-                {/* Multi-select shows a checkbox alongside the option checkboxes.
-                    Single-select options auto-advance and carry no indicator, so
-                    "Other" is a plain clickable row that reveals the input below. */}
-                {multiSelect && (
-                  <Checkbox
-                    checked={isCustomSelected}
-                    onCheckedChange={handleCustomToggle}
-                    onClick={(e) => e.stopPropagation()}
-                    className="tw-shrink-0"
-                  />
-                )}
-                <span
-                  className={cn(
-                    'tw-text-sm tw-font-medium tw-leading-none',
-                    !multiSelect && isCustomSelected ? 'tw-text-primary' : 'tw-text-neutral-800',
-                  )}
-                >
-                  Other
-                </span>
-              </div>
-              {/* Always rendered and editable: typing or focusing selects "Other"
-                  directly, and keeping it mounted avoids layout shift. */}
-              <TextInput
-                value={customAnswer}
-                onValueChange={(value) => onCustomAnswerChange?.(value)}
-                onFocus={handleCustomFocus}
-                onKeyDown={
-                  onCustomAnswerConfirm
-                    ? (e: KeyboardEvent<HTMLInputElement>) => {
-                        if (e.key === 'Enter' && !e.shiftKey && !(e.metaKey || e.ctrlKey)) {
-                          e.preventDefault();
-                          onCustomAnswerConfirm();
-                        }
-                      }
-                    : undefined
-                }
-                placeholder={customAnswerPlaceholder}
-                sizing="small"
-                testId="question-custom"
-              />
-            </div>
-          )}
-        </div>
-      </div>
-
-      <div className="tw-flex tw-flex-col">
-        {hasSteps && <Progress size="sm" value={progressValue} className="tw-rounded-none" />}
-
-        <div
-          className={cn(
-            'tw-flex tw-items-center tw-justify-end tw-gap-4 tw-px-4 tw-py-3',
-            !hasSteps && 'tw-border-0 tw-border-t tw-border-solid tw-border-neutral-100',
-          )}
-        >
-          {hasSteps && (
-            <div className="tw-flex tw-items-center tw-gap-2">
-              <button
-                type="button"
-                disabled={isFirstStep}
-                className="tailwindcss-preflight tw-flex tw-cursor-pointer tw-items-center tw-justify-center tw-bg-transparent tw-p-0 disabled:tw-cursor-default"
-                onClick={onPrevious}
-                aria-label="Previous step"
-              >
-                <ChevronLeft
-                  className={cn(
-                    'tw-size-5',
-                    isFirstStep ? 'tw-text-primary/25' : 'tw-text-primary',
-                  )}
-                />
-              </button>
-              <span className="tw-text-xs tw-leading-4 tw-text-neutral-500">
-                {currentStep} of {totalSteps}
-              </span>
-              <button
-                type="button"
-                disabled={currentStep === totalSteps}
-                className="tailwindcss-preflight tw-flex tw-cursor-pointer tw-items-center tw-justify-center tw-bg-transparent tw-p-0 disabled:tw-cursor-default"
-                onClick={onNext}
-                aria-label="Next step"
-              >
-                <ChevronRight
-                  className={cn(
-                    'tw-size-5',
-                    currentStep === totalSteps ? 'tw-text-primary/25' : 'tw-text-primary',
-                  )}
-                />
-              </button>
-            </div>
-          )}
-          {showSkip && onSkip && (
-            <Button
-              argo
-              variant="outline"
-              size="small"
-              onClick={onSkip}
-              data-testid="question-skip-button"
-            >
-              Skip
-            </Button>
-          )}
-          {(multiSelect || isCustomSelected) &&
-            (submitTooltip ? (
-              <Tooltip tooltip={submitTooltip} placement="top" triggerAsChild>
-                <Button
-                  argo
-                  variant="primary"
-                  size="small"
-                  onClick={onNext}
-                  data-testid="question-next-button"
-                >
-                  {isLastStep ? 'Submit' : 'Next'}
-                </Button>
-              </Tooltip>
-            ) : (
-              <Button
-                argo
-                variant="primary"
-                size="small"
-                onClick={onNext}
-                data-testid="question-next-button"
-              >
-                {isLastStep ? 'Submit' : 'Next'}
-              </Button>
-            ))}
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export type { QuestionOption, Props as QuestionProps };

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

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

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

@@ -1,82 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-
-import { Play } from '../../icons';
-
-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: <Play className="tw-size-4 tw-shrink-0 tw-basis-4 tw-text-secondary-500" />,
-    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

@@ -1,42 +0,0 @@
-import type { ReactNode } from 'react';
-
-import { FileText } from '../../icons';
-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 ?? (
-        <FileText
-          className={cn(
-            'tw-size-4 tw-shrink-0 tw-basis-4',
-            // Lucide icons are stroke-based — paint the visible line with the
-            // AI gradient (no fill, so the glyph keeps its outline silhouette
-            // instead of becoming a solid block). The `*` selector catches
-            // every shape element (path, circle, polyline, …) so multi-part
-            // icons don't lose sub-shapes the way `path`-only selectors do.
-            '[&_*]:tw-stroke-aigradient-600',
-            'group-not-disabled:group-hover:[&_*]:tw-stroke-secondary-600',
-          )}
-        />
-      )}
-      <div className="tw-whitespace-normal tw-text-left">{label}</div>
-    </button>
-  );
-};

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

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

@@ -1,14 +0,0 @@
-import { Loader2 } from '../../icons';
-
-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">
-      <Loader2 className="tw-size-4 tw-animate-spin tw-text-secondary-500" />
-      <span className="tw-text-sm tw-italic tw-text-secondary-500">{label}</span>
-    </div>
-  );
-};