@keboola/design 2.0.1 → 3.0.0

package/src/blocks/EmptyState/EmptyState.tsx

@@ -1,146 +0,0 @@
-import type { ComponentProps } from 'react';
-import type { VariantProps } from 'class-variance-authority';
-import { cva } from 'class-variance-authority';
-
-const emptyStateClassnames = cva(['tw-flex', 'tw-flex-col', 'tw-items-center', 'tw-text-center'], {
-  variants: {
-    variant: {
-      default: ['tw-py-16', 'tw-px-8', 'tw-gap-4'],
-      compact: ['tw-py-8', 'tw-px-4', 'tw-gap-2'],
-    },
-  },
-  defaultVariants: {
-    variant: 'default',
-  },
-});
-
-const emptyStateIconClassnames = cva(
-  ['tw-flex', 'tw-items-center', 'tw-justify-center', 'tw-text-muted-foreground'],
-  {
-    variants: {
-      variant: {
-        default: ['tw-size-16', 'tw-text-4xl', '[&_svg:not([class*="tw-size-"])]:tw-size-10'],
-        compact: ['tw-size-10', 'tw-text-2xl', '[&_svg:not([class*="tw-size-"])]:tw-size-6'],
-      },
-    },
-    defaultVariants: {
-      variant: 'default',
-    },
-  },
-);
-
-const emptyStateTitleClassnames = cva(['tw-m-0', 'tw-font-semibold', 'tw-text-foreground'], {
-  variants: {
-    variant: {
-      default: ['tw-text-lg', 'tw-leading-7'],
-      compact: ['tw-text-base', 'tw-leading-6'],
-    },
-  },
-  defaultVariants: {
-    variant: 'default',
-  },
-});
-
-const emptyStateDescriptionClassnames = cva(['tw-m-0', 'tw-text-muted-foreground'], {
-  variants: {
-    variant: {
-      default: ['tw-text-sm', 'tw-leading-5', 'tw-max-w-sm'],
-      compact: ['tw-text-xs', 'tw-leading-4', 'tw-max-w-xs'],
-    },
-  },
-  defaultVariants: {
-    variant: 'default',
-  },
-});
-
-const emptyStateActionsClassnames = cva(['tw-flex', 'tw-items-center', 'tw-flex-wrap'], {
-  variants: {
-    variant: {
-      default: ['tw-gap-3', 'tw-mt-2'],
-      compact: ['tw-gap-2', 'tw-mt-1'],
-    },
-  },
-  defaultVariants: {
-    variant: 'default',
-  },
-});
-
-type Variant = VariantProps<typeof emptyStateClassnames>['variant'];
-
-/**
- * Props for `EmptyState`. `variant` chooses spacing — `"default"` for full-page empty states,
- * `"compact"` for inside cards / small surfaces.
- */
-type RootProps = ComponentProps<'div'> &
-  VariantProps<typeof emptyStateClassnames> & {
-    variant?: Variant;
-  };
-
-/**
- * Friendly "nothing here yet" placeholder with icon, title, description, and actions slots.
- *
- * **When to use:** the user reached a page or surface that is intentionally empty (no items created
- * yet, an empty list after filtering, an empty inbox). The goal is to guide the user to the next action.
- * **When NOT to use:** for an error or failure state use `ErrorState`; for inline loading placeholders
- * use `Skeleton`; for "no matches found after search" inside a search/combobox use `EmptySearchContent`.
- * **Composition:** nest `EmptyState.Icon`, `EmptyState.Title`, `EmptyState.Description`, and
- * `EmptyState.Actions` (with one or two `Button`s). Use `variant="compact"` inside a `Card`.
- *
- * @see RECIPES.md#card-with-empty-state — for the empty-card pattern
- */
-const EmptyStateRoot = ({ className, variant = 'default', children, ...rest }: RootProps) => (
-  <div role="status" className={emptyStateClassnames({ className, variant })} {...rest}>
-    {children}
-  </div>
-);
-
-type SlotProps = ComponentProps<'div'> & { variant?: Variant };
-
-const EmptyStateIcon = ({ className, variant = 'default', children, ...rest }: SlotProps) => (
-  <div className={emptyStateIconClassnames({ className, variant })} {...rest}>
-    {children}
-  </div>
-);
-
-type TitleProps = ComponentProps<'h3'> & { variant?: Variant };
-
-const EmptyStateTitle = ({ className, variant = 'default', children, ...rest }: TitleProps) => (
-  <h3 className={emptyStateTitleClassnames({ className, variant })} {...rest}>
-    {children}
-  </h3>
-);
-
-type DescriptionProps = ComponentProps<'p'> & { variant?: Variant };
-
-const EmptyStateDescription = ({
-  className,
-  variant = 'default',
-  children,
-  ...rest
-}: DescriptionProps) => (
-  <p className={emptyStateDescriptionClassnames({ className, variant })} {...rest}>
-    {children}
-  </p>
-);
-
-type ActionsProps = ComponentProps<'div'> & { variant?: Variant };
-
-const EmptyStateActions = ({ className, variant = 'default', children, ...rest }: ActionsProps) => (
-  <div className={emptyStateActionsClassnames({ className, variant })} {...rest}>
-    {children}
-  </div>
-);
-
-export const EmptyState = EmptyStateRoot as typeof EmptyStateRoot & {
-  Icon: typeof EmptyStateIcon;
-  Title: typeof EmptyStateTitle;
-  Description: typeof EmptyStateDescription;
-  Actions: typeof EmptyStateActions;
-};
-
-EmptyState.Icon = EmptyStateIcon;
-EmptyState.Title = EmptyStateTitle;
-EmptyState.Description = EmptyStateDescription;
-EmptyState.Actions = EmptyStateActions;
-
-export type { RootProps as EmptyStateProps, Variant as EmptyStateVariant };

