@keboola/design 2.0.1 → 3.0.0

package/src/components/Input/TimeInput/TimeInput.tsx

@@ -1,106 +0,0 @@
-import { useState } from 'react';
-import type { ChangeEventHandler, ComponentProps, ElementRef, FocusEventHandler, Ref } from 'react';
-
-import { Clock } from '../../../icons';
-import { cn } from '../../../utils';
-import { Button } from '../../Button';
-import { TimePicker } from '../../TimePicker';
-import { Input } from '../Input';
-
-type InputProps = ComponentProps<typeof Input>;
-
-type Props = Omit<
-  InputProps,
-  'type' | 'value' | 'defaultValue' | 'rightSuffix' | 'rightSuffixVariant'
-> & {
-  value?: string | null;
-  defaultValue?: string | null;
-  onValueChange?: (value: string | null) => void;
-  onValueBlur?: (value: string | null) => void;
-};
-
-export const TimeInput = ({
-  ref,
-  defaultValue,
-  disabled,
-  onBlur,
-  onChange,
-  onValueBlur,
-  onValueChange,
-  placeholder = 'Select time',
-  readOnly,
-  value,
-  className,
-  ...props
-}: Props & { ref?: Ref<ElementRef<'input'>> }) => {
-  const [isOpen, setIsOpen] = useState(false);
-  const [internalValue, setInternalValue] = useState<string | null>(defaultValue ?? null);
-
-  const isControlled = value !== undefined;
-  const currentValue = isControlled ? value : internalValue;
-
-  const handleChange: ChangeEventHandler<HTMLInputElement> = (event) => {
-    const newValue = event.target.value || null;
-    onChange?.(event);
-    onValueChange?.(newValue);
-
-    if (!isControlled) {
-      setInternalValue(newValue);
-    }
-  };
-
-  const handleBlur: FocusEventHandler<HTMLInputElement> = (event) => {
-    const newValue = event.target.value || null;
-    onBlur?.(event);
-    onValueBlur?.(newValue);
-
-    if (!isControlled) {
-      setInternalValue(newValue);
-    }
-  };
-
-  const handleTimePickerSelect = (time: string) => {
-    if (!isControlled) setInternalValue(time);
-    onValueChange?.(time);
-  };
-
-  const handleClear = () => {
-    if (!isControlled) setInternalValue(null);
-    onValueChange?.(null);
-  };
-
-  const handleOpenChange = (open: boolean) => {
-    setIsOpen(open);
-  };
-
-  return (
-    <Input
-      {...props}
-      ref={ref}
-      type="time"
-      disabled={disabled}
-      readOnly={readOnly}
-      placeholder={placeholder}
-      // hide native time picker indicator to avoid confusion with custom picker
-      className={cn('[&_input::-webkit-calendar-picker-indicator]:tw-hidden', className)}
-      value={currentValue}
-      onChange={handleChange}
-      onBlur={handleBlur}
-      onClear={currentValue ? handleClear : undefined}
-      rightSuffix={
-        !disabled && !readOnly ? (
-          <TimePicker
-            open={isOpen}
-            onOpenChange={handleOpenChange}
-            onSelect={handleTimePickerSelect}
-            selected={currentValue}
-          >
-            <Button aria-label="Select Time" variant="inline" size="icon-3xs">
-              <Clock className="tw-size-4" />
-            </Button>
-          </TimePicker>
-        ) : undefined
-      }
-    />
-  );
-};

package/src/components/Input/TimeInput/index.ts

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

package/src/components/Input/index.ts

@@ -1,4 +0,0 @@
-export * from './DateInput';
-export * from './DateRangeInput';
-export * from './TextInput';
-export * from './TimeInput';

package/src/components/Input/utils.ts

@@ -1,11 +0,0 @@
-import { createPrefixedString } from '../../utils';
-
-export const genInputTestId = (prefix: string = '') => {
-  const ps = createPrefixedString(prefix);
-  return {
-    toString: () => prefix,
-    inputWrapper: ps`input-wrapper`,
-    input: ps`input`,
-    clearButton: ps`clear-button`,
-  };
-};

