@keboola/design 2.0.0 → 2.1.0

package/src/components/Tooltip/Tooltip.stories.tsx

@@ -1,82 +0,0 @@
-import type { ComponentType } from 'react';
-import type { Meta, StoryObj } from '@storybook/react-vite';
-
-import { CircleHelp } from '../../icons';
-import { Button } from '../Button';
-
-import { Tooltip, TooltipProvider } from './Tooltip';
-
-const withProvider = (Story: ComponentType) => {
-  return (
-    <TooltipProvider>
-      <Story />
-    </TooltipProvider>
-  );
-};
-
-const meta: Meta<typeof Tooltip> = {
-  component: Tooltip,
-  args: {
-    tooltip: 'Add to library',
-  },
-  render: (args) => (
-    <Tooltip {...args}>
-      <Button>Add</Button>
-    </Tooltip>
-  ),
-  decorators: [withProvider],
-  parameters: {
-    layout: 'centered',
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof Tooltip>;
-
-export const Action: Story = {};
-
-export const Explanatory: Story = {
-  args: {
-    variant: 'explanatory',
-    tooltip: 'Add to library to save for later',
-    placement: 'right',
-  },
-};
-
-export const StaticExplanatory: Story = {
-  args: {
-    variant: 'explanatory',
-    tooltip: 'How to reference table in SQL...',
-    placement: 'bottom',
-    triggerAsChild: true,
-    keepOpenOnTriggerClick: true,
-  },
-  render: (args) => (
-    <Tooltip {...args}>
-      <CircleHelp className="tw-size-4 tw-text-neutral-400" />
-    </Tooltip>
-  ),
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'Same as explanatory, but the tooltip is not closed when the trigger is clicked. Can be used only on static elements - help icons etc.',
-      },
-    },
-  },
-};
-
-export const MoreControl: Story = {
-  render: () => {
-    return (
-      <Tooltip.Root>
-        <Tooltip.Trigger asChild>
-          <Button type="button">Buton</Button>
-        </Tooltip.Trigger>
-        <Tooltip.Content variant="explanatory" hideWhenDetached={false}>
-          Tooltip with more control
-        </Tooltip.Content>
-      </Tooltip.Root>
-    );
-  },
-};

package/src/components/Tooltip/Tooltip.tsx

@@ -1,110 +0,0 @@
-import { useState } from 'react';
-import type { ComponentProps, ReactNode } from 'react';
-import type { Content, Trigger } from '@radix-ui/react-tooltip';
-import { Provider } from '@radix-ui/react-tooltip';
-
-import { keyCodes } from '../../constants/keyCodes';
-
-import { TooltipContent } from './TooltipContent';
-import { TooltipRoot } from './TooltipRoot';
-import { TooltipTrigger } from './TooltipTrigger';
-
-const ACTION_TOOLTIP_LIMIT = 30;
-
-type TriggerProps = {
-  triggerAsChild?: boolean;
-};
-
-/**
- * Props for `Tooltip`. `tooltip` is the popup content; `children` is the trigger element.
- * `variant` auto-resolves to `"explanatory"` for strings >30 chars, else `"action"`.
- */
-export type Props = {
-  /** Keep the tooltip visible when the user clicks the trigger (useful for click-to-copy feedback). */
-  keepOpenOnTriggerClick?: boolean;
-  /** Content rendered inside the tooltip. Plain text only — no interactive elements (use `HoverCard` or `Popover` for that). */
-  tooltip: ReactNode;
-  children: ReactNode;
-  placement?: ComponentProps<typeof Content>['side'];
-  /** Forcibly hide the tooltip regardless of hover state. */
-  forceHide?: boolean;
-  /** Forcibly show the tooltip regardless of hover state. Useful for guided-tour overlays. */
-  forceShow?: boolean;
-  className?: string;
-} & TriggerProps &
-  Pick<ComponentProps<typeof TooltipContent>, 'variant' | 'className'>;
-
-/** Re-export of Radix `Tooltip.Provider`. Mount once at the app root so tooltips share delay state. */
-export const TooltipProvider = Provider;
-
-/**
- * Short plain-text label that appears on hover or focus.
- *
- * **When to use:** describing an icon-only `Button`, explaining a disabled control, or labelling a
- * truncated value. Plain text only — auto-switches to the longer `"explanatory"` variant when the string
- * exceeds 30 characters.
- * **When NOT to use:** for rich preview content (multiple lines, formatted text, structured data) use
- * `HoverCard`; for tooltips containing links or buttons use `Popover` (interactive elements break a11y
- * inside a `Tooltip`).
- * **Composition:** wrap any focusable element via `triggerAsChild` so the tooltip targets the underlying
- * native element. Mount `TooltipProvider` once at the app root.
- *
- * @see RECIPES.md#disabled-button-tooltip — for the disabled-button + tooltip pattern
- */
-export const Tooltip = ({
-  tooltip,
-  children,
-  className,
-  keepOpenOnTriggerClick = false,
-  variant,
-  placement = 'right',
-  forceHide = false,
-  forceShow = false,
-  // trigger props
-  triggerAsChild = false,
-}: Props) => {
-  const [open, setOpen] = useState(false);
-
-  const resolvedVariant = (() => {
-    if (!!variant) return variant;
-    if (typeof tooltip === 'string' && tooltip.length > ACTION_TOOLTIP_LIMIT) return 'explanatory';
-
-    return 'action';
-  })();
-
-  const isActionVariant = resolvedVariant === 'action';
-
-  const handleKeyUp: ComponentProps<typeof Trigger>['onKeyUp'] = (event) => {
-    if (![keyCodes.ENTER, keyCodes.SPACE].includes(event.key)) return;
-    event.stopPropagation();
-  };
-
-  return (
-    <TooltipRoot
-      open={!!tooltip && (open || forceShow) && !forceHide}
-      onOpenChange={setOpen}
-      disableHoverableContent={isActionVariant}
-    >
-      <TooltipTrigger
-        asChild={triggerAsChild}
-        keepOpenOnClick={keepOpenOnTriggerClick}
-        onKeyUp={handleKeyUp}
-      >
-        {children}
-      </TooltipTrigger>
-
-      <TooltipContent
-        className={className}
-        variant={resolvedVariant}
-        placement={placement}
-        keepOpenOnPointerDownOutside={keepOpenOnTriggerClick}
-      >
-        {tooltip}
-      </TooltipContent>
-    </TooltipRoot>
-  );
-};
-
-Tooltip.Root = TooltipRoot;
-Tooltip.Content = TooltipContent;
-Tooltip.Trigger = TooltipTrigger;

