@keboola/design 2.0.1 → 2.1.0

package/src/blocks/AIKit/PlanApproval.tsx

@@ -1,363 +0,0 @@
-import { type FormEvent, type KeyboardEvent, type ReactNode, useState } from 'react';
-
-import { Badge } from '../../components/Badge';
-import { Button } from '../../components/Button';
-import { Tooltip } from '../../components/Tooltip';
-import { ChevronDown, Send, X } from '../../icons';
-import { cn } from '../../utils';
-import { Textarea } from '../Textarea';
-
-type PlanApprovalStatus = 'pending' | 'approved' | 'dismissed' | 'changes-requested';
-
-type PlanApprovalProps = {
-  status: PlanApprovalStatus;
-  title: string;
-  summary?: ReactNode;
-  stepCount?: number;
-  planBody?: ReactNode;
-
-  defaultExpanded?: boolean;
-  isExpanded?: boolean;
-  onExpandToggle?: (next: boolean) => void;
-
-  onApprove?: () => void;
-  onRequestChanges?: (reason: string) => void;
-  onClose?: () => void;
-  isSubmitting?: boolean;
-  approveTooltip?: ReactNode;
-
-  pendingPillLabel?: string;
-  approvedPillLabel?: string;
-  dismissedPillLabel?: string;
-  changesRequestedPillLabel?: string;
-  approveLabel?: string;
-  requestChangesLabel?: string;
-  cancelLabel?: string;
-  showMoreLabel?: string;
-  showLessLabel?: string;
-  closeLabel?: string;
-  changeRequestPlaceholder?: string;
-  changeRequestSubmitLabel?: string;
-  stepCountLabel?: (count: number) => string;
-
-  className?: string;
-};
-
-const defaultStepCountLabel = (count: number) => `${count} step${count === 1 ? '' : 's'}`;
-
-const StatusPill = ({
-  status,
-  pendingLabel,
-  approvedLabel,
-  dismissedLabel,
-  changesRequestedLabel,
-}: {
-  status: PlanApprovalStatus;
-  pendingLabel: string;
-  approvedLabel: string;
-  dismissedLabel: string;
-  changesRequestedLabel: string;
-}) => {
-  if (status === 'approved') {
-    return (
-      <Badge color="green" variant="pill" className="tw-normal-case tw-tracking-normal">
-        {approvedLabel}
-      </Badge>
-    );
-  }
-  if (status === 'dismissed') {
-    return (
-      <Badge color="gray" variant="pill" className="tw-normal-case tw-tracking-normal">
-        {dismissedLabel}
-      </Badge>
-    );
-  }
-  if (status === 'changes-requested') {
-    return (
-      <Badge color="blue" variant="pill" className="tw-normal-case tw-tracking-normal">
-        {changesRequestedLabel}
-      </Badge>
-    );
-  }
-  return (
-    <Badge color="green" variant="pill" className="tw-normal-case tw-tracking-normal">
-      {pendingLabel}
-    </Badge>
-  );
-};
-
-const ExpandToggle = ({
-  isExpanded,
-  onToggle,
-  showMoreLabel,
-  showLessLabel,
-}: {
-  isExpanded: boolean;
-  onToggle: () => void;
-  showMoreLabel: string;
-  showLessLabel: string;
-}) => (
-  <button
-    type="button"
-    onClick={onToggle}
-    aria-expanded={isExpanded}
-    className="tailwindcss-preflight tw-inline-flex tw-cursor-pointer tw-items-center tw-gap-1 tw-bg-transparent tw-p-0 tw-text-sm tw-font-medium tw-text-secondary-500 hover:tw-text-secondary-600 focus-visible:tw-outline focus-visible:tw-outline-2 focus-visible:tw-outline-offset-2 focus-visible:tw-outline-secondary-500"
-  >
-    <span>{isExpanded ? showLessLabel : showMoreLabel}</span>
-    <ChevronDown
-      className={cn('tw-size-5 tw-transition-transform', isExpanded && 'tw-rotate-180')}
-    />
-  </button>
-);
-
-export const PlanApproval = ({
-  status,
-  title,
-  summary,
-  stepCount,
-  planBody,
-
-  defaultExpanded = false,
-  isExpanded: isExpandedProp,
-  onExpandToggle,
-
-  onApprove,
-  onRequestChanges,
-  onClose,
-  isSubmitting = false,
-  approveTooltip,
-
-  pendingPillLabel = 'Ready for approval',
-  approvedPillLabel = 'Approved',
-  dismissedPillLabel = 'Dismissed',
-  changesRequestedPillLabel = 'Changes Requested',
-  approveLabel = 'Approve',
-  requestChangesLabel = 'Request Changes',
-  cancelLabel = 'Cancel',
-  showMoreLabel = 'Show more',
-  showLessLabel = 'Show less',
-  closeLabel = 'Dismiss plan',
-  changeRequestPlaceholder = 'What would you like to change in the plan?',
-  changeRequestSubmitLabel = 'Send change request',
-  stepCountLabel = defaultStepCountLabel,
-
-  className,
-}: PlanApprovalProps) => {
-  const [uncontrolledExpanded, setUncontrolledExpanded] = useState(defaultExpanded);
-  const isExpanded = isExpandedProp ?? uncontrolledExpanded;
-  const [isRequestingChanges, setIsRequestingChanges] = useState(false);
-  const [changeRequest, setChangeRequest] = useState('');
-
-  const isPending = status === 'pending';
-  const showActions = isPending && (onApprove || onRequestChanges);
-  const showClose = isPending && Boolean(onClose);
-  const canShowPlanBody = planBody != null;
-  const trimmedChangeRequest = changeRequest.trim();
-  const canSubmitChangeRequest = trimmedChangeRequest.length > 0 && !isSubmitting;
-
-  const toggleExpanded = () => {
-    const next = !isExpanded;
-    if (isExpandedProp === undefined) {
-      setUncontrolledExpanded(next);
-    }
-    onExpandToggle?.(next);
-  };
-
-  const handleOpenRequestChanges = () => {
-    setIsRequestingChanges(true);
-    if (!isExpanded) {
-      toggleExpanded();
-    }
-  };
-
-  const handleCancelChangeRequest = () => {
-    setIsRequestingChanges(false);
-    setChangeRequest('');
-  };
-
-  const handleSubmitChangeRequest = (event?: FormEvent) => {
-    event?.preventDefault();
-    if (!canSubmitChangeRequest) return;
-    onRequestChanges?.(trimmedChangeRequest);
-  };
-
-  const handleTextareaKeyDown = (event: KeyboardEvent<HTMLTextAreaElement>) => {
-    if (event.key === 'Enter' && !event.shiftKey) {
-      event.preventDefault();
-      handleSubmitChangeRequest();
-    }
-  };
-
-  return (
-    <section
-      aria-label={title}
-      className={cn(
-        'tw-flex tw-w-full tw-max-w-[800px] tw-flex-col tw-overflow-hidden tw-rounded-xl tw-border tw-border-solid tw-border-border tw-bg-neutral-50',
-        className,
-      )}
-      data-testid="plan-approval-root"
-      data-plan-status={status}
-    >
-      <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-2 tw-pb-4">
-          <div className="tw-flex tw-items-center tw-gap-3">
-            <StatusPill
-              status={status}
-              pendingLabel={pendingPillLabel}
-              approvedLabel={approvedPillLabel}
-              dismissedLabel={dismissedPillLabel}
-              changesRequestedLabel={changesRequestedPillLabel}
-            />
-            {stepCount != null && stepCount > 0 && (
-              <span className="tw-text-xs tw-leading-4 tw-text-neutral-500">
-                {stepCountLabel(stepCount)}
-              </span>
-            )}
-          </div>
-          <p className="tw-m-0 tw-text-base tw-font-semibold tw-leading-6 tw-text-neutral-800">
-            {title}
-          </p>
-        </div>
-        {showClose && (
-          <Button
-            argo
-            variant="outline"
-            size="icon-sm"
-            aria-label={closeLabel}
-            onClick={onClose}
-            disabled={isSubmitting}
-            data-testid="plan-close-button"
-          >
-            <X className="tw-size-4" />
-          </Button>
-        )}
-      </div>
-
-      {summary != null && (
-        <div
-          className={cn(
-            'tw-whitespace-pre-wrap tw-border-0 tw-border-t tw-border-solid tw-border-neutral-100 tw-px-4 tw-pt-4 tw-text-sm tw-text-neutral-700',
-            isExpanded && canShowPlanBody ? 'tw-pb-4' : 'tw-pb-2',
-          )}
-        >
-          {summary}
-        </div>
-      )}
-
-      {isExpanded && canShowPlanBody && (
-        <div className="tw-max-h-[400px] tw-overflow-y-auto tw-border-0 tw-border-t tw-border-solid tw-border-neutral-100 tw-bg-white tw-p-4 tw-text-sm tw-text-neutral-700">
-          {planBody}
-        </div>
-      )}
-
-      {isRequestingChanges && isPending && (
-        <form
-          onSubmit={handleSubmitChangeRequest}
-          className="tw-border-0 tw-border-t tw-border-solid tw-border-neutral-100 tw-bg-white tw-px-4 tw-py-3"
-          aria-label={requestChangesLabel}
-        >
-          <div className="tw-relative">
-            <Textarea
-              value={changeRequest}
-              onValueChange={setChangeRequest}
-              placeholder={changeRequestPlaceholder}
-              maxRows={4}
-              autoFocus
-              onKeyDown={handleTextareaKeyDown}
-              containerClassName="tw-pr-12"
-              disabled={isSubmitting}
-              aria-label={changeRequestPlaceholder}
-              data-testid="plan-change-request-input"
-            />
-            <Button
-              argo
-              type="submit"
-              variant="invisible"
-              size="icon-sm"
-              aria-label={changeRequestSubmitLabel}
-              disabled={!canSubmitChangeRequest}
-              className="tw-absolute tw-right-2 tw-top-1/2 tw--translate-y-1/2 [&_svg]:tw-text-secondary-500 not-disabled:hover:[&_svg]:tw-text-secondary-600"
-              data-testid="plan-change-request-submit"
-            >
-              <Send className="tw-size-4" />
-            </Button>
-          </div>
-        </form>
-      )}
-
-      <div
-        className={cn(
-          'tw-flex tw-items-center tw-border-0 tw-border-t tw-border-solid tw-border-neutral-100 tw-bg-white tw-px-4 tw-py-3',
-          canShowPlanBody ? 'tw-justify-between' : 'tw-justify-end',
-        )}
-      >
-        {canShowPlanBody && (
-          <ExpandToggle
-            isExpanded={isExpanded}
-            onToggle={toggleExpanded}
-            showMoreLabel={showMoreLabel}
-            showLessLabel={showLessLabel}
-          />
-        )}
-
-        {showActions && (
-          <div className="tw-flex tw-items-center tw-gap-2">
-            {isRequestingChanges ? (
-              <Button
-                argo
-                variant="outline"
-                size="small"
-                onClick={handleCancelChangeRequest}
-                disabled={isSubmitting}
-                data-testid="plan-cancel-button"
-              >
-                {cancelLabel}
-              </Button>
-            ) : (
-              onRequestChanges && (
-                <Button
-                  argo
-                  variant="outline"
-                  size="small"
-                  onClick={handleOpenRequestChanges}
-                  disabled={isSubmitting}
-                  data-testid="plan-request-changes-button"
-                >
-                  {requestChangesLabel}
-                </Button>
-              )
-            )}
-            {onApprove &&
-              (approveTooltip ? (
-                <Tooltip tooltip={approveTooltip} placement="top" triggerAsChild>
-                  <Button
-                    argo
-                    variant="primary"
-                    size="small"
-                    onClick={onApprove}
-                    disabled={isSubmitting || isRequestingChanges}
-                    data-testid="plan-approve-button"
-                  >
-                    {approveLabel}
-                  </Button>
-                </Tooltip>
-              ) : (
-                <Button
-                  argo
-                  variant="primary"
-                  size="small"
-                  onClick={onApprove}
-                  disabled={isSubmitting || isRequestingChanges}
-                  data-testid="plan-approve-button"
-                >
-                  {approveLabel}
-                </Button>
-              ))}
-          </div>
-        )}
-      </div>
-    </section>
-  );
-};
-
-export type { PlanApprovalStatus, PlanApprovalProps };

