@keboola/design 1.0.0

package/src/components/CodeEditor/highlighting.ts

@@ -0,0 +1,184 @@
+import type { Extension } from '@codemirror/state';
+import { RangeSet, StateEffect, StateField } from '@codemirror/state';
+import { Decoration, EditorView, gutter, GutterMarker } from '@codemirror/view';
+
+import colors from '@keboola/tailwind-config/colors';
+
+import { activeQueryHighlight } from './activeQueryHighlight';
+
+export type HighlightedLines = {
+  from: number;
+  to: number;
+  error?: { from: number; to: number };
+  processing?: { from: number; to: number };
+} | null;
+
+// Gutter markers for highlighting
+class HighlightMarker extends GutterMarker {
+  toDOM() {
+    const marker = document.createElement('div');
+    marker.className = 'cm-highlight-marker';
+    return marker;
+  }
+}
+
+const highlightMarker = new HighlightMarker();
+
+// Helper function to iterate over line range and apply a callback
+const forEachLineInRange = <T>(
+  doc: { lines: number; line: (n: number) => { from: number } },
+  from: number,
+  to: number,
+  callback: (lineFrom: number) => T,
+): T[] => {
+  const results: T[] = [];
+
+  // Convert 0-based to 1-based for CodeMirror
+  const fromLine = Math.max(1, from + 1);
+  const toLine = Math.min(doc.lines, to + 1);
+
+  for (let i = fromLine; i <= toLine; i++) {
+    const line = doc.line(i);
+    results.push(callback(line.from));
+  }
+
+  return results;
+};
+
+// State effect for setting highlighted lines
+const setHighlightedLinesEffect = StateEffect.define<HighlightedLines>();
+
+// State field for storing highlighted lines info
+const highlightedLinesField = StateField.define<HighlightedLines>({
+  create() {
+    return null;
+  },
+  update(value, transaction) {
+    for (const effect of transaction.effects) {
+      if (effect.is(setHighlightedLinesEffect)) {
+        return effect.value;
+      }
+    }
+    return value;
+  },
+});
+
+// Gutter extension that displays highlight markers
+const highlightGutter = gutter({
+  class: 'cm-highlight-gutter',
+  markers: (view): RangeSet<GutterMarker> => {
+    const highlightInfo = view.state.field(highlightedLinesField, false);
+
+    if (!highlightInfo) {
+      return RangeSet.empty;
+    }
+
+    // Add blue markers for all running query lines
+    const markers = forEachLineInRange(
+      view.state.doc,
+      highlightInfo.from,
+      highlightInfo.to,
+      (lineFrom) => highlightMarker.range(lineFrom),
+    );
+
+    return RangeSet.of(markers);
+  },
+});
+
+// State field for error line background decorations
+const errorLineDecorations = StateField.define({
+  create() {
+    return Decoration.none;
+  },
+  update(decorations, transaction) {
+    decorations = decorations.map(transaction.changes);
+    for (const effect of transaction.effects) {
+      if (!effect.is(setHighlightedLinesEffect)) {
+        continue;
+      }
+
+      if (!effect.value || !effect.value.error) {
+        return Decoration.none;
+      }
+
+      // Add error line background decorations
+      const decorationArray = forEachLineInRange(
+        transaction.state.doc,
+        effect.value.error.from,
+        effect.value.error.to,
+        (lineFrom) => Decoration.line({ class: 'cm-error-line' }).range(lineFrom),
+      );
+
+      return Decoration.set(decorationArray);
+    }
+    return decorations;
+  },
+  provide: (f) => EditorView.decorations.from(f),
+});
+
+// State field for processing line background decorations
+const processingLineDecorations = StateField.define({
+  create() {
+    return Decoration.none;
+  },
+  update(decorations, transaction) {
+    decorations = decorations.map(transaction.changes);
+    for (const effect of transaction.effects) {
+      if (!effect.is(setHighlightedLinesEffect)) {
+        continue;
+      }
+
+      if (!effect.value || !effect.value.processing) {
+        return Decoration.none;
+      }
+
+      const decorationArray = forEachLineInRange(
+        transaction.state.doc,
+        effect.value.processing.from,
+        effect.value.processing.to,
+        (lineFrom) => Decoration.line({ class: 'cm-processing-line' }).range(lineFrom),
+      );
+
+      return Decoration.set(decorationArray);
+    }
+    return decorations;
+  },
+  provide: (f) => EditorView.decorations.from(f),
+});
+
+// Theme for highlighted lines
+const highlightedLinesTheme = EditorView.baseTheme({
+  '.cm-highlight-gutter': {
+    width: '2px',
+    marginRight: '2px',
+  },
+  '.cm-highlight-marker': {
+    width: '2px',
+    height: '100%',
+    backgroundColor: colors.secondary[500],
+  },
+  '.cm-error-line': {
+    backgroundColor: `${colors.error[100]} !important`,
+  },
+  '.cm-processing-line': {
+    backgroundColor: `${colors.secondary[100]} !important`,
+  },
+});
+
+// Install highlight lines extension
+export function highlightingExtension(
+  queryParser?: (sql: string) => Promise<string[]>,
+): Extension[] {
+  return [
+    highlightedLinesField,
+    highlightGutter,
+    errorLineDecorations,
+    processingLineDecorations,
+    highlightedLinesTheme,
+    ...(queryParser ? activeQueryHighlight(queryParser) : []),
+  ];
+}
+
+export function updateHighlighting(view: EditorView, lines?: HighlightedLines) {
+  view.dispatch({ effects: setHighlightedLinesEffect.of(lines ?? null) });
+}

