@rchemist/listgrid 0.2.6

package/dist/listgrid/components/form/hooks/useEntityFormTitle.js

@@ -0,0 +1,53 @@
+import { defaultString, isBlank } from '../../../utils/StringUtil';
+import { getTranslation } from '../../../utils/i18n';
+/**
+ * EntityForm의 타이틀을 동적으로 계산해 반환하는 커스텀 훅
+ * @param entityForm - 기준 EntityForm
+ * @param customTitle - 커스텀 타이틀(옵션)
+ * @returns (form?: EntityForm) => Promise<ReactNode>
+ */
+export const useEntityFormTitle = ({ entityForm, customTitle, }) => {
+    const { t } = getTranslation();
+    return async (form) => {
+        const f = form ?? entityForm;
+        if (f.title?.view) {
+            return await f.title.view(f);
+        }
+        let title = await f?.getTitle(defaultString(customTitle));
+        if (isBlank(title)) {
+            title = f.id === undefined ? '신규 입력' : '정보 조회';
+        }
+        if (f.title?.field) {
+            if (f.title.field.includes('.')) {
+                // manyToOne 필드의 값을 가져온 후 . 다음의 필드값을 가져온다.
+                const [fieldName, subFieldName] = f.title.field.split('.');
+                const fieldValue = await f.getValue(fieldName);
+                if (fieldValue) {
+                    const nameValue = fieldValue[subFieldName];
+                    if (nameValue) {
+                        title = t(title) + ' > ' + nameValue;
+                    }
+                }
+            }
+            else {
+                const nameValue = await f.getValue(f.title.field);
+                if (nameValue) {
+                    title = t(title) + ' > ' + nameValue;
+                }
+            }
+        }
+        else {
+            const nameValue = await f.getValue('name');
+            if (nameValue) {
+                title = t(title) + ' > ' + nameValue;
+            }
+            else if (f.id) {
+                title = t(title) + ' > ' + f.id;
+            }
+            else {
+                title = t(title);
+            }
+        }
+        return title;
+    };
+};

package/dist/listgrid/components/form/themes/defaultTheme.d.ts

@@ -0,0 +1,11 @@
+import { ViewEntityFormClassNames } from '../types/ViewEntityFormTheme.types';
+/**
+ * ViewEntityForm 기본 테마 — 중립(neutral) 버전.
+ *
+ * 라이브러리가 제공하는 기본 스타일은 `@rchemist/listgrid/styles.css`의
+ * `rcm-*` scoped 클래스로만 구성됩니다. 호스트의 Tailwind/shadcn/HeroUI
+ * 설정과 무관하게 동작하며, 스타일 커스터마이즈는 CSS 변수 override,
+ * `@layer rcm-listgrid` 밖 CSS, `<ViewEntityForm classNames={{...}}>` prop,
+ * 혹은 `EntityFormThemeProvider`를 통한 전체 테마 주입으로 가능.
+ */
+export declare const defaultEntityFormTheme: ViewEntityFormClassNames;

package/dist/listgrid/components/form/themes/defaultTheme.js