package/src/blocks/EmptyState/index.ts

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

package/src/blocks/ErrorState/ErrorState.stories.tsx

@@ -1,125 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-
-import { Button } from '../../components/Button';
-import { AlertCircle, AlertTriangle, Bug, Unlink, XCircle } from '../../icons';
-
-import { ErrorState } from './ErrorState';
-
-type Story = StoryObj<typeof ErrorState>;
-
-export default {
-  component: ErrorState,
-  parameters: {
-    docs: {
-      description: {
-        component:
-          'Error state block for HTTP errors, network failures, and unexpected errors. Slots compose existing `Button` and `Icon`. Supports `default`, `compact`, and `destructive` variants — icon color is baked into each variant so consumers do not need to pick a color manually.',
-      },
-    },
-  },
-} satisfies Meta<typeof ErrorState>;
-
-export const ClientError: Story = {
-  name: '4xx — client error',
-  render: () => (
-    <ErrorState>
-      <ErrorState.Icon>
-        <AlertCircle />
-      </ErrorState.Icon>
-      <ErrorState.Title>Page not found</ErrorState.Title>
-      <ErrorState.Description>
-        The resource you&apos;re looking for doesn&apos;t exist or you don&apos;t have permission to
-        access it.
-      </ErrorState.Description>
-      <ErrorState.Actions>
-        <Button onClick={() => {}}>Go back</Button>
-        <Button variant="outline" onClick={() => {}}>
-          Go to home
-        </Button>
-      </ErrorState.Actions>
-    </ErrorState>
-  ),
-};
-
-export const ServerError: Story = {
-  name: '5xx — server error',
-  render: () => (
-    <ErrorState>
-      <ErrorState.Icon>
-        <Bug />
-      </ErrorState.Icon>
-      <ErrorState.Title>Something went wrong</ErrorState.Title>
-      <ErrorState.Description>
-        We&apos;re experiencing an issue on our end. Our team has been notified and is working on a
-        fix.
-      </ErrorState.Description>
-      <ErrorState.Actions>
-        <Button onClick={() => window.location.reload()}>Retry</Button>
-        <Button variant="outline" onClick={() => {}}>
-          Contact support
-        </Button>
-      </ErrorState.Actions>
-    </ErrorState>
-  ),
-};
-
-export const NetworkFailure: Story = {
-  name: 'Network failure',
-  render: () => (
-    <ErrorState>
-      <ErrorState.Icon>
-        <Unlink />
-      </ErrorState.Icon>
-      <ErrorState.Title>No connection</ErrorState.Title>
-      <ErrorState.Description>
-        Unable to reach the server. Check your internet connection and try again.
-      </ErrorState.Description>
-      <ErrorState.Actions>
-        <Button onClick={() => window.location.reload()}>Try again</Button>
-      </ErrorState.Actions>
-    </ErrorState>
-  ),
-};
-
-export const Destructive: Story = {
-  name: 'Destructive — critical error',
-  render: () => (
-    <ErrorState variant="destructive">
-      <ErrorState.Icon variant="destructive">
-        <AlertTriangle />
-      </ErrorState.Icon>
-      <ErrorState.Title variant="destructive">Critical error</ErrorState.Title>
-      <ErrorState.Description variant="destructive">
-        A fatal error occurred and the operation could not be completed. Your data may be affected.
-      </ErrorState.Description>
-      <ErrorState.Actions variant="destructive">
-        <Button variant="danger" onClick={() => {}}>
-          Delete and retry
-        </Button>
-        <Button variant="outline" onClick={() => {}}>
-          Cancel
-        </Button>
-      </ErrorState.Actions>
-    </ErrorState>
-  ),
-};
-
-export const CompactServerError: Story = {
-  name: 'Compact — server error',
-  render: () => (
-    <ErrorState variant="compact">
-      <ErrorState.Icon variant="compact">
-        <XCircle />
-      </ErrorState.Icon>
-      <ErrorState.Title variant="compact">Failed to load</ErrorState.Title>
-      <ErrorState.Description variant="compact">
-        Could not fetch the data. Please try again.
-      </ErrorState.Description>
-      <ErrorState.Actions variant="compact">
-        <Button size="small" onClick={() => window.location.reload()}>
-          Retry
-        </Button>
-      </ErrorState.Actions>
-    </ErrorState>
-  ),
-};

