@keboola/design 2.0.0 → 2.1.0

package/src/blocks/MultiActionButtonGroup/MultiActionButton.stories.tsx

@@ -1,119 +0,0 @@
-import type { ComponentType } from 'react';
-import type { Meta, StoryObj } from '@storybook/react-vite';
-
-import { TooltipProvider } from '../../components/Tooltip';
-import { Copy, Pencil, Trash2 } from '../../icons';
-
-import { MultiActionButton } from './MultiActionButton';
-import { MultiActionButtonGroup } from './MultiActionButtonGroup';
-
-const withProvider = (Story: ComponentType) => {
-  return (
-    <TooltipProvider>
-      <Story />
-    </TooltipProvider>
-  );
-};
-
-export default {
-  component: MultiActionButton,
-  args: {
-    disabled: false,
-    isLoading: false,
-    tooltipContent: 'Action',
-    icon: <Trash2 />,
-    onClick: () => alert('Button clicked'),
-  },
-  argTypes: {
-    tooltipVariant: {
-      description: 'Tooltip variant',
-      control: 'select',
-      options: ['action', 'explanatory'],
-    },
-  },
-  decorators: [withProvider],
-} satisfies Meta<typeof MultiActionButton>;
-
-type Story = StoryObj<typeof MultiActionButton>;
-
-export const Default: Story = {
-  args: {
-    icon: <Pencil />,
-    tooltipContent: 'Edit',
-  },
-};
-
-export const Delete: Story = {
-  args: {
-    icon: <Trash2 />,
-    tooltipContent: 'Delete',
-  },
-};
-
-export const Loading: Story = {
-  args: {
-    icon: <Pencil />,
-    tooltipContent: 'Saving...',
-    isLoading: true,
-  },
-};
-
-export const Disabled: Story = {
-  args: {
-    icon: <Trash2 />,
-    tooltipContent: 'Delete (disabled)',
-    disabled: true,
-  },
-};
-
-export const ButtonGroup: Story = {
-  render: () => (
-    <MultiActionButtonGroup>
-      <MultiActionButtonGroup.Button
-        icon={<Pencil />}
-        label="Edit"
-        tooltipContent="Edit"
-        onClick={() => alert('Edit clicked')}
-      />
-      <MultiActionButtonGroup.Button
-        icon={<Copy />}
-        label="Copy"
-        tooltipContent="Copy"
-        onClick={() => alert('Copy clicked')}
-      />
-      <MultiActionButtonGroup.Button
-        icon={<Trash2 />}
-        label="Delete"
-        tooltipContent="Delete"
-        onClick={() => alert('Delete clicked')}
-      />
-    </MultiActionButtonGroup>
-  ),
-};
-
-export const ButtonGroupWithMixedStates: Story = {
-  render: () => (
-    <MultiActionButtonGroup>
-      <MultiActionButtonGroup.Button
-        icon={<Pencil />}
-        label="Edit"
-        tooltipContent="Edit"
-        onClick={() => alert('Edit clicked')}
-      />
-      <MultiActionButtonGroup.Button
-        icon={<Copy />}
-        label="Copy"
-        tooltipContent="Processing..."
-        isLoading={true}
-        onClick={() => {}}
-      />
-      <MultiActionButtonGroup.Button
-        icon={<Trash2 />}
-        label="Delete"
-        tooltipContent="Delete (disabled)"
-        disabled={true}
-        onClick={() => {}}
-      />
-    </MultiActionButtonGroup>
-  ),
-};

package/src/blocks/MultiActionButtonGroup/MultiActionButton.tsx

@@ -1,41 +0,0 @@
-import type { ComponentProps, ReactNode } from 'react';
-
-import { Button } from '../../components/Button';
-import { Tooltip } from '../../components/Tooltip';
-import { renderLegacyIcon } from '../../utils/legacyIcon';
-
-type Props = {
-  disabled?: boolean;
-  icon: ReactNode;
-  isLoading?: boolean;
-  label: string;
-  onClick: ComponentProps<typeof Button>['onClick'];
-  tooltipContent: ReactNode;
-  tooltipVariant?: ComponentProps<typeof Tooltip>['variant'];
-  'data-testid'?: string;
-};
-
-export const MultiActionButton = ({
-  disabled,
-  icon,
-  isLoading,
-  label,
-  onClick,
-  tooltipContent,
-  tooltipVariant,
-  'data-testid': dataTestId,
-}: Props) => (
-  <Tooltip placement="top" tooltip={tooltipContent} triggerAsChild variant={tooltipVariant}>
-    <Button
-      disabled={disabled}
-      isLoading={isLoading}
-      aria-label={label}
-      onClick={onClick}
-      variant="invisible"
-      size="icon"
-      data-testid={dataTestId}
-    >
-      {!isLoading && renderLegacyIcon(icon)}
-    </Button>
-  </Tooltip>
-);

package/src/blocks/MultiActionButtonGroup/MultiActionButtonGroup.tsx

