@keboola/design 2.0.0 → 2.1.0

package/src/components/DropdownMenu/styles.ts

@@ -1,82 +0,0 @@
-import { cn } from '../../utils';
-
-export const itemVariants = cn(
-  // reset
-  'tailwindcss-preflight',
-  'tw-outline-none',
-  'tw-group',
-  'tw-peer',
-  'tw-relative',
-
-  // positioning
-  'tw-flex',
-  'tw-flex-1',
-  'tw-items-center',
-  'tw-gap-2',
-
-  'tw-cursor-pointer',
-  'tw-select-none',
-  'tw-transition-colors',
-
-  // spacing
-  'tw-p-2',
-
-  // typography
-  'tw-font-sans',
-  'tw-text-sm',
-
-  'aria-disabled:tw-pointer-events-none',
-  'aria-disabled:tw-opacity-50',
-
-  'focus-visible:tw-outline-none',
-
-  'group-data-[variant=default]/dropdown-menu-content:tw-rounded',
-  'group-data-[variant=default]/dropdown-menu-content:focus:tw-bg-neutral-100',
-  'group-data-[variant=default]/dropdown-menu-content:focus:tw-text-neutral-900',
-  'group-data-[variant=default]/dropdown-menu-content:hover:tw-bg-neutral-100',
-  'group-data-[variant=default]/dropdown-menu-content:hover:tw-text-neutral-900',
-
-  'group-data-[variant=argo]/dropdown-menu-content:tw-rounded-md',
-  'group-data-[variant=argo]/dropdown-menu-content:tw-text-slate-800',
-  'group-data-[variant=argo]/dropdown-menu-content:focus:tw-text-slate-800',
-  'group-data-[variant=argo]/dropdown-menu-content:focus:tw-bg-sky-100',
-  'group-data-[variant=argo]/dropdown-menu-content:hover:tw-text-slate-800',
-  'group-data-[variant=argo]/dropdown-menu-content:hover:tw-bg-sky-100',
-);
-
-export const contentVariants = cn(
-  'tailwindcss-preflight',
-  'tw-group/dropdown-menu-content',
-  'tw-z-[1040]',
-  'tw-bg-white',
-
-  // positioning
-  'tw-flex',
-  'tw-flex-col',
-  'tw-origin-[--radix-dropdown-menu-content-transform-origin]',
-
-  // sizing
-  'tw-max-h-[var(--radix-dropdown-menu-content-available-height)]',
-  'tw-min-w-32',
-
-  // border
-  'tw-border',
-  'tw-shadow-md',
-
-  'data-[variant=default]:tw-rounded-md',
-  'data-[variant=argo]:tw-rounded-2xl',
-
-  // animations
-  'data-[state=open]:tw-animate-in',
-  'data-[state=open]:tw-fade-in-0',
-  'data-[state=open]:tw-zoom-in-95',
-
-  'data-[state=closed]:tw-animate-out',
-  'data-[state=closed]:tw-fade-out-0',
-  'data-[state=closed]:tw-zoom-out-95',
-
-  'data-[side=bottom]:tw-slide-in-from-top-2',
-  'data-[side=left]:tw-slide-in-from-right-2',
-  'data-[side=right]:tw-slide-in-from-left-2',
-  'data-[side=top]:tw-slide-in-from-bottom-2',
-);

package/src/components/EmptySearchContent.stories.tsx

@@ -1,12 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-
-import { EmptySearchContent } from './EmptySearchContent';
-
-const meta: Meta<typeof EmptySearchContent> = {
-  component: EmptySearchContent,
-};
-
-export default meta;
-type Story = StoryObj<typeof EmptySearchContent>;
-
-export const Basic: Story = {};

package/src/components/EmptySearchContent.tsx

@@ -1,13 +0,0 @@
-import type { ReactNode } from 'react';
-
-type Props = {
-  children?: ReactNode;
-};
-
-export const EmptySearchContent = ({ children = 'No results found.' }: Props) => {
-  return (
-    <div className="tw-px-0 tw-py-[30px] tw-text-center tw-text-sm tw-text-neutral-400">
-      {children}
-    </div>
-  );
-};

package/src/components/FieldBox/FieldBox.stories.tsx

