@keboola/design 2.0.1 → 3.0.0

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

@@ -1,53 +0,0 @@
-import { useState } from 'react';
-import type { Meta, StoryObj } from '@storybook/react-vite';
-
-import { CollapsibleStepHeader } from './CollapsibleStepHeader';
-
-export default {
-  title: 'AI Kit/CollapsibleStepHeader',
-  component: CollapsibleStepHeader,
-} satisfies Meta<typeof CollapsibleStepHeader>;
-
-type Story = StoryObj<typeof CollapsibleStepHeader>;
-
-export const Success: Story = {
-  render: () => {
-    const [isExpanded, setIsExpanded] = useState(false);
-    return (
-      <CollapsibleStepHeader
-        isExpanded={isExpanded}
-        onToggle={() => setIsExpanded((prev) => !prev)}
-        label="3 questions answered"
-        variant="success"
-      />
-    );
-  },
-};
-
-export const Error: Story = {
-  render: () => {
-    const [isExpanded, setIsExpanded] = useState(false);
-    return (
-      <CollapsibleStepHeader
-        isExpanded={isExpanded}
-        onToggle={() => setIsExpanded((prev) => !prev)}
-        label="Step failed"
-        variant="error"
-      />
-    );
-  },
-};
-
-export const Processing: Story = {
-  render: () => {
-    const [isExpanded, setIsExpanded] = useState(false);
-    return (
-      <CollapsibleStepHeader
-        isExpanded={isExpanded}
-        onToggle={() => setIsExpanded((prev) => !prev)}
-        label="Processing…"
-        variant="processing"
-      />
-    );
-  },
-};

package/src/blocks/AIKit/CollapsibleStepHeader.tsx

@@ -1,64 +0,0 @@
-import type { ReactNode } from 'react';
-
-import { ChevronDown, CircleCheck, Loader2, XCircle } from '../../icons';
-import { cn } from '../../utils';
-
-type Variant = 'success' | 'error' | 'processing' | 'dismissed';
-
-type Props = {
-  isExpanded: boolean;
-  onToggle: () => void;
-  label: ReactNode;
-  variant?: Variant;
-};
-
-const variantClasses: Record<Variant, string> = {
-  success:
-    'tw-text-secondary-500 focus-visible:tw-outline-secondary-500 not-disabled:hover:tw-text-secondary-600',
-  error:
-    'tw-text-error-500 focus-visible:tw-outline-error-500 not-disabled:hover:tw-text-error-600',
-  processing:
-    'tw-text-secondary-500 focus-visible:tw-outline-secondary-500 not-disabled:hover:tw-text-secondary-600',
-  dismissed:
-    'tw-text-neutral-700 focus-visible:tw-outline-neutral-500 not-disabled:hover:tw-text-neutral-800',
-};
-
-const renderVariantIcon = (variant: Variant) => {
-  if (variant === 'processing') {
-    return <Loader2 className="tw-size-4 tw-animate-spin" />;
-  }
-  if (variant === 'error') {
-    return <XCircle className="tw-size-4" />;
-  }
-  if (variant === 'dismissed') {
-    return <XCircle className="tw-size-4 tw-text-neutral-500" />;
-  }
-  return <CircleCheck className="tw-size-4" />;
-};
-
-export const CollapsibleStepHeader = ({
-  isExpanded,
-  onToggle,
-  label,
-  variant = 'success',
-}: Props) => {
-  return (
-    <button
-      type="button"
-      aria-expanded={isExpanded}
-      onClick={onToggle}
-      className={cn(
-        'tw-flex tw-w-fit tw-items-center tw-gap-3 tw-text-left tw-text-sm tw-font-medium tw-italic tw-transition-colors focus-visible:tw-outline focus-visible:tw-outline-2 focus-visible:tw-outline-offset-2 disabled:tw-opacity-40',
-        variantClasses[variant],
-      )}
-    >
-      <div className="tw-flex tw-items-center tw-gap-2">
-        {renderVariantIcon(variant)}
-        <span>{label}</span>
-      </div>
-      <ChevronDown
-        className={cn('tw-size-4 tw-transition-transform', isExpanded && 'tw-rotate-180')}
-      />
-    </button>
-  );
-};

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

@@ -1,25 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-
-import { InlineStepDetail } from './InlineStepDetail';
-
-export default {
-  title: 'AI Kit/InlineStepDetail',
-  component: InlineStepDetail,
-} satisfies Meta<typeof InlineStepDetail>;
-
-type Story = StoryObj<typeof InlineStepDetail>;
-
-export const Default: Story = {
-  args: {
-    children:
-      'The user asked for buckets. I got 15 buckets total - 10 input and 5 output. Let me provide a brief summary as per their preference.',
-  },
-};
-
-export const Multiline: Story = {
-  args: {
-    children: `Line one.
-Line two with a few more words.
-Line three.`,
-  },
-};

