@mindlogic-ai/logician-ui 2.0.0-alpha.0

package/src/components/Table/ExpandingTr/ExpandingTr.tsx

@@ -0,0 +1,31 @@
+import { Children } from 'react';
+import { Collapse } from '@chakra-ui/react';
+
+import { Td } from '../Td';
+import { Tr } from '../Tr';
+import { ExpandingTrProps } from './ExpandingTr.types';
+
+export const ExpandingTr: React.FC<ExpandingTrProps> = ({
+  children,
+  expandedContent,
+  isExpanded,
+  onExpandChange,
+  expandedRowProps,
+  ...rest
+}) => {
+  const childrenArray = Children.toArray(children);
+
+  return (
+    <>
+      {/* Main Row */}
+      <Tr {...rest}>{children}</Tr>
+
+      {/* Expanded Row */}
+      <Tr h={isExpanded ? undefined : 0} {...expandedRowProps}>
+        <Td colSpan={childrenArray.length} p={0}>
+          <Collapse in={isExpanded}>{expandedContent}</Collapse>
+        </Td>
+      </Tr>
+    </>
+  );
+};

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

@@ -0,0 +1,9 @@
+import { TableRowProps } from '@chakra-ui/react';
+
+export interface ExpandingTrProps extends TableRowProps {
+  children: React.ReactNode;
+  isExpanded: boolean; // Controls whether the expanded content is visible
+  onExpandChange?: (isExpanded: boolean) => void; // Callback for when expansion state changes
+  expandedRowProps?: TableRowProps;
+  expandedContent: React.ReactNode;
+}

package/src/components/Table/ExpandingTr/index.ts

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

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

