@keboola/design 2.0.1 → 3.0.0

package/src/components/Command/Command.stories.tsx

@@ -1,367 +0,0 @@
-import { useState } from 'react';
-import type { ComponentProps, ReactNode } from 'react';
-import type { Meta, StoryObj } from '@storybook/react-vite';
-
-import {
-  ArrowLeft,
-  Copy,
-  Eye,
-  Gauge,
-  Gift,
-  Layers,
-  Link as LinkIcon,
-  Plus,
-  Search,
-  Settings,
-  Star,
-  Wrench,
-  Zap,
-} from '@keboola/design/icons';
-
-import { Button } from '../Button';
-import { Modal } from '../Modal';
-import { Popover } from '../Popover';
-
-import { Command } from './Command';
-
-type Item = {
-  value: string;
-  label: string;
-  icon?: ReactNode;
-};
-
-const planets: Item[] = [
-  { icon: <Gift />, value: 'earth', label: 'Earth' },
-  { icon: <Eye />, value: 'saturn', label: 'Saturn' },
-  { icon: <Wrench />, value: 'jupiter', label: 'Jupiter' },
-  { value: 'mars', label: 'Mars', icon: <Zap /> },
-];
-
-const colors: Item[] = [
-  { icon: <Settings />, value: 'red', label: 'Red' },
-  { icon: <LinkIcon />, value: 'green', label: 'Green' },
-  { icon: <ArrowLeft />, value: 'blue', label: 'Blue' },
-];
-
-/**
- * Searchable list of items. It can be used for various searchable menus, combo boxes, and more.
- */
-const meta = {
-  component: Command,
-  args: {
-    className: 'tw-flex tw-flex-col tw-gap-2',
-  },
-  argTypes: {
-    variant: {
-      control: 'select',
-      options: ['default', 'argo'],
-    },
-  },
-} satisfies Meta<typeof Command>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  render: (args) => (
-    <Command {...args}>
-      <Command.Input variant="secondary" placeholder="Type a command or search..." />
-
-      <Command.Empty>No command found. Try searching for something else.</Command.Empty>
-      <Command.List>
-        {planets.map((item) => (
-          <Command.Item icon={item.icon} key={item.value} value={item.value}>
-            {item.label}
-          </Command.Item>
-        ))}
-      </Command.List>
-    </Command>
-  ),
-};
-
-export const Grouped: Story = {
-  render: (args) => (
-    <Command {...args}>
-      <Command.Input variant="secondary" placeholder="Type a command or search..." />
-
-      <Command.Empty>No command found. Try searching for something else.</Command.Empty>
-      <Command.List>
-        <Command.Group heading="Planets">
-          {planets.map((item) => (
-            <Command.Item icon={item.icon} key={item.value} value={item.value}>
-              {item.label}
-            </Command.Item>
-          ))}
-        </Command.Group>
-
-        <Command.Group heading="Colors">
-          {colors.map((item) => (
-            <Command.Item icon={item.icon} key={item.value} value={item.value}>
-              {item.label}
-            </Command.Item>
-          ))}
-        </Command.Group>
-      </Command.List>
-    </Command>
-  ),
-};
-
-export const Radios: Story = {
-  render: (args) => {
-    const [value, setValue] = useState('');
-
-    const handleOnSelect: ComponentProps<typeof Command.Item>['onSelect'] = (selectedValue) => {
-      setValue(selectedValue);
-    };
-
-    return (
-      <Command {...args}>
-        <Command.Input variant="secondary" placeholder="Type a command or search..." />
-
-        <Command.Empty>No command found. Try searching for something else.</Command.Empty>
-        <Command.List>
-          {planets.map((item) => (
-            <Command.Item
-              variant="radio"
-              icon={item.icon}
-              key={item.value}
-              value={item.value}
-              onSelect={handleOnSelect}
-              checked={item.value === value}
-            >
-              {item.label}
-            </Command.Item>
-          ))}
-        </Command.List>
-      </Command>
-    );
-  },
-};
-
-export const Checkboxes: Story = {
-  render: (args) => {
-    const [value, setValue] = useState<string[]>([]);
-
-    const handleOnSelect: ComponentProps<typeof Command.Item>['onSelect'] = (selectedValue) => {
-      setValue((currValue) =>
-        currValue.includes(selectedValue)
-          ? currValue.filter((x) => x !== selectedValue)
-          : [...currValue, selectedValue],
-      );
-    };
-
-    const handleOnSelectAll: ComponentProps<typeof Command.Item>['onSelect'] = () => {
-      setValue((currValue) => {
-        return currValue.length === planets.length && currValue.length !== 0
-          ? []
-          : planets.map((planet) => planet.value);
-      });
-    };
-
-    return (
-      <Command {...args}>
-        <Command.Input variant="secondary" placeholder="Type a command or search..." />
-
-        <Command.Empty>No command found. Try searching for something else.</Command.Empty>
-        <Command.List>
-          <Command.Item
-            checked={value.length === planets.length && value.length !== 0}
-            onSelect={handleOnSelectAll}
-            variant="checkbox"
-          >
-            All
-          </Command.Item>
-
-          <Command.Separator />
-          {planets.map((item) => (
-            <Command.Item
-              variant="checkbox"
-              icon={item.icon}
-              key={item.value}
-              value={item.value}
-              onSelect={handleOnSelect}
-              checked={value.includes(item.value)}
-            >
-              {item.label}
-            </Command.Item>
-          ))}
-        </Command.List>
-      </Command>
-    );
-  },
-};
-
-export const AsSearchableMenu: Story = {
-  render: (args) => {
-    const [value, setValue] = useState('earth');
-
-    const handleOnSelect: ComponentProps<typeof Command.Item>['onSelect'] = (selectedValue) => {
-      setValue(selectedValue);
-    };
-
-    return (
-      <Popover>
-        <Popover.Trigger asChild>
-          <button className="tw-bg-white tw-p-4 tw-uppercase" type="button">
-            Selected: {value}
-          </button>
-        </Popover.Trigger>
-
-        <Popover.Content className="tw-w-56 tw-p-2">
-          <Command {...args}>
-            <Command.Input
-              focusVariant="off"
-              prefix={<Search className="tw-text-neutral-400" />}
-              variant="secondary"
-              placeholder="Search"
-            />
-
-            <Command.Empty>No Planet Found.</Command.Empty>
-
-            <Command.List>
-              {planets.map((item) => (
-                <Command.Item
-                  icon={item.icon}
-                  key={item.value}
-                  value={item.value}
-                  onSelect={handleOnSelect}
-                  checked={item.value === value}
-                >
-                  {item.label}
-                </Command.Item>
-              ))}
-            </Command.List>
-          </Command>
-        </Popover.Content>
-      </Popover>
-    );
-  },
-};
-
-export const AsGlobalSearch: Story = {
-  render: (args) => {
-    return (
-      <Modal>
-        <Modal.Trigger asChild>
-          <Button>Command Palette</Button>
-        </Modal.Trigger>
-
-        <Modal.Content className="tw-p-2">
-          <Command {...args}>
-            <Command.Input
-              focusVariant="off"
-              prefix={<Search className="tw-text-neutral-400" />}
-              variant="secondary"
-              placeholder="Search"
-            />
-
-            <Command.Empty className="tw-py-6 tw-text-center tw-text-neutral-400">
-              No Planet Found.
-            </Command.Empty>
-
-            <Command.List>
-              <Command.Group heading="Link">
-                <Command.Item icon={<Gauge className="tw-size-4" />}>Go to Dashboard</Command.Item>
-                <Command.Item icon={<Layers className="tw-size-4" />}>
-                  Go to Workspaces
-                </Command.Item>
-                <Command.Item icon={<Copy className="tw-size-4" />}>
-                  Go to Transformation
-                </Command.Item>
-                <Command.Item icon={<Eye className="tw-size-4" />}>Go to App</Command.Item>
-              </Command.Group>
-
-              <Command.Group heading="Actions">
-                <Command.Item icon={<Plus className="tw-size-4" />}>Create Workspace</Command.Item>
-                <Command.Item icon={<Plus className="tw-size-4" />}>Create App</Command.Item>
-                <Command.Item icon={<Plus className="tw-size-4" />}>
-                  Create Transformation
-                </Command.Item>
-              </Command.Group>
-            </Command.List>
-          </Command>
-        </Modal.Content>
-      </Modal>
-    );
-  },
-};
-
-export const ArgoAppearance: Story = {
-  render: () => {
-    const [value, setValue] = useState('earth');
-
-    const handleOnSelect: ComponentProps<typeof Command.Item>['onSelect'] = (selectedValue) => {
-      setValue(selectedValue);
-    };
-
-    const disabledPlanets = new Set(['mars']);
-
-    return (
-      <Command variant="argo" className="tw-flex tw-w-80 tw-flex-col" loop>
-        <div className="tw-mb-1 tw-px-4 tw-pb-0 tw-pt-4">
-          <Command.Input
-            variant="secondary"
-            prefix={<Search className="tw-size-4 tw-text-neutral-400" />}
-            placeholder="Search..."
-            allowClear
-            focusVariant="off"
-          />
-        </div>
-
-        <Command.Empty className="tw-text-neutral-400">No items found.</Command.Empty>
-
-        <Command.List>
-          <Command.Group heading="Planets">
-            {planets.map((item) => {
-              const isDisabled = disabledPlanets.has(item.value);
-
-              return (
-                <Command.Item
-                  variant="argo"
-                  icon={item.icon}
-                  key={item.value}
-                  value={item.value}
-                  onSelect={handleOnSelect}
-                  checked={item.value === value}
-                  disabled={isDisabled}
-                  actions={
-                    isDisabled ? undefined : (
-                      <Button argo variant="outline" aria-label="Favorite" size="icon-sm">
-                        <Star className="tw-size-4" />
-                      </Button>
-                    )
-                  }
-                >
-                  {item.label}
-                </Command.Item>
-              );
-            })}
-          </Command.Group>
-
-          <Command.Separator alwaysRender />
-
-          <Command.Group heading="Colors">
-            {colors.map((item) => (
-              <Command.Item
-                variant="argo"
-                icon={item.icon}
-                key={item.value}
-                value={item.value}
-                onSelect={handleOnSelect}
-                checked={item.value === value}
-                actions={
-                  <Button argo variant="outline" aria-label="Favorite" size="icon-sm">
-                    <Star className="tw-size-4" />
-                  </Button>
-                }
-              >
-                {item.label}
-              </Command.Item>
-            ))}
-          </Command.Group>
-        </Command.List>
-      </Command>
-    );
-  },
-};

