@keboola/design 2.0.0 → 2.1.0

package/src/components/Navbar/Navbar.tsx

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

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

package/src/components/Navbar/NavbarFooter.tsx

@@ -1,11 +0,0 @@
-import type { ComponentProps } from 'react';
-
-import { cn } from '../../utils';
-
-type Props = ComponentProps<'div'>;
-
-export const NavbarFooter = ({ children, className, ...rest }: Props) => (
-  <div {...rest} className={cn('tw-py-1.5', className)}>
-    {children}
-  </div>
-);

package/src/components/Navbar/NavbarHeader.tsx

@@ -1,11 +0,0 @@
-import type { ComponentProps } from 'react';
-
-import { cn } from '../../utils';
-
-type Props = ComponentProps<'div'>;
-
-export const NavbarHeader = ({ children, className, ...rest }: Props) => (
-  <div {...rest} className={cn('tw-overflow-hidden', 'tw-py-1.5', className)}>
-    {children}
-  </div>
-);

package/src/components/Navbar/NavbarMenu.tsx

@@ -1,30 +0,0 @@
-import type { ComponentProps } from 'react';
-import type { VariantProps } from 'class-variance-authority';
-import { cva } from 'class-variance-authority';
-
-const variants = cva(['tw-p-0', 'tw-flex', 'tw-items-center', 'tw-justify-center', 'tw-gap-2'], {
-  variants: {
-    marker: {
-      none: [],
-      'forward-slash': [
-        // Style all li children with pseudo-element marker
-        '[&_li]:tw-flex',
-        '[&_li]:tw-items-center',
-        '[&_li]:before:tw-content-["/"]',
-        '[&_li]:before:tw-text-border',
-        '[&_li]:before:tw-text-sm',
-        '[&_li]:before:tw-mr-0.5',
-        '[&_li:not(:first-child)]:before:tw-ml-0.5',
-      ],
-    },
-  },
-  defaultVariants: {
-    marker: 'none',
-  },
-});
-
-type Props = ComponentProps<'ul'> & VariantProps<typeof variants>;
-
-export const NavbarMenu = ({ className, marker, ...rest }: Props) => (
-  <ul {...rest} className={variants({ marker, className })} />
-);

package/src/components/Navbar/NavbarMenuAvatar.tsx

@@ -1,67 +0,0 @@
-import type { ComponentProps, ElementRef, Ref } from 'react';
-import * as RadixAvatar from '@radix-ui/react-avatar';
-import BoringAvatar from 'boring-avatars';
-
-import { cn } from '@keboola/design';
-
-type Props = ComponentProps<'button'> & {
-  src?: string;
-  alt?: string;
-};
-
-export const NavbarMenuAvatar = ({
-  ref,
-  className,
-  type = 'button',
-  src,
-  alt,
-  ...rest
-}: Props & { ref?: Ref<ElementRef<'button'>> }) => {
-  const altText = alt ?? 'Avatar';
-
-  return (
-    <button
-      {...rest}
-      ref={ref}
-      type={type}
-      className={cn(
-        'tw-flex',
-        'tw-items-center',
-        'tw-justify-center',
-        'tw-size-8',
-
-        'tw-aspect-square',
-        'tw-overflow-hidden',
-        'tw-shrink-0',
-
-        'tw-rounded-lg',
-        'tw-bg-transparent',
-        'tw-cursor-pointer',
-
-        // Disabled state
-        'disabled:tw-opacity-50',
-        'disabled:tw-cursor-not-allowed',
-
-        // Focus-visible (matches SidebarMenuButton exactly)
-        'focus-visible:tw-outline-none',
-        'focus-visible:tw-ring-2',
-        'focus-visible:tw-ring-sidebar-ring/50',
-        className,
-      )}
-    >
-      <RadixAvatar.Root>
-        <RadixAvatar.Image src={src} alt={altText} className="tw-size-full tw-object-cover" />
-
-        <RadixAvatar.Fallback asChild>
-          <BoringAvatar
-            square
-            name={altText}
-            variant="beam"
-            colors={['#1F8FFF', '#004787', '#28D8FF', '#925cff', '#A8C2E6']}
-            size={32}
-          />
-        </RadixAvatar.Fallback>
-      </RadixAvatar.Root>
-    </button>
-  );
-};