@@ -0,0 +1,326 @@
+import React, { useState } from 'react';
+import { Flex } from '@chakra-ui/react';
+import { Meta, StoryObj } from '@storybook/react';
+
+import { Icon } from '../Icon';
+import { IconButton } from '../IconButton';
+import {
+  ExpandingTr,
+  Table,
+  TableContainer,
+  Tbody,
+  Td,
+  Th,
+  Thead,
+  Tr,
+} from '.';
+
+const meta: Meta<typeof Table> = {
+  title: 'Components/Table',
+  component: Table,
+};
+
+export default meta;
+
+const columns: {
+  key: string;
+  label: string;
+}[] = [
+  { key: 'unit', label: '헤더1' },
+  { key: 'conversion', label: '헤더2' },
+  { key: 'factor', label: '헤더3' },
+];
+
+const wideColumns: {
+  key: string;
+  label: string;
+}[] = [
+  { key: 'id', label: 'ID' },
+  { key: 'name', label: '이름' },
+  { key: 'email', label: '이메일' },
+  { key: 'phone', label: '전화번호' },
+  { key: 'address', label: '주소' },
+  { key: 'company', label: '회사' },
+  { key: 'position', label: '직책' },
+  { key: 'department', label: '부서' },
+];
+
+const wideData: Record<string, any>[] = [
+  {
+    id: 1,
+    name: '김철수',
+    email: 'kim@example.com',
+    phone: '010-1234-5678',
+    address: '서울특별시 강남구 테헤란로 123',
+    company: '테크 주식회사',
+    position: '시니어 개발자',
+    department: '프론트엔드 팀',
+  },
+  {
+    id: 2,
+    name: '이영희',
+    email: 'lee@example.com',
+    phone: '010-8765-4321',
+    address: '서울특별시 서초구 반포대로 456',
+    company: '디지털 솔루션즈',
+    position: '제품 매니저',
+    department: '제품 팀',
+  },
+  {
+    id: 3,
+    name: '박지훈',
+    email: 'park@example.com',
+    phone: '010-2345-6789',
+    address: '서울특별시 마포구 양화로 789',
+    company: '크리에이티브 랩스',
+    position: 'UX 디자이너',
+    department: '디자인 팀',
+  },
+];
+
+const data: Record<string, any>[] = [
+  {
+    unit: 'inches',
+    conversion: 'millimetres (mm)',
+    factor: 25.4,
+    expandedText: 'This should only show when expanded.',
+  },
+  {
+    unit: 'feet',
+    conversion: 'centimetres (cm)',
+    factor: 30.48,
+    expandedText: 'This should only show when expanded.',
+  },
+];
+
+type Story = StoryObj<typeof Table>;
+
+export const Default: Story = {
+  render: (args) => (
+    <TableContainer>
+      <Table {...args}>
+        <Thead>
+          <Tr>
+            {columns.map((column) => (
+              <Th key={column.key}>{column.label}</Th>
+            ))}
+          </Tr>
+        </Thead>
+        <Tbody>
+          {data.map((item) => (
+            <Tr>
+              {columns.map((column) => (
+                <Td key={column.key}>{item[column.key]}</Td>
+              ))}
+            </Tr>
+          ))}
+        </Tbody>
+      </Table>
+    </TableContainer>
+  ),
+  args: {},
+  argTypes: {},
+};
+
+export const ExpandedContent: Story = {
+  render: (args) => (
+    <TableContainer maxW="100%">
+      <Table {...args}>
+        <Thead>
+          <Tr>
+            {columns.map((column) => (
+              <Th key={column.key}>{column.label}</Th>
+            ))}
+          </Tr>
+        </Thead>
+        <Tbody>
+          {data.map((item) => {
+            const [isExpanded, setIsExpanded] = useState<boolean>(false);
+            return (
+              <ExpandingTr
+                isExpanded={isExpanded}
+                onExpandChange={setIsExpanded}
+                expandedContent={
+                  <Flex p={4} align="center" justify="center">
+                    {item.expandedText}
+                  </Flex>
+                }
+              >
+                {columns.map((column) => (
+                  <Td key={column.key}>{item[column.key]}</Td>
+                ))}
+                <Td w={2}>
+                  <IconButton
+                    aria-label="Expand"
+                    icon={<Icon icon="IoChevronDownOutline" />}
+                    onClick={() => setIsExpanded((e) => !e)}
+                  />
+                </Td>
+              </ExpandingTr>
+            );
+          })}
+        </Tbody>
+      </Table>
+    </TableContainer>
+  ),
+  args: {},
+  argTypes: {},
+};
+
+export const WithLeftStickyColumn: Story = {
+  render: (args) => (
+    <TableContainer>
+      <Table {...args}>
+        <Thead>
+          <Tr>
+            {wideColumns.map((column, index) => (
+              <Th
+                key={column.key}
+                isSticky={index === 0}
+                stickyDirection="left"
+              >
+                {column.label}
+              </Th>
+            ))}
+          </Tr>
+        </Thead>
+        <Tbody>
+          {wideData.map((item) => (
+            <Tr key={item.id}>
+              {wideColumns.map((column, index) => (
+                <Td
+                  key={column.key}
+                  isSticky={index === 0}
+                  stickyDirection="left"
+                >
+                  {item[column.key]}
+                </Td>
+              ))}
+            </Tr>
+          ))}
+        </Tbody>
+      </Table>
+    </TableContainer>
+  ),
+  args: { width: '180%' },
+  argTypes: {},
+};
+
+export const WithRightStickyColumn: Story = {
+  render: (args) => (
+    <TableContainer>
+      <Table {...args}>
+        <Thead>
+          <Tr>
+            {wideColumns.map((column, index) => (
+              <Th
+                key={column.key}
+                isSticky={index === wideColumns.length - 1}
+                stickyDirection="right"
+              >
+                {column.label}
+              </Th>
+            ))}
+          </Tr>
+        </Thead>
+        <Tbody>
+          {wideData.map((item) => (
+            <Tr key={item.id}>
+              {wideColumns.map((column, index) => (
+                <Td
+                  key={column.key}
+                  isSticky={index === wideColumns.length - 1}
+                  stickyDirection="right"
+                >
+                  {item[column.key]}
+                </Td>
+              ))}
+            </Tr>
+          ))}
+        </Tbody>
+      </Table>
+    </TableContainer>
+  ),
+  args: { width: '180%' },
+  argTypes: {},
+};
+
+export const WithBothStickyColumns: Story = {
+  render: (args) => (
+    <TableContainer>
+      <Table {...args}>
+        <Thead>
+          <Tr>
+            {wideColumns.map((column, index) => (
+              <Th
+                key={column.key}
+                isSticky={index === 0 || index === wideColumns.length - 1}
+                stickyDirection={index === 0 ? 'left' : 'right'}
+              >
+                {column.label}
+              </Th>
+            ))}
+          </Tr>
+        </Thead>
+        <Tbody>
+          {wideData.map((item) => (
+            <Tr key={item.id}>
+              {wideColumns.map((column, index) => (
+                <Td
+                  key={column.key}
+                  isSticky={index === 0 || index === wideColumns.length - 1}
+                  stickyDirection={index === 0 ? 'left' : 'right'}
+                >
+                  {item[column.key]}
+                </Td>
+              ))}
+            </Tr>
+          ))}
+        </Tbody>
+      </Table>
+    </TableContainer>
+  ),
+  args: { width: '180%' },
+  argTypes: {},
+};
+
+export const WithTwoLeftStickyColumns: Story = {
+  render: (args) => (
+    <TableContainer>
+      <Table {...args}>
+        <Thead>
+          <Tr>
+            {wideColumns.map((column, index) => (
+              <Th
+                key={column.key}
+                isSticky={index === 0 || index === 1}
+                stickyDirection="left"
+                stickyIndex={index === 0 || index === 1 ? index : undefined}
+              >
+                {column.label}
+              </Th>
+            ))}
+          </Tr>
+        </Thead>
+        <Tbody>
+          {wideData.map((item) => (
+            <Tr key={item.id}>
+              {wideColumns.map((column, index) => (
+                <Td
+                  key={column.key}
+                  isSticky={index === 0 || index === 1}
+                  stickyDirection="left"
+                  stickyIndex={index === 0 || index === 1 ? index : undefined}
+                >
+                  {item[column.key]}
+                </Td>
+              ))}
+            </Tr>
+          ))}
+        </Tbody>
+      </Table>
+    </TableContainer>
+  ),
+  args: { width: '180%' },
+  argTypes: {},
+};