package/src/components/Tooltip/TooltipContent.tsx

@@ -1,90 +0,0 @@
-import type { ComponentProps } from 'react';
-import { Content, Portal } from '@radix-ui/react-tooltip';
-import type { VariantProps } from 'class-variance-authority';
-import { cva } from 'class-variance-authority';
-
-const tooltipVariants = cva(
-  [
-    'tailwindcss-preflight',
-    'tw-inline-block',
-    'tw-rounded',
-    'tw-bg-neutral-800',
-    'tw-text-white',
-    'tw-break-anywhere',
-    'tw-max-h-96',
-    'tw-overflow-y-auto',
-    'tw-z-[1060]',
-  ],
-  {
-    defaultVariants: {
-      variant: 'action',
-    },
-    variants: {
-      variant: {
-        action: [
-          'tw-max-w-fit',
-          'tw-px-3',
-          'tw-py-2',
-
-          'tw-text-center',
-          'tw-text-xs',
-          'tw-font-medium',
-          'tw-uppercase',
-          'tw-tracking-wider',
-        ],
-        explanatory: [
-          'tw-max-w-80',
-          'tw-px-4',
-          'tw-py-3',
-          'tw-text-left',
-
-          'tw-text-sm',
-          'tw-font-normal',
-        ],
-      },
-    },
-  },
-);
-
-type Props = {
-  keepOpenOnPointerDownOutside?: boolean;
-  placement?: ComponentProps<typeof Content>['side'];
-} & Omit<ComponentProps<typeof Content>, 'side'> &
-  VariantProps<typeof tooltipVariants>;
-
-export const TooltipContent = ({
-  className,
-  variant,
-  keepOpenOnPointerDownOutside = false,
-  children,
-  onPointerDownOutside,
-  sideOffset = 8,
-  collisionPadding = 8,
-  hideWhenDetached = true,
-  placement = 'right',
-  ...rest
-}: Props) => {
-  const handlePointerDownOutside: ComponentProps<typeof Content>['onPointerDownOutside'] = (
-    event,
-  ) => {
-    if (keepOpenOnPointerDownOutside) event.preventDefault();
-    onPointerDownOutside?.(event);
-  };
-
-  return (
-    <Portal>
-      <Content
-        {...rest}
-        data-tooltip-content
-        sideOffset={sideOffset}
-        collisionPadding={collisionPadding}
-        onPointerDownOutside={handlePointerDownOutside}
-        className={tooltipVariants({ className, variant: variant })}
-        hideWhenDetached={hideWhenDetached}
-        side={placement}
-      >
-        {children}
-      </Content>
-    </Portal>
-  );
-};