package/src/components/Navbar/NavbarMenuButton.tsx

@@ -1,135 +0,0 @@
-import type { ComponentProps, ElementRef, ReactNode, Ref } from 'react';
-import { Root, Slottable } from '@radix-ui/react-slot';
-import type { VariantProps } from 'class-variance-authority';
-import { cva } from 'class-variance-authority';
-
-import { cn } from '@keboola/design';
-import { Search } from '@keboola/design/icons';
-
-import { renderLegacyIcon } from '../../utils/legacyIcon';
-
-import { NavbarMenuItemAdornment } from './NavbarMenuItemAdornment';
-
-const variants = cva(
-  [
-    'tw-group/navbar-menu-button',
-    'tw-box-border',
-    'tw-flex',
-    'tw-items-center',
-    'tw-gap-2',
-    'tw-bg-transparent',
-
-    'tw-leading-9',
-
-    'tw-border',
-    'tw-rounded-lg',
-    'tw-whitespace-nowrap',
-    'tw-select-none',
-
-    // focus-visible
-    '!tw-outline-none',
-    'focus-visible:tw-ring-2',
-    'focus-visible:tw-ring-sidebar-ring/50',
-
-    // disabled
-    'disabled:tw-opacity-50',
-    'disabled:hover:tw-bg-transparent',
-    'disabled:tw-cursor-not-allowed',
-  ],
-  {
-    defaultVariants: {
-      variant: 'default',
-    },
-    variants: {
-      variant: {
-        default: [
-          'tw-max-h-9',
-          'tw-border-transparent',
-          'tw-py-2',
-          'tw-px-1.5',
-          'tw-text-sidebar-foreground',
-          'hover:tw-bg-sidebar-accent',
-          'aria-expanded:tw-bg-sidebar-accent',
-        ],
-        emphasized: [
-          'tw-max-h-9',
-          'tw-border-transparent',
-          'tw-py-2',
-          'tw-px-1.5',
-
-          'tw-text-sidebar-foreground',
-          'hover:tw-bg-sidebar-accent',
-          'aria-expanded:tw-bg-sidebar-accent',
-
-          'tw-font-semibold',
-        ],
-        icon: [
-          'tw-size-8',
-          'tw-aspect-square',
-          'tw-justify-center',
-          'tw-font-normal',
-          'tw-border-transparent',
-          'tw-text-secondary-500',
-          '[&_svg]:!tw-text-secondary-500',
-          'hover:tw-bg-sidebar-accent',
-          'aria-expanded:tw-bg-sidebar-accent',
-        ],
-        search: [
-          'tw-max-h-8',
-          'tw-min-w-52',
-          'tw-px-3',
-          'tw-py-1',
-          'tw-text-neutral-400',
-          'tw-font-normal',
-          'tw-border-input',
-          'tw-text-muted-foreground',
-          '[&_svg]:!tw-text-muted-foreground',
-        ],
-      },
-    },
-  },
-);
-
-type Props = ComponentProps<'button'> & {
-  /** Optional leading-icon slot. Pass a Lucide icon node to render an adornment before children. */
-  icon?: ReactNode;
-  asChild?: boolean;
-} & VariantProps<typeof variants>;
-
-export const NavbarMenuButton = ({
-  ref,
-  className,
-  type = 'button',
-  children,
-  icon,
-  asChild = false,
-  variant = 'default',
-  ...rest
-}: Props & { ref?: Ref<ElementRef<'button'>> }) => {
-  const Comp = asChild ? Root : 'button';
-  const isSearchVariant = variant === 'search';
-  const isEmphasizedVariant = variant === 'emphasized';
-  const adornment = isSearchVariant ? <Search /> : renderLegacyIcon(icon);
-
-  const adornmentVariant: ComponentProps<typeof NavbarMenuItemAdornment>['variant'] = (() => {
-    if (isSearchVariant || variant === 'icon') return 'icon-button';
-    if (isEmphasizedVariant) return 'icon-accent-emphasized';
-    return 'icon-accent';
-  })();
-
-  return (
-    <Comp
-      {...rest}
-      ref={ref}
-      type={type}
-      data-variant={variant}
-      className={cn(variants({ className, variant }))}
-    >
-      {adornment && (
-        <NavbarMenuItemAdornment variant={adornmentVariant}>{adornment}</NavbarMenuItemAdornment>
-      )}
-
-      <Slottable>{children}</Slottable>
-    </Comp>
-  );
-};