package/src/components/Command/Command.tsx

@@ -1,37 +0,0 @@
-import type { ComponentProps } from 'react';
-import { Command as CommandPrimitive } from 'cmdk';
-
-import { cn } from '../../utils';
-
-import { CommandContent } from './CommandContent';
-import { CommandEmpty } from './CommandEmpty';
-import { CommandGroup } from './CommandGroup';
-import { CommandInput } from './CommandInput';
-import { CommandItem } from './CommandItem';
-import { CommandList } from './CommandList';
-import { CommandSeparator } from './CommandSeparator';
-
-type Variant = 'default' | 'argo';
-
-type Props = ComponentProps<typeof CommandPrimitive> & {
-  variant?: Variant;
-};
-
-export const Command = ({ className, variant = 'default', ...rest }: Props) => (
-  <CommandPrimitive
-    data-variant={variant}
-    className={cn('tw-group/command', 'tailwindcss-preflight', className)}
-    {...rest}
-  />
-);
-
-Command.Content = CommandContent;
-
-Command.Separator = CommandSeparator;
-Command.List = CommandList;
-Command.Group = CommandGroup;
-Command.Empty = CommandEmpty;
-Command.Input = CommandInput;
-
-// items
-Command.Item = CommandItem;

package/src/components/Command/CommandContent.tsx