package/src/components/InputGroup/InputGroup.stories.tsx

@@ -1,215 +0,0 @@
-import type { ComponentProps } from 'react';
-import type { Meta, StoryObj } from '@storybook/react-vite';
-
-import { Copy, Search, Upload, X } from '@keboola/design/icons';
-
-import { Button } from '../Button/Button';
-
-import { InputGroup } from './InputGroup';
-
-type InputGroupProps = ComponentProps<typeof InputGroup>;
-type InputGroupInputProps = ComponentProps<typeof InputGroup.Input>;
-type State = NonNullable<InputGroupProps['state']>;
-type Variant = NonNullable<InputGroupProps['variant']>;
-type Sizing = NonNullable<InputGroupProps['sizing']>;
-type FocusVariant = NonNullable<InputGroupProps['focusVariant']>;
-
-type StoryArgs = InputGroupProps &
-  Pick<InputGroupInputProps, 'disabled' | 'readOnly' | 'placeholder'>;
-type Story = StoryObj<StoryArgs>;
-
-const states: State[] = ['default', 'error', 'warning'];
-const variants: Variant[] = ['primary', 'secondary', 'argo'];
-const sizings: Sizing[] = ['small', 'default', 'medium'];
-const focusVariants: FocusVariant[] = ['default', 'on', 'off'];
-
-export default {
-  component: InputGroup,
-  args: {
-    placeholder: 'Placeholder',
-    state: 'default',
-    variant: 'primary',
-    sizing: 'default',
-    focusVariant: 'default',
-    disabled: false,
-    readOnly: false,
-  },
-  argTypes: {
-    state: {
-      description: 'Set validation state',
-      type: { name: 'enum', value: states },
-    },
-    variant: {
-      defaultValue: 'primary',
-      description: 'Set Variant',
-      type: { name: 'enum', value: variants },
-    },
-    sizing: {
-      defaultValue: 'default',
-      description: 'Set Sizing',
-      type: { name: 'enum', value: sizings },
-    },
-    focusVariant: {
-      defaultValue: 'default',
-      description: 'Set Focus Variant',
-      type: { name: 'enum', value: focusVariants },
-    },
-  },
-} satisfies Meta<StoryArgs>;
-
-export const Basic: Story = {
-  render: ({ disabled, readOnly, placeholder, ...args }) => (
-    <InputGroup {...args}>
-      <InputGroup.Input placeholder={placeholder} disabled={disabled} readOnly={readOnly} />
-    </InputGroup>
-  ),
-};
-
-export const WithButton: Story = {
-  render: ({ disabled, readOnly, placeholder, ...args }) => (
-    <InputGroup {...args}>
-      <InputGroup.Input placeholder={placeholder} disabled={disabled} readOnly={readOnly} />
-      <InputGroup.Addon align="inline-end">
-        <InputGroup.Button aria-label="Clear">
-          <X className="tw-size-4" />
-        </InputGroup.Button>
-      </InputGroup.Addon>
-    </InputGroup>
-  ),
-};
-
-export const TextAreaBasic: Story = {
-  render: ({ disabled, readOnly, placeholder, ...args }) => (
-    <InputGroup {...args}>
-      <InputGroup.TextArea placeholder={placeholder} disabled={disabled} readOnly={readOnly} />
-    </InputGroup>
-  ),
-};
-
-export const InlineStartAddon: Story = {
-  args: { placeholder: 'Search...' },
-  render: ({ disabled, readOnly, placeholder, ...args }) => (
-    <InputGroup {...args}>
-      <InputGroup.Addon align="inline-start">
-        <Search className="tw-size-4 tw-text-neutral-400" />
-      </InputGroup.Addon>
-      <InputGroup.Input placeholder={placeholder} disabled={disabled} readOnly={readOnly} />
-    </InputGroup>
-  ),
-};
-
-export const InlineEndAddon: Story = {
-  args: { placeholder: 'Enter value' },
-  render: ({ disabled, readOnly, placeholder, ...args }) => (
-    <InputGroup {...args}>
-      <InputGroup.Input placeholder={placeholder} disabled={disabled} readOnly={readOnly} />
-      <InputGroup.Addon align="inline-end">
-        <span className="tw-text-neutral-400">Kg</span>
-      </InputGroup.Addon>
-    </InputGroup>
-  ),
-};
-export const BothInlineAddon: Story = {
-  args: { placeholder: 'Enter value' },
-  render: ({ disabled, readOnly, placeholder, ...args }) => (
-    <InputGroup {...args}>
-      <InputGroup.Addon align="inline-start">
-        <InputGroup.Text>$</InputGroup.Text>
-      </InputGroup.Addon>
-      <InputGroup.Input placeholder={placeholder} disabled={disabled} readOnly={readOnly} />
-      <InputGroup.Addon align="inline-end">
-        <span className="tw-text-neutral-400">Kg</span>
-      </InputGroup.Addon>
-    </InputGroup>
-  ),
-};
-
-export const BlockStartAddon: Story = {
-  args: { placeholder: 'Write a message...' },
-  render: ({ disabled, readOnly, placeholder, ...args }) => (
-    <div className="tw-flex tw-flex-col tw-gap-2">
-      <InputGroup {...args}>
-        <InputGroup.Addon align="block-start">
-          <InputGroup.Text>Full name</InputGroup.Text>
-        </InputGroup.Addon>
-
-        <InputGroup.Input placeholder={placeholder} disabled={disabled} readOnly={readOnly} />
-      </InputGroup>
-
-      <InputGroup {...args}>
-        <InputGroup.Addon align="block-start" className="tw-justify-between">
-          <InputGroup.Text>
-            <Copy />
-            script.js
-          </InputGroup.Text>
-          <InputGroup.Button aria-label="Send">
-            <Upload className="tw-size-4" />
-          </InputGroup.Button>
-        </InputGroup.Addon>
-
-        <InputGroup.TextArea placeholder={placeholder} disabled={disabled} readOnly={readOnly} />
-      </InputGroup>
-    </div>
-  ),
-};
-
-export const BlockEndAddon: Story = {
-  render: ({ disabled, readOnly, placeholder, ...args }) => (
-    <div className="tw-flex tw-flex-col tw-gap-2">
-      <InputGroup {...args}>
-        <InputGroup.Input placeholder={placeholder} disabled={disabled} readOnly={readOnly} />
-
-        <InputGroup.Addon align="block-end">
-          <InputGroup.Text>USD</InputGroup.Text>
-        </InputGroup.Addon>
-      </InputGroup>
-
-      <InputGroup {...args}>
-        <InputGroup.TextArea
-          minRows={4}
-          placeholder={placeholder}
-          disabled={disabled}
-          readOnly={readOnly}
-        />
-
-        <InputGroup.Addon align="block-end" className="tw-justify-between">
-          <InputGroup.Text>120 characters left</InputGroup.Text>
-          <Button argo size="small">
-            Submit
-          </Button>
-        </InputGroup.Addon>
-      </InputGroup>
-    </div>
-  ),
-};
-
-export const BothBlockAddon: Story = {
-  args: { placeholder: 'Search...' },
-  render: ({ disabled, readOnly, placeholder, ...args }) => (
-    <InputGroup {...args}>
-      <InputGroup.Addon align="block-start" className="tw-justify-between tw-border-b">
-        <InputGroup.Text>
-          <Copy />
-          script.js
-        </InputGroup.Text>
-        <InputGroup.Button aria-label="Send">
-          <Upload className="tw-size-4" />
-        </InputGroup.Button>
-      </InputGroup.Addon>
-
-      <InputGroup.TextArea
-        placeholder={placeholder}
-        minRows={4}
-        disabled={disabled}
-        readOnly={readOnly}
-      />
-
-      <InputGroup.Addon align="block-end" className="tw-justify-between tw-border-t">
-        <InputGroup.Text>Line 1, Column 1</InputGroup.Text>
-        <Button argo variant="secondary">
-          Send
-        </Button>
-      </InputGroup.Addon>
-    </InputGroup>
-  ),
-};