@@ -0,0 +1,129 @@
+/**
+ * ViewEntityForm 기본 테마 — 중립(neutral) 버전.
+ *
+ * 라이브러리가 제공하는 기본 스타일은 `@rchemist/listgrid/styles.css`의
+ * `rcm-*` scoped 클래스로만 구성됩니다. 호스트의 Tailwind/shadcn/HeroUI
+ * 설정과 무관하게 동작하며, 스타일 커스터마이즈는 CSS 변수 override,
+ * `@layer rcm-listgrid` 밖 CSS, `<ViewEntityForm classNames={{...}}>` prop,
+ * 혹은 `EntityFormThemeProvider`를 통한 전체 테마 주입으로 가능.
+ */
+export const defaultEntityFormTheme = {
+    root: '',
+    loading: {
+        container: 'rcm-loading-overlay',
+        skeleton: 'rcm-skeleton',
+    },
+    header: {
+        container: '',
+        desktop: 'rcm-listgrid-header',
+        mobile: '',
+        titleWrapper: 'rcm-listgrid-title-container',
+        buttonWrapper: '',
+    },
+    title: {
+        container: 'rcm-listgrid-title',
+        text: 'rcm-listgrid-title',
+    },
+    buttons: {
+        container: '',
+        innerWrapper: '',
+        save: 'rcm-button',
+        list: 'rcm-button',
+        delete: 'rcm-button',
+        close: 'rcm-button',
+        custom: 'rcm-button',
+    },
+    alerts: {
+        singleContainer: 'rcm-skeleton-row',
+        multiContainer: 'rcm-skeleton-row',
+        header: 'rcm-row-between rcm-panel rcm-cursor-pointer',
+        headerExpanded: '',
+        headerCollapsed: '',
+        listContainer: 'rcm-panel',
+        listExpanded: '',
+        listCollapsed: '',
+        listContent: 'rcm-stack',
+    },
+    alertItem: {
+        container: 'rcm-notice rcm-row-between',
+        icon: '',
+        contentWrapper: 'rcm-row',
+        message: 'rcm-text-emphasis',
+        description: 'rcm-text-sm rcm-text-muted',
+        closeButton: 'rcm-cursor-pointer',
+        colorVariants: {
+            success: 'rcm-notice',
+            danger: 'rcm-notice rcm-notice-error',
+            warning: 'rcm-notice rcm-notice-warning',
+            info: 'rcm-notice rcm-notice-info',
+            primary: 'rcm-notice',
+            secondary: 'rcm-notice',
+            dark: 'rcm-notice',
+        },
+    },
+    errors: {
+        container: '',
+        header: 'rcm-row-between rcm-notice rcm-notice-error rcm-cursor-pointer',
+        headerExpanded: '',
+        headerCollapsed: '',
+        headerIcon: '',
+        headerTitle: 'rcm-text-emphasis',
+        headerBadge: 'rcm-text-sm',
+        content: 'rcm-stack',
+        item: 'rcm-notice rcm-notice-error',
+        tabName: 'rcm-cursor-pointer rcm-text-emphasis',
+        fieldErrors: 'rcm-stack',
+        fieldErrorButton: 'rcm-row rcm-cursor-pointer',
+    },
+    tabs: {
+        list: '',
+        tab: '',
+        tabSelected: '',
+        tabDisabled: '',
+    },
+    tabPanel: {
+        panel: '',
+        empty: 'rcm-text-muted',
+        content: '',
+    },
+    panel: {
+        scrollContainer: '',
+        layoutWrapper: '',
+        container: '',
+        inner: '',
+    },
+    fieldGroup: {
+        container: '',
+        header: '',
+        title: '',
+        actions: 'rcm-row',
+        collapseToggle: 'rcm-cursor-pointer rcm-text-muted',
+        content: '',
+    },
+    field: {
+        container: 'rcm-field-root',
+        labelWrapper: '',
+        label: '',
+        requiredIcon: '',
+        dirtyIcon: '',
+        tooltipIcon: 'rcm-text-muted',
+        valueContainer: '',
+    },
+    fieldError: {
+        message: 'rcm-field-error',
+    },
+    helpText: {
+        text: 'rcm-field-description',
+    },
+    createStep: {
+        container: 'rcm-stack',
+        panel: 'rcm-panel',
+        stepperWrapper: 'rcm-skeleton-row',
+        stepLabel: 'rcm-heading-sm',
+        buttonGroup: 'rcm-row',
+        prevButton: 'rcm-button',
+        nextButton: 'rcm-button',
+        saveButton: 'rcm-button',
+        toggleButton: 'rcm-button',
+    },
+};

package/dist/listgrid/components/form/themes/index.d.ts

@@ -0,0 +1 @@
+export { defaultEntityFormTheme } from './defaultTheme';

package/dist/listgrid/components/form/themes/index.js

@@ -0,0 +1 @@
+export { defaultEntityFormTheme } from './defaultTheme';

package/dist/listgrid/components/form/types/ViewEntityForm.types.d.ts

