@keboola/design 2.0.1 → 2.1.0

package/src/components/CodeEditor/helpers.ts

@@ -1,100 +0,0 @@
-import { javascript } from '@codemirror/lang-javascript';
-import { json } from '@codemirror/lang-json';
-import { python } from '@codemirror/lang-python';
-import { PLSQL, sql } from '@codemirror/lang-sql';
-import { StreamLanguage } from '@codemirror/language';
-import { r } from '@codemirror/legacy-modes/mode/r';
-import { shell } from '@codemirror/legacy-modes/mode/shell';
-import { githubLightInit } from '@uiw/codemirror-theme-github';
-
-import { sfsql } from '@keboola/codemirror-lang-sfsql';
-import colors from '@keboola/tailwind-config/colors';
-
-export type LANGUAGE_MODE =
-  | 'application/json'
-  | 'text/x-python'
-  | 'text/x-sql'
-  | 'text/x-sfsql'
-  | 'text/x-plsql'
-  | 'text/x-rsrc'
-  | 'text/x-sh'
-  | 'text/javascript'
-  | 'text/typescript';
-
-export const baseThemeStyles = {
-  '*': { lineHeight: '20px' },
-  '*::selection': {
-    backgroundColor: colors.secondary[500],
-    color: `${colors.white} !important`,
-  },
-  '&.cm-editor:has(.cm-content[contenteditable="false"])': { backgroundColor: colors.neutral[150] },
-  '&.cm-editor:has(.cm-content[contenteditable="false"]) .cm-gutters': {
-    backgroundColor: colors.neutral[200],
-  },
-  '&.cm-editor .cm-scroller': { overflowAnchor: 'none' },
-  '&.cm-editor, &.cm-editor .cm-scroller': {
-    minHeight: '100%',
-    flexGrow: 1,
-    alignItems: 'stretch !important',
-    outline: 'none',
-  },
-  '.cm-gutter.cm-foldGutter': { display: 'none !important' },
-  '.cm-gutter.cm-lineNumbers': { paddingLeft: '20px', paddingRight: '6px' },
-  '.cm-gutters': { height: 'auto' },
-
-  // tokens overrides
-  '.cm-line .tok-string': { color: colors.warning[700] },
-
-  // merge (diff) view
-  '&[class*="cm-merge-"] .cm-deletedLine': { backgroundColor: colors.error[100] },
-  '&[class*="cm-merge-"] .cm-changedLine': { backgroundColor: colors.primary[100] },
-  '&[class*="cm-merge-"] .cm-deletedLineGutter': { backgroundColor: colors.error[200] },
-  '&[class*="cm-merge-"] .cm-changedLineGutter': { backgroundColor: colors.primary[200] },
-  '&[class*="cm-merge-"] .cm-deletedText': { background: colors.error[200] },
-  '&[class*="cm-merge-"] .cm-changedText': { background: colors.primary[200] },
-  '&[class*="cm-merge-"]': {
-    backgroundColor: `${colors.white} !important`,
-  },
-  '&[class*="cm-merge-"] .cm-gutters': {
-    backgroundColor: `${colors.white} !important`,
-  },
-  '.cm-changeGutter': { position: 'absolute', zIndex: -1, width: '100%', paddingLeft: 0 },
-  '&[class*="cm-merge-"] .cm-changedLine,&[class*="cm-merge-"] .cm-line, &[class*="cm-merge-"] .cm-deletedChunk':
-    { paddingLeft: 0 },
-};
-
-export const BASIS_SETUP = { drawSelection: false };
-
-export const customTheme = githubLightInit({
-  settings: {
-    fontFamily: `'SFMono-Regular', 'Menlo', 'Monaco', 'Consolas', 'Liberation Mono', 'Courier New'`,
-    background: colors.neutral[50],
-    gutterBackground: colors.neutral[100],
-    gutterBorder: 'transparent',
-    lineHighlight: 'transparent',
-    selection: colors.secondary[500],
-  },
-});
-
-export const getLanguageMode = (mode?: LANGUAGE_MODE) => {
-  switch (mode) {
-    case 'text/x-python':
-      return python();
-    case 'text/x-sql':
-      return sql({ upperCaseKeywords: true });
-    case 'text/x-sfsql':
-      return StreamLanguage.define(sfsql);
-    case 'text/x-plsql':
-      return sql({ upperCaseKeywords: true, dialect: PLSQL });
-    case 'text/x-rsrc':
-      return StreamLanguage.define(r);
-    case 'text/x-sh':
-      return StreamLanguage.define(shell);
-    case 'text/javascript':
-      return javascript({ jsx: true });
-    case 'text/typescript':
-      return javascript({ jsx: true, typescript: true });
-    default:
-      return json();
-  }
-};

package/src/components/CodeEditor/highlighting.ts

@@ -1,184 +0,0 @@
-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 {
-  override 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

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

package/src/components/CodeEditor/search.ts

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

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

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

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

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

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

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