@keboola/design 1.0.0

package/src/components/Modal/Modal.tsx

@@ -0,0 +1,23 @@
+import type { ComponentProps } from 'react';
+import { Close, Root, Trigger } from '@radix-ui/react-dialog';
+
+import { ModalBody } from './ModalBody';
+import { ModalContent } from './ModalContent';
+import { ModalFooter } from './ModalFooter';
+import { ModalHeader } from './ModalHeader';
+import { ModalIcon } from './ModalIcon';
+import { ModalOverlay } from './ModalOverlay';
+
+type Props = ComponentProps<typeof Root>;
+
+export const Modal = (props: Props) => <Root {...props} />;
+
+Modal.Close = Close;
+Modal.Trigger = Trigger;
+
+Modal.Content = ModalContent;
+Modal.Body = ModalBody;
+Modal.Icon = ModalIcon;
+Modal.Footer = ModalFooter;
+Modal.Header = ModalHeader;
+Modal.Overlay = ModalOverlay;

package/src/components/Modal/ModalBody.tsx

@@ -0,0 +1,23 @@
+import type { ComponentProps } from 'react';
+
+import { cn } from '../../utils';
+
+type Props = ComponentProps<'div'> & {
+  as?: 'form';
+};
+
+export const ModalBody = ({ className, ...props }: Props) => (
+  <div
+    data-slot="modal-body"
+    className={cn(
+      // scrollable body - takes available space and scrolls when content overflows
+      'tw-flex-1',
+      'tw-overflow-y-auto',
+
+      'tw-px-1', // 4 px to complement ModalContent and still keep input focus outline visible
+      'tw-py-1',
+      className,
+    )}
+    {...props}
+  />
+);

package/src/components/Modal/ModalCloseIcon.tsx

@@ -0,0 +1,32 @@
+import type { ComponentProps } from 'react';
+import { Close } from '@radix-ui/react-dialog';
+
+import { cn } from '../../utils';
+import { Icon } from '../Icon';
+
+type Props = ComponentProps<typeof Close>;
+
+export const ModalCloseIcon = ({ className, ...rest }: Props) => (
+  <Close
+    {...rest}
+    className={cn(
+      'tw-group/modal-close-icon',
+      'tw-flex',
+      'tw-items-center',
+      'tw-justify-center',
+      'focus:tw-outline-none',
+      className,
+    )}
+  >
+    <Icon
+      icon="close"
+      className={cn(
+        'tw-size-4',
+        'tw-text-neutral-400',
+        'group-focus/modal-close-icon:tw-text-neutral-500',
+        'group-hover/modal-close-icon:tw-text-neutral-500',
+      )}
+    />
+    <span className="tw-sr-only">Close</span>
+  </Close>
+);

package/src/components/Modal/ModalContent.tsx

