@rchemist/listgrid 0.2.6

package/dist/listgrid/components/list/types/ViewListGridTheme.types.d.ts

@@ -0,0 +1,374 @@
+/**
+ * ViewListGrid 컴포넌트 테마 타입 정의
+ *
+ * ListGrid와 하위 컴포넌트들의 모든 스타일 요소를 커스터마이징할 수 있습니다.
+ * EntityFormTheme과 함께 통합 테마 시스템의 일부로 사용됩니다.
+ *
+ * @example
+ * ```tsx
+ * const myListGridTheme: ViewListGridClassNames = {
+ *   panel: {
+ *     container: 'mt-5 border rounded-xl',
+ *   },
+ *   table: {
+ *     container: 'table-hover w-full',
+ *   },
+ * };
+ * ```
+ */
+export interface ViewListGridClassNames {
+    /**
+     * 최상위 컨테이너 스타일
+     */
+    root?: string;
+    /**
+     * 로딩 상태 스타일
+     */
+    loading?: {
+        /** 로딩 컨테이너 */
+        container?: string;
+        /** 로딩 오버레이 영역 */
+        overlay?: string;
+        /** 로딩 스켈레톤 */
+        skeleton?: string;
+    };
+    /**
+     * 헤더 영역 스타일 (ListGridHeader)
+     */
+    header?: {
+        /** 헤더 전체 컨테이너 */
+        container?: string;
+        /** 제목 영역 외부 컨테이너 */
+        titleContainer?: string;
+        /** 제목 영역 내부 래퍼 */
+        titleWrapper?: string;
+        /** 제목 텍스트 */
+        titleText?: string;
+        /** 버튼 그룹 컨테이너 */
+        buttonGroup?: string;
+    };
+    /**
+     * 패널 스타일 (메인 컨텐츠 영역)
+     */
+    panel?: {
+        /** 패널 컨테이너 */
+        container?: string;
+        /** Main Entity 스타일 */
+        mainEntity?: string;
+        /** SubCollection 스타일 */
+        subCollection?: string;
+        /** 기본 스타일 (isMainEntity, isSubCollection 모두 false) */
+        default?: string;
+    };
+    /**
+     * 서브콜렉션 버튼 영역 (SubCollectionButtons)
+     */
+    subCollectionButtons?: {
+        /** 컨테이너 */
+        container?: string;
+        /** 버튼 그룹 */
+        buttonGroup?: string;
+        /** 추가 버튼 */
+        addButton?: string;
+        /** 삭제 버튼 */
+        deleteButton?: string;
+        /** 기타 액션 버튼 */
+        actionButton?: string;
+    };
+    /**
+     * 검색바 스타일 (QuickSearchBar)
+     */
+    searchBar?: {
+        /** 검색바 전체 컨테이너 */
+        container?: string;
+        /** 내부 래퍼 */
+        innerWrapper?: string;
+        /** 레이아웃 래퍼 (flex) */
+        layoutWrapper?: string;
+    };
+    /**
+     * 검색 인풋 스타일 (QuickSearchInput)
+     */
+    searchInput?: {
+        /** 인풋 컨테이너 */
+        container?: string;
+        /** 인풋 필드 */
+        input?: string;
+        /** 검색 아이콘 */
+        icon?: string;
+        /** 검색 버튼 */
+        button?: string;
+        /** 클리어 버튼 */
+        clearButton?: string;
+    };
+    /**
+     * 검색바 액션 버튼 (SearchBarActions)
+     */
+    searchBarActions?: {
+        /** 컨테이너 */
+        container?: string;
+        /** 페이지 사이즈 셀렉트 */
+        pageSizeSelect?: string;
+        /** 필터 버튼 */
+        filterButton?: string;
+        /** 필드 선택기 버튼 */
+        fieldSelectorButton?: string;
+        /** 고급 검색 버튼 */
+        advancedSearchButton?: string;
+    };
+    /**
+     * 고급 검색 폼 스타일 (AdvancedSearchForm)
+     */
+    advancedSearch?: {
+        /** 폼 컨테이너 */
+        container?: string;
+        /** 폼 패널 */
+        panel?: string;
+        /** 필드 그리드 */
+        fieldGrid?: string;
+        /** 버튼 영역 */
+        buttonArea?: string;
+        /** 검색 버튼 */
+        searchButton?: string;
+        /** 초기화 버튼 */
+        resetButton?: string;
+        /** 닫기 버튼 */
+        closeButton?: string;
+    };
+    /**
+     * 테이블 스타일
+     */
+    table?: {
+        /** 테이블 responsive 래퍼 */
+        responsiveWrapper?: string;
+        /** 테이블 컨테이너 */
+        container?: string;
+        /** 테이블 요소 */
+        table?: string;
+        /** 테이블 헤더 (thead) */
+        thead?: string;
+        /** 헤더 행 (tr) */
+        headerRow?: string;
+        /** 테이블 바디 (tbody) */
+        tbody?: string;
+        /** 컨텐츠 래퍼 (비-팝업 모드) */
+        contentWrapper?: string;
+    };
+    /**
+     * 테이블 헤더 셀 스타일 (HeaderField)
+     */
+    headerCell?: {
+        /** 헤더 셀 (th) */
+        cell?: string;
+        /** 정렬 가능 헤더 */
+        sortable?: string;
+        /** 정렬 중인 헤더 */
+        sorted?: string;
+        /** 정렬 아이콘 */
+        sortIcon?: string;
+        /** 필터 아이콘 */
+        filterIcon?: string;
+        /** 체크박스 헤더 셀 */
+        checkboxCell?: string;
+        /** 드래그 핸들 헤더 셀 */
+        dragHandleCell?: string;
+        /** 새창 열기 헤더 셀 */
+        openNewWindowCell?: string;
+        /** 선택 버튼 헤더 셀 */
+        selectCell?: string;
+    };
+    /**
+     * 테이블 행 스타일 (ViewRows)
+     */
+    row?: {
+        /** 행 (tr) */
+        row?: string;
+        /** 호버 상태 */
+        hover?: string;
+        /** 선택된 행 */
+        selected?: string;
+        /** 짝수 행 */
+        even?: string;
+        /** 홀수 행 */
+        odd?: string;
+        /** 드래그 중인 행 */
+        dragging?: string;
+        /** 클릭 가능한 행 */
+        clickable?: string;
+    };
+    /**
+     * 테이블 셀 스타일 (ViewColumn)
+     */
+    cell?: {
+        /** 셀 (td) */
+        cell?: string;
+        /** 체크박스 셀 */
+        checkboxCell?: string;
+        /** 번호 셀 */
+        numberCell?: string;
+        /** 드래그 핸들 셀 */
+        dragHandleCell?: string;
+        /** 새창 열기 셀 */
+        openNewWindowCell?: string;
+        /** 선택 버튼 셀 */
+        selectCell?: string;
+        /** 데이터 셀 */
+        dataCell?: string;
+    };
+    /**
+     * 체크박스 스타일 (EntireChecker)
+     */
+    checkbox?: {
+        /** 체크박스 컨테이너 */
+        container?: string;
+        /** 체크박스 인풋 */
+        input?: string;
+        /** 전체 선택 체크박스 */
+        selectAll?: string;
+        /** 개별 체크박스 */
+        item?: string;
+        /** 선택된 상태 */
+        checked?: string;
+        /** 부분 선택 상태 */
+        indeterminate?: string;
+    };
+    /**
+     * 빈 상태 스타일
+     */
+    empty?: {
+        /** 빈 상태 컨테이너 */
+        container?: string;
+        /** 빈 상태 메시지 */
+        message?: string;
+        /** 빈 상태 아이콘 */
+        icon?: string;
+    };
+    /**
+     * 페이지네이션 스타일
+     */
+    pagination?: {
+        /** 페이지네이션 컨테이너 */
+        container?: string;
+        /** 페이지네이션 래퍼 */
+        wrapper?: string;
+    };
+    /**
+     * 알림 메시지 스타일
+     */
+    notifications?: {
+        /** 알림 컨테이너 */
+        container?: string;
+        /** 에러 알림 */
+        error?: string;
+        /** 성공 알림 */
+        success?: string;
+        /** 경고 알림 */
+        warning?: string;
+        /** 정보 알림 */
+        info?: string;
+    };
+    /**
+     * 필드 선택기 스타일 (FieldSelector)
+     */
+    fieldSelector?: {
+        /** 선택기 컨테이너 */
+        container?: string;
+        /** 드롭다운 패널 */
+        dropdown?: string;
+        /** 필드 아이템 */
+        item?: string;
+        /** 선택된 필드 */
+        selectedItem?: string;
+        /** 체크박스 */
+        checkbox?: string;
+    };
+    /**
+     * 필터 드롭다운 스타일 (FilterDropdown)
+     */
+    filterDropdown?: {
+        /** 드롭다운 컨테이너 */
+        container?: string;
+        /** 드롭다운 패널 */
+        panel?: string;
+        /** 필터 인풋 */
+        input?: string;
+        /** 적용 버튼 */
+        applyButton?: string;
+        /** 초기화 버튼 */
+        resetButton?: string;
+    };
+    /**
+     * 모달 스타일 (SubCollectionViewModal 등)
+     */
+    modal?: {
+        /** 모달 오버레이 */
+        overlay?: string;
+        /** 모달 컨테이너 */
+        container?: string;
+        /** 모달 헤더 */
+        header?: string;
+        /** 모달 바디 */
+        body?: string;
+        /** 모달 푸터 */
+        footer?: string;
+        /** 닫기 버튼 */
+        closeButton?: string;
+    };
+    /**
+     * 데이터 전송 모달 스타일 (DataTransferModal)
+     */
+    dataTransferModal?: {
+        /** 모달 컨테이너 */
+        container?: string;
+        /** 옵션 그리드 */
+        optionGrid?: string;
+        /** 옵션 아이템 */
+        optionItem?: string;
+        /** 진행률 바 */
+        progressBar?: string;
+    };
+    /**
+     * 우선순위 조절 스타일 (PriorityButton, 드래그 핸들)
+     */
+    priority?: {
+        /** 드래그 핸들 */
+        dragHandle?: string;
+        /** 드래그 핸들 아이콘 */
+        dragHandleIcon?: string;
+        /** 우선순위 버튼 */
+        button?: string;
+        /** 활성화 상태 */
+        active?: string;
+    };
+    /**
+     * 팝업 모드 스타일 (options.popup이 true일 때)
+     */
+    popup?: {
+        /** 팝업 컨테이너 */
+        container?: string;
+        /** 스크롤 영역 */
+        scrollArea?: string;
+        /** 팝업 테이블 */
+        table?: string;
+    };
+}
+/**
+ * ListGrid 테마 변형 타입
+ */
+export type ListGridThemeVariant = 'default' | 'main' | 'subCollection' | 'modal' | 'popup';
+/**
+ * ListGrid 테마 컨텍스트 값 타입
+ */
+export interface ListGridThemeContextValue {
+    /** 클래스 이름 객체 */
+    classNames: ViewListGridClassNames;
+    /**
+     * 기본 클래스와 커스텀 클래스를 병합
+     * @param base 기본 Tailwind 클래스
+     * @param custom 커스텀 클래스 (선택사항)
+     * @returns 병합된 클래스 문자열
+     */
+    cn: (base: string, custom?: string) => string;
+    /** 현재 적용된 변형 */
+    variant: ListGridThemeVariant;
+}