@@ -1,16 +0,0 @@
-import type { PropsWithChildren } from 'react';
-
-import { ButtonGroup } from '../../components/ButtonGroup';
-import { cn } from '../../utils';
-
-import { MultiActionButton } from './MultiActionButton';
-
-type Props = {
-  className?: string;
-} & PropsWithChildren;
-
-export const MultiActionButtonGroup = ({ children, className }: Props) => (
-  <ButtonGroup className={cn('tw-text-nowrap', className)}>{children}</ButtonGroup>
-);
-
-MultiActionButtonGroup.Button = MultiActionButton;

package/src/blocks/MultiActionButtonGroup/index.ts

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

package/src/blocks/MultiCombobox/MultiCombobox.stories.tsx

@@ -1,324 +0,0 @@
-import type { ComponentProps } from 'react';
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { useState } from 'storybook/internal/preview-api';
-
-import type { Group, LabeledItem } from '../../components/Combobox/types';
-
-import { MultiCombobox } from './MultiCombobox';
-
-type MultiComboboxProps = ComponentProps<typeof MultiCombobox>;
-type Variant = NonNullable<MultiComboboxProps['variant']>;
-type State = NonNullable<MultiComboboxProps['state']>;
-type Sizing = NonNullable<MultiComboboxProps['sizing']>;
-type FocusVariant = NonNullable<MultiComboboxProps['focusVariant']>;
-type Indicator = NonNullable<MultiComboboxProps['indicator']>;
-
-const variants: Variant[] = ['primary', 'secondary', 'argo'];
-const states: State[] = ['default', 'error', 'warning'];
-const sizings: Sizing[] = ['default', 'small', 'medium'];
-const focusVariants: FocusVariant[] = ['default', 'on', 'off'];
-const indicators: Indicator[] = ['checkbox', 'check'];
-
-type StoryArgs = Pick<
-  MultiComboboxProps,
-  | 'variant'
-  | 'focusVariant'
-  | 'state'
-  | 'allowClear'
-  | 'allowSelectAll'
-  | 'placeholder'
-  | 'sizing'
-  | 'disabled'
-  | 'className'
-  | 'indicator'
->;
-
-/**
- * Multi-select variant of `Combobox`. Same item shape inference and accessor
- * contract — `value` / `onValueChange` switch to arrays.
- */
-const meta = {
-  component: MultiCombobox,
-  args: {
-    variant: 'primary',
-    state: 'default',
-    sizing: 'default',
-    focusVariant: 'default',
-    disabled: false,
-    allowClear: false,
-    placeholder: 'Placeholder',
-    className: 'tw-w-96',
-    indicator: 'checkbox',
-  },
-  argTypes: {
-    variant: {
-      control: 'radio',
-      options: variants,
-      description: '`InputGroup` visual variant',
-    },
-    indicator: {
-      control: 'radio',
-      options: indicators,
-    },
-    state: {
-      control: 'radio',
-      options: states,
-      description: 'Validation state',
-    },
-    sizing: {
-      control: 'radio',
-      options: sizings,
-      description: 'Input height',
-    },
-    focusVariant: {
-      control: 'radio',
-      options: focusVariants,
-      description: 'Focus-ring behaviour',
-    },
-    disabled: { control: 'boolean' },
-    allowClear: {
-      control: 'boolean',
-      description: 'Render a clear button while a value is selected',
-    },
-    placeholder: { control: 'text' },
-  },
-  parameters: { layout: 'centered' },
-} satisfies Meta<StoryArgs>;
-
-export default meta;
-
-type Story = StoryObj<StoryArgs>;
-
-const fruits: LabeledItem[] = [
-  { value: 'apple', label: 'Apple', icon: 'table' },
-  { value: 'banana', label: 'Banana', icon: 'table' },
-  { value: 'cherry', label: 'Cherry', icon: 'table' },
-  { value: 'elderberry', label: 'Elderberry', icon: 'table' },
-  { value: 'fig', label: 'Fig', icon: 'table' },
-  {
-    value: 'long-pineapple',
-    label: 'Sun-Ripened Hawaiian Golden Sweet Pineapple Slices',
-    icon: 'table',
-  },
-  {
-    value: 'long-watermelon',
-    label: 'Seedless Crimson Sweet Watermelon From Local Organic Farms',
-    icon: 'table',
-  },
-  {
-    value: 'long-dragonfruit',
-    label: 'Vietnamese Red-Fleshed Dragonfruit With Edible Black Sesame Seeds',
-    icon: 'table',
-  },
-];
-
-export const LabeledItems: Story = {
-  render: (args) => {
-    const [value, setValue] = useState<LabeledItem[]>([]);
-
-    return <MultiCombobox {...args} items={fruits} value={value} onValueChange={setValue} />;
-  },
-};
-
-export const StringItems: Story = {
-  render: (args) => {
-    const [value, setValue] = useState<string[]>([]);
-
-    return (
-      <MultiCombobox
-        {...args}
-        items={['apple', 'banana', 'cherry', 'elderberry', 'fig']}
-        value={value}
-        onValueChange={setValue}
-        itemToLabel={(item) => item.toLocaleUpperCase()}
-      />
-    );
-  },
-};
-
-export const NumberItems: Story = {
-  render: (args) => {
-    const [value, setValue] = useState<number[]>([]);
-    return (
-      <MultiCombobox {...args} items={[1, 2, 3, 4, 5]} value={value} onValueChange={setValue} />
-    );
-  },
-};
-
-type Table = { name: string; id: string };
-const tables: Table[] = [
-  { id: 'apple', name: 'Apple' },
-  { id: 'banana', name: 'Banana' },
-  { id: 'cherry', name: 'Cherry' },
-  { id: 'elderberry', name: 'Elderberry' },
-  { id: 'fig', name: 'Fig' },
-];
-
-export const ArbitraryItems: Story = {
-  render: (args) => {
-    const [value, setValue] = useState<Table[]>([]);
-    return (
-      <MultiCombobox
-        {...args}
-        items={tables}
-        value={value}
-        onValueChange={setValue}
-        itemToStringLabel={(item) => item.name}
-        itemToLabel={(item) => item.name}
-        itemToIcon={() => 'table-cells'}
-      />
-    );
-  },
-};
-
-const groupedLabeled: (Group<LabeledItem> & { label: string })[] = [
-  {
-    label: 'Citrus',
-    items: [
-      { value: 'orange', label: 'Orange' },
-      { value: 'lemon', label: 'Lemon' },
-      { value: 'lime', label: 'Lime' },
-    ],
-  },
-  {
-    label: 'Berries',
-    items: [
-      { value: 'strawberry', label: 'Strawberry' },
-      { value: 'blueberry', label: 'Blueberry' },
-      { value: 'raspberry', label: 'Raspberry' },
-    ],
-  },
-  {
-    label: 'Tropical',
-    items: [
-      { value: 'mango', label: 'Mango' },
-      { value: 'pineapple', label: 'Pineapple' },
-      { value: 'papaya', label: 'Papaya' },
-    ],
-  },
-];
-
-export const LabeledItemGrouped: Story = {
-  render: (args) => {
-    const [value, setValue] = useState<LabeledItem[]>([]);
-
-    return (
-      <MultiCombobox
-        {...args}
-        items={groupedLabeled}
-        value={value}
-        onValueChange={setValue}
-        groupToLabel={(group) => group.label}
-      />
-    );
-  },
-};
-
-const groupedStrings: (Group<string> & { label: string })[] = [
-  {
-    label: 'Citrus',
-    items: ['orange', 'lemon', 'lime'],
-  },
-  {
-    label: 'Berries',
-    items: ['strawberry', 'blueberry', 'raspberry'],
-  },
-  {
-    label: 'Tropical',
-    items: ['mango', 'pineapple', 'papaya'],
-  },
-];
-
-export const StringItemsGrouped: Story = {
-  render: (args) => {
-    const [value, setValue] = useState<string[]>([]);
-
-    return (
-      <MultiCombobox
-        {...args}
-        items={groupedStrings}
-        value={value}
-        onValueChange={setValue}
-        itemToLabel={(item) => item.toLocaleUpperCase()}
-        groupToLabel={(group) => group.label}
-      />
-    );
-  },
-};
-
-const groupedNumbers: (Group<number> & { label: string })[] = [
-  {
-    label: 'Small',
-    items: [1, 2, 3],
-  },
-  {
-    label: 'Medium',
-    items: [10, 20, 30],
-  },
-  {
-    label: 'Large',
-    items: [100, 200, 300],
-  },
-];
-
-export const NumberItemsGrouped: Story = {
-  render: (args) => {
-    const [value, setValue] = useState<number[]>([]);
-
-    return (
-      <MultiCombobox
-        {...args}
-        items={groupedNumbers}
-        value={value}
-        onValueChange={setValue}
-        groupToLabel={(group) => group.label}
-      />
-    );
-  },
-};
-
-const groupedTables: (Group<Table> & { label: string })[] = [
-  {
-    label: 'Citrus',
-    items: [
-      { id: 'orange', name: 'Orange' },
-      { id: 'lemon', name: 'Lemon' },
-      { id: 'lime', name: 'Lime' },
-    ],
-  },
-  {
-    label: 'Berries',
-    items: [
-      { id: 'strawberry', name: 'Strawberry' },
-      { id: 'blueberry', name: 'Blueberry' },
-      { id: 'raspberry', name: 'Raspberry' },
-    ],
-  },
-  {
-    label: 'Tropical',
-    items: [
-      { id: 'mango', name: 'Mango' },
-      { id: 'pineapple', name: 'Pineapple' },
-      { id: 'papaya', name: 'Papaya' },
-    ],
-  },
-];
-
-export const ArbitraryItemsGrouped: Story = {
-  render: (args) => {
-    const [value, setValue] = useState<Table[]>([]);
-
-    return (
-      <MultiCombobox
-        {...args}
-        items={groupedTables}
-        value={value}
-        onValueChange={setValue}
-        itemToStringLabel={(item) => item.name}
-        itemToLabel={(item) => item.name}
-        itemToIcon={() => 'table-cells'}
-        groupToLabel={(group) => group.label}
-      />
-    );
-  },
-};