@cloudtower/eagle 0.33.0 → 0.33.2

package/dist/src/coreX/InfoRowList/InfoRow.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+export declare const InfoRow: React.FC<{
+    label: React.ReactNode;
+    content: boolean | {} | string | number | JSX.Element;
+    className?: string;
+    onClick?: () => void;
+}>;

package/dist/src/coreX/InfoRowList/InfoRowList.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import { InfoListProps } from "./InfoRowList.type";
+export declare const InfoRowList: React.ForwardRefExoticComponent<InfoListProps & React.RefAttributes<HTMLDivElement>>;

package/dist/src/coreX/InfoRowList/InfoRowList.type.d.ts

@@ -0,0 +1,63 @@
+/// <reference types="react" />
+/**
+ * InfoRowList 组件的属性定义
+ */
+export type InfoListProps = {
+    /**
+     * 容器的自定义类名
+     */
+    className?: string;
+    /**
+     * 每一行的自定义类名
+     */
+    rowClassName?: string;
+    /**
+     * 是否处于加载状态
+     * @default false
+     */
+    loading: boolean;
+    /**
+     * 信息列表数据
+     * @example
+     * ```tsx
+     * const data = [
+     *   {
+     *     key: 'name',
+     *     name: '名称',
+     *     value: '示例名称',
+     *     action: <Button>编辑</Button>,
+     *     hidden: false
+     *   }
+     * ]
+     * ```
+     */
+    data: {
+        /**
+         * 行的唯一标识
+         */
+        key: string;
+        /**
+         * 行标签名称
+         */
+        name: React.ReactNode;
+        /**
+         * 行内容值
+         */
+        value: React.ReactNode;
+        /**
+         * 可选的操作按钮
+         */
+        action?: React.ReactNode;
+        /**
+         * 是否隐藏该行
+         * @default false
+         */
+        hidden?: boolean;
+    }[];
+    /**
+     * 是否使用紧凑模式
+     * 紧凑模式一般用于详情页面，普通模式用于设置页面
+     * @default false
+     */
+    compact?: boolean;
+};

package/dist/src/coreX/InfoRowList/index.d.ts

@@ -0,0 +1 @@
+export * from "./InfoRowList";

package/dist/src/coreX/Show/index.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import { ShowProps } from "./show.type";
+export declare const Show: React.FC<ShowProps>;

package/dist/src/coreX/Show/show.type.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+export type ShowProps = React.PropsWithChildren<{
+    /**
+     *
+     * 检查的条件。可以是布尔值或返回布尔值的函数。
+     */
+    condition: boolean | (() => boolean);
+    /**
+     *
+     * 当条件为假时显示的备用内容。
+     */
+    fallback?: React.ReactElement;
+}>;

package/dist/src/coreX/index.d.ts

@@ -1,6 +1,7 @@
 export * from "./BarChart";
 export * from "./BatchOperation";
 export * from "./ChartWithTooltip";
+export * from "./CircleLoading";
 export * from "./common";
 export * from "./Counting";
 export * from "./CronCalendar";
@@ -10,8 +11,10 @@ export * from "./DeprecatedDonutChart";
 export * from "./DropdownTransition";
 export * from "./GoBackButton";
 export * from "./I18nNameTag";
+export * from "./InfoRowList";
 export * from "./NamesTooltip";
 export * from "./OverflowTooltip";
+export * from "./Show";
 export * from "./SidebarSubtitle";
 export * from "./Sider";
 export * from "./SortableList";
@@ -19,10 +22,11 @@ export * from "./SummaryTable";
 export * from "./SwitchWithText";
 export * from "./TabMenu";
 export * from "./UnitWithChart";
-export * from "./CircleLoading";
+export * from "./CheckPointList";
 export { default as BarChart } from "./BarChart";
 export { default as BatchOperation } from "./BatchOperation";
 export { default as ChartWithTooltip } from "./ChartWithTooltip";
+export { default as CircleLoading } from "./CircleLoading";
 export { default as Counting } from "./Counting";
 export { default as CronCalendar } from "./CronCalendar";
 export { default as CronPlan } from "./CronPlan";