package/dist/listgrid/components/list/types/ViewListGridTheme.types.js

@@ -0,0 +1 @@
+export {};

package/dist/listgrid/components/list/ui/CardFieldRenderer.d.ts

@@ -0,0 +1,31 @@
+import React from 'react';
+import { EntityForm } from '../../../config/EntityForm';
+import { EntityField } from '../../../config/EntityField';
+import { FieldType } from '../../../config/Config';
+import { Session } from '../../../auth/types';
+export interface CardFieldRendererProps {
+    /** Form field to render */
+    field: EntityField;
+    /** Item data */
+    item: any;
+    /** Entity form instance for the item */
+    itemEntityForm: EntityForm;
+    /** Parent entity form */
+    parentEntityForm: EntityForm;
+    /** User session */
+    session?: Session;
+    /** Whether this field should use full width (col-span-2) */
+    isFullWidth?: boolean;
+}
+/**
+ * Determines if a field type should span the full width of the card
+ */
+export declare const isFullWidthFieldType: (fieldType: FieldType) => boolean;
+/**
+ * CardFieldRenderer
+ * Displays a field value in VIEW mode (read-only formatted)
+ * Uses field.viewValue() to leverage each field type's formatting logic
+ * (e.g., NumberField uses formatPrice, SelectField uses Badge)
+ */
+export declare const CardFieldRenderer: React.FC<CardFieldRendererProps>;
+export default CardFieldRenderer;