package/src/components/CodeEditor/index.ts

@@ -0,0 +1,3 @@
+export { CodeEditor } from './CodeEditor';
+export { SqlEditor } from './SqlEditor';
+export type { SqlDialectName } from '@keboola/codemirror-lang-sql';

package/src/components/CodeEditor/search.ts

@@ -0,0 +1,186 @@
+import { StateEffect, StateField, type Text } from '@codemirror/state';
+import {
+  Decoration,
+  type DecorationSet,
+  EditorView,
+  ViewPlugin,
+  type ViewUpdate,
+} from '@codemirror/view';
+
+import colors from '@keboola/tailwind-config/colors';
+
+import { escapeStringRegexp } from '../../utils/escapeStringRegexp';
+
+// Represents a single search match in the editor
+type SearchMatch = {
+  /** Start position in document */
+  from: number;
+  /** End position in document */
+  to: number;
+  /** Text content of the match */
+  text: string;
+  /** Local match index within this editor (0-based) */
+  localIndex: number;
+};
+
+// Effect to update search state
+const setSearchEffect = StateEffect.define<{
+  query: string;
+  selectedMatchIndex?: number;
+}>();
+
+// State to track current search matches
+type SearchState = {
+  query: string;
+  selectedMatchIndex?: number;
+  matches: SearchMatch[];
+  decorations: DecorationSet;
+};
+
+// Find all matches in the document
+function findMatches(doc: Text, query: string): SearchMatch[] {
+  if (!query) return [];
+
+  const text = doc.toString();
+
+  try {
+    const regex = new RegExp(escapeStringRegexp(query), 'gi');
+
+    return Array.from(text.matchAll(regex)).map((match, index) => {
+      const from = match.index!;
+      const to = from + match[0].length;
+
+      return { from, to, text: match[0], localIndex: index };
+    });
+  } catch (e) {
+    // Invalid regex - return no matches
+    console.warn('Invalid search regex:', e);
+    return [];
+  }
+}
+
+// Create decorations for search matches
+function createDecorations(matches: SearchMatch[], selectedLocalIndex?: number): DecorationSet {
+  const decorations = matches.map((match) => {
+    const isSelected = match.localIndex === selectedLocalIndex;
+
+    const decoration = Decoration.mark({
+      class: isSelected ? 'cm-searchMatch-selected' : 'cm-searchMatch',
+    });
+
+    return decoration.range(match.from, match.to);
+  });
+
+  return Decoration.set(decorations, true);
+}
+
+// StateField to manage search state
+const searchField = StateField.define<SearchState>({
+  create() {
+    return {
+      query: '',
+      selectedMatchIndex: undefined,
+      matches: [],
+      decorations: Decoration.none,
+    };
+  },
+
+  update(state, tr) {
+    let newState = state;
+
+    // Handle search effect
+    for (const effect of tr.effects) {
+      if (!effect.is(setSearchEffect)) {
+        continue;
+      }
+
+      const { query, selectedMatchIndex } = effect.value;
+
+      // Find matches
+      const matches = findMatches(tr.state.doc, query);
+
+      // Create decorations
+      const decorations = createDecorations(matches, selectedMatchIndex);
+
+      newState = {
+        query,
+        selectedMatchIndex,
+        matches,
+        decorations,
+      };
+    }
+
+    // Map decorations through document changes
+    if (tr.docChanged && newState.query) {
+      const matches = findMatches(tr.state.doc, newState.query);
+      const decorations = createDecorations(matches, newState.selectedMatchIndex);
+
+      newState = {
+        ...newState,
+        matches,
+        decorations,
+      };
+    }
+
+    return newState;
+  },
+
+  provide: (field) => EditorView.decorations.from(field, (state) => state.decorations),
+});
+
+// View plugin to handle scrolling to selected match
+const searchViewPlugin = ViewPlugin.fromClass(
+  class {
+    private lastSelectedIndex?: number;
+
+    update(update: ViewUpdate) {
+      const state = update.state.field(searchField);
+
+      // Scroll to selected match when it changes
+      if (
+        state.selectedMatchIndex !== undefined &&
+        state.selectedMatchIndex !== this.lastSelectedIndex
+      ) {
+        const match = state.matches[state.selectedMatchIndex];
+
+        if (match) {
+          requestAnimationFrame(() => {
+            update.view.dispatch({
+              effects: EditorView.scrollIntoView(match.from, { y: 'center' }),
+            });
+          });
+        }
+
+        this.lastSelectedIndex = state.selectedMatchIndex;
+      }
+
+      // Reset if no selection
+      if (state.selectedMatchIndex === undefined) {
+        this.lastSelectedIndex = undefined;
+      }
+    }
+  },
+);
+
+const searchTheme = EditorView.baseTheme({
+  '.cm-searchMatch': {
+    backgroundColor: colors.secondary[100],
+  },
+  '.cm-searchMatch > span': {
+    color: `${colors.secondary[600]} !important`,
+  },
+  '.cm-searchMatch-selected': {
+    backgroundColor: colors.secondary[600],
+  },
+  '.cm-searchMatch-selected > span': {
+    color: `${colors.white} !important`,
+  },
+});
+
+export function searchExtension() {
+  return [searchField, searchViewPlugin, searchTheme];
+}
+
+export function updateSearch(view: EditorView, query: string, selectedMatchIndex?: number) {
+  view.dispatch({ effects: setSearchEffect.of({ query, selectedMatchIndex }) });
+}