@@ -1,19 +0,0 @@
-import type { ComponentProps } from 'react';
-
-import { cn } from '../../utils';
-
-type Props = ComponentProps<'div'>;
-
-export const CommandContent = ({ className, ...rest }: Props) => (
-  <div
-    {...rest}
-    className={cn(
-      'tw-flex',
-      'tw-flex-col',
-      'tw-p-2',
-      'group-data-[variant=argo]/command:tw-p-4',
-      'tw-gap-2',
-      className,
-    )}
-  />
-);

package/src/components/Command/CommandEmpty.tsx

@@ -1,6 +0,0 @@
-import type { ComponentProps } from 'react';
-import { Command as CommandPrimitive } from 'cmdk';
-
-type Props = ComponentProps<typeof CommandPrimitive.Empty>;
-
-export const CommandEmpty = ({ ...props }: Props) => <CommandPrimitive.Empty {...props} />;

package/src/components/Command/CommandGroup.tsx

@@ -1,26 +0,0 @@
-import type { ComponentProps } from 'react';
-import { Command as CommandPrimitive } from 'cmdk';
-
-import { cn } from '../../utils';
-
-type Props = ComponentProps<typeof CommandPrimitive.Group>;
-
-export const CommandGroup = ({ className, ...props }: Props) => (
-  <CommandPrimitive.Group
-    className={cn(
-      '[&_[cmdk-group-heading]]:tw-font-semibold',
-      '[&_[cmdk-group-heading]]:tw-font-sans',
-      '[&_[cmdk-group-heading]]:tw-px-4',
-      '[&_[cmdk-group-heading]]:tw-py-0.5',
-      '[&_[cmdk-group-heading]]:tw-uppercase',
-      '[&_[cmdk-group-heading]]:tw-text-[11px]',
-      '[&_[cmdk-group-heading]]:tw-text-neutral-400',
-      '[&_[cmdk-group-heading]]:tw-tracking-[1px]',
-      '[&_[cmdk-group-heading]]:tw-border-b',
-      '[&_[cmdk-group-heading]]:tw-border-neutral-150',
-      '[&_[cmdk-group-heading]]:tw-my-2',
-      className,
-    )}
-    {...props}
-  />
-);