package/src/blocks/ErrorState/ErrorState.tsx

@@ -1,162 +0,0 @@
-import type { ComponentProps } from 'react';
-import type { VariantProps } from 'class-variance-authority';
-import { cva } from 'class-variance-authority';
-
-const errorStateClassnames = cva(['tw-flex', 'tw-flex-col', 'tw-items-center', 'tw-text-center'], {
-  variants: {
-    variant: {
-      default: ['tw-py-16', 'tw-px-8', 'tw-gap-4'],
-      compact: ['tw-py-8', 'tw-px-4', 'tw-gap-2'],
-      destructive: ['tw-py-16', 'tw-px-8', 'tw-gap-4'],
-    },
-  },
-  defaultVariants: {
-    variant: 'default',
-  },
-});
-
-const errorStateIconClassnames = cva(['tw-flex', 'tw-items-center', 'tw-justify-center'], {
-  variants: {
-    variant: {
-      default: [
-        'tw-size-16',
-        'tw-text-4xl',
-        '[&_svg:not([class*="tw-size-"])]:tw-size-10',
-        'tw-text-warning-500',
-      ],
-      compact: [
-        'tw-size-10',
-        'tw-text-2xl',
-        '[&_svg:not([class*="tw-size-"])]:tw-size-6',
-        'tw-text-warning-500',
-      ],
-      destructive: [
-        'tw-size-16',
-        'tw-text-4xl',
-        '[&_svg:not([class*="tw-size-"])]:tw-size-10',
-        'tw-text-error-500',
-      ],
-    },
-  },
-  defaultVariants: {
-    variant: 'default',
-  },
-});
-
-const errorStateTitleClassnames = cva(['tw-m-0', 'tw-font-semibold'], {
-  variants: {
-    variant: {
-      default: ['tw-text-lg', 'tw-leading-7', 'tw-text-foreground'],
-      compact: ['tw-text-base', 'tw-leading-6', 'tw-text-foreground'],
-      destructive: ['tw-text-lg', 'tw-leading-7', 'tw-text-error-700'],
-    },
-  },
-  defaultVariants: {
-    variant: 'default',
-  },
-});
-
-const errorStateDescriptionClassnames = cva(['tw-m-0', 'tw-text-muted-foreground'], {
-  variants: {
-    variant: {
-      default: ['tw-text-sm', 'tw-leading-5', 'tw-max-w-sm'],
-      compact: ['tw-text-xs', 'tw-leading-4', 'tw-max-w-xs'],
-      destructive: ['tw-text-sm', 'tw-leading-5', 'tw-max-w-sm'],
-    },
-  },
-  defaultVariants: {
-    variant: 'default',
-  },
-});
-
-const errorStateActionsClassnames = cva(['tw-flex', 'tw-items-center', 'tw-flex-wrap'], {
-  variants: {
-    variant: {
-      default: ['tw-gap-3', 'tw-mt-2'],
-      compact: ['tw-gap-2', 'tw-mt-1'],
-      destructive: ['tw-gap-3', 'tw-mt-2'],
-    },
-  },
-  defaultVariants: {
-    variant: 'default',
-  },
-});
-
-type Variant = VariantProps<typeof errorStateClassnames>['variant'];
-
-/**
- * Props for `ErrorState`. `variant` chooses look — `"default"` for non-blocking errors, `"compact"` for
- * inside cards, `"destructive"` for blocking failures (red title + icon).
- */
-type RootProps = ComponentProps<'div'> &
-  VariantProps<typeof errorStateClassnames> & {
-    variant?: Variant;
-  };
-
-/**
- * Page-level error placeholder with icon, title, description, and recovery-action slots.
- *
- * **When to use:** the page can't render its content because a request failed, the user lacks permission,
- * or the entity doesn't exist. Show a recovery action (retry, go back, request access) in
- * `ErrorState.Actions`.
- * **When NOT to use:** for transient operation failures use `toast()`; for inline form validation use
- * `FormGroup state="error"`; for contextual warning banners use `Alert variant="error"`.
- * **Composition:** nest `ErrorState.Icon`, `ErrorState.Title`, `ErrorState.Description`, and
- * `ErrorState.Actions`. Use `variant="destructive"` for full-page critical failures.
- */
-const ErrorStateRoot = ({ className, variant = 'default', children, ...rest }: RootProps) => (
-  <div role="alert" className={errorStateClassnames({ className, variant })} {...rest}>
-    {children}
-  </div>
-);
-
-type SlotProps = ComponentProps<'div'> & { variant?: Variant };
-
-const ErrorStateIcon = ({ className, variant = 'default', children, ...rest }: SlotProps) => (
-  <div className={errorStateIconClassnames({ className, variant })} {...rest}>
-    {children}
-  </div>
-);
-
-type TitleProps = ComponentProps<'h3'> & { variant?: Variant };
-
-const ErrorStateTitle = ({ className, variant = 'default', children, ...rest }: TitleProps) => (
-  <h3 className={errorStateTitleClassnames({ className, variant })} {...rest}>
-    {children}
-  </h3>
-);
-
-type DescriptionProps = ComponentProps<'p'> & { variant?: Variant };
-
-const ErrorStateDescription = ({
-  className,
-  variant = 'default',
-  children,
-  ...rest
-}: DescriptionProps) => (
-  <p className={errorStateDescriptionClassnames({ className, variant })} {...rest}>
-    {children}
-  </p>
-);
-
-type ActionsProps = ComponentProps<'div'> & { variant?: Variant };
-
-const ErrorStateActions = ({ className, variant = 'default', children, ...rest }: ActionsProps) => (
-  <div className={errorStateActionsClassnames({ className, variant })} {...rest}>
-    {children}
-  </div>
-);
-
-export const ErrorState = ErrorStateRoot as typeof ErrorStateRoot & {
-  Icon: typeof ErrorStateIcon;
-  Title: typeof ErrorStateTitle;
-  Description: typeof ErrorStateDescription;
-  Actions: typeof ErrorStateActions;
-};
-
-ErrorState.Icon = ErrorStateIcon;
-ErrorState.Title = ErrorStateTitle;
-ErrorState.Description = ErrorStateDescription;
-ErrorState.Actions = ErrorStateActions;
-
-export type { RootProps as ErrorStateProps, Variant as ErrorStateVariant };

