@keboola/design 1.0.0

package/src/components/FullScreenModal/FullScreenModalRoot.tsx

@@ -0,0 +1,79 @@
+import { useEffect, useRef } from 'react';
+import type { HTMLAttributes, KeyboardEvent, ReactNode } from 'react';
+import { createPortal } from 'react-dom';
+
+import { cn } from '../../utils';
+
+type Props = HTMLAttributes<HTMLDivElement> & {
+  children: ReactNode;
+  /** Lock body scroll when modal is open. Default: true */
+  lockBodyScroll?: boolean;
+  /** Callback when ESC key is pressed */
+  onEscapeKeyDown?: (event: KeyboardEvent<HTMLDivElement>) => void;
+};
+
+const BODY_LOCK_CLASS = 'full-screen-modal-open';
+
+export const FullScreenModalRoot = ({
+  children,
+  className,
+  lockBodyScroll = true,
+  onEscapeKeyDown,
+  ...props
+}: Props) => {
+  const modalRef = useRef<HTMLDivElement>(null);
+
+  // Body scroll lock
+  useEffect(() => {
+    const modalElement = modalRef.current;
+
+    if (lockBodyScroll) {
+      document.body.classList.add(BODY_LOCK_CLASS);
+    }
+
+    return () => {
+      // Filter out the current modal because it may still be in the DOM
+      // when lockBodyScroll toggles from true to false (e.g. switching
+      // from full-screen to half-screen mode).
+      const hasOtherModals = Array.from(document.querySelectorAll('[data-fullscreen-modal]')).some(
+        (el) => el !== modalElement,
+      );
+
+      if (!hasOtherModals) {
+        document.body.classList.remove(BODY_LOCK_CLASS);
+      }
+    };
+  }, [lockBodyScroll]);
+
+  const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
+    if (event.key === 'Escape' && !event.defaultPrevented) {
+      onEscapeKeyDown?.(event);
+    }
+  };
+
+  return createPortal(
+    <div
+      ref={modalRef}
+      role="dialog"
+      aria-modal="true"
+      tabIndex={-1}
+      data-fullscreen-modal
+      onKeyDown={handleKeyDown}
+      className={cn(
+        'tailwindcss-preflight',
+        'tw-fixed',
+        'tw-inset-0',
+        'tw-z-[1039]',
+        'tw-flex',
+        'tw-flex-col',
+        'tw-bg-neutral-50',
+        'focus-visible:tw-outline-none',
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </div>,
+    document.body,
+  );
+};

package/src/components/FullScreenModal/index.ts

@@ -0,0 +1,3 @@
+export { FullScreenModal } from './FullScreenModal';
+export { FullScreenModalHeader } from './FullScreenModalHeader';
+export { FullScreenModalBody } from './FullScreenModalBody';

package/src/components/HelpBlock/HelpBlock.stories.tsx

@@ -0,0 +1,28 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { HelpBlock } from './HelpBlock';
+
+type Story = StoryObj<typeof HelpBlock>;
+
+const meta: Meta<typeof HelpBlock> = {
+  component: HelpBlock,
+  args: {
+    state: 'default',
+    children: 'Help text',
+  },
+};
+
+export default meta;
+
+export const Basic: Story = {};
+
+export const Multiple: Story = {
+  render: (args) => {
+    return (
+      <>
+        <HelpBlock {...args} />
+        <HelpBlock {...args} />
+      </>
+    );
+  },
+};

package/src/components/HelpBlock/HelpBlock.tsx

@@ -0,0 +1,31 @@
+import type { ReactNode } from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+const helpVariants = cva(['tw-m-0', 'tw-text-xs'], {
+  defaultVariants: {
+    state: 'default',
+  },
+  variants: {
+    state: {
+      default: ['tw-text-neutral-500'],
+      error: ['tw-text-error-500'],
+      warning: ['tw-text-warning-500'],
+    },
+  },
+});
+
+type Props = {
+  className?: string;
+  children?: ReactNode;
+  testId?: string;
+} & VariantProps<typeof helpVariants>;
+
+export const HelpBlock = ({ children, className, state = 'default', testId }: Props) => {
+  if (!children) return null;
+
+  return (
+    <p data-testid={testId} className={helpVariants({ state, className })}>
+      {children}
+    </p>
+  );
+};

package/src/components/HelpBlock/index.ts

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

package/src/components/HoverCard/HoverCard.stories.tsx

@@ -0,0 +1,77 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { Avatar } from '../Avatar';
+import { Button } from '../Button';
+
+import { HoverCard } from './HoverCard';
+
+export default {
+  component: HoverCard,
+  parameters: {
+    layout: 'centered',
+  },
+} satisfies Meta<typeof HoverCard>;
+
+type Story = StoryObj<typeof HoverCard>;
+
+export const Default: Story = {
+  render: () => {
+    return (
+      <HoverCard>
+        <HoverCard.Trigger asChild>
+          <Button>Hover CArd</Button>
+        </HoverCard.Trigger>
+        <HoverCard.Content>
+          <div className="tw-flex tw-gap-3">
+            <Avatar size={40} user={{ name: 'John Doe', email: 'john@example.com' }} />
+            <div className="tw-space-y-1">
+              <h4 className="tw-text-sm tw-font-semibold">@username</h4>
+              <p className="tw-text-xs tw-text-neutral-600">
+                The React Framework – created and maintained by @vercel.
+              </p>
+              <div className="tw-flex tw-gap-2 tw-text-xs tw-text-neutral-500">
+                <span>Joined December 2021</span>
+              </div>
+            </div>
+          </div>
+        </HoverCard.Content>
+      </HoverCard>
+    );
+  },
+};
+
+export const Positioning: Story = {
+  render: () => {
+    return (
+      <div className="tw-flex tw-gap-8">
+        <HoverCard>
+          <HoverCard.Trigger asChild>
+            <Button> Top</Button>
+          </HoverCard.Trigger>
+          <HoverCard.Content side="top">Positioned on top</HoverCard.Content>
+        </HoverCard>
+
+        <HoverCard>
+          <HoverCard.Trigger asChild>
+            <Button> Right</Button>
+          </HoverCard.Trigger>
+          <HoverCard.Content side="right">Positioned on right</HoverCard.Content>
+        </HoverCard>
+
+        <HoverCard>
+          <HoverCard.Trigger asChild>
+            <Button>Bottom</Button>
+          </HoverCard.Trigger>
+          <HoverCard.Content side="bottom">Positioned on bottom</HoverCard.Content>
+        </HoverCard>
+
+        <HoverCard>
+          <HoverCard.Trigger asChild>
+            <Button>Left</Button>
+          </HoverCard.Trigger>
+          <HoverCard.Content side="left">Positioned on left</HoverCard.Content>
+        </HoverCard>
+      </div>
+    );
+  },
+};

package/src/components/HoverCard/HoverCard.tsx

@@ -0,0 +1,13 @@
+import type { ComponentProps } from 'react';
+import { Root, Trigger } from '@radix-ui/react-hover-card';
+
+import { HoverCardContent } from './HoverCardContent';
+
+type Props = ComponentProps<typeof Root>;
+
+export const HoverCard = ({ openDelay = 200, closeDelay = 200, ...rest }: Props) => (
+  <Root {...rest} openDelay={openDelay} closeDelay={closeDelay} />
+);
+
+HoverCard.Content = HoverCardContent;
+HoverCard.Trigger = Trigger;

package/src/components/HoverCard/HoverCardContent.tsx

@@ -0,0 +1,63 @@
+import type { ComponentPropsWithoutRef, ElementRef, Ref } from 'react';
+import { Content, Portal } from '@radix-ui/react-hover-card';
+
+import { cn } from '../../utils';
+
+type Props = ComponentPropsWithoutRef<typeof Content>;
+
+export const HoverCardContent = ({
+  ref,
+  className,
+  align = 'center',
+  sideOffset = 4,
+  children,
+  ...props
+}: Props & { ref?: Ref<ElementRef<typeof Content>> }) => (
+  <Portal>
+    <Content
+      ref={ref}
+      align={align}
+      sideOffset={sideOffset}
+      data-slot="hover-card-content"
+      className={cn(
+        'tailwindcss-preflight',
+        'tw-group/hover-card-content',
+        'tw-z-50',
+
+        // border
+        'tw-box-border',
+        'tw-border',
+        'tw-border-neutral-150',
+        'tw-rounded-2xl',
+
+        // sizing
+        'tw-min-w-32',
+        'tw-origin-[--radix-hover-card-content-transform-origin]',
+        'tw-max-h-[var(--radix-hover-card-content-available-height)]',
+
+        // styles
+        'tw-bg-white',
+        'tw-p-4',
+        'tw-shadow-md',
+
+        // directional animations
+        'data-[side=bottom]:tw-slide-in-from-top-2',
+        'data-[side=left]:tw-slide-in-from-right-2',
+        'data-[side=right]:tw-slide-in-from-left-2',
+        'data-[side=top]:tw-slide-in-from-bottom-2',
+
+        // animations
+        'data-[state=open]:tw-animate-in',
+        'data-[state=open]:tw-fade-in-0',
+        'data-[state=open]:tw-zoom-in-95',
+        'data-[state=closed]:tw-animate-out',
+        'data-[state=closed]:tw-fade-out-0',
+        'data-[state=closed]:tw-zoom-out-95',
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </Content>
+  </Portal>
+);

package/src/components/HoverCard/index.ts

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

package/src/components/Icon/Icon.stories.tsx

@@ -0,0 +1,26 @@
+import { all } from '@awesome.me/kit-be8bcf7e5e/icons';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { DEFAULT_PREFIX } from './constants';
+import { Icon } from './Icon';
+
+const meta: Meta<typeof Icon> = {
+  component: Icon,
+  argTypes: {
+    icon: {
+      options: all.map(({ prefix, iconName }) =>
+        prefix === DEFAULT_PREFIX ? iconName : [prefix, iconName],
+      ),
+      control: {
+        type: 'select',
+      },
+      description: 'Select an icon from the kit',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Icon>;
+
+export const Generic: Story = {};

package/src/components/Icon/Icon.tsx

@@ -0,0 +1,10 @@
+import type { ElementRef, Ref } from 'react';
+import type { IconName, IconPrefix } from '@awesome.me/kit-be8bcf7e5e/icons';
+import type { IconProp } from '@fortawesome/fontawesome-svg-core';
+import { FontAwesomeIcon, type FontAwesomeIconProps } from '@fortawesome/react-fontawesome';
+
+type Props = Omit<FontAwesomeIconProps, 'icon'> & { icon: IconName | [IconPrefix, IconName] };
+
+export const Icon = ({ ref, icon, ...rest }: Props & { ref?: Ref<ElementRef<'svg'>> }) => (
+  <FontAwesomeIcon {...rest} ref={ref} icon={icon as IconProp} />
+);

package/src/components/Icon/Icons.mdx

@@ -0,0 +1,28 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+import { all } from '@awesome.me/kit-be8bcf7e5e/icons';
+
+import { DEFAULT_PREFIX } from './constants';
+import { Icon } from './Icon';
+import { copyToClipboard } from '../../utils';
+
+<Meta title="Icons" />
+
+# All Icons
+
+Can be configured [here](https://fontawesome.com/kits/be8bcf7e5e/icons). Package must be updated after every change via `yarn workspace @keboola/design up '@awesome.me/kit-be8bcf7e5e@latest'`.
+
+Default subset is `solid` (prefix `fas`) and it can be used without prefix. Other subsets must be prefixed (`['prefix', 'iconName']`).
+
+<div className="tw-grid tw-w-full tw-grid-cols-8 tw-gap-8 tw-pt-12">
+  {[...new Set(all)].map(({ prefix, iconName }) => (
+    <Icon
+      key={`${prefix}-${iconName}`}
+      icon={prefix === DEFAULT_PREFIX ? iconName : [prefix, iconName]}
+      className="tw-cursor-copy tw-bg-neutral-50 tw-text-2xl"
+      title={prefix === DEFAULT_PREFIX ? iconName : `['${prefix}', '${iconName}']`}
+      onClick={() =>
+        copyToClipboard(prefix === DEFAULT_PREFIX ? iconName : `['${prefix}', '${iconName}']`)
+      }
+    />
+  ))}
+</div>

package/src/components/Icon/constants.ts

@@ -0,0 +1 @@
+export const DEFAULT_PREFIX = 'fas';

package/src/components/Icon/index.ts

@@ -0,0 +1,27 @@
+import type { IconName } from '@awesome.me/kit-be8bcf7e5e/icons';
+import { fas } from '@awesome.me/kit-be8bcf7e5e/icons';
+
+export * from './Icon';
+export type { IconName } from '@awesome.me/kit-be8bcf7e5e/icons';
+
+let validIconNames: Set<string> | undefined;
+
+const getValidIconNames = (): Set<string> => {
+  if (validIconNames) return validIconNames;
+  validIconNames = new Set<string>(
+    Object.values(fas).flatMap((def) => {
+      if (
+        def !== null &&
+        typeof def === 'object' &&
+        'iconName' in def &&
+        typeof def.iconName === 'string'
+      ) {
+        return [def.iconName];
+      }
+      return [];
+    }),
+  );
+  return validIconNames;
+};
+
+export const isIconName = (name: string): name is IconName => getValidIconNames().has(name);

package/src/components/Input/DateInput/DateInput.stories.tsx

@@ -0,0 +1,58 @@
+import { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { DateInput } from './DateInput';
+
+type Story = StoryObj<typeof DateInput>;
+
+export default {
+  component: DateInput,
+  args: {
+    allowClear: false,
+    disabled: false,
+    focusVariant: 'off',
+    endMonth: new Date(2050, 11), // Allow dates up to December 2050
+    readOnly: false,
+    startMonth: new Date(1900, 0), // Allow dates from January 1900
+  },
+} satisfies Meta<typeof DateInput>;
+
+const defaultDate = new Date('2026-01-06');
+
+export const Default: Story = {
+  render: (args) => {
+    const [value, setValue] = useState<Date | null>(defaultDate);
+
+    return <DateInput {...args} value={value} onValueChange={setValue} onValueBlur={setValue} />;
+  },
+};
+
+export const Empty: Story = {
+  render: (args) => {
+    const [value, setValue] = useState<Date | null>(null);
+
+    return <DateInput {...args} value={value} onValueChange={setValue} onValueBlur={setValue} />;
+  },
+};
+
+export const Disabled: Story = {
+  render: (args) => {
+    const [value, setValue] = useState<Date | null>(defaultDate);
+
+    return <DateInput {...args} disabled value={value} onValueChange={setValue} />;
+  },
+};
+
+export const ReadOnly: Story = {
+  render: (args) => {
+    const [value, setValue] = useState<Date | null>(defaultDate);
+
+    return <DateInput {...args} readOnly value={value} onValueChange={setValue} />;
+  },
+};
+
+export const Uncontrolled: Story = {
+  render: (args) => {
+    return <DateInput {...args} defaultValue={defaultDate} />;
+  },
+};

package/src/components/Input/DateInput/DateInput.tsx

@@ -0,0 +1,140 @@
+import { useState } from 'react';
+import type { ChangeEventHandler, ComponentProps, ElementRef, FocusEventHandler, Ref } from 'react';
+import type { Matcher } from 'react-day-picker';
+
+import { Button } from '../../Button';
+import { DatePicker } from '../../DatePicker';
+import { Input } from '../Input';
+
+import { formatDate, parseDate } from './helpers';
+
+type InputProps = ComponentProps<typeof Input>;
+
+type Props = Omit<InputProps, 'type' | 'value' | 'defaultValue'> & {
+  defaultValue?: Date | null;
+  disabledDays?: Matcher | Matcher[];
+  endMonth?: Date;
+  onValueBlur?: (value: Date | null) => void;
+  onValueChange?: (value: Date | null) => void;
+  startMonth?: Date;
+  value?: Date | null;
+};
+
+export const DateInput = ({
+  ref,
+  defaultValue,
+  disabled,
+  disabledDays,
+  endMonth,
+  onBlur,
+  onChange,
+  onValueBlur,
+  onValueChange,
+  placeholder = 'Select a date',
+  readOnly,
+  startMonth,
+  value,
+  ...props
+}: Props & { ref?: Ref<ElementRef<'input'>> }) => {
+  const [inputValue, setInputValue] = useState('');
+  const [hasFocus, setHasFocus] = useState(false);
+  const [isOpen, setIsOpen] = useState(false);
+  const [internalValue, setInternalValue] = useState<Date | null>(defaultValue ?? null);
+  const [month, setMonth] = useState<Date>(new Date());
+
+  const isControlled = value !== undefined;
+  const currentValue = isControlled ? value : internalValue;
+
+  const handleChange: ChangeEventHandler<HTMLInputElement> = (event) => {
+    const newValue = event.target.value;
+    setInputValue(newValue);
+    onChange?.(event);
+
+    const parsedDate = parseDate(newValue);
+    if (parsedDate !== null || !newValue.trim()) {
+      onValueChange?.(parsedDate);
+    }
+  };
+
+  const handleFocus: FocusEventHandler<HTMLInputElement> = (event) => {
+    const formatted = formatDate(currentValue, '');
+    setInputValue(formatted);
+    setHasFocus(true);
+    props.onFocus?.(event);
+  };
+
+  const handleBlur: FocusEventHandler<HTMLInputElement> = (event) => {
+    setHasFocus(false);
+    onBlur?.(event);
+
+    const parsedDate = parseDate(event.target.value);
+    onValueBlur?.(parsedDate);
+
+    if (!isControlled) {
+      setInternalValue(parsedDate);
+    }
+  };
+
+  const handleDatePickerChange = (newValue?: Date) => {
+    const dateValue = newValue ?? null;
+
+    if (isControlled) {
+      onValueChange?.(dateValue);
+    } else {
+      setInternalValue(dateValue);
+      onValueChange?.(dateValue);
+    }
+
+    setHasFocus(false);
+    setIsOpen(false);
+  };
+
+  const handleClear = () => {
+    setInputValue('');
+    setInternalValue(null);
+    onValueChange?.(null);
+  };
+
+  const handleOpenChange = (open: boolean) => {
+    if (open) {
+      setMonth(currentValue ?? new Date());
+    }
+    setIsOpen(open);
+  };
+
+  const displayValue = hasFocus ? inputValue : formatDate(currentValue, '');
+
+  return (
+    <Input
+      {...props}
+      disabled={disabled}
+      onBlur={handleBlur}
+      onChange={handleChange}
+      onClear={handleClear}
+      onFocus={handleFocus}
+      placeholder={placeholder}
+      readOnly={readOnly}
+      ref={ref}
+      value={displayValue}
+      rightSuffix={
+        !disabled && !readOnly ? (
+          <DatePicker
+            disabled={disabledDays}
+            endMonth={endMonth}
+            mode="single"
+            month={month}
+            onMonthChange={setMonth}
+            onOpenChange={handleOpenChange}
+            onSelect={handleDatePickerChange}
+            open={isOpen}
+            selected={currentValue ?? undefined}
+            startMonth={startMonth}
+          >
+            <Button aria-label="Select Date" icon="calendar" variant="inline" size="icon-3xs" />
+          </DatePicker>
+        ) : undefined
+      }
+      type="text"
+    />
+  );
+};