feat: check the exampleProperties type

packages/arco-lib/src/components/Checkbox.tsx

@@ -18,36 +18,34 @@ const CheckboxStateSpec = Type.Object({
   isCheckAll: Type.Boolean(),
 });
 
-const exampleProperties = {
-  options: [
-    {
-      label: 'checkbox1',
-      value: 'checkbox1',
-    },
-    {
-      label: 'checkbox2',
-      value: 'checkbox2',
-    },
-    {
-      label: 'checkbox3',
-      value: 'checkbox3',
-    },
-  ],
-  disabled: false,
-  direction: 'horizontal',
-  defaultCheckedValues: ['checkbox1'],
-  showCheckAll: false,
-  checkAllText: 'Check all',
-  updateWhenDefaultValueChanges: false,
-};
-
 export const Checkbox = implementRuntimeComponent({
   version: 'arco/v1',
   metadata: {
     ...FALLBACK_METADATA,
     name: 'checkbox',
     displayName: 'Checkbox',
-    exampleProperties,
+    exampleProperties: {
+      options: [
+        {
+          label: 'checkbox1',
+          value: 'checkbox1',
+        },
+        {
+          label: 'checkbox2',
+          value: 'checkbox2',
+        },
+        {
+          label: 'checkbox3',
+          value: 'checkbox3',
+        },
+      ],
+      disabled: false,
+      direction: 'horizontal',
+      defaultCheckedValues: ['checkbox1'],
+      showCheckAll: false,
+      checkAllText: 'Check all',
+      updateWhenDefaultValueChanges: false,
+    },
     annotations: {
       category: 'Data Entry',
     },

packages/arco-lib/src/components/Select.tsx

@@ -1,7 +1,7 @@
 import { Select as BaseSelect } from '@arco-design/web-react';
 import { implementRuntimeComponent } from '@sunmao-ui/runtime';
 import { css } from '@emotion/css';
-import { Type, Static } from '@sinclair/typebox';
+import { Type } from '@sinclair/typebox';
 import { FALLBACK_METADATA, getComponentProps } from '../sunmao-helper';
 import { SelectPropsSpec as BaseSelectPropsSpec } from '../generated/types/Select';
 import { useEffect, useRef } from 'react';
@@ -15,35 +15,33 @@ const SelectStateSpec = Type.Object({
   value: Type.String(),
 });
 
-const exampleProperties: Static<typeof SelectPropsSpec> = {
-  allowClear: false,
-  multiple: false,
-  allowCreate: false,
-  bordered: true,
-  defaultValue: 'Beijing',
-  disabled: false,
-  labelInValue: false,
-  loading: false,
-  showSearch: false,
-  unmountOnExit: false,
-  options: [
-    { value: 'Beijing', text: 'Beijing' },
-    { value: 'London', text: 'London' },
-    { value: 'NewYork', text: 'NewYork' },
-  ],
-  placeholder: 'Select city',
-  size: 'default',
-  error: false,
-  updateWhenDefaultValueChanges: false,
-};
-
 export const Select = implementRuntimeComponent({
   version: 'arco/v1',
   metadata: {
     ...FALLBACK_METADATA,
     name: 'select',
     displayName: 'Select',
-    exampleProperties,
+    exampleProperties: {
+      allowClear: false,
+      multiple: false,
+      allowCreate: false,
+      bordered: true,
+      defaultValue: 'Beijing',
+      disabled: false,
+      labelInValue: false,
+      loading: false,
+      showSearch: false,
+      unmountOnExit: false,
+      options: [
+        { value: 'Beijing', text: 'Beijing' },
+        { value: 'London', text: 'London' },
+        { value: 'NewYork', text: 'NewYork' },
+      ],
+      placeholder: 'Select city',
+      size: 'default',
+      error: false,
+      updateWhenDefaultValueChanges: false,
+    },
     annotations: {
       category: 'Data Entry',
     },

packages/arco-lib/src/components/Tooltip.tsx

@@ -1,7 +1,7 @@
 import { Tooltip as BaseTooltip, Button } from '@arco-design/web-react';
 import { implementRuntimeComponent } from '@sunmao-ui/runtime';
 import { css } from '@emotion/css';
-import { Type, Static } from '@sinclair/typebox';
+import { Type } from '@sinclair/typebox';
 import { FALLBACK_METADATA, getComponentProps } from '../sunmao-helper';
 import { TooltipPropsSpec as BaseTooltipPropsSpec } from '../generated/types/Tooltip';
 import { useState, useEffect } from 'react';
@@ -9,24 +9,22 @@ import { useState, useEffect } from 'react';
 const TooltipPropsSpec = Type.Object(BaseTooltipPropsSpec);
 const TooltipStateSpec = Type.Object({});
 
-const exampleProperties: Static<typeof TooltipPropsSpec> = {
-  color: '#bbb',
-  position: 'bottom',
-  mini: false,
-  disabled: false,
-  content: 'This is tooltip',
-  trigger: 'hover',
-  controlled: false,
-  unmountOnExit: true,
-};
-
 export const Tooltip = implementRuntimeComponent({
   version: 'arco/v1',
   metadata: {
     ...FALLBACK_METADATA,
     name: 'tooltip',
     displayName: 'Tooltip',
-    exampleProperties,
+    exampleProperties: {
+      color: '#bbb',
+      position: 'bottom',
+      mini: false,
+      disabled: false,
+      content: 'This is tooltip',
+      trigger: 'hover',
+      controlled: false,
+      unmountOnExit: true,
+    },
     annotations: {
       category: 'Data Display',
     },

packages/chakra-ui-lib/src/components/CheckboxGroup.tsx

@@ -28,7 +28,6 @@ export default implementRuntimeComponent({
     displayName: 'Checkbox Group',
     description: 'chakra-ui checkbox group',
     exampleProperties: {
-      size: '',
       isDisabled: false,
       defaultValue: [],
     },

packages/chakra-ui-lib/src/components/Dialog.tsx

@@ -55,8 +55,12 @@ export default implementRuntimeComponent({
     description: 'chakra_ui dialog',
     exampleProperties: {
       title: 'Dialog',
-      confirmButton: 'Confirm',
-      cancelButton: 'Cancel',
+      confirmButton: {
+        text: 'Confirm',
+      },
+      cancelButton: {
+        text: 'Cancel',
+      },
       disableConfirm: false,
     },
     annotations: {

packages/chakra-ui-lib/src/components/MultiSelect.tsx

@@ -74,36 +74,34 @@ const PropsSpec = Type.Object({
   ),
 });
 
-const exampleProperties = {
-  options: [
-    {
-      label: 'value1',
-      value: 'value1',
-    },
-    {
-      label: 'value2',
-      value: 'value2',
-    },
-    {
-      label: 'value3',
-      value: 'value3',
-    },
-  ],
-  placeholder: '',
-  defaultValue: [],
-  isDisabled: false,
-  isRequired: false,
-  size: 'md',
-  variant: 'outline',
-};
-
 export default implementRuntimeComponent({
   version: 'chakra_ui/v1',
   metadata: {
     name: 'multiSelect',
     displayName: 'MultiSelect',
     description: 'chakra-ui MultiSelect',
-    exampleProperties,
+    exampleProperties: {
+      options: [
+        {
+          label: 'value1',
+          value: 'value1',
+        },
+        {
+          label: 'value2',
+          value: 'value2',
+        },
+        {
+          label: 'value3',
+          value: 'value3',
+        },
+      ],
+      placeholder: '',
+      defaultValue: [],
+      isDisabled: false,
+      isRequired: false,
+      size: 'md',
+      variant: 'outline',
+    },
     annotations: {
       category: 'Input',
     },

packages/chakra-ui-lib/src/components/Select.tsx

@@ -82,40 +82,38 @@ const PropsSpec = Type.Object({
   }),
 });
 
-const exampleProperties = {
-  options: [
-    {
-      label: 'value1',
-      value: 'value1',
-    },
-    {
-      label: 'value2',
-      value: 'value2',
-    },
-    {
-      label: 'value3',
-      value: 'value3',
-    },
-  ],
-  placeholder: 'Select an option',
-  defaultValue: '',
-  isDisabled: false,
-  isInvalid: false,
-  isReadOnly: false,
-  isRequired: false,
-  size: 'md',
-  variant: 'outline',
-  errorBorderColor: 'red',
-  focusBorderColor: 'blue',
-};
-
 export default implementRuntimeComponent({
   version: 'chakra_ui/v1',
   metadata: {
     name: 'select',
     displayName: 'Select',
     description: 'chakra-ui select',
-    exampleProperties,
+    exampleProperties: {
+      options: [
+        {
+          label: 'value1',
+          value: 'value1',
+        },
+        {
+          label: 'value2',
+          value: 'value2',
+        },
+        {
+          label: 'value3',
+          value: 'value3',
+        },
+      ],
+      placeholder: 'Select an option',
+      defaultValue: '',
+      isDisabled: false,
+      isInvalid: false,
+      isReadOnly: false,
+      isRequired: false,
+      size: 'md',
+      variant: 'outline',
+      errorBorderColor: 'red',
+      focusBorderColor: 'blue',
+    },
     annotations: {
       category: 'Input',
     },

packages/chakra-ui-lib/src/components/Table/spec.ts

@@ -23,30 +23,6 @@ const PropsSpec = Type.Object({
   size: TableSizePropertySpec,
 });
 
-const exampleProperties = {
-  data: [
-    {
-      id: '1',
-      name: 'Bowen Tan',
-    },
-  ],
-  columns: [
-    {
-      key: 'name',
-      title: 'Name',
-      type: 'text',
-      displayValue: '',
-      buttonConfig: {
-        handlers: [],
-      },
-    },
-  ],
-  majorKey: 'id',
-  rowsPerPage: 5,
-  isMultiSelect: false,
-  size: 'md',
-};
-
 export const implementTable = implementRuntimeComponent({
   kind: 'Component',
   version: 'chakra_ui/v1',
@@ -54,7 +30,29 @@ export const implementTable = implementRuntimeComponent({
     name: 'table',
     displayName: 'Table',
     description: 'chakra-ui table',
-    exampleProperties,
+    exampleProperties: {
+      data: [
+        {
+          id: '1',
+          name: 'Bowen Tan',
+        },
+      ],
+      columns: [
+        {
+          key: 'name',
+          title: 'Name',
+          type: 'text',
+          displayValue: '',
+          buttonConfig: {
+            handlers: [],
+          },
+        },
+      ],
+      majorKey: 'id',
+      rowsPerPage: 5,
+      isMultiSelect: false,
+      size: 'md',
+    },
     annotations: {
       category: 'Display',
     },

packages/chakra-ui-lib/src/components/Tooltip.tsx

@@ -62,7 +62,9 @@ export default implementRuntimeComponent({
     description: 'chakra-ui tooltip',
     displayName: 'Tooltip',
     exampleProperties: {
-      text: 'tooltip',
+      text: {
+        raw: 'tooltip',
+      },
       defaultIsOpen: false,
       placement: 'top',
       shouldWrapChildren: false,

packages/runtime/src/utils/buildKit.ts

@@ -8,6 +8,7 @@ import {
   createUtilMethod,
   CreateUtilMethodOptions,
 } from '@sunmao-ui/core';
+import { type DeepPartial } from '@sunmao-ui/shared';
 import {
   ComponentImpl,
   ImplementedRuntimeComponent,
@@ -30,7 +31,9 @@ export function implementRuntimeComponent<
   KEvent extends string,
   T extends CreateComponentOptions<KMethodName, KStyleSlot, KSlot, KEvent>
 >(
-  options: T
+  options: T & {
+    metadata: { exampleProperties: DeepPartial<Static<T['spec']['properties']>> };
+  }
 ): (
   impl: ComponentImpl<
     Static<T['spec']['properties']> extends Record<string, unknown>

packages/shared/src/types/index.ts

@@ -1 +1,2 @@
 export * from './condition';
+export * from './utils';

packages/shared/src/types/utils.ts

@@ -0,0 +1,5 @@
+export type DeepPartial<T> = T extends Record<string, any>
+  ? Partial<{
+      [K in keyof T]: DeepPartial<T[K]>;
+    }>
+  : T;