@keboola/design 1.0.0

package/src/blocks/ColorInput/utils.ts

@@ -0,0 +1,74 @@
+import type { ComponentProps } from 'react';
+
+const HEX_CHARSET = /^[0-9a-fA-F]+$/;
+// `#` + 3, 4, 6, or 8 hex digits — every length CSS accepts as a hex color.
+const COMPLETE_HEX_PATTERN = /^#(?:[0-9a-fA-F]{3,4}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})$/;
+// Longest hex body CSS accepts (`#rrggbbaa` without the hash).
+const MAX_HEX_BODY_LENGTH = 8;
+// Native <input type="color"> default when fed anything unparseable.
+const PICKER_FALLBACK = '#000000';
+
+const extractHexBody = (value: unknown): string | null => {
+  if (typeof value !== 'string') return null;
+  const trimmed = value.trim();
+  if (trimmed === '') return null;
+  return trimmed.startsWith('#') ? trimmed.slice(1) : trimmed;
+};
+
+export const isCompleteHexColor = (value: string): boolean => COMPLETE_HEX_PATTERN.test(value);
+
+// @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/showPicker
+export const showPicker = (input: HTMLInputElement) => {
+  const isShowPickerSupported = 'showPicker' in HTMLInputElement.prototype;
+  isShowPickerSupported ? input.showPicker() : input.click();
+};
+
+/**
+ * Coerces free-form text into a partial hex color for the visible text
+ * input. Allows up to 8 hex digits to support `#rrggbbaa` (RGBA / alpha).
+ *
+ * Behaviour:
+ * - empty / null / undefined / non-string → `''`
+ * - trims surrounding whitespace
+ * - prepends `#` when the user types raw hex without it
+ * - keeps only the leading run of valid hex digits, dropping the rest
+ * - caps total length at `# + 8` hex digits
+ * - returns `''` when no valid hex digits remain (e.g. bare `#`, `zz`) so
+ *   the input doesn't sit on a lonely `#`
+ *
+ * Note: the result may be a *prefix* (e.g. `#a`, `#ab`) that is not yet a
+ * valid CSS color — gate any rendering on `isCompleteHexColor`.
+ */
+export const coerceHexInputValue = (value?: string | null): string => {
+  const body = extractHexBody(value);
+  if (body === null) return '';
+  const [validBody] = body.match(/^[0-9a-fA-F]+/) ?? [];
+  if (!validBody) return '';
+  return `#${validBody.slice(0, MAX_HEX_BODY_LENGTH)}`;
+};
+
+/**
+ * Coerces any value into the strict lowercase `#rrggbb` form required by the
+ * native `<input type="color">`. Anything the picker can't render is
+ * collapsed to `#000000`.
+ *
+ * - 3-digit shorthand (`#abc`) → expanded to 6 digits (`#aabbcc`)
+ * - 4/8-digit RGBA → alpha channel is dropped
+ * - invalid characters, wrong length, or non-string types → `#000000`
+ *
+ * The native picker silently lowercases its value; we lowercase here too so
+ * controlled consumers see the same string round-trip.
+ */
+export const coerceColorPickerValue = (value: ComponentProps<'input'>['value'] | null) => {
+  const body = extractHexBody(value);
+  if (body === null || !HEX_CHARSET.test(body)) return PICKER_FALLBACK;
+
+  if (body.length === 3 || body.length === 4) {
+    const [r, g, b] = body;
+    return `#${r}${r}${g}${g}${b}${b}`.toLowerCase();
+  }
+  if (body.length === 6 || body.length === 8) {
+    return `#${body.slice(0, 6).toLowerCase()}`;
+  }
+  return PICKER_FALLBACK;
+};

package/src/blocks/EmptyConfigurationActionCard/EmptyConfigurationActionCard.stories.tsx

@@ -0,0 +1,30 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { Button } from '../../components/Button';
+
+import { EmptyConfigurationActionCard } from './EmptyConfigurationActionCard';
+
+type Story = StoryObj<typeof EmptyConfigurationActionCard>;
+
+export default {
+  component: EmptyConfigurationActionCard,
+  args: {
+    title: 'Rows',
+    children: (
+      <>
+        <p>No rows created.</p>
+        <Button onClick={() => {}}>Add Row</Button>
+      </>
+    ),
+  },
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'Empty card component for configuration detail, centers children in Chrome and Safari.',
+      },
+    },
+  },
+} satisfies Meta<typeof EmptyConfigurationActionCard>;
+
+export const Basic: Story = {};

package/src/blocks/EmptyConfigurationActionCard/EmptyConfigurationActionCard.tsx

