@keboola/design 2.0.0 → 2.1.0

package/src/components/Checkbox/styles.ts

@@ -1,77 +0,0 @@
-import { cva } from 'class-variance-authority';
-
-export const rootVariants = cva(
-  [
-    // reset
-    'tailwindcss-preflight',
-
-    // position
-    'tw-flex',
-    'tw-items-center',
-    'tw-justify-center',
-
-    'tw-peer',
-    'tw-size-4',
-    'tw-shrink-0',
-    'tw-cursor-pointer',
-
-    // border
-    'tw-border',
-    'tw-border-solid',
-
-    // disabled
-    'disabled:tw-opacity-50',
-    'disabled:tw-cursor-not-allowed',
-  ],
-  {
-    defaultVariants: {
-      variant: 'default',
-    },
-    variants: {
-      variant: {
-        default: [
-          'tw-rounded',
-          'tw-border-neutral-200',
-
-          'data-[state=checked]:tw-bg-secondary-500',
-          'data-[state=checked]:tw-border-secondary-500',
-
-          'data-[state=indeterminate]:tw-bg-white',
-          'data-[state=indeterminate]:tw-border-neutral-200',
-        ],
-        argo: [
-          'tw-rounded',
-          'tw-border-input',
-          'tw-transition-colors',
-
-          'data-[state=checked]:tw-bg-primary',
-          'data-[state=checked]:tw-border-primary',
-
-          'data-[state=indeterminate]:tw-bg-primary',
-          'data-[state=indeterminate]:tw-border-primary',
-
-          // focus
-          'focus-visible:tw-outline-none',
-          'focus-visible:tw-border-primary',
-          'focus-visible:tw-ring-2',
-          'focus-visible:tw-ring-primary/50',
-        ],
-      },
-    },
-  },
-);
-
-export const indicatorVariants = cva(['tw-group', 'tw-flex', 'tw-items-center'], {
-  defaultVariants: {
-    variant: 'default',
-  },
-  variants: {
-    variant: {
-      default: [
-        'data-[state=checked]:tw-text-white',
-        'data-[state=indeterminate]:tw-text-neutral-200',
-      ],
-      argo: ['tw-text-primary-foreground'],
-    },
-  },
-});

package/src/components/Clipboard/Clipboard.stories.tsx

@@ -1,44 +0,0 @@
-import type { ComponentProps } from 'react';
-import type { Meta, StoryObj } from '@storybook/react-vite';
-
-import { withTooltipProvider } from '../../utils';
-
-import { Clipboard } from './Clipboard';
-
-type ClipboardProps = ComponentProps<typeof Clipboard>;
-type TooltipVariant = NonNullable<ClipboardProps['tooltipVariant']>;
-const variants: TooltipVariant[] = ['action', 'explanatory'];
-
-export default {
-  component: Clipboard,
-  decorators: [withTooltipProvider],
-  args: {
-    tooltipVariant: 'action',
-    text: 'Text written to clipboard',
-  },
-  argTypes: {
-    tooltipVariant: {
-      type: { name: 'enum', value: variants },
-    },
-  },
-} satisfies Meta<typeof Clipboard>;
-
-type Story = StoryObj<typeof Clipboard>;
-
-/**
- * Clipboard, by default, renders a button with the label used in the clipboard text.
- */
-export const Default: Story = {};
-
-export const OnCustomButton: Story = {
-  render: (props) => (
-    <Clipboard {...props}>
-      <button
-        type="button"
-        className="tw-rounded-md tw-bg-neutral-100 tw-p-2 hover:tw-bg-neutral-150"
-      >
-        Copy
-      </button>
-    </Clipboard>
-  ),
-};

package/src/components/Clipboard/Clipboard.tsx