package/src/blocks/AIKit/PlanRewritingIndicator.test.tsx

@@ -1,17 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import { describe, expect, it } from 'vitest';
-
-import { PlanRewritingIndicator } from './PlanRewritingIndicator';
-
-describe('<PlanRewritingIndicator />', () => {
-  it('renders the default label', () => {
-    render(<PlanRewritingIndicator />);
-    expect(screen.getByText('Rewriting the plan...')).toBeInTheDocument();
-    expect(screen.getByTestId('plan-rewriting-indicator')).toBeInTheDocument();
-  });
-
-  it('renders a custom label', () => {
-    render(<PlanRewritingIndicator label="Updating plan..." />);
-    expect(screen.getByText('Updating plan...')).toBeInTheDocument();
-  });
-});

package/src/blocks/AIKit/PlanRewritingIndicator.tsx

@@ -1,20 +0,0 @@
-import { Loader2 } from '../../icons';
-
-type PlanRewritingIndicatorProps = {
-  label?: string;
-};
-
-export const PlanRewritingIndicator = ({
-  label = 'Rewriting the plan...',
-}: PlanRewritingIndicatorProps) => (
-  <div
-    className="tw-flex tw-items-center tw-gap-2"
-    role="status"
-    data-testid="plan-rewriting-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>
-);
-
-export type { PlanRewritingIndicatorProps };

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

