@mindlogic-ai/logician-ui 4.0.0-alpha.8 → 4.0.0

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';

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

@@ -0,0 +1,53 @@
+import { Box } from '@chakra-ui/react';
+import { Meta, StoryObj } from '@storybook/react';
+
+import { Button } from '@/components/Button';
+import { InfoSprinkle } from '@/components/InfoSprinkle';
+
+import { FormSectionHeader } from './FormSectionHeader';
+
+const meta: Meta<typeof FormSectionHeader> = {
+  title: 'Components/Form/FormSectionHeader',
+  component: FormSectionHeader,
+  decorators: [
+    (Story) => (
+      <Box maxW="480px">
+        <Story />
+      </Box>
+    ),
+  ],
+  args: {
+    title: 'Collaboration',
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof FormSectionHeader>;
+
+export const TitleOnly: Story = {};
+
+export const WithDescription: Story = {
+  args: {
+    description: 'Grant analysts and editors access to work on this assistant.',
+  },
+};
+
+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>,
+  },
+};
+
+export const WithAction: Story = {
+  args: {
+    title: 'Connectors',
+    description: 'Live data sources this assistant can query.',
+    action: (
+      <Button size="sm" variant="ghost">
+        Add
+      </Button>
+    ),
+  },
+};

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

@@ -0,0 +1,74 @@
+import type { ReactNode } from 'react';
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+
+import { FormSectionHeader } from './FormSectionHeader';
+
+// Stub the layout chrome and typography so the test asserts FormSectionHeader's
+// own conditional slots (title / adornment / description / action), not
+// Chakra/logician internals.
+vi.mock('@chakra-ui/react', () => ({
+  Box: ({ children }: { children?: ReactNode }) => <div>{children}</div>,
+  Flex: ({ children }: { children?: ReactNode }) => <div>{children}</div>,
+}));
+
+vi.mock('@/components/Typography', () => ({
+  H5: ({ children }: { children?: ReactNode }) => <h5>{children}</h5>,
+  Subtext: ({ children }: { children?: ReactNode }) => (
+    <span data-testid="description">{children}</span>
+  ),
+}));
+
+describe('FormSectionHeader', () => {
+  it('renders the title as a heading with a description below it', () => {
+    render(
+      <FormSectionHeader
+        title="Collaboration"
+        description="Grant access to work on this assistant."
+      />
+    );
+    expect(
+      screen.getByRole('heading', { name: 'Collaboration' })
+    ).toBeInTheDocument();
+    expect(screen.getByTestId('description')).toHaveTextContent(
+      'Grant access to work on this assistant.'
+    );
+  });
+
+  it('renders the inline title adornment next to the heading', () => {
+    render(
+      <FormSectionHeader
+        title="Files"
+        titleAdornment={<span data-testid="sprinkle">i</span>}
+      />
+    );
+    expect(screen.getByRole('heading', { name: 'Files' })).toBeInTheDocument();
+    expect(screen.getByTestId('sprinkle')).toBeInTheDocument();
+  });
+
+  it('renders the right-aligned action', () => {
+    render(
+      <FormSectionHeader
+        title="Connectors"
+        action={<button type="button">Add</button>}
+      />
+    );
+    expect(screen.getByRole('button', { name: 'Add' })).toBeInTheDocument();
+  });
+
+  it('omits the heading row entirely when there is no title or adornment', () => {
+    render(<FormSectionHeader description="Standalone description." />);
+    expect(screen.queryByRole('heading')).toBeNull();
+    expect(screen.getByTestId('description')).toHaveTextContent(
+      'Standalone description.'
+    );
+  });
+
+  it('renders a bare heading with no description when none is given', () => {
+    render(<FormSectionHeader title="Visibility" />);
+    expect(
+      screen.getByRole('heading', { name: 'Visibility' })
+    ).toBeInTheDocument();
+    expect(screen.queryByTestId('description')).toBeNull();
+  });
+});

package/src/components/Form/FormSectionHeader/FormSectionHeader.tsx

@@ -0,0 +1,48 @@
+import { Box, Flex } from '@chakra-ui/react';
+
+import { H5, Subtext } from '@/components/Typography';
+
+import { FormSectionHeaderProps } from './FormSectionHeader.types';
+
+/**
+ * The standardized section (fieldset) header — the section-level counterpart to
+ * {@link FieldLabel}. A heading, an optional inline adornment, a description,
+ * and a right-aligned action, laid out with one consistent rhythm (`H5` over a
+ * muted `Subtext`). Shared by `FormSection` and the studio `GroupHeader` so
+ * every titled field group reads the same everywhere.
+ *
+ * The description sits inside the left column so a tall `action` centers against
+ * the whole heading+description block, matching the prior studio `GroupHeader`.
+ */
+export const FormSectionHeader = ({
+  title,
+  titleAdornment,
+  description,
+  action,
+  mb = 3,
+  ...flexProps
+}: FormSectionHeaderProps) => (
+  <Flex
+    align="center"
+    justify="space-between"
+    gap={2}
+    mb={mb}
+    w="100%"
+    {...flexProps}
+  >
+    <Box>
+      {(title || titleAdornment) && (
+        <Flex align="center" gap={1} mb={description ? 1 : 0}>
+          {title && <H5>{title}</H5>}
+          {titleAdornment}
+        </Flex>
+      )}
+      {description && (
+        <Subtext color="fg.muted" fontWeight="normal">
+          {description}
+        </Subtext>
+      )}
+    </Box>
+    {action}
+  </Flex>
+);

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