@@ -0,0 +1,20 @@
+import type { ReactNode } from 'react';
+
+import { Card } from '../../components/Card';
+
+type Props = {
+  title: string;
+  children: ReactNode;
+  className?: string;
+};
+
+export const EmptyConfigurationActionCard = ({ title, children, className }: Props) => {
+  return (
+    <Card className={className}>
+      <Card.Header>
+        <Card.Title>{title}</Card.Title>
+      </Card.Header>
+      <Card.Content className="tw-flex tw-flex-col tw-items-center">{children}</Card.Content>
+    </Card>
+  );
+};

package/src/blocks/EmptyConfigurationActionCard/index.ts

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

package/src/blocks/EmptyState/EmptyState.stories.tsx

@@ -0,0 +1,93 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { Button } from '../../components/Button';
+import { Icon } from '../../components/Icon';
+
+import { EmptyState } from './EmptyState';
+
+type Story = StoryObj<typeof EmptyState>;
+
+export default {
+  component: EmptyState,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'Empty state block for use when a list, table, or search returns no results. Slots compose existing `Button` and `Icon`. Supports `default` and `compact` variants. Default icon color is `tw-text-muted-foreground` — pass `className` on `EmptyState.Icon` to override.',
+      },
+    },
+  },
+} satisfies Meta<typeof EmptyState>;
+
+export const ListEmpty: Story = {
+  name: 'List empty',
+  render: () => (
+    <EmptyState>
+      <EmptyState.Icon>
+        <Icon icon="list-ul" />
+      </EmptyState.Icon>
+      <EmptyState.Title>No items yet</EmptyState.Title>
+      <EmptyState.Description>
+        Get started by creating your first item. It will appear here once added.
+      </EmptyState.Description>
+      <EmptyState.Actions>
+        <Button onClick={() => {}}>Create item</Button>
+      </EmptyState.Actions>
+    </EmptyState>
+  ),
+};
+
+export const TableEmpty: Story = {
+  name: 'Table empty',
+  render: () => (
+    <EmptyState>
+      <EmptyState.Icon>
+        <Icon icon="table" />
+      </EmptyState.Icon>
+      <EmptyState.Title>No rows found</EmptyState.Title>
+      <EmptyState.Description>
+        This table has no rows. Add your first row to get started.
+      </EmptyState.Description>
+      <EmptyState.Actions>
+        <Button onClick={() => {}}>Add row</Button>
+        <Button variant="outline" onClick={() => {}}>
+          Import data
+        </Button>
+      </EmptyState.Actions>
+    </EmptyState>
+  ),
+};
+
+export const SearchNoResults: Story = {
+  name: 'Search — no results',
+  render: () => (
+    <EmptyState>
+      <EmptyState.Icon>
+        <Icon icon="search" />
+      </EmptyState.Icon>
+      <EmptyState.Title>No results found</EmptyState.Title>
+      <EmptyState.Description>
+        We couldn&apos;t find anything matching your search. Try a different query or clear your
+        filters.
+      </EmptyState.Description>
+      <EmptyState.Actions>
+        <Button variant="outline" onClick={() => {}}>
+          Clear search
+        </Button>
+      </EmptyState.Actions>
+    </EmptyState>
+  ),
+};
+
+export const CompactListEmpty: Story = {
+  name: 'Compact — list empty',
+  render: () => (
+    <EmptyState variant="compact">
+      <EmptyState.Icon variant="compact">
+        <Icon icon="bell" />
+      </EmptyState.Icon>
+      <EmptyState.Title variant="compact">No notifications</EmptyState.Title>
+      <EmptyState.Description variant="compact">You&apos;re all caught up!</EmptyState.Description>
+    </EmptyState>
+  ),
+};

package/src/blocks/EmptyState/EmptyState.tsx

@@ -0,0 +1,130 @@
+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'],
+        compact: ['tw-size-10', 'tw-text-2xl'],
+      },
+    },
+    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'];
+
+type RootProps = ComponentProps<'div'> &
+  VariantProps<typeof emptyStateClassnames> & {
+    variant?: Variant;
+  };
+
+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

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

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

@@ -0,0 +1,125 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { Button } from '../../components/Button';
+import { Icon } from '../../components/Icon';
+
+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>
+        <Icon icon="circle-exclamation" />
+      </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>
+        <Icon 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>
+        <Icon icon="link-slash" />
+      </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">
+        <Icon icon="triangle-exclamation" />
+      </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">
+        <Icon icon="circle-xmark" />
+      </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

@@ -0,0 +1,132 @@
+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', 'tw-text-warning-500'],
+      compact: ['tw-size-10', 'tw-text-2xl', 'tw-text-warning-500'],
+      destructive: ['tw-size-16', 'tw-text-4xl', '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'];
+
+type RootProps = ComponentProps<'div'> &
+  VariantProps<typeof errorStateClassnames> & {
+    variant?: Variant;
+  };
+
+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

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

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

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

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