package/src/blocks/AIKit/InlineStepDetail.tsx

@@ -1,13 +0,0 @@
-import type { ReactNode } from 'react';
-
-type Props = {
-  children: ReactNode;
-};
-
-export const InlineStepDetail = ({ children }: Props) => (
-  <div className="tw-ml-2.5 tw-whitespace-pre-wrap tw-border-l tw-border-neutral-200 tw-pl-3 tw-text-xs tw-text-neutral-400">
-    {children}
-  </div>
-);
-
-export type { Props as InlineStepDetailProps };

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

@@ -1,37 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-
-import { InlineStepLabel } from './InlineStepLabel';
-
-export default {
-  title: 'AI Kit/InlineStepLabel',
-  component: InlineStepLabel,
-  argTypes: {
-    variant: {
-      control: 'radio',
-      options: ['processing', 'success', 'error'],
-    },
-  },
-} satisfies Meta<typeof InlineStepLabel>;
-
-type Story = StoryObj<typeof InlineStepLabel>;
-
-export const Success: Story = {
-  args: {
-    variant: 'success',
-    children: 'Listing buckets',
-  },
-};
-
-export const Processing: Story = {
-  args: {
-    variant: 'processing',
-    children: 'Loading data',
-  },
-};
-
-export const ErrorState: Story = {
-  args: {
-    variant: 'error',
-    children: 'Failed to load buckets',
-  },
-};

package/src/blocks/AIKit/InlineStepLabel.tsx

@@ -1,36 +0,0 @@
-import type { ReactNode } from 'react';
-
-import { CircleCheck, Loader2, XCircle } from '../../icons';
-
-type Variant = 'processing' | 'success' | 'error' | 'dismissed';
-
-type Props = {
-  variant: Variant;
-  children: ReactNode;
-};
-
-const renderVariantIcon = (variant: Variant) => {
-  if (variant === 'processing') {
-    return <Loader2 className="tw-size-4 tw-animate-spin tw-text-neutral-200" />;
-  }
-  if (variant === 'error') {
-    return <XCircle className="tw-size-4 tw-text-error-500" />;
-  }
-  if (variant === 'dismissed') {
-    return <XCircle className="tw-size-4 tw-text-neutral-200" />;
-  }
-  return <CircleCheck className="tw-size-4 tw-text-neutral-200" />;
-};
-
-export const InlineStepLabel = ({ variant, children }: Props) => (
-  <div className="tw-flex tw-min-w-0 tw-items-center tw-gap-1">
-    <div className="tw-flex tw-size-5 tw-shrink-0 tw-items-center tw-justify-center">
-      {renderVariantIcon(variant)}
-    </div>
-    <div className="tw-flex tw-min-w-0 tw-flex-wrap tw-items-center tw-gap-x-1.5 tw-gap-y-1 tw-text-sm tw-font-medium tw-italic tw-text-neutral-800">
-      {children}
-    </div>
-  </div>
-);
-
-export type { Variant as InlineStepLabelVariant, Props as InlineStepLabelProps };

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

