@keboola/design 1.0.0

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

@@ -0,0 +1,376 @@
+import { useState } from 'react';
+import type { ComponentProps } from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { Button } from '../Button';
+import { Icon } from '../Icon';
+import { Modal } from '../Modal';
+import { Popover } from '../Popover';
+
+import { Command } from './Command';
+
+type Item = {
+  value: string;
+  label: string;
+  icon?: ComponentProps<typeof Icon>['icon'];
+};
+
+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: 'bolt',
+  },
+];
+
+const colors: Item[] = [
+  {
+    icon: 'cog',
+    value: 'red',
+    label: 'Red',
+  },
+  {
+    icon: 'chain',
+    value: 'green',
+    label: 'Green',
+  },
+  {
+    icon: 'arrow-left',
+    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={<Icon icon="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={<Icon icon="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">Go to Dashboard</Command.Item>
+                <Command.Item icon="layer-group">Go to Workspaces</Command.Item>
+                <Command.Item icon="copy">Go to Transformation</Command.Item>
+                <Command.Item icon="eye">Go to App</Command.Item>
+              </Command.Group>
+
+              <Command.Group heading="Actions">
+                <Command.Item icon="plus">Create Workspace</Command.Item>
+                <Command.Item icon="plus">Create App</Command.Item>
+                <Command.Item icon="plus">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={<Icon icon="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"
+                        icon="star"
+                        aria-label="Favorite"
+                        size="icon-sm"
+                      />
+                    )
+                  }
+                >
+                  {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" icon="star" aria-label="Favorite" size="icon-sm" />
+                }
+              >
+                {item.label}
+              </Command.Item>
+            ))}
+          </Command.Group>
+        </Command.List>
+      </Command>
+    );
+  },
+};

package/src/components/Command/Command.tsx

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

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

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

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

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

@@ -0,0 +1,74 @@
+import { cn } from '../../../utils';
+import { Icon } from '../../Icon';
+
+type Props = {
+  variant?: 'checkbox' | 'radio' | 'argo' | 'default';
+};
+
+export const CheckIndicator = ({ variant = 'default' }: Props) => {
+  if (variant === 'default') return null;
+
+  if (variant === 'argo') {
+    return (
+      <Icon
+        icon="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',
+      )}
+    >
+      <Icon
+        className={cn(
+          'tw-hidden',
+          'group-data-[checked=true]/command-item:tw-block',
+
+          'group-data-[variant=checkbox]/check-indicator:tw-text-white',
+          'group-data-[variant=radio]/check-indicator:tw-text-secondary-500',
+          'group-data-[variant=radio]/check-indicator:tw-size-3',
+        )}
+        icon={variant === 'checkbox' ? 'check' : 'circle'}
+      />
+    </span>
+  );
+};

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

@@ -0,0 +1,91 @@
+import type { ComponentProps, ReactNode } from 'react';
+import { Command as CommandPrimitive } from 'cmdk';
+
+import { cn } from '../../../utils';
+import { Icon } from '../../Icon';
+
+import { CheckIndicator } from './CheckIndicator';
+
+type Props = ComponentProps<typeof CommandPrimitive.Item> & {
+  icon?: ComponentProps<typeof Icon>['icon'];
+  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 && <Icon icon={icon} className="tw-size-4 tw-shrink-0 tw-text-neutral-400" />}
+      {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

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

package/src/components/Command/CommandList.tsx

@@ -0,0 +1,32 @@
+import type { ComponentProps, ElementRef, Ref } from 'react';
+import { Command as CommandPrimitive } from 'cmdk';
+
+import { cn } from '../../utils';
+import { ScrollArea } from '../ScrollArea';
+
+type Props = ComponentProps<typeof CommandPrimitive.List> &
+  Pick<ComponentProps<typeof ScrollArea>, 'viewPortClassName'>;
+
+export const CommandList = ({
+  ref,
+  className,
+  children,
+  viewPortClassName,
+  ...props
+}: Props & { ref?: Ref<ElementRef<'div'>> }) => (
+  <ScrollArea
+    ref={ref}
+    className={cn(
+      'group-data-[variant=argo]/command:tw-px-4',
+      'group-data-[variant=argo]/command:tw-pb-4',
+      className,
+    )}
+    viewPortClassName={cn(
+      '[&_[cmdk-list-sizer]]:tw-flex',
+      '[&_[cmdk-list-sizer]]:tw-flex-col',
+      viewPortClassName,
+    )}
+  >
+    <CommandPrimitive.List {...props}>{children}</CommandPrimitive.List>
+  </ScrollArea>
+);