package/src/blocks/ErrorState/index.ts

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

package/src/blocks/Form/components/FormBody.tsx

@@ -1,27 +0,0 @@
-import type { ComponentProps, ReactNode } from 'react';
-
-import { cn } from '@keboola/design';
-
-import { useFormContext } from '../contexts';
-
-type Props = {
-  children: ReactNode;
-} & Omit<ComponentProps<'form'>, 'onSubmit'>;
-
-export const FormBody = ({ children, className, ...formProps }: Props) => {
-  const form = useFormContext();
-
-  return (
-    <form
-      {...formProps}
-      className={cn('tw-flex tw-flex-col tw-gap-4', className)}
-      onSubmit={(e) => {
-        e.preventDefault();
-        e.stopPropagation();
-        void form.handleSubmit();
-      }}
-    >
-      {children}
-    </form>
-  );
-};

package/src/blocks/Form/components/SubmitButton.tsx

@@ -1,30 +0,0 @@
-import type { ComponentProps, ReactNode } from 'react';
-
-import { Button } from '@keboola/design';
-
-import { useFormContext } from '../contexts';
-
-type Props = {
-  children?: ReactNode;
-} & Omit<ComponentProps<typeof Button>, 'type' | 'isLoading' | 'disabled'>;
-
-export const SubmitButton = ({ children = 'Submit', ...buttonProps }: Props) => {
-  const form = useFormContext();
-
-  return (
-    <form.Subscribe
-      selector={(state) => ({ isSubmitting: state.isSubmitting, canSubmit: state.canSubmit })}
-    >
-      {({ isSubmitting, canSubmit }) => (
-        <Button
-          {...buttonProps}
-          type="submit"
-          isLoading={isSubmitting}
-          disabled={!canSubmit || isSubmitting}
-        >
-          {children}
-        </Button>
-      )}
-    </form.Subscribe>
-  );
-};