package/src/components/Table/Table.styles.ts

@@ -0,0 +1,48 @@
+import { TableScrollState } from './TableContext';
+
+export type StickyDirection = 'left' | 'right';
+
+export const getStickyStyles = (
+  isSticky: boolean,
+  stickyDirection: StickyDirection = 'left',
+  scrollState: TableScrollState,
+  stickyOffset = 0,
+  isLastSticky = false
+) => {
+  if (!isSticky || !scrollState) return {};
+  const { isScrollStart, isScrollEnd, isScrolling } = scrollState;
+
+  // 양쪽 sticky 상태
+  const isBothSticky =
+    (stickyDirection === 'left' && isScrollEnd) ||
+    (stickyDirection === 'right' && isScrollStart);
+
+  // 한쪽 sticky 상태
+  const isSingleSticky = isScrolling;
+
+  // Only show shadow if this is the last sticky column on this side
+  const shouldShowShadow = isLastSticky && (isSingleSticky || isBothSticky);
+
+  return {
+    position: 'sticky' as const,
+    overflow: 'visible',
+    [stickyDirection]: `${stickyOffset}px`,
+    zIndex: 2,
+    backgroundColor: 'white',
+    ...(shouldShowShadow && {
+      _after: {
+        content: '""',
+        position: 'absolute',
+        top: 0,
+        bottom: '-1px',
+        width: '32px',
+        insetInlineEnd: stickyDirection === 'left' ? 0 : '100%',
+        translate: stickyDirection === 'left' ? '100%' : '-8',
+        boxShadow:
+          stickyDirection === 'left'
+            ? 'rgba(0, 0, 0, 0.16) 8px 0px 8px -8px inset'
+            : 'rgba(0, 0, 0, 0.16) -8px 0px 8px -8px inset',
+      },
+    }),
+  };
+};

package/src/components/Table/Table.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+import {
+  Table as ChakraTable,
+  TableProps as ChakraTableProps,
+} from '@chakra-ui/react';
+
+export const Table = ({ ...rest }: ChakraTableProps) => {
+  return <ChakraTable {...rest} />;
+};

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