package/src/components/Navbar/NavbarMenuItem.tsx

@@ -1,9 +0,0 @@
-import type { ComponentProps } from 'react';
-
-import { cn } from '../../utils';
-
-type Props = ComponentProps<'li'>;
-
-export const NavbarMenuItem = ({ className, ...rest }: Props) => (
-  <li {...rest} className={cn('tw-flex', 'tw-items-center', 'tw-gap-2', className)} />
-);

package/src/components/Navbar/NavbarMenuItemAdornment.tsx

@@ -1,65 +0,0 @@
-import type { ComponentProps, ElementRef, Ref } from 'react';
-import { Slot } from '@radix-ui/react-slot';
-import type { VariantProps } from 'class-variance-authority';
-import { cva } from 'class-variance-authority';
-
-const variants = cva(
-  [
-    'tw-flex',
-    'tw-justify-center',
-    'tw-items-center',
-
-    '[&_svg]:tw-size-3',
-    '[&:not(svg)]:tw-h-5',
-    '[&:not(svg)]:tw-min-w-5',
-
-    'tw-p-1',
-    'tw-aspect-square',
-    'tw-rounded-md',
-  ],
-  {
-    defaultVariants: { variant: 'icon-accent' },
-    variants: {
-      variant: {
-        icon: ['tw-text-sidebar-foreground', '[&_svg]:tw-text-sidebar-foreground'],
-        'icon-emphasized': ['tw-text-white', '[&_svg]:tw-text-white'],
-        'icon-accent': [
-          // color-aware accent styling
-          'group-data-[accent=blue]/navbar:tw-text-sidebar-primary',
-          'group-data-[accent=blue]/navbar:[&_svg]:tw-text-sidebar-primary',
-          'group-data-[accent=purple]/navbar:tw-text-purple-500',
-          'group-data-[accent=purple]/navbar:[&_svg]:tw-text-purple-500',
-          'group-data-[accent=orange]/navbar:tw-text-warning-500',
-          'group-data-[accent=orange]/navbar:[&_svg]:tw-text-warning-500',
-          'group-data-[accent=green]/navbar:tw-text-primary-500',
-          'group-data-[accent=green]/navbar:[&_svg]:tw-text-primary-500',
-        ],
-        'icon-accent-emphasized': [
-          'tw-text-white',
-          '[&_svg]:tw-text-white',
-
-          'group-data-[accent=blue]/navbar:tw-bg-sidebar-primary',
-          'group-data-[accent=purple]/navbar:tw-bg-purple-500',
-          'group-data-[accent=orange]/navbar:tw-bg-warning-500',
-          'group-data-[accent=green]/navbar:tw-bg-primary-500',
-        ],
-        'icon-button': ['tw-size-4', 'tw-max-h-9', 'tw-leading-9', 'tw-p-0'],
-        shortcut: ['tw-bg-muted', 'tw-text-sidebar-foreground', 'tw-ml-auto'],
-      },
-    },
-  },
-);
-
-type Props = { asChild?: boolean } & ComponentProps<'span'> & VariantProps<typeof variants>;
-
-export const NavbarMenuItemAdornment = ({
-  ref,
-  asChild = false,
-  className,
-  variant = 'icon-accent',
-  ...props
-}: Props & { ref?: Ref<ElementRef<'span'>> }) => {
-  const Comp = asChild ? Slot : 'span';
-
-  return <Comp {...props} ref={ref} className={variants({ variant, className })} />;
-};