package/src/components/InputGroup/InputGroup.tsx

@@ -1,228 +0,0 @@
-import type { ComponentProps, ElementRef, Ref } from 'react';
-import { cva, type VariantProps } from 'class-variance-authority';
-
-import { cn } from '../../utils';
-
-import { InputGroupAddon } from './InputGroupAddon';
-import { InputGroupButton } from './InputGroupButton';
-import { InputGroupInput } from './InputGroupInput';
-import { InputGroupText } from './InputGroupText';
-import { InputGroupTextArea } from './InputGroupTextArea';
-
-const inputGroupVariants = cva(
-  [
-    'tailwindcss-preflight',
-    'tw-group',
-
-    'tw-overflow-hidden',
-    'tw-box-border',
-
-    // positioning
-    'tw-flex',
-    'tw-items-center',
-
-    // base
-    'tw-rounded',
-    'tw-border',
-    'tw-border-solid',
-    'tw-border-neutral-200',
-    'tw-text-neutral-800',
-    'tw-transition',
-
-    // focus
-    'has-[:is(input,textarea):focus]:tw-ring-4',
-
-    // readonly
-    'has-[:is(input,textarea)[readonly]]:tw-bg-neutral-150',
-    'has-[:is(input,textarea)[readonly]]:focus-within:tw-ring-0',
-    'has-[:is(input,textarea)[readonly]]:tw-border-neutral-150',
-
-    // disabled cursor (opacity owned by variant)
-    'has-[:is(input,textarea):disabled]:tw-cursor-not-allowed',
-
-    // textarea: top-align addons, allow vertical expansion, own its y-padding
-    'has-[textarea]:tw-items-start',
-
-    'has-[[data-align=block-start]:not(:empty)]:tw-flex-wrap',
-    'has-[[data-align=block-end]:not(:empty)]:tw-flex-wrap',
-    '[&>input]:has-[[data-align=block-start]:not(:empty)]:tw-w-auto',
-    '[&>input]:has-[[data-align=block-start]:not(:empty)]:tw-flex-1',
-    '[&>input]:has-[[data-align=block-end]:not(:empty)]:tw-w-auto',
-    '[&>input]:has-[[data-align=block-end]:not(:empty)]:tw-flex-1',
-
-    '[&>input]:tw-px-4',
-    '[&>input]:has-[[data-align=inline-start]:not(:empty)]:tw-pl-2',
-    '[&>input]:has-[[data-align=inline-end]:not(:empty)]:tw-pr-2',
-  ],
-  {
-    defaultVariants: {
-      variant: 'primary',
-      state: 'default',
-      sizing: 'medium',
-      focusVariant: 'default',
-    },
-    compoundVariants: [
-      {
-        variant: 'secondary',
-        state: 'error',
-        className: ['tw-bg-error-100'],
-      },
-      {
-        variant: 'secondary',
-        state: 'warning',
-        className: ['tw-bg-warning-100'],
-      },
-      {
-        variant: 'primary',
-        state: 'default',
-        focusVariant: 'off',
-        className: ['has-[:is(input,textarea):focus]:tw-border-neutral-200'],
-      },
-      {
-        variant: 'secondary',
-        state: 'default',
-        focusVariant: 'off',
-        className: ['has-[:is(input,textarea):focus]:tw-border-neutral-100'],
-      },
-      {
-        variant: ['primary', 'secondary'],
-        state: 'error',
-        focusVariant: 'on',
-        className: ['!tw-border-error-500', '!tw-ring-error-200'],
-      },
-      {
-        variant: ['primary', 'secondary'],
-        state: 'warning',
-        focusVariant: 'on',
-        className: ['!tw-border-warning-500', '!tw-ring-warning-200'],
-      },
-      // --- argo ---
-      {
-        variant: 'argo',
-        state: 'default',
-        className: [
-          'has-[:is(input,textarea):focus]:tw-border-primary',
-          'has-[:is(input,textarea):focus]:tw-ring-primary/50',
-        ],
-      },
-      {
-        variant: 'argo',
-        state: 'error',
-        className: [
-          'tw-border-destructive',
-          'has-[:is(input,textarea):focus]:tw-border-destructive',
-          'has-[:is(input,textarea):focus]:tw-ring-destructive/20',
-        ],
-      },
-      {
-        variant: 'argo',
-        focusVariant: 'on',
-        className: ['!tw-border-primary', '!tw-ring-primary/50'],
-      },
-      {
-        variant: 'argo',
-        state: 'error',
-        focusVariant: 'on',
-        className: ['!tw-border-destructive', '!tw-ring-destructive/20'],
-      },
-      {
-        variant: 'argo',
-        state: 'default',
-        focusVariant: 'off',
-        className: ['has-[:is(input,textarea):focus]:tw-border-input'],
-      },
-    ],
-    variants: {
-      focusVariant: {
-        default: [],
-        on: ['!tw-border-secondary-500', '!tw-ring-secondary-200', '!tw-ring-4'],
-        off: ['has-[:is(input,textarea):focus]:!tw-ring-0'],
-      },
-      variant: {
-        primary: ['tw-bg-white', 'has-[:is(input,textarea):disabled]:tw-opacity-40'],
-        secondary: [
-          'tw-bg-neutral-100',
-          'tw-border-neutral-100',
-          'has-[:is(input,textarea):disabled]:tw-opacity-40',
-        ],
-        argo: [
-          'tw-bg-background',
-          'tw-border-input',
-          'tw-rounded-lg',
-          'tw-text-foreground',
-          'has-[:is(input,textarea):disabled]:tw-opacity-50',
-          // higher specificity than has-[:is(input,textarea):focus] — prevents focus border on readonly
-          'has-[:is(input,textarea)[readonly]:focus]:tw-border-neutral-150',
-        ],
-      },
-      sizing: {
-        default: [
-          '[&>:is(input,textarea)]:tw-py-2.5',
-          '[&>:is(input,textarea)]:tw-leading-[18px]',
-          '[&>textarea]:!tw-min-h-[calc(2.5rem-2px)]',
-        ],
-        small: [
-          '[&>:is(input,textarea)]:tw-py-2',
-          '[&>:is(input,textarea)]:tw-leading-[16px]',
-          '[&>textarea]:!tw-min-h-[calc(2rem-2px)]',
-        ],
-        medium: [
-          '[&>:is(input,textarea)]:tw-py-2',
-          '[&>:is(input,textarea)]:tw-leading-[18px]',
-          '[&>textarea]:!tw-min-h-[calc(2.25rem-2px)]',
-        ],
-      },
-      state: {
-        default: [
-          'has-[:is(input,textarea):focus]:tw-border-secondary-500',
-          'has-[:is(input,textarea):focus]:tw-ring-secondary-200',
-        ],
-        error: [
-          'tw-border-error-500',
-          'has-[:is(input,textarea):focus]:tw-border-error-500',
-          'has-[:is(input,textarea):focus]:tw-ring-error-200',
-        ],
-        warning: [
-          'tw-border-warning-500',
-          'has-[:is(input,textarea):focus]:tw-border-warning-500',
-          'has-[:is(input,textarea):focus]:tw-ring-warning-200',
-        ],
-      },
-    },
-  },
-);
-
-type Props = ComponentProps<'div'> & VariantProps<typeof inputGroupVariants>;
-
-const InputGroupRoot = ({
-  ref,
-  children,
-  state,
-  variant,
-  sizing,
-  focusVariant,
-  className,
-  ...props
-}: Props & { ref?: Ref<ElementRef<'div'>> }) => (
-  <div
-    {...props}
-    ref={ref}
-    className={cn(inputGroupVariants({ state, variant, sizing, focusVariant, className }))}
-  >
-    {children}
-  </div>
-);
-
-export const InputGroup = InputGroupRoot as typeof InputGroupRoot & {
-  Input: typeof InputGroupInput;
-  Addon: typeof InputGroupAddon;
-  Button: typeof InputGroupButton;
-  TextArea: typeof InputGroupTextArea;
-  Text: typeof InputGroupText;
-};
-
-InputGroup.Input = InputGroupInput;
-InputGroup.Addon = InputGroupAddon;
-InputGroup.Button = InputGroupButton;
-InputGroup.TextArea = InputGroupTextArea;
-InputGroup.Text = InputGroupText;