package/src/blocks/Form/connectors/CheckboxField.tsx

@@ -1,34 +0,0 @@
-import type { ComponentProps, ReactNode } from 'react';
-
-import { Checkbox } from '@keboola/design';
-
-import { useFieldContext } from '../contexts';
-
-import { FieldShell } from './FieldShell';
-
-type Props = {
-  label?: ReactNode;
-  help?: ReactNode;
-  className?: string;
-} & Omit<ComponentProps<typeof Checkbox>, 'id' | 'name' | 'checked' | 'onCheckedChange'>;
-
-export const CheckboxField = ({ label, help, className, children, ...checkboxProps }: Props) => {
-  const field = useFieldContext<boolean>();
-
-  return (
-    <FieldShell field={field} help={help} className={className}>
-      <Checkbox
-        id={field.name}
-        name={field.name}
-        checked={field.state.value ?? false}
-        onCheckedChange={(checked) => {
-          field.handleChange(checked === true);
-        }}
-        onBlur={field.handleBlur}
-        {...checkboxProps}
-      >
-        {children ?? label}
-      </Checkbox>
-    </FieldShell>
-  );
-};

package/src/blocks/Form/connectors/FieldShell.tsx

@@ -1,46 +0,0 @@
-import type { ReactNode } from 'react';
-import type { AnyFieldApi } from '@tanstack/react-form';
-
-import { FormGroup, Label } from '@keboola/design';
-
-type Props = {
-  field: AnyFieldApi;
-  label?: ReactNode;
-  required?: boolean;
-  help?: ReactNode;
-  className?: string;
-  children: ReactNode;
-};
-
-const errorMessage = (field: AnyFieldApi): string | undefined => {
-  const first = field.state.meta.errors[0];
-  if (!first) return undefined;
-  if (typeof first === 'string') return first;
-  if (typeof first === 'object' && first !== null && 'message' in first) {
-    const message = (first as { message: unknown }).message;
-    return typeof message === 'string' ? message : undefined;
-  }
-  return undefined;
-};
-
-export const FieldShell = ({ field, label, required, help, className, children }: Props) => {
-  const error = errorMessage(field);
-  const showError = field.state.meta.isTouched && !!error;
-
-  return (
-    <FormGroup className={className} state={showError ? 'error' : undefined}>
-      {label && (
-        <Label htmlFor={field.name}>
-          {label}
-          {required && <span className="tw-ml-0.5 tw-text-secondary-500">*</span>}
-        </Label>
-      )}
-      {children}
-      {showError ? (
-        <FormGroup.Help>{error}</FormGroup.Help>
-      ) : (
-        help && <FormGroup.Help>{help}</FormGroup.Help>
-      )}
-    </FormGroup>
-  );
-};