@@ -0,0 +1,87 @@
+import type { ComponentProps } from 'react';
+import { Content, Portal } from '@radix-ui/react-dialog';
+
+import { cn } from '../../utils';
+
+import { ModalOverlay } from './ModalOverlay';
+
+type Props = ComponentProps<typeof Content> & { size?: 'small' | 'medium' | 'large' };
+
+export const ModalContent = ({
+  size = 'medium',
+  className,
+  children,
+  onEscapeKeyDown,
+  ...props
+}: Props) => {
+  const handleEscapeKeyDown: typeof onEscapeKeyDown = (event) => {
+    // Stop propagation to prevent parent modals (like FullScreenModal) from closing
+    event.stopPropagation();
+    onEscapeKeyDown?.(event);
+  };
+
+  return (
+    <Portal>
+      <ModalOverlay>
+        <Content
+          /**
+           * Intentionally set undefined to avoid warning as suggested in docs, (https://www.radix-ui.com/primitives/docs/components/dialog#description)
+           * as of now we don't use modal description anywhere, if we decide to fix this issue, we fix it everywhere at once.
+           */
+          aria-describedby={undefined}
+          className={cn(
+            // reset
+            'tailwindcss-preflight',
+
+            // positioning - centered with viewport-relative constraints
+            'tw-fixed',
+            'tw-left-1/2',
+            'tw-top-20',
+            'tw--translate-x-1/2',
+            'tw-z-[1051]',
+
+            // sizing - responsive max dimensions
+            'tw-w-full',
+            'tw-max-w-2xl',
+            'tw-max-h-[calc(100vh-2*theme(spacing.20))]',
+
+            // layout
+            'tw-flex',
+            'tw-flex-col',
+            'tw-gap-4',
+            'tw-rounded-lg',
+            'tw-bg-white',
+            'tw-px-7', // 4 px less padding to prevent input focus rings/outlines from being clipped by overflow
+            'tw-py-8',
+
+            // opening animation
+            'tw-duration-200',
+            'data-[state=open]:tw-animate-in',
+            'data-[state=open]:tw-fade-in-0',
+            'data-[state=open]:tw-zoom-in-80',
+            'data-[state=open]:tw-slide-in-from-left-1/2',
+            'data-[state=open]:tw-slide-in-from-top-[48%]',
+
+            // closing animation
+            'data-[state=closed]:tw-animate-out',
+            'data-[state=closed]:tw-fade-out-0',
+            'data-[state=closed]:tw-zoom-out-80',
+            'data-[state=closed]:tw-slide-out-to-left-1/2',
+            'data-[state=closed]:tw-slide-out-to-top-[48%]',
+
+            {
+              'tw-max-w-[480px]': size === 'small',
+              'tw-max-w-4xl': size === 'large',
+            },
+
+            className,
+          )}
+          onEscapeKeyDown={handleEscapeKeyDown}
+          {...props}
+        >
+          {children}
+        </Content>
+      </ModalOverlay>
+    </Portal>
+  );
+};

package/src/components/Modal/ModalDescription.tsx

@@ -0,0 +1,20 @@
+import type { ComponentProps } from 'react';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+
+import { cn } from '../../utils';
+
+type Props = ComponentProps<typeof DialogPrimitive.Description>;
+
+export const ModalDescription = ({ className, ...props }: Props) => (
+  <DialogPrimitive.Description
+    className={cn(
+      'tw-text-sm',
+      'tw-font-sans',
+      'tw-tracking-normal',
+      'tw-font-normal',
+      'tw-text-neutral-400',
+      className,
+    )}
+    {...props}
+  />
+);

package/src/components/Modal/ModalFooter.tsx

@@ -0,0 +1,15 @@
+import type { ComponentProps } from 'react';
+
+import { cn } from '../../utils';
+
+type Props = ComponentProps<'div'>;
+
+export const ModalFooter = ({ className, ...props }: Props) => (
+  <div
+    className={cn(
+      'tw-px-1', // 4 px to complement ModalContent and still keep input focus outline visible
+      className,
+    )}
+    {...props}
+  />
+);

package/src/components/Modal/ModalHeader.tsx

@@ -0,0 +1,50 @@
+import type { ComponentProps, ReactNode } from 'react';
+
+import { cn } from '../../utils';
+
+import { ModalCloseIcon } from './ModalCloseIcon';
+import { ModalDescription } from './ModalDescription';
+import { ModalTitle } from './ModalTitle';
+
+type Props = {
+  title?: ReactNode;
+  description?: ReactNode;
+  hideCloseIcon?: boolean;
+} & ComponentProps<'div'>;
+
+export const ModalHeader = ({
+  className,
+  title,
+  description,
+  hideCloseIcon = false,
+  children,
+  ...props
+}: Props) => (
+  <div
+    className={cn(
+      'tw-flex',
+      'tw-flex-col',
+      'tw-gap-3',
+      'tw-pb-5',
+      // Show border separator only if body is visible
+      '[&:has(~[data-slot=modal-body])]:tw-border-b',
+      // Tabs render their own bottom border — drop header border + padding to avoid the double-line look
+      '[&:has(~[data-slot=modal-body]_[data-slot=tabs-root])]:!tw-border-b-0',
+      '[&:has(~[data-slot=modal-body]_[data-slot=tabs-root])]:!tw-pb-0',
+      'tw-border-neutral-150',
+      'tw-px-1', // 4 px to complement ModalContent and still keep input focus outline visible
+      className,
+    )}
+    {...props}
+  >
+    <div className="tw-flex tw-flex-col">
+      <div className="tw-flex tw-justify-end tw-gap-2">
+        {title && <ModalTitle>{title}</ModalTitle>}
+        {!hideCloseIcon && <ModalCloseIcon />}
+      </div>
+      {description && <ModalDescription>{description}</ModalDescription>}
+    </div>
+
+    {children}
+  </div>
+);

