migrate all the code to new props type

related to #54
2025-04-06 21:40:23 +08:00 · 2021-09-20 17:00:14 +08:00 · 2021-09-20 17:00:14 +08:00 · 6d8f7d5fc1
commit 6d8f7d5fc1
parent 2bcb02491b
37 changed files with 536 additions and 1040 deletions
--- a/packages/runtime/src/components/chakra-ui/Box.tsx
+++ b/packages/runtime/src/components/chakra-ui/Box.tsx
@ -293,12 +293,7 @@ export default {
      description: 'chakra-ui box',
    },
    spec: {
-      properties: Object.entries(StyleSchema.properties).map(
-        ([key, value]) => ({
-          name: key,
-          ...value,
-        })
-      ),
+      properties: StyleSchema,
      acceptTraits: [],
      state: {},
      methods: [],
--- a/packages/runtime/src/components/chakra-ui/Button.tsx
+++ b/packages/runtime/src/components/chakra-ui/Button.tsx
@ -2,15 +2,11 @@ import React, { useEffect, useRef } from 'react';
 import { createComponent } from '@meta-ui/core';
 import { Static, Type } from '@sinclair/typebox';
 import { Button as BaseButton } from '@chakra-ui/react';
-import Text, { TextProps, TextPropertySchema } from '../_internal/Text';
+import Text, { TextPropertySchema } from '../_internal/Text';
 import { ComponentImplementation } from '../../registry';
 import { ColorSchemePropertySchema } from './Types/ColorScheme';

-const Button: ComponentImplementation<{
-  text: TextProps['value'];
-  colorScheme?: Static<typeof ColorSchemePropertySchema>;
-  isLoading?: Static<typeof IsLoadingPropertySchema>;
-}> = ({
+const Button: ComponentImplementation<Static<typeof PropsSchema>> = ({
  text,
  mergeState,
  subscribeMethods,
@ -41,12 +37,16 @@ const Button: ComponentImplementation<{
  );
 };

-const IsLoadingPropertySchema = Type.Optional(Type.Boolean());
-
 const StateSchema = Type.Object({
  value: Type.String(),
 });

+const PropsSchema = Type.Object({
+  text: TextPropertySchema,
+  colorScheme: ColorSchemePropertySchema,
+  isLoading: Type.Optional(Type.Boolean()),
+});
+
 export default {
  ...createComponent({
    version: 'chakra_ui/v1',
@ -55,20 +55,7 @@ export default {
      description: 'chakra-ui button',
    },
    spec: {
-      properties: [
-        {
-          name: 'text',
-          ...TextPropertySchema,
-        },
-        {
-          name: 'colorScheme',
-          ...ColorSchemePropertySchema,
-        },
-        {
-          name: 'isLoading',
-          ...IsLoadingPropertySchema,
-        },
-      ],
+      properties: PropsSchema,
      acceptTraits: [],
      state: StateSchema,
      methods: [
--- a/packages/runtime/src/components/chakra-ui/Checkbox.tsx
+++ b/packages/runtime/src/components/chakra-ui/Checkbox.tsx
@ -6,17 +6,10 @@ import {
  useCheckboxGroupContext,
 } from '@chakra-ui/react';
 import { ComponentImplementation } from '../../registry';
-import Text, { TextProps, TextPropertySchema } from '../_internal/Text';
+import Text, { TextPropertySchema } from '../_internal/Text';
 import { ColorSchemePropertySchema } from './Types/ColorScheme';

-const ValueSchema = Type.Union([Type.String(), Type.Number()]);
-const DefaultIsCheckedSchema = Type.Optional(Type.Boolean());
 export const IsDisabledSchema = Type.Optional(Type.Boolean());
-const IsFocusableSchema = Type.Optional(Type.Boolean());
-const IsInvalidSchema = Type.Optional(Type.Boolean());
-const IsReadOnlySchema = Type.Optional(Type.Boolean());
-const IsRequiredSchema = Type.Optional(Type.Boolean());
-const SpacingSchema = Type.Optional(Type.String());
 export const SizePropertySchema = Type.KeyOf(
  Type.Object({
    sm: Type.String(),
@ -31,19 +24,7 @@ export const CheckboxStateSchema = Type.Object({
  checked: Type.Boolean(),
 });

-const Checkbox: ComponentImplementation<{
-  text: TextProps['value'];
-  value: Static<typeof ValueSchema>;
-  defaultIsChecked?: Static<typeof DefaultIsCheckedSchema>;
-  isDisabled?: Static<typeof IsDisabledSchema>;
-  isFocusable?: Static<typeof IsFocusableSchema>;
-  isInValid?: Static<typeof IsInvalidSchema>;
-  isReadOnly?: Static<typeof IsReadOnlySchema>;
-  isRequired?: Static<typeof IsRequiredSchema>;
-  size?: Static<typeof SizePropertySchema>;
-  spacing?: Static<typeof SpacingSchema>;
-  colorScheme?: Static<typeof ColorSchemePropertySchema>;
-}> = ({
+const Checkbox: ComponentImplementation<Static<typeof PropsSchema>> = ({
  text,
  value,
  defaultIsChecked,
@ -110,6 +91,20 @@ const Checkbox: ComponentImplementation<{
  );
 };

+const PropsSchema = Type.Object({
+  text: TextPropertySchema,
+  value: Type.Union([Type.String(), Type.Number()]),
+  defaultIsChecked: Type.Optional(Type.Boolean()),
+  isDisabled: IsDisabledSchema,
+  isFocusable: Type.Optional(Type.Boolean()),
+  isInValid: Type.Optional(Type.Boolean()),
+  isReadOnly: Type.Optional(Type.Boolean()),
+  isRequired: Type.Optional(Type.Boolean()),
+  size: SizePropertySchema,
+  spacing: Type.Optional(Type.String()),
+  colorScheme: ColorSchemePropertySchema,
+});
+
 export default {
  ...createComponent({
    version: 'chakra_ui/v1',
@ -118,52 +113,7 @@ export default {
      description: 'chakra-ui checkbox',
    },
    spec: {
-      properties: [
-        {
-          name: 'text',
-          ...TextPropertySchema,
-        },
-        {
-          name: 'value',
-          ...ValueSchema,
-        },
-        {
-          name: 'defaultIsChecked',
-          ...DefaultIsCheckedSchema,
-        },
-        {
-          name: 'isDisabled',
-          ...IsDisabledSchema,
-        },
-        {
-          name: 'isFocusable',
-          ...IsFocusableSchema,
-        },
-        {
-          name: 'isInValid',
-          ...IsInvalidSchema,
-        },
-        {
-          name: 'isReadOnly',
-          ...IsReadOnlySchema,
-        },
-        {
-          name: 'isRequired',
-          ...IsReadOnlySchema,
-        },
-        {
-          name: 'size',
-          ...SizePropertySchema,
-        },
-        {
-          name: 'spacing',
-          ...SpacingSchema,
-        },
-        {
-          name: 'colorScheme',
-          ...ColorSchemePropertySchema,
-        },
-      ],
+      properties: PropsSchema,
      acceptTraits: [],
      state: CheckboxStateSchema,
      methods: [],
--- a/packages/runtime/src/components/chakra-ui/CheckboxGroup.tsx
+++ b/packages/runtime/src/components/chakra-ui/CheckboxGroup.tsx
@ -14,11 +14,7 @@ const StateSchema = Type.Object({
  value: Type.String(),
 });

-const CheckboxGroup: ComponentImplementation<{
-  size?: Static<typeof SizePropertySchema>;
-  defaultValue?: Static<typeof DefaultValueSchema>;
-  isDisabled?: Static<typeof IsDisabledSchema>;
-}> = ({
+const CheckboxGroup: ComponentImplementation<Static<typeof PropsSchema>> = ({
  size,
  defaultValue,
  isDisabled,
@ -41,6 +37,12 @@ const CheckboxGroup: ComponentImplementation<{
  );
 };

+const PropsSchema = Type.Object({
+  size: SizePropertySchema,
+  isDisabled: IsDisabledSchema,
+  defaultValue: DefaultValueSchema,
+});
+
 export default {
  ...createComponent({
    version: 'chakra_ui/v1',
@ -49,20 +51,7 @@ export default {
      description: 'chakra-ui checkbox group',
    },
    spec: {
-      properties: [
-        {
-          name: 'size',
-          ...SizePropertySchema,
-        },
-        {
-          name: 'isDisabled',
-          ...IsDisabledSchema,
-        },
-        {
-          name: 'defaultValue',
-          ...DefaultValueSchema,
-        },
-      ],
+      properties: PropsSchema,
      acceptTraits: [],
      state: StateSchema,
      methods: [],
--- a/packages/runtime/src/components/chakra-ui/Dialog.tsx
+++ b/packages/runtime/src/components/chakra-ui/Dialog.tsx
@ -14,20 +14,12 @@ import { Static, Type } from '@sinclair/typebox';
 import Slot from '../_internal/Slot';
 import { ColorSchemePropertySchema } from './Types/ColorScheme';

-const TitlePropertySchema = Type.Optional(Type.String());
-const DisableConfirmPropertySchema = Type.Optional(Type.Boolean());
-
 const HandleButtonPropertySchema = Type.Object({
  text: Type.Optional(Type.String()),
  colorScheme: ColorSchemePropertySchema,
 });

-const Dialog: ComponentImplementation<{
-  title?: Static<typeof TitlePropertySchema>;
-  confirmButton?: Static<typeof HandleButtonPropertySchema>;
-  cancelButton?: Static<typeof HandleButtonPropertySchema>;
-  disableConfirm?: Static<typeof DisableConfirmPropertySchema>;
-}> = ({
+const Dialog: ComponentImplementation<Static<typeof PropsSchema>> = ({
  slotsMap,
  subscribeMethods,
  callbackMap: callbacks,
@ -97,6 +89,13 @@ const Dialog: ComponentImplementation<{
  );
 };

+const PropsSchema = Type.Object({
+  title: Type.Optional(Type.String()),
+  confirmButton: HandleButtonPropertySchema,
+  cancelButton: HandleButtonPropertySchema,
+  disableConfirm: Type.Optional(Type.Boolean()),
+});
+
 export default {
  ...createComponent({
    version: 'chakra_ui/v1',
@ -105,24 +104,7 @@ export default {
      description: 'chakra_ui dialog',
    },
    spec: {
-      properties: [
-        {
-          name: 'title',
-          ...TitlePropertySchema,
-        },
-        {
-          name: 'confirmButton',
-          ...HandleButtonPropertySchema,
-        },
-        {
-          name: 'cancelButton',
-          ...HandleButtonPropertySchema,
-        },
-        {
-          name: 'disableConfirm',
-          ...DisableConfirmPropertySchema,
-        },
-      ],
+      properties: PropsSchema,
      acceptTraits: [],
      state: {},
      methods: [
--- a/packages/runtime/src/components/chakra-ui/Form/Form.tsx
+++ b/packages/runtime/src/components/chakra-ui/Form/Form.tsx
@ -1,5 +1,5 @@
 import React, { useEffect, useMemo, useRef, useState } from 'react';
-import { Type } from '@sinclair/typebox';
+import { Type, Static } from '@sinclair/typebox';
 import { createComponent } from '@meta-ui/core';
 import Slot from '@components/_internal/Slot';
 import { Button } from '@chakra-ui/react';
@ -8,9 +8,13 @@ import { ComponentImplementation } from 'src/registry';
 import { stateStore } from 'src/store';
 import { apiService } from 'src/api-service';

-const FormImpl: ComponentImplementation<{
-  hideSubmit?: boolean;
-}> = ({ mergeState, subscribeMethods, hideSubmit, slotsMap, callbackMap }) => {
+const FormImpl: ComponentImplementation<Static<typeof PropsSchema>> = ({
+  mergeState,
+  subscribeMethods,
+  hideSubmit,
+  slotsMap,
+  callbackMap,
+}) => {
  const [invalidArray, setInvalidArray] = useState<boolean[]>([]);
  const [isFormInvalid, setIsFormInvalid] = useState<boolean>(false);
  const formDataRef = useRef<Record<string, any>>({});
@ -107,6 +111,10 @@ const FormImpl: ComponentImplementation<{
  );
 };

+const PropsSchema = Type.Object({
+  hideSubmit: Type.Boolean(),
+});
+
 export default {
  ...createComponent({
    version: 'chakra_ui/v1',
@ -115,12 +123,7 @@ export default {
      description: 'chakra-ui form',
    },
    spec: {
-      properties: [
-        {
-          name: 'hideSubmit',
-          ...Type.Boolean(),
-        },
-      ],
+      properties: PropsSchema,
      acceptTraits: [],
      state: Type.Object({
        data: Type.Any(),
--- a/packages/runtime/src/components/chakra-ui/Form/FormControl.tsx
+++ b/packages/runtime/src/components/chakra-ui/Form/FormControl.tsx
@ -105,6 +105,13 @@ const FormControlImpl: ComponentImplementation<{
  );
 };

+const PropsSchema = Type.Object({
+  label: Type.String(),
+  fieldName: Type.String(),
+  isRequired: Type.Boolean(),
+  helperText: Type.String(),
+});
+
 export default {
  ...createComponent({
    version: 'chakra_ui/v1',
@ -113,24 +120,7 @@ export default {
      description: 'chakra-ui formControl',
    },
    spec: {
-      properties: [
-        {
-          name: 'label',
-          ...Type.String(),
-        },
-        {
-          name: 'fieldName',
-          ...Type.String(),
-        },
-        {
-          name: 'isRequired',
-          ...Type.Boolean(),
-        },
-        {
-          name: 'helperText',
-          ...Type.String(),
-        },
-      ],
+      properties: PropsSchema,
      acceptTraits: [],
      state: Type.Object({
        inputId: Type.String(),
--- a/packages/runtime/src/components/chakra-ui/HStack.tsx
+++ b/packages/runtime/src/components/chakra-ui/HStack.tsx
@ -1,6 +1,6 @@
 import React from 'react';
 import { createComponent } from '@meta-ui/core';
-import { Static } from '@sinclair/typebox';
+import { Static, Type } from '@sinclair/typebox';
 import { HStack as BaseHStack } from '@chakra-ui/react';
 import { ComponentImplementation } from '../../registry';
 import Slot from '../_internal/Slot';
@ -12,13 +12,14 @@ import {
  SpacingSchema,
 } from './Stack';

-const HStack: ComponentImplementation<{
-  direction?: Static<typeof DirectionSchema>;
-  wrap?: Static<typeof FlexWrapSchema>;
-  align?: Static<typeof AlignItemsSchema>;
-  justify?: Static<typeof JustifyContentSchema>;
-  spacing?: Static<typeof SpacingSchema>;
-}> = ({ direction, wrap, align, justify, spacing, slotsMap }) => {
+const HStack: ComponentImplementation<Static<typeof PropsSchema>> = ({
+  direction,
+  wrap,
+  align,
+  justify,
+  spacing,
+  slotsMap,
+}) => {
  return (
    <BaseHStack {...{ direction, wrap, align, justify, spacing }}>
      <Slot slotsMap={slotsMap} slot="content" />
@ -26,6 +27,14 @@ const HStack: ComponentImplementation<{
  );
 };

+const PropsSchema = Type.Object({
+  direction: DirectionSchema,
+  wrap: FlexWrapSchema,
+  align: AlignItemsSchema,
+  justify: JustifyContentSchema,
+  spacing: SpacingSchema,
+});
+
 export default {
  ...createComponent({
    version: 'chakra_ui/v1',
@ -34,28 +43,7 @@ export default {
      description: 'chakra-ui hstack',
    },
    spec: {
-      properties: [
-        {
-          name: 'diection',
-          ...DirectionSchema,
-        },
-        {
-          name: 'wrap',
-          ...FlexWrapSchema,
-        },
-        {
-          name: 'align',
-          ...AlignItemsSchema,
-        },
-        {
-          name: 'justify',
-          ...JustifyContentSchema,
-        },
-        {
-          name: 'spacing',
-          ...SpacingSchema,
-        },
-      ],
+      properties: PropsSchema,
      acceptTraits: [],
      state: {},
      methods: [],
--- a/packages/runtime/src/components/chakra-ui/Image.tsx
+++ b/packages/runtime/src/components/chakra-ui/Image.tsx
@ -4,11 +4,6 @@ import { createComponent } from '@meta-ui/core';
 import { Static, Type } from '@sinclair/typebox';
 import { ComponentImplementation } from '../../registry';

-const SrcPropertySchema = Type.String();
-const OptionalStringPropertySchema = Type.Optional(Type.String());
-const IgnoreFallbackPropertySchema = Type.Optional(Type.Boolean());
-const HeightSchema = Type.Optional(Type.Union([Type.String(), Type.Number()]));
-
 const BoxSizePropertySchema = Type.Optional(
  Type.Union([
    Type.KeyOf(
@ -69,27 +64,7 @@ const BorderRadiusSchema = Type.Optional(
  ])
 );

-const CrossOriginSchema = Type.Optional(
-  Type.KeyOf(
-    Type.Object({
-      anonymous: Type.String(),
-      'use-credentials': Type.String(),
-    })
-  )
-);
-
-const Image: ComponentImplementation<{
-  boxSize?: Static<typeof BoxSizePropertySchema>;
-  src: Static<typeof SrcPropertySchema>;
-  fallbackSrc?: Static<typeof OptionalStringPropertySchema>;
-  alt?: Static<typeof OptionalStringPropertySchema>;
-  ignoreFallback?: Static<typeof IgnoreFallbackPropertySchema>;
-  objectFit?: Static<typeof ObjectFitSchema>;
-  borderRadius?: Static<typeof BorderRadiusSchema>;
-  htmlHeight?: Static<typeof HeightSchema>;
-  htmlWidth?: Static<typeof HeightSchema>;
-  crossOrigin?: Static<typeof CrossOriginSchema>;
-}> = ({
+const Image: ComponentImplementation<Static<typeof PropsSchema>> = ({
  boxSize,
  src,
  alt,
@ -123,6 +98,26 @@ const StateSchema = Type.Object({
  value: Type.String(),
 });

+const PropsSchema = Type.Object({
+  src: Type.String(),
+  fallbackSrc: Type.Optional(Type.String()),
+  boxSize: BoxSizePropertySchema,
+  objectFit: ObjectFitSchema,
+  borderRadius: BorderRadiusSchema,
+  ignoreFallback: Type.Optional(Type.Boolean()),
+  alt: Type.Optional(Type.String()),
+  htmlHeight: Type.Optional(Type.Union([Type.String(), Type.Number()])),
+  htmlWidth: Type.Optional(Type.Union([Type.String(), Type.Number()])),
+  crossOrigin: Type.Optional(
+    Type.KeyOf(
+      Type.Object({
+        anonymous: Type.String(),
+        'use-credentials': Type.String(),
+      })
+    )
+  ),
+});
+
 export default {
  ...createComponent({
    version: 'chakra_ui/v1',
@ -131,48 +126,7 @@ export default {
      description: 'chakra_ui image',
    },
    spec: {
-      properties: [
-        {
-          name: 'src',
-          ...SrcPropertySchema,
-        },
-        {
-          name: 'fallbackSrc',
-          ...OptionalStringPropertySchema,
-        },
-        {
-          name: 'boxSize',
-          ...BoxSizePropertySchema,
-        },
-        {
-          name: 'objectFit',
-          ...ObjectFitSchema,
-        },
-        {
-          name: 'borderRadius',
-          ...BorderRadiusSchema,
-        },
-        {
-          name: 'ignoreFallback',
-          ...IgnoreFallbackPropertySchema,
-        },
-        {
-          name: 'alt',
-          ...OptionalStringPropertySchema,
-        },
-        {
-          name: 'htmlHeight',
-          ...HeightSchema,
-        },
-        {
-          name: 'htmlWidth',
-          ...HeightSchema,
-        },
-        {
-          name: 'crossOrigin',
-          ...CrossOriginSchema,
-        },
-      ],
+      properties: PropsSchema,
      acceptTraits: [],
      state: StateSchema,
      methods: [{ name: 'onLoad' }],
--- a/packages/runtime/src/components/chakra-ui/Input.tsx
+++ b/packages/runtime/src/components/chakra-ui/Input.tsx
@ -11,31 +11,6 @@ import { createComponent } from '@meta-ui/core';
 import { Static, Type } from '@sinclair/typebox';
 import { ComponentImplementation } from '../../registry';

-const VariantPropertySchema = Type.KeyOf(
-  Type.Object({
-    outline: Type.String(),
-    unstyled: Type.String(),
-    filled: Type.String(),
-    flushed: Type.String(),
-  })
-);
-
-const PlaceholderPropertySchema = Type.Optional(Type.String());
-
-const SizePropertySchema = Type.KeyOf(
-  Type.Object({
-    sm: Type.String(),
-    md: Type.String(),
-    lg: Type.String(),
-    xs: Type.String(),
-  })
-);
-
-const FocusBorderColorPropertySchema = Type.Optional(Type.String());
-const IsDisabledPropertySchema = Type.Optional(Type.Boolean());
-const IsRequiredPropertySchema = Type.Optional(Type.Boolean());
-const DefaultValuePropertySchema = Type.Optional(Type.String());
-
 const AppendElementPropertySchema = Type.Union([
  Type.Object({
    type: Type.KeyOf(Type.Object({ addon: Type.String() })),
@ -49,17 +24,7 @@ const AppendElementPropertySchema = Type.Union([
  }),
 ]);

-const Input: ComponentImplementation<{
-  variant?: Static<typeof VariantPropertySchema>;
-  placeholder?: Static<typeof PlaceholderPropertySchema>;
-  size?: Static<typeof SizePropertySchema>;
-  focusBorderColor?: Static<typeof FocusBorderColorPropertySchema>;
-  isDisabled?: Static<typeof IsDisabledPropertySchema>;
-  isRequired?: Static<typeof IsRequiredPropertySchema>;
-  left?: Static<typeof AppendElementPropertySchema>;
-  right?: Static<typeof AppendElementPropertySchema>;
-  defaultValue?: Static<typeof DefaultValuePropertySchema>;
-}> = ({
+const Input: ComponentImplementation<Static<typeof PropsSchema>> = ({
  variant,
  placeholder,
  size,
@ -136,6 +101,32 @@ const StateSchema = Type.Object({
  value: Type.String(),
 });

+const PropsSchema = Type.Object({
+  variant: Type.KeyOf(
+    Type.Object({
+      outline: Type.String(),
+      unstyled: Type.String(),
+      filled: Type.String(),
+      flushed: Type.String(),
+    })
+  ),
+  placeholder: Type.Optional(Type.String()),
+  size: Type.KeyOf(
+    Type.Object({
+      sm: Type.String(),
+      md: Type.String(),
+      lg: Type.String(),
+      xs: Type.String(),
+    })
+  ),
+  focusBorderColor: Type.Optional(Type.String()),
+  isDisabled: Type.Optional(Type.Boolean()),
+  isRequired: Type.Optional(Type.Boolean()),
+  left: AppendElementPropertySchema,
+  right: AppendElementPropertySchema,
+  defaultValue: Type.Optional(Type.String()),
+});
+
 export default {
  ...createComponent({
    version: 'chakra_ui/v1',
@ -144,44 +135,7 @@ export default {
      description: 'chakra_ui input',
    },
    spec: {
-      properties: [
-        {
-          name: 'variant',
-          ...VariantPropertySchema,
-        },
-        {
-          name: 'placeholder',
-          ...PlaceholderPropertySchema,
-        },
-        {
-          name: 'size',
-          ...SizePropertySchema,
-        },
-        {
-          name: 'focusBorderColor',
-          ...FocusBorderColorPropertySchema,
-        },
-        {
-          name: 'isDisabled',
-          ...IsDisabledPropertySchema,
-        },
-        {
-          name: 'isRequired',
-          ...IsRequiredPropertySchema,
-        },
-        {
-          name: 'left',
-          ...AppendElementPropertySchema,
-        },
-        {
-          name: 'right',
-          ...AppendElementPropertySchema,
-        },
-        {
-          name: 'defaultValue',
-          ...DefaultValuePropertySchema,
-        },
-      ],
+      properties: PropsSchema,
      acceptTraits: [],
      state: StateSchema,
      methods: [
--- a/packages/runtime/src/components/chakra-ui/Kbd.tsx
+++ b/packages/runtime/src/components/chakra-ui/Kbd.tsx
@ -1,13 +1,14 @@
 import React, { useEffect } from 'react';
 import { Kbd as BaseKbd } from '@chakra-ui/react';
-import { Type } from '@sinclair/typebox';
+import { Static, Type } from '@sinclair/typebox';
 import { createComponent } from '@meta-ui/core';
 import { ComponentImplementation } from '../../registry';
-import Text, { TextProps, TextPropertySchema } from '../_internal/Text';
+import Text, { TextPropertySchema } from '../_internal/Text';

-const Kbd: ComponentImplementation<{
-  text: TextProps['value'];
-}> = ({ text, mergeState }) => {
+const Kbd: ComponentImplementation<Static<typeof PropsSchema>> = ({
+  text,
+  mergeState,
+}) => {
  useEffect(() => {
    mergeState({ value: text.raw });
  }, [text.raw]);
@ -23,6 +24,10 @@ const StateSchema = Type.Object({
  value: Type.String(),
 });

+const PropsSchema = Type.Object({
+  text: TextPropertySchema,
+});
+
 export default {
  ...createComponent({
    version: 'chakra_ui/v1',
@ -31,12 +36,7 @@ export default {
      description: 'chakra-ui keyboard',
    },
    spec: {
-      properties: [
-        {
-          name: 'text',
-          ...TextPropertySchema,
-        },
-      ],
+      properties: PropsSchema,
      acceptTraits: [],
      state: StateSchema,
      methods: [],
--- a/packages/runtime/src/components/chakra-ui/List.tsx
+++ b/packages/runtime/src/components/chakra-ui/List.tsx
@ -28,11 +28,11 @@ export function parseTypeComponents(
  };
 }

-const List: ComponentImplementation<{
-  listData: Static<typeof ListDataPropertySchema>;
-  template: Static<typeof TemplatePropertySchema>;
-  onClick?: () => void;
-}> = ({ listData, template, app }) => {
+const List: ComponentImplementation<Static<typeof PropsSchema>> = ({
+  listData,
+  template,
+  app,
+}) => {
  if (!listData) {
    return null;
  }
@ -90,13 +90,10 @@ const List: ComponentImplementation<{
  return <BaseList>{listItems}</BaseList>;
 };

-const ListDataPropertySchema = Type.Array(
-  Type.Object(Type.String(), Type.String())
-);
-const TemplatePropertySchema = Type.Object(
-  Type.String(),
-  Type.Array(Type.Object(Type.String()))
-);
+const PropsSchema = Type.Object({
+  listData: Type.Array(Type.Object(Type.String(), Type.String())),
+  template: Type.Object(Type.String(), Type.Array(Type.Object(Type.String()))),
+});

 export default {
  ...createComponent({
@ -106,16 +103,7 @@ export default {
      description: 'chakra-ui list',
    },
    spec: {
-      properties: [
-        {
-          name: 'listData',
-          ...ListDataPropertySchema,
-        },
-        {
-          name: 'template',
-          ...TemplatePropertySchema,
-        },
-      ],
+      properties: PropsSchema,
      acceptTraits: [],
      methods: [],
      state: {},
--- a/packages/runtime/src/components/chakra-ui/NumberInput.tsx
+++ b/packages/runtime/src/components/chakra-ui/NumberInput.tsx
@ -10,41 +10,7 @@ import { createComponent } from '@meta-ui/core';
 import { Static, Type } from '@sinclair/typebox';
 import { ComponentImplementation } from '../../registry';

-const DefaultValuePropertySchema = Type.Optional(Type.Number());
-const MinPropertySchema = Type.Optional(Type.Number());
-const MaxPropertySchema = Type.Optional(Type.Number());
-const StepPropertySchema = Type.Optional(Type.Number());
-const PrecisionPropertySchema = Type.Optional(Type.Number());
-const ClampValueOnBlurPropertySchema = Type.Optional(Type.Boolean());
-const AllowMouseWheelPropertySchema = Type.Optional(Type.Boolean());
-
-const SizePropertySchema = Type.KeyOf(
-  Type.Object({
-    sm: Type.String(),
-    md: Type.String(),
-    lg: Type.String(),
-    xs: Type.String(),
-  })
-);
-
-const CustomerStepStylePropertySchema = Type.Object({
-  bg: Type.Optional(Type.String()),
-  children: Type.Optional(Type.String()),
-  _active: Type.Object(Type.Object({ bg: Type.String() })),
-});
-
-const NumberInput: ComponentImplementation<{
-  defaultValue?: Static<typeof DefaultValuePropertySchema>;
-  min?: Static<typeof MinPropertySchema>;
-  max?: Static<typeof MaxPropertySchema>;
-  step?: Static<typeof StepPropertySchema>;
-  precision?: Static<typeof PrecisionPropertySchema>;
-  clampValueOnBlur?: Static<typeof ClampValueOnBlurPropertySchema>;
-  allowMouseWheel?: Static<typeof AllowMouseWheelPropertySchema>;
-  size?: Static<typeof SizePropertySchema>;
-  customerIncrement?: Static<typeof CustomerStepStylePropertySchema>;
-  customerDecrement?: Static<typeof CustomerStepStylePropertySchema>;
-}> = ({
+const NumberInput: ComponentImplementation<Static<typeof PropsSchema>> = ({
  defaultValue = 0,
  min,
  max,
@ -102,6 +68,34 @@ const NumberInput: ComponentImplementation<{
  );
 };

+const PropsSchema = Type.Object({
+  defaultValue: Type.Optional(Type.Number()),
+  min: Type.Optional(Type.Number()),
+  max: Type.Optional(Type.Number()),
+  step: Type.Optional(Type.Number()),
+  precision: Type.Optional(Type.Number()),
+  clampValueOnBlur: Type.Optional(Type.Boolean()),
+  allowMouseWheel: Type.Optional(Type.Boolean()),
+  size: Type.KeyOf(
+    Type.Object({
+      sm: Type.String(),
+      md: Type.String(),
+      lg: Type.String(),
+      xs: Type.String(),
+    })
+  ),
+  customerIncrement: Type.Object({
+    bg: Type.Optional(Type.String()),
+    children: Type.Optional(Type.String()),
+    _active: Type.Object(Type.Object({ bg: Type.String() })),
+  }),
+  customerDecrement: Type.Object({
+    bg: Type.Optional(Type.String()),
+    children: Type.Optional(Type.String()),
+    _active: Type.Object(Type.Object({ bg: Type.String() })),
+  }),
+});
+
 const StateSchema = Type.Object({
  value: Type.Number(),
 });
@ -114,48 +108,7 @@ export default {
      description: 'chakra_ui number input',
    },
    spec: {
-      properties: [
-        {
-          name: 'defaultValue',
-          ...DefaultValuePropertySchema,
-        },
-        {
-          name: 'min',
-          ...MinPropertySchema,
-        },
-        {
-          name: 'max',
-          ...MaxPropertySchema,
-        },
-        {
-          name: 'step',
-          ...StepPropertySchema,
-        },
-        {
-          name: 'precision',
-          ...PrecisionPropertySchema,
-        },
-        {
-          name: 'clampValueOnBlur',
-          ...ClampValueOnBlurPropertySchema,
-        },
-        {
-          name: 'allowMouseWheel',
-          ...AllowMouseWheelPropertySchema,
-        },
-        {
-          name: 'size',
-          ...SizePropertySchema,
-        },
-        {
-          name: 'customerIncrement',
-          ...CustomerStepStylePropertySchema,
-        },
-        {
-          name: 'customerDecrement',
-          ...CustomerStepStylePropertySchema,
-        },
-      ],
+      properties: PropsSchema,
      acceptTraits: [],
      state: StateSchema,
      methods: [
--- a/packages/runtime/src/components/chakra-ui/Radio.tsx
+++ b/packages/runtime/src/components/chakra-ui/Radio.tsx
@ -3,42 +3,14 @@ import { createComponent } from '@meta-ui/core';
 import { Static, Type } from '@sinclair/typebox';
 import { Radio as BaseRadio } from '@chakra-ui/react';
 import { ComponentImplementation } from '../../registry';
-import Text, { TextProps, TextPropertySchema } from '../_internal/Text';
+import Text, { TextPropertySchema } from '../_internal/Text';
 import { ColorSchemePropertySchema } from './Types/ColorScheme';

-const IsDisabledSchema = Type.Optional(Type.Boolean());
-const IsFocusableSchema = Type.Optional(Type.Boolean());
-const IsInvalidSchema = Type.Optional(Type.Boolean());
-const IsReadOnlySchema = Type.Optional(Type.Boolean());
-const IsRequiredSchema = Type.Optional(Type.Boolean());
-const NameSchema = Type.Optional(Type.String());
-const ValueSchema = Type.Union([Type.String(), Type.Number()]);
-const SizePropertySchema = Type.KeyOf(
-  Type.Object({
-    sm: Type.String(),
-    md: Type.String(),
-    lg: Type.String(),
-  })
-);
-const SpacingSchema = Type.Optional(Type.String());
-
 const StateSchema = Type.Object({
  value: Type.String(),
 });

-const Radio: ComponentImplementation<{
-  text: TextProps['value'];
-  value: Static<typeof ValueSchema>;
-  isDisabled?: Static<typeof IsDisabledSchema>;
-  isFocusable?: Static<typeof IsFocusableSchema>;
-  isInValid?: Static<typeof IsInvalidSchema>;
-  isReadOnly?: Static<typeof IsReadOnlySchema>;
-  isRequired?: Static<typeof IsRequiredSchema>;
-  name?: Static<typeof NameSchema>;
-  size?: Static<typeof SizePropertySchema>;
-  spacing?: Static<typeof SpacingSchema>;
-  colorScheme?: Static<typeof ColorSchemePropertySchema>;
-}> = ({
+const Radio: ComponentImplementation<Static<typeof PropsSchema>> = ({
  text,
  value,
  isDisabled,
@ -77,6 +49,26 @@ const Radio: ComponentImplementation<{
  );
 };

+const PropsSchema = Type.Object({
+  text: TextPropertySchema,
+  value: Type.Union([Type.String(), Type.Number()]),
+  isDisabled: Type.Optional(Type.Boolean()),
+  isFocusable: Type.Optional(Type.Boolean()),
+  isInValid: Type.Optional(Type.Boolean()),
+  isReadOnly: Type.Optional(Type.Boolean()),
+  isRequired: Type.Optional(Type.Boolean()),
+  name: Type.Optional(Type.String()),
+  size: Type.KeyOf(
+    Type.Object({
+      sm: Type.String(),
+      md: Type.String(),
+      lg: Type.String(),
+    })
+  ),
+  spacing: Type.Optional(Type.String()),
+  colorScheme: ColorSchemePropertySchema,
+});
+
 export default {
  ...createComponent({
    version: 'chakra_ui/v1',
@ -85,52 +77,7 @@ export default {
      description: 'chakra-ui radio',
    },
    spec: {
-      properties: [
-        {
-          name: 'text',
-          ...TextPropertySchema,
-        },
-        {
-          name: 'value',
-          ...ValueSchema,
-        },
-        {
-          name: 'isDisabled',
-          ...IsDisabledSchema,
-        },
-        {
-          name: 'isFocusable',
-          ...IsFocusableSchema,
-        },
-        {
-          name: 'isInValid',
-          ...IsInvalidSchema,
-        },
-        {
-          name: 'isReadOnly',
-          ...IsReadOnlySchema,
-        },
-        {
-          name: 'isRequired',
-          ...IsReadOnlySchema,
-        },
-        {
-          name: 'name',
-          ...NameSchema,
-        },
-        {
-          name: 'size',
-          ...SizePropertySchema,
-        },
-        {
-          name: 'spacing',
-          ...SpacingSchema,
-        },
-        {
-          name: 'colorScheme',
-          ...ColorSchemePropertySchema,
-        },
-      ],
+      properties: PropsSchema,
      acceptTraits: [],
      state: StateSchema,
      methods: [],
--- a/packages/runtime/src/components/chakra-ui/RadioGroup.tsx
+++ b/packages/runtime/src/components/chakra-ui/RadioGroup.tsx
@ -5,16 +5,16 @@ import { RadioGroup as BaseRadioGroup } from '@chakra-ui/react';
 import { ComponentImplementation } from '../../registry';
 import Slot from '../_internal/Slot';

-const DefaultValueSchema = Type.Union([Type.String(), Type.Number()]);
-const IsNumericalSchema = Type.Optional(Type.Boolean());
 const StateSchema = Type.Object({
  value: Type.String(),
 });

-const RadioGroup: ComponentImplementation<{
-  defaultValue?: Static<typeof DefaultValueSchema>;
-  isNumerical?: Static<typeof IsNumericalSchema>;
-}> = ({ defaultValue, isNumerical, slotsMap, mergeState }) => {
+const RadioGroup: ComponentImplementation<Static<typeof PropsSchema>> = ({
+  defaultValue,
+  isNumerical,
+  slotsMap,
+  mergeState,
+}) => {
  const [value, setValue] = useState(defaultValue);

  useEffect(() => {
@ -34,6 +34,11 @@ const RadioGroup: ComponentImplementation<{
  );
 };

+const PropsSchema = Type.Object({
+  defaultValue: Type.Union([Type.String(), Type.Number()]),
+  isNumerical: Type.Optional(Type.Boolean()),
+});
+
 export default {
  ...createComponent({
    version: 'chakra_ui/v1',
@ -42,16 +47,7 @@ export default {
      description: 'chakra-ui radio group',
    },
    spec: {
-      properties: [
-        {
-          name: 'defaultValue',
-          ...DefaultValueSchema,
-        },
-        {
-          name: 'isNumerical',
-          ...IsNumericalSchema,
-        },
-      ],
+      properties: PropsSchema,
      acceptTraits: [],
      state: StateSchema,
      methods: [],
--- a/packages/runtime/src/components/chakra-ui/Root.tsx
+++ b/packages/runtime/src/components/chakra-ui/Root.tsx
@ -22,7 +22,7 @@ export default {
      description: 'chakra-ui provider',
    },
    spec: {
-      properties: [],
+      properties: {},
      acceptTraits: [],
      state: {},
      methods: [],
--- a/packages/runtime/src/components/chakra-ui/Select.tsx
+++ b/packages/runtime/src/components/chakra-ui/Select.tsx
@ -4,54 +4,11 @@ import { Static, Type } from '@sinclair/typebox';
 import { Select as BaseSelect } from '@chakra-ui/react';
 import { ComponentImplementation } from '../../registry';

-const OptionsSchema = Type.Array(
-  Type.Object({
-    label: Type.String(),
-    value: Type.String(),
-  })
-);
-const PlaceholderSchema = Type.Optional(Type.String());
-const DefaultValueSchema = Type.Optional(Type.String());
-const ErrorBorderColorSchema = Type.Optional(Type.String());
-const FocusBorderColorSchema = Type.Optional(Type.String());
-const IsDisabledSchema = Type.Optional(Type.Boolean());
-const IsInvalidSchema = Type.Optional(Type.Boolean());
-const IsReadOnlySchema = Type.Optional(Type.Boolean());
-const IsRequiredSchema = Type.Optional(Type.Boolean());
-const SizeSchema = Type.KeyOf(
-  Type.Object({
-    xs: Type.String(),
-    sm: Type.String(),
-    md: Type.String(),
-    lg: Type.String(),
-  })
-);
-const VariantSchema = Type.KeyOf(
-  Type.Object({
-    outline: Type.String(),
-    unstyled: Type.String(),
-    filled: Type.String(),
-    flushed: Type.String(),
-  })
-);
-
 const StateSchema = Type.Object({
  value: Type.String(),
 });

-const Select: ComponentImplementation<{
-  options: Static<typeof OptionsSchema>;
-  placeholder?: Static<typeof PlaceholderSchema>;
-  defaultValue?: Static<typeof DefaultValueSchema>;
-  errorBorderColor?: Static<typeof ErrorBorderColorSchema>;
-  focusBorderColor?: Static<typeof FocusBorderColorSchema>;
-  isDisabled?: Static<typeof IsDisabledSchema>;
-  isInvalid?: Static<typeof IsInvalidSchema>;
-  isReadOnly?: Static<typeof IsReadOnlySchema>;
-  isRequired?: Static<typeof IsRequiredSchema>;
-  size?: Static<typeof SizeSchema>;
-  variant?: Static<typeof VariantSchema>;
-}> = ({
+const Select: ComponentImplementation<Static<typeof PropsSchema>> = ({
  options,
  placeholder,
  defaultValue,
@ -97,6 +54,39 @@ const Select: ComponentImplementation<{
  );
 };

+const PropsSchema = Type.Object({
+  options: Type.Array(
+    Type.Object({
+      label: Type.String(),
+      value: Type.String(),
+    })
+  ),
+  placeholder: Type.Optional(Type.String()),
+  defaultValue: Type.Optional(Type.String()),
+  errorBorderColor: Type.Optional(Type.String()),
+  focusBorderColor: Type.Optional(Type.String()),
+  isDisabled: Type.Optional(Type.Boolean()),
+  isInvalid: Type.Optional(Type.Boolean()),
+  isReadOnly: Type.Optional(Type.Boolean()),
+  isRequired: Type.Optional(Type.Boolean()),
+  size: Type.KeyOf(
+    Type.Object({
+      xs: Type.String(),
+      sm: Type.String(),
+      md: Type.String(),
+      lg: Type.String(),
+    })
+  ),
+  variant: Type.KeyOf(
+    Type.Object({
+      outline: Type.String(),
+      unstyled: Type.String(),
+      filled: Type.String(),
+      flushed: Type.String(),
+    })
+  ),
+});
+
 export default {
  ...createComponent({
    version: 'chakra_ui/v1',
@ -105,52 +95,7 @@ export default {
      description: 'chakra-ui select',
    },
    spec: {
-      properties: [
-        {
-          name: 'options',
-          ...OptionsSchema,
-        },
-        {
-          name: 'placeholder',
-          ...PlaceholderSchema,
-        },
-        {
-          name: 'defaultValue',
-          ...DefaultValueSchema,
-        },
-        {
-          name: 'errorBorderColor',
-          ...ErrorBorderColorSchema,
-        },
-        {
-          name: 'focusBorderColor',
-          ...FocusBorderColorSchema,
-        },
-        {
-          name: 'isDisabled',
-          ...IsDisabledSchema,
-        },
-        {
-          name: 'isInvalid',
-          ...IsInvalidSchema,
-        },
-        {
-          name: 'isReadOnly',
-          ...IsReadOnlySchema,
-        },
-        {
-          name: 'isRequired',
-          ...IsRequiredSchema,
-        },
-        {
-          name: 'size',
-          ...SizeSchema,
-        },
-        {
-          name: 'variant',
-          ...VariantSchema,
-        },
-      ],
+      properties: PropsSchema,
      acceptTraits: [],
      state: StateSchema,
      methods: [],
--- a/packages/runtime/src/components/chakra-ui/Stack.tsx
+++ b/packages/runtime/src/components/chakra-ui/Stack.tsx
@ -36,13 +36,14 @@ export const AlignItemsSchema = Type.String();
 export const JustifyContentSchema = Type.String();
 export const SpacingSchema = Type.Union([Type.String(), Type.Number()]);

-const Stack: ComponentImplementation<{
-  direction?: Static<typeof DirectionSchema>;
-  wrap?: Static<typeof FlexWrapSchema>;
-  align?: Static<typeof AlignItemsSchema>;
-  justify?: Static<typeof JustifyContentSchema>;
-  spacing?: Static<typeof SpacingSchema>;
-}> = ({ direction, wrap, align, justify, spacing, slotsMap }) => {
+const Stack: ComponentImplementation<Static<typeof PropsSchema>> = ({
+  direction,
+  wrap,
+  align,
+  justify,
+  spacing,
+  slotsMap,
+}) => {
  return (
    <BaseStack {...{ direction, wrap, align, justify, spacing }}>
      <Slot slotsMap={slotsMap} slot="content" />
@ -50,6 +51,14 @@ const Stack: ComponentImplementation<{
  );
 };

+const PropsSchema = Type.Object({
+  direction: DirectionSchema,
+  wrap: FlexWrapSchema,
+  align: AlignItemsSchema,
+  justify: JustifyContentSchema,
+  spacing: SpacingSchema,
+});
+
 export default {
  ...createComponent({
    version: 'chakra_ui/v1',
@ -58,28 +67,7 @@ export default {
      description: 'chakra-ui stack',
    },
    spec: {
-      properties: [
-        {
-          name: 'diection',
-          ...DirectionSchema,
-        },
-        {
-          name: 'wrap',
-          ...FlexWrapSchema,
-        },
-        {
-          name: 'align',
-          ...AlignItemsSchema,
-        },
-        {
-          name: 'justify',
-          ...JustifyContentSchema,
-        },
-        {
-          name: 'spacing',
-          ...SpacingSchema,
-        },
-      ],
+      properties: PropsSchema,
      acceptTraits: [],
      state: {},
      methods: [],
--- a/packages/runtime/src/components/chakra-ui/Table/index.ts
+++ b/packages/runtime/src/components/chakra-ui/Table/index.ts
@ -1,4 +1,5 @@
 import { createComponent } from '@meta-ui/core';
+import { Type } from '@sinclair/typebox';
 import { TableImpl } from './Table';
 import {
  ColumnsPropertySchema,
@ -10,6 +11,15 @@ import {
  IsMultiSelectPropertySchema,
 } from './TableTypes';

+const PropsSchema = Type.Object({
+  data: DataPropertySchema,
+  majorKey: MajorKeyPropertySchema,
+  rowsPerPage: RowsPerPagePropertySchema,
+  size: TableSizePropertySchema,
+  columns: ColumnsPropertySchema,
+  isMultiSelect: IsMultiSelectPropertySchema,
+});
+
 export default {
  ...createComponent({
    version: 'chakra_ui/v1',
@ -18,32 +28,7 @@ export default {
      description: 'chakra-ui table',
    },
    spec: {
-      properties: [
-        {
-          name: 'data',
-          ...DataPropertySchema,
-        },
-        {
-          name: 'majorKey',
-          ...MajorKeyPropertySchema,
-        },
-        {
-          name: 'rowsPerPage',
-          ...RowsPerPagePropertySchema,
-        },
-        {
-          name: 'size',
-          ...TableSizePropertySchema,
-        },
-        {
-          name: 'columns',
-          ...ColumnsPropertySchema,
-        },
-        {
-          name: 'isMultiSelect',
-          ...IsMultiSelectPropertySchema,
-        },
-      ],
+      properties: PropsSchema,
      acceptTraits: [],
      state: TableStateSchema,
      methods: [],
--- a/packages/runtime/src/components/chakra-ui/Tabs.tsx
+++ b/packages/runtime/src/components/chakra-ui/Tabs.tsx
@ -11,12 +11,13 @@ import { Type, Static } from '@sinclair/typebox';
 import { ComponentImplementation } from '../../registry';
 import Slot from '../_internal/Slot';

-const Tabs: ComponentImplementation<{
-  tabNames: Static<typeof TabNamesPropertySchema>;
-  initialSelectedTabIndex?: Static<
-    typeof InitialSelectedTabIndexPropertySchema
-  >;
-}> = ({ tabNames, mergeState, initialSelectedTabIndex, slotsMap, style }) => {
+const Tabs: ComponentImplementation<Static<typeof PropsSchema>> = ({
+  tabNames,
+  mergeState,
+  initialSelectedTabIndex,
+  slotsMap,
+  style,
+}) => {
  const [selectedTabIndex, setSelectedTabIndex] = useState(
    initialSelectedTabIndex ?? 0
  );
@ -47,13 +48,15 @@ const Tabs: ComponentImplementation<{
  );
 };

-const TabNamesPropertySchema = Type.Array(Type.String());
-const InitialSelectedTabIndexPropertySchema = Type.Optional(Type.Number());
-
 const StateSchema = Type.Object({
  selectedTabIndex: Type.Number(),
 });

+const PropsSchema = Type.Object({
+  tabNames: Type.Array(Type.String()),
+  initialSelectedTabIndex: Type.Optional(Type.Number()),
+});
+
 export default {
  ...createComponent({
    version: 'chakra_ui/v1',
@ -62,16 +65,7 @@ export default {
      description: 'chakra-ui tabs',
    },
    spec: {
-      properties: [
-        {
-          name: 'tabNames',
-          ...TabNamesPropertySchema,
-        },
-        {
-          name: 'initialSelectedTabIndex',
-          ...InitialSelectedTabIndexPropertySchema,
-        },
-      ],
+      properties: PropsSchema,
      acceptTraits: [],
      state: StateSchema,
      methods: [],
--- a/packages/runtime/src/components/chakra-ui/Tooltip.tsx
+++ b/packages/runtime/src/components/chakra-ui/Tooltip.tsx
@ -2,20 +2,12 @@ import React from 'react';
 import { createComponent } from '@meta-ui/core';
 import { Static, Type } from '@sinclair/typebox';
 import { Tooltip } from '@chakra-ui/react';
-import { TextProps, TextPropertySchema } from '../_internal/Text';
+import { TextPropertySchema } from '../_internal/Text';
 import { ComponentImplementation } from '../../registry';
 import Slot from '../_internal/Slot';
 import { ColorSchemePropertySchema } from './Types/ColorScheme';

-const TooltipImpl: ComponentImplementation<{
-  text: TextProps['value'];
-  shouldWrapChildren: boolean;
-  placement: Static<typeof PlacementPropertySchema>;
-  isOpen: boolean;
-  hasArrow: boolean;
-  isDisabled: boolean;
-  defaultIsOpen: boolean;
-}> = ({
+const TooltipImpl: ComponentImplementation<Static<typeof PropsSchema>> = ({
  text,
  shouldWrapChildren,
  placement = 'auto',
@ -42,27 +34,37 @@ const TooltipImpl: ComponentImplementation<{
    </Tooltip>
  );
 };
-export const PlacementPropertySchema = Type.Optional(
-  Type.KeyOf(
-    Type.Object({
-      top: Type.String(),
-      right: Type.String(),
-      bottom: Type.String(),
-      left: Type.String(),
-      auto: Type.String(),
-      'auto-start': Type.String(),
-      'auto-end': Type.String(),
-      'top-start': Type.String(),
-      'top-end': Type.String(),
-      'bottom-start': Type.String(),
-      'bottom-end': Type.String(),
-      'right-start': Type.String(),
-      'right-end': Type.String(),
-      'left-start': Type.String(),
-      'left-end': Type.String(),
-    })
-  )
-);
+
+const PropsSchema = Type.Object({
+  text: TextPropertySchema,
+  colorScheme: ColorSchemePropertySchema,
+  shouldWrapChildren: Type.Boolean(),
+  defaultIsOpen: Type.Boolean(),
+  hasArrow: Type.Boolean(),
+  isDisabled: Type.Boolean(),
+  isOpen: Type.Boolean(),
+  placement: Type.Optional(
+    Type.KeyOf(
+      Type.Object({
+        top: Type.String(),
+        right: Type.String(),
+        bottom: Type.String(),
+        left: Type.String(),
+        auto: Type.String(),
+        'auto-start': Type.String(),
+        'auto-end': Type.String(),
+        'top-start': Type.String(),
+        'top-end': Type.String(),
+        'bottom-start': Type.String(),
+        'bottom-end': Type.String(),
+        'right-start': Type.String(),
+        'right-end': Type.String(),
+        'left-start': Type.String(),
+        'left-end': Type.String(),
+      })
+    )
+  ),
+});

 export default {
  ...createComponent({
@ -72,40 +74,7 @@ export default {
      description: 'chakra-ui tooltip',
    },
    spec: {
-      properties: [
-        {
-          name: 'text',
-          ...TextPropertySchema,
-        },
-        {
-          name: 'colorScheme',
-          ...ColorSchemePropertySchema,
-        },
-        {
-          name: 'shouldWrapChildren',
-          ...Type.Boolean(),
-        },
-        {
-          name: 'defaultIsOpen',
-          ...Type.Boolean(),
-        },
-        {
-          name: 'hasArrow',
-          ...Type.Boolean(),
-        },
-        {
-          name: 'isDisabled',
-          ...Type.Boolean(),
-        },
-        {
-          name: 'isOpen',
-          ...Type.Boolean(),
-        },
-        {
-          name: 'placement',
-          ...PlacementPropertySchema,
-        },
-      ],
+      properties: PropsSchema,
      acceptTraits: [],
      state: {},
      methods: [],
--- a/packages/runtime/src/components/chakra-ui/VStack.tsx
+++ b/packages/runtime/src/components/chakra-ui/VStack.tsx
@ -1,6 +1,6 @@
 import React from 'react';
 import { createComponent } from '@meta-ui/core';
-import { Static } from '@sinclair/typebox';
+import { Static, Type } from '@sinclair/typebox';
 import { VStack as BaseVStack } from '@chakra-ui/react';
 import { ComponentImplementation } from '../../registry';
 import Slot from '../_internal/Slot';
@ -12,13 +12,14 @@ import {
  SpacingSchema,
 } from './Stack';

-const VStack: ComponentImplementation<{
-  direction?: Static<typeof DirectionSchema>;
-  wrap?: Static<typeof FlexWrapSchema>;
-  align?: Static<typeof AlignItemsSchema>;
-  justify?: Static<typeof JustifyContentSchema>;
-  spacing?: Static<typeof SpacingSchema>;
-}> = ({ direction, wrap, align, justify, spacing, slotsMap }) => {
+const VStack: ComponentImplementation<Static<typeof PropsSchema>> = ({
+  direction,
+  wrap,
+  align,
+  justify,
+  spacing,
+  slotsMap,
+}) => {
  return (
    <BaseVStack {...{ direction, wrap, align, justify, spacing }}>
      <Slot slotsMap={slotsMap} slot="content" />
@ -26,6 +27,14 @@ const VStack: ComponentImplementation<{
  );
 };

+const PropsSchema = Type.Object({
+  direction: DirectionSchema,
+  wrap: FlexWrapSchema,
+  align: AlignItemsSchema,
+  justify: JustifyContentSchema,
+  spacing: SpacingSchema,
+});
+
 export default {
  ...createComponent({
    version: 'chakra_ui/v1',
@ -34,28 +43,7 @@ export default {
      description: 'chakra-ui vstack',
    },
    spec: {
-      properties: [
-        {
-          name: 'diection',
-          ...DirectionSchema,
-        },
-        {
-          name: 'wrap',
-          ...FlexWrapSchema,
-        },
-        {
-          name: 'align',
-          ...AlignItemsSchema,
-        },
-        {
-          name: 'justify',
-          ...JustifyContentSchema,
-        },
-        {
-          name: 'spacing',
-          ...SpacingSchema,
-        },
-      ],
+      properties: PropsSchema,
      acceptTraits: [],
      state: {},
      methods: [],
--- a/packages/runtime/src/components/core/Dummy.tsx
+++ b/packages/runtime/src/components/core/Dummy.tsx
@ -12,7 +12,7 @@ export default {
      description: 'Dummy Invisible component',
    },
    spec: {
-      properties: [],
+      properties: {},
      acceptTraits: [],
      state: {},
      methods: [],
--- a/packages/runtime/src/components/core/GridLayout.tsx
+++ b/packages/runtime/src/components/core/GridLayout.tsx
@ -3,15 +3,16 @@ import { ComponentImplementation } from '../../registry';
 import { createComponent } from '@meta-ui/core';
 import { getSlots } from '../_internal/Slot';
 import { LayoutPropertySchema } from '../../components/_internal/GridLayout';
-import { Static } from '@sinclair/typebox';
+import { Static, Type } from '@sinclair/typebox';

 const BaseGridLayout = React.lazy(
  () => import('../../components/_internal/GridLayout')
 );

-const GridLayout: ComponentImplementation<{
-  layout: Static<typeof LayoutPropertySchema>;
-}> = ({ slotsMap, layout = [] }) => {
+const GridLayout: ComponentImplementation<Static<typeof PropsSchema>> = ({
+  slotsMap,
+  layout = [],
+}) => {
  return (
    <Suspense fallback={null}>
      <BaseGridLayout layout={layout}>
@ -21,6 +22,10 @@ const GridLayout: ComponentImplementation<{
  );
 };

+const PropsSchema = Type.Object({
+  layout: LayoutPropertySchema,
+});
+
 export default {
  ...createComponent({
    version: 'core/v1',
@ -29,7 +34,7 @@ export default {
      description: 'drag and drop to layout in a grid',
    },
    spec: {
-      properties: [{ name: 'layout', ...LayoutPropertySchema }],
+      properties: PropsSchema,
      acceptTraits: [],
      state: {},
      methods: [],
--- a/packages/runtime/src/components/core/Router/index.tsx
+++ b/packages/runtime/src/components/core/Router/index.tsx
@ -37,6 +37,21 @@ const SwitchPolicyPropertySchema = Type.Array(
  })
 );

+const PropsSchema = Type.Object({
+  switchPolicy: Type.Array(
+    Type.Object({
+      type: Type.Enum(RouteType), // redirect, route
+      default: Type.Boolean(), //only the first one with default will be treated as default component;
+      path: Type.String(),
+      slotId: Type.String(),
+      href: Type.Optional(Type.String()), // work for redirect
+      strict: Type.Optional(Type.Boolean()),
+      exact: Type.Optional(Type.Boolean()),
+      sensitive: Type.Optional(Type.Boolean()),
+    })
+  ),
+});
+
 export default {
  ...createComponent({
    version: 'core/v1',
@ -45,12 +60,7 @@ export default {
      description: 'create a router-controlled component',
    },
    spec: {
-      properties: [
-        {
-          name: 'switchPolicy',
-          ...SwitchPolicyPropertySchema,
-        },
-      ],
+      properties: PropsSchema,
      acceptTraits: [],
      state: {},
      methods: [],
--- a/packages/runtime/src/components/core/Text.tsx
+++ b/packages/runtime/src/components/core/Text.tsx
@ -1,10 +1,13 @@
 import React from 'react';
 import { createComponent } from '@meta-ui/core';
-import { Type } from '@sinclair/typebox';
+import { Type, Static } from '@sinclair/typebox';
 import { ComponentImplementation } from '../../registry';
-import _Text, { TextProps, TextPropertySchema } from '../_internal/Text';
+import _Text, { TextPropertySchema } from '../_internal/Text';

-const Text: ComponentImplementation<TextProps> = ({ value, style }) => {
+const Text: ComponentImplementation<Static<typeof PropsSchema>> = ({
+  value,
+  style,
+}) => {
  return <_Text value={value} style={style} />;
 };

@ -12,6 +15,10 @@ const StateSchema = Type.Object({
  value: Type.String(),
 });

+const PropsSchema = Type.Object({
+  value: TextPropertySchema,
+});
+
 export default {
  ...createComponent({
    version: 'core/v1',
@ -20,12 +27,7 @@ export default {
      description: 'support plain and markdown formats',
    },
    spec: {
-      properties: [
-        {
-          name: 'value',
-          ...TextPropertySchema,
-        },
-      ],
+      properties: PropsSchema,
      acceptTraits: [],
      state: StateSchema,
      methods: [],
--- a/packages/runtime/src/components/lab/Editor.tsx
+++ b/packages/runtime/src/components/lab/Editor.tsx
@ -90,7 +90,7 @@ export default {
      description: 'experimental app editor',
    },
    spec: {
-      properties: [],
+      properties: {},
      acceptTraits: [],
      state: {},
      methods: [],
--- a/packages/runtime/src/components/plain/Button.tsx
+++ b/packages/runtime/src/components/plain/Button.tsx
@ -1,12 +1,15 @@
 import React, { useEffect, useRef } from 'react';
 import { createComponent } from '@meta-ui/core';
-import { Type } from '@sinclair/typebox';
-import Text, { TextProps, TextPropertySchema } from '../_internal/Text';
+import { Type, Static } from '@sinclair/typebox';
+import Text, { TextPropertySchema } from '../_internal/Text';
 import { ComponentImplementation } from '../../registry';

-const Button: ComponentImplementation<{
-  text: TextProps['value'];
-}> = ({ text, mergeState, subscribeMethods, callbackMap }) => {
+const Button: ComponentImplementation<Static<typeof PropsSchema>> = ({
+  text,
+  mergeState,
+  subscribeMethods,
+  callbackMap,
+}) => {
  useEffect(() => {
    mergeState({ value: text.raw });
  }, [text.raw]);
@ -31,6 +34,10 @@ const StateSchema = Type.Object({
  value: Type.String(),
 });

+const PropsSchema = Type.Object({
+  text: TextPropertySchema,
+});
+
 export default {
  ...createComponent({
    version: 'plain/v1',
@ -39,12 +46,7 @@ export default {
      description: 'plain button',
    },
    spec: {
-      properties: [
-        {
-          name: 'text',
-          ...TextPropertySchema,
-        },
-      ],
+      properties: PropsSchema,
      acceptTraits: [],
      state: StateSchema,
      methods: [
--- a/packages/runtime/src/traits/core/arrayState.tsx
+++ b/packages/runtime/src/traits/core/arrayState.tsx
@ -7,10 +7,13 @@ const HasInitializedMap = new Map<string, boolean>();

 type KeyValue = { key: string; value: unknown };

-const ArrayStateTrait: TraitImplementation<{
-  key: Static<typeof KeyPropertySchema>;
-  initialValue: Static<typeof InitialValuePropertySchema>;
-}> = ({ key, initialValue, componentId, mergeState, subscribeMethods }) => {
+const ArrayStateTrait: TraitImplementation<Static<typeof PropsSchema>> = ({
+  key,
+  initialValue,
+  componentId,
+  mergeState,
+  subscribeMethods,
+}) => {
  const hashId = `#${componentId}@${key}`;
  const hasInitialized = HasInitializedMap.get(hashId);

@ -50,8 +53,10 @@ const ArrayStateTrait: TraitImplementation<{
  };
 };

-const KeyPropertySchema = Type.String();
-const InitialValuePropertySchema = Type.Array(Type.Any());
+const PropsSchema = Type.Object({
+  key: Type.String(),
+  initialValue: Type.Array(Type.Any()),
+});

 export default {
  ...createTrait({
@ -61,16 +66,7 @@ export default {
      description: 'add array state to component',
    },
    spec: {
-      properties: [
-        {
-          name: 'key',
-          ...KeyPropertySchema,
-        },
-        {
-          name: 'initialValue',
-          ...InitialValuePropertySchema,
-        },
-      ],
+      properties: PropsSchema,
      state: Type.Any(),
      methods: [
        {
--- a/packages/runtime/src/traits/core/event.tsx
+++ b/packages/runtime/src/traits/core/event.tsx
@ -4,9 +4,9 @@ import { debounce, throttle, delay } from 'lodash';
 import { CallbackMap, TraitImplementation } from '../../registry';
 import { apiService } from '../../api-service';

-const useEventTrait: TraitImplementation<{
-  events: Static<typeof EventsPropertySchema>;
-}> = ({ events }) => {
+const useEventTrait: TraitImplementation<Static<typeof PropsSchema>> = ({
+  events,
+}) => {
  const callbackQueueMap: Record<string, Array<() => void>> = {};

  // setup current handlers
@ -33,10 +33,10 @@ const useEventTrait: TraitImplementation<{
      event.wait.type === 'debounce'
        ? debounce(handler, event.wait.time)
        : event.wait.type === 'throttle'
-          ? throttle(handler, event.wait.time)
-          : event.wait.type === 'delay'
-            ? () => delay(handler, event.wait.time)
-            : handler
+        ? throttle(handler, event.wait.time)
+        : event.wait.type === 'delay'
+        ? () => delay(handler, event.wait.time)
+        : handler
    );
  }

@ -59,27 +59,29 @@ const useEventTrait: TraitImplementation<{
  };
 };

-const EventsPropertySchema = Type.Array(
-  Type.Object({
-    event: Type.String(),
-    componentId: Type.String(),
-    method: Type.Object({
-      name: Type.String(),
-      parameters: Type.Any(),
-    }),
-    wait: Type.Object({
-      type: Type.KeyOf(
-        Type.Object({
-          debounce: Type.String(),
-          throttle: Type.String(),
-          delay: Type.String(),
-        })
-      ),
-      time: Type.Number(),
-    }),
-    disabled: Type.Boolean(),
-  })
-);
+const PropsSchema = Type.Object({
+  events: Type.Array(
+    Type.Object({
+      event: Type.String(),
+      componentId: Type.String(),
+      method: Type.Object({
+        name: Type.String(),
+        parameters: Type.Any(),
+      }),
+      wait: Type.Object({
+        type: Type.KeyOf(
+          Type.Object({
+            debounce: Type.String(),
+            throttle: Type.String(),
+            delay: Type.String(),
+          })
+        ),
+        time: Type.Number(),
+      }),
+      disabled: Type.Boolean(),
+    })
+  ),
+});

 export default {
  ...createTrait({
@ -89,12 +91,7 @@ export default {
      description: 'export component events with advance features',
    },
    spec: {
-      properties: [
-        {
-          name: 'events',
-          ...EventsPropertySchema,
-        },
-      ],
+      properties: PropsSchema,
      state: {},
      methods: [],
    },
--- a/packages/runtime/src/traits/core/fetch.tsx
+++ b/packages/runtime/src/traits/core/fetch.tsx
@ -6,7 +6,7 @@ import { CallMethodSchema } from '../../types/CallMethodSchema';

 const hasFetchedMap = new Map<string, boolean>();

-const useFetchTrait: TraitImplementation<FetchPropertySchema> = ({
+const useFetchTrait: TraitImplementation<Static<typeof PropsSchema>> = ({
  url,
  method,
  lazy: _lazy,
@ -101,23 +101,16 @@ const useFetchTrait: TraitImplementation<FetchPropertySchema> = ({
  };
 };

-const UrlPropertySchema = Type.String(); // {format:uri}?;
-const MethodPropertySchema = Type.String(); // {pattern: /^(get|post|put|delete)$/i}
-const LazyPropertySchema = Type.Boolean();
-const HeaderPropertySchema = Type.Array(
-  Type.Object({ key: Type.String(), value: Type.String() })
-);
-const BodyPropertySchema = Type.Any(); // Type.String()?
-const OnCompletePropertySchema = Type.Array(CallMethodSchema);
-
-type FetchPropertySchema = {
-  url: Static<typeof UrlPropertySchema>;
-  method: Static<typeof MethodPropertySchema>;
-  lazy?: Static<typeof LazyPropertySchema>;
-  headers?: Static<typeof HeaderPropertySchema>;
-  body?: Static<typeof BodyPropertySchema>;
-  onComplete?: Static<typeof OnCompletePropertySchema>;
-};
+const PropsSchema = Type.Object({
+  url: Type.String(), // {format:uri}?;
+  method: Type.String(), // {pattern: /^(get|post|put|delete)$/i}
+  lazy: Type.Boolean(),
+  headers: Type.Array(
+    Type.Object({ key: Type.String(), value: Type.String() })
+  ),
+  body: Type.Any(),
+  onComplete: Type.Array(CallMethodSchema),
+});

 export default {
  ...createTrait({
@ -127,28 +120,7 @@ export default {
      description: 'fetch data to store',
    },
    spec: {
-      properties: [
-        {
-          name: 'url',
-          ...UrlPropertySchema,
-        },
-        {
-          name: 'method',
-          ...MethodPropertySchema,
-        },
-        {
-          name: 'lazy',
-          ...LazyPropertySchema,
-        },
-        {
-          name: 'headers',
-          ...HeaderPropertySchema,
-        },
-        {
-          name: 'body',
-          ...BodyPropertySchema,
-        },
-      ],
+      properties: PropsSchema,
      state: Type.Object({
        fetch: Type.Object({
          loading: Type.Boolean(),
--- a/packages/runtime/src/traits/core/hidden.tsx
+++ b/packages/runtime/src/traits/core/hidden.tsx
@ -3,11 +3,9 @@ import { createTrait } from '@meta-ui/core';
 import { Static, Type } from '@sinclair/typebox';
 import { TraitImplementation } from '../../registry';

-type HiddenProps = {
-  hidden: Static<typeof HiddenPropertySchema>;
-};
-
-const useHiddenTrait: TraitImplementation<HiddenProps> = ({ hidden }) => {
+const useHiddenTrait: TraitImplementation<Static<typeof PropsSchema>> = ({
+  hidden,
+}) => {
  const style: CSSProperties = {};
  if (hidden) {
    style.display = 'none';
@ -19,7 +17,9 @@ const useHiddenTrait: TraitImplementation<HiddenProps> = ({ hidden }) => {
  };
 };

-const HiddenPropertySchema = Type.Union([Type.Boolean(), Type.String()]);
+const PropsSchema = Type.Object({
+  hidden: Type.Boolean(),
+});

 export default {
  ...createTrait({
@ -29,12 +29,7 @@ export default {
      description: 'render component with condition',
    },
    spec: {
-      properties: [
-        {
-          name: 'hidden',
-          ...HiddenPropertySchema,
-        },
-      ],
+      properties: PropsSchema,
      state: {},
      methods: [],
    },
--- a/packages/runtime/src/traits/core/slot.tsx
+++ b/packages/runtime/src/traits/core/slot.tsx
@ -6,6 +6,10 @@ export const ContainerPropertySchema = Type.Object({
  slot: Type.String(),
 });

+const PropsSchema = Type.Object({
+  container: ContainerPropertySchema,
+});
+
 export default {
  ...createTrait({
    version: 'core/v1',
@ -14,12 +18,7 @@ export default {
      description: 'nested components by slots',
    },
    spec: {
-      properties: [
-        {
-          name: 'container',
-          ...ContainerPropertySchema,
-        },
-      ],
+      properties: PropsSchema,
      state: {},
      methods: [],
    },
--- a/packages/runtime/src/traits/core/state.tsx
+++ b/packages/runtime/src/traits/core/state.tsx
@ -6,10 +6,13 @@ const HasInitializedMap = new Map<string, boolean>();

 type KeyValue = { key: string; value: unknown };

-const useStateTrait: TraitImplementation<{
-  key: Static<typeof KeyPropertySchema>;
-  initialValue: Static<typeof InitialValuePropertySchema>;
-}> = ({ key, initialValue, componentId, mergeState, subscribeMethods }) => {
+const useStateTrait: TraitImplementation<Static<typeof PropsSchema>> = ({
+  key,
+  initialValue,
+  componentId,
+  mergeState,
+  subscribeMethods,
+}) => {
  const hashId = `#${componentId}@${key}`;
  const hasInitialized = HasInitializedMap.get(hashId);

@ -33,8 +36,10 @@ const useStateTrait: TraitImplementation<{
  };
 };

-const KeyPropertySchema = Type.String();
-const InitialValuePropertySchema = Type.Any();
+const PropsSchema = Type.Object({
+  key: Type.String(),
+  initialValue: Type.Any(),
+});

 export default {
  ...createTrait({
@ -44,16 +49,7 @@ export default {
      description: 'add state to component',
    },
    spec: {
-      properties: [
-        {
-          name: 'key',
-          ...KeyPropertySchema,
-        },
-        {
-          name: 'initialValue',
-          ...InitialValuePropertySchema,
-        },
-      ],
+      properties: PropsSchema,
      state: Type.Any(),
      methods: [
        {
--- a/packages/runtime/src/traits/core/style.tsx
+++ b/packages/runtime/src/traits/core/style.tsx
@ -3,7 +3,7 @@ import { Static, Type } from '@sinclair/typebox';
 import { TraitImplementation } from '../../registry';

 const StyleTrait: TraitImplementation<{
-  style: Static<typeof StylesPropertySchema>;
+  style: Static<typeof PropsSchema>;
 }> = ({ style }) => {
  return {
    props: {
@ -12,7 +12,9 @@ const StyleTrait: TraitImplementation<{
  };
 };

-const StylesPropertySchema = Type.Array(Type.Object(Type.String()));
+const PropsSchema = Type.Object({
+  string: Type.Object(Type.String()),
+});
 export default {
  ...createTrait({
    version: 'core/v1',
@ -21,12 +23,7 @@ export default {
      description: 'add style to component',
    },
    spec: {
-      properties: [
-        {
-          name: 'style',
-          ...StylesPropertySchema,
-        },
-      ],
+      properties: PropsSchema,
      state: {},
      methods: [],
    },
--- a/packages/runtime/src/traits/core/validation.tsx
+++ b/packages/runtime/src/traits/core/validation.tsx
@ -41,60 +41,57 @@ addValidationRule('phoneNumber', text => {
  }
 });

-type ValidationProps = {
-  value: string;
-  minLength: number;
-  maxLength: number;
-  rule: string;
-};
-
 const ValidationResultCache: Record<string, ValidationResult> = {};

-const ValidationTraitImpl: TraitImplementation<ValidationProps> = props => {
-  const { value, minLength, maxLength, mergeState, componentId, rule } = props;
+const ValidationTraitImpl: TraitImplementation<Static<typeof PropsSchema>> =
+  props => {
+    const { value, minLength, maxLength, mergeState, componentId, rule } =
+      props;

-  const result: ValidationResult = {
-    isInvalid: false,
-    errorMsg: '',
-  };
+    const result: ValidationResult = {
+      isInvalid: false,
+      errorMsg: '',
+    };

-  if (value.length > maxLength) {
-    result.isInvalid = true;
-    result.errorMsg = `最长不能超过${maxLength}个字符`;
-  } else if (value.length < minLength) {
-    result.isInvalid = true;
-    result.errorMsg = `不能少于${minLength}个字符`;
-  } else {
-    const rulesArr = rule ? rule.split(',') : [];
-    for (const ruleName of rulesArr) {
-      const validateFunc = rules.get(ruleName);
-      if (validateFunc) {
-        const { isInvalid, errorMsg } = validateFunc(value);
-        if (isInvalid) {
-          result.isInvalid = true;
-          result.errorMsg = errorMsg;
-          break;
+    if (value.length > maxLength) {
+      result.isInvalid = true;
+      result.errorMsg = `最长不能超过${maxLength}个字符`;
+    } else if (value.length < minLength) {
+      result.isInvalid = true;
+      result.errorMsg = `不能少于${minLength}个字符`;
+    } else {
+      const rulesArr = rule ? rule.split(',') : [];
+      for (const ruleName of rulesArr) {
+        const validateFunc = rules.get(ruleName);
+        if (validateFunc) {
+          const { isInvalid, errorMsg } = validateFunc(value);
+          if (isInvalid) {
+            result.isInvalid = true;
+            result.errorMsg = errorMsg;
+            break;
+          }
        }
      }
    }
-  }

-  if (!isEqual(result, ValidationResultCache[componentId])) {
-    ValidationResultCache[componentId] = result;
-    mergeState({
-      validResult: result,
-    });
-  }
+    if (!isEqual(result, ValidationResultCache[componentId])) {
+      ValidationResultCache[componentId] = result;
+      mergeState({
+        validResult: result,
+      });
+    }

-  return {
-    props: null,
+    return {
+      props: null,
+    };
  };
-};

-const ValidationValuePropertySchema = Type.String();
-const ValidationRulePropertySchema = Type.String();
-const ValidationMinLengthPropertySchema = Type.Integer();
-const ValidationMaxLengthPropertySchema = Type.Integer();
+const PropsSchema = Type.Object({
+  value: Type.String(),
+  rule: Type.String(),
+  maxLength: Type.Integer(),
+  minLength: Type.Integer(),
+});

 export default {
  ...createTrait({
@ -104,24 +101,7 @@ export default {
      description: 'validation trait',
    },
    spec: {
-      properties: [
-        {
-          name: 'value',
-          ...ValidationValuePropertySchema,
-        },
-        {
-          name: 'rule',
-          ...ValidationRulePropertySchema,
-        },
-        {
-          name: 'minLength',
-          ...ValidationMinLengthPropertySchema,
-        },
-        {
-          name: 'maxLength',
-          ...ValidationMaxLengthPropertySchema,
-        },
-      ],
+      properties: PropsSchema,
      state: Type.Object({
        validResult: ValidResultSchema,
      }),
--- a/spec/zh_CN/SPEC.md
+++ b/spec/zh_CN/SPEC.md
@ -50,12 +50,12 @@ Component 的模型定义了自身对外提供的配置项与可接受的 trait

 ### ComponentSpec

-| Attribute    | Type           | Required | Default Value | Description                 |
-| ------------ | -------------- | -------- | ------------- | --------------------------- |
-| properties   | JSONSchema[]   | Y        | {}            | Component 配置项定义        |
-| acceptTraits | TraitSchema[]  | Y        | []            | Component 可适配的 Trait    |
-| state        | JSONSchema     | Y        | {}            | 外部可访问的 Component 状态 |
-| methods      | MethodSchema[] | Y        | []            | 外部可调用的 Component 方法 |
+| Attribute    | Type             | Required | Default Value | Description                 |
+| ------------ | ---------------- | -------- | ------------- | --------------------------- |
+| properties   | JSONSchemaObject | Y        | {}            | Component 配置项定义        |
+| acceptTraits | TraitSchema[]    | Y        | []            | Component 可适配的 Trait    |
+| state        | JSONSchema       | Y        | {}            | 外部可访问的 Component 状态 |
+| methods      | MethodSchema[]   | Y        | []            | 外部可调用的 Component 方法 |

 ### TraitSchema

@ -148,11 +148,11 @@ Trait 定义了自身提供的 runtime 能力以及与 Component 交互的方式

 ### TraitSpec

-| Attribute  | Type           | Required | Default Value | Description                   |
-| ---------- | -------------- | -------- | ------------- | ----------------------------- |
-| properties | JSONSchema[]   | Y        | {}            | Trait 配置项定义              |
-| state      | JSONSchema     | Y        | {}            | Trait 为 Component 添加的状态 |
-| methods    | MethodSchema[] | Y        | []            | Trait 为 Component 添加的方法 |
+| Attribute  | Type             | Required | Default Value | Description                   |
+| ---------- | ---------------- | -------- | ------------- | ----------------------------- |
+| properties | JSONSchemaObject | Y        | {}            | Trait 配置项定义              |
+| state      | JSONSchema       | Y        | {}            | Trait 为 Component 添加的状态 |
+| methods    | MethodSchema[]   | Y        | []            | Trait 为 Component 添加的方法 |

 ### Example