@mindlogic-ai/logician-ui 4.0.0-alpha.13 → 4.0.0-alpha.14

package/src/components/Form/FormModalFooter/FormModalFooter.test.tsx

@@ -0,0 +1,155 @@
+import type { ReactNode } from 'react';
+import { fireEvent, render, screen } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+
+import { FormModalFooter } from './FormModalFooter';
+
+// Surface the Button's type/disabled/loading onto the DOM so behavior is
+// testable without a Chakra provider. The copy-agnostic footer owns no
+// translations, so labels are passed explicitly by the caller.
+vi.mock('@/components/Modal', () => ({
+  ModalFooter: ({ children }: { children?: ReactNode }) => (
+    <div data-testid="footer">{children}</div>
+  ),
+}));
+
+vi.mock('@/components/Button', () => ({
+  Button: ({
+    children,
+    onClick,
+    type,
+    disabled,
+    loading,
+  }: {
+    children?: ReactNode;
+    onClick?: () => void;
+    type?: 'button' | 'submit';
+    disabled?: boolean;
+    loading?: boolean;
+  }) => (
+    <button
+      type={type}
+      onClick={onClick}
+      disabled={disabled}
+      data-loading={loading ? 'true' : 'false'}
+    >
+      {children}
+    </button>
+  ),
+}));
+
+vi.mock('@/components/Icon', () => ({
+  TrashIcon: () => <span data-testid="trash" />,
+}));
+
+const noop = () => {};
+
+describe('FormModalFooter', () => {
+  it('renders a Cancel + submit pair with the given labels', () => {
+    render(
+      <FormModalFooter
+        onCancel={noop}
+        onSubmit={noop}
+        cancelLabel="Cancel"
+        submitLabel="Save"
+      />
+    );
+    expect(screen.getByRole('button', { name: 'Cancel' })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Save' })).toBeInTheDocument();
+    // No delete button unless onDelete is provided.
+    expect(screen.queryByTestId('trash')).not.toBeInTheDocument();
+  });
+
+  it('routes cancel and submit clicks to their handlers', () => {
+    const onCancel = vi.fn();
+    const onSubmit = vi.fn();
+    render(
+      <FormModalFooter
+        onCancel={onCancel}
+        onSubmit={onSubmit}
+        cancelLabel="Cancel"
+        submitLabel="Save"
+      />
+    );
+    fireEvent.click(screen.getByRole('button', { name: 'Cancel' }));
+    fireEvent.click(screen.getByRole('button', { name: 'Save' }));
+    expect(onCancel).toHaveBeenCalledTimes(1);
+    expect(onSubmit).toHaveBeenCalledTimes(1);
+  });
+
+  it('is a type="submit" button inside a form (no onSubmit), type="button" with onSubmit', () => {
+    const { rerender } = render(
+      <FormModalFooter
+        onCancel={noop}
+        cancelLabel="Cancel"
+        submitLabel="Save"
+      />
+    );
+    expect(screen.getByRole('button', { name: 'Save' })).toHaveAttribute(
+      'type',
+      'submit'
+    );
+    rerender(
+      <FormModalFooter
+        onCancel={noop}
+        onSubmit={noop}
+        cancelLabel="Cancel"
+        submitLabel="Save"
+      />
+    );
+    expect(screen.getByRole('button', { name: 'Save' })).toHaveAttribute(
+      'type',
+      'button'
+    );
+  });
+
+  it('renders the standard delete button and routes its click', () => {
+    const onDelete = vi.fn();
+    render(
+      <FormModalFooter
+        onCancel={noop}
+        onSubmit={noop}
+        cancelLabel="Cancel"
+        submitLabel="Save"
+        onDelete={onDelete}
+        deleteLabel="Delete"
+      />
+    );
+    expect(screen.getByTestId('trash')).toBeInTheDocument();
+    fireEvent.click(screen.getByRole('button', { name: /Delete/ }));
+    expect(onDelete).toHaveBeenCalledTimes(1);
+  });
+
+  it('disables every button and shows the submit spinner while submitting', () => {
+    render(
+      <FormModalFooter
+        onCancel={noop}
+        onSubmit={noop}
+        cancelLabel="Cancel"
+        submitLabel="Save"
+        onDelete={noop}
+        deleteLabel="Delete"
+        isSubmitting
+      />
+    );
+    expect(screen.getByRole('button', { name: 'Cancel' })).toBeDisabled();
+    expect(screen.getByRole('button', { name: /Delete/ })).toBeDisabled();
+    const submit = screen.getByRole('button', { name: 'Save' });
+    expect(submit).toBeDisabled();
+    expect(submit).toHaveAttribute('data-loading', 'true');
+  });
+
+  it('disables only the submit button when submitDisabled is set', () => {
+    render(
+      <FormModalFooter
+        onCancel={noop}
+        onSubmit={noop}
+        cancelLabel="Cancel"
+        submitLabel="Save"
+        submitDisabled
+      />
+    );
+    expect(screen.getByRole('button', { name: 'Save' })).toBeDisabled();
+    expect(screen.getByRole('button', { name: 'Cancel' })).not.toBeDisabled();
+  });
+});

package/src/components/Form/FormModalFooter/FormModalFooter.tsx

@@ -0,0 +1,83 @@
+import { Button } from '@/components/Button';
+import { TrashIcon } from '@/components/Icon';
+import { ModalFooter } from '@/components/Modal';
+
+import { FormModalFooterProps } from './FormModalFooter.types';
+
+/**
+ * The action footer shared by form-in-a-modal surfaces — the form analog of a
+ * confirm-modal footer. It standardizes the button trio every create/edit modal
+ * hand-rolls: an optional far-left destructive action, a neutral Cancel, and the
+ * primary submit that carries its own loading + disabled state.
+ *
+ * Copy-agnostic by design: as a design-system component it owns no strings, so
+ * `cancelLabel` is required and `deleteLabel` is rendered verbatim — the
+ * consuming app supplies its own (translated) labels.
+ *
+ * Submit path: inside a `<form onSubmit>` leave `onSubmit` unset so the button
+ * stays `type="submit"` (Enter submits); for a portaled or no-`<form>` modal
+ * pass `onSubmit` and it becomes a `type="button"` onClick. `...rest` forwards to
+ * the logician `ModalFooter`, so callers pin it (`position="sticky"` /
+ * `flexShrink={0}`) or zero its padding (`px={0}`) per modal.
+ */
+export const FormModalFooter = ({
+  onDelete,
+  deleteLabel,
+  onCancel,
+  cancelLabel,
+  submitLabel,
+  submitColorPalette = 'primary',
+  isSubmitting = false,
+  submitDisabled = false,
+  onSubmit,
+  bordered = false,
+  ...rest
+}: FormModalFooterProps) => {
+  return (
+    <ModalFooter
+      justifyContent="flex-end"
+      gap={2}
+      {...(bordered
+        ? {
+            bg: 'bg.surface',
+            borderTop: '1px solid',
+            borderColor: 'border.subtle',
+          }
+        : {})}
+      {...rest}
+    >
+      {onDelete && (
+        <Button
+          colorPalette="danger"
+          variant="solid"
+          type="button"
+          onClick={onDelete}
+          disabled={isSubmitting}
+          mr="auto"
+        >
+          <TrashIcon boxSize="sm" />
+          {deleteLabel}
+        </Button>
+      )}
+      <Button
+        colorPalette="neutral"
+        variant="outline"
+        type="button"
+        onClick={onCancel}
+        disabled={isSubmitting}
+      >
+        {cancelLabel}
+      </Button>
+      <Button
+        colorPalette={submitColorPalette}
+        variant="solid"
+        type={onSubmit ? 'button' : 'submit'}
+        onClick={onSubmit}
+        loading={isSubmitting}
+        disabled={isSubmitting || submitDisabled}
+      >
+        {submitLabel}
+      </Button>
+    </ModalFooter>
+  );
+};

package/src/components/Form/FormModalFooter/FormModalFooter.types.ts

@@ -0,0 +1,53 @@
+import { ComponentProps, ReactNode } from 'react';
+
+import { ButtonColorPalette } from '@/components/Button';
+import { ModalFooter } from '@/components/Modal';
+
+type ModalFooterProps = ComponentProps<typeof ModalFooter>;
+
+export interface FormModalFooterProps extends Omit<
+  ModalFooterProps,
+  'children' | 'onSubmit' | 'title'
+> {
+  /**
+   * Optional left-aligned destructive action. Renders the standard danger
+   * delete button (trash glyph + label), pushed to the far left of the footer.
+   */
+  onDelete?: () => void;
+  /** Delete button label. Rendered verbatim (no default — the app owns copy). */
+  deleteLabel?: ReactNode;
+  /** Cancel/dismiss handler. */
+  onCancel: () => void;
+  /**
+   * Cancel button label. Required — a design-system component owns no copy, so
+   * the consuming app must supply the (translated) label.
+   */
+  cancelLabel: ReactNode;
+  /** Primary submit button label. */
+  submitLabel: ReactNode;
+  /** Palette for the primary button. Defaults to `primary`. */
+  submitColorPalette?: ButtonColorPalette;
+  /**
+   * In-flight state — shows the submit spinner and disables every button so the
+   * modal can't be dismissed or re-submitted mid-request.
+   */
+  isSubmitting?: boolean;
+  /**
+   * Extra disable condition for the primary button beyond `isSubmitting` — a
+   * pristine/invalid gate (e.g. `!name.trim()`).
+   */
+  submitDisabled?: boolean;
+  /**
+   * Submit via `onClick` instead of native form submission. Pass this for a
+   * portaled or no-`<form>` modal, where a `type="submit"` button can't reach
+   * the enclosing `<form>`. Omit inside a `<form onSubmit>` so the button stays
+   * `type="submit"` and Enter still submits.
+   */
+  onSubmit?: () => void;
+  /**
+   * Draw the scroll-separator chrome (surface background + top hairline). Set on
+   * a tall scroll-inside modal so the pinned footer reads as separate from the
+   * scrolling body; omit on a short modal.
+   */
+  bordered?: boolean;
+}

package/src/components/Form/FormModalFooter/index.ts

@@ -0,0 +1,2 @@
+export { FormModalFooter } from './FormModalFooter';
+export type { FormModalFooterProps } from './FormModalFooter.types';

package/src/components/Form/FormScrollArea/FormScrollArea.tsx

@@ -0,0 +1,27 @@
+import { PropsWithChildren } from 'react';
+import { Box, BoxProps } from '@chakra-ui/react';
+
+/**
+ * The scrolling body of a form panel: a full-height flex column that scrolls
+ * vertically, so a `position="sticky" bottom={0}` `FormFooter` pins to its
+ * bottom edge. Extracted from `FloatingPanelCard` so the same "scroll column +
+ * pinned footer" geometry can back any left-panel form without pulling in the
+ * card chrome.
+ */
+export const FormScrollArea = ({
+  children,
+  ...rest
+}: PropsWithChildren<BoxProps>) => (
+  <Box
+    h="100%"
+    overflowY="auto"
+    position="relative"
+    display="flex"
+    flexDirection="column"
+    {...rest}
+  >
+    {children}
+  </Box>
+);
+
+FormScrollArea.displayName = 'FormScrollArea';

package/src/components/Form/FormScrollArea/index.ts

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

package/src/components/Form/FormSection/CollapsibleFormSection.tsx

@@ -0,0 +1,35 @@
+import { VStack } from '@chakra-ui/react';
+
+import { CollapsibleSection } from '@/components/Workflow';
+
+import { FormSectionProps } from './FormSection.types';
+
+type CollapsibleFormSectionProps = Pick<
+  FormSectionProps,
+  'title' | 'action' | 'defaultOpen' | 'hasError' | 'gap' | 'children'
+>;
+
+/**
+ * The collapsible `FormSection` variant — delegates to the logician
+ * `CollapsibleSection` accordion (which owns its own layout, so container style
+ * overrides apply to the flat variant only). Requires a title.
+ */
+export const CollapsibleFormSection = ({
+  title,
+  action,
+  defaultOpen = true,
+  hasError = false,
+  gap = 4,
+  children,
+}: CollapsibleFormSectionProps) => (
+  <CollapsibleSection
+    label={title ?? ''}
+    defaultExpanded={defaultOpen}
+    hasError={hasError}
+    headerAction={action}
+  >
+    <VStack align="stretch" gap={gap} w="100%">
+      {children}
+    </VStack>
+  </CollapsibleSection>
+);

package/src/components/Form/FormSection/FlatFormSection.tsx

@@ -0,0 +1,41 @@
+import { Box, VStack } from '@chakra-ui/react';
+
+import { FormSectionHeader } from '../FormSectionHeader';
+import { FormSectionProps } from './FormSection.types';
+
+type FlatFormSectionProps = Omit<
+  FormSectionProps,
+  'collapsible' | 'defaultOpen' | 'hasError'
+>;
+
+/** The flat (non-collapsible) `FormSection` variant. */
+export const FlatFormSection = ({
+  title,
+  titleAdornment,
+  description,
+  action,
+  divider = false,
+  gap = 4,
+  children,
+  ...boxProps
+}: FlatFormSectionProps) => (
+  <Box
+    w="100%"
+    pt={divider ? 4 : undefined}
+    borderTopWidth={divider ? '1px' : undefined}
+    borderColor={divider ? 'border.subtle' : undefined}
+    {...boxProps}
+  >
+    {(title || titleAdornment || description || action) && (
+      <FormSectionHeader
+        title={title}
+        titleAdornment={titleAdornment}
+        description={description}
+        action={action}
+      />
+    )}
+    <VStack align="stretch" gap={gap} w="100%">
+      {children}
+    </VStack>
+  </Box>
+);

package/src/components/Form/FormSection/FormSection.stories.tsx

@@ -0,0 +1,115 @@
+import { VStack } from '@chakra-ui/react';
+import { Meta, StoryObj } from '@storybook/react';
+
+import { Button } from '@/components/Button';
+import { InfoSprinkle } from '@/components/InfoSprinkle';
+import { Input } from '@/components/Input';
+
+import { FieldRow } from '../FieldRow';
+import { FormSection } from './FormSection';
+
+const meta: Meta<typeof FormSection> = {
+  title: 'Components/Form/FormSection',
+  component: FormSection,
+  args: {
+    title: 'Profile',
+    children: (
+      <>
+        <FieldRow label="Display name">
+          <Input placeholder="Enter a name" />
+        </FieldRow>
+        <FieldRow label="Tagline" description="A short one-line summary.">
+          <Input placeholder="Enter a tagline" />
+        </FieldRow>
+      </>
+    ),
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof FormSection>;
+
+export const Flat: Story = {};
+
+export const WithDescription: Story = {
+  args: { description: 'How this assistant introduces itself.' },
+};
+
+export const WithAction: Story = {
+  args: {
+    action: (
+      <Button size="sm" variant="outline">
+        Add
+      </Button>
+    ),
+  },
+};
+
+export const WithDivider: Story = {
+  args: { divider: true },
+};
+
+export const Collapsible: Story = {
+  args: { collapsible: true },
+};
+
+export const CollapsibleWithError: Story = {
+  args: {
+    title: 'Behavior',
+    collapsible: true,
+    defaultOpen: false,
+    hasError: true,
+  },
+};
+
+export const WithTitleAdornment: Story = {
+  args: {
+    title: 'Attached files',
+    description: 'Files this assistant can reference when answering.',
+    titleAdornment: <InfoSprinkle>Up to 20 files, 100MB each.</InfoSprinkle>,
+  },
+};
+
+/**
+ * Several sections stacked the way a real sidebar form composes them — a lead
+ * section, a divided follow-on, and a collapsible group — to show the shared
+ * heading/description/field rhythm holds across the whole panel.
+ */
+export const PanelComposition: Story = {
+  render: () => (
+    <VStack align="stretch" gap={8} maxW="480px">
+      <FormSection
+        title="Profile"
+        description="How this assistant introduces itself."
+      >
+        <FieldRow label="Display name">
+          <Input placeholder="Enter a name" />
+        </FieldRow>
+        <FieldRow label="Tagline" description="A short one-line summary.">
+          <Input placeholder="Enter a tagline" />
+        </FieldRow>
+      </FormSection>
+
+      <FormSection
+        title="Connectors"
+        description="Live data sources this assistant can query."
+        divider
+        action={
+          <Button size="sm" variant="ghost">
+            Add
+          </Button>
+        }
+      >
+        <FieldRow label="Default source">
+          <Input placeholder="Select a connector" />
+        </FieldRow>
+      </FormSection>
+
+      <FormSection title="Advanced" collapsible defaultOpen={false}>
+        <FieldRow label="Rate limit" description="Requests per minute.">
+          <Input placeholder="60" />
+        </FieldRow>
+      </FormSection>
+    </VStack>
+  ),
+};

package/src/components/Form/FormSection/FormSection.test.tsx

@@ -0,0 +1,89 @@
+import type { ReactNode } from 'react';
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+
+import { FormSection } from './FormSection';
+
+// Stub the layout chrome and the collapsible delegate so the test asserts the
+// flat-vs-collapsible branching and prop forwarding, not logician internals.
+vi.mock('@chakra-ui/react', () => ({
+  Box: ({ children }: { children?: ReactNode }) => <div>{children}</div>,
+  Flex: ({ children }: { children?: ReactNode }) => <div>{children}</div>,
+  VStack: ({ children }: { children?: ReactNode }) => <div>{children}</div>,
+}));
+
+vi.mock('@/components/Typography', () => ({
+  H5: ({ children }: { children?: ReactNode }) => <h5>{children}</h5>,
+  Subtext: ({ children }: { children?: ReactNode }) => <span>{children}</span>,
+}));
+
+vi.mock('@/components/Workflow', () => ({
+  CollapsibleSection: ({
+    label,
+    hasError,
+    children,
+  }: {
+    label: string;
+    hasError?: boolean;
+    children?: ReactNode;
+  }) => (
+    <div
+      data-testid="collapsible"
+      data-label={label}
+      data-haserror={String(Boolean(hasError))}
+    >
+      {children}
+    </div>
+  ),
+}));
+
+describe('FormSection', () => {
+  it('renders a flat section with title, description and children by default', () => {
+    render(
+      <FormSection title="Profile" description="How it introduces itself.">
+        <div>field</div>
+      </FormSection>
+    );
+    expect(
+      screen.getByRole('heading', { name: 'Profile' })
+    ).toBeInTheDocument();
+    expect(screen.getByText('How it introduces itself.')).toBeInTheDocument();
+    expect(screen.getByText('field')).toBeInTheDocument();
+    expect(screen.queryByTestId('collapsible')).toBeNull();
+  });
+
+  it('delegates to CollapsibleSection when collapsible, forwarding title and hasError', () => {
+    render(
+      <FormSection title="Behavior" collapsible hasError>
+        <div>field</div>
+      </FormSection>
+    );
+    const collapsible = screen.getByTestId('collapsible');
+    expect(collapsible).toHaveAttribute('data-label', 'Behavior');
+    expect(collapsible).toHaveAttribute('data-haserror', 'true');
+    expect(screen.getByText('field')).toBeInTheDocument();
+  });
+
+  it('stays flat when collapsible is set without a title', () => {
+    render(
+      <FormSection collapsible>
+        <div>field</div>
+      </FormSection>
+    );
+    expect(screen.queryByTestId('collapsible')).toBeNull();
+    expect(screen.getByText('field')).toBeInTheDocument();
+  });
+
+  it('renders the inline title adornment in the flat section', () => {
+    render(
+      <FormSection
+        title="Files"
+        titleAdornment={<span data-testid="sprinkle">i</span>}
+      >
+        <div>field</div>
+      </FormSection>
+    );
+    expect(screen.getByRole('heading', { name: 'Files' })).toBeInTheDocument();
+    expect(screen.getByTestId('sprinkle')).toBeInTheDocument();
+  });
+});

package/src/components/Form/FormSection/FormSection.tsx

@@ -0,0 +1,33 @@
+import { CollapsibleFormSection } from './CollapsibleFormSection';
+import { FlatFormSection } from './FlatFormSection';
+import { FormSectionProps } from './FormSection.types';
+
+/**
+ * A titled group of form fields with one consistent rhythm — the shared
+ * replacement for the studio panels' ad-hoc `GroupHeader`/`ModeSection` +
+ * per-tab `VStack` gaps (8/6/12) and the workflow inspector's per-node section
+ * headers. Renders flat by default; set `collapsible` (with a `title`) to render
+ * the logician `CollapsibleSection` accordion. `gap` standardizes the field
+ * spacing so sections read the same everywhere.
+ *
+ * Thin dispatcher over the two single-purpose variants so each has one return.
+ */
+export const FormSection = ({
+  collapsible = false,
+  defaultOpen = true,
+  hasError = false,
+  ...rest
+}: FormSectionProps) =>
+  collapsible && rest.title ? (
+    <CollapsibleFormSection
+      title={rest.title}
+      action={rest.action}
+      gap={rest.gap}
+      defaultOpen={defaultOpen}
+      hasError={hasError}
+    >
+      {rest.children}
+    </CollapsibleFormSection>
+  ) : (
+    <FlatFormSection {...rest} />
+  );

package/src/components/Form/FormSection/FormSection.types.ts

@@ -0,0 +1,34 @@
+import { ReactNode } from 'react';
+import { BoxProps } from '@chakra-ui/react';
+
+export interface FormSectionProps extends Omit<BoxProps, 'title'> {
+  /** Section heading. */
+  title?: string;
+  /**
+   * Inline element rendered immediately after the heading (e.g. an
+   * `InfoSprinkle`). Flat variant only — the collapsible variant owns its own
+   * header. Distinct from `action`, which sits at the far right.
+   */
+  titleAdornment?: ReactNode;
+  /** Secondary description under the heading. */
+  description?: ReactNode;
+  /** Right-aligned header slot (e.g. an add button or info-sprinkle trigger). */
+  action?: ReactNode;
+  /** Draw a top divider to separate this section from the previous one. */
+  divider?: boolean;
+  /**
+   * Render as a collapsible accordion (delegates to logician `CollapsibleSection`).
+   * Requires `title`.
+   */
+  collapsible?: boolean;
+  /** Initial expanded state when `collapsible`. Defaults to open. */
+  defaultOpen?: boolean;
+  /**
+   * Flag a section that contains errors. When `collapsible` and collapsed, the
+   * chevron is replaced by a danger glyph so hidden errors aren't missed.
+   */
+  hasError?: boolean;
+  /** Vertical gap between child fields. Defaults to the standard field rhythm. */
+  gap?: BoxProps['gap'];
+  children: ReactNode;
+}

package/src/components/Form/FormSection/index.ts

@@ -0,0 +1,2 @@
+export { FormSection } from './FormSection';
+export type { FormSectionProps } from './FormSection.types';