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

package/src/components/SwapTransition/SwapTransition.tsx

@@ -0,0 +1,130 @@
+import {
+  ForwardedRef,
+  forwardRef,
+  ReactNode,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
+import { Box } from '@chakra-ui/react';
+
+import { mergeCss } from '@/utils/mergeCss';
+
+import { SWAP_OUT_MS, swapIn, swapOut } from './SwapTransition.styles';
+import { SwapTransitionProps } from './SwapTransition.types';
+
+/**
+ * Swaps one piece of content for another with a directional slide — the house
+ * gesture for moving between steps of a sequence, or between records in the
+ * same frame.
+ *
+ * The outgoing content leaves *against* the travel direction, so the pair reads
+ * as one movement rather than as two things passing each other.
+ *
+ * ## One element, and the children are yours
+ *
+ * Two rules this has to keep, both learned by breaking them:
+ *
+ * **It renders a single box.** Everything the caller passes lands on the element
+ * that actually animates, so a wrapper told to fill — `display="flex" flex={1}
+ * minH={0}`, the shape a full-height pane needs — still fills. An earlier
+ * version stacked the two states in a grid cell and put the children one level
+ * further in; the sizing props stopped reaching them, and a pane that should
+ * have filled its column collapsed to content height with the action bar riding
+ * up under it. The two states are mutually exclusive anyway — only ever one of
+ * them is on screen — so the cell they were sharing bought nothing.
+ *
+ * **It renders `children` directly, never a copy.** The same earlier version
+ * held the subtree in state and rendered that instead, refreshing it from an
+ * effect keyed on `transitionKey` — so content that changed *without* a new key
+ * never reached the screen. A radio that was picked stayed unpicked, and the
+ * interface read as dead. A component that stands between a caller and its own
+ * children has to be transparent to every render that is not a swap.
+ *
+ * What it does keep is one snapshot of the outgoing subtree, for as long as the
+ * exit takes. That is unavoidable without an animation library: React has
+ * already been told to render the new content, and the old content still has to
+ * leave. It is fifteen lines and one `setTimeout`, and it is the only reason
+ * `framer-motion` looked necessary for this file.
+ *
+ * ```tsx
+ * <SwapTransition transitionKey={step}>
+ *   {STEPS[step]}
+ * </SwapTransition>
+ * ```
+ */
+export const SwapTransition = forwardRef(
+  (
+    {
+      transitionKey,
+      distance = 24,
+      animateInitial = false,
+      children,
+      css,
+      ...rest
+    }: SwapTransitionProps,
+    ref?: ForwardedRef<HTMLDivElement>
+  ) => {
+    const [phase, setPhase] = useState<{
+      key: string | number;
+      leaving: ReactNode | null;
+      // Counts plays rather than reusing the key, so swapping A → B → A still
+      // animates the second arrival at A.
+      play: number;
+    }>({ key: transitionKey, leaving: null, play: animateInitial ? 1 : 0 });
+
+    // The subtree as last committed, held only to hand to the exit. It is never
+    // rendered in place of `children` — see the note above.
+    const committed = useRef<ReactNode>(children);
+
+    // Derived during render rather than in an effect, deliberately: the exit has
+    // to begin in the same commit the key changed, or the incoming content
+    // paints for a frame before the outgoing has started to leave.
+    if (phase.key !== transitionKey) {
+      setPhase({
+        key: transitionKey,
+        leaving: committed.current,
+        play: phase.play + 1,
+      });
+    }
+
+    // No dependency array: this has to see every commit, because the snapshot it
+    // keeps is "whatever was on screen last", not "whatever was there when the
+    // key last changed".
+    useEffect(() => {
+      if (phase.leaving === null) {
+        committed.current = children;
+        return;
+      }
+      const timer = setTimeout(
+        () => setPhase((p) => ({ ...p, leaving: null })),
+        SWAP_OUT_MS
+      );
+      return () => clearTimeout(timer);
+    });
+
+    const exiting = phase.leaving !== null;
+
+    return (
+      <Box
+        ref={ref}
+        {...rest}
+        // Unkeyed on purpose. The animation restarts because the *name* changes
+        // — `swap-out` and `swap-in` always alternate, since every key change
+        // plays an exit before its enter — so there is no need to remount, and
+        // the caller keeps a stable DOM node and a stable ref across swaps.
+        aria-hidden={exiting || undefined}
+        pointerEvents={exiting ? 'none' : undefined}
+        css={mergeCss(
+          { '--swap-distance': `${distance}px` },
+          exiting ? swapOut : phase.play === 0 ? undefined : swapIn,
+          css
+        )}
+      >
+        {exiting ? phase.leaving : children}
+      </Box>
+    );
+  }
+);
+
+SwapTransition.displayName = 'SwapTransition';

package/src/components/SwapTransition/SwapTransition.types.ts

@@ -0,0 +1,22 @@
+import type { BoxProps } from '@chakra-ui/react';
+
+export interface SwapTransitionProps extends Omit<BoxProps, 'translate'> {
+  /**
+   * Identity of the content on screen. Changing it swaps: the old subtree
+   * leaves, the new one enters. Use what genuinely identifies the content — a
+   * step index, a record id — never a value that changes on unrelated
+   * re-renders, or the content swaps with itself.
+   */
+  transitionKey: string | number;
+  /**
+   * Horizontal travel in px. Positive means the new content enters from the
+   * right (going forward); pass a negative value to run the swap backwards.
+   * Defaults to 24.
+   */
+  distance?: number;
+  /**
+   * Animate the first render too. Off by default — a stepper mounting on step 1
+   * should already be there, not slide in from nowhere.
+   */
+  animateInitial?: boolean;
+}

package/src/components/SwapTransition/index.ts

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

package/src/components/Switch/SwitchControl.tsx

@@ -1,6 +1,7 @@
 import { forwardRef } from 'react';
 import { Switch as ChakraSwitch, SwitchControlProps } from '@chakra-ui/react';
 
+import { disabledControl } from '@/utils/disabledControl';
 import { focusRing } from '@/utils/focusRing';
 
 export const SwitchControl = forwardRef<HTMLSpanElement, SwitchControlProps>(
@@ -14,10 +15,27 @@ export const SwitchControl = forwardRef<HTMLSpanElement, SwitchControlProps>(
       // The checked state is the self-defining primary.main fill.
       bg="bg.track"
       _checked={{ bg: 'primary.main' }}
+      animationStyle="feedback"
+      transitionProperty="background-color"
+      _disabled={{ ...disabledControl, cursor: 'not-allowed' }}
       {...focusRing}
       {...props}
     >
-      <ChakraSwitch.Thumb />
+      <ChakraSwitch.Thumb
+        // A toggle is the metaphor of a physical switch, so the thumb settles
+        // slightly past its stop rather than easing to a halt. Chakra's default
+        // is `translate` over `fast` on a plain curve; `overshoot` is the one
+        // curve that stays legible over the thumb's ~16px of travel, because it
+        // reverses direction — `standard` vs `emphasized` would not.
+        animationStyle="spring"
+        transitionProperty="translate"
+        // Chakra's default is a raw `white` thumb that stays `white` when
+        // checked via an undefined `colorPalette.contrast`. bg.surface reads
+        // as the same near-white in light and flips correctly in dark; the
+        // checked thumb is fg.onPrimary (cream) to match Checkbox/Radio.
+        bg="bg.surface"
+        _checked={{ bg: 'fg.onPrimary' }}
+      />
     </ChakraSwitch.Control>
   )
 );

package/src/components/Table/Table.stories.tsx

@@ -1,7 +1,10 @@
+import { useState } from 'react';
 import { Flex } from '@chakra-ui/react';
 import { Meta, StoryObj } from '@storybook/react';
-import { useState } from 'react';
 
+import { Button } from '../Button';
+import { IoChevronDownOutline } from '../Icon';
+import { IconButton } from '../IconButton';
 import {
   ExpandingTr,
   Table,
@@ -12,8 +15,6 @@ import {
   Thead,
   Tr,
 } from '.';
-import { IoChevronDownOutline } from '../Icon';
-import { IconButton } from '../IconButton';
 
 const meta = {
   title: 'Components/Table',
@@ -160,7 +161,7 @@ export const InteractiveRows: Story = {
 
 /**
  * Per-row state tints via `<Tr state="...">`, backed by the mode-aware
- * semantic tokens `bg.selected`, `bg.invalid.subtle` and `bg.highlighted`.
+ * semantic tokens `primary.selected`, `bg.invalid.subtle` and `bg.highlighted`.
  */
 export const RowStates: Story = {
   render: (args) => (
@@ -212,9 +213,7 @@ export const StickyHeader: Story = {
           {Array.from({ length: 12 }, (_, i) => (
             <Tr key={i}>
               {columns.map((column) => (
-                <Td key={column.key}>
-                  {data[i % data.length][column.key]}
-                </Td>
+                <Td key={column.key}>{data[i % data.length][column.key]}</Td>
               ))}
             </Tr>
           ))}
@@ -256,9 +255,8 @@ export const ExpandedContent: Story = {
                 <Td w={2}>
                   <IconButton
                     aria-label="Expand"
-                    {...({icon: <IoChevronDownOutline />} as any)}
+                    {...({ icon: <IoChevronDownOutline /> } as any)}
                     onClick={() => setIsExpanded((e) => !e)}
-                    colorScheme="neutral"
                     variant="ghost"
                   />
                 </Td>
@@ -430,3 +428,274 @@ export const WithTwoLeftStickyColumns: Story = {
   args: { width: '180%' },
   argTypes: {},
 };
+
+// Three consecutive left-pinned columns + one right-pinned column — the shape of
+// the admin 챗봇 공개 관리 / 전체 멤버 tables (checkbox · name · status pinned
+// left, an action column pinned right, many trailing columns scrolling between).
+const adminColumns: { key: string; label: string }[] = [
+  { key: 'check', label: '' },
+  { key: 'name', label: '이름' },
+  { key: 'status', label: '상태' },
+  { key: 'email', label: '이메일' },
+  { key: 'phone', label: '전화번호' },
+  { key: 'address', label: '주소' },
+  { key: 'company', label: '회사' },
+  { key: 'department', label: '부서' },
+  { key: 'action', label: '' },
+];
+
+const LEFT_STICKY = new Set([0, 1, 2]);
+const RIGHT_STICKY = adminColumns.length - 1;
+
+const adminRow = (
+  i: number,
+  name: string,
+  status: string
+): Record<string, string> => ({
+  check: `${i + 1}`,
+  name,
+  status,
+  email: `user${i + 1}@example.com`,
+  phone: '010-1234-5678',
+  address: '서울특별시 강남구 테헤란로 123',
+  company: '테크 주식회사',
+  department: '프론트엔드 팀',
+  action: '⋯',
+});
+
+/**
+ * Multiple left-pinned columns kept flush during horizontal scroll — the admin
+ * table layout that surfaced the offset bug. Scroll sideways: the three left
+ * columns and the right action column stay pinned and opaque, with the middle
+ * columns scrolling underneath.
+ */
+export const WithMultipleLeftStickyColumns: Story = {
+  render: (args) => {
+    const rows = [
+      adminRow(0, '김철수', '승인됨'),
+      adminRow(1, '이영희', '검토중'),
+      adminRow(2, '박지훈', '거절됨'),
+    ];
+    return (
+      <TableContainer>
+        <Table {...args}>
+          <Thead>
+            <Tr>
+              {adminColumns.map((column, index) => (
+                <Th
+                  key={column.key}
+                  isSticky={LEFT_STICKY.has(index) || index === RIGHT_STICKY}
+                  stickyDirection={index === RIGHT_STICKY ? 'right' : 'left'}
+                  stickyIndex={index === RIGHT_STICKY ? 0 : index}
+                >
+                  {column.label}
+                </Th>
+              ))}
+            </Tr>
+          </Thead>
+          <Tbody>
+            {rows.map((item, i) => (
+              <Tr key={i}>
+                {adminColumns.map((column, index) => (
+                  <Td
+                    key={column.key}
+                    isSticky={LEFT_STICKY.has(index) || index === RIGHT_STICKY}
+                    stickyDirection={index === RIGHT_STICKY ? 'right' : 'left'}
+                    stickyIndex={index === RIGHT_STICKY ? 0 : index}
+                  >
+                    {item[column.key]}
+                  </Td>
+                ))}
+              </Tr>
+            ))}
+          </Tbody>
+        </Table>
+      </TableContainer>
+    );
+  },
+  args: { width: '220%' },
+  argTypes: {},
+};
+
+/**
+ * Regression coverage for the admin 챗봇 공개 관리 / 전체 멤버 breakage.
+ *
+ * The pinned columns' cumulative offsets used to be measured once at mount and
+ * then frozen, so when a column's width changed afterwards — a web-font swap, a
+ * resize, pagination swapping in wider content, or the columns reflowing as the
+ * table went from fitting to overflowing — the following pinned columns stayed
+ * at the stale offsets and visibly detached (an empty gap opened between them).
+ *
+ * Toggle the button: the second pinned column ("이름") grows/shrinks its
+ * content, so the third pinned column ("상태") must re-pin to the new edge. It
+ * has to stay flush — no empty gap, no overlap. Before the ResizeObserver fix a
+ * gap appeared here after toggling.
+ */
+export const StickyOffsetsTrackWidthChanges: Story = {
+  render: (args) => {
+    const [long, setLong] = useState(false);
+    const longName = '아주 아주 긴 이름 콘텐츠로 컬럼 폭을 넓힙니다';
+    const rows = [
+      adminRow(0, long ? `김철수 — ${longName}` : '김철수', '승인됨'),
+      adminRow(1, long ? `이영희 — ${longName}` : '이영희', '검토중'),
+      adminRow(2, long ? `박지훈 — ${longName}` : '박지훈', '거절됨'),
+    ];
+    return (
+      <Flex direction="column" gap={3} align="start">
+        <Button onClick={() => setLong((v) => !v)}>
+          {long ? '이름 컬럼 짧게' : '이름 컬럼 길게 (폭 변경)'}
+        </Button>
+        <TableContainer>
+          <Table {...args}>
+            <Thead>
+              <Tr>
+                {adminColumns.map((column, index) => (
+                  <Th
+                    key={column.key}
+                    isSticky={LEFT_STICKY.has(index) || index === RIGHT_STICKY}
+                    stickyDirection={index === RIGHT_STICKY ? 'right' : 'left'}
+                    stickyIndex={index === RIGHT_STICKY ? 0 : index}
+                  >
+                    {column.label}
+                  </Th>
+                ))}
+              </Tr>
+            </Thead>
+            <Tbody>
+              {rows.map((item, i) => (
+                <Tr key={i}>
+                  {adminColumns.map((column, index) => (
+                    <Td
+                      key={column.key}
+                      isSticky={
+                        LEFT_STICKY.has(index) || index === RIGHT_STICKY
+                      }
+                      stickyDirection={
+                        index === RIGHT_STICKY ? 'right' : 'left'
+                      }
+                      stickyIndex={index === RIGHT_STICKY ? 0 : index}
+                    >
+                      {item[column.key]}
+                    </Td>
+                  ))}
+                </Tr>
+              ))}
+            </Tbody>
+          </Table>
+        </TableContainer>
+      </Flex>
+    );
+  },
+  args: { width: '220%' },
+  argTypes: {},
+};
+
+// Pages whose pinned "이름" column has a different natural width each page — the
+// real admin case, where paging swaps in rows of different content lengths.
+const PAGES: { name: string; status: string }[][] = [
+  [
+    { name: '김철수', status: '승인됨' },
+    { name: '이영희', status: '검토중' },
+    { name: '박지훈', status: '거절됨' },
+  ],
+  [
+    {
+      name: '남궁민수 — 아주 아주 길어서 컬럼을 넓히는 이름',
+      status: '승인됨',
+    },
+    {
+      name: '황보지훈 — 아주 아주 길어서 컬럼을 넓히는 이름',
+      status: '승인됨',
+    },
+    {
+      name: '독고영희 — 아주 아주 길어서 컬럼을 넓히는 이름',
+      status: '검토중',
+    },
+  ],
+  [
+    { name: '최민', status: '거절됨' },
+    { name: '한수', status: '승인됨' },
+    { name: '오지', status: '검토중' },
+  ],
+];
+
+/**
+ * Regression coverage for the exact admin-page symptom: **pagination didn't
+ * re-pin the sticky columns.**
+ *
+ * Paging swaps only the `<tbody>` rows while the `<thead>` (and its Th cells)
+ * stay mounted. Each page here has a different-width pinned "이름" column. The
+ * old engine measured the pinned widths once and only recalculated on a
+ * scroll/resize event — which paging doesn't fire — so pages 2/3 rendered
+ * pinned to page 1's widths and the following columns overlapped. Step through
+ * the pages: the "상태" column must stay flush against "이름" on every page.
+ */
+export const StickyOffsetsSurvivePagination: Story = {
+  render: (args) => {
+    const [page, setPage] = useState(0);
+    const rows = PAGES[page].map((r, i) => adminRow(i, r.name, r.status));
+    return (
+      <Flex direction="column" gap={3} align="start">
+        <Flex gap={2} align="center">
+          <Button
+            variant="secondary"
+            disabled={page === 0}
+            onClick={() => setPage((p) => Math.max(0, p - 1))}
+          >
+            이전
+          </Button>
+          <span>
+            {page + 1} / {PAGES.length} 페이지
+          </span>
+          <Button
+            variant="secondary"
+            disabled={page === PAGES.length - 1}
+            onClick={() => setPage((p) => Math.min(PAGES.length - 1, p + 1))}
+          >
+            다음
+          </Button>
+        </Flex>
+        <TableContainer>
+          <Table {...args}>
+            <Thead>
+              <Tr>
+                {adminColumns.map((column, index) => (
+                  <Th
+                    key={column.key}
+                    isSticky={LEFT_STICKY.has(index) || index === RIGHT_STICKY}
+                    stickyDirection={index === RIGHT_STICKY ? 'right' : 'left'}
+                    stickyIndex={index === RIGHT_STICKY ? 0 : index}
+                  >
+                    {column.label}
+                  </Th>
+                ))}
+              </Tr>
+            </Thead>
+            <Tbody>
+              {rows.map((item, i) => (
+                <Tr key={i}>
+                  {adminColumns.map((column, index) => (
+                    <Td
+                      key={column.key}
+                      isSticky={
+                        LEFT_STICKY.has(index) || index === RIGHT_STICKY
+                      }
+                      stickyDirection={
+                        index === RIGHT_STICKY ? 'right' : 'left'
+                      }
+                      stickyIndex={index === RIGHT_STICKY ? 0 : index}
+                    >
+                      {item[column.key]}
+                    </Td>
+                  ))}
+                </Tr>
+              ))}
+            </Tbody>
+          </Table>
+        </TableContainer>
+      </Flex>
+    );
+  },
+  args: { width: '220%' },
+  argTypes: {},
+};

package/src/components/Table/Table.types.ts

@@ -17,7 +17,7 @@ export type TableRowState = 'selected' | 'invalid' | 'highlighted';
 export interface TableRowProps extends Table.RowProps {
   /**
    * Row background tint, driven by the table recipe's semantic tokens
-   * (`bg.selected` / `bg.invalid.subtle` / `bg.highlighted`) so it renders
+   * (`primary.selected` / `bg.invalid.subtle` / `bg.highlighted`) so it renders
    * correctly in both light and dark mode.
    */
   state?: TableRowState;