package/src/components/InputGroup/InputGroupAddon.tsx

@@ -1,57 +0,0 @@
-import type { ComponentProps } from 'react';
-import { cva, type VariantProps } from 'class-variance-authority';
-
-import { cn } from '../../utils';
-
-// Padding only fires when the addon actually has content — keeps an empty
-// `<Addon>{maybeNull}</Addon>` from carving 16px out of the input row.
-const addonVariants = cva(
-  [
-    'tw-flex',
-    'tw-items-center',
-    'tw-gap-1',
-
-    // Default size for nested Lucide icons in prefix/suffix slots; callers can override on the icon.
-    "[&_svg:not([class*='tw-size-'])]:tw-size-4",
-    '[&_svg]:tw-shrink-0',
-  ],
-  {
-    defaultVariants: {
-      align: 'inline-start',
-    },
-    variants: {
-      align: {
-        'inline-start': ['tw-order-first', '[&:not(:empty)]:tw-pl-4'],
-        'inline-end': ['tw-order-last', '[&:not(:empty)]:tw-pr-4'],
-        'block-start': [
-          'tw-order-first',
-          // `tw-w-full` needs to be empty-conditional too — when the addon
-          // has no content the root stays in flex-row, and a 100%-wide
-          // empty addon would claim half of the input row beside the input.
-          '[&:not(:empty)]:tw-w-full',
-          '[&:not(:empty)]:tw-px-4',
-          '[&:not(:empty)]:tw-py-1.5',
-        ],
-        'block-end': [
-          'tw-order-last',
-          '[&:not(:empty)]:tw-w-full',
-          '[&:not(:empty)]:tw-px-4',
-          '[&:not(:empty)]:tw-py-1.5',
-        ],
-      },
-    },
-  },
-);
-
-type Props = ComponentProps<'div'> & VariantProps<typeof addonVariants>;
-
-export const InputGroupAddon = ({
-  children,
-  align = 'inline-start',
-  className,
-  ...props
-}: Props) => (
-  <div {...props} data-align={align} className={cn(addonVariants({ align, className }))}>
-    {children}
-  </div>
-);