@@ -1,89 +0,0 @@
-import { useState } from 'react';
-import type { ComponentProps, ElementRef, MouseEventHandler, Ref } from 'react';
-
-import type { TooltipProps } from '@keboola/design';
-import { cn, Tooltip } from '@keboola/design';
-
-import { copyToClipboard } from '../../utils';
-
-type Props = {
-  tooltip?: TooltipProps['tooltip'];
-  tooltipPlacement?: TooltipProps['placement'];
-  tooltipVariant?: TooltipProps['variant'];
-  asChild?: TooltipProps['triggerAsChild'];
-  text?: string | (() => string);
-} & ComponentProps<'button'>;
-
-export const Clipboard = ({
-  ref,
-  text: textProp,
-  children,
-  tooltip = 'Copy to Clipboard',
-  tooltipPlacement = 'top',
-  tooltipVariant: tooltipVariantProp = 'action',
-  asChild = false,
-  onClick,
-  className,
-  ...restButtonProps
-}: Props & { ref?: Ref<ElementRef<'button'>> }) => {
-  const [isTooltipOpen, setIsTooltipOpen] = useState(false);
-  const [state, setState] = useState<'ready' | 'copied' | 'error'>('ready');
-  const text = typeof textProp === 'function' ? textProp() : textProp;
-
-  const copy = async (text: string) => {
-    try {
-      // For the clipboard feature to work reliably, the window must be in focus for security reasons.
-      // However, the button can be clicked without the window being focused.
-      if (!document.hasFocus()) window.focus();
-
-      await copyToClipboard(text);
-      setState('copied');
-    } catch {
-      setState('error');
-    }
-  };
-
-  const handleOnClick: MouseEventHandler<HTMLButtonElement> = (event) => {
-    if (text && state === 'ready') void copy(text);
-    onClick?.(event);
-  };
-
-  const handleOnOpenChange: ComponentProps<typeof Tooltip.Root>['onOpenChange'] = (open) => {
-    // Reset when the tooltip closes, allowing the user to leave the copy button.
-    if (!open && state !== 'ready') setState('ready');
-    setIsTooltipOpen(open);
-  };
-
-  const tooltipContent = (() => {
-    if (!text) return 'Nothing to copy';
-    if (state === 'error') return 'Failed to copy';
-    if (state === 'copied') return 'Copied to Clipboard';
-    return tooltip;
-  })();
-
-  const tooltipVariant: TooltipProps['variant'] =
-    state === 'ready' && !!text ? tooltipVariantProp : 'action';
-
-  return (
-    <Tooltip.Root open={isTooltipOpen} onOpenChange={handleOnOpenChange}>
-      <Tooltip.Trigger
-        {...restButtonProps}
-        asChild={asChild}
-        keepOpenOnClick
-        onClick={handleOnClick}
-        className={cn('tw-cursor-pointer', className)}
-        ref={ref}
-      >
-        {children ?? text}
-      </Tooltip.Trigger>
-
-      <Tooltip.Content
-        keepOpenOnPointerDownOutside
-        placement={tooltipPlacement}
-        variant={tooltipVariant}
-      >
-        {tooltipContent}
-      </Tooltip.Content>
-    </Tooltip.Root>
-  );
-};

package/src/components/Clipboard/index.ts

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

package/src/components/CodeEditor/ButtonToolbar.tsx

@@ -1,14 +0,0 @@
-import type { ReactNode } from 'react';
-
-import { ClipboardButton } from '../../blocks/ClipboardButton';
-
-export const ButtonToolbar = ({ value, children }: { value?: string; children?: ReactNode }) => {
-  if (!value && !children) return null;
-
-  return (
-    <div className="tw-pointer-events-auto tw-ml-auto tw-mr-4 tw-flex tw-w-fit tw-gap-1 tw-overflow-visible tw-rounded-lg tw-border tw-border-solid tw-border-neutral-150 !tw-bg-white tw-p-[3px] tw-shadow">
-      {!!value && <ClipboardButton size="icon-sm" variant="invisible" text={value} />}
-      {children}
-    </div>
-  );
-};