package/src/blocks/Form/connectors/NumberField.tsx

@@ -1,36 +0,0 @@
-import type { ComponentProps, ReactNode } from 'react';
-
-import { FormGroup } from '@keboola/design';
-
-import { useFieldContext } from '../contexts';
-
-import { FieldShell } from './FieldShell';
-
-type Props = {
-  label?: ReactNode;
-  required?: boolean;
-  help?: ReactNode;
-  className?: string;
-} & Omit<
-  ComponentProps<typeof FormGroup.NumberInput>,
-  'id' | 'name' | 'value' | 'onValueChange' | 'onBlur'
->;
-
-export const NumberField = ({ label, required, help, className, ...inputProps }: Props) => {
-  const field = useFieldContext<number | null>();
-
-  return (
-    <FieldShell field={field} label={label} required={required} help={help} className={className}>
-      <FormGroup.NumberInput
-        id={field.name}
-        name={field.name}
-        value={field.state.value ?? null}
-        onValueChange={(value) => {
-          field.handleChange(value);
-        }}
-        onBlur={field.handleBlur}
-        {...inputProps}
-      />
-    </FieldShell>
-  );
-};

package/src/blocks/Form/connectors/PasswordField.tsx

@@ -1,38 +0,0 @@
-import type { ComponentProps, ReactNode } from 'react';
-
-import { PasswordInput } from '@keboola/design';
-
-import { useFieldContext } from '../contexts';
-
-import { FieldShell } from './FieldShell';
-
-type Props = {
-  label?: ReactNode;
-  required?: boolean;
-  help?: ReactNode;
-  className?: string;
-} & Omit<
-  ComponentProps<typeof PasswordInput>,
-  'id' | 'name' | 'value' | 'onValueChange' | 'onBlur'
->;
-
-export const PasswordField = ({ label, required, help, className, ...inputProps }: Props) => {
-  const field = useFieldContext<string>();
-  const showError = field.state.meta.isTouched && field.state.meta.errors.length > 0;
-
-  return (
-    <FieldShell field={field} label={label} required={required} help={help} className={className}>
-      <PasswordInput
-        id={field.name}
-        name={field.name}
-        value={field.state.value ?? ''}
-        state={showError ? 'error' : undefined}
-        onValueChange={(value) => {
-          field.handleChange(value);
-        }}
-        onBlur={field.handleBlur}
-        {...inputProps}
-      />
-    </FieldShell>
-  );
-};