package/dist/listgrid/components/list/ui/CardFieldRenderer.js

@@ -0,0 +1,71 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState, useMemo } from 'react';
+// Field types that should span full width in the card grid
+const FULL_WIDTH_FIELD_TYPES = ['textarea', 'html', 'markdown', 'contentAsset'];
+/**
+ * Determines if a field type should span the full width of the card
+ */
+export const isFullWidthFieldType = (fieldType) => {
+    return FULL_WIDTH_FIELD_TYPES.includes(fieldType);
+};
+/**
+ * CardFieldRenderer
+ * Displays a field value in VIEW mode (read-only formatted)
+ * Uses field.viewValue() to leverage each field type's formatting logic
+ * (e.g., NumberField uses formatPrice, SelectField uses Badge)
+ */
+export const CardFieldRenderer = ({ field, item, itemEntityForm, parentEntityForm, session, isFullWidth, }) => {
+    // State for the rendered value
+    const [renderedValue, setRenderedValue] = useState('—');
+    const [isLoading, setIsLoading] = useState(true);
+    // Determine if this field should be full width
+    const shouldBeFullWidth = useMemo(() => {
+        return isFullWidth ?? isFullWidthFieldType(field.type);
+    }, [field.type, isFullWidth]);
+    // Get field label
+    const label = useMemo(() => {
+        const fieldLabel = field.getLabel();
+        if (typeof fieldLabel === 'string') {
+            return fieldLabel;
+        }
+        return field.getName();
+    }, [field]);
+    // Use field.viewValue() to get properly formatted value
+    useEffect(() => {
+        let isMounted = true;
+        const renderValue = async () => {
+            try {
+                // Call field's viewValue method for proper formatting
+                const result = await field.viewValue({
+                    item,
+                    entityForm: itemEntityForm,
+                });
+                if (isMounted) {
+                    setRenderedValue(result.result ?? '—');
+                    setIsLoading(false);
+                }
+            }
+            catch (error) {
+                console.error('CardFieldRenderer: Error rendering field value:', error);
+                if (isMounted) {
+                    // Fallback to raw value display
+                    const rawValue = item[field.getName()];
+                    setRenderedValue(rawValue !== undefined && rawValue !== null ? String(rawValue) : '—');
+                    setIsLoading(false);
+                }
+            }
+        };
+        renderValue();
+        return () => {
+            isMounted = false;
+        };
+    }, [field, item, itemEntityForm]);
+    return (_jsxs("div", { className: `
+        group/field flex flex-col py-2.5
+        ${shouldBeFullWidth ? 'col-span-2' : ''}
+      `, children: [_jsx("dt", { className: "\n        text-[11px] font-medium uppercase tracking-wider\n        text-gray-400\n        mb-1\n        transition-colors duration-150\n        group-hover/field:text-gray-500\n        dark:text-gray-500\n        dark:group-hover/field:text-gray-400\n      ", children: label }), _jsx("dd", { className: "\n        text-[13px] font-medium leading-relaxed\n        text-gray-700 dark:text-gray-200\n        min-h-[20px]\n      ", children: isLoading ? (_jsx("span", { className: "\n            inline-block h-5 w-24\n            animate-pulse rounded-md\n            bg-gradient-to-r from-gray-100 via-gray-50 to-gray-100\n            dark:from-gray-800 dark:via-gray-700 dark:to-gray-800\n            bg-[length:200%_100%]\n          " })) : (_jsx("span", { className: `
+            ${shouldBeFullWidth ? 'whitespace-pre-wrap break-words' : 'line-clamp-2'}
+          `, children: renderedValue })) })] }));
+};
+export default CardFieldRenderer;