package/src/components/Command/CommandInput.tsx

@@ -1,27 +0,0 @@
-import type { ComponentProps, ElementRef, Ref } from 'react';
-import { CommandInput as CmdInput } from 'cmdk';
-
-import { cn } from '../../utils';
-import { TextInput } from '../Input';
-
-type Props = ComponentProps<typeof TextInput>;
-
-export const CommandInput = ({
-  ref,
-  className,
-  ...props
-}: Props & { ref?: Ref<ElementRef<'input'>> }) => (
-  <CmdInput ref={ref} asChild>
-    <TextInput
-      {...props}
-      className={cn(
-        'group-data-[variant=argo]/command:!tw-bg-transparent',
-        'group-data-[variant=argo]/command:!tw-border-transparent',
-        'group-data-[variant=argo]/command:!tw-rounded-none',
-        'group-data-[variant=argo]/command:tw-max-h-12',
-        'group-data-[variant=argo]/command:tw-h-12',
-        className,
-      )}
-    />
-  </CmdInput>
-);

package/src/components/Command/CommandItem/CheckIndicator.tsx

@@ -1,86 +0,0 @@
-import { Check, Circle } from '../../../icons';
-import { cn } from '../../../utils';
-
-type Props = {
-  variant?: 'checkbox' | 'radio' | 'argo' | 'default';
-};
-
-export const CheckIndicator = ({ variant = 'default' }: Props) => {
-  if (variant === 'default') return null;
-
-  if (variant === 'argo') {
-    return (
-      <Check
-        className={cn(
-          // visibility
-          'tw-hidden',
-          'group-data-[checked=true]/command-item:tw-block',
-
-          // positioning
-          'tw-order-last',
-          'tw-ml-auto',
-
-          // styling
-          'tw-text-primary',
-          'tw-size-4',
-          'tw-shrink-0',
-        )}
-      />
-    );
-  }
-
-  return (
-    <span
-      data-variant={variant}
-      className={cn(
-        'tw-group/check-indicator',
-        // positioning
-        'tw-pointer-events-none',
-
-        // sizing
-        'tw-size-4',
-        'tw-flex',
-        'tw-items-center',
-        'tw-justify-center',
-
-        // border
-        'tw-border',
-        'tw-border-solid',
-        'tw-rounded',
-        'tw-border-neutral-200',
-
-        'data-[variant=radio]:tw-rounded-full',
-
-        'data-[variant=checkbox]:tw-rounded',
-        'data-[variant=checkbox]:group-data-[checked=true]/command-item:tw-border-secondary-500',
-        'data-[variant=checkbox]:group-data-[checked=true]/command-item:tw-bg-secondary-500',
-        'tw-shrink-0',
-      )}
-    >
-      {variant === 'checkbox' ? (
-        <Check
-          className={cn(
-            'tw-hidden',
-            // Lucide SVGs default to 24×24; constrain to the 16px indicator slot.
-            'tw-size-3',
-            'tw-stroke-[4px]',
-            'group-data-[checked=true]/command-item:tw-block',
-            'group-data-[variant=checkbox]/check-indicator:tw-text-white',
-          )}
-        />
-      ) : (
-        <Circle
-          className={cn(
-            'tw-hidden',
-            // Lucide Circle is stroke-only — force fill to match the stroke so
-            // the indicator reads as a solid dot.
-            'tw-size-3',
-            'tw-fill-current',
-            'group-data-[checked=true]/command-item:tw-block',
-            'group-data-[variant=radio]/check-indicator:tw-text-secondary-500',
-          )}
-        />
-      )}
-    </span>
-  );
-};