package/src/components/CodeEditor/CodeEditor.tsx

@@ -1,155 +0,0 @@
-import { useMemo } from 'react';
-import type { KeyboardEvent, ReactNode } from 'react';
-import { autocompletion, completeAnyWord } from '@codemirror/autocomplete';
-import { jsonParseLinter } from '@codemirror/lang-json';
-import { linter } from '@codemirror/lint';
-import { unifiedMergeView } from '@codemirror/merge';
-import { EditorView, keymap, placeholder as cmPlaceholder } from '@codemirror/view';
-import CodeMirror, { EditorState, type Extension } from '@uiw/react-codemirror';
-
-import { keyCodes } from '../../constants/keyCodes';
-import { cn } from '../../utils';
-import { HelpBlock } from '../HelpBlock';
-
-import { ButtonToolbar } from './ButtonToolbar';
-import type { LANGUAGE_MODE } from './helpers';
-import { baseThemeStyles, BASIS_SETUP, customTheme, getLanguageMode } from './helpers';
-import { ToggleComponentHelp } from './ToggleComponentHelp';
-
-type Props = {
-  value: string;
-  previousValue?: string;
-  mode?: LANGUAGE_MODE;
-  placeholder?: string;
-  readOnly?: boolean;
-  autocompletions?: string[];
-  extraKeys?: Record<string, () => void>;
-  withToggleCommentHint?: boolean;
-  withAutofocus?: boolean;
-  withLineNumbers?: boolean;
-  withLineWrapping?: boolean;
-  withCollapseUnchanged?: boolean;
-  withCopyButton?: boolean;
-  completeAny?: boolean;
-  help?: ReactNode;
-  helpPostfix?: ReactNode;
-  renderAdditionalButtons?: (value?: string) => ReactNode;
-  className?: string;
-} & (
-  | { readOnly: true; onChange?: never }
-  | { readOnly?: false; onChange: (value: string) => void }
-);
-
-const emptyArray: string[] = [];
-const emptyObject = {};
-
-export const CodeEditor = ({
-  value,
-  previousValue,
-  onChange,
-  mode = 'application/json',
-  placeholder = '',
-  readOnly = false,
-  autocompletions = emptyArray,
-  extraKeys = emptyObject,
-  withToggleCommentHint = false,
-  withAutofocus = false,
-  withLineNumbers = true,
-  withLineWrapping = true,
-  withCollapseUnchanged = false,
-  withCopyButton = true,
-  completeAny = false,
-  help = null,
-  helpPostfix = null,
-  renderAdditionalButtons,
-  className,
-}: Props) => {
-  const commonExtensions: Extension[] = useMemo(() => {
-    return [
-      getLanguageMode(mode),
-      mode === 'application/json' && linter(jsonParseLinter()),
-      withLineWrapping ? EditorView.lineWrapping : [],
-      EditorState.languageData.of(() => [
-        { autocomplete: completeAny ? completeAnyWord : autocompletions },
-      ]),
-      keymap.of(
-        Object.entries(extraKeys).map(([key, run]) => ({
-          key,
-          run: () => {
-            if (typeof run === 'string') return run;
-
-            run();
-            return true;
-          },
-        })),
-      ),
-      autocompletion({ activateOnTyping: completeAny }),
-      EditorView.theme(baseThemeStyles),
-    ].filter(Boolean) as Extension[];
-  }, [autocompletions, completeAny, extraKeys, mode, withLineWrapping]);
-
-  const extensions = useMemo(() => {
-    return [
-      ...commonExtensions,
-      cmPlaceholder(placeholder),
-      EditorView.editable.of(!readOnly),
-      EditorState.readOnly.of(readOnly),
-      previousValue
-        ? unifiedMergeView({
-            original: previousValue,
-            mergeControls: false,
-            highlightChanges: false,
-            collapseUnchanged: withCollapseUnchanged ? {} : undefined,
-          })
-        : [],
-    ];
-  }, [commonExtensions, placeholder, readOnly, previousValue, withCollapseUnchanged]);
-
-  const config = useMemo(() => {
-    return {
-      ...BASIS_SETUP,
-      lineNumbers: withLineNumbers,
-    };
-  }, [withLineNumbers]);
-
-  return (
-    // oxlint-disable-next-line jsx-a11y/no-static-element-interactions
-    <div
-      className={cn(
-        'tw-relative tw-flex tw-min-h-0 tw-flex-col [&_.cm-mergeViewEditor]:tw-overflow-visible [&_.cm-mergeViewEditors]:tw-h-full [&_.cm-mergeView]:tw-h-full [&_>div]:tw-h-full [&_>div]:tw-overflow-auto [&_>div]:tw-bg-neutral-50',
-        { 'tw-mt-5': !!renderAdditionalButtons },
-        className,
-      )}
-      onKeyDown={(event: KeyboardEvent) => {
-        if (event.key === keyCodes.ESCAPE) {
-          event.stopPropagation();
-        }
-      }}
-    >
-      {(withCopyButton || renderAdditionalButtons) && (
-        <div className="tw-pointer-events-none tw-absolute tw-z-10 tw-flex !tw-h-auto tw-w-full tw-translate-y-[calc(-100%_+_8px)] !tw-overflow-visible !tw-bg-transparent">
-          <div className="tw-flex-1">
-            <ButtonToolbar value={withCopyButton ? value : undefined}>
-              {renderAdditionalButtons?.(value)}
-            </ButtonToolbar>
-          </div>
-        </div>
-      )}
-      <CodeMirror
-        theme={customTheme}
-        value={value}
-        onChange={onChange}
-        extensions={extensions}
-        autoFocus={withAutofocus}
-        basicSetup={config}
-      />
-      {!readOnly && (withToggleCommentHint || help || helpPostfix) && (
-        <HelpBlock className="tw-mt-2 tw-flex tw-flex-wrap tw-gap-1">
-          {help}
-          {withToggleCommentHint ? <ToggleComponentHelp /> : null}
-          {helpPostfix}
-        </HelpBlock>
-      )}
-    </div>
-  );
-};