@@ -0,0 +1,169 @@
+import { EntityForm } from '../../../config/EntityForm';
+import { EntityFormButton } from '../../../config/EntityFormButton';
+import { EntityButtonLinkProps } from '../../../config/Config';
+import { Session } from '../../../auth/types';
+import { Dispatch, ReactNode, SetStateAction } from 'react';
+import { ApiSpecification } from '../../api/Type';
+/**
+ * Props for ViewEntityForm component.
+ * ViewEntityForm 컴포넌트에 전달되는 모든 속성 정의
+ */
+export interface ViewEntityFormProps {
+    /**
+     * EntityForm instance to be managed and rendered.
+     * 관리 및 렌더링할 EntityForm 인스턴스
+     */
+    entityForm: EntityForm;
+    /**
+     * Custom buttons to be added to the form.
+     * 폼에 추가할 커스텀 버튼 배열
+     */
+    buttons?: EntityFormButton[];
+    /**
+     * Types of buttons to exclude (e.g., 'save', 'list', 'delete').
+     * 제외할 버튼 타입 (예: 'save', 'list', 'delete')
+     */
+    excludeButtons?: string[];
+    /**
+     * Custom title for the form.
+     * 폼의 커스텀 제목
+     */
+    title?: string;
+    /**
+     * Whether to hide the title area.
+     * 제목 영역 숨김 여부
+     */
+    hideTitle?: boolean;
+    /**
+     * Callback after saving the entity form.
+     * 저장 후 호출되는 콜백 (비동기)
+     */
+    postSave?: (entityForm: EntityForm) => Promise<EntityForm>;
+    /**
+     * Callback after deleting the entity form.
+     * 삭제 후 호출되는 콜백 (비동기)
+     */
+    postDelete?: (entityForm: EntityForm) => Promise<void>;
+    /**
+     * Button link handlers for navigation.
+     * 버튼 클릭 시 라우팅 등 링크 핸들러
+     */
+    buttonLinks?: EntityButtonLinkProps;
+    /**
+     * Whether this is a sub-collection entity form (e.g., modal).
+     * 서브 콜렉션(모달 등) 여부
+     */
+    subCollection?: boolean;
+    /**
+     * Readonly mode flag.
+     * 읽기 전용 모드 여부
+     */
+    readonly?: boolean;
+    /**
+     * API specification or custom ReactNode for API docs.
+     * API 명세 또는 커스텀 ReactNode
+     */
+    apiSpec?: ApiSpecification | ReactNode;
+    /**
+     * Session info (optional, overrides default session).
+     * 세션 정보 (선택, 기본 세션을 덮어씀)
+     */
+    session?: Session;
+    /**
+     * Callback after initializing the entity form.
+     * EntityForm 초기화 후 호출되는 콜백 (비동기)
+     */
+    onInitialize?: (entityForm: EntityForm) => Promise<EntityForm>;
+    /**
+     * Callback after the component is fully rendered and loaded.
+     * 컴포넌트가 완전히 렌더링되고 로드된 후 호출되는 콜백 (비동기)
+     */
+    onLoad?: (entityForm: EntityForm) => Promise<void>;
+    /**
+     * Popup mode flag for new window display.
+     * 새창(팝업) 모드 여부 - true일 때 목록 버튼 대신 닫기 버튼 표시
+     */
+    popupMode?: boolean;
+    /**
+     * Position of the action buttons.
+     * 버튼 위치 설정
+     * - 'header': 상단 헤더 영역 (기본값)
+     * - 'bottom': 폼 하단 영역
+     */
+    buttonPosition?: 'header' | 'bottom';
+    /**
+     * Enable auto-save to sessionStorage.
+     * sessionStorage 자동 저장 활성화 (새로고침 시 입력값 유지)
+     * - true: 자동 저장 활성화
+     * - false: 자동 저장 비활성화 (기본값)
+     */
+    autoSave?: boolean;
+    /**
+     * Custom key for auto-save storage.
+     * 자동 저장 스토리지 키 (동일 엔티티 다른 컨텍스트 구분용)
+     * - 미지정 시: entityName + id 조합으로 자동 생성
+     * - 지정 시: entityName + id + autoSaveKey 조합
+     */
+    autoSaveKey?: string;
+    /**
+     * Inline mode flag for SubCollection inline expansion.
+     * SubCollection 인라인 확장 모드 여부
+     * - true: 패널 배경/테두리 없이 인라인으로 표시
+     * - false: 일반 패널 스타일 적용 (기본값)
+     */
+    inlineMode?: boolean;
+    /**
+     * MappedBy field name to hide related fields in SubCollection.
+     * SubCollection에서 부모 참조 필드 자동 숨김을 위한 mappedBy 필드명
+     * - 예: 'studentId' 지정 시 'studentId', 'student', 'student.name' 등 자동 숨김
+     * - 빈 문자열이나 undefined일 경우 모든 필드 표시
+     */
+    hideMappedByFields?: string;
+    /**
+     * Hide all buttons including custom buttons.
+     * 모든 버튼 숨김 (커스텀 버튼 포함)
+     * - true: 모든 버튼 숨김 (리비전 모드 등에서 사용)
+     * - false: 버튼 정상 표시 (기본값)
+     */
+    hideAllButtons?: boolean;
+}
+/**
+ * TabIndexable interface for tab navigation.
+ * 탭 인덱스 및 setter를 위한 인터페이스
+ */
+export interface TabIndexable {
+    /**
+     * Current tab index.
+     * 현재 탭 인덱스
+     */
+    tabIndex: string;
+    /**
+     * Setter for tab index (optional).
+     * 탭 인덱스 setter (선택)
+     */
+    setTabIndex?: (tabIndex: string) => void;
+}
+/**
+ * EntityFormManageable interface for entity form state management.
+ * EntityForm 상태 관리용 인터페이스
+ */
+export interface EntityFormManageable {
+    /**
+     * EntityForm instance.
+     * EntityForm 인스턴스
+     */
+    entityForm: EntityForm;
+    /**
+     * Setter for EntityForm state (optional).
+     * EntityForm 상태 setter (선택)
+     */
+    setEntityForm?: Dispatch<SetStateAction<EntityForm | undefined>>;
+}
+export interface TabIndexable {
+    tabIndex: string;
+    setTabIndex?: (tabIndex: string) => void;
+}
+export interface EntityFormManageable {
+    entityForm: EntityForm;
+    setEntityForm?: React.Dispatch<React.SetStateAction<EntityForm | undefined>>;
+}