@@ -1,138 +0,0 @@
-import type { ComponentProps } from 'react';
-import type { Meta, StoryObj } from '@storybook/react-vite';
-
-import { Checkbox } from '../Checkbox';
-import { Switch } from '../Switch';
-
-import { FieldBox } from './FieldBox';
-
-type StoryArgs = ComponentProps<typeof FieldBox> & { description?: string; argo?: boolean };
-type Story = StoryObj<StoryArgs>;
-
-export default {
-  component: FieldBox,
-  title: 'Components/FieldBox',
-  args: {
-    variant: 'default',
-    position: 'start',
-    description: '',
-    argo: true,
-  },
-  argTypes: {
-    variant: { control: { type: 'select' }, options: ['default', 'boxed'] },
-    position: { control: { type: 'select' }, options: ['start', 'end'] },
-    description: { control: { type: 'text' } },
-    argo: { control: { type: 'boolean' } },
-  },
-} satisfies Meta<StoryArgs>;
-
-export const WithSwitch: Story = {
-  render: ({ description, argo, ...args }) => (
-    <FieldBox {...args} htmlFor="switch-demo" control={<Switch argo={argo} id="switch-demo" />}>
-      <FieldBox.Title>Airplane Mode</FieldBox.Title>
-      {description && <FieldBox.Description>{description}</FieldBox.Description>}
-    </FieldBox>
-  ),
-};
-
-export const WithSwitchAndDescription: Story = {
-  args: {
-    description: 'Receive emails about new products, features, and more.',
-  },
-  render: ({ description, argo, ...args }) => (
-    <FieldBox {...args} htmlFor="switch-desc" control={<Switch argo={argo} id="switch-desc" />}>
-      <FieldBox.Title>Marketing emails</FieldBox.Title>
-      {description && <FieldBox.Description>{description}</FieldBox.Description>}
-    </FieldBox>
-  ),
-};
-
-export const WithCheckbox: Story = {
-  render: ({ description, ...args }) => (
-    <FieldBox {...args} htmlFor="checkbox-demo" control={<Checkbox id="checkbox-demo" />}>
-      <FieldBox.Title>Accept terms and conditions</FieldBox.Title>
-      {description && <FieldBox.Description>{description}</FieldBox.Description>}
-    </FieldBox>
-  ),
-};
-
-export const WithCheckboxAndDescription: Story = {
-  args: {
-    description: 'You agree to our Terms of Service and Privacy Policy.',
-  },
-  render: ({ description, ...args }) => (
-    <FieldBox {...args} htmlFor="checkbox-desc" control={<Checkbox id="checkbox-desc" />}>
-      <FieldBox.Title>Accept terms and conditions</FieldBox.Title>
-      {description && <FieldBox.Description>{description}</FieldBox.Description>}
-    </FieldBox>
-  ),
-};
-
-export const Boxed: Story = {
-  args: {
-    variant: 'boxed',
-    description: 'Receive push notifications.',
-  },
-  render: ({ description, argo, ...args }) => (
-    <div className="tw-flex tw-flex-col tw-gap-3">
-      <FieldBox {...args} htmlFor="boxed-switch" control={<Switch argo={argo} id="boxed-switch" />}>
-        <FieldBox.Title>Notifications</FieldBox.Title>
-        {description && <FieldBox.Description>{description}</FieldBox.Description>}
-      </FieldBox>
-      <FieldBox
-        {...args}
-        htmlFor="boxed-switch-2"
-        control={<Switch argo={argo} checked id="boxed-switch-2" />}
-      >
-        <FieldBox.Title>Marketing emails</FieldBox.Title>
-        {description && <FieldBox.Description>{description}</FieldBox.Description>}
-      </FieldBox>
-    </div>
-  ),
-};
-
-export const DisabledStates: Story = {
-  render: ({ argo }) => (
-    <div className="tw-flex tw-flex-col tw-gap-3">
-      <FieldBox htmlFor="dis-1" control={<Switch argo={argo} disabled id="dis-1" />}>
-        <FieldBox.Title>Disabled off</FieldBox.Title>
-        <FieldBox.Description>This switch is disabled.</FieldBox.Description>
-      </FieldBox>
-      <FieldBox htmlFor="dis-2" control={<Switch argo={argo} disabled checked id="dis-2" />}>
-        <FieldBox.Title>Disabled on</FieldBox.Title>
-        <FieldBox.Description>This switch is disabled.</FieldBox.Description>
-      </FieldBox>
-      <FieldBox
-        htmlFor="dis-3"
-        variant="boxed"
-        control={<Switch argo={argo} disabled id="dis-3" />}
-      >
-        <FieldBox.Title>Boxed disabled</FieldBox.Title>
-        <FieldBox.Description>This switch is disabled.</FieldBox.Description>
-      </FieldBox>
-    </div>
-  ),
-};
-
-export const PositionEnd: Story = {
-  args: {
-    position: 'end',
-  },
-  render: ({ description, argo, ...args }) => (
-    <div className="tw-flex tw-w-80 tw-flex-col tw-gap-3">
-      <FieldBox {...args} htmlFor="end-1" control={<Switch argo={argo} id="end-1" />}>
-        <FieldBox.Title>Wi-Fi</FieldBox.Title>
-        {description && <FieldBox.Description>{description}</FieldBox.Description>}
-      </FieldBox>
-      <FieldBox
-        {...args}
-        htmlFor="end-2"
-        variant="boxed"
-        control={<Switch argo={argo} id="end-2" />}
-      >
-        <FieldBox.Title>Bluetooth</FieldBox.Title>
-        <FieldBox.Description>Connect to nearby devices.</FieldBox.Description>
-      </FieldBox>
-    </div>
-  ),
-};