package/src/components/Modal/ModalIcon.tsx

@@ -0,0 +1,83 @@
+import { useState } from 'react';
+import type { ComponentProps } from 'react';
+
+import { cn } from '../../utils';
+import { Icon } from '../Icon';
+
+type NamedColor = 'orange' | 'blue' | 'red' | 'green' | 'gray' | 'violet';
+
+type IconProps = Omit<ComponentProps<typeof Icon>, 'className'> & {
+  color: NamedColor | (string & {});
+  iconUrl?: never;
+  iconAlt?: never;
+};
+
+type ImageProps = {
+  color?: never;
+  iconUrl: string;
+  iconAlt?: string;
+  icon?: never;
+};
+
+type Props = IconProps | ImageProps;
+
+const NAMED_COLORS = new Set<string>(['orange', 'blue', 'red', 'green', 'gray', 'violet']);
+
+export const ModalIcon = ({ color, ...props }: Props) => {
+  const [hasImageError, setHasImageError] = useState(false);
+
+  if ('iconUrl' in props && hasImageError) {
+    return null;
+  }
+
+  return (
+    <div
+      className={cn('tw-absolute', 'tw-top-0', 'tw-left-8', 'tw-translate-y-[-50%]', 'tw-size-12')}
+    >
+      {'iconUrl' in props ? (
+        <img
+          src={props.iconUrl}
+          alt={props.iconAlt ?? 'Modal icon'}
+          className="tw-size-full tw-rounded-full tw-object-contain"
+          onError={() => setHasImageError(true)}
+        />
+      ) : (
+        <div
+          className={cn('tw-relative', 'tw-rounded-full', 'tw-size-12', {
+            'tw-bg-warning-500': color === 'orange',
+            'tw-bg-secondary-500': color === 'blue',
+            'tw-bg-primary-500': color === 'green',
+            'tw-bg-error-500': color === 'red',
+            'tw-bg-neutral-150': color === 'gray',
+            'tw-bg-purple-100': color === 'violet',
+          })}
+          style={color && !NAMED_COLORS.has(color) ? { backgroundColor: color } : undefined}
+        >
+          {/* Icon spinning uses CSS transforms, which conflict with center positioning, so a wrapper should be used */}
+          <span
+            className={cn(
+              'tw-absolute',
+              'tw-size-full',
+              'tw-flex',
+              'tw-items-center',
+              'tw-justify-center',
+              'tw-top-1/2',
+              'tw-left-1/2',
+              '-tw-translate-x-1/2',
+              '-tw-translate-y-1/2',
+            )}
+          >
+            <Icon
+              className={cn(
+                { 'tw-text-white': color !== 'violet', 'tw-text-purple-500': color === 'violet' },
+                'tw-size-6',
+                'tw-aspect-square',
+              )}
+              {...props}
+            />
+          </span>
+        </div>
+      )}
+    </div>
+  );
+};

package/src/components/Modal/ModalOverlay.tsx