package/src/components/Collapse.stories.tsx

@@ -0,0 +1,56 @@
+import type { KeyboardEvent } from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { useArgs } from 'storybook/preview-api';
+
+import { keyCodes } from '../constants/keyCodes';
+
+import type { CollapseProps } from './Collapse';
+import { Collapse } from './Collapse';
+
+const meta: Meta<typeof Collapse> = {
+  component: Collapse,
+};
+
+export default meta;
+type Story = StoryObj<typeof Collapse>;
+
+const CollapseComponent = (args: CollapseProps) => {
+  const [{ open }, updateArgs] = useArgs();
+
+  const handleToggle = () => {
+    updateArgs({ open: !open });
+  };
+
+  const handleKeyUp = (e: KeyboardEvent<HTMLDivElement>) => {
+    if ([keyCodes.ENTER, keyCodes.SPACE].includes(e.key)) {
+      e.stopPropagation();
+      handleToggle();
+    }
+  };
+
+  return (
+    <Collapse
+      {...args}
+      open={open}
+      header={
+        <div role="button" tabIndex={0} onClick={handleToggle} onKeyUp={handleKeyUp}>
+          {args.header}
+        </div>
+      }
+    >
+      <div>{args.children}</div>
+    </Collapse>
+  );
+};
+
+const commonArgs = {
+  header: 'Title',
+  children:
+    'The extended attribute table file is full. The requested resource is in use. The file type being saved or retrieved has been blocked.',
+  className: 'tw-bg-secondary-100 tw-p-4',
+} as const;
+
+export const Info: Story = {
+  args: commonArgs,
+  render: CollapseComponent,
+};

package/src/components/Collapse.tsx

@@ -0,0 +1,61 @@
+import type { ComponentProps, ReactNode } from 'react';
+
+import { cn } from '../utils';
+
+/** @deprecated Use `Collapsible` instead. */
+export type CollapseProps = {
+  open: boolean;
+  header: ReactNode;
+  className?: string;
+  bodyClassName?: string;
+  children: ReactNode;
+  onClick?: () => void;
+  animationClassName?: string;
+  hidden?: boolean;
+};
+
+/** @deprecated Use `Collapsible` instead. */
+export const Collapse = ({
+  open,
+  header,
+  className,
+  bodyClassName,
+  children,
+  onClick,
+  animationClassName,
+  hidden,
+  ...rest
+}: CollapseProps & ComponentProps<'div'>) => {
+  return (
+    <div
+      {...rest}
+      hidden={hidden}
+      role={onClick && 'button'}
+      tabIndex={onClick ? 0 : undefined}
+      onClick={onClick}
+      onKeyDown={(e) => {
+        if (onClick && (e.key === 'Enter' || e.key === ' ')) {
+          onClick();
+        }
+      }}
+      data-state={open ? 'open' : 'closed'}
+      className={cn('tw-group tw-flex tw-flex-col', className, {
+        'tw-cursor-pointer': onClick,
+        'tw-hidden': hidden,
+      })}
+    >
+      {header}
+      <div
+        className={cn(
+          'tw-grid tw-duration-300',
+          open ? 'tw-grid-rows-[1fr]' : 'tw-grid-rows-[0fr]',
+          animationClassName,
+        )}
+      >
+        <div className={cn('tw-overflow-hidden', open && 'tw-animate-collapseDown', bodyClassName)}>
+          {children}
+        </div>
+      </div>
+    </div>
+  );
+};