@@ -40,4 +44,3 @@ export { default as SummaryTable } from "./SummaryTable";
 export { default as SwitchWithText } from "./SwitchWithText";
 export { default as TabMenu } from "./TabMenu";
 export { default as UnitWithChart } from "./UnitWithChart";
-export { default as CircleLoading } from "./CircleLoading";

package/dist/src/store/modal.d.ts

@@ -1,6 +1,7 @@
 import React from "react";
 export type CloseCb = {
     onClose: () => void;
+    closeAllModal: () => void;
     modalId: number;
 };
 export type ModalType<TProps> = TProps extends void ? {
@@ -9,6 +10,7 @@ export type ModalType<TProps> = TProps extends void ? {
     component: React.FC<TProps & CloseCb>;
     props: TProps & {
         onClose?: () => void;
+        closeAllModal?: () => void;
     };
 };
 export type ModalState = {
@@ -21,7 +23,8 @@ export declare enum ModalActions {
     PUSH_MODAL = "PUSH_MODAL",
     POP_MODAL = "POP_MODAL",
     REMOVE_MODAL = "REMOVE_MODAL",
-    CLOSE_MODAL = "CLOSE_MODAL"
+    CLOSE_MODAL = "CLOSE_MODAL",
+    RESET_MODAL = "RESET_MODAL"
 }
 type PUSH_MODAL<TProps> = {
     type: ModalActions.PUSH_MODAL;
@@ -38,7 +41,10 @@ type CLOSE_MODAL = {
     type: ModalActions.CLOSE_MODAL;
     id: number;
 };
-export type Actions = PUSH_MODAL<unknown> | POP_MODAL | REMOVE_MODAL | CLOSE_MODAL;
+type RESET_MODAL = {
+    type: ModalActions.RESET_MODAL;
+};
+export type Actions = PUSH_MODAL<unknown> | POP_MODAL | REMOVE_MODAL | CLOSE_MODAL | RESET_MODAL;
 export declare const initialModalState: ModalState;
 export declare const modalReducer: (state: ModalState | undefined, action: Actions) => ModalState;
 export interface IModalProps {

package/dist/src/styles/token/color.d.ts

@@ -189,6 +189,30 @@ export declare const Color: {
             readonly "yellow-9": "#6B4803";
             readonly "yellow-10": "#483100";
         };
+        readonly pink: {
+            readonly "pink-1": "#FED1FE";
+            readonly "pink-2": "#FDBCFD";
+            readonly "pink-3": "#F99BF8";
+            readonly "pink-4": "#F573F2";
+            readonly "pink-5": "#ED5BE5";
+            readonly "pink-6": "#E136C6";
+            readonly "pink-7": "#CF23A9";
+            readonly "pink-8": "#B5158D";
+            readonly "pink-9": "#910B6E";
+            readonly "pink-10": "#64054B";
+        };
+        readonly cyan: {
+            readonly "cyan-1": "#A0ECEC";
+            readonly "cyan-2": "#83E2E3";
+            readonly "cyan-3": "#67D8D9";
+            readonly "cyan-4": "#3AC4C6";
+            readonly "cyan-5": "#1AACB4";
+            readonly "cyan-6": "#048BA1";
+            readonly "cyan-7": "#00728E";
+            readonly "cyan-8": "#00607B";
+            readonly "cyan-9": "#005068";
+            readonly "cyan-10": "#004155";
+        };
     };
     readonly white: {
         readonly white: "#FFFFFF";

package/dist/src/utils/constants.d.ts

@@ -1,6 +1,8 @@
+import React from "react";
 export declare const EMPTY_FUNCTION: () => void;
 export declare const EMPTY_ARRAY: never[];
 export declare const EMPTY_OBJECT: {};
 export declare const EMPTY_COMPONENT: () => null;
 export declare const DAYJS_I18N_MAP: Record<string, string>;
 export declare const Antd5PrefixCls = "antd5";
+export declare const splitMap: Record<string, React.ReactElement>;

package/dist/stories/docs/core/Button.stories.d.ts

@@ -21,3 +21,14 @@ export declare const CustomChildren: Story;
  * * 这里仅对已有的用法进行展示
  */
 export declare const Link: Story;
+/**
+ * * 禁用按钮示例
+ * * 当 disabled 设置为 true 时，按钮将变为禁用状态
+ * * 禁用状态下按钮不可点击，且样式会有相应变化
+ */
+export declare const Disabled: Story;
+/**
+ * 按钮有三种尺寸：large、middle、small
+ * 可以在不同场景下选择合适的按钮尺寸
+ */
+export declare const ButtonSizes: Story;

package/dist/stories/docs/core/KitStoreProvider.stories.d.ts

@@ -12,7 +12,7 @@ declare const Demo: (props: {
  *
  * ModalStack 会向上查找 KitStoreContext, 如果未查找到，会使用 eagle 提供的默认 store。
  *
- * usePushModal，usePopModal，useCloseModal 与 ModalStack 同理。
+ * usePushModal，usePopModal，useCloseModal, useResetModal 与 ModalStack 同理。
  */
 declare const meta: Meta<typeof Demo>;
 export default meta;

package/dist/stories/docs/core/Legend.stories.d.ts

@@ -0,0 +1,19 @@
+import { LegendColor, LegendComponentType } from "../../../src/core/Legend/legend.type";
+import { Meta, StoryObj } from "@storybook/react";
+/**
+ * 图例组件，用于展示状态。
+ *
+ * 圆形：作为"状态灯"表示状态，用法类似[**状态胶囊**](/docs/core-statuscapsule-状态胶囊--docs)
+ *
+ * 方形：用作图例使用常配合 Charts、多颜色计数等使用
+ */
+declare const story: Meta<LegendComponentType>;
+export declare const Basic: StoryObj<LegendComponentType>;
+export declare const Default: StoryObj<{
+    content: string;
+    color: LegendColor;
+    hoverable: boolean;
+    offWhiteMode?: boolean;
+    number?: number;
+}>;
+export default story;

package/dist/stories/docs/core/Modal.stories.d.ts

@@ -9,3 +9,7 @@ export declare const WithAside: {
     (): React.JSX.Element;
     args: {};
 };
+/**
+ * 点击弹窗中的 close all modal 按钮，会清理掉页面中的所有弹窗
+ */
+export declare const CloseAllModal: () => React.JSX.Element;

package/dist/stories/docs/core/SearchInput.stories.d.ts

@@ -1,20 +1,20 @@
-import React from "react";
-declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0fc72a6d").R, Omit<import("antd/lib/input").InputProps, "onChange"> & {
-    debounceWait?: number | undefined;
-    total?: number | undefined;
-    onSearchNext?: ((value: string, current: number) => void) | undefined;
-    onSearchPrev?: ((value: string, current: number) => void) | undefined;
-    onChange: (value: string) => void;
-} & {
-    children?: React.ReactNode;
-}>;
-export default _default;
-export declare const Simple: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0fc72a6d").R, Omit<import("antd/lib/input").InputProps, "onChange"> & {
-    debounceWait?: number | undefined;
-    total?: number | undefined;
-    onSearchNext?: ((value: string, current: number) => void) | undefined;
-    onSearchPrev?: ((value: string, current: number) => void) | undefined;
-    onChange: (value: string) => void;
-} & {
-    children?: React.ReactNode;
-}>;
+import SearchInput from "../../../src/core/SearchInput";
+import type { StoryObj } from "@storybook/react";
+/**
+ * * tower legacy 组件， 带 debounce 的搜索框
+ * * MR: http://gitlab.smartx.com/frontend/tower/-/merge_requests/930
+ */
+declare const meta: {
+    component: import("../../../src/core/SearchInput").SearchInputComponentType;
+    title: "Core/SearchInput | 搜索框";
+    args: {
+        debounceWait: number;
+        onSearchPrev: undefined;
+        onSearchNext: undefined;
+        total: undefined;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof SearchInput>;
+export declare const Basic: Story;
+export declare const withTotal: Story;

package/dist/stories/docs/core/Select.stories.d.ts

@@ -1,16 +1,97 @@
-import { Meta } from "@storybook/react";
-import React from "react";
-declare const meta: Meta;
-export default meta;
-export declare const Basic: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-        parameters: {
-            design: {
-                type: string;
-                url: string;
-            };
+import Select from "../../../src/core/Select";
+import type { StoryObj } from "@storybook/react";
+/**
+ * Select 组件是基于 antd Select 的封装，提供了更符合设计规范的样式和交互。
+ *
+ * ### 参数说明
+ *
+ * | 参数 | 说明 | 类型 | 默认值 |
+ * | --- | --- | --- | --- |
+ * | size | 选择器大小，large 用于表单场景，small 用于表格等紧凑场景 | 'large' \| 'middle' \| 'small' | 'middle' |
+ * | loading | 加载状态，显示加载中的动画效果 | boolean | false |
+ * | isLoadingValue | 是否正在加载选项值，用于异步加载选项时的加载状态 | boolean | false |
+ * | disabled | 是否禁用选择器，禁用后不可点击选择 | boolean | false |
+ * | mode | 设置选择模式，multiple 为多选，tags 为自由输入多选 | 'multiple' \| 'tags' | - |
+ * | showSearch | 是否可搜索，开启后可通过输入关键字过滤选项 | boolean | false |
+ * | danger | 错误状态，用于表单校验失败等场景 | boolean | false |
+ * | placeholder | 选择框默认文本 | string | - |
+ * | value | 指定当前选中的条目 | string \| string[] | - |
+ * | defaultValue | 指定默认选中的条目 | string \| string[] | - |
+ * | onChange | 选中值发生变化时的回调 | function(value, option) | - |
+ *
+ * 更多属性请参考 antd Select 组件文档
+ */
+declare const meta: {
+    component: import("../../../src/core").SelectComponentType<any, HTMLElement>;
+    title: "Core/Select | 选择器";
+    args: {
+        placeholder: string;
+        options: ({
+            value: string;
+            label: string;
+            disabled?: undefined;
+        } | {
+            value: string;
+            label: string;
+            disabled: true;
+        })[];
+        input: {
+            value: string;
         };
     };
 };
+export default meta;
+type Story = StoryObj<typeof Select>;
+/**
+ * Select 组件提供了三种尺寸:
+ * - large: 适用于表单中的主要选择器
+ * - middle: 默认尺寸，适用于大多数场景
+ * - small: 适用于表格等紧凑型界面
+ */
+export declare const Basic: Story;
+/**
+ * Select 组件支持在选项中添加前缀和后缀图标：
+ * - prefix: 在选项文本前显示图标，常用于表示状态或类型
+ * - suffix: 在选项文本后显示图标，常用于显示额外信息
+ */
+export declare const WithIcons: Story;
+/**
+ * 多选模式下可以选择多个选项，选中的选项会以 Tag 的形式展示。
+ * 支持以下特性：
+ * - 可以通过点击 Tag 的关闭按钮删除已选项
+ * - 可以通过键盘删除键（Backspace）删除最后一个已选项
+ * - 支持通过搜索快速定位选项
+ */
+export declare const Multiple: Story;
+/**
+ * Select 组件提供了两种加载状态：
+ * 1. loading: 原生的加载中
+ * 2. isLoadingValue: value 在加载，select 不能点击
+ */
+export declare const Loading: Story;
+/**
+ * 可搜索模式下，用户可以输入关键字过滤选项。
+ * 可以通过 filterOption 属性自定义搜索逻辑。
+ */
+export declare const SearchSelect: Story;
+/**
+ * Select 支持自定义触发器，可以替换默认的下拉箭头图标。
+ * 常见用法是使用自定义图标来表达特定的筛选含义。
+ */
+export declare const CustomTrigger: Story;
+/**
+ * 错误状态有两种实现方式：
+ * 1. 使用 className="select-error" 添加错误样式
+ * 2. 使用 danger 属性（推荐）
+ */
+export declare const Error: Story;
+/**
+ * 禁用状态下，选择器不可点击，显示为灰色。
+ */
+export declare const Disabled: Story;
+/**
+ * Select 组件可以通过特定的样式类实现组合效果：
+ * - LeftEndSelectStyle: 左侧圆角
+ * - RightEndSelectStyle: 右侧圆角
+ */
+export declare const Combined: Story;

package/dist/stories/docs/core/StatusCapsule.stories.d.ts

@@ -1,5 +1,13 @@
 import { StatusCapsuleColor, StatusCapsuleComponentType } from "../../../src/core/StatusCapsule/statusCapsule.type";
 import { Meta, StoryObj } from "@storybook/react";
+/**
+ * 状态胶囊，用于展示状态。
+ *
+ * 根据使用场景，可选:
+ *
+ * - 是否带计数
+ * - 背景色是否突出：Colorful 较突出、Off-White 较不突出
+ */
 declare const story: Meta<StatusCapsuleComponentType>;
 export declare const Basic: StoryObj<StatusCapsuleComponentType>;
 export declare const Default: StoryObj<{

package/dist/stories/docs/core/Timeline.stories.d.ts

@@ -0,0 +1,38 @@
+import React from "react";
+import { StoryObj } from "@storybook/react";
+import { Timeline } from "../../../src/core/Timeline";
+/**
+ * * Timeline 时间线组件
+ * * 用于展示操作记录、系统事件的时间线
+ * * 支持多种状态展示：成功、失败、进行中、通知、空闲
+ * * 支持自定义标签和操作按钮
+ * * 支持使用 Area 组件灵活自定义辅助信息展示
+ */
+declare const meta: {
+    component: ({ items, emptyText, emptyRender, compact, emptyTextClassName, }: import("../../../src/core/Timeline").TimelineProps) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+    title: string;
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+            source: {
+                type: string;
+            };
+        };
+        controls: {
+            sort: string;
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof Timeline>;
+export declare const SuccessTimeline: Story;
+export declare const FailedTimeline: Story;
+export declare const EmptyTimeline: Story;
+export declare const CustomEmptyState: Story;
+export declare const CustomSecondaryTextStyle: Story;
+export declare const CustomErrorMessage: Story;
+export declare const CustomTags: Story;
+export declare const CustomInfoRender: Story;
+export declare const CustomSubInfoRender: Story;

package/dist/stories/docs/core/message-group.stories.d.ts

@@ -15,6 +15,9 @@ declare const meta: {
                     maxCount: {
                         name: "boolean";
                     };
+                    top: {
+                        name: "number";
+                    };
                 };
             };
             description: string;
@@ -27,4 +30,5 @@ export declare const BasicInfo: Story;
 export declare const BasicWarning: Story;
 export declare const BasicError: Story;
 export declare const MaxCount: Story;
+export declare const CustomTopPosition: Story;
 export declare const BatchMessage: Story;

package/dist/stories/docs/coreX/CheckPointList.stories.d.ts

@@ -0,0 +1,67 @@
+import { type StoryObj } from "@storybook/react";
+import { CheckPointList } from "../../../src/coreX/CheckPointList";
+import React from "react";
+/**
+ * CheckPointList 组件
+ * 用于展示检查点列表，支持通过切换开关筛选未通过的检查项
+ * 适用于各种预检查、健康检查等场景
+ *
+ * 组件特点：
+ * 1. 支持四种状态展示：成功、失败、加载中、警告
+ * 2. 可自定义标签样式
+ * 3. 可自定义告警样式
+ * 4. 支持筛选控制
+ * 5. 自定义空状态展示
+ */
+declare const meta: {
+    component: React.FC<import("../../../src/coreX/CheckPointList").CheckPointListProps>;
+    title: string;
+    parameters: {
+        design: {
+            type: string;
+            url: string;
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof CheckPointList>;
+/**
+ * 基础用法
+ * 展示检查点列表的基础用法，包含成功和失败的检查项
+ */
+export declare const Basic: Story;
+/**
+ * 自定义标签和告警样式
+ * 展示如何使用自定义标签和告警样式来增强视觉效果
+ */
+export declare const CustomStyle: Story;
+/**
+ * 所有状态类型
+ * 展示所有可能的状态类型：成功、失败、加载中、警告
+ */
+export declare const AllStatusTypes: Story;
+/**
+ * 禁用筛选控件
+ * 展示禁用筛选控件的情况，适用于不需要筛选功能的场景
+ */
+export declare const DisableFilterControl: Story;
+/**
+ * 自定义筛选开关文案
+ * 展示如何自定义筛选开关的文案
+ */
+export declare const CustomSwitchText: Story;
+/**
+ * 空状态提示
+ * 展示自定义空状态提示的使用方法
+ */
+export declare const EmptyState: Story;
+/**
+ * 自定义空状态渲染
+ * 展示如何使用自定义渲染函数来创建空状态
+ */
+export declare const CustomEmptyRender: Story;
+/**
+ * 复杂描述内容
+ * 展示如何在描述中使用复杂的ReactNode内容
+ */
+export declare const ComplexDescription: Story;

package/dist/stories/docs/coreX/DateRangePicker.stories.d.ts

@@ -5,3 +5,4 @@ export default meta;
 type Story = StoryObj<typeof DateRangePicker>;
 export declare const Demo: Story;
 export declare const WithRange: Story;
+export declare const WithRelative: Story;

package/dist/stories/docs/coreX/I18nNameTag.stories.d.ts

@@ -3,6 +3,14 @@ import { Meta } from "@storybook/react";
 import React from "react";
 declare const meta: Meta<typeof I18nNameTag>;
 export default meta;
+/**
+ *
+ * 请注意，由于 I18nNameTag 存在 typo， 使用 I18nNameTag 的词条使用的 html tag index 都需要从 1 开始用起
+ *
+ * 例如： "delete_alert_group_policy_desc": "确认要删除通知聚合策略 <1>{name}</1> 吗？",
+ *
+ * slack: https://smartx1.slack.com/archives/GD3UU318A/p1700202217700279
+ */
 export declare const Default: {
     name: string;
     render: ({ name }: {

package/dist/stories/docs/coreX/InfoRowList.stories.d.ts

@@ -0,0 +1,36 @@
+import { InfoRowList } from "../../../src/coreX";
+import type { StoryObj } from "@storybook/react";
+import React from "react";
+/**
+ * InfoRowList 组件用于展示一组键值对信息，支持自定义操作按钮和加载状态。
+ * 支持普通模式（适用于设置页面）和紧凑模式（适用于详情页面）两种展示方式。
+ */
+declare const meta: {
+    component: React.ForwardRefExoticComponent<import("../../../src/coreX/InfoRowList/InfoRowList.type").InfoListProps & React.RefAttributes<HTMLDivElement>>;
+    title: string;
+    parameters: {
+        layout: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof InfoRowList>;
+/**
+ * 基础用法展示了最简单的信息列表展示方式，适用于设置页面
+ */
+export declare const Basic: Story;
+/**
+ * 带操作按钮的用法，每行右侧可以添加自定义的操作按钮
+ */
+export declare const WithActions: Story;
+/**
+ * 紧凑模式的展示方式，适用于详情页面
+ */
+export declare const Compact: Story;
+/**
+ * 加载状态展示
+ */
+export declare const Loading: Story;
+/**
+ * 空值和隐藏行的展示
+ */
+export declare const EmptyAndHidden: Story;

package/dist/stories/docs/coreX/Show.stories.d.ts

@@ -0,0 +1,31 @@
+import React from "react";
+import { StoryObj } from "@storybook/react";
+import { Show } from "../../../src/coreX/Show";
+/**
+ * * Show 条件渲染组件
+ * * 根据条件决定显示内容还是备用内容
+ * * 提供了一种声明式的方式来替代 JSX 中的条件渲染
+ * * 支持布尔值条件和函数条件
+ */
+declare const meta: {
+    component: React.FC<import("../../../src/coreX/Show/show.type").ShowProps>;
+    title: string;
+};
+export default meta;
+type Story = StoryObj<typeof Show>;
+export declare const BasicTrue: Story;
+export declare const BasicFalse: Story;
+export declare const FunctionCondition: Story;
+export declare const NoFallback: Story;
+export declare const Interactive: {
+    name: string;
+    render: () => React.JSX.Element;
+};
+export declare const NestedShows: {
+    name: string;
+    render: () => React.JSX.Element;
+};
+export declare const CombinedWithOtherComponents: {
+    name: string;
+    render: () => React.JSX.Element;
+};