@keboola/design 1.0.0

package/src/components/Kbd/Kbd.stories.tsx

@@ -0,0 +1,82 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { Icon } from '../Icon';
+
+import { Kbd } from './Kbd';
+import { keys } from './keyboardKeys';
+
+export default {
+  component: Kbd,
+  args: {
+    children: 'Ctrl',
+  },
+  argTypes: {
+    variant: {
+      control: 'radio',
+      options: ['default', 'primary'],
+      description: 'Visual style variant',
+    },
+  },
+} satisfies Meta<typeof Kbd>;
+
+type Story = StoryObj<typeof Kbd>;
+
+export const Default: Story = {};
+
+export const Primary: Story = {
+  args: {
+    variant: 'primary',
+  },
+  decorators: [
+    (Story) => (
+      <div className="tw-rounded tw-bg-neutral-800 tw-p-4">
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export const AsSymbol: Story = {
+  args: {
+    children: keys.enter.symbol,
+  },
+};
+
+export const AsIcon: Story = {
+  args: {
+    children: <Icon icon="copy" />,
+  },
+};
+
+export const Group: Story = {
+  render: (props) => (
+    <Kbd.Group>
+      <Kbd {...props}>{keys.mod.symbol}</Kbd>
+      <Kbd {...props}>{keys.option.symbol}</Kbd>
+      <Kbd {...props}>T</Kbd>
+    </Kbd.Group>
+  ),
+};
+
+export const WithAutomaticSeparator: Story = {
+  render: (props) => (
+    <Kbd.Group separator="+">
+      <Kbd {...props}>{keys.mod.symbol}</Kbd>
+      <Kbd {...props}>{keys.option.symbol}</Kbd>
+      <Kbd {...props}>T</Kbd>
+    </Kbd.Group>
+  ),
+};
+export const CustomSeparators: Story = {
+  render: (props) => (
+    <Kbd.Group>
+      <Kbd {...props}>{keys.mod.symbol}</Kbd>
+      <Kbd.Separator>+</Kbd.Separator>
+      <Kbd.Separator>(</Kbd.Separator>
+      <Kbd {...props}>{keys.option.symbol}</Kbd>
+      <Kbd.Separator>/</Kbd.Separator>
+      <Kbd {...props}>{keys.enter.symbol}</Kbd>
+      <Kbd.Separator>)</Kbd.Separator>
+    </Kbd.Group>
+  ),
+};

package/src/components/Kbd/Kbd.tsx

@@ -0,0 +1,17 @@
+import type { ComponentProps } from 'react';
+import type { VariantProps } from 'class-variance-authority';
+
+import { KbdGroup } from './KbdGroup';
+import { KbdSeparator } from './KbdSeparator';
+import { kbdVariants } from './styles';
+
+type Props = ComponentProps<'kbd'> & VariantProps<typeof kbdVariants>;
+
+export const Kbd = ({ children, className, variant, ...rest }: Props) => (
+  <kbd {...rest} className={kbdVariants({ className, variant })}>
+    {children}
+  </kbd>
+);
+
+Kbd.Group = KbdGroup;
+Kbd.Separator = KbdSeparator;

package/src/components/Kbd/KbdGroup.tsx

@@ -0,0 +1,35 @@
+import { Children, Fragment } from 'react';
+import type { ComponentProps, ElementRef, Ref } from 'react';
+
+import { cn } from '../../utils';
+
+import { KbdSeparator } from './KbdSeparator';
+
+type Props = { separator?: string } & ComponentProps<'kbd'>;
+
+export const KbdGroup = ({
+  ref,
+  className,
+  children,
+  separator,
+  ...props
+}: Props & { ref?: Ref<ElementRef<'kbd'>> }) => {
+  return (
+    <kbd
+      {...props}
+      ref={ref}
+      className={cn('tw-inline-flex', 'tw-items-center', 'tw-gap-1', className)}
+    >
+      {separator
+        ? // oxlint-disable-next-line react-x/no-children-to-array
+          Children.toArray(children).map((child, index) => (
+            // oxlint-disable-next-line
+            <Fragment key={index}>
+              {index > 0 && <KbdSeparator>{separator}</KbdSeparator>}
+              {child}
+            </Fragment>
+          ))
+        : children}
+    </kbd>
+  );
+};

package/src/components/Kbd/KbdSeparator.tsx

@@ -0,0 +1,9 @@
+import type { ComponentProps } from 'react';
+
+import { cn } from '../../utils';
+
+type Props = ComponentProps<'span'>;
+
+export const KbdSeparator = ({ className, ...props }: Props) => (
+  <span {...props} className={cn('tw-text-xs tw-text-muted-foreground', className)} />
+);

package/src/components/Kbd/index.ts

@@ -0,0 +1,3 @@
+export * from './Kbd';
+export * from './keyboardKeys';
+export * from './styles';

package/src/components/Kbd/keyboardKeys.ts

@@ -0,0 +1,40 @@
+import { isMac } from '../../utils';
+
+type KeyName = 'mod' | 'option' | 'shift' | 'enter';
+type KeyRepresentation = { symbol: string; text: string };
+
+type KeyDefinition = {
+  mac: KeyRepresentation;
+  windows: KeyRepresentation;
+};
+
+const KEY_DEFINITIONS: Record<KeyName, KeyDefinition> = {
+  mod: {
+    mac: { symbol: '⌘', text: 'Command' },
+    windows: { symbol: 'Ctrl', text: 'Ctrl' },
+  },
+  option: {
+    mac: { symbol: '⌥', text: 'Option' },
+    windows: { symbol: 'Alt', text: 'Alt' },
+  },
+  shift: {
+    mac: { symbol: '⇧', text: 'Shift' },
+    windows: { symbol: '⇧', text: 'Shift' },
+  },
+  enter: {
+    mac: { symbol: '⏎', text: 'Enter' },
+    windows: { symbol: '⏎', text: 'Enter' },
+  },
+};
+
+const createKeyboardKeys = () => {
+  const keysObj: Record<KeyName, KeyRepresentation> = {} as Record<KeyName, KeyRepresentation>;
+
+  for (const keyName of Object.keys(KEY_DEFINITIONS) as KeyName[]) {
+    keysObj[keyName] = KEY_DEFINITIONS[keyName][isMac ? 'mac' : 'windows'];
+  }
+
+  return keysObj;
+};
+
+export const keys = createKeyboardKeys();

package/src/components/Kbd/styles.ts

@@ -0,0 +1,39 @@
+import { cva } from 'class-variance-authority';
+
+export const kbdVariants = cva(
+  [
+    'tailwindcss-preflight',
+    // style
+    'tw-pointer-events-none',
+    'tw-w-fit',
+    'tw-h-5',
+    'tw-min-w-5',
+
+    // layout
+    'tw-inline-flex',
+    'tw-items-center',
+    'tw-justify-center',
+    'tw-gap-1',
+    'tw-shrink-0',
+
+    // spacing
+    'tw-px-1',
+    '[&_svg:not([class*="size-"])]:tw-size-2.5',
+
+    'tw-text-xs',
+    'tw-font-medium',
+
+    'tw-rounded',
+  ],
+  {
+    defaultVariants: {
+      variant: 'default',
+    },
+    variants: {
+      variant: {
+        default: 'tw-bg-muted tw-text-muted-foreground',
+        primary: 'tw-bg-white/20 tw-text-white',
+      },
+    },
+  },
+);

package/src/components/Label/Label.stories.tsx

@@ -0,0 +1,53 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { FormGroup } from '../FormGroup';
+import { Icon } from '../Icon';
+import { TextInput } from '../Input';
+
+import { Label } from './Label';
+
+type Story = StoryObj<typeof Label>;
+
+export default {
+  component: Label,
+  args: {
+    children: 'Label',
+    htmlFor: 'text',
+  },
+} satisfies Meta<typeof Label>;
+
+export const Default: Story = {};
+
+export const WithOptional: Story = {
+  render: ({ children, ...rest }) => {
+    return (
+      <Label {...rest}>
+        {children} <Label.Optional />
+      </Label>
+    );
+  },
+};
+
+export const WithInput: Story = {
+  render: ({ children, ...rest }) => {
+    return (
+      <FormGroup>
+        <Label {...rest} htmlFor="example-with-input">
+          {children}
+        </Label>
+        <TextInput id="example-with-input" />
+      </FormGroup>
+    );
+  },
+};
+
+export const WithIcon: Story = {
+  args: {
+    className: 'tw-flex tw-items-center tw-gap-1',
+    children: (
+      <>
+        Label <Icon className="tw-text-neutral-400" icon="info-circle" />
+      </>
+    ),
+  },
+};

package/src/components/Label/Label.tsx

@@ -0,0 +1,31 @@
+import type { LabelProps as RLabelProps } from '@radix-ui/react-label';
+import * as RLabel from '@radix-ui/react-label';
+
+import { cn } from '../../utils';
+
+type LabelProps = { id?: string | number; htmlFor?: string | number } & Omit<
+  RLabelProps,
+  'id' | 'htmlFor'
+>;
+
+const Optional = ({ className }: { className?: string }) => (
+  <span className={cn('tw-text-neutral-400', className)}>(optional)</span>
+);
+
+export const Label = ({ className, children, id, htmlFor, ...rest }: LabelProps) => {
+  return (
+    <RLabel.Root
+      {...rest}
+      id={id?.toString()}
+      htmlFor={htmlFor?.toString()}
+      className={cn(
+        'tw-m-0 tw-text-neutral-800 tw-font-normal peer-disabled:tw-opacity-50',
+        className,
+      )}
+    >
+      {children}
+    </RLabel.Root>
+  );
+};
+
+Label.Optional = Optional;

package/src/components/Label/index.ts

@@ -0,0 +1 @@
+export * from './Label';

package/src/components/Link.stories.tsx

@@ -0,0 +1,19 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { Link } from './Link';
+
+const meta: Meta<typeof Link> = {
+  component: Link,
+};
+
+export default meta;
+type Story = StoryObj<typeof Link>;
+
+const commonArgs = {
+  children: 'This is a link',
+  href: '#',
+} as const;
+
+export const Generic: Story = {
+  args: { ...commonArgs },
+};

package/src/components/Link.tsx

@@ -0,0 +1,37 @@
+import type { ComponentProps, ElementRef, MouseEventHandler, Ref } from 'react';
+
+import { cn } from '../utils';
+
+type Props = ComponentProps<'a'>;
+
+export const Link = ({
+  ref,
+  children,
+  target = '_blank',
+  rel = 'noopener noreferrer',
+  onClick,
+  className,
+  ...rest
+}: Props & { ref?: Ref<ElementRef<'a'>> }) => {
+  const handleOnClick: MouseEventHandler<HTMLAnchorElement> = (event) => {
+    event.stopPropagation();
+    onClick?.(event);
+  };
+
+  return (
+    // oxlint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
+    <a
+      {...rest}
+      ref={ref}
+      target={target}
+      rel={rel}
+      onClick={handleOnClick}
+      className={cn(
+        'tw-text-secondary-500 tw-underline hover:tw-text-secondary-600 hover:tw-no-underline',
+        className,
+      )}
+    >
+      {children}
+    </a>
+  );
+};

package/src/components/MarkdownEditor/MarkdownEditor.stories.tsx

@@ -0,0 +1,120 @@
+import { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { withTooltipProvider } from '../../utils/decorators';
+
+import { MarkdownEditor } from './MarkdownEditor';
+
+const SAMPLE_MARKDOWN = `# Description
+
+This is a **bold** and *italic* text with ~~strikethrough~~ and \`inline code\`.
+
+## Features
+
+- Markdown shortcuts (type \`## \` for heading, \`**\` for bold)
+- Keyboard shortcuts: **Cmd+Enter** to save, **Escape** to cancel
+- Image paste/drop support
+- Checklist support (type \`[ ] \` for a checkbox)
+
+### Code block
+
+\`\`\`javascript
+const greeting = 'Hello, world!';
+console.log(greeting);
+\`\`\`
+
+### Links and images
+
+Visit [Lexical](https://lexical.dev/) for more info.
+
+![placeholder](https://placehold.co/400x200/e2e8f0/64748b?text=Sample+Image)
+
+> Blockquotes are also supported.
+
+---
+
+1. Ordered
+2. List
+3. Items
+`;
+
+const mockImageUpload = async (file: File): Promise<{ url: string }> => {
+  await new Promise((resolve) => setTimeout(resolve, 1000));
+  return { url: URL.createObjectURL(file) };
+};
+
+export default {
+  component: MarkdownEditor,
+  decorators: [withTooltipProvider],
+  args: {
+    value: '',
+    readOnly: false,
+    disabled: false,
+    autoFocus: false,
+    showToolbar: false,
+    placeholder: 'Enter a description…',
+  },
+  argTypes: {
+    value: { control: 'text' },
+    readOnly: { control: 'boolean' },
+    disabled: { control: 'boolean' },
+    autoFocus: { control: 'boolean' },
+    showToolbar: { control: 'boolean' },
+  },
+} as Meta<typeof MarkdownEditor>;
+
+type Story = StoryObj<typeof MarkdownEditor>;
+
+export const Empty: Story = {};
+
+export const WithContent: Story = {
+  args: {
+    value: SAMPLE_MARKDOWN,
+  },
+};
+
+export const WithToolbar: Story = {
+  args: {
+    value: SAMPLE_MARKDOWN,
+    showToolbar: true,
+    onImageUpload: mockImageUpload,
+  },
+};
+
+export const ReadOnly: Story = {
+  args: {
+    value: SAMPLE_MARKDOWN,
+    readOnly: true,
+  },
+};
+
+const ControlledDemo = () => {
+  const [value, setValue] = useState(SAMPLE_MARKDOWN);
+
+  return (
+    <div className="tw-flex tw-flex-col tw-gap-4">
+      <MarkdownEditor
+        value={value}
+        onChange={setValue}
+        placeholder="Type something…"
+        onSave={() => alert('Saved!')}
+        onCancel={() => alert('Cancelled!')}
+        onImageUpload={mockImageUpload}
+        showToolbar
+        autoFocus
+      />
+      <details>
+        <summary className="tw-cursor-pointer tw-text-sm tw-text-neutral-500">
+          Raw markdown output
+        </summary>
+        <pre className="tw-mt-2 tw-max-h-[300px] tw-overflow-auto tw-rounded tw-bg-neutral-100 tw-p-3 tw-text-xs">
+          {value}
+        </pre>
+      </details>
+    </div>
+  );
+};
+
+export const Controlled: Story = {
+  render: ControlledDemo,
+};

package/src/components/MarkdownEditor/MarkdownEditor.test.ts

@@ -0,0 +1,171 @@
+import { CodeNode } from '@lexical/code';
+import { LinkNode } from '@lexical/link';
+import { ListItemNode, ListNode } from '@lexical/list';
+import { $convertFromMarkdownString, $convertToMarkdownString } from '@lexical/markdown';
+import { HorizontalRuleNode } from '@lexical/react/LexicalHorizontalRuleNode';
+import { HeadingNode, QuoteNode } from '@lexical/rich-text';
+import { createEditor } from 'lexical';
+import { describe, expect, test } from 'vitest';
+
+import { ImageNode } from './nodes/ImageNode';
+import { MermaidNode } from './nodes/MermaidNode';
+import { CUSTOM_TRANSFORMERS, postprocessMarkdown, preprocessMarkdown } from './transformers';
+
+const EDITOR_NODES = [
+  ImageNode,
+  MermaidNode,
+  HeadingNode,
+  QuoteNode,
+  ListNode,
+  ListItemNode,
+  CodeNode,
+  LinkNode,
+  HorizontalRuleNode,
+];
+
+const roundTrip = (markdown: string): string => {
+  const editor = createEditor({
+    nodes: EDITOR_NODES,
+    onError: (e) => {
+      throw e;
+    },
+  });
+
+  const container = document.createElement('div');
+  editor.setRootElement(container);
+
+  editor.update(
+    () => {
+      $convertFromMarkdownString(preprocessMarkdown(markdown), CUSTOM_TRANSFORMERS);
+    },
+    { discrete: true },
+  );
+
+  let result = '';
+  editor.getEditorState().read(() => {
+    result = postprocessMarkdown($convertToMarkdownString(CUSTOM_TRANSFORMERS));
+  });
+  return result;
+};
+
+describe('Markdown round-trip', () => {
+  test('empty string', () => {
+    expect(roundTrip('')).toBe('');
+  });
+
+  test('single paragraph', () => {
+    expect(roundTrip('Hello world')).toBe('Hello world');
+  });
+
+  test('multiple paragraphs', () => {
+    const md = 'First paragraph\n\nSecond paragraph';
+    expect(roundTrip(md)).toBe(md);
+  });
+
+  test('headings', () => {
+    const md = '# Heading 1\n\n## Heading 2\n\n### Heading 3';
+    expect(roundTrip(md)).toBe(md);
+  });
+
+  test('bold and italic', () => {
+    const md = 'Some **bold** and *italic* text';
+    expect(roundTrip(md)).toBe(md);
+  });
+
+  test('strikethrough', () => {
+    const md = 'Some ~~deleted~~ text';
+    expect(roundTrip(md)).toBe(md);
+  });
+
+  test('inline code', () => {
+    const md = 'Use `console.log()` for debugging';
+    expect(roundTrip(md)).toBe(md);
+  });
+
+  test('unordered list', () => {
+    const md = '- Item one\n- Item two\n- Item three';
+    expect(roundTrip(md)).toBe(md);
+  });
+
+  test('ordered list', () => {
+    const md = '1. First\n2. Second\n3. Third';
+    expect(roundTrip(md)).toBe(md);
+  });
+
+  test('code block with language', () => {
+    const md = '```javascript\nconst x = 1;\nconsole.log(x);\n```';
+    expect(roundTrip(md)).toBe(md);
+  });
+
+  test('code block (snowflake)', () => {
+    const md = '```snowflake\nSELECT * FROM table;\n```';
+    expect(roundTrip(md)).toBe(md);
+  });
+
+  test('link', () => {
+    const md = 'Visit [Google](https://google.com) for search';
+    expect(roundTrip(md)).toBe(md);
+  });
+
+  test('image with regular URL', () => {
+    const md = '![screenshot](https://example.com/img.png)';
+    expect(roundTrip(md)).toBe(md);
+  });
+
+  test('image with kbc-file URL', () => {
+    const md = '![my image](https://kbc-file/12345/image.png)';
+    expect(roundTrip(md)).toBe(md);
+  });
+
+  test('blockquote', () => {
+    const md = '> This is a quote';
+    expect(roundTrip(md)).toBe(md);
+  });
+
+  test('horizontal rule', () => {
+    const md = 'Above\n\n---\n\nBelow';
+    expect(roundTrip(md)).toBe(md);
+  });
+
+  test('GFM table (preserved via code fence)', () => {
+    const md = ['| Header 1 | Header 2 |', '| --- | --- |', '| Cell 1 | Cell 2 |'].join('\n');
+    expect(roundTrip(md)).toBe(md);
+  });
+
+  test('mermaid diagram', () => {
+    const md = '```mermaid\ngraph TD\n    A --> B\n```';
+    expect(roundTrip(md)).toBe(md);
+  });
+});
+
+describe('Table preprocessing', () => {
+  test('wraps tables in code fences', () => {
+    const input = '| A | B |\n| --- | --- |\n| 1 | 2 |';
+    const result = preprocessMarkdown(input);
+    expect(result).toContain('```__kbc_table__');
+    expect(result).toContain('| A | B |');
+  });
+
+  test('unwraps code-fenced tables', () => {
+    const input = '```__kbc_table__\n| A | B |\n| --- | --- |\n| 1 | 2 |\n```';
+    expect(postprocessMarkdown(input)).toBe('| A | B |\n| --- | --- |\n| 1 | 2 |');
+  });
+
+  test('does not wrap single pipe line', () => {
+    const input = '| just a pipe |';
+    expect(preprocessMarkdown(input)).toBe(input);
+  });
+
+  test('handles table surrounded by paragraphs', () => {
+    const input = 'Before\n\n| A | B |\n| --- | --- |\n| 1 | 2 |\n\nAfter';
+    const processed = preprocessMarkdown(input);
+    expect(processed).toContain('```__kbc_table__');
+    expect(processed).toContain('Before');
+    expect(processed).toContain('After');
+  });
+
+  test('does not wrap pipe lines inside fenced code blocks', () => {
+    const input = '```\n| A | B |\n| --- | --- |\n| 1 | 2 |\n```';
+    expect(preprocessMarkdown(input)).toBe(input);
+  });
+});