package/src/components/FieldBox/FieldBox.tsx

@@ -1,43 +0,0 @@
-import type { ComponentProps, ElementRef, ReactNode, Ref } from 'react';
-import type { VariantProps } from 'class-variance-authority';
-
-import { cn } from '../../utils';
-
-import { FieldBoxDescription } from './FieldBoxDescription';
-import { FieldBoxTitle } from './FieldBoxTitle';
-import { fieldBoxVariants } from './styles';
-
-type Props = {
-  control: ReactNode;
-  position?: 'start' | 'end';
-} & ComponentProps<'label'> &
-  VariantProps<typeof fieldBoxVariants>;
-
-const FieldBoxRoot = ({
-  ref,
-  className,
-  variant,
-  position = 'start',
-  control,
-  children,
-  ...rest
-}: Props & { ref?: Ref<ElementRef<'label'>> }) => (
-  <label
-    {...rest}
-    ref={ref}
-    className={cn(
-      fieldBoxVariants({ variant, className }),
-      position === 'end' && 'tw-flex-row-reverse',
-    )}
-  >
-    <span className="tw-inline-flex tw-min-h-5 tw-shrink-0 tw-items-center">{control}</span>
-    {children != null && (
-      <span className="tw-flex tw-flex-1 tw-flex-col tw-gap-0.5">{children}</span>
-    )}
-  </label>
-);
-
-export const FieldBox = Object.assign(FieldBoxRoot, {
-  Title: FieldBoxTitle,
-  Description: FieldBoxDescription,
-});

package/src/components/FieldBox/FieldBoxDescription.tsx

@@ -1,18 +0,0 @@
-import type { ComponentProps } from 'react';
-
-import { cn } from '../../utils';
-
-type Props = ComponentProps<'span'>;
-
-export const FieldBoxDescription = ({ className, ...props }: Props) => (
-  <span
-    {...props}
-    data-slot="field-box-description"
-    className={cn(
-      'tw-text-xs',
-      'tw-text-muted-foreground',
-      'group-has-[:disabled]/field-box:tw-opacity-50',
-      className,
-    )}
-  />
-);

package/src/components/FieldBox/FieldBoxTitle.tsx

@@ -1,20 +0,0 @@
-import type { ComponentProps } from 'react';
-
-import { cn } from '../../utils';
-
-type Props = ComponentProps<'span'>;
-
-export const FieldBoxTitle = ({ className, ...props }: Props) => (
-  <span
-    {...props}
-    data-slot="field-box-title"
-    className={cn(
-      'tw-text-sm',
-      'tw-font-medium',
-      'tw-text-foreground',
-      'group-has-[:disabled]/field-box:tw-cursor-not-allowed',
-      'group-has-[:disabled]/field-box:tw-opacity-50',
-      className,
-    )}
-  />
-);

