@keboola/design 2.0.1 → 2.1.0

package/src/components/InputGroup/InputGroupText.tsx

@@ -1,21 +0,0 @@
-import type { ComponentProps } from 'react';
-
-import { cn } from '../../utils';
-
-type Props = ComponentProps<'span'>;
-
-export const InputGroupText = ({ className, ...props }: Props) => (
-  <span
-    className={cn(
-      'tw-flex',
-      'tw-items-center',
-      'tw-gap-2',
-      'tw-text-sm',
-      'tw-text-muted-foreground',
-      '[&_svg]:tw-pointer-events-none',
-      '[&_svg:not([class*="tw-size-"])]:tw-size-4',
-      className,
-    )}
-    {...props}
-  />
-);

package/src/components/InputGroup/InputGroupTextArea.tsx

@@ -1,78 +0,0 @@
-import type { ChangeEventHandler, ComponentProps, ElementRef, FocusEventHandler, Ref } from 'react';
-import TextareaAutosize from 'react-textarea-autosize';
-
-import { cn } from '../../utils';
-
-type TextareaNativeProps = Omit<
-  ComponentProps<typeof TextareaAutosize>,
-  'value' | 'defaultValue' | 'rows' | 'maxRows'
->;
-
-type Props = TextareaNativeProps & {
-  value?: string | null;
-  defaultValue?: string | null;
-  onValueChange?: (value: string) => void;
-  onValueBlur?: (value: string) => void;
-  maxRows?: number | 'unlimited';
-  disableResize?: boolean;
-};
-
-export const InputGroupTextArea = ({
-  ref,
-  className,
-  onChange,
-  onValueChange,
-  value,
-  defaultValue,
-  onBlur,
-  onValueBlur,
-  disableResize = false,
-  minRows = 1,
-  maxRows = 4,
-  ...props
-}: Props & { ref?: Ref<ElementRef<'textarea'>> }) => {
-  const handleChange: ChangeEventHandler<HTMLTextAreaElement> = (event) => {
-    onValueChange?.(event.target.value);
-    onChange?.(event);
-  };
-
-  const handleBlur: FocusEventHandler<HTMLTextAreaElement> = (event) => {
-    onValueBlur?.(event.target.value);
-    onBlur?.(event);
-  };
-
-  return (
-    <TextareaAutosize
-      {...props}
-      ref={ref}
-      value={value ?? undefined}
-      defaultValue={defaultValue ?? undefined}
-      onChange={handleChange}
-      onBlur={handleBlur}
-      minRows={minRows}
-      maxRows={maxRows === 'unlimited' ? undefined : maxRows}
-      className={cn(
-        'tw-w-full',
-        'tw-bg-transparent',
-        'tw-outline-none',
-        'tw-px-4',
-
-        // font
-        'tw-font-sans',
-        'tw-text-sm',
-
-        // placeholder
-        'placeholder:tw-text-neutral-400',
-        'placeholder:tw-font-normal',
-
-        // disabled
-        'disabled:tw-cursor-not-allowed',
-        {
-          'tw-resize-none': disableResize,
-        },
-
-        className,
-      )}
-    />
-  );
-};

package/src/components/InputGroup/index.ts

@@ -1 +0,0 @@
-export { InputGroup } from './InputGroup';

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

@@ -1,82 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-
-import { Copy } from '../../icons';
-
-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: <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

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

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

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

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

package/src/components/Kbd/keyboardKeys.ts

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

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

@@ -1,53 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-
-import { Info } from '../../icons';
-import { FormGroup } from '../FormGroup';
-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 <Info className="tw-size-4 tw-text-neutral-400" />
-      </>
-    ),
-  },
-};

package/src/components/Label/Label.tsx

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

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

package/src/components/Link.stories.tsx

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

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

@@ -1,182 +0,0 @@
-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!')}
-        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,
-};
-
-const InlineDemo = () => {
-  // Two-state pattern (per the inline-editable-text pattern spec):
-  // `committed` is what's persisted; `draft` tracks in-progress edits.
-  // onSave commits draft → committed. onCancel (Esc) reverts draft ← committed.
-  const [committed, setCommitted] = useState(
-    'A multi-line description that overflows two lines so you can see the bottom fade in display state. Click to edit — it expands to full height. Press Esc to revert.',
-  );
-  const [draft, setDraft] = useState(committed);
-
-  return (
-    <div className="tw-max-w-prose tw-rounded tw-border tw-border-border tw-bg-background tw-p-6">
-      <p className="tw-mb-2 tw-text-sm tw-text-muted-foreground">
-        Click to edit. Blur or Cmd+Enter commits; Esc reverts. Committed:{' '}
-        <code className="tw-text-xs">{committed}</code>
-      </p>
-      <MarkdownEditor
-        compact
-        saveOnBlur
-        clampDisplay
-        value={draft}
-        onChange={setDraft}
-        onSave={() => setCommitted(draft)}
-        onCancel={() => setDraft(committed)}
-        placeholder="Add a description…"
-        className="tw-text-sm tw-leading-5 tw-text-foreground"
-      />
-    </div>
-  );
-};
-
-export const Inline: Story = {
-  render: InlineDemo,
-};
-
-const InlineTitleDemo = () => {
-  const [committed, setCommitted] = useState('Untitled page');
-  const [draft, setDraft] = useState(committed);
-
-  return (
-    <div className="tw-max-w-prose tw-rounded tw-border tw-border-border tw-bg-background tw-p-6">
-      <p className="tw-mb-2 tw-text-sm tw-text-muted-foreground">
-        Click the heading. Enter, blur, or Cmd+Enter commits; Esc reverts. Committed:{' '}
-        <code className="tw-text-xs">{committed}</code>
-      </p>
-      <MarkdownEditor
-        compact
-        singleLine
-        saveOnBlur
-        value={draft}
-        onChange={setDraft}
-        onSave={() => setCommitted(draft)}
-        onCancel={() => setDraft(committed)}
-        placeholder="Untitled"
-        className="tw-break-words tw-text-3xl tw-font-semibold tw-leading-9 tw-text-foreground"
-      />
-    </div>
-  );
-};
-
-export const InlineTitle: Story = {
-  render: InlineTitleDemo,
-};