@keboola/design 2.0.1 → 3.0.0

package/src/components/Checkbox/Checkbox.tsx

@@ -1,83 +0,0 @@
-import { useId } from 'react';
-import type { ComponentProps, JSX, ReactNode } from 'react';
-import type { CheckedState } from '@radix-ui/react-checkbox';
-import { Indicator, Root } from '@radix-ui/react-checkbox';
-import type { VariantProps } from 'class-variance-authority';
-
-import { Check, Minus } from '../../icons';
-import { cn } from '../../utils';
-import { FieldBox } from '../FieldBox';
-import type { fieldBoxVariants } from '../FieldBox/styles';
-import type { Props as TooltipProps } from '../Tooltip';
-import { Tooltip } from '../Tooltip';
-
-import { indicatorVariants, rootVariants } from './styles';
-
-type Props = {
-  id?: string | number;
-  argo?: boolean;
-  description?: ReactNode;
-  variant?: VariantProps<typeof fieldBoxVariants>['variant'];
-  position?: 'start' | 'end';
-  tooltip?: TooltipProps['tooltip'];
-  tooltipPlacement?: TooltipProps['placement'];
-} & Omit<ComponentProps<typeof Root>, 'id'>;
-
-// First overload - for strict boolean usage
-export function Checkbox(
-  prop: Omit<Props, 'checked' | 'onCheckedChange'> & {
-    checked?: boolean;
-    onCheckedChange?: (checked: boolean) => void;
-  },
-): JSX.Element;
-
-// Second overload - for CheckedState usage (boolean | 'indeterminate')
-export function Checkbox(
-  prop: Omit<Props, 'checked' | 'onCheckedChange'> & {
-    checked?: CheckedState;
-    onCheckedChange?: (checked: CheckedState) => void;
-  },
-): JSX.Element;
-
-export function Checkbox({
-  className,
-  id: idProp,
-  children,
-  argo = false,
-  description,
-  variant,
-  position,
-  tooltip,
-  tooltipPlacement = 'top',
-  ...rest
-}: Props) {
-  const fallbackId = useId();
-  const id = idProp?.toString() ?? fallbackId;
-  const styleVariant = argo ? 'argo' : 'default';
-
-  const checkboxElement = (
-    <Root id={id} {...rest} className={cn(rootVariants({ variant: styleVariant, className }))}>
-      <Indicator className={cn(indicatorVariants({ variant: styleVariant }))}>
-        <Check className="tw-hidden tw-size-3 tw-stroke-[4px] group-data-[state=checked]:tw-block" />
-        <Minus className="tw-hidden tw-size-3 tw-stroke-[4px] group-data-[state=indeterminate]:tw-block" />
-      </Indicator>
-    </Root>
-  );
-
-  const rendered = !children ? (
-    checkboxElement
-  ) : (
-    <FieldBox htmlFor={id} variant={variant} position={position} control={checkboxElement}>
-      <FieldBox.Title>{children}</FieldBox.Title>
-      {description && <FieldBox.Description>{description}</FieldBox.Description>}
-    </FieldBox>
-  );
-
-  if (!tooltip) return rendered;
-
-  return (
-    <Tooltip tooltip={tooltip} placement={tooltipPlacement} triggerAsChild>
-      {rendered}
-    </Tooltip>
-  );
-}

package/src/components/Checkbox/index.ts

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

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,
-  },
-};