@keboola/design 1.0.0

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

@@ -0,0 +1,208 @@
+import type { ComponentProps } from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { Button } from '../Button/Button';
+import { Icon } from '../Icon';
+
+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 icon="xmark" aria-label="Clear" />
+      </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">
+        <Icon className="tw-text-neutral-400" icon="magnifying-glass" />
+      </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>
+            <Icon icon="copy" />
+            script.js
+          </InputGroup.Text>
+          <InputGroup.Button icon="upload" aria-label="Send" />
+        </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>
+          <Icon icon="copy" />
+          script.js
+        </InputGroup.Text>
+        <InputGroup.Button icon="upload" aria-label="Send" />
+      </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

@@ -0,0 +1,228 @@
+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: 'default',
+      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

@@ -0,0 +1,46 @@
+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'], {
+  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

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

@@ -0,0 +1,34 @@
+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,
+    )}
+  />
+);

package/src/components/InputGroup/InputGroupText.tsx

@@ -0,0 +1,21 @@
+import type { ComponentProps } from 'react';
+
+import { cn } from '../../utils';
+
+type Props = ComponentProps<'span'>;
+
+export const InputGroupText = ({ className, ...props }: Props) => (
+  <span
+    className={cn(
+      'tw-flex',
+      'tw-items-center',
+      'tw-gap-2',
+      'tw-text-sm',
+      'tw-text-muted-foreground',
+      '[&_svg]:tw-pointer-events-none',
+      '[&_svg:not([class*="tw-size-"])]:tw-size-4',
+      className,
+    )}
+    {...props}
+  />
+);

package/src/components/InputGroup/InputGroupTextArea.tsx

@@ -0,0 +1,78 @@
+import type { ChangeEventHandler, ComponentProps, ElementRef, FocusEventHandler, Ref } from 'react';
+import TextareaAutosize from 'react-textarea-autosize';
+
+import { cn } from '../../utils';
+
+type TextareaNativeProps = Omit<
+  ComponentProps<typeof TextareaAutosize>,
+  'value' | 'defaultValue' | 'rows' | 'maxRows'
+>;
+
+type Props = TextareaNativeProps & {
+  value?: string | null;
+  defaultValue?: string | null;
+  onValueChange?: (value: string) => void;
+  onValueBlur?: (value: string) => void;
+  maxRows?: number | 'unlimited';
+  disableResize?: boolean;
+};
+
+export const InputGroupTextArea = ({
+  ref,
+  className,
+  onChange,
+  onValueChange,
+  value,
+  defaultValue,
+  onBlur,
+  onValueBlur,
+  disableResize = false,
+  minRows = 1,
+  maxRows = 4,
+  ...props
+}: Props & { ref?: Ref<ElementRef<'textarea'>> }) => {
+  const handleChange: ChangeEventHandler<HTMLTextAreaElement> = (event) => {
+    onValueChange?.(event.target.value);
+    onChange?.(event);
+  };
+
+  const handleBlur: FocusEventHandler<HTMLTextAreaElement> = (event) => {
+    onValueBlur?.(event.target.value);
+    onBlur?.(event);
+  };
+
+  return (
+    <TextareaAutosize
+      {...props}
+      ref={ref}
+      value={value ?? undefined}
+      defaultValue={defaultValue ?? undefined}
+      onChange={handleChange}
+      onBlur={handleBlur}
+      minRows={minRows}
+      maxRows={maxRows === 'unlimited' ? undefined : maxRows}
+      className={cn(
+        'tw-w-full',
+        'tw-bg-transparent',
+        'tw-outline-none',
+        'tw-px-4',
+
+        // font
+        'tw-font-sans',
+        'tw-text-sm',
+
+        // placeholder
+        'placeholder:tw-text-neutral-400',
+        'placeholder:tw-font-normal',
+
+        // disabled
+        'disabled:tw-cursor-not-allowed',
+        {
+          'tw-resize-none': disableResize,
+        },
+
+        className,
+      )}
+    />
+  );
+};

package/src/components/InputGroup/index.ts

@@ -0,0 +1 @@
+export { InputGroup } from './InputGroup';