package/dist/listgrid/components/list/ui/CardFieldSection.d.ts

@@ -0,0 +1,27 @@
+import React from 'react';
+import { EntityForm } from '../../../config/EntityForm';
+import { EntityField } from '../../../config/EntityField';
+import { EntityFieldGroup } from '../../../config/EntityFieldGroup';
+import { Session } from '../../../auth/types';
+/**
+ * CardFieldSection - Renders a FieldGroup as an independent card
+ * Each FieldGroup is visually separated with its own container
+ * Follows ViewFieldGroup logic for:
+ * - Collapsable support
+ * - Description with help icon
+ * - Session-aware visibility
+ */
+export interface CardFieldSectionProps {
+    /** EntityFieldGroup to render */
+    fieldGroup: EntityFieldGroup;
+    /** Fields within this group */
+    fields: EntityField[];
+    /** Item data */
+    item: any;
+    /** EntityForm instance (with id set for proper visibility) */
+    entityForm: EntityForm;
+    /** Session for permission/visibility checks */
+    session?: Session;
+}
+export declare const CardFieldSection: React.FC<CardFieldSectionProps>;
+export default CardFieldSection;

package/dist/listgrid/components/list/ui/CardFieldSection.js

@@ -0,0 +1,108 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState, useMemo } from 'react';
+import { FormField } from '../../fields/abstract';
+import { IconChevronUp, IconInfoCircle, IconHelp } from '@tabler/icons-react';
+import { Tooltip } from '../../../ui';
+import { Icon } from '@iconify/react';
+import { isBlank } from '../../../utils/StringUtil';
+const CardFieldRow = ({ field, item, entityForm, session }) => {
+    const [renderedValue, setRenderedValue] = useState(null);
+    const [isLoading, setIsLoading] = useState(true);
+    const [required, setRequired] = useState(false);
+    const [tooltip, setTooltip] = useState('');
+    const [helpText, setHelpText] = useState('');
+    const label = useMemo(() => {
+        const fieldLabel = field.getLabel();
+        return typeof fieldLabel === 'string' ? fieldLabel : field.getName();
+    }, [field]);
+    // Load field properties (required, tooltip, helpText) following FieldRenderer pattern
+    useEffect(() => {
+        let isMounted = true;
+        const loadFieldProperties = async () => {
+            try {
+                // Get required status
+                const isRequired = await field.isRequired({ entityForm, session });
+                if (isMounted)
+                    setRequired(isRequired);
+                // Get tooltip
+                const tooltipValue = await field.getTooltip({ entityForm, session });
+                if (isMounted)
+                    setTooltip(tooltipValue);
+                // Get helpText
+                const helpTextValue = await field.getHelpText({ entityForm, session });
+                if (isMounted)
+                    setHelpText(helpTextValue);
+            }
+            catch (error) {
+                console.error('Error loading field properties:', error);
+            }
+        };
+        loadFieldProperties();
+        return () => {
+            isMounted = false;
+        };
+    }, [field, entityForm, session]);
+    // Render field value
+    useEffect(() => {
+        let isMounted = true;
+        const renderValue = async () => {
+            try {
+                // Pass compact: true to skip icons in card context
+                const result = await field.viewValue({ item, entityForm, compact: true });
+                if (isMounted) {
+                    // Keep the result as-is; show placeholder for empty values
+                    if (result.result === null ||
+                        result.result === '—' ||
+                        result.result === '-' ||
+                        result.result === '') {
+                        setRenderedValue('—'); // Show placeholder for empty values
+                    }
+                    else {
+                        setRenderedValue(result.result);
+                    }
+                    setIsLoading(false);
+                }
+            }
+            catch (error) {
+                if (isMounted) {
+                    setRenderedValue('—'); // Show placeholder on error
+                    setIsLoading(false);
+                }
+            }
+        };
+        renderValue();
+        return () => {
+            isMounted = false;
+        };
+    }, [field, item, entityForm]);
+    const showTooltip = !isBlank(tooltip);
+    const showHelpText = !isBlank(helpText);
+    return (_jsxs("div", { className: "rcm-card-field-row", children: [_jsxs("dt", { className: "rcm-card-field-label", children: [_jsx("span", { children: label }), required && (_jsx(Tooltip, { label: "\uD544\uC218\uAC12", color: "red", withArrow: true, children: _jsx(Icon, { icon: "healthicons:star-small", className: "rcm-field-icon rcm-field-icon-required" }) })), showTooltip && (_jsx(Tooltip, { label: tooltip, color: "gray", withArrow: true, position: "top-end", children: _jsx(IconHelp, { className: "rcm-card-field-help-icon" }) }))] }), _jsx("dd", { className: "rcm-card-field-value", children: isLoading ? (_jsx("span", { className: "rcm-card-field-loading" })) : (_jsxs("div", { className: "rcm-card-field-value-inner", children: [_jsx("div", { children: renderedValue }), showHelpText && _jsx("div", { className: "rcm-card-field-help-text", children: helpText })] })) })] }));
+};
+export const CardFieldSection = ({ fieldGroup, fields, item, entityForm, session, }) => {
+    // Collapsable state (following ViewFieldGroup pattern)
+    const [isOpen, setIsOpen] = useState(() => fieldGroup.config?.open ?? true);
+    // Filter to only FormFields (visibility is already determined by EntityForm.getVisibleFields())
+    // Do NOT filter by value - EntityForm's visibility settings should be respected
+    const visibleFields = useMemo(() => {
+        return fields.filter((field) => {
+            return field instanceof FormField;
+        });
+    }, [fields]);
+    // Don't render empty sections
+    if (visibleFields.length === 0) {
+        return null;
+    }
+    // Check if this is a labeled group (has a non-empty label)
+    const hasLabel = fieldGroup.label && fieldGroup.label.trim() !== '';
+    // Check if group has description for help icon
+    const hasDescription = !isBlank(fieldGroup.description);
+    // Toggle collapse state
+    const handleToggle = (e) => {
+        e.stopPropagation();
+        setIsOpen(!isOpen);
+    };
+    return (_jsxs("div", { className: "rcm-card-section", children: [hasLabel && (_jsx("div", { className: "rcm-card-section-header", onClick: handleToggle, children: _jsxs("div", { className: "rcm-card-section-header-row", children: [_jsx("h4", { className: "rcm-card-section-title", children: fieldGroup.label }), _jsxs("div", { className: "rcm-card-section-header-actions", children: [hasDescription && (_jsx(Tooltip, { label: fieldGroup.description, color: "gray", withArrow: true, position: "top-end", children: _jsx(IconInfoCircle, { className: "rcm-card-section-help-icon" }) })), _jsx("button", { type: "button", className: "rcm-card-section-toggle", "aria-label": isOpen ? 'Collapse' : 'Expand', children: _jsx(IconChevronUp, { className: `rcm-card-section-chevron ${isOpen ? '' : 'rcm-rotate-180'}` }) })] })] }) })), isOpen && (_jsx("dl", { className: "rcm-card-section-body", children: visibleFields.map((field) => (_jsx(CardFieldRow, { field: field, item: item, entityForm: entityForm, ...(session !== undefined ? { session } : {}) }, field.getName()))) }))] }));
+};
+export default CardFieldSection;