@@ -0,0 +1,17 @@
+import { ReactNode } from 'react';
+import { FlexProps } from '@chakra-ui/react';
+
+export interface FormSectionHeaderProps extends Omit<FlexProps, 'title'> {
+  /** Section heading — the fieldset-level label. */
+  title?: ReactNode;
+  /**
+   * Inline element rendered immediately after the title text (e.g. an
+   * `InfoSprinkle`). Distinct from `action`, which sits at the far right of
+   * the row.
+   */
+  titleAdornment?: ReactNode;
+  /** Secondary description under the title. */
+  description?: ReactNode;
+  /** Right-aligned slot on the title row (e.g. an add button). */
+  action?: ReactNode;
+}

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

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

package/src/components/Form/index.ts

@@ -0,0 +1,17 @@
+export type { FieldErrorProps } from './FieldError';
+export { FieldError } from './FieldError';
+export type { FieldHelpProps } from './FieldHelp';
+export { FieldHelp } from './FieldHelp';
+export type { FieldLabelProps } from './FieldLabel';
+export { FieldLabel } from './FieldLabel';
+export type { FieldRowProps } from './FieldRow';
+export { FieldRow } from './FieldRow';
+export type { FormFooterProps } from './FormFooter';
+export { FormFooter } from './FormFooter';
+export type { FormModalFooterProps } from './FormModalFooter';
+export { FormModalFooter } from './FormModalFooter';
+export { FormScrollArea } from './FormScrollArea';
+export type { FormSectionProps } from './FormSection';
+export { FormSection } from './FormSection';
+export type { FormSectionHeaderProps } from './FormSectionHeader';
+export { FormSectionHeader } from './FormSectionHeader';

package/src/components/Icon/ICON_MANAGEMENT.md

@@ -78,6 +78,7 @@ Override per usage: `<MyIcon color="primary.main" />`.
 
 | boxSize | px  |
 |---------|-----|
+| `2xs`   | 14px |
 | `xs`    | 16px |
 | `sm`    | 20px |
 | `md`    | 24px |

package/src/components/Icon/Icon.stories.tsx

@@ -155,7 +155,7 @@ export const Sizes: Story = {
       <VStack maxW="1400px" gap={4} align="start">
         <Text fontWeight="bold">크기 조절</Text>
         <HStack gap={4} align="center">
-          {['xs', 'sm', 'md', 'lg', 'xl'].map((size) => (
+          {['2xs', 'xs', 'sm', 'md', 'lg', 'xl'].map((size) => (
             <VStack key={size}>
               <SampleIcon boxSize={size} color="blue.500" />
               <Text textStyle="subtext">{size}</Text>
@@ -223,6 +223,10 @@ const CustomBuildingIcon = createIcon(
       <Box borderTop="1px solid" borderColor="gray.200" pt={4}>
         <Text fontWeight="semibold" mb={3}>결과:</Text>
         <HStack gap={6}>
+          <VStack>
+            <CustomBuildingIcon boxSize="2xs" color="blue.500" />
+            <Text textStyle="subtext">2xs (14px)</Text>
+          </VStack>
           <VStack>
             <CustomBuildingIcon boxSize="xs" color="blue.500" />
             <Text textStyle="subtext">xs (16px)</Text>
@@ -305,7 +309,7 @@ const MyCustomIcon = createIcon(
     <Box w="100%" bg="blue.50" p={4} borderRadius="md" borderLeft="4px solid" borderColor="blue.500">
       <Text fontWeight="bold" mb={2}>✨ 주요 기능</Text>
       <VStack align="start" gap={2} textStyle="subtext">
-        <Text>• <strong>boxSize 지원:</strong> xs, sm, md, lg, xl (16px ~ 40px)</Text>
+        <Text>• <strong>boxSize 지원:</strong> 2xs, xs, sm, md, lg, xl (14px ~ 40px)</Text>
         <Text>• <strong>Chakra UI 스타일링:</strong> color, bg, margin, padding 등 모든 Box props 사용 가능</Text>
         <Text>• <strong>Tree shaking:</strong> 사용하지 않는 아이콘은 번들에서 제외됨</Text>
         <Text>• <strong>TypeScript 지원:</strong> 완전한 타입 안전성 제공</Text>