package/src/components/Tooltip/TooltipRoot.tsx

@@ -1,12 +0,0 @@
-import type { ComponentProps } from 'react';
-import { Root } from '@radix-ui/react-tooltip';
-
-type Props = ComponentProps<typeof Root>;
-
-const DELAY_SHOW_TOOLTIP = 300;
-
-export const TooltipRoot = ({ children, delayDuration = DELAY_SHOW_TOOLTIP, ...rest }: Props) => (
-  <Root {...rest} delayDuration={delayDuration}>
-    {children}
-  </Root>
-);

package/src/components/Tooltip/TooltipTrigger.tsx

@@ -1,42 +0,0 @@
-import type { ComponentProps, ElementRef, Ref } from 'react';
-import { Trigger } from '@radix-ui/react-tooltip';
-
-import { cn } from '../../utils';
-
-type Props = {
-  keepOpenOnClick?: boolean;
-} & ComponentProps<typeof Trigger>;
-
-export const TooltipTrigger = ({
-  ref,
-  children,
-  className,
-  keepOpenOnClick = false,
-  onClick,
-  onPointerDown,
-  asChild,
-  ...rest
-}: Props & { ref?: Ref<ElementRef<'button'>> }) => {
-  const handleClick: ComponentProps<typeof Trigger>['onClick'] = (event) => {
-    if (keepOpenOnClick) event.preventDefault();
-    onClick?.(event);
-  };
-
-  const handePointerDown: ComponentProps<typeof Trigger>['onPointerDown'] = (event) => {
-    if (keepOpenOnClick) event.preventDefault();
-    onPointerDown?.(event);
-  };
-
-  return (
-    <Trigger
-      {...rest}
-      asChild
-      ref={ref}
-      className={cn('tailwindcss-preflight', className)}
-      onClick={handleClick}
-      onPointerDown={handePointerDown}
-    >
-      {asChild ? children : <span>{children}</span>}
-    </Trigger>
-  );
-};

package/src/components/Tooltip/index.ts

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

package/src/components/Truncated.stories.tsx

@@ -1,72 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-
-import { withTooltipProvider } from '../utils';
-
-import { Truncated } from './Truncated';
-
-const meta: Meta<typeof Truncated> = {
-  component: Truncated,
-  decorators: [withTooltipProvider],
-};
-
-export default meta;
-type Story = StoryObj<typeof Truncated>;
-
-const longText =
-  'This is a very long text that should be truncated when it exceeds the width of its container. It contains many words and should demonstrate the truncation behavior effectively.';
-
-const shortText = 'Short text';
-
-export const SingleLine: Story = {
-  args: {
-    text: longText,
-    className: 'tw-max-w-xs',
-  },
-};
-
-export const TwoLines: Story = {
-  args: {
-    text: longText,
-    twoLines: true,
-    className: 'tw-max-w-xs',
-  },
-};
-
-export const WithCustomTooltip: Story = {
-  args: {
-    text: longText,
-    tooltip: 'Custom tooltip text that differs from the truncated text',
-    className: 'tw-max-w-xs',
-  },
-};
-
-export const NoTooltip: Story = {
-  args: {
-    text: longText,
-    noTooltip: true,
-    className: 'tw-max-w-xs',
-  },
-};
-
-export const ShortTextNoTruncation: Story = {
-  args: {
-    text: shortText,
-    className: 'tw-max-w-xs',
-  },
-};
-
-export const WithRedact: Story = {
-  args: {
-    text: 'Sensitive data that should be redacted in heap analytics',
-    redact: true,
-    className: 'tw-max-w-xs',
-  },
-};
-
-export const DifferentTooltipVariant: Story = {
-  args: {
-    text: longText,
-    tooltipVariant: 'explanatory',
-    className: 'tw-max-w-xs',
-  },
-};

package/src/components/Truncated.tsx