@@ -1,106 +0,0 @@
-import { useState } from 'react';
-import type { ComponentProps } from 'react';
-import type { Meta, StoryObj } from '@storybook/react-vite';
-
-import { Upload } from '@keboola/design/icons';
-
-import { Button } from '../../components/Button';
-import { DropdownMenu } from '../../components/DropdownMenu';
-
-import { PromptInput } from './PromptInput';
-
-type PromptInputProps = ComponentProps<typeof PromptInput>;
-
-const sendMessage = () => new Promise((resolve) => setTimeout(resolve, 500));
-
-const PromptInputDemo = (props: PromptInputProps) => {
-  const [value, setValue] = useState('');
-  const [status, setStatus] = useState<PromptInputProps['status']>('ready');
-
-  const handleOnSend: PromptInputProps['onSend'] = () => {
-    setStatus('submitted');
-    sendMessage().then(() => {
-      setStatus('streaming');
-    });
-  };
-  const handleOnAbort: PromptInputProps['onAbort'] = () => {
-    setStatus('ready');
-  };
-
-  return (
-    <PromptInput
-      {...props}
-      onSend={handleOnSend}
-      onAbort={handleOnAbort}
-      status={status}
-      value={value}
-      onValueChange={setValue}
-    />
-  );
-};
-
-export default {
-  title: 'AI Kit/PromptInput',
-  component: PromptInput,
-  render: PromptInputDemo,
-  args: {
-    variant: 'default',
-    placeholder: 'Send a message...',
-    disabled: false,
-    suffix: (
-      <PromptInput.Action>
-        <Button size="icon-sm" variant="invisible">
-          <Upload className="tw-size-4" />
-        </Button>
-      </PromptInput.Action>
-    ),
-
-    prefix: (
-      <DropdownMenu>
-        <PromptInput.Action>
-          <DropdownMenu.Trigger asChild>
-            <button
-              type="button"
-              className="tw-text-nowrap tw-rounded-lg tw-px-1 tw-py-0.5 tw-text-neutral-400 tw-outline-none focus-within:tw-bg-neutral-100 hover:tw-bg-neutral-50"
-            >
-              @ context
-            </button>
-          </DropdownMenu.Trigger>
-        </PromptInput.Action>
-
-        <DropdownMenu.Content side="top" align="start">
-          <DropdownMenu.Group>
-            <DropdownMenu.Item>File A</DropdownMenu.Item>
-            <DropdownMenu.Item>File B</DropdownMenu.Item>
-          </DropdownMenu.Group>
-        </DropdownMenu.Content>
-      </DropdownMenu>
-    ),
-  },
-} satisfies Meta<typeof PromptInput>;
-
-type Story = StoryObj<typeof PromptInput>;
-
-export const Basic: Story = {};
-
-export const Inline: Story = {
-  args: {
-    variant: 'inline',
-  },
-};
-
-export const Actions: Story = {
-  args: {
-    suffix: (
-      <Button size="icon-3xs" variant="inline">
-        <Upload className="tw-size-4" />
-      </Button>
-    ),
-  },
-};
-
-export const WithCustomMaxRows: Story = {
-  args: {
-    maxRows: 3,
-  },
-};