package/dist/listgrid/components/list/ui/CardItem.d.ts

@@ -0,0 +1,28 @@
+import React from 'react';
+import { EntityForm } from '../../../config/EntityForm';
+import { CardSubCollectionRelation, CardConfig } from '../../../config/CardSubCollectionField';
+import { Session } from '../../../auth/types';
+export interface CardItemProps {
+    item: any;
+    entityForm: EntityForm;
+    parentEntityForm: EntityForm;
+    parentId: string;
+    cardConfig?: CardConfig;
+    relation: CardSubCollectionRelation;
+    readonly?: boolean;
+    session?: Session;
+    onClick?: () => void;
+    onEdit?: () => void;
+    onDelete?: () => void;
+}
+/**
+ * CardItem - Tremor-inspired Card Design with Tab → FieldGroup → Field hierarchy
+ *
+ * IMPORTANT: This component follows ViewEntityForm's logic exactly:
+ * 1. Clone entityForm and set item.id so getRenderType() returns 'update'
+ * 2. Use setFetchedValues() to populate all field values from item
+ * 3. Use getViewableTabs(), getViewableFieldGroups(), getVisibleFields() for visibility
+ * 4. All field settings (hidden, readonly, helpText, tooltip) are respected
+ */
+export declare const CardItem: React.FC<CardItemProps>;
+export default CardItem;