@@ -0,0 +1,42 @@
+import type { ComponentProps, ElementRef, Ref } from 'react';
+import { Overlay } from '@radix-ui/react-dialog';
+
+import { cn } from '../../utils';
+
+type Props = ComponentProps<typeof Overlay> & {
+  disableTransition?: boolean;
+};
+
+export const ModalOverlay = ({
+  ref,
+  className,
+  disableTransition = false,
+  ...props
+}: Props & { ref?: Ref<ElementRef<'div'>> }) => (
+  <Overlay
+    {...props}
+    ref={ref}
+    className={cn(
+      // positioning
+      'tw-fixed',
+      'tw-inset-0',
+      'tw-z-[1051]',
+
+      // background
+      'tw-bg-black/50',
+
+      // opening animation
+      'data-[state=open]:tw-duration-500',
+      'data-[state=open]:tw-fade-in-0',
+
+      // closing animation
+      'data-[state=closed]:tw-duration-500',
+      'data-[state=closed]:tw-fade-out-0',
+      {
+        'data-[state=open]:tw-animate-in data-[state=closed]:tw-animate-out': !disableTransition,
+      },
+      className,
+    )}
+    onClick={(event) => event.stopPropagation()}
+  />
+);

package/src/components/Modal/ModalTitle.tsx

@@ -0,0 +1,12 @@
+import type { ComponentProps } from 'react';
+import { Title } from '@radix-ui/react-dialog';
+
+import { cn } from '../../utils';
+
+type Props = ComponentProps<typeof Title>;
+
+export const ModalTitle = ({ children, className, ...props }: Props) => (
+  <Title {...props} asChild className={cn('tw-flex-1 tw-break-anywhere', className)}>
+    <h3>{children}</h3>
+  </Title>
+);

package/src/components/Modal/index.ts

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

package/src/components/Navbar/Navbar.stories.tsx