@@ -1,145 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-
-import { Copy, ThumbsDown, ThumbsUp } from '@keboola/design/icons';
-
-import { Button } from '../../components/Button';
-
-import { MessageBubble } from './MessageBubble';
-
-export default {
-  title: 'AI Kit/MessageBubble',
-  component: MessageBubble,
-  args: {
-    variant: 'assistant',
-  },
-  argTypes: {
-    variant: {
-      control: 'radio',
-      options: ['user', 'assistant'],
-    },
-    actions: {
-      control: false,
-    },
-  },
-  decorators: [
-    (Story) => (
-      <div className="tw-grid tw-gap-4">
-        <Story />
-      </div>
-    ),
-  ],
-} satisfies Meta<typeof MessageBubble>;
-
-type Story = StoryObj<typeof MessageBubble>;
-
-export const Assistant: Story = {
-  args: {
-    variant: 'assistant',
-    children: (
-      <>
-        Hello! I'm an AI assistant. How can I help you today? I can answer questions, help with
-        code, explain concepts, and much more.
-      </>
-    ),
-  },
-};
-
-export const User: Story = {
-  args: {
-    variant: 'user',
-    user: { name: 'John Doe', email: 'john@example.com' },
-    children: <>Can you help me write a function that calculates the factorial of a number?</>,
-  },
-};
-
-export const AssistantWithActions: Story = {
-  args: {
-    variant: 'assistant',
-    children: (
-      <div>
-        <p>Sure! Here's a factorial function in TypeScript:</p>
-        <pre className="tw-mt-2 tw-rounded tw-bg-neutral-100 tw-p-3 tw-text-sm">
-          {`function factorial(n: number): number {
-  if (n <= 1) return 1;
-  return n * factorial(n - 1);
-}`}
-        </pre>
-      </div>
-    ),
-    actions: (
-      <div className="tw-flex tw-gap-2">
-        <Button size="icon-sm" variant="outline" aria-label="Copy">
-          <Copy className="tw-size-4" />
-        </Button>
-        <Button size="icon-sm" variant="outline" aria-label="Helpful">
-          <ThumbsUp className="tw-size-4" />
-        </Button>
-        <Button size="icon-sm" variant="outline" aria-label="Not helpful">
-          <ThumbsDown className="tw-size-4" />
-        </Button>
-      </div>
-    ),
-  },
-};
-
-export const LongContent: Story = {
-  args: {
-    variant: 'assistant',
-    children: (
-      <div className="tw-flex tw-flex-col tw-gap-3">
-        <p>Here are several key React performance optimization techniques:</p>
-        <ol className="tw-list-inside tw-list-decimal tw-space-y-2">
-          <li>
-            <strong>Use React.memo()</strong> - Wrap functional components to prevent unnecessary
-            re-renders when props haven't changed.
-          </li>
-          <li>
-            <strong>Use useMemo() and useCallback()</strong> - Memoize expensive calculations and
-            callback functions to maintain referential equality.
-          </li>
-          <li>
-            <strong>Code splitting with React.lazy()</strong> - Load components on demand to reduce
-            initial bundle size.
-          </li>
-          <li>
-            <strong>Virtualize long lists</strong> - Use libraries like react-window or
-            react-virtualized for rendering large datasets.
-          </li>
-          <li>
-            <strong>Avoid inline functions in JSX</strong> - Define callbacks outside of render to
-            prevent new function instances on each render.
-          </li>
-        </ol>
-      </div>
-    ),
-  },
-};
-
-const exampleUser = { name: 'User', email: 'user@example.com' };
-
-export const Conversation: Story = {
-  decorators: [],
-  render: () => (
-    <div className="tw-grid tw-gap-4">
-      <MessageBubble variant="user" user={exampleUser}>
-        <>What is the capital of France?</>
-      </MessageBubble>
-      <MessageBubble variant="assistant">
-        <>
-          The capital of France is <strong>Paris</strong>. It's located in the north-central part of
-          the country along the Seine River.
-        </>
-      </MessageBubble>
-      <MessageBubble variant="user" user={exampleUser}>
-        <>What's the population?</>
-      </MessageBubble>
-      <MessageBubble variant="assistant">
-        <>
-          Paris has a population of approximately 2.1 million people within the city limits. The
-          greater Paris metropolitan area (Ile-de-France) has over 12 million inhabitants, making it
-          one of the largest metropolitan areas in Europe.
-        </>
-      </MessageBubble>
-    </div>
-  ),
-};

package/src/blocks/AIKit/MessageBubble.tsx

@@ -1,68 +0,0 @@
-import type { ComponentProps, PropsWithChildren, ReactNode } from 'react';
-import { cva } from 'class-variance-authority';
-
-import { Avatar } from '../../components/Avatar';
-
-const containerClasses = cva(['tw-flex', 'tw-max-w-full', 'tw-gap-4'], {
-  variants: {
-    variant: {
-      user: ['tw-justify-self-end', 'tw-flex-row-reverse'],
-      assistant: ['tw-justify-self-start', 'tw-w-full', 'tw-gap-3'],
-    },
-  },
-  defaultVariants: {
-    variant: 'assistant',
-  },
-});
-
-const contentClasses = cva(
-  [
-    'tw-flex',
-    'tw-flex-col',
-    'tw-gap-4',
-    'tw-break-words',
-    'tw-leading-relaxed',
-    'tw-text-neutral-800',
-    '[&_.tw-prose]:tw-text-neutral-800',
-  ],
-  {
-    variants: {
-      variant: {
-        assistant: ['tw-flex-1', 'tw-w-full', 'tw-min-w-0', '[&>*]:tw-min-w-0'],
-        user: [
-          'tw-max-w-screen-sm',
-          'tw-w-fit',
-          'tw-bg-neutral-50',
-          'tw-p-3',
-          'tw-rounded-2xl',
-          'tw-ml-6',
-          'tw-overflow-hidden',
-          'tw-break-anywhere',
-        ],
-      },
-    },
-
-    defaultVariants: {
-      variant: 'assistant',
-    },
-  },
-);
-
-type Props = {
-  variant: 'user' | 'assistant';
-  user?: ComponentProps<typeof Avatar>['user'];
-  actions?: ReactNode;
-  createdAt?: string;
-} & PropsWithChildren;
-
-export const MessageBubble = ({ variant, children, user, actions, createdAt }: Props) => {
-  return (
-    <div className={containerClasses({ variant })} data-testid={`chat-message-${variant}`}>
-      {variant === 'user' && <Avatar user={user} size={30} title={createdAt} />}
-      <div className="tw-flex tw-min-w-0 tw-flex-1 tw-flex-col tw-gap-2">
-        <div className={contentClasses({ variant })}>{children}</div>
-        {actions}
-      </div>
-    </div>
-  );
-};

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