package/src/components/FieldBox/index.ts

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

package/src/components/FieldBox/styles.ts

@@ -1,37 +0,0 @@
-import { cva } from 'class-variance-authority';
-
-export const fieldBoxVariants = cva(
-  [
-    'tw-group/field-box',
-    'tw-m-0',
-    'tw-inline-flex',
-    'tw-gap-3',
-    'tw-items-center',
-    'has-[[data-slot=field-box-description]]:tw-items-start',
-    'tw-cursor-pointer',
-    'tw-select-none',
-    'has-[:disabled]:tw-cursor-not-allowed',
-  ],
-  {
-    variants: {
-      variant: {
-        default: [],
-        boxed: [
-          'tw-rounded-lg',
-          'tw-border',
-          'tw-border-solid',
-          'tw-border-border',
-          'tw-p-3',
-          'tw-transition-colors',
-          'has-[[data-state=checked]]:tw-border-primary',
-          'has-[[data-state=checked]]:tw-bg-accent',
-          'has-[[data-state=indeterminate]]:tw-border-primary',
-          'has-[[data-state=indeterminate]]:tw-bg-accent',
-        ],
-      },
-    },
-    defaultVariants: {
-      variant: 'default',
-    },
-  },
-);

package/src/components/FormGroup/FormGroup.stories.tsx

@@ -1,120 +0,0 @@
-import { useState } from 'react';
-import type { ComponentProps } from 'react';
-import type { Meta, StoryObj } from '@storybook/react-vite';
-
-import { Info } from '../../icons';
-import { Label } from '../Label';
-
-import { FormGroup } from './FormGroup';
-
-type Story = StoryObj<typeof FormGroup>;
-
-type Props = ComponentProps<typeof FormGroup> &
-  Pick<ComponentProps<typeof FormGroup.TextInput>, 'variant'>;
-
-const MyForm = {
-  NAME: 'name',
-  AGE: 'age',
-  COLOR: 'color',
-  DESCRIPTION: 'description',
-} as const;
-
-type FormValue = {
-  [MyForm.NAME]: string;
-  [MyForm.COLOR]: string;
-  [MyForm.AGE]: number | null;
-  [MyForm.DESCRIPTION]: string;
-};
-
-const FormGroupDemo = ({ variant = 'primary', ...formGroupProps }: Props) => {
-  const [state, setState] = useState<FormValue>({
-    [MyForm.NAME]: '',
-    [MyForm.COLOR]: '',
-    [MyForm.AGE]: null,
-    [MyForm.DESCRIPTION]: '',
-  });
-
-  return (
-    <>
-      <form className="tw-flex tw-flex-col tw-gap-4">
-        <FormGroup {...formGroupProps}>
-          <Label>
-            Text Input <Info className="tw-size-4 tw-text-neutral-400" />
-          </Label>
-          <FormGroup.TextInput
-            placeholder="e.g John"
-            variant={variant}
-            name={MyForm.NAME}
-            onValueChange={(value) => {
-              setState((prevState) => ({ ...prevState, [MyForm.NAME]: value }));
-            }}
-          />
-          <FormGroup.Help>Helper text</FormGroup.Help>
-        </FormGroup>
-
-        <FormGroup {...formGroupProps}>
-          <Label>Number Input</Label>
-          <FormGroup.NumberInput
-            placeholder="e.g 20"
-            variant={variant}
-            name={MyForm.AGE}
-            onValueChange={(value) => {
-              setState((prevState) => ({ ...prevState, [MyForm.AGE]: value }));
-            }}
-          />
-          <FormGroup.Help>Helper text</FormGroup.Help>
-        </FormGroup>
-
-        <FormGroup {...formGroupProps}>
-          <Label>Color Input</Label>
-          <FormGroup.ColorInput
-            placeholder="e.g #ff0000"
-            variant={variant}
-            name={MyForm.COLOR}
-            onValueChange={(value) => {
-              setState((prevState) => ({ ...prevState, [MyForm.COLOR]: value }));
-            }}
-          />
-          <FormGroup.Help>Helper text</FormGroup.Help>
-        </FormGroup>
-
-        <FormGroup {...formGroupProps}>
-          <Label>Textarea</Label>
-          <FormGroup.Textarea
-            placeholder="Write some Description"
-            variant={variant}
-            name={MyForm.DESCRIPTION}
-            minRows={2}
-            onValueChange={(value) => {
-              setState((prevState) => ({ ...prevState, [MyForm.DESCRIPTION]: value }));
-            }}
-          />
-          <FormGroup.Help>Helper Text</FormGroup.Help>
-        </FormGroup>
-      </form>
-      <h2 className="tw-mb-0">Values</h2>
-      <pre>{JSON.stringify(state, null, 2)}</pre>
-    </>
-  );
-};
-
-export default {
-  component: FormGroupDemo,
-  args: {
-    state: 'default',
-    variant: 'primary',
-  },
-  argTypes: {
-    state: {
-      description: 'Set validation state',
-      type: { name: 'enum', value: ['default', 'error', 'warning'] },
-    },
-    variant: {
-      description: 'Set Variant',
-      type: { name: 'enum', value: ['primary', 'secondary', 'argo'] },
-    },
-  },
-  render: FormGroupDemo,
-} satisfies Meta<typeof FormGroupDemo>;
-
-export const Default: Story = {};