@@ -0,0 +1,16 @@
+import {
+  TableCellProps as ChakraTableCellProps,
+  TableContainerProps as ChakraTableContainerProps,
+} from '@chakra-ui/react';
+
+import { StickyDirection } from './Table.styles';
+
+export interface TableContainerProps extends ChakraTableContainerProps {
+  children: React.ReactNode;
+}
+
+export interface TableCellProps extends ChakraTableCellProps {
+  isSticky?: boolean;
+  stickyDirection?: StickyDirection;
+  stickyIndex?: number;
+}

package/src/components/Table/TableContainer.tsx

@@ -0,0 +1,55 @@
+import { forwardRef, useCallback } from 'react';
+import { TableContainer as ChakraTableContainer } from '@chakra-ui/react';
+
+import { TableContainerProps } from './Table.types';
+import { TableProvider, useTableContext } from './TableContext';
+
+// 실제 테이블 컨테이너 컴포넌트
+const TableContainerInner = forwardRef<HTMLDivElement, TableContainerProps>(
+  ({ children, ...rest }, ref) => {
+    const { setContainerRef } = useTableContext();
+
+    // ref 설정 콜백 - 외부 ref와 내부 ref 결합
+    const handleRef = useCallback(
+      (node: HTMLDivElement | null) => {
+        // 외부 ref 설정
+        if (typeof ref === 'function') {
+          ref(node);
+        } else if (ref) {
+          ref.current = node;
+        }
+
+        // 내부 컨텍스트 ref 설정
+        setContainerRef(node);
+      },
+      [ref, setContainerRef]
+    );
+
+    return (
+      <ChakraTableContainer
+        border="1px solid"
+        borderRadius="md"
+        borderColor="gray.300"
+        ref={handleRef}
+        {...rest}
+      >
+        {children}
+      </ChakraTableContainer>
+    );
+  }
+);
+
+TableContainerInner.displayName = 'TableContainerInner';
+
+// 외부 노출용 컴포넌트
+export const TableContainer = forwardRef<HTMLDivElement, TableContainerProps>(
+  (props, ref) => {
+    return (
+      <TableProvider>
+        <TableContainerInner {...props} ref={ref} />
+      </TableProvider>
+    );
+  }
+);
+
+TableContainer.displayName = 'TableContainer';

package/src/components/Table/TableContext.tsx