package/src/components/CodeEditor/SqlEditor.stories.tsx

@@ -1,76 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { action } from 'storybook/actions';
-
-import { SqlEditor } from './SqlEditor';
-
-const meta: Meta<typeof SqlEditor> = {
-  component: SqlEditor,
-  args: {
-    value: '',
-    onChange: action('onChange'),
-    onSelectionChange: action('onSelectionChange'),
-    onCreateEditor: action('onCreateEditor'),
-    onBlurEditor: action('onBlurEditor'),
-    onFocusEditor: action('onFocusEditor'),
-    readOnly: false,
-    placeholder: 'Enter your SQL query here...',
-    autoFocus: false,
-    className: 'tw-min-h-52',
-  },
-  argTypes: {
-    value: { control: 'text' },
-    placeholder: { control: 'text' },
-    readOnly: { control: 'boolean' },
-    autoFocus: { control: 'boolean' },
-    className: { control: 'text' },
-    defaultDatabase: { control: 'text' },
-    defaultSchema: { control: 'text' },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof SqlEditor>;
-
-const sampleSqlQuery = `SELECT 
-  customer_id,
-  customer_name,
-  order_date,
-  total_amount
-FROM customers c
-JOIN orders o ON c.id = o.customer_id
-WHERE order_date >= '2024-01-01'
-  AND total_amount > 100
-ORDER BY order_date DESC
-LIMIT 50;`;
-
-export const Default: Story = {
-  args: {
-    value: sampleSqlQuery,
-    schema: {
-      MY_DATABASE: {
-        MY_SCHEMA: {
-          table1: ['col1', 'col2'],
-          table2: ['colA', 'colB'],
-        },
-      },
-    },
-    defaultDatabase: 'MY_DATABASE',
-    defaultSchema: 'MY_SCHEMA',
-  },
-  // description to add info about schema
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'This editor is pre-populated with a sample SQL query and includes a schema ("MY_DATABASE", "MY_SCHEMA", "table1"/"table2") for autocompletion. You can modify the query as needed.',
-      },
-    },
-  },
-};
-
-export const ReadOnly: Story = {
-  args: {
-    value: sampleSqlQuery,
-    readOnly: true,
-  },
-};