@@ -1,121 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-
-import { PlanApproval } from './PlanApproval';
-import { PlanRewritingIndicator } from './PlanRewritingIndicator';
-
-const samplePlanBody = (
-  <div className="tw-flex tw-flex-col tw-gap-3">
-    <p className="tw-m-0 tw-text-sm tw-font-semibold tw-text-neutral-800">
-      Audit plan for the KIO pipeline
-    </p>
-    <ol className="tw-m-0 tw-flex tw-flex-col tw-gap-2 tw-pl-5 tw-text-sm tw-text-neutral-700">
-      <li>Inspect the raw bucket schema and column types</li>
-      <li>List downstream transformations and their dependencies</li>
-      <li>Sample row counts per table and flag mismatches</li>
-      <li>Run referential integrity checks on the staging layer</li>
-      <li>Identify orphan rows and produce remediation suggestions</li>
-      <li>Summarize findings in a markdown report</li>
-      <li>Propose follow-up issues for owners to triage</li>
-      <li>Wait for approval before applying any fixes</li>
-    </ol>
-  </div>
-);
-
-const decorator = (Story: React.ComponentType) => (
-  <div style={{ maxWidth: 800 }}>
-    <Story />
-  </div>
-);
-
-const meta: Meta<typeof PlanApproval> = {
-  title: 'AI Kit/PlanApproval',
-  component: PlanApproval,
-  args: {
-    status: 'pending',
-    title: '8-step Audit plan for KIO pipeline covering',
-    summary: 'Short summary describing the high-level plan before the user expands the details.',
-    stepCount: 42,
-    planBody: samplePlanBody,
-  },
-  decorators: [decorator],
-};
-
-export default meta;
-
-type Story = StoryObj<typeof PlanApproval>;
-
-export const PendingCollapsed: Story = {
-  args: {
-    onApprove: () => alert('Approved'),
-    onRequestChanges: (reason) => alert(`Request Changes: ${reason}`),
-    onClose: () => alert('Dismissed'),
-  },
-};
-
-export const PendingExpanded: Story = {
-  args: {
-    defaultExpanded: true,
-    onApprove: () => alert('Approved'),
-    onRequestChanges: (reason) => alert(`Request Changes: ${reason}`),
-    onClose: () => alert('Dismissed'),
-  },
-};
-
-export const Approved: Story = {
-  args: {
-    status: 'approved',
-  },
-};
-
-export const Dismissed: Story = {
-  args: {
-    status: 'dismissed',
-  },
-};
-
-export const WithoutPlanBody: Story = {
-  args: {
-    planBody: undefined,
-    onApprove: () => alert('Approved'),
-    onRequestChanges: (reason) => alert(`Request Changes: ${reason}`),
-    onClose: () => alert('Dismissed'),
-  },
-};
-
-export const Submitting: Story = {
-  args: {
-    defaultExpanded: true,
-    isSubmitting: true,
-    onApprove: () => alert('Approved'),
-    onRequestChanges: (reason) => alert(`Request Changes: ${reason}`),
-    onClose: () => alert('Dismissed'),
-  },
-};
-
-export const PendingExpandedLongPlan: Story = {
-  args: {
-    defaultExpanded: true,
-    title: 'Plan: Migrate the analytics warehouse to BigQuery',
-    summary:
-      'A long, multi-stage migration plan whose markdown body is bigger than the card max-height — the plan body scrolls internally so the header and the Approve / Request Changes buttons remain visible without scrolling the chat viewport.',
-    stepCount: 42,
-    planBody: (
-      <div className="tw-flex tw-flex-col tw-gap-3">
-        {Array.from({ length: 40 }).map((_, index) => (
-          <p key={index} className="tw-m-0 tw-text-sm tw-text-neutral-700">
-            <strong>Step {index + 1}.</strong> Lorem ipsum dolor sit amet, consectetur adipiscing
-            elit. Curabitur efficitur, sapien id finibus consectetur, lorem velit egestas urna, in
-            placerat nulla nisi a augue. Nulla facilisi.
-          </p>
-        ))}
-      </div>
-    ),
-    onApprove: () => alert('Approved'),
-    onRequestChanges: (reason) => alert(`Request Changes: ${reason}`),
-    onClose: () => alert('Dismissed'),
-  },
-};
-
-export const Rewriting: StoryObj<typeof PlanRewritingIndicator> = {
-  render: () => <PlanRewritingIndicator />,
-};