@keboola/design 2.0.0 → 2.1.0

package/package.json

@@ -1,24 +1,88 @@
 {
   "name": "@keboola/design",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "description": "Keboola UI platform design system — shadcn-aligned React primitives, Keboola-branded blocks, and the form bindings built on TanStack Form.",
   "license": "MIT",
   "type": "module",
   "sideEffects": [
     "**/*.css"
   ],
-  "main": "./src/index.ts",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "typesVersions": {
+    "*": {
+      "mermaid": [
+        "./dist/mermaid.d.ts"
+      ],
+      "markdown-editor": [
+        "./dist/markdown-editor.d.ts"
+      ],
+      "icons": [
+        "./dist/icons.d.ts"
+      ],
+      "icon-names": [
+        "./dist/icon-names.d.ts"
+      ]
+    }
+  },
   "exports": {
-    ".": "./src/index.ts",
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
+    },
     "./styles": "./src/styles.css",
-    "./mermaid": "./src/blocks/MermaidDiagram/index.ts",
-    "./markdown-editor": "./src/components/MarkdownEditor/index.ts",
-    "./icons": "./src/icons/index.ts",
-    "./icon-names": "./src/icon-names.ts"
+    "./styles/compiled": "./dist/styles.css",
+    "./mermaid": {
+      "import": {
+        "types": "./dist/mermaid.d.ts",
+        "default": "./dist/mermaid.js"
+      },
+      "require": {
+        "types": "./dist/mermaid.d.cts",
+        "default": "./dist/mermaid.cjs"
+      }
+    },
+    "./markdown-editor": {
+      "import": {
+        "types": "./dist/markdown-editor.d.ts",
+        "default": "./dist/markdown-editor.js"
+      },
+      "require": {
+        "types": "./dist/markdown-editor.d.cts",
+        "default": "./dist/markdown-editor.cjs"
+      }
+    },
+    "./icons": {
+      "import": {
+        "types": "./dist/icons.d.ts",
+        "default": "./dist/icons.js"
+      },
+      "require": {
+        "types": "./dist/icons.d.cts",
+        "default": "./dist/icons.cjs"
+      }
+    },
+    "./icon-names": {
+      "import": {
+        "types": "./dist/icon-names.d.ts",
+        "default": "./dist/icon-names.js"
+      },
+      "require": {
+        "types": "./dist/icon-names.d.cts",
+        "default": "./dist/icon-names.cjs"
+      }
+    }
   },
   "files": [
     "dist",
-    "src",
+    "src/styles.css",
     "README.md"
   ],
   "publishConfig": {
@@ -45,11 +109,15 @@
   "scripts": {
     "dev": "storybook dev -p 6006",
     "build-storybook": "storybook build",
+    "transit": "yarn build",
     "build": "yarn build:js && yarn build:css",
     "build:js": "tsup",
     "build:css": "tailwindcss --postcss -c tailwind.config.js -i src/styles.css -o dist/styles.css --minify",
+    "build:check": "attw --pack . --exclude-entrypoints ./styles ./styles/compiled",
+    "prepublishOnly": "yarn build && yarn build:check",
     "test": "vitest run --passWithNoTests --reporter=dot",
     "test:stories": "vitest run --config vitest.storybook.config.ts",
+    "test:stories:coverage": "vitest run --config vitest.storybook.config.ts --coverage",
     "lint": "yarn lint:format && yarn lint:oxlint",
     "lint:fix": "oxlint --fix . && oxfmt",
     "knip:check": "yarn --cwd ../.. exec knip --workspace packages/design",
@@ -62,6 +130,7 @@
     "node": "24.x"
   },
   "devDependencies": {
+    "@arethetypeswrong/cli": "^0.18.2",
     "@keboola/oxlint-config": "workspace:^",
     "@keboola/postcss-config": "workspace:^",
     "@keboola/tsconfig": "workspace:^",
@@ -75,17 +144,18 @@
     "@types/react": "^19.2.15",
     "@vitejs/plugin-react": "^6.0.0",
     "@vitest/browser": "4.1.8",
-    "@vitest/browser-playwright": "4.1.2",
+    "@vitest/browser-playwright": "4.1.8",
+    "@vitest/coverage-istanbul": "4.1.8",
     "eslint-plugin-storybook": "^10.3.5",
     "oxfmt": "^0.44.0",
     "oxlint": "^1.56.0",
-    "playwright": "1.59.1",
+    "playwright": "1.60.0",
     "storybook": "^10.2.19",
     "tailwindcss": "^3.4.17",
     "tsup": "^8.5.1",
     "typescript": "^6.0.3",
-    "vite": "^8.0.8",
-    "vitest": "^4.1.2"
+    "vite": "^8.0.16",
+    "vitest": "^4.1.8"
   },
   "dependencies": {
     "@awesome.me/kit-be8bcf7e5e": "1.0.223",
@@ -144,6 +214,7 @@
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
     "diff": "^9.0.0",
+    "input-otp": "^1.4.2",
     "lexical": "^0.42.0",
     "lucide-react": "^1.17.0",
     "mermaid": "^11.15.0",

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

@@ -1,38 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-
-import { AnswerSummary } from './AnswerSummary';
-
-export default {
-  title: 'AI Kit/AnswerSummary',
-  component: AnswerSummary,
-} satisfies Meta<typeof AnswerSummary>;
-
-type Story = StoryObj<typeof AnswerSummary>;
-
-export const Success: Story = {
-  args: {
-    variant: 'success',
-    items: [
-      { question: 'Which library should we use?', answer: 'date-fns' },
-      { question: 'What features?', answer: 'parsing, formatting' },
-      { question: 'Any custom?', answer: '' },
-    ],
-  },
-};
-
-export const Dismissed: Story = {
-  args: {
-    variant: 'dismissed',
-    items: [
-      { question: 'Which library should we use?', answer: 'User dismissed' },
-      { question: 'What features?', answer: 'User dismissed' },
-    ],
-  },
-};
-
-export const Failed: Story = {
-  args: {
-    variant: 'dismissed',
-    items: [{ question: 'Which library should we use?', answer: 'Tool failed' }],
-  },
-};

package/src/blocks/AIKit/AnswerSummary.tsx

@@ -1,63 +0,0 @@
-import { useState } from 'react';
-
-import { CollapsibleStepHeader } from './CollapsibleStepHeader';
-import { InlineStepDetail } from './InlineStepDetail';
-import { InlineStepLabel } from './InlineStepLabel';
-
-type AnswerItem = {
-  question: string;
-  answer?: string;
-};
-
-type Variant = 'success' | 'dismissed';
-
-type Props = {
-  items: readonly AnswerItem[];
-  variant?: Variant;
-  noAnswerLabel?: string;
-};
-
-const SECTION_LABELS: Record<Variant, string> = {
-  success: 'Answered questions',
-  dismissed: 'Dismissed questions',
-};
-
-export const AnswerSummary = ({
-  items,
-  variant = 'success',
-  noAnswerLabel = 'No answer',
-}: Props) => {
-  const [isExpanded, setIsExpanded] = useState(false);
-  const toggle = () => setIsExpanded((prev) => !prev);
-  const count = items.length;
-
-  return (
-    <section className="tw-mt-4 tw-flex tw-flex-col tw-gap-4" aria-label={SECTION_LABELS[variant]}>
-      <CollapsibleStepHeader
-        isExpanded={isExpanded}
-        onToggle={toggle}
-        variant={variant}
-        label={`${count} question${count !== 1 ? 's' : ''}`}
-      />
-
-      {isExpanded && (
-        <div className="tw-flex tw-flex-col tw-gap-4 tw-pl-5">
-          {items.map(({ question, answer }, index) => (
-            <div key={`${index}-${question}`} className="tw-flex tw-flex-col tw-gap-1">
-              <InlineStepLabel variant={variant}>{question}</InlineStepLabel>
-              <InlineStepDetail>
-                {answer && answer.length > 0 ? answer : noAnswerLabel}
-              </InlineStepDetail>
-            </div>
-          ))}
-        </div>
-      )}
-    </section>
-  );
-};
-
-export type {
-  AnswerItem as AnswerSummaryItem,
-  Props as AnswerSummaryProps,
-  Variant as AnswerSummaryVariant,
-};

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>
-  ),
-};