package/src/blocks/AIKit/PromptInput.test.tsx

@@ -1,53 +0,0 @@
-import { fireEvent, render, screen } from '@testing-library/react';
-import { describe, expect, it, vi } from 'vitest';
-
-import { PromptInput } from './PromptInput';
-
-describe('<PromptInput />', () => {
-  it('does not call onAbort when Enter is pressed during streaming', () => {
-    const onAbort = vi.fn();
-    const onSend = vi.fn();
-
-    render(<PromptInput status="streaming" value="hello" onSend={onSend} onAbort={onAbort} />);
-
-    const textarea = screen.getByRole('textbox');
-    fireEvent.keyDown(textarea, { key: 'Enter' });
-
-    expect(onAbort).not.toHaveBeenCalled();
-    expect(onSend).not.toHaveBeenCalled();
-  });
-
-  it('calls onAbort when the stop button is clicked during streaming', () => {
-    const onAbort = vi.fn();
-
-    render(<PromptInput status="streaming" value="" onAbort={onAbort} />);
-
-    const form = screen.getByTestId('prompt-input');
-    const button = form.querySelector('button[type="submit"]')!;
-    fireEvent.click(button);
-
-    expect(onAbort).toHaveBeenCalledOnce();
-  });
-
-  it('calls onSend when Enter is pressed in ready state', () => {
-    const onSend = vi.fn();
-
-    render(<PromptInput status="ready" value="hello" onSend={onSend} />);
-
-    const textarea = screen.getByRole('textbox');
-    fireEvent.keyDown(textarea, { key: 'Enter' });
-
-    expect(onSend).toHaveBeenCalledWith('hello');
-  });
-
-  it('calls onContinue when Enter is pressed in interrupted state', () => {
-    const onContinue = vi.fn();
-
-    render(<PromptInput status="interrupted" value="" onContinue={onContinue} />);
-
-    const textarea = screen.getByRole('textbox');
-    fireEvent.keyDown(textarea, { key: 'Enter' });
-
-    expect(onContinue).toHaveBeenCalledOnce();
-  });
-});