package/src/components/InputGroup/InputGroupButton.tsx

@@ -1,25 +0,0 @@
-import type { ComponentProps, ElementRef, Ref } from 'react';
-
-import { cn } from '../../utils';
-import { Button } from '../Button';
-
-type ButtonProps = ComponentProps<typeof Button>;
-
-type Props = Omit<ButtonProps, 'size' | 'block' | 'variant'>;
-
-export const InputGroupButton = ({
-  ref,
-  className,
-  tabIndex = -1,
-  ...props
-}: Props & { ref?: Ref<ElementRef<'button'>> }) => (
-  <Button
-    argo
-    {...props}
-    tabIndex={tabIndex}
-    ref={ref}
-    variant="invisible"
-    size="icon-sm"
-    className={cn('tw-size-5', '[&_svg]:tw-text-muted-foreground', className)}
-  />
-);

package/src/components/InputGroup/InputGroupInput.tsx

@@ -1,34 +0,0 @@
-import type { ComponentProps, ElementRef, Ref } from 'react';
-
-import { cn } from '../../utils';
-
-type Props = ComponentProps<'input'>;
-
-export const InputGroupInput = ({
-  ref,
-  className,
-  ...inputProps
-}: Props & { ref?: Ref<ElementRef<'input'>> }) => (
-  <input
-    {...inputProps}
-    ref={ref}
-    className={cn(
-      'tw-w-full',
-      'tw-bg-transparent',
-      'tw-outline-none',
-
-      // font
-      'tw-font-sans',
-      'tw-text-sm',
-
-      // placeholder
-      'placeholder:tw-text-neutral-400',
-      'placeholder:tw-font-normal',
-
-      // disabled
-      'disabled:tw-cursor-not-allowed',
-
-      className,
-    )}
-  />
-);