package/src/components/Navbar/index.ts

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

package/src/components/Pagination/Pagination.stories.tsx

@@ -1,131 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-
-import { Label } from '../Label';
-import { Select } from '../Select';
-
-import { Pagination } from './Pagination';
-
-export default {
-  component: Pagination,
-  parameters: {
-    layout: 'centered',
-  },
-} satisfies Meta<typeof Pagination>;
-
-type Story = StoryObj<typeof Pagination>;
-
-/**
- * A simple pagination with only page numbers.
- */
-export const Default: Story = {
-  render: () => (
-    <Pagination>
-      <Pagination.Content>
-        <Pagination.Item>
-          <Pagination.Button>1</Pagination.Button>
-        </Pagination.Item>
-        <Pagination.Item>
-          <Pagination.Button active>2</Pagination.Button>
-        </Pagination.Item>
-        <Pagination.Item>
-          <Pagination.Button>3</Pagination.Button>
-        </Pagination.Item>
-        <Pagination.Item>
-          <Pagination.Button>4</Pagination.Button>
-        </Pagination.Item>
-        <Pagination.Item>
-          <Pagination.Button>5</Pagination.Button>
-        </Pagination.Item>
-      </Pagination.Content>
-    </Pagination>
-  ),
-};
-
-/**
- * Use just the previous and next buttons without page numbers. This is useful for data tables with a rows per page selector.
- */
-export const FirstPage: Story = {
-  render: () => (
-    <Pagination>
-      <Pagination.Content>
-        <Pagination.Item>
-          <Pagination.Previous />
-        </Pagination.Item>
-
-        <Pagination.Item>
-          <Pagination.Next />
-        </Pagination.Item>
-      </Pagination.Content>
-    </Pagination>
-  ),
-};
-
-/** Use ellipsis with many pages */
-export const ManyPages: Story = {
-  render: () => (
-    <Pagination>
-      <Pagination.Content>
-        <Pagination.Item>
-          <Pagination.Previous />
-        </Pagination.Item>
-        <Pagination.Item>
-          <Pagination.Button>1</Pagination.Button>
-        </Pagination.Item>
-        <Pagination.Item>
-          <Pagination.Button>2</Pagination.Button>
-        </Pagination.Item>
-        <Pagination.Item>
-          <Pagination.Ellipsis />
-        </Pagination.Item>
-        <Pagination.Item>
-          <Pagination.Button>6</Pagination.Button>
-        </Pagination.Item>
-        <Pagination.Item>
-          <Pagination.Button active>7</Pagination.Button>
-        </Pagination.Item>
-        <Pagination.Item>
-          <Pagination.Next />
-        </Pagination.Item>
-      </Pagination.Content>
-    </Pagination>
-  ),
-};
-
-/*
- * Use just the previous and next buttons without page numbers.
- * This is useful for data tables with a rows per page selector.
- */
-export const RowsPerPage: Story = {
-  render: () => (
-    <div className="tw-flex tw-items-center tw-gap-2">
-      <div className="tw-flex tw-items-center tw-gap-2">
-        <Label htmlFor="rows-per-page" className="tw-whitespace-nowrap">
-          Rows per page:
-        </Label>
-        <Select
-          variant="argo"
-          id="rows-per-page"
-          className="tw-min-w-20"
-          defaultValue="5"
-          items={[
-            { value: '5', label: '5' },
-            { value: '10', label: '10' },
-            { value: '15', label: '15' },
-            { value: '20', label: '20' },
-          ]}
-        />
-      </div>
-
-      <Pagination>
-        <Pagination.Content>
-          <Pagination.Item>
-            <Pagination.Previous />
-          </Pagination.Item>
-          <Pagination.Item>
-            <Pagination.Next />
-          </Pagination.Item>
-        </Pagination.Content>
-      </Pagination>
-    </div>
-  ),
-};