package/src/components/CodeEditor/SqlEditor.tsx

@@ -1,206 +0,0 @@
-import { useCallback, useEffect, useMemo, useRef } from 'react';
-import { defaultKeymap } from '@codemirror/commands';
-import type { SQLNamespace } from '@codemirror/lang-sql';
-import type {
-  EditorState,
-  KeyBinding,
-  ReactCodeMirrorRef,
-  ViewUpdate,
-} from '@uiw/react-codemirror';
-import CodeMirror, { EditorView, keymap } from '@uiw/react-codemirror';
-
-import { installExtensions, type SqlDialectName } from '@keboola/codemirror-lang-sql';
-import colors from '@keboola/tailwind-config/colors';
-
-import { baseThemeStyles, customTheme } from './helpers';
-import type { HighlightedLines } from './highlighting';
-import { highlightingExtension, updateHighlighting } from './highlighting';
-import { searchExtension, updateSearch } from './search';
-
-const BASIS_SETUP = {
-  drawSelection: false,
-  defaultKeymap: false,
-  completionKeymap: false,
-  searchKeymap: false,
-};
-
-const CUSTOM_KEYMAP: KeyBinding[] = [
-  {
-    key: 'Escape',
-    stopPropagation: true,
-    run: (view: EditorView) => {
-      view.contentDOM.blur();
-      return true;
-    },
-  },
-];
-
-const theme = {
-  ...baseThemeStyles,
-  '&.cm-editor': {
-    border: 'solid 1px transparent',
-    background: colors.white,
-    borderRadius: '8px',
-    paddingTop: '8px',
-    paddingBottom: '8px',
-  },
-  '&.cm-editor:has(.cm-content[contenteditable="true"]):hover': {
-    borderColor: colors.secondary[500],
-  },
-  '&.cm-editor:has(.cm-content[contenteditable="true"]):focus-within': {
-    borderColor: colors.secondary[500],
-    boxShadow: `0 0 0 4px ${colors.secondary[200]}`,
-  },
-  '&.cm-editor .cm-scroller': { overflowAnchor: 'none' },
-  '&.cm-editor :is(.cm-gutters,.cm-scroller)': { background: colors.white },
-  '&.cm-editor:has(.cm-content[contenteditable="false"])': { background: colors.neutral[100] },
-  '&.cm-editor:has(.cm-content[contenteditable="false"]) :is(.cm-scroller,.cm-gutters)': {
-    background: colors.neutral[100],
-  },
-};
-
-type Props = {
-  value: string;
-  onChange?: (value: string) => void;
-  onSelectionChange?: (text: string) => void;
-  onCreateEditor?: (view: EditorView, state: EditorState) => void;
-  onDestroyEditor?: () => void;
-  onBlurEditor?: (view: EditorView) => void;
-  onFocusEditor?: (view: EditorView) => void;
-  readOnly: boolean;
-  placeholder?: string;
-  searchQuery?: string;
-  searchMatchIndex?: number;
-  extraKeys?: KeyBinding[];
-  queryParser?: (sql: string) => Promise<string[]>;
-  autoFocus?: boolean;
-  lineNumbers?: boolean;
-  className?: string;
-  schema?: SQLNamespace;
-  variables?: string[];
-  defaultSchema?: string;
-  defaultDatabase?: string;
-  highlightLines?: HighlightedLines;
-  dialect?: SqlDialectName;
-};
-
-export const SqlEditor = ({
-  value,
-  onChange,
-  onSelectionChange,
-  onCreateEditor,
-  onDestroyEditor,
-  onBlurEditor,
-  onFocusEditor,
-  placeholder = '',
-  searchQuery = '',
-  searchMatchIndex,
-  readOnly = false,
-  extraKeys,
-  queryParser,
-  autoFocus = false,
-  lineNumbers = true,
-  className,
-  schema,
-  variables,
-  defaultDatabase,
-  defaultSchema,
-  highlightLines,
-  dialect,
-}: Props) => {
-  const editorRef = useRef<ReactCodeMirrorRef>(null);
-
-  const extensions = useMemo(() => {
-    const baseKeymap = [...defaultKeymap, ...CUSTOM_KEYMAP];
-
-    return [
-      EditorView.lineWrapping,
-      keymap.of(extraKeys ? [...extraKeys, ...baseKeymap] : baseKeymap),
-      ...installExtensions({ schema, defaultDatabase, defaultSchema, variables, dialect }),
-      searchExtension(),
-      highlightingExtension(queryParser),
-      EditorView.theme(theme),
-      onBlurEditor ? EditorView.domEventHandlers({ blur: (_, view) => onBlurEditor(view) }) : [],
-      onFocusEditor ? EditorView.domEventHandlers({ focus: (_, view) => onFocusEditor(view) }) : [],
-    ];
-  }, [
-    extraKeys,
-    queryParser,
-    schema,
-    defaultDatabase,
-    defaultSchema,
-    variables,
-    dialect,
-    onBlurEditor,
-    onFocusEditor,
-  ]);
-
-  const defaultSetup = useMemo(() => {
-    return { ...BASIS_SETUP, lineNumbers };
-  }, [lineNumbers]);
-
-  useEffect(() => {
-    if (editorRef.current?.view) {
-      updateHighlighting(editorRef.current.view, highlightLines);
-    }
-  }, [highlightLines]);
-
-  useEffect(() => {
-    if (editorRef.current?.view) {
-      updateSearch(editorRef.current.view, searchQuery, searchMatchIndex);
-    }
-  }, [searchQuery, searchMatchIndex]);
-
-  useEffect(() => {
-    if (!onDestroyEditor) return;
-
-    return () => {
-      onDestroyEditor();
-    };
-  }, [onDestroyEditor]);
-
-  const handleOnCreate = useCallback(
-    (view: EditorView, state: EditorState) => {
-      onCreateEditor?.(view, state);
-
-      if (highlightLines) {
-        updateHighlighting(view, highlightLines);
-      }
-
-      if (searchQuery) {
-        updateSearch(view, searchQuery, searchMatchIndex);
-      }
-    },
-    [onCreateEditor, highlightLines, searchQuery, searchMatchIndex],
-  );
-
-  const handleOnUpdate = useCallback(
-    (update: ViewUpdate) => {
-      if (update.selectionSet) {
-        const { main } = update.state.selection;
-        const text = update.state.sliceDoc(main.from, main.to);
-
-        onSelectionChange?.(text);
-      }
-    },
-    [onSelectionChange],
-  );
-
-  return (
-    <CodeMirror
-      ref={editorRef}
-      theme={customTheme}
-      extensions={extensions}
-      value={value}
-      onChange={onChange}
-      onUpdate={handleOnUpdate}
-      onCreateEditor={handleOnCreate}
-      autoFocus={autoFocus}
-      placeholder={placeholder}
-      className={className}
-      readOnly={readOnly}
-      editable={!readOnly}
-      basicSetup={defaultSetup}
-    />
-  );
-};

package/src/components/CodeEditor/ToggleComponentHelp.tsx

@@ -1,7 +0,0 @@
-import { Kbd } from '../Kbd';
-
-export const ToggleComponentHelp = () => (
-  <div>
-    Use <Kbd>Ctrl+/</Kbd> or <Kbd>Command+/</Kbd> to toggle comments.
-  </div>
-);