@dovetail-v2/refine 0.1.31 → 0.2.0-alpha.0

package/dist/style.css

@@ -3402,8 +3402,7 @@
   padding: 11px;
   border-bottom: 1px solid rgba(211, 218, 235, 0.6);
   background: rgba(225, 230, 241, 0.6);
-  border-top-left-radius: 8px;
-  border-top-right-radius: 8px;
+  border-radius: 8px;
 }
 .t1joof7s.collapsed {
   border-bottom: 0;
@@ -4231,14 +4230,6 @@
 }
 
 .c1c9j4da {
-  width: 100%;
-}
-
-.cjxv8cf {
-  color: rgba(44, 56, 82, 0.6);
-}
-
-.c1xsnuvk {
   flex-basis: 58%;
   width: 100%;
   margin: 0 auto;

package/lib/components/ErrorContent/index.d.ts

@@ -9,7 +9,7 @@ export declare enum ErrorContentType {
 export type WidgetErrorContentProps = {
     className?: string;
     style?: React.CSSProperties;
-    errorText?: string;
+    errorText?: React.ReactNode;
     type?: ErrorContentType;
     refetch?: () => void;
 };

package/lib/components/Form/FormModal.d.ts

@@ -1,12 +1,20 @@
 import React from 'react';
 import { YamlFormProps } from './YamlForm';
+export type SaveButtonProps = {
+    disabled: boolean;
+    onClick: (e: React.BaseSyntheticEvent) => void;
+} | {
+    loading?: boolean | {
+        delay?: number | undefined;
+    } | undefined;
+    onClick?: (() => void) | undefined;
+};
 export interface ConfirmModalProps {
     onOk?: () => void;
 }
 export type FormModalProps = {
     resource?: string;
     id?: string;
-    formProps?: YamlFormProps;
-    renderForm?: (props: YamlFormProps) => React.ReactNode;
+    yamlFormProps?: YamlFormProps;
 };
 export declare function FormModal(props: FormModalProps): JSX.Element;

package/lib/components/Form/FormModeSegmentControl.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { CommonFormConfig, RefineFormConfig, FormMode } from 'src/types';
+interface FormModeSegmentControlProps {
+    formConfig: CommonFormConfig & RefineFormConfig;
+    mode: FormMode;
+    onChangeMode: (mode: FormMode) => void;
+}
+declare function FormModeSegmentControl({ formConfig, mode, onChangeMode, }: FormModeSegmentControlProps): JSX.Element | null;
+export default FormModeSegmentControl;

package/lib/components/Form/RefineFormContainer.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+import { type SaveButtonProps } from 'src/components/Form/FormModal';
+import { ResourceConfig } from 'src/types';
+import { CommonFormConfig, RefineFormConfig } from 'src/types';
+import { YamlFormProps } from './YamlForm';
+interface RefineFormContainerProps {
+    id: string;
+    isYamlMode: boolean;
+    config: ResourceConfig;
+    formConfig: (RefineFormConfig & CommonFormConfig) | undefined;
+    customYamlFormProps?: YamlFormProps;
+    onSaveButtonPropsChange?: (props: SaveButtonProps) => void;
+    onError?: () => void;
+    onSuccess?: () => void;
+}
+declare function RefineFormContainer({ id, config, customYamlFormProps, formConfig, isYamlMode, onSuccess, onError, onSaveButtonPropsChange, }: RefineFormContainerProps): JSX.Element;
+export default RefineFormContainer;

package/lib/components/Form/RefineFormContent.d.ts

@@ -1,12 +1,15 @@
 /// <reference types="react" />
 import { UseFormReturnType } from '@refinedev/react-hook-form';
+import { RefineFormFieldRenderProps } from 'src/components/Form/type';
 import { ResourceModel } from 'src/models';
-import { ResourceConfig } from 'src/types';
+import { CommonFormConfig, RefineFormConfig, ResourceConfig } from 'src/types';
 type Props<Model extends ResourceModel> = {
     config?: ResourceConfig<Model>;
+    formConfig?: CommonFormConfig & RefineFormConfig;
     formResult: UseFormReturnType;
     errorMsgs?: string[];
     resourceId?: string;
 };
+export declare function renderCommonFormFiled(props: RefineFormFieldRenderProps): JSX.Element;
 export declare const RefineFormContent: <Model extends ResourceModel<import("k8s-api-provider").Unstructured>>(props: Props<Model>) => JSX.Element;
 export {};

package/lib/components/Form/YamlForm.d.ts

@@ -1,6 +1,8 @@
 /// <reference types="react" />
 import { FormAction } from '@refinedev/core';
 import { Unstructured } from 'k8s-api-provider';
+import { ResourceModel } from 'src/models';
+import { ResourceConfig } from 'src/types';
 import useYamlForm from './useYamlForm';
 import { YamlFormRule } from './useYamlForm';
 export declare enum SchemaStrategy {
@@ -8,9 +10,10 @@ export declare enum SchemaStrategy {
     Optional = "Optional",
     None = "None"
 }
-export interface YamlFormProps {
+export interface YamlFormProps<Model extends ResourceModel = ResourceModel> {
     id?: string;
     action?: FormAction;
+    config: ResourceConfig<Model>;
     initialValuesForCreate?: Record<string, unknown>;
     initialValuesForEdit?: Record<string, unknown>;
     schemaStrategy?: SchemaStrategy;
@@ -29,4 +32,4 @@ export interface YamlFormProps {
     onErrorsChange?: (errors: string[]) => void;
     onFinish?: () => void;
 }
-export declare function YamlForm(props: YamlFormProps): JSX.Element;
+export declare function YamlForm<Model extends ResourceModel = ResourceModel>(props: YamlFormProps<Model>): JSX.Element;

package/lib/components/Form/YamlFormContainer.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+import { type SaveButtonProps } from 'src/components/Form/FormModal';
+import { ResourceConfig } from 'src/types';
+import { CommonFormConfig } from 'src/types';
+import { YamlFormConfig } from 'src/types';
+import { YamlFormProps } from './YamlForm';
+interface YamlFormContainerProps {
+    id: string;
+    config: ResourceConfig;
+    customYamlFormProps?: YamlFormProps;
+    formConfig?: YamlFormConfig & CommonFormConfig;
+    onSuccess?: () => void;
+    onError?: () => void;
+    onSaveButtonPropsChange?: (props: SaveButtonProps) => void;
+}
+declare function YamlFormContainer({ id, customYamlFormProps, config, formConfig, onSuccess, onError, onSaveButtonPropsChange }: YamlFormContainerProps): JSX.Element;
+export default YamlFormContainer;

package/lib/components/Form/type.d.ts

@@ -1,9 +1,17 @@
 import React from 'react';
-import { Control } from 'react-hook-form';
-export type RefineFormValidator = (value: unknown, formValue: unknown) => {
+import { Control, UseFormTrigger, FieldValues, ControllerRenderProps } from 'react-hook-form';
+import { FormType } from 'src/types/resource';
+export type RefineFormValidator = (value: unknown, formValue: unknown, formMode: FormType) => {
     isValid: boolean;
     errorMsg: string;
 };
+export type RefineFormFieldRenderProps = {
+    field: ControllerRenderProps<FieldValues, string>;
+    fieldConfig: RefineFormField;
+    action: 'edit' | 'create';
+    control: Control;
+    trigger: UseFormTrigger<FieldValues>;
+};
 export type RefineFormField = {
     path: string[];
     key: string;
@@ -13,5 +21,11 @@ export type RefineFormField = {
     type?: 'number';
     validators?: RefineFormValidator[];
     disabledWhenEdit?: boolean;
-    render?: (value: unknown, onChange: (event: unknown) => void, formValue: unknown, onBlur: () => void, action: 'edit' | 'create', control: Control) => React.ReactElement;
+    render?: (props: RefineFormFieldRenderProps) => React.ReactElement;
+    /**
+     * 表单项条件渲染函数
+     * @param formValue 表单值
+     * @returns 是否渲染
+     */
+    condition?: (formValue: Record<string, unknown>, value: unknown) => boolean;
 };

package/lib/components/Form/useFieldsConfig.d.ts

@@ -1,4 +1,4 @@
 import { ResourceModel } from 'src/models';
-import { ResourceConfig } from 'src/types';
-declare function useFieldsConfig<Model extends ResourceModel>(config?: ResourceConfig<Model>, resourceId?: string): import("./type").RefineFormField[] | undefined;
+import { CommonFormConfig, RefineFormConfig, ResourceConfig } from 'src/types';
+declare function useFieldsConfig<Model extends ResourceModel>(config?: ResourceConfig<Model>, formConfig?: CommonFormConfig & RefineFormConfig, resourceId?: string): import("./type").RefineFormField[] | undefined;
 export default useFieldsConfig;

package/lib/components/Form/useRefineForm.d.ts

@@ -1,8 +1,9 @@
-import { ResourceConfig } from '../../types';
+import { CommonFormConfig, RefineFormConfig, ResourceConfig } from '../../types';
 import { UseFormProps } from './useReactHookForm';
 export declare const useRefineForm: (props: {
-    config: ResourceConfig;
+    formConfig?: RefineFormConfig & CommonFormConfig;
     id?: string;
+    config: ResourceConfig;
     refineProps?: UseFormProps['refineCoreProps'];
     useFormProps?: UseFormProps;
 }) => {

package/lib/components/InternalBaseTable/index.d.ts

@@ -1,6 +1,6 @@
 import { TableProps as BaseTableProps, RequiredColumnProps } from '@cloudtower/eagle';
 import React from 'react';
-import { FormType } from 'src/types';
+import { FormContainerType } from 'src/types';
 export type IDObject = {
     id: string;
 };
@@ -32,7 +32,7 @@ export type InternalTableProps<Data extends {
     onSorterChange?: (order: SorterOrder | null, key?: string) => void;
     RowMenu?: React.FC<{
         record: Data;
-        formType?: FormType;
+        formType?: FormContainerType;
     }>;
     empty?: string;
     showMenuColumn?: boolean;

package/lib/hooks/useOpenForm.d.ts

@@ -1,8 +1,5 @@
-/// <reference types="react" />
-import { YamlFormProps } from '../components';
 interface UseOpenFormOptions {
     id?: string;
-    renderForm?: (props: YamlFormProps) => React.ReactNode;
 }
 export declare function useOpenForm(options?: UseOpenFormOptions): () => void;
 export {};

package/lib/hooks/usePathMap.d.ts

@@ -0,0 +1,26 @@
+/**
+ * Utility hook for transforming data structures by mapping paths between different object structures.
+ * Useful for converting between form values and API data structures.
+ */
+import { Unstructured } from 'k8s-api-provider';
+interface UsePathMapOptions {
+    /** Array of path mappings, each containing source path and target path arrays */
+    pathMap?: {
+        from: string[];
+        to: string[];
+    }[];
+    /** Optional function to transform initial values after path mapping */
+    transformInitValues?: (values: Record<string, unknown>) => Record<string, unknown>;
+    /** Optional function to transform values before applying/saving */
+    transformApplyValues?: (values: Record<string, unknown>) => Unstructured;
+}
+/**
+ * Hook that provides functions to transform data between different object structures using path mappings
+ * @param options Configuration options including path mappings and transform functions
+ * @returns Object containing transformation functions for init and apply operations
+ */
+declare function usePathMap(options: UsePathMapOptions): {
+    transformInitValues: (values: Record<string, unknown>) => Record<string, unknown>;
+    transformApplyValues: (values: Record<string, unknown>) => Unstructured;
+};
+export default usePathMap;

package/lib/pages/storageclasses/form/index.d.ts

@@ -1,9 +1,9 @@
-import { ResourceModel } from 'src/models';
+import { StorageClassModel } from 'src/models';
 import { ResourceConfig } from 'src/types';
 type GenerateStorageClassFormConfig = {
-    isEnabledZbs?: boolean;
-    isEnabledElf?: boolean;
+    isEnabledProvisionerA?: boolean;
+    isEnabledProvisionerB?: boolean;
     isVmKsc?: boolean;
 };
-export declare function generateStorageClassFormConfig(options: GenerateStorageClassFormConfig): ResourceConfig<ResourceModel>['formConfig'];
+export declare function generateStorageClassFormConfig(options: GenerateStorageClassFormConfig): ResourceConfig<StorageClassModel>['formConfig'];
 export {};

package/lib/pages/storageclasses/index.d.ts

@@ -1,53 +1,5 @@
-/// <reference types="react" />
 import { i18n as I18n } from 'i18next';
-import { RESOURCE_GROUP } from 'src/types';
-export declare const StorageClassConfig: (i18n: I18n) => {
-    name: string;
-    basePath: string;
-    kind: string;
-    parent: RESOURCE_GROUP;
-    label: string;
-    initValue: {
-        apiVersion: string;
-        kind: string;
-        metadata: {
-            name: string;
-        };
-        parameters: {
-            'csi.storage.k8s.io/fstype': string;
-        };
-        provisioner: string;
-        reclaimPolicy: string;
-        allowVolumeExpansion: boolean;
-        volumeBindingMode: string;
-    };
-    formConfig: {
-        fields?: ((props: {
-            record?: import("../..").ResourceModel<import("k8s-api-provider").Unstructured> | undefined;
-            records: import("../..").ResourceModel<import("k8s-api-provider").Unstructured>[];
-            action: "create" | "edit";
-        }) => import("../../components").RefineFormField[]) | undefined;
-        saveButtonText?: string | undefined;
-        renderForm?: ((props: import("../../components").YamlFormProps) => import("react").ReactNode) | undefined;
-        formType?: import("src/types").FormType | undefined;
-        transformInitValues?: ((values: Record<string, unknown>) => Record<string, unknown>) | undefined;
-        transformApplyValues?: ((values: Record<string, unknown>) => import("k8s-api-provider").Unstructured) | undefined;
-        formTitle?: string | ((action: "create" | "edit") => string) | undefined;
-        formDesc?: string | ((action: "create" | "edit") => string) | undefined;
-        labelWidth?: string | undefined;
-        formatError?: ((errorBody: unknown) => string) | undefined;
-        refineCoreProps?: import("@refinedev/core").UseFormProps<import("@refinedev/core").BaseRecord, import("@refinedev/core").HttpError, import("react-hook-form").FieldValues, import("@refinedev/core").BaseRecord, import("@refinedev/core").BaseRecord, import("@refinedev/core").HttpError> | undefined;
-        useFormProps?: import("@refinedev/react-hook-form").UseFormProps | undefined;
-        isDisabledChangeMode?: boolean | undefined;
-        CustomFormModal?: import("react").FC<import("../../components").FormModalProps> | undefined;
-    } | undefined;
-    columns: () => (import("../../components").Column<import("../..").ResourceModel<import("k8s-api-provider").Unstructured>> | import("../../components").Column<import("../..").StorageClassModel>)[];
-    showConfig: () => {
-        tabs: {
-            title: string;
-            key: string;
-            groups: import("../../components").ShowGroup<import("../..").StorageClassModel>[];
-        }[];
-    };
-};
+import { StorageClassModel } from 'src/models';
+import { ResourceConfig } from 'src/types';
+export declare const StorageClassConfig: (i18n: I18n) => ResourceConfig<StorageClassModel>;
 export * from './form';

package/lib/types/resource.d.ts

@@ -1,6 +1,5 @@
 /// <reference types="react" />
 import { UseFormProps } from '@refinedev/react-hook-form';
-import { YamlFormProps } from '../components';
 import { FormModalProps, RefineFormField } from '../components/Form';
 import { Column, InternalTableProps } from '../components/InternalBaseTable';
 import { ShowConfig } from '../components/ShowContent';
@@ -16,55 +15,182 @@ export declare enum RESOURCE_GROUP {
     NODE_MANAGEMENT = "NODE_MANAGEMENT",
     PROJECT = "PROJECT"
 }
-export declare enum FormType {
+/**
+ * 表单容器类型
+ */
+export declare enum FormContainerType {
     PAGE = "PAGE",
     MODAL = "MODAL"
 }
+/**
+ * 表单类型
+ */
+export declare enum FormType {
+    YAML = "YAML",
+    FORM = "FORM"
+}
+/**
+ * 允许切换的表单模式
+ */
+export declare enum FormMode {
+    FORM = "FORM",
+    YAML = "YAML"
+}
 export type WithId<T> = T & {
     id: string;
 };
+export type RefineFormConfig<Model extends ResourceModel = ResourceModel> = {
+    formType: FormType.FORM;
+    /**
+   * 表单字段配置函数
+   * @param props 包含记录和动作类型的配置对象
+   * @returns 表单字段配置数组
+   */
+    fields?: (props: {
+        record?: Model;
+        records: Model[];
+        action: 'create' | 'edit';
+    }) => RefineFormField[];
+    /** Refine Core 的表单属性 */
+    refineCoreProps?: UseFormProps['refineCoreProps'];
+    /** React Hook Form 的配置属性 */
+    useFormProps?: UseFormProps;
+    /** 是否禁用切换表单模式（在 YAML 和表单之间切换） */
+    isDisabledChangeMode?: boolean;
+    /** 表单标签的宽度
+     * 默认是 216px
+     */
+    labelWidth?: string;
+    /**
+   * 自定义表单渲染函数
+   * @returns React节点
+   */
+    renderForm?: () => React.ReactNode;
+};
+export type YamlFormConfig = {
+    formType: FormType.YAML;
+};
+export type ErrorBody = {
+    kind: string;
+    apiVersion: string;
+    metadata: object;
+    status: string;
+    message: string;
+    reason: string;
+    details: {
+        name: string;
+        group: string;
+        kind: string;
+        causes?: {
+            reason: string;
+            message: string;
+            field: string;
+        }[];
+    };
+    code: number;
+};
+export type CommonFormConfig<Model extends ResourceModel = ResourceModel> = {
+    /** 自定义表单模态框组件 */
+    CustomFormModal?: React.FC<FormModalProps>;
+    /**
+     * 初始值转换函数
+     * @param values 原始值
+     * @returns 转换后的值
+     */
+    transformInitValues?: (values: Record<string, unknown>) => Record<string, unknown>;
+    /**
+     * 提交值转换函数，转换为 YAML 格式
+     * @param values 表单值
+     * @returns YAML格式的数据
+     */
+    transformApplyValues?: (values: Record<string, unknown>) => Model['_rawYaml'];
+    /** 表单容器类型：页面形式或模态框形式
+     * PAGE 或者 MODAL
+    */
+    formContainerType?: FormContainerType;
+    /**
+     * 表单标题，可以是字符串或根据操作类型返回不同标题的函数
+     * @param action 操作类型：create 或 edit
+     */
+    formTitle?: string | ((action: 'create' | 'edit') => string);
+    /**
+     * 表单描述，可以是字符串或根据操作类型返回不同描述的函数
+     * @param action 操作类型：create 或 edit
+     */
+    formDesc?: string | ((action: 'create' | 'edit') => string);
+    /** 保存按钮文本 */
+    saveButtonText?: string;
+    /**
+     * 错误信息格式化函数，待完善
+     * @param errorBody 错误信息体
+     * @returns 格式化后的错误信息
+     */
+    formatError?: (errorBody: ErrorBody) => string;
+    /**
+     * 路径映射，用于在表单中映射路径
+     */
+    pathMap?: {
+        from: string[];
+        to: string[];
+    }[];
+};
 export type ResourceConfig<Model extends ResourceModel = ResourceModel> = {
+    /** 资源名称，用于 API 调用和路由。
+     * 默认复数形式，如：deployments
+     */
     name: string;
+    /** Kubernetes 资源类型
+     * 如：Deployment
+     */
     kind: string;
+    /** API 请求的基础路径
+     * 实际效果为：{apiUrl}{basePath}{apiVersion}{name}
+     */
     basePath: string;
+    /** Kubernetes API 版本，会影响请求 URL
+     * 实际效果为：{apiUrl}{basePath}{apiVersion}{name}
+    */
     apiVersion: string;
+    /** 资源在界面上显示的名称 */
     displayName?: string;
+    /** 是否隐藏列表页的工具栏。会连标题和描述一起去掉 */
     hideListToolBar?: boolean;
+    /** 是否隐藏命名空间过滤器 */
     hideNamespacesFilter?: boolean;
+    /** 是否隐藏编辑功能。会隐藏 Dropdown 和详情中的编辑按钮 */
     hideEdit?: boolean;
+    /** 是否隐藏创建功能 */
     hideCreate?: boolean;
+    /** 资源的描述信息 */
     description?: string;
+    /** 父级资源名称，用于建立资源层级关系。在 Dovetail2 中用不到这个 */
     parent?: string;
+    /** 格式化数据参数，目前暂未完全实现，可能会删除 */
     formatter?: (v: Model) => Model;
+    /** 创建资源时的初始值 */
     initValue?: Record<string, unknown>;
+    /** 定义资源列表的表格列配置 */
     columns?: () => Column<Model>[];
+    /** 是否禁用详情页面。禁用后，表格的名称将无法点击。仅对配置型表格有效。 */
     noShow?: boolean;
+    /** 详情页面的配置 */
     showConfig?: () => ShowConfig<Model>;
+    /** 自定义下拉菜单组件 */
     Dropdown?: React.FC<{
         record: Model;
     }>;
+    /** 表格组件的额外属性配置。会被传递给表格组件。仅对配置型表格有效。 */
     tableProps?: Partial<InternalTableProps<Model>>;
+    /** 是否为自定义资源。
+     * 开启后，Dovetail不会为该资源创建路由，也不会渲染默认的UI组件。
+     */
     isCustom?: boolean;
+    /** 创建按钮的文本 */
     createButtonText?: string;
+    /** 删除操作的提示文本
+     * 默认是：该操作无法被撤回。
+     */
     deleteTip?: string;
-    formConfig?: {
-        fields?: (props: {
-            record?: Model;
-            records: Model[];
-            action: 'create' | 'edit';
-        }) => RefineFormField[];
-        saveButtonText?: string;
-        renderForm?: (props: YamlFormProps) => React.ReactNode;
-        formType?: FormType;
-        transformInitValues?: (values: Record<string, unknown>) => Record<string, unknown>;
-        transformApplyValues?: (values: Record<string, unknown>) => Model['_rawYaml'];
-        formTitle?: string | ((action: 'create' | 'edit') => string);
-        formDesc?: string | ((action: 'create' | 'edit') => string);
-        labelWidth?: string;
-        formatError?: (errorBody: unknown) => string;
-        refineCoreProps?: UseFormProps['refineCoreProps'];
-        useFormProps?: UseFormProps;
-        isDisabledChangeMode?: boolean;
-        CustomFormModal?: React.FC<FormModalProps>;
-    };
+    /** 表单相关配置 */
+    formConfig?: (RefineFormConfig<Model> | YamlFormConfig) & CommonFormConfig<Model>;
 };

package/lib/utils/object.d.ts

@@ -0,0 +1 @@
+export declare function immutableSet<T extends Record<string, unknown> | unknown[] = Record<string, unknown>>(obj: T, path: string | string[], value: unknown): T;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dovetail-v2/refine",
-  "version": "0.1.31",
+  "version": "0.2.0-alpha.0",
   "type": "module",
   "files": [
     "dist",