package/src/components/Pagination/Pagination.tsx

@@ -1,34 +0,0 @@
-import type { ComponentProps } from 'react';
-
-import { cn } from '../../utils';
-
-import { PaginationButton } from './PaginationButton';
-import { PaginationContent } from './PaginationContent';
-import { PaginationEllipsis } from './PaginationEllipsis';
-import { PaginationItem } from './PaginationItem';
-import { PaginationNext } from './PaginationNext';
-import { PaginationPrevious } from './PaginationPrevious';
-
-type Props = ComponentProps<'nav'>;
-
-export const Pagination = ({ className, ...props }: Props) => (
-  <nav
-    {...props}
-    aria-label="pagination"
-    className={cn(
-      'tailwindcss-preflight',
-      'tw-mx-auto',
-      'tw-flex',
-      'tw-w-full',
-      'tw-justify-center',
-      className,
-    )}
-  />
-);
-
-Pagination.Content = PaginationContent;
-Pagination.Item = PaginationItem;
-Pagination.Button = PaginationButton;
-Pagination.Previous = PaginationPrevious;
-Pagination.Next = PaginationNext;
-Pagination.Ellipsis = PaginationEllipsis;

package/src/components/Pagination/PaginationButton.tsx

@@ -1,36 +0,0 @@
-import type { ComponentProps, ElementRef, Ref } from 'react';
-
-import { cn } from '../../utils';
-import { Button } from '../Button';
-
-type Props = {
-  active?: boolean;
-} & Omit<ComponentProps<typeof Button>, 'argo' | 'variant'>;
-
-export const PaginationButton = ({
-  ref,
-  active: isActive = false,
-  className,
-  children,
-  size = 'icon',
-  ...props
-}: Props & { ref?: Ref<ElementRef<'button'>> }) => (
-  <Button
-    {...props}
-    ref={ref}
-    argo
-    variant="invisible"
-    size={size}
-    data-slot="pagination-link"
-    aria-current={isActive ? 'page' : undefined}
-    data-active={isActive}
-    className={cn(
-      'data-[active=true]:tw-bg-accent',
-      'data-[active=true]:tw-text-accent-foreground',
-      'data-[active=true]:tw-border-accent',
-      className,
-    )}
-  >
-    {children}
-  </Button>
-);

package/src/components/Pagination/PaginationContent.tsx

@@ -1,12 +0,0 @@
-import type { ComponentProps } from 'react';
-
-import { cn } from '../../utils';
-
-type Props = ComponentProps<'ul'>;
-
-export const PaginationContent = ({ className, ...props }: Props) => (
-  <ul
-    {...props}
-    className={cn('tw-flex', 'tw-flex-row', 'tw-items-center', 'tw-gap-1', className)}
-  />
-);

package/src/components/Pagination/PaginationEllipsis.tsx

@@ -1,26 +0,0 @@
-import type { ComponentProps } from 'react';
-
-import { Ellipsis } from '../../icons';
-import { cn } from '../../utils';
-
-type Props = ComponentProps<'span'>;
-
-export const PaginationEllipsis = ({ className, ...props }: Props) => (
-  <span
-    aria-hidden="true"
-    className={cn(
-      // layout
-      'tw-flex',
-      'tw-p-2.5',
-      'tw-items-center',
-      'tw-justify-center',
-
-      'tw-text-foreground',
-      '[&_svg]:tw-size-4',
-      className,
-    )}
-    {...props}
-  >
-    <Ellipsis />
-  </span>
-);