@@ -1,78 +0,0 @@
-import { useState } from 'react';
-import type { ComponentPropsWithoutRef, ElementRef, ReactNode, Ref } from 'react';
-
-import type { TooltipProps } from '@keboola/design';
-import { cn, Tooltip } from '@keboola/design';
-
-const OFFSET_TOLERANCE = 2;
-
-type Props = {
-  text: ReactNode;
-  tooltip?: ReactNode;
-  twoLines?: boolean;
-  noTooltip?: boolean;
-  redact?: boolean;
-  tooltipVariant?: TooltipProps['variant'];
-  tooltipPlacement?: TooltipProps['placement'];
-} & Omit<ComponentPropsWithoutRef<'span'>, 'children'>;
-
-export const Truncated = ({
-  ref,
-  text,
-  tooltip = text,
-  className,
-  twoLines = false,
-  noTooltip = false,
-  redact = false,
-  tooltipVariant = 'explanatory',
-  tooltipPlacement = 'top',
-  ...rest
-}: Props & { ref?: Ref<ElementRef<'span'>> }) => {
-  const tooltipText = typeof tooltip === 'string' ? tooltip : '';
-  const [showTooltip, setShowTooltip] = useState(false);
-
-  const isScrollableTarget = (e: HTMLElement): boolean => {
-    return e.scrollHeight - OFFSET_TOLERANCE >= e.clientHeight;
-  };
-
-  const truncatedClasses = cn(
-    className,
-    'tw-overflow-hidden [word-break:break-all]',
-    '[display:-webkit-box!important] [-webkit-box-orient:vertical]',
-    twoLines ? '[-webkit-line-clamp:2] [word-break:break-word]' : '[-webkit-line-clamp:1]',
-  );
-
-  if (noTooltip || !tooltipText) {
-    return (
-      <span ref={ref} className={truncatedClasses} {...rest}>
-        {text}
-      </span>
-    );
-  }
-
-  return (
-    <Tooltip
-      placement={tooltipPlacement}
-      variant={tooltipVariant}
-      forceHide={!showTooltip}
-      tooltip={<div data-heap-redact-text={redact}>{tooltipText}</div>}
-      triggerAsChild
-    >
-      <span
-        ref={ref}
-        className={truncatedClasses}
-        {...rest}
-        onMouseOver={(e) => {
-          setShowTooltip(isScrollableTarget(e.currentTarget));
-          rest.onMouseOver?.(e);
-        }}
-        onFocus={(e) => {
-          setShowTooltip(isScrollableTarget(e.currentTarget));
-          rest.onFocus?.(e);
-        }}
-      >
-        {text}
-      </span>
-    </Tooltip>
-  );
-};

package/src/components/ZoomableSvg/ZoomableSvg.stories.tsx

@@ -1,53 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-
-import { withHiddenFullscreen, withTooltipProvider } from '../../utils/decorators';
-
-import { ZoomableSvg } from './ZoomableSvg';
-
-const SAMPLE_SVG = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 200">
-  <rect x="10" y="10" width="120" height="60" rx="8" fill="#e0f0ff" stroke="#075fb8" stroke-width="2"/>
-  <text x="70" y="45" text-anchor="middle" font-family="Inter, sans-serif" font-size="14" fill="#222529">Source</text>
-  <rect x="260" y="10" width="120" height="60" rx="8" fill="#e0f0ff" stroke="#075fb8" stroke-width="2"/>
-  <text x="320" y="45" text-anchor="middle" font-family="Inter, sans-serif" font-size="14" fill="#222529">Destination</text>
-  <line x1="130" y1="40" x2="260" y2="40" stroke="#a2aab8" stroke-width="2" marker-end="url(#arrow)"/>
-  <defs><marker id="arrow" markerWidth="10" markerHeight="7" refX="10" refY="3.5" orient="auto"><polygon points="0 0, 10 3.5, 0 7" fill="#a2aab8"/></marker></defs>
-  <rect x="140" y="120" width="120" height="60" rx="8" fill="#fff3e0" stroke="#f59300" stroke-width="2"/>
-  <text x="200" y="155" text-anchor="middle" font-family="Inter, sans-serif" font-size="14" fill="#222529">Transform</text>
-  <line x1="70" y1="70" x2="200" y2="120" stroke="#a2aab8" stroke-width="1.5" stroke-dasharray="5 3"/>
-  <line x1="200" y1="120" x2="320" y2="70" stroke="#a2aab8" stroke-width="1.5" stroke-dasharray="5 3"/>
-</svg>`;
-
-const meta: Meta<typeof ZoomableSvg> = {
-  title: 'Components/ZoomableSvg',
-  component: ZoomableSvg,
-  decorators: [withTooltipProvider, withHiddenFullscreen],
-  parameters: {
-    layout: 'padded',
-  },
-  args: {
-    html: SAMPLE_SVG,
-    copyText: 'Sample SVG code',
-  },
-};
-
-export default meta;
-
-type Story = StoryObj<typeof ZoomableSvg>;
-
-export const Default: Story = {};
-
-export const WithoutCopy: Story = {
-  args: {
-    copyText: undefined,
-  },
-};
-
-export const InNarrowContainer: Story = {
-  decorators: [
-    (Story) => (
-      <div style={{ width: 300 }}>
-        <Story />
-      </div>
-    ),
-  ],
-};