package/src/components/FormGroup/FormGroup.tsx

@@ -1,48 +0,0 @@
-import type { ReactNode } from 'react';
-
-import { cn } from '../../utils';
-
-import { FormGroupProvider } from './context';
-import { FormGroupColorInput } from './FormGroupColorInput';
-import { FormGroupHelp } from './FormGroupHelp';
-import { FormGroupNumberInput } from './FormGroupNumberInput';
-import { FormGroupTextarea } from './FormGroupTextarea';
-import { FormGroupTextInput } from './FormGroupTextInput';
-import type { FormGroupContext } from './types';
-
-/**
- * Props for `FormGroup`. `state` from `FormGroupContext` ("default" | "error") propagates to nested inputs
- * and help text via context.
- */
-type FormGroupProps = {
-  children: ReactNode;
-  className?: string;
-  testId?: string;
-} & FormGroupContext;
-
-/**
- * Label + input + help-text grouping with shared validation state. Provides the chrome for a single field.
- *
- * **When to use:** rendering a label + bare input + help/error text outside `useAppForm` (e.g. one-off
- * filter fields, settings panes). The `state="error"` flips both `FormGroup.TextInput` and `FormGroup.Help`
- * to error styling without per-component wiring.
- * **When NOT to use:** for a full form with validation and submit state, use `useAppForm` from `blocks/Form` —
- * it composes `FormGroup` internally via the typed field connectors.
- * **Composition:** nest a `Label`, then one of `FormGroup.TextInput` / `FormGroup.NumberInput` /
- * `FormGroup.ColorInput` / `FormGroup.Textarea`, optionally followed by `FormGroup.Help`.
- */
-export const FormGroup = ({ className, children, state, testId }: FormGroupProps) => {
-  return (
-    <FormGroupProvider value={{ state }}>
-      <div data-testid={testId} className={cn('tw-flex tw-flex-col tw-gap-1', className)}>
-        {children}
-      </div>
-    </FormGroupProvider>
-  );
-};
-
-FormGroup.Help = FormGroupHelp;
-FormGroup.TextInput = FormGroupTextInput;
-FormGroup.NumberInput = FormGroupNumberInput;
-FormGroup.ColorInput = FormGroupColorInput;
-FormGroup.Textarea = FormGroupTextarea;

package/src/components/FormGroup/FormGroupColorInput.tsx

@@ -1,15 +0,0 @@
-import type { ComponentProps, ElementRef, Ref } from 'react';
-
-import { ColorInput } from '../../blocks/ColorInput';
-
-import { useFormGroupContext } from './context';
-
-type Props = Omit<ComponentProps<typeof ColorInput>, 'state'>;
-
-export const FormGroupColorInput = ({
-  ref,
-  ...props
-}: Props & { ref?: Ref<ElementRef<'input'>> }) => {
-  const { state } = useFormGroupContext();
-  return <ColorInput state={state} {...props} ref={ref} />;
-};

package/src/components/FormGroup/FormGroupHelp.tsx