package/src/components/Command/CommandItem/CommandItem.tsx

@@ -1,94 +0,0 @@
-import type { ComponentProps, ReactNode } from 'react';
-import { Command as CommandPrimitive } from 'cmdk';
-
-import { cn } from '../../../utils';
-
-import { CheckIndicator } from './CheckIndicator';
-
-type Props = ComponentProps<typeof CommandPrimitive.Item> & {
-  icon?: ReactNode;
-  checked?: boolean;
-  variant?: ComponentProps<typeof CheckIndicator>['variant'];
-  actions?: ReactNode;
-};
-
-export const CommandItem = ({
-  className,
-  icon,
-  children,
-  checked = false,
-  variant = 'default',
-  actions,
-  ...props
-}: Props) => (
-  <div className="tw-group tw-flex tw-items-center tw-justify-center">
-    <CommandPrimitive.Item
-      {...props}
-      data-checked={checked}
-      data-variant={variant}
-      className={cn(
-        'tw-group/command-item',
-        'tw-peer/command-item',
-
-        // positioning
-        'tw-relative',
-        'tw-flex',
-        'tw-items-center',
-        'tw-gap-2',
-        'tw-flex-1',
-        'tw-p-2',
-
-        // typography
-        'tw-font-sans',
-        'tw-text-sm',
-        'tw-leading-6',
-        'tw-cursor-pointer',
-        'tw-transition-colors',
-        'tw-select-none',
-        'tw-outline-none',
-
-        'group-data-[variant=argo]/command:tw-rounded-md',
-        'group-data-[variant=argo]/command:data-[selected=true]:tw-bg-accent',
-        'group-data-[variant=argo]/command:data-[checked=true]:tw-bg-accent',
-
-        'group-data-[variant=default]/command:tw-rounded',
-        'group-data-[variant=default]/command:data-[selected=true]:tw-bg-neutral-100',
-        'group-data-[variant=default]/command:data-[checked=true]:tw-bg-neutral-100',
-
-        // disabled
-        'aria-disabled:tw-opacity-50',
-
-        'aria-disabled:tw-cursor-not-allowed',
-        'aria-disabled:hover:tw-bg-transparent',
-
-        // reset styles for checked and disabled
-        'data-[checked=true]:aria-disabled:tw-opacity-100',
-        'data-[checked=true]:aria-disabled:tw-cursor-default',
-        className,
-      )}
-    >
-      <CheckIndicator variant={variant} />
-      {icon && (
-        <span className="tw-inline-flex tw-size-4 tw-shrink-0 tw-items-center tw-justify-center tw-text-neutral-400 [&_svg:not([class*='tw-size-'])]:tw-size-4">
-          {icon}
-        </span>
-      )}
-      {children}
-    </CommandPrimitive.Item>
-
-    {actions && (
-      <span
-        data-slot="command-item-actions"
-        className={cn(
-          'tw-hidden',
-          'tw-mx-2',
-          'group-hover:tw-flex',
-          'peer-hover/command-item:tw-flex',
-          'peer-data-[selected=true]/command-item:tw-flex',
-        )}
-      >
-        {actions}
-      </span>
-    )}
-  </div>
-);

package/src/components/Command/CommandItem/index.ts

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