@keboola/design 1.0.0

package/src/components/Clipboard/Clipboard.tsx

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

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

package/src/components/CodeEditor/ButtonToolbar.tsx

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

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

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

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

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