package/dist/listgrid/components/form/types/ViewEntityForm.types.js

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

package/dist/listgrid/components/form/types/ViewEntityFormAlerts.types.d.ts

@@ -0,0 +1,26 @@
+import { AlertMessage, AlertMessageLink } from '../../../config/EntityFormTypes';
+import { ComponentType, SVGProps } from 'react';
+export interface ViewEntityFormAlertsProps {
+    alertMessages: AlertMessage[];
+    onRemove?: (key: string) => void;
+    onTabChange?: (tabId: string) => void;
+    onFieldFocus?: (fieldName: string) => void;
+}
+export interface AlertStyles {
+    /** Icon component (e.g. Tabler icons) — accepts standard SVG/icon props. */
+    icon: ComponentType<SVGProps<SVGSVGElement> & {
+        size?: number | string;
+        stroke?: number;
+    }>;
+    /** Primitive class to apply on the alert root (`rcm-notice`). */
+    className: string;
+    /** Value for the `data-tone` attribute on the alert root, or undefined for neutral. */
+    dataTone?: 'info' | 'success' | 'warning' | 'error';
+}
+export interface AlertItemProps {
+    alert: AlertMessage;
+    onLinkClick: (link: AlertMessageLink) => void;
+    onClose: (key: string) => void;
+    t: (key: string) => string;
+}
+export type AlertColor = 'success' | 'danger' | 'warning' | 'info' | 'secondary' | 'primary' | 'dark';

package/dist/listgrid/components/form/types/ViewEntityFormAlerts.types.js

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

package/dist/listgrid/components/form/types/ViewEntityFormButtons.types.d.ts

@@ -0,0 +1,49 @@
+import { EntityForm } from '../../../config/EntityForm';
+import { EntityFormManageable } from './ViewEntityForm.types';
+import { EntityButtonLinkProps } from '../../../config/Config';
+import { Session } from '../../../auth/types';
+import { EntityFormButton } from '../../../config/EntityFormButton';
+import { ModalOptions } from '../../../store';
+import { RouterApi } from '../../../router';
+import { ViewEntityFormClassNames } from './ViewEntityFormTheme.types';
+export interface ButtonProps extends AbstractButtonProps {
+}
+export interface AbstractButtonProps extends EntityFormManageable {
+    postSave?: (entityForm: EntityForm) => Promise<EntityForm | void>;
+    postDelete?: (entityForm: EntityForm) => Promise<EntityForm | void>;
+    pathname: string;
+    router: RouterApi;
+    buttonLinks?: EntityButtonLinkProps;
+    setErrors: (errors: string[]) => void;
+    setNotifications: (notifications: string[]) => void;
+    subCollection?: boolean;
+    onRefresh?: () => void;
+    openBaseLoading?: (open: boolean) => void;
+    session?: Session;
+    readonly?: boolean;
+    /**
+     * 새창(팝업) 모드 여부
+     * - true일 때 목록 버튼 대신 닫기 버튼 표시
+     * - 삭제 후 창 닫기 및 원본 창 새로고침 처리
+     */
+    popupMode?: boolean;
+    /** 버튼 커스텀 클래스 (테마 시스템에서 전달) */
+    buttonClassNames?: ViewEntityFormClassNames['buttons'];
+}
+export interface ViewEntityFormButtonsProps extends AbstractButtonProps {
+    buttons?: EntityFormButton[];
+    excludeButtons?: string[];
+    readonly: boolean;
+    useCreateStep?: boolean;
+    currentStep?: number;
+    maxStep?: number;
+    createStepFields?: string[];
+    showModal?: (options: ModalOptions) => string;
+    closeModal?: (id: string) => Promise<void>;
+    closeTopModal?: () => Promise<void>;
+    /** returns host-supplied data attached to the modal via ModalOptions.data */
+    getModalData?: (id: string) => unknown;
+    updateModalData?: (id: string, data: Partial<ModalOptions>) => void;
+    /** 버튼 커스텀 클래스 (테마 시스템에서 전달) */
+    buttonClassNames?: ViewEntityFormClassNames['buttons'];
+}

package/dist/listgrid/components/form/types/ViewEntityFormButtons.types.js

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