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

package/src/components/Badge/Badge.tsx

@@ -1,8 +1,9 @@
 import { ForwardedRef, forwardRef } from 'react';
 import { Badge as ChakraBadge } from '@chakra-ui/react';
 
+import { polymorphic } from '../../types/polymorphic';
 import { baseStyles, variantStyles } from './Badge.styles';
-import { BadgeProps } from './Badge.types';
+import { BadgeOwnProps } from './Badge.types';
 
 /**
  * Badge component with color variants using the Golden Ratio color system.
@@ -17,9 +18,9 @@ import { BadgeProps } from './Badge.types';
  * <Badge variant="neutral">Draft</Badge>
  * ```
  */
-export const Badge = forwardRef(
+const BadgeImpl = forwardRef(
   (
-    { textTransform = 'none', variant = 'primary', ...rest }: BadgeProps,
+    { textTransform = 'none', variant = 'primary', ...rest }: BadgeOwnProps,
     ref?: ForwardedRef<HTMLButtonElement>
   ) => {
     return (
@@ -35,4 +36,7 @@ export const Badge = forwardRef(
   }
 );
 
-Badge.displayName = 'Badge';
+/** Type-level polymorphism over the same runtime — see the note on `Button`. */
+BadgeImpl.displayName = 'Badge';
+
+export const Badge = polymorphic<BadgeOwnProps, 'span'>(BadgeImpl);

package/src/components/Badge/Badge.types.ts

@@ -1,5 +1,9 @@
+import type { ElementType } from 'react';
 import { BadgeProps as ChakraBadgeProps } from '@chakra-ui/react';
 
+// Relative, NOT `@/types/*` — see `src/types/polymorphic.ts`.
+import type { PolymorphicProps } from '../../types/polymorphic';
+
 /**
  * Badge variant types for the Golden Ratio color system.
  *
@@ -21,10 +25,23 @@ export type BadgeVariant =
   | 'danger'
   | 'neutral';
 
-export interface BadgeProps extends Omit<ChakraBadgeProps, 'variant'> {
+export type BadgeOwnProps = Omit<ChakraBadgeProps, 'variant' | 'as'> & {
   /**
    * The color variant of the badge.
    * @default 'primary'
    */
   variant?: BadgeVariant;
-}
+};
+
+/**
+ * Props for `Badge`, typed for whatever element `as` renders.
+ *
+ * Defaults to `'span'`, so bare `BadgeProps` is unchanged. A badge that acts as
+ * a citation or filter link is the case that needs this.
+ *
+ * ```tsx
+ * <Badge as="a" href={`#cite-${n}`}>{n}</Badge>
+ * ```
+ */
+export type BadgeProps<TElement extends ElementType = 'span'> =
+  PolymorphicProps<TElement, BadgeOwnProps>;

package/src/components/Badge/index.ts

@@ -3,4 +3,4 @@ export {
   baseStyles as badgeStyles,
   variantStyles as badgeVariantStyles,
 } from './Badge.styles';
-export type { BadgeProps, BadgeVariant } from './Badge.types';
+export type { BadgeOwnProps, BadgeProps, BadgeVariant } from './Badge.types';

package/src/components/Banner/Banner.tsx

@@ -51,7 +51,7 @@ export const Banner = forwardRef(
         <Flex align="stretch" gap={2}>
           {!hideIcon && (
             <Box>
-              <Icon mr={2} color={color} boxSize="md" />
+              <Icon mr={2} color={color} boxSize={styles.icon.boxSize} />
             </Box>
           )}
           {typeof children === 'string' ? (

package/src/components/BottomSheet/BottomSheet.stories.tsx

@@ -0,0 +1,205 @@
+/**
+ * BottomSheet stories.
+ *
+ * Built on Ark UI's `Drawer` (zag-js), so the sheet can be dragged by its
+ * handle or body, rests on `snapPoints`, and is swiped away past
+ * `closeThreshold`. Open the stories in a mobile viewport (or with touch
+ * emulation) to try the gestures; with a mouse the same drags work by
+ * pointer.
+ */
+import { Box, HStack, Stack } from '@chakra-ui/react';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { useState } from 'react';
+
+import { Button } from '../Button';
+import {
+  BoltIcon,
+  ClockIcon,
+  CodeIcon,
+  FilterIcon,
+  MailIcon,
+  MessageDotsIcon,
+  SearchIcon,
+  WorldIcon,
+} from '../Icon';
+import { Subtext, Text } from '../Typography';
+import {
+  BottomSheet,
+  BottomSheetBody,
+  BottomSheetCloseButton,
+  BottomSheetContent,
+  BottomSheetFooter,
+  BottomSheetHeader,
+} from '.';
+
+const meta = {
+  title: 'Components/BottomSheet',
+  component: BottomSheet,
+  parameters: {
+    layout: 'centered',
+    viewport: { defaultViewport: 'mobile2' },
+  },
+} satisfies Meta<typeof BottomSheet>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+const PALETTE = [
+  { icon: MessageDotsIcon, label: 'LLM', hint: '모델에게 프롬프트를 보냅니다' },
+  { icon: SearchIcon, label: '지식 검색', hint: '연결된 문서에서 찾습니다' },
+  { icon: WorldIcon, label: '웹 검색', hint: '인터넷에서 찾습니다' },
+  { icon: FilterIcon, label: '조건 분기', hint: '조건에 따라 경로를 나눕니다' },
+  { icon: CodeIcon, label: '코드 실행', hint: 'Python 코드를 실행합니다' },
+  { icon: BoltIcon, label: 'HTTP 요청', hint: '외부 API 를 호출합니다' },
+  { icon: MailIcon, label: '메일 보내기', hint: '결과를 메일로 보냅니다' },
+  { icon: ClockIcon, label: '대기', hint: '정해진 시간만큼 멈춥니다' },
+];
+
+const PaletteList = ({ onPick }: { onPick: (label: string) => void }) => (
+  <Stack as="ul" gap="1" listStyleType="none" m="0" p="0">
+    {PALETTE.map(({ icon: Icon, label, hint }) => (
+      <Box as="li" key={label}>
+        <HStack
+          as="button"
+          w="full"
+          gap="3"
+          px="3"
+          py="2.5"
+          borderRadius="l2"
+          textAlign="start"
+          _hover={{ bg: 'bg.muted' }}
+          onClick={() => onPick(label)}
+        >
+          <Icon boxSize="sm" aria-hidden />
+          <Stack gap="0">
+            <Text fontWeight="semibold">{label}</Text>
+            <Subtext color="fg.muted">{hint}</Subtext>
+          </Stack>
+        </HStack>
+      </Box>
+    ))}
+  </Stack>
+);
+
+/** A node palette — the case this component was added for. */
+export const Palette: Story = {
+  args: {},
+  render: (args) => {
+    const [open, setOpen] = useState(false);
+    const [picked, setPicked] = useState<string | null>(null);
+
+    return (
+      <Stack align="center">
+        <Button onClick={() => setOpen(true)}>노드 추가</Button>
+        {picked && <Subtext>추가됨: {picked}</Subtext>}
+        <BottomSheet
+          {...args}
+          open={open}
+          onOpenChange={(e) => setOpen(e.open)}
+        >
+          <BottomSheetContent>
+            <BottomSheetHeader>노드 추가</BottomSheetHeader>
+            <BottomSheetCloseButton />
+            <BottomSheetBody>
+              <PaletteList
+                onPick={(label) => {
+                  setPicked(label);
+                  setOpen(false);
+                }}
+              />
+            </BottomSheetBody>
+          </BottomSheetContent>
+        </BottomSheet>
+      </Stack>
+    );
+  },
+};
+
+/**
+ * Non-modal, resting on two snap points: 40% of the viewport, then fully open.
+ * No overlay, no focus trap — the page behind stays usable, which is what a
+ * palette beside a canvas needs.
+ */
+export const NonModalSnapPoints: Story = {
+  args: {},
+  render: (args) => {
+    const [open, setOpen] = useState(false);
+    const [clicks, setClicks] = useState(0);
+
+    return (
+      <Stack align="center">
+        <HStack>
+          <Button onClick={() => setOpen((o) => !o)}>
+            {open ? '시트 닫기' : '시트 열기'}
+          </Button>
+          <Button variant="outline" onClick={() => setClicks((c) => c + 1)}>
+            뒤의 페이지 버튼 ({clicks})
+          </Button>
+        </HStack>
+        <BottomSheet
+          {...args}
+          modal={false}
+          closeOnInteractOutside={false}
+          snapPoints={[0.4, 1]}
+          defaultSnapPoint={0.4}
+          open={open}
+          onOpenChange={(e) => setOpen(e.open)}
+        >
+          <BottomSheetContent>
+            <BottomSheetHeader>노드 추가</BottomSheetHeader>
+            <BottomSheetCloseButton />
+            <BottomSheetBody>
+              <PaletteList onPick={() => {}} />
+            </BottomSheetBody>
+          </BottomSheetContent>
+        </BottomSheet>
+      </Stack>
+    );
+  },
+};
+
+/**
+ * Long content: the body scrolls inside the sheet's 85dvh cap while the header
+ * and footer stay put. Dragging starts only once the list is at its top.
+ */
+export const LongScrollingList: Story = {
+  args: {},
+  render: (args) => {
+    const [open, setOpen] = useState(false);
+
+    return (
+      <>
+        <Button onClick={() => setOpen(true)}>긴 목록 열기</Button>
+        <BottomSheet
+          {...args}
+          open={open}
+          onOpenChange={(e) => setOpen(e.open)}
+        >
+          <BottomSheetContent>
+            <BottomSheetHeader>항목 120개</BottomSheetHeader>
+            <BottomSheetCloseButton />
+            <BottomSheetBody>
+              <Stack as="ol" gap="0" m="0" ps="5">
+                {Array.from({ length: 120 }, (_, i) => (
+                  <Text as="li" key={i} py="2">
+                    항목 {i + 1}
+                  </Text>
+                ))}
+              </Stack>
+            </BottomSheetBody>
+            <BottomSheetFooter>
+              <Button variant="ghost" onClick={() => setOpen(false)}>
+                취소
+              </Button>
+              <Button variant="solid" onClick={() => setOpen(false)}>
+                확인
+              </Button>
+            </BottomSheetFooter>
+          </BottomSheetContent>
+        </BottomSheet>
+      </>
+    );
+  },
+};

package/src/components/BottomSheet/BottomSheet.styles.ts

@@ -0,0 +1,162 @@
+import { drawerAnatomy } from '@ark-ui/react/drawer';
+import { defineSlotRecipe } from '@chakra-ui/react';
+
+/**
+ * Parts the sheet styles. Ark's drawer anatomy plus the three layout slots
+ * (`header` / `body` / `footer`) that have no machine behaviour of their own —
+ * the same extension Chakra makes for its dialog-backed `Drawer`.
+ */
+export const bottomSheetAnatomy = drawerAnatomy.extendWith(
+  'header',
+  'body',
+  'footer'
+);
+
+/**
+ * The BottomSheet's slot recipe.
+ *
+ * Passed to `createSlotRecipeContext({ recipe })` rather than registered in the
+ * theme under a key, so the sheet renders the same whether or not the consuming
+ * app built its system from `logicianConfig` — and an app that wants to restyle
+ * it can still pass style props per part.
+ *
+ * Two clocks move the content, and they are deliberately separate:
+ *
+ * - **Presence** (open / close) is a keyframe animation on `translate`, timed by
+ *   the shared `presence` preset — enter on `motion.base`, exit on `fast`.
+ * - **Snap / release** is a transition on `transform`. Zag drives `transform`
+ *   inline from `--drawer-translate-y` while the sheet is dragged (and zeroes the
+ *   transition duration during the drag), so the transition only runs when a
+ *   finger lets go or the snap point changes.
+ *
+ * `translate` and `transform` compose, so the entrance never fights the drag.
+ *
+ * Reduced motion: `presence` swaps the slide for a plain fade (restated below so
+ * the recipe's own `animationName` cannot outrank it), and the snap transition
+ * drops to `motion.instant` so the sheet lands on its snap point without
+ * travelling there.
+ */
+export const bottomSheetSlotRecipe = defineSlotRecipe({
+  className: 'logician-bottom-sheet',
+  slots: bottomSheetAnatomy.keys(),
+  base: {
+    backdrop: {
+      position: 'fixed',
+      insetInlineStart: 0,
+      top: 0,
+      w: '100vw',
+      h: '100dvh',
+      bg: 'blackAlpha.500',
+      zIndex: 'calc(var(--chakra-z-index-modal) + var(--layer-index, 0) - 1)',
+      // Fades with the finger: zag reports how far toward closed the sheet has
+      // been dragged as a 0–1 progress.
+      opacity: 'calc(1 - var(--drawer-swipe-progress, 0))',
+      animationStyle: 'presence',
+      _open: { animationName: 'fade-in' },
+      _closed: { animationName: 'fade-out' },
+    },
+    positioner: {
+      display: 'flex',
+      alignItems: 'flex-end',
+      justifyContent: 'center',
+      position: 'fixed',
+      insetInlineStart: 0,
+      top: 0,
+      w: '100vw',
+      h: '100dvh',
+      zIndex: 'calc(var(--chakra-z-index-modal) + var(--layer-index, 0))',
+      overscrollBehaviorY: 'none',
+    },
+    content: {
+      display: 'flex',
+      flexDirection: 'column',
+      position: 'relative',
+      w: '100%',
+      maxH: '85dvh',
+      outline: 0,
+      bg: 'bg.surface',
+      color: 'fg.default',
+      borderTopRadius: 'l3',
+      borderTopWidth: '1px',
+      borderColor: 'border.subtle',
+      boxShadow: 'lg',
+      // Keeps the last row and the footer clear of the iOS home indicator.
+      pb: 'env(safe-area-inset-bottom, 0px)',
+      animationStyle: 'presence',
+      _open: { animationName: 'slide-from-bottom-full' },
+      _closed: { animationName: 'slide-to-bottom-full' },
+      transitionProperty: 'transform',
+      transitionDuration: 'motion.base',
+      transitionTimingFunction: 'emphasized',
+      _motionReduce: {
+        transitionDuration: 'motion.instant',
+        _open: { animationName: 'fade-in' },
+        _closed: { animationName: 'fade-out' },
+      },
+    },
+    grabber: {
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      flexShrink: 0,
+      // A finger-sized strip, though the bar inside it is small.
+      h: '6',
+      cursor: 'grab',
+      _active: { cursor: 'grabbing' },
+    },
+    grabberIndicator: {
+      w: '10',
+      h: '1',
+      borderRadius: 'full',
+      bg: 'border.default',
+    },
+    header: {
+      display: 'flex',
+      alignItems: 'center',
+      gap: '2',
+      flexShrink: 0,
+      px: '4',
+      pt: '1',
+      pb: '3',
+      // Leave room for the absolutely placed close button so a long title
+      // wraps before it instead of running underneath it.
+      '[data-part=content]:has(> [data-part=close-trigger]) > &': {
+        pe: '12',
+      },
+    },
+    title: {
+      flex: '1',
+      minW: 0,
+      textStyle: 'h5',
+      color: 'fg.default',
+    },
+    description: {
+      color: 'fg.muted',
+    },
+    body: {
+      flex: '1',
+      minH: 0,
+      overflowY: 'auto',
+      overscrollBehavior: 'contain',
+      px: '4',
+      pb: '4',
+    },
+    footer: {
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'flex-end',
+      gap: '3',
+      flexShrink: 0,
+      px: '4',
+      pt: '3',
+      pb: '4',
+      borderTopWidth: '1px',
+      borderColor: 'border.subtle',
+    },
+    closeTrigger: {
+      position: 'absolute',
+      top: '3',
+      insetEnd: '3',
+    },
+  },
+});

package/src/components/BottomSheet/BottomSheet.test.tsx

@@ -0,0 +1,129 @@
+import { act, fireEvent, render, screen } from '@testing-library/react';
+import axe from 'axe-core';
+import { beforeAll, describe, expect, it, vi } from 'vitest';
+
+import { LogicianProvider } from '@/components/LogicianProvider';
+
+import {
+  BottomSheet,
+  BottomSheetBody,
+  BottomSheetCloseButton,
+  BottomSheetContent,
+  BottomSheetHeader,
+  type BottomSheetProps,
+} from '.';
+
+beforeAll(() => {
+  // Chakra's color-mode and responsive machinery calls it on mount, and the
+  // presence parts read `prefers-reduced-motion`; jsdom has no implementation.
+  window.matchMedia = ((query: string) => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addListener: () => {},
+    removeListener: () => {},
+    addEventListener: () => {},
+    removeEventListener: () => {},
+    dispatchEvent: () => false,
+  })) as unknown as typeof window.matchMedia;
+});
+
+const Sheet = (props: Partial<BottomSheetProps>) => (
+  <LogicianProvider>
+    <BottomSheet {...props}>
+      <BottomSheetContent data-testid="content">
+        <BottomSheetHeader>노드 추가</BottomSheetHeader>
+        <BottomSheetCloseButton />
+        <BottomSheetBody>본문</BottomSheetBody>
+      </BottomSheetContent>
+    </BottomSheet>
+  </LogicianProvider>
+);
+
+const backdrop = () =>
+  document.querySelector('[data-scope="drawer"][data-part="backdrop"]');
+
+describe('BottomSheet', () => {
+  it('renders nothing while closed', () => {
+    render(<Sheet open={false} />);
+    expect(screen.queryByTestId('content')).not.toBeInTheDocument();
+    expect(screen.queryByText('본문')).not.toBeInTheDocument();
+  });
+
+  it('renders its content, named by the header, when open', () => {
+    render(<Sheet open />);
+    const dialog = screen.getByRole('dialog');
+    expect(dialog).toBe(screen.getByTestId('content'));
+    expect(screen.getByText('본문')).toBeVisible();
+    // The header's children are the title, and the title names the sheet.
+    expect(dialog).toHaveAccessibleName('노드 추가');
+  });
+
+  it('fires onOpenChange({ open: false }) from the close button', async () => {
+    const onOpenChange = vi.fn();
+    render(<Sheet open onOpenChange={onOpenChange} />);
+    const close = screen.getByRole('button', { name: '닫기' });
+    await act(async () => {
+      fireEvent.click(close);
+    });
+    expect(onOpenChange).toHaveBeenCalledWith(
+      expect.objectContaining({ open: false })
+    );
+  });
+
+  it('renders an overlay when modal (the default)', () => {
+    render(<Sheet open />);
+    expect(backdrop()).toBeInTheDocument();
+  });
+
+  it('renders no overlay when modal={false}', () => {
+    render(<Sheet open modal={false} />);
+    expect(screen.getByTestId('content')).toBeInTheDocument();
+    expect(backdrop()).not.toBeInTheDocument();
+  });
+
+  it('renders the grabber by default and drops it with showGrabber={false}', () => {
+    const grabber = () =>
+      document.querySelector('[data-scope="drawer"][data-part="grabber"]');
+
+    const { unmount } = render(<Sheet open />);
+    expect(grabber()).toBeInTheDocument();
+    unmount();
+
+    render(
+      <LogicianProvider>
+        <BottomSheet open>
+          <BottomSheetContent showGrabber={false}>
+            <BottomSheetBody>본문</BottomSheetBody>
+          </BottomSheetContent>
+        </BottomSheet>
+      </LogicianProvider>
+    );
+    expect(grabber()).not.toBeInTheDocument();
+  });
+});
+
+describe('BottomSheet — axe', () => {
+  it('an open sheet with a header and a close button has no violations', async () => {
+    render(<Sheet open />);
+    // The structural rules a11y.kwcag.test.tsx runs, plus the dialog's name.
+    // The sheet portals to <body>, so it is scanned there, not in `container`.
+    const results = await axe.run(document.body, {
+      runOnly: {
+        type: 'rule',
+        values: [
+          'aria-allowed-attr',
+          'aria-allowed-role',
+          'aria-dialog-name',
+          'aria-required-attr',
+          'aria-valid-attr-value',
+          'button-name',
+          'duplicate-id',
+          'nested-interactive',
+        ],
+      },
+      resultTypes: ['violations'],
+    });
+    expect(results.violations.map((v) => v.id)).toEqual([]);
+  });
+});

package/src/components/BottomSheet/BottomSheet.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import { Portal } from '@chakra-ui/react';
+
+import type { BottomSheetProps } from './BottomSheet.types';
+import { StyledRoot } from './BottomSheetContext';
+import { BottomSheetOverlay } from './BottomSheetOverlay';
+
+/**
+ * A sheet that rises from the bottom edge and can be dragged between snap
+ * points or swiped away — built on Ark's `Drawer` (zag-js), not on Chakra's
+ * `Drawer`, which wraps Ark's *Dialog* and so has no swipe, snap points or
+ * grabber.
+ *
+ * Same shape as `Modal`: this is the root and the portal, and the overlay comes
+ * with it whenever the sheet is modal. Pass `modal={false}` for a sheet that
+ * leaves the page behind it interactive (no overlay, no focus trap, no scroll
+ * lock) — typically with `snapPoints` so it can rest half-open.
+ *
+ * @example
+ * ```tsx
+ * <BottomSheet open={open} onOpenChange={(e) => setOpen(e.open)}>
+ *   <BottomSheetContent>
+ *     <BottomSheetHeader>노드 추가</BottomSheetHeader>
+ *     <BottomSheetCloseButton />
+ *     <BottomSheetBody>…</BottomSheetBody>
+ *   </BottomSheetContent>
+ * </BottomSheet>
+ * ```
+ */
+export const BottomSheet = ({
+  children,
+  portalProps,
+  ...rest
+}: BottomSheetProps) => {
+  const isModal = rest.modal !== false;
+
+  return (
+    <StyledRoot {...rest}>
+      <Portal {...portalProps}>
+        {isModal && <BottomSheetOverlay />}
+        {children}
+      </Portal>
+    </StyledRoot>
+  );
+};
+
+BottomSheet.displayName = 'BottomSheet';

package/src/components/BottomSheet/BottomSheet.types.ts

@@ -0,0 +1,50 @@
+import type { Drawer, UseDrawerContext } from '@ark-ui/react/drawer';
+import type { HTMLChakraProps, PortalProps } from '@chakra-ui/react';
+
+import type { IconButtonProps } from '../IconButton/IconButton.types';
+
+/**
+ * Props for `BottomSheet` — Ark's `Drawer.Root` props, unchanged, plus
+ * `portalProps`.
+ *
+ * Everything the machine does is configured here: `open` / `onOpenChange`,
+ * `snapPoints` / `defaultSnapPoint` / `snapPoint` / `onSnapPointChange`,
+ * `modal`, `closeOnInteractOutside`, `closeOnEscape`, `closeThreshold`,
+ * `swipeVelocityThreshold`, `preventDragOnScroll`, `lazyMount`,
+ * `unmountOnExit`, …
+ *
+ * Snap points that are numbers ≤ 1 are fractions of the **viewport** height,
+ * capped at the sheet's own height (`snapPoints={[0.4, 1]}` = 40% of the
+ * screen, then fully open). Strings take `px` / `rem` values.
+ */
+export type BottomSheetProps = Drawer.RootProps & {
+  /** Passed to the Chakra `Portal` the sheet renders into. */
+  portalProps?: PortalProps;
+};
+
+/**
+ * `HTMLChakraProps<'div'>` with Ark's content props folded in — which only
+ * changes `draggable`: on the sheet it is Ark's boolean "can a drag start from
+ * the content itself" (default `true`; `false` leaves the grabber as the only
+ * handle), not the HTML drag-and-drop attribute.
+ */
+export type BottomSheetContentProps = HTMLChakraProps<
+  'div',
+  Drawer.ContentBaseProps
+> & {
+  /**
+   * Renders the drag handle at the top of the sheet. The whole sheet can be
+   * dragged either way; the handle is the visible affordance.
+   * @default true
+   */
+  showGrabber?: boolean;
+};
+
+export type BottomSheetHeaderProps = HTMLChakraProps<'div'>;
+export type BottomSheetBodyProps = HTMLChakraProps<'div'>;
+export type BottomSheetFooterProps = HTMLChakraProps<'div'>;
+export type BottomSheetOverlayProps = HTMLChakraProps<'div'>;
+export type BottomSheetCloseButtonProps = Partial<IconButtonProps>;
+
+/** What `useBottomSheetContext()` returns — Ark's drawer API. */
+export type BottomSheetContextValue = UseDrawerContext;