@@ -0,0 +1,179 @@
+import type { ComponentProps } from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { Icon } from '../Icon';
+
+import { Navbar } from './Navbar';
+
+type NavbarProps = ComponentProps<typeof Navbar>;
+type Accent = NonNullable<NavbarProps['accent']>;
+
+const accents: Accent[] = ['blue', 'purple', 'orange', 'green'];
+
+export default {
+  component: Navbar,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  args: {
+    accent: 'blue',
+    bordered: false,
+  },
+  argTypes: {
+    accent: {
+      control: { type: 'radio' },
+      options: accents,
+    },
+  },
+  decorators: [
+    (StoryFn) => (
+      <div className="tailwindcss-preflight tw-flex tw-h-svh tw-w-svw tw-flex-col tw-gap-1 tw-bg-neutral-50">
+        <StoryFn />
+        <main className="tw-mx-2 tw-flex tw-h-96 tw-items-center tw-justify-center tw-rounded-2xl tw-bg-white tw-text-4xl">
+          Keboola UI
+        </main>
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof Navbar>;
+
+type Story = StoryObj<typeof Navbar>;
+
+export const Default: Story = {
+  render: (props) => (
+    <Navbar {...props}>
+      <Navbar.Header>
+        <Navbar.MenuItemAdornment variant="icon" asChild>
+          <Icon icon={['fak', 'keboola']} className="!tw-size-8 !tw-p-0" />
+        </Navbar.MenuItemAdornment>
+      </Navbar.Header>
+
+      <Navbar.Content>
+        <Navbar.Menu marker="forward-slash">
+          <Navbar.MenuItem>
+            <Navbar.MenuButton variant="emphasized" icon={['far', 'diamonds-4']}>
+              Project
+              <Icon icon={['far', 'angles-up-down']} />
+            </Navbar.MenuButton>
+          </Navbar.MenuItem>
+          <Navbar.MenuItem>
+            <Navbar.MenuButton icon={['far', 'diamond']}>
+              Branch
+              <Icon icon={['far', 'angles-up-down']} />
+            </Navbar.MenuButton>
+          </Navbar.MenuItem>
+        </Navbar.Menu>
+      </Navbar.Content>
+      <Navbar.Footer>
+        <Navbar.Menu>
+          <Navbar.MenuItem>
+            <Navbar.MenuButton variant="search" icon="search">
+              Search
+              <Navbar.MenuItemAdornment variant="shortcut">/</Navbar.MenuItemAdornment>
+            </Navbar.MenuButton>
+          </Navbar.MenuItem>
+
+          <Navbar.MenuItem>
+            <Navbar.MenuButton variant="icon" icon="bell" aria-label="Notifications" />
+          </Navbar.MenuItem>
+
+          <Navbar.MenuItem>
+            <Navbar.MenuAvatar />
+          </Navbar.MenuItem>
+        </Navbar.Menu>
+      </Navbar.Footer>
+    </Navbar>
+  ),
+};
+
+const items = Array.from({ length: 100 }, (_, i) => `Item ${i + 1}`);
+
+export const ContentScrolling: Story = {
+  render: (props) => (
+    <Navbar {...props}>
+      <Navbar.Header>
+        <Navbar.Menu>
+          <Navbar.MenuItem>
+            <Icon icon={['fak', 'keboola']} className="tw-mx-2 !tw-size-8 tw-text-secondary-500" />
+          </Navbar.MenuItem>
+        </Navbar.Menu>
+      </Navbar.Header>
+      <Navbar.Content>
+        <Navbar.Menu marker="forward-slash">
+          {items.map((item) => (
+            <Navbar.MenuItem key={item}>
+              <Navbar.MenuButton icon={['far', 'diamond']}>
+                {item}
+                <Icon icon={['far', 'angles-up-down']} />
+              </Navbar.MenuButton>
+            </Navbar.MenuItem>
+          ))}
+        </Navbar.Menu>
+      </Navbar.Content>
+      <Navbar.Footer>
+        <Navbar.Menu>
+          <Navbar.MenuItem>
+            <Navbar.MenuButton variant="search">Search keboola</Navbar.MenuButton>
+          </Navbar.MenuItem>
+          <Navbar.MenuItem>
+            <Navbar.MenuButton>JZ</Navbar.MenuButton>
+          </Navbar.MenuItem>
+        </Navbar.Menu>
+      </Navbar.Footer>
+    </Navbar>
+  ),
+};
+
+export const MenuItems: Story = {
+  render: (props) => (
+    <Navbar {...props}>
+      <Navbar.Content>
+        <Navbar.Menu>
+          <Navbar.MenuItem>
+            <Navbar.MenuButton icon={['far', 'diamond']}>Default</Navbar.MenuButton>
+          </Navbar.MenuItem>
+          <Navbar.MenuItem>
+            <Navbar.MenuButton icon={['far', 'diamond']} asChild>
+              <a href="https://www.keboola.com">Default - Anchor</a>
+            </Navbar.MenuButton>
+          </Navbar.MenuItem>
+
+          <Navbar.MenuItem>
+            <Navbar.MenuButton disabled icon={['far', 'diamond']}>
+              Default - Disabled
+            </Navbar.MenuButton>
+          </Navbar.MenuItem>
+
+          <Navbar.MenuItem>
+            <Navbar.MenuButton variant="emphasized" icon={['far', 'diamond']}>
+              Emphasized
+            </Navbar.MenuButton>
+          </Navbar.MenuItem>
+
+          <Navbar.MenuItem>
+            <Navbar.MenuButton variant="emphasized" icon={['far', 'diamond']} asChild>
+              <a href="https://www.keboola.com">Emphasized - Anchor</a>
+            </Navbar.MenuButton>
+          </Navbar.MenuItem>
+
+          <Navbar.MenuItem>
+            <Navbar.MenuButton disabled variant="emphasized" icon={['far', 'diamond']}>
+              Emphasized - Disabled
+            </Navbar.MenuButton>
+          </Navbar.MenuItem>
+
+          <Navbar.MenuItem>
+            <Navbar.MenuButton variant="search">
+              Search
+              <Navbar.MenuItemAdornment variant="shortcut">/</Navbar.MenuItemAdornment>
+            </Navbar.MenuButton>
+          </Navbar.MenuItem>
+
+          <Navbar.MenuItem>
+            <Navbar.MenuAvatar />
+          </Navbar.MenuItem>
+        </Navbar.Menu>
+      </Navbar.Content>
+    </Navbar>
+  ),
+};

package/src/components/Navbar/Navbar.tsx

@@ -0,0 +1,80 @@
+import type { ComponentProps } from 'react';
+import type { VariantProps } from 'class-variance-authority';
+import { cva } from 'class-variance-authority';
+
+import { NavbarContent } from './NavbarContent';
+import { NavbarFooter } from './NavbarFooter';
+import { NavbarHeader } from './NavbarHeader';
+import { NavbarMenu } from './NavbarMenu';
+import { NavbarMenuAvatar } from './NavbarMenuAvatar';
+import { NavbarMenuButton } from './NavbarMenuButton';
+import { NavbarMenuItem } from './NavbarMenuItem';
+import { NavbarMenuItemAdornment } from './NavbarMenuItemAdornment';
+
+const navbarClassnames = cva(
+  [
+    'tailwindcss-preflight',
+    'tw-group/navbar',
+    'tw-sticky',
+    'tw-top-0',
+    'tw-z-50',
+    'tw-flex',
+    'tw-gap-2',
+    'tw-items-center',
+
+    // The left side is intentionally smaller to align the logo with the sidebar icons.
+    'tw-pl-2',
+    'tw-pr-3',
+
+    'tw-bg-white',
+    'tw-text-xs',
+    'tw-leading-4',
+  ],
+  {
+    defaultVariants: {
+      bordered: false,
+    },
+    variants: {
+      bordered: {
+        true: [
+          'before:tw-content',
+          'before:tw-h-0.5',
+          'before:tw-w-full',
+          'before:tw-absolute',
+          'before:tw-left-0',
+          'before:tw-top-0',
+          'before:data-[accent=blue]:tw-bg-sidebar-primary',
+          'before:data-[accent=purple]:tw-bg-purple-500',
+          'before:data-[accent=green]:tw-bg-primary-500',
+          'before:data-[accent=orange]:tw-bg-warning-500',
+        ],
+        false: '',
+      },
+    },
+  },
+);
+
+type Props = ComponentProps<'header'> &
+  VariantProps<typeof navbarClassnames> & {
+    accent?: 'blue' | 'purple' | 'green' | 'orange';
+  };
+
+/**
+ * WIP: The design is not yet complete, and the implementation is far from finished. Please do not use it.
+ * As of now, its usage is hidden behind the feature flag `sidebar-navigation`.
+ * Will be based on radix, which handles accessibility: https://www.radix-ui.com/primitives/docs/components/navigation-menu
+ * Design (WIP), missing a lot of actual cases: https://www.figma.com/design/HEBm5hXa4AIxcCh5PGKoF9/Main-Navigation?node-id=1568-1126&t=s3RREpciWrKQTL8p-0
+ */
+export const Navbar = ({ className, accent = 'blue', bordered = false, ...rest }: Props) => (
+  <header {...rest} data-accent={accent} className={navbarClassnames({ bordered, className })} />
+);
+
+Navbar.Header = NavbarHeader;
+Navbar.Footer = NavbarFooter;
+Navbar.Content = NavbarContent;
+
+Navbar.Menu = NavbarMenu;
+Navbar.MenuItem = NavbarMenuItem;
+Navbar.MenuButton = NavbarMenuButton;
+Navbar.MenuItemAdornment = NavbarMenuItemAdornment;
+Navbar.MenuAvatar = NavbarMenuAvatar;

package/src/components/Navbar/NavbarContent.tsx

@@ -0,0 +1,20 @@
+import type { ReactNode } from 'react';
+
+import { cn } from '../../utils';
+import { ScrollArea } from '../ScrollArea';
+
+type Props = {
+  className?: string;
+  children?: ReactNode;
+};
+
+export const NavbarContent = ({ children, className }: Props) => (
+  <ScrollArea
+    type="auto"
+    orientation="horizontal"
+    className="tw-flex-1"
+    scrollBarClassName="tw-h-1.5"
+  >
+    <div className={cn('tw-flex', 'tw-py-1.5', className)}>{children}</div>
+  </ScrollArea>
+);