@@ -1,17 +0,0 @@
-import type { ComponentProps } from 'react';
-
-import { HelpBlock } from '../HelpBlock';
-
-import { useFormGroupContext } from './context';
-
-type Props = Omit<ComponentProps<typeof HelpBlock>, 'testId' | 'state'>;
-
-export const FormGroupHelp = ({ children, ...rest }: Props) => {
-  const formGroupContext = useFormGroupContext();
-
-  return (
-    <HelpBlock state={formGroupContext.state} {...rest}>
-      {children}
-    </HelpBlock>
-  );
-};

package/src/components/FormGroup/FormGroupNumberInput.tsx

@@ -1,15 +0,0 @@
-import type { ComponentProps, ElementRef, Ref } from 'react';
-
-import { NumberInput } from '../../blocks/NumberInput';
-
-import { useFormGroupContext } from './context';
-
-type Props = Omit<ComponentProps<typeof NumberInput>, 'state'>;
-
-export const FormGroupNumberInput = ({
-  ref,
-  ...props
-}: Props & { ref?: Ref<ElementRef<'input'>> }) => {
-  const { state } = useFormGroupContext();
-  return <NumberInput {...props} ref={ref} state={state} />;
-};

package/src/components/FormGroup/FormGroupTextInput.tsx

@@ -1,15 +0,0 @@
-import type { ComponentProps, ElementRef, Ref } from 'react';
-
-import { TextInput } from '../Input';
-
-import { useFormGroupContext } from './context';
-
-type Props = Omit<ComponentProps<typeof TextInput>, 'state'>;
-
-export const FormGroupTextInput = ({
-  ref,
-  ...props
-}: Props & { ref?: Ref<ElementRef<'input'>> }) => {
-  const { state } = useFormGroupContext();
-  return <TextInput state={state} {...props} ref={ref} />;
-};

package/src/components/FormGroup/FormGroupTextarea.tsx

@@ -1,12 +0,0 @@
-import type { ComponentProps } from 'react';
-
-import { Textarea } from '../../blocks/Textarea';
-
-import { useFormGroupContext } from './context';
-
-type Props = Omit<ComponentProps<typeof Textarea>, 'state'>;
-
-export const FormGroupTextarea = (props: Props) => {
-  const { state } = useFormGroupContext();
-  return <Textarea state={state} {...props} />;
-};

package/src/components/FormGroup/context.ts

@@ -1,11 +0,0 @@
-import { createContext, use } from 'react';
-
-import type { FormGroupContext } from './types';
-
-const FormGroupContext = createContext<FormGroupContext>({
-  state: 'default',
-});
-
-export const FormGroupProvider = FormGroupContext;
-
-export const useFormGroupContext = () => use(FormGroupContext);

package/src/components/FormGroup/index.ts

@@ -1,2 +0,0 @@
-export * from './FormGroup';
-export type { ValidityState } from './types';

package/src/components/FormGroup/types.ts

@@ -1,5 +0,0 @@
-export type ValidityState = 'default' | 'error' | 'warning';
-
-export type FormGroupContext = {
-  state?: ValidityState;
-};

package/src/components/FullScreenModal/FullScreenModal.tsx

@@ -1,8 +0,0 @@
-import { FullScreenModalBody } from './FullScreenModalBody';
-import { FullScreenModalHeader } from './FullScreenModalHeader';
-import { FullScreenModalRoot } from './FullScreenModalRoot';
-
-export const FullScreenModal = Object.assign(FullScreenModalRoot, {
-  Header: FullScreenModalHeader,
-  Body: FullScreenModalBody,
-});

package/src/components/FullScreenModal/FullScreenModalBody.tsx

@@ -1,16 +0,0 @@
-import type { HTMLAttributes, Ref } from 'react';
-
-import { cn } from '../../utils';
-
-type Props = HTMLAttributes<HTMLDivElement>;
-
-export const FullScreenModalBody = ({
-  ref,
-  className,
-  children,
-  ...props
-}: Props & { ref?: Ref<HTMLDivElement> }) => (
-  <div ref={ref} className={cn('tw-flex-1 tw-min-h-0 tw-overflow-auto', className)} {...props}>
-    {children}
-  </div>
-);