@keboola/design 1.0.0

package/src/components/Toggle/Toggle.tsx

@@ -0,0 +1,197 @@
+import type { ComponentProps, ElementRef, ReactNode, Ref } from 'react';
+import { Root } from '@radix-ui/react-toggle';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+import { cn } from '../../utils';
+import { Icon } from '../Icon';
+
+const toggleVariants = cva(
+  [
+    'tailwindcss-preflight',
+
+    // layout
+    'tw-relative',
+    'tw-flex',
+    'tw-items-center',
+    'tw-justify-center',
+    'tw-gap-2',
+
+    // text
+    'tw-uppercase',
+    'tw-text-xs',
+    'tw-leading-5',
+    'tw-font-medium',
+    'tw-tracking-[1px]',
+
+    // border
+    'tw-border',
+
+    // style
+    'tw-rounded',
+    'tw-whitespace-nowrap',
+
+    // transitions
+    'tw-transition-colors',
+    'tw-duration-100',
+    'tw-ease-linear',
+    '[&_svg]:tw-transition-colors',
+    '[&_svg]:tw-duration-100',
+    '[&_svg]:tw-ease-linear',
+
+    // hover
+    'not-disabled:hover:tw-border-neutral-300',
+    'not-disabled:hover:tw-bg-neutral-100',
+
+    'disabled:tw-opacity-50',
+    'disabled:tw-cursor-not-allowed',
+
+    // focus-visible
+    '[&:not(:active)]:not-disabled:focus-visible:tw-outline',
+    '!tw-outline-offset-0',
+    '[&:not(:active)]:not-disabled:focus-visible:tw-outline-secondary-500',
+    '[&:not(:active)]:not-disabled:focus-visible:tw-outline-1',
+    '[&:not(:active)]:not-disabled:focus-visible:tw-shadow-[0_0_0_4px_rgba(31,143,255,0.2)]',
+  ],
+  {
+    variants: {
+      variant: {
+        ai: [
+          'tw-border-0',
+
+          // off state
+          'aria-[pressed=false]:tw-bg-gradient-to-br',
+          'aria-[pressed=false]:tw-from-secondary-100',
+          'aria-[pressed=false]:tw-to-purple-100',
+          'hover:aria-[pressed=false]:tw-from-secondary-200',
+          'hover:aria-[pressed=false]:tw-to-purple-200',
+
+          // on state
+          'aria-pressed:tw-bg-gradient-to-br',
+          'aria-pressed:tw-from-secondary-600',
+          'aria-pressed:tw-to-purple-600',
+          'hover:aria-pressed:tw-from-secondary-700',
+          'hover:aria-pressed:tw-to-purple-700',
+
+          // icon color - gradient when off, white when on
+          '[&_path]:tw-fill-aigradient-600',
+          '[&_path]:aria-pressed:tw-fill-white',
+          '*:aria-pressed:tw-text-white',
+        ],
+        'ai-vivid': [
+          'tw-border-0',
+          'tw-rounded-lg',
+          'tw-normal-case',
+          'tw-tracking-normal',
+          'tw-gap-1.5',
+
+          // default: sky → violet gradient, white text
+          'tw-bg-gradient-to-br',
+          'tw-from-sky-400',
+          'tw-via-sky-600',
+          'tw-to-violet-600',
+          'tw-text-white',
+
+          // hover: light sky bg, dark text
+          'not-disabled:hover:tw-bg-none',
+          'not-disabled:hover:tw-bg-sky-100',
+          'not-disabled:hover:tw-border-transparent',
+          'not-disabled:hover:tw-text-sky-700',
+          'not-disabled:hover:[&_svg]:tw-text-sky-700',
+
+          // pressed: dark navy gradient, white
+          'aria-[pressed=true]:tw-bg-gradient-to-br',
+          'aria-[pressed=true]:tw-from-sky-700',
+          'aria-[pressed=true]:tw-to-sky-900',
+          'aria-[pressed=true]:tw-text-white',
+          'aria-[pressed=true]:[&_svg]:tw-text-white',
+        ],
+        ghost: [
+          'tw-border-0',
+          'tw-rounded-lg',
+
+          // default state - transparent background
+          'tw-bg-transparent',
+          '[&_svg]:tw-text-neutral-400',
+
+          // hover state
+          'not-disabled:hover:tw-bg-neutral-100',
+          '[&_svg]:not-disabled:hover:tw-text-secondary-500',
+
+          // pressed state
+          'aria-pressed:tw-bg-secondary-100',
+          '[&_svg]:aria-pressed:tw-text-secondary-500',
+
+          // hover on pressed state
+          'not-disabled:hover:aria-pressed:tw-bg-secondary-200',
+          '[&_svg]:not-disabled:hover:aria-pressed:tw-text-secondary-600',
+        ],
+      },
+      size: {
+        small: 'tw-max-h-8 tw-min-h-8 tw-px-2 tw-py-1.5',
+        medium: 'tw-max-h-10 tw-min-h-10 tw-px-4 tw-py-2.5',
+        large: 'tw-max-h-12 tw-min-h-12 tw-px-4 tw-py-3.5',
+      },
+      iconOnly: {
+        true: 'tw-p-0',
+        false: '',
+      },
+    },
+    compoundVariants: [
+      { iconOnly: true, size: 'small', className: 'tw-size-8' },
+      { iconOnly: true, size: 'medium', className: 'tw-size-10' },
+      { iconOnly: true, size: 'large', className: 'tw-size-12' },
+    ],
+    defaultVariants: {
+      variant: 'ai',
+      size: 'medium',
+      iconOnly: false,
+    },
+  },
+);
+
+type Props = {
+  icon?: ComponentProps<typeof Icon>['icon'];
+  badge?: ReactNode;
+} & ComponentProps<typeof Root> &
+  Omit<VariantProps<typeof toggleVariants>, 'iconOnly'>;
+
+export const Toggle = ({
+  ref,
+  className,
+  variant = 'ai',
+  size = 'medium',
+  children,
+  icon,
+  badge,
+  disabled = false,
+  ...props
+}: Props & { ref?: Ref<ElementRef<'button'>> }) => {
+  const isAiVariant = variant === 'ai';
+  const isIconOnly = Boolean(icon && children == null);
+
+  return (
+    <Root
+      {...props}
+      ref={ref}
+      className={cn(toggleVariants({ variant, size, iconOnly: isIconOnly, className }))}
+      disabled={disabled}
+    >
+      {badge && (
+        <span className="tw-absolute tw-right-0 tw-top-0 -tw-translate-y-1/2 tw-translate-x-1/4">
+          {badge}
+        </span>
+      )}
+      {icon && (
+        <Icon icon={icon} className="tw-inline-block tw-size-4 tw-shrink-0 tw-align-middle" />
+      )}
+
+      {isAiVariant ? (
+        <div className="tw-bg-gradient-to-br tw-from-secondary-700 tw-to-purple-700 tw-bg-clip-text tw-text-transparent">
+          {children}
+        </div>
+      ) : (
+        children
+      )}
+    </Root>
+  );
+};

package/src/components/Toggle/index.ts

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

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

@@ -0,0 +1,82 @@
+import type { ComponentType } from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { Button } from '../Button';
+import { Icon } from '../Icon';
+
+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}>
+      <Icon icon="circle-question" className="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

@@ -0,0 +1,87 @@
+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;
+};
+
+export type Props = {
+  keepOpenOnTriggerClick?: boolean;
+  tooltip: ReactNode;
+  children: ReactNode;
+  placement?: ComponentProps<typeof Content>['side'];
+  forceHide?: boolean;
+  forceShow?: boolean;
+  className?: string;
+} & TriggerProps &
+  Pick<ComponentProps<typeof TooltipContent>, 'variant' | 'className'>;
+
+export const TooltipProvider = Provider;
+
+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

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

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

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

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

package/src/components/Truncated.stories.tsx

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

@@ -0,0 +1,78 @@
+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>
+  );
+};