package/src/components/Collapsible/Collapsible.stories.tsx

@@ -0,0 +1,55 @@
+import { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { Button } from '../Button';
+
+import { Collapsible } from './Collapsible';
+
+export default {
+  component: Collapsible,
+} satisfies Meta<typeof Collapsible>;
+
+type Story = StoryObj<typeof Collapsible>;
+
+export const Default: Story = {
+  render: () => (
+    <Collapsible className="tw-w-64 tw-space-y-2">
+      <div className="tw-flex tw-items-center tw-justify-between">
+        <h4 className="tw-text-sm tw-font-semibold">Repositories</h4>
+        <Collapsible.Trigger asChild>
+          <Button variant="outline" size="small">
+            Toggle
+          </Button>
+        </Collapsible.Trigger>
+      </div>
+      <div className="tw-rounded-md tw-border tw-px-4 tw-py-2 tw-text-sm">@radix-ui/primitives</div>
+      <Collapsible.Content className="tw-space-y-2">
+        <div className="tw-rounded-md tw-border tw-px-4 tw-py-2 tw-text-sm">@radix-ui/colors</div>
+        <div className="tw-rounded-md tw-border tw-px-4 tw-py-2 tw-text-sm">@stitches/react</div>
+      </Collapsible.Content>
+    </Collapsible>
+  ),
+};
+
+export const Controlled: Story = {
+  render: () => {
+    const [open, setOpen] = useState(false);
+    return (
+      <Collapsible open={open} onOpenChange={setOpen} className="tw-w-64 tw-space-y-2">
+        <div className="tw-flex tw-items-center tw-justify-between">
+          <h4 className="tw-text-sm tw-font-semibold">{open ? 'Expanded' : 'Collapsed'}</h4>
+          <Collapsible.Trigger asChild>
+            <Button variant="outline" size="small">
+              {open ? 'Close' : 'Open'}
+            </Button>
+          </Collapsible.Trigger>
+        </div>
+        <Collapsible.Content>
+          <div className="tw-rounded-md tw-border tw-px-4 tw-py-2 tw-text-sm">
+            Hidden content revealed!
+          </div>
+        </Collapsible.Content>
+      </Collapsible>
+    );
+  },
+};

package/src/components/Collapsible/Collapsible.tsx

@@ -0,0 +1,11 @@
+import type { ComponentProps } from 'react';
+import { CollapsibleTrigger, Root } from '@radix-ui/react-collapsible';
+
+import { CollapsibleContent } from './CollapsibleContent';
+
+type Props = ComponentProps<typeof Root>;
+
+export const Collapsible = (props: Props) => <Root {...props} />;
+
+Collapsible.Trigger = CollapsibleTrigger;
+Collapsible.Content = CollapsibleContent;

package/src/components/Collapsible/CollapsibleContent.tsx

@@ -0,0 +1,25 @@
+import type { ComponentPropsWithoutRef, ElementRef, Ref } from 'react';
+import { Content } from '@radix-ui/react-collapsible';
+
+import { cn } from '../../utils';
+
+type Props = ComponentPropsWithoutRef<typeof Content>;
+
+export const CollapsibleContent = ({
+  ref,
+  className,
+  children,
+  ...props
+}: Props & { ref?: Ref<ElementRef<typeof Content>> }) => (
+  <Content
+    ref={ref}
+    className={cn(
+      'data-[state=closed]:tw-animate-collapsible-up',
+      'data-[state=open]:tw-animate-collapsible-down',
+      className,
+    )}
+    {...props}
+  >
+    {children}
+  </Content>
+);

package/src/components/Collapsible/index.ts

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

package/src/components/CollapsiblePanel.stories.tsx

@@ -0,0 +1,25 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { CollapsiblePanel } from './CollapsiblePanel';
+
+const meta: Meta<typeof CollapsiblePanel> = {
+  component: CollapsiblePanel,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof CollapsiblePanel>;
+
+const commonArgs = {
+  header: 'Params',
+  children:
+    'The extended attribute table file is full. The requested resource is in use. The file type being saved or retrieved has been blocked.',
+} as const;
+
+export const Default: Story = {
+  args: { ...commonArgs },
+};
+
+export const Disabled: Story = {
+  args: { ...commonArgs, isDisabled: true },
+};