@@ -0,0 +1,187 @@
+import React, {
+  createContext,
+  ReactNode,
+  useCallback,
+  useContext,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
+
+export interface TableScrollState {
+  isScrollStart: boolean;
+  isScrollEnd: boolean;
+  isScrolling: boolean;
+}
+
+interface StickyColumnInfo {
+  leftColumnWidths: Map<number, number>; // Maps index to width
+  rightColumnWidths: Map<number, number>; // Maps index to width
+}
+
+interface TableContextValue extends TableScrollState {
+  setContainerRef: (node: HTMLDivElement | null) => void;
+  registerStickyColumn: (
+    direction: 'left' | 'right',
+    index: number,
+    width: number
+  ) => void;
+  getStickyOffset: (direction: 'left' | 'right', index: number) => number;
+  isLastStickyColumn: (direction: 'left' | 'right', index: number) => boolean;
+}
+
+const TableContext = createContext<TableContextValue | null>(null);
+
+export const useTableContext = () => {
+  const context = useContext(TableContext);
+  if (!context) {
+    console.error('useTableContext must be used within a TableProvider');
+  }
+  return context;
+};
+
+interface TableProviderProps {
+  children: ReactNode;
+}
+
+export const TableProvider: React.FC<TableProviderProps> = ({ children }) => {
+  const containerRef = useRef<HTMLDivElement | null>(null);
+  const [scrollState, setScrollState] = useState<TableScrollState>({
+    isScrollStart: true,
+    isScrollEnd: false,
+    isScrolling: false,
+  });
+
+  const stickyColumnsRef = useRef<StickyColumnInfo>({
+    leftColumnWidths: new Map(),
+    rightColumnWidths: new Map(),
+  });
+
+  // 스크롤 상태 업데이트
+  const updateScrollState = useCallback(() => {
+    const container = containerRef.current;
+    if (!container) return;
+
+    const { scrollLeft, scrollWidth, clientWidth } = container;
+
+    const isScrollStart = scrollLeft <= 1;
+    const isScrollEnd = Math.abs(scrollWidth - clientWidth - scrollLeft) <= 1;
+
+    setScrollState((prevState) => {
+      // 상태가 변경된 경우에만 업데이트 (불필요한 리렌더링 방지)
+      if (
+        prevState.isScrollStart !== isScrollStart ||
+        prevState.isScrollEnd !== isScrollEnd ||
+        prevState.isScrolling !== (!isScrollStart && !isScrollEnd)
+      ) {
+        return {
+          isScrollStart,
+          isScrollEnd,
+          isScrolling: !isScrollStart && !isScrollEnd,
+        };
+      }
+      return prevState;
+    });
+  }, []);
+
+  // 컨테이너 ref 설정 및 상태 업데이트
+  const setContainerRef = useCallback(
+    (node: HTMLDivElement | null) => {
+      containerRef.current = node;
+      if (node) {
+        updateScrollState();
+      }
+    },
+    [updateScrollState]
+  );
+
+  // Register a sticky column with its width
+  const registerStickyColumn = useCallback(
+    (direction: 'left' | 'right', index: number, width: number) => {
+      if (direction === 'left') {
+        stickyColumnsRef.current.leftColumnWidths.set(index, width);
+      } else {
+        stickyColumnsRef.current.rightColumnWidths.set(index, width);
+      }
+    },
+    []
+  );
+
+  // Get the offset for a sticky column based on its index and direction
+  const getStickyOffset = useCallback(
+    (direction: 'left' | 'right', index: number) => {
+      if (index === 0) return 0;
+
+      const widthsMap =
+        direction === 'left'
+          ? stickyColumnsRef.current.leftColumnWidths
+          : stickyColumnsRef.current.rightColumnWidths;
+
+      let offset = 0;
+      for (let i = 0; i < index; i++) {
+        offset += widthsMap.get(i) || 0;
+      }
+
+      return offset;
+    },
+    []
+  );
+
+  // Check if a column is the last sticky column on its side
+  const isLastStickyColumn = useCallback(
+    (direction: 'left' | 'right', index: number) => {
+      const widthsMap =
+        direction === 'left'
+          ? stickyColumnsRef.current.leftColumnWidths
+          : stickyColumnsRef.current.rightColumnWidths;
+
+      // Find the highest index in the map
+      let maxIndex = -1;
+      for (const idx of widthsMap.keys()) {
+        if (idx > maxIndex) maxIndex = idx;
+      }
+
+      return index === maxIndex;
+    },
+    []
+  );
+
+  // 단일 useEffect에서 모든 이벤트 리스너 관리
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+
+    // 스크롤 이벤트 핸들러
+    const handleScroll = () => updateScrollState();
+
+    // 리사이즈 이벤트 핸들러
+    const handleResize = () => updateScrollState();
+
+    // 이벤트 리스너 등록
+    container.addEventListener('scroll', handleScroll);
+    window.addEventListener('resize', handleResize);
+
+    // 초기 상태 설정
+    updateScrollState();
+
+    // 클린업
+    return () => {
+      container.removeEventListener('scroll', handleScroll);
+      window.removeEventListener('resize', handleResize);
+    };
+  }, [updateScrollState]);
+
+  return (
+    <TableContext.Provider
+      value={{
+        ...scrollState,
+        setContainerRef,
+        registerStickyColumn,
+        getStickyOffset,
+        isLastStickyColumn,
+      }}
+    >
+      {children}
+    </TableContext.Provider>
+  );
+};

package/src/components/Table/Tbody.tsx

@@ -0,0 +1,12 @@
+import { forwardRef } from 'react';
+import { TableBodyProps, Tbody as ChakraTbody } from '@chakra-ui/react';
+
+export const Tbody = forwardRef<HTMLTableSectionElement, TableBodyProps>(
+  (props, ref) => {
+    return (
+      <ChakraTbody ref={ref} color="gray.1500" fontWeight="medium" {...props} />
+    );
+  }
+);
+
+Tbody.displayName = 'Tbody';