Merge pull request #281 from webzard-io/feat/chakra-properties-category

feat(lib): change properties spec
2024-11-21 03:15:49 +08:00 · 2022-02-15 15:43:03 +08:00 · 2022-02-15 15:43:03 +08:00 · 114babd865
commit 114babd865
parent da43750319 79c4c29e95
29 changed files with 965 additions and 539 deletions
--- a/packages/chakra-ui-lib/src/components/Box.tsx
+++ b/packages/chakra-ui-lib/src/components/Box.tsx
@ -3,268 +3,102 @@ import { Box as BaseBox } from '@chakra-ui/react';
 import { implementRuntimeComponent, GRID_HEIGHT } from '@sunmao-ui/runtime';
 import { pick } from 'lodash-es';
 import { css } from '@emotion/css';
-
-const CssGlobals = Type.KeyOf(
-  Type.Object({
-    inherit: Type.String(),
-    initial: Type.String(),
-    revert: Type.String(),
-    unset: Type.String(),
-  })
-);
-const LineStyle = Type.KeyOf(
-  Type.Object({
-    dashed: Type.String(),
-    dotted: Type.String(),
-    double: Type.String(),
-    groove: Type.String(),
-    hidden: Type.String(),
-    inset: Type.String(),
-    none: Type.String(),
-    outset: Type.String(),
-    ridge: Type.String(),
-    solid: Type.String(),
-  })
-);
-const TextAlign = Type.Union([
-  CssGlobals,
-  Type.KeyOf(
-    Type.Object({
-      center: Type.String(),
-      end: Type.String(),
-      justify: Type.String(),
-      left: Type.String(),
-      'match-parent': Type.String(),
-      right: Type.String(),
-      start: Type.String(),
-    })
-  ),
-]);
-const TextTransForm = Type.Union([
-  CssGlobals,
-  Type.KeyOf(
-    Type.Object({
-      capitalize: Type.String(),
-      'full-size-kana': Type.String(),
-      'full-width': Type.String(),
-      lowercase: Type.String(),
-      none: Type.String(),
-      uppercase: Type.String(),
-    })
-  ),
-]);
-const Overflow = Type.Union([
-  CssGlobals,
-  Type.KeyOf(
-    Type.Object({
-      '-moz-hidden-unscrollable': Type.String(),
-      auto: Type.String(),
-      clip: Type.String(),
-      hidden: Type.String(),
-      scroll: Type.String(),
-      visible: Type.String(),
-    })
-  ),
-]);
-const FlexWrap = Type.Union([
-  CssGlobals,
-  Type.KeyOf(
-    Type.Object({
-      nowrap: Type.String(),
-      wrap: Type.String(),
-      'wrap-reverse': Type.String(),
-    })
-  ),
-]);
-const FlexDirection = Type.Union([
-  CssGlobals,
-  Type.KeyOf(
-    Type.Object({
-      column: Type.String(),
-      'column-reverse': Type.String(),
-      row: Type.String(),
-      'row-reverse': Type.String(),
-    })
-  ),
-]);
-const Position = Type.Union([
-  CssGlobals,
-  Type.KeyOf(
-    Type.Object({
-      '-webkit-sticky': Type.String(),
-      absolute: Type.String(),
-      fixed: Type.String(),
-      relative: Type.String(),
-      static: Type.String(),
-      sticky: Type.String(),
-    })
-  ),
-]);
-const WordBreak = Type.Union([
-  CssGlobals,
-  Type.KeyOf(
-    Type.Object({
-      'break-all': Type.String(),
-      'break-word': Type.String(),
-      'keep-all': Type.String(),
-      normal: Type.String(),
-    })
-  ),
-]);
-const WhiteSpace = Type.Union([
-  CssGlobals,
-  Type.KeyOf(
-    Type.Object({
-      '-moz-pre-wrap': Type.String(),
-      'break-spaces': Type.String(),
-      normal: Type.String(),
-      nowrap: Type.String(),
-      pre: Type.String(),
-      'pre-line': Type.String(),
-      'pre-wrap': Type.String(),
-    })
-  ),
-]);
-const BoxSizing = Type.Union([
-  CssGlobals,
-  Type.KeyOf(
-    Type.Object({
-      'border-box': Type.String(),
-      'content-box': Type.String(),
-    })
-  ),
-]);
-const PointerEvent = Type.Union([
-  CssGlobals,
-  Type.KeyOf(
-    Type.Object({
-      all: Type.String(),
-      auto: Type.String(),
-      fill: Type.String(),
-      none: Type.String(),
-      painted: Type.String(),
-      stroke: Type.String(),
-      visible: Type.String(),
-      visibleFill: Type.String(),
-      visiblePainted: Type.String(),
-      visibleStroke: Type.String(),
-    })
-  ),
-]);
+import { LAYOUT, BACKGROUND, BORDER } from './constants/category';

 const StyleSchema = Type.Partial(
  Type.Object({
+    // Layout
+    w: Type.Union([Type.String(), Type.Number()], {
+      title: 'Width',
+      category: LAYOUT,
+    }),
+    h: Type.Union([Type.String(), Type.Number()], {
+      title: 'Height',
+      category: LAYOUT,
+    }),
+    minW: Type.Union([Type.String(), Type.Number()], {
+      title: 'Min Width',
+      category: LAYOUT,
+    }),
+    maxW: Type.Union([Type.String(), Type.Number()], {
+      title: 'Max Width',
+      category: LAYOUT,
+    }),
+    minH: Type.Union([Type.String(), Type.Number()], {
+      title: 'Min Height',
+      category: LAYOUT,
+    }),
+    maxH: Type.Union([Type.String(), Type.Number()], {
+      title: 'Max Height',
+      category: LAYOUT,
+    }),
    // Margin and padding
-    m: Type.Union([Type.String(), Type.Number(), Type.Array(Type.Number())]),
-    mt: Type.Union([Type.String(), Type.Number()]),
-    mr: Type.Union([Type.String(), Type.Number()]),
-    mb: Type.Union([Type.String(), Type.Number()]),
-    ml: Type.Union([Type.String(), Type.Number()]),
-    mx: Type.Union([Type.String(), Type.Number(), Type.Array(Type.Number())]),
-    my: Type.Union([Type.String(), Type.Number(), Type.Array(Type.Number())]),
-    p: Type.Union([Type.String(), Type.Number(), Type.Array(Type.Number())]),
-    pt: Type.Union([Type.String(), Type.Number()]),
-    pr: Type.Union([Type.String(), Type.Number()]),
-    pb: Type.Union([Type.String(), Type.Number()]),
-    pl: Type.Union([Type.String(), Type.Number()]),
-    px: Type.Union([Type.String(), Type.Number(), Type.Array(Type.Number())]),
-    py: Type.Union([Type.String(), Type.Number(), Type.Array(Type.Number())]),
-    // Color and background color
-    color: Type.String(),
-    bgColor: Type.String(),
-    opacity: Type.Union([Type.String(), Type.Number()]),
-    // Gradient
-    bgGradient: Type.String(),
-    bgClip: Type.String(),
-    // Typography
-    fontFamily: Type.String(),
-    fontSize: Type.Union([Type.String(), Type.Number()]),
-    fontWeight: Type.Union([Type.String(), Type.Number()]),
-    lineHeight: Type.Union([Type.String(), Type.Number()]),
-    letterSpacing: Type.Union([Type.String(), Type.Number()]),
-    textAlign: TextAlign,
-    fontStyle: Type.String(),
-    textTransform: TextTransForm,
-    textDecoration: Type.Union([Type.String(), Type.Number()]),
-    // Layout, width and height
-    w: Type.Union([Type.String(), Type.Number()]),
-    h: Type.Union([Type.String(), Type.Number()]),
-    minW: Type.Union([Type.String(), Type.Number()]),
-    maxW: Type.Union([Type.String(), Type.Number()]),
-    minH: Type.Union([Type.String(), Type.Number()]),
-    maxH: Type.Union([Type.String(), Type.Number()]),
-    display: Type.String(),
-    verticalAlign: Type.String(),
-    overflow: Type.String(),
-    overflowX: Overflow,
-    overflowY: Overflow,
-    // Flexbox
-    alignItems: Type.String(),
-    alignContent: Type.String(),
-    justifyItems: Type.String(),
-    justifyContent: Type.String(),
-    flexWrap: FlexWrap,
-    flexDirection: FlexDirection,
-    flex: Type.Union([Type.String(), Type.Number()]),
-    flexGrow: Type.Union([CssGlobals, Type.Number()]),
-    flexShrink: Type.Union([CssGlobals, Type.Number()]),
-    flexBasis: Type.Union([Type.String(), Type.Number()]),
-    justifySelf: Type.String(),
-    alignSelf: Type.String(),
-    order: Type.Union([CssGlobals, Type.Number()]),
+    m: Type.Union([Type.String(), Type.Number(), Type.Array(Type.Number())], {
+      title: 'Margin',
+      category: LAYOUT,
+    }),
+    p: Type.Union([Type.String(), Type.Number(), Type.Array(Type.Number())], {
+      title: 'Padding',
+      category: LAYOUT,
+    }),
+    overflow: Type.String({
+      title: 'Overflow',
+      category: LAYOUT,
+    }),
    // Background
-    bg: Type.String(),
-    bgImage: Type.String(),
-    bgSize: Type.Union([Type.String(), Type.Number()]),
-    bgPosition: Type.Union([Type.String(), Type.Number()]),
-    bgRepeat: Type.String(),
-    bgAttachment: Type.String(),
+    bg: Type.String({
+      title: 'Background',
+      category: BACKGROUND,
+    }),
+    bgColor: Type.String({
+      title: 'Background Color',
+      category: BACKGROUND,
+    }),
+    opacity: Type.Union([Type.String(), Type.Number()], {
+      title: 'Opacity',
+      category: BACKGROUND,
+    }),
+    bgGradient: Type.String({
+      title: 'Background Gradient',
+      category: BACKGROUND,
+    }),
+    bgClip: Type.String({
+      title: 'Background Clip',
+      category: BACKGROUND,
+    }),
+    bgImage: Type.String({
+      title: 'Background Image',
+      category: BACKGROUND,
+    }),
+    bgSize: Type.Union([Type.String(), Type.Number()], {
+      title: 'Background Size',
+      category: BACKGROUND,
+    }),
+    bgPosition: Type.Union([Type.String(), Type.Number()], {
+      title: 'Background Position',
+      category: BACKGROUND,
+    }),
+    bgRepeat: Type.String({
+      title: 'Background Repeat',
+      category: BACKGROUND,
+    }),
+    bgAttachment: Type.String({
+      title: 'Background Attachment',
+      category: BACKGROUND,
+    }),
+    boxShadow: Type.Union([Type.String(), Type.Number()], {
+      title: 'Box Shadow',
+      category: BACKGROUND,
+    }),
    // Borders
-    border: Type.Union([Type.String(), Type.Number()]),
-    borderWidth: Type.Union([Type.String(), Type.Number()]),
-    borderStyle: Type.String(),
-    borderColor: Type.String(),
-    borderTop: Type.Union([Type.String(), Type.Number()]),
-    borderTopWidth: Type.Union([Type.String(), Type.Number()]),
-    borderTopStyle: Type.Union([CssGlobals, LineStyle]),
-    borderTopColor: Type.String(),
-    borderRight: Type.Union([Type.String(), Type.Number()]),
-    borderRightWidth: Type.Union([Type.String(), Type.Number()]),
-    borderRightStyle: Type.Union([CssGlobals, LineStyle]),
-    borderRightColor: Type.String(),
-    borderBottom: Type.Union([Type.String(), Type.Number()]),
-    borderBottomWidth: Type.Union([Type.String(), Type.Number()]),
-    borderBottomStyle: Type.Union([CssGlobals, LineStyle]),
-    borderBottomColor: Type.String(),
-    borderLeft: Type.Union([Type.String(), Type.Number()]),
-    borderLeftWidth: Type.Union([Type.String(), Type.Number()]),
-    borderLeftStyle: Type.Union([CssGlobals, LineStyle]),
-    borderLeftColor: Type.String(),
-    borderX: Type.Union([Type.String(), Type.Number()]),
-    borderY: Type.Union([Type.String(), Type.Number()]),
-    // Border Radius
-    borderRadius: Type.Union([Type.String(), Type.Number()]),
-    borderTopLeftRadius: Type.Union([Type.String(), Type.Number()]),
-    borderTopRightRadius: Type.Union([Type.String(), Type.Number()]),
-    borderBottomRightRadius: Type.Union([Type.String(), Type.Number()]),
-    borderBottomLeftRadius: Type.Union([Type.String(), Type.Number()]),
-    // Position
-    pos: Position,
-    top: Type.Union([Type.String(), Type.Number()]),
-    right: Type.Union([Type.String(), Type.Number()]),
-    bottom: Type.Union([Type.String(), Type.Number()]),
-    left: Type.Union([Type.String(), Type.Number()]),
-    zIndex: Type.Union([Type.String(), Type.Number()]),
-    // Shadow
-    textShadow: Type.Union([Type.String(), Type.Number()]),
-    boxShadow: Type.Union([Type.String(), Type.Number()]),
-    // Other
-    whiteSpace: WhiteSpace,
-    pointerEvents: PointerEvent,
-    wordBreak: WordBreak,
-    textOverflow: Type.String(),
-    boxSizing: BoxSizing,
-    cursor: Type.String(),
+    border: Type.Union([Type.String(), Type.Number()], {
+      title: 'Border',
+      category: BORDER,
+    }),
+    borderRadius: Type.Union([Type.String(), Type.Number()], {
+      title: 'Border Radius',
+      category: BORDER,
+    }),
  })
 );
 const StyleProps = Object.keys(StyleSchema.properties);
@ -280,11 +114,30 @@ export default implementRuntimeComponent({
    exampleProperties: {
      w: GRID_HEIGHT,
      h: GRID_HEIGHT,
+      minW: '',
+      maxW: '',
+      minH: '',
+      maxH: '',
+      m: '',
+      p: '',
+      overflow: '',
+      bg: '',
+      bgColor: '',
+      opacity: '',
+      bgGradient: '',
+      bgClip: '',
+      bgImage: '',
+      bgSize: '',
+      bgPosition: '',
+      bgRepeat: '',
+      bgAttachment: '',
+      boxShadow: '',
      border: '1px solid black',
+      borderRadius: '',
    },
    exampleSize: [6, 6],
    annotations: {
-      category: 'Layout',
+      category: LAYOUT,
    },
  },
  spec: {
--- a/packages/chakra-ui-lib/src/components/Button.tsx
+++ b/packages/chakra-ui-lib/src/components/Button.tsx
@ -3,7 +3,8 @@ import { css } from '@emotion/css';
 import { Type } from '@sinclair/typebox';
 import { Button as BaseButton } from '@chakra-ui/react';
 import { Text, TextPropertySchema, implementRuntimeComponent } from '@sunmao-ui/runtime';
-import { ColorSchemePropertySchema } from './Types/ColorScheme';
+import { getColorSchemePropertySchema } from './Types/ColorScheme';
+import { BEHAVIOR, APPEARANCE } from './constants/category';

 const StateSchema = Type.Object({
  value: Type.String(),
@ -11,8 +12,15 @@ const StateSchema = Type.Object({

 const PropsSchema = Type.Object({
  text: TextPropertySchema,
-  colorScheme: ColorSchemePropertySchema,
-  isLoading: Type.Optional(Type.Boolean()),
+  isLoading: Type.Boolean({
+    title: 'Loading',
+    description: 'Whether the button is in a loading state',
+    category: BEHAVIOR,
+  }),
+  colorScheme: getColorSchemePropertySchema({
+    title: 'Color Scheme',
+    category: APPEARANCE,
+  }),
 });

 export default implementRuntimeComponent({
@ -28,8 +36,8 @@ export default implementRuntimeComponent({
        raw: 'text',
        format: 'plain',
      },
-      colorScheme: 'blue',
      isLoading: false,
+      colorScheme: 'blue',
    },
    exampleSize: [2, 1],
    annotations: {
--- a/packages/chakra-ui-lib/src/components/Checkbox.tsx
+++ b/packages/chakra-ui-lib/src/components/Checkbox.tsx
@ -2,16 +2,24 @@ import { useState, useEffect } from 'react';
 import { Static, Type } from '@sinclair/typebox';
 import { Checkbox as BaseCheckbox, useCheckboxGroupContext } from '@chakra-ui/react';
 import { implementRuntimeComponent, Text, TextPropertySchema } from '@sunmao-ui/runtime';
-import { ColorSchemePropertySchema } from './Types/ColorScheme';
+import { getColorSchemePropertySchema } from './Types/ColorScheme';
 import { css } from '@emotion/css';
+import { BASIC, BEHAVIOR, LAYOUT, APPEARANCE } from './constants/category';

-export const IsDisabledSchema = Type.Optional(Type.Boolean());
+export const IsDisabledSchema = Type.Boolean({
+  title: 'Disabled',
+  category: BEHAVIOR,
+});
 export const SizePropertySchema = Type.KeyOf(
  Type.Object({
    sm: Type.String(),
    md: Type.String(),
    lg: Type.String(),
-  })
+  }),
+  {
+    title: 'Size',
+    category: APPEARANCE,
+  }
 );

 export const CheckboxStateSchema = Type.Object({
@ -22,16 +30,41 @@ export const CheckboxStateSchema = Type.Object({

 const PropsSchema = Type.Object({
  text: TextPropertySchema,
-  value: Type.Union([Type.String(), Type.Number()]),
-  defaultIsChecked: Type.Optional(Type.Boolean()),
+  value: Type.Union([Type.String(), Type.Number()], {
+    title: 'Value',
+    description: 'The value of the checkbox which is used by check group.',
+    category: BASIC,
+  }),
+  defaultIsChecked: Type.Boolean({
+    title: 'Default Checked',
+    category: BASIC,
+  }),
  isDisabled: IsDisabledSchema,
-  isFocusable: Type.Optional(Type.Boolean()),
-  isInValid: Type.Optional(Type.Boolean()),
-  isReadOnly: Type.Optional(Type.Boolean()),
-  isRequired: Type.Optional(Type.Boolean()),
+  isFocusable: Type.Boolean({
+    title: 'Focusable',
+    category: BEHAVIOR,
+  }),
+  isInValid: Type.Boolean({
+    title: 'Invalid',
+    category: BEHAVIOR,
+  }),
+  isReadOnly: Type.Boolean({
+    title: 'Read Only',
+    category: BEHAVIOR,
+  }),
+  isRequired: Type.Boolean({
+    title: 'Required',
+    category: BEHAVIOR,
+  }),
+  spacing: Type.String({
+    title: 'Spacing',
+    category: LAYOUT,
+  }),
  size: SizePropertySchema,
-  spacing: Type.Optional(Type.String()),
-  colorScheme: ColorSchemePropertySchema,
+  colorScheme: getColorSchemePropertySchema({
+    title: 'Color Scheme',
+    category: APPEARANCE,
+  }),
 });

 export default implementRuntimeComponent({
@ -50,7 +83,13 @@ export default implementRuntimeComponent({
      value: 'checkbox 1',
      defaultIsChecked: true,
      isDisabled: false,
+      isFocusable: true,
+      isInValid: false,
+      isReadOnly: false,
+      isRequired: false,
      size: 'md',
+      spacing: '',
+      colorScheme: 'blue',
    },
    exampleSize: [3, 1],
    annotations: {
@ -108,7 +147,7 @@ export default implementRuntimeComponent({
    }, [setChecked, defaultIsChecked]);

    const args: {
-      colorScheme?: Static<typeof ColorSchemePropertySchema>;
+      colorScheme?: Static<ReturnType<typeof getColorSchemePropertySchema>>;
      size?: Static<typeof SizePropertySchema>;
    } = {};

--- a/packages/chakra-ui-lib/src/components/CheckboxGroup.tsx
+++ b/packages/chakra-ui-lib/src/components/CheckboxGroup.tsx
@ -3,17 +3,22 @@ import { Type } from '@sinclair/typebox';
 import { Box, CheckboxGroup as BaseCheckboxGroup } from '@chakra-ui/react';
 import { implementRuntimeComponent } from '@sunmao-ui/runtime';
 import { SizePropertySchema, IsDisabledSchema } from './Checkbox';
+import { BASIC } from './constants/category';

-const DefaultValueSchema = Type.Array(Type.Union([Type.String(), Type.Number()]));
+const DefaultValueSchema = Type.Array(Type.Union([Type.String(), Type.Number()]), {
+  title: 'Default Value',
+  description: 'The default value of the checkbox group to be checked',
+  category: BASIC,
+});

 const StateSchema = Type.Object({
  value: DefaultValueSchema,
 });

 const PropsSchema = Type.Object({
-  size: SizePropertySchema,
+  defaultValue: DefaultValueSchema,
  isDisabled: IsDisabledSchema,
-  defaultValue: Type.Optional(DefaultValueSchema),
+  size: SizePropertySchema,
 });

 export default implementRuntimeComponent({
@ -25,6 +30,8 @@ export default implementRuntimeComponent({
    isDraggable: true,
    isResizable: true,
    exampleProperties: {
+      size: '',
+      isDisabled: false,
      defaultValue: [],
    },
    exampleSize: [3, 3],
--- a/packages/chakra-ui-lib/src/components/Dialog.tsx
+++ b/packages/chakra-ui-lib/src/components/Dialog.tsx
@ -12,18 +12,39 @@ import {
  ModalOverlayProps,
 } from '@chakra-ui/react';
 import { Type } from '@sinclair/typebox';
-import { ColorSchemePropertySchema } from './Types/ColorScheme';
+import { getColorSchemePropertySchema } from './Types/ColorScheme';
+import { BASIC, BEHAVIOR } from './constants/category';

-const HandleButtonPropertySchema = Type.Object({
-  text: Type.Optional(Type.String()),
-  colorScheme: ColorSchemePropertySchema,
-});
+const getHandleButtonPropertySchema = (options?: Record<string, any>) =>
+  Type.Object(
+    {
+      text: Type.String({
+        title: 'Text',
+      }),
+      colorScheme: getColorSchemePropertySchema({
+        title: 'Color Scheme',
+      }),
+    },
+    options
+  );

 const PropsSchema = Type.Object({
-  title: Type.Optional(Type.String()),
-  confirmButton: HandleButtonPropertySchema,
-  cancelButton: HandleButtonPropertySchema,
-  disableConfirm: Type.Optional(Type.Boolean()),
+  title: Type.String({
+    title: 'Title',
+    category: BASIC,
+  }),
+  confirmButton: getHandleButtonPropertySchema({
+    title: 'Confirm Button',
+    category: BASIC,
+  }),
+  cancelButton: getHandleButtonPropertySchema({
+    title: 'Cancel Button',
+    category: BASIC,
+  }),
+  disableConfirm: Type.Boolean({
+    title: 'Disable Confirm',
+    category: BEHAVIOR,
+  }),
 });

 export default implementRuntimeComponent({
--- a/packages/chakra-ui-lib/src/components/Form/Form.tsx
+++ b/packages/chakra-ui-lib/src/components/Form/Form.tsx
@ -3,9 +3,13 @@ import { css } from '@emotion/css';
 import { Type } from '@sinclair/typebox';
 import { Button, VStack } from '@chakra-ui/react';
 import { implementRuntimeComponent, watch } from '@sunmao-ui/runtime';
+import { BEHAVIOR } from '../constants/category';

 const PropsSchema = Type.Object({
-  hideSubmit: Type.Boolean(),
+  hideSubmit: Type.Boolean({
+    title: 'Hide Submit',
+    category: BEHAVIOR,
+  }),
 });

 export default implementRuntimeComponent({
--- a/packages/chakra-ui-lib/src/components/Form/FormControl.tsx
+++ b/packages/chakra-ui-lib/src/components/Form/FormControl.tsx
@ -12,6 +12,7 @@ import {
 import { css } from '@emotion/css';
 import { implementRuntimeComponent, watch } from '@sunmao-ui/runtime';
 import { CheckboxStateSchema } from '../Checkbox';
+import { BASIC, BEHAVIOR } from '../constants/category';

 const FormItemCSS = {
  flex: '0 0 auto',
@ -19,10 +20,22 @@ const FormItemCSS = {
 };

 const PropsSchema = Type.Object({
-  label: Type.String(),
-  fieldName: Type.String(),
-  isRequired: Type.Boolean(),
-  helperText: Type.String(),
+  label: Type.String({
+    title: 'Label',
+    category: BASIC,
+  }),
+  fieldName: Type.String({
+    title: 'Field Name',
+    category: BASIC,
+  }),
+  helperText: Type.String({
+    title: 'Helper Text',
+    category: BASIC,
+  }),
+  isRequired: Type.Boolean({
+    title: 'Required',
+    category: BEHAVIOR,
+  }),
 });

 export default implementRuntimeComponent({
--- a/packages/chakra-ui-lib/src/components/HStack.tsx
+++ b/packages/chakra-ui-lib/src/components/HStack.tsx
@ -25,6 +25,10 @@ export default implementRuntimeComponent({
    description: 'chakra-ui hstack',
    displayName: 'HStack',
    exampleProperties: {
+      direction: 'row',
+      wrap: 'wrap',
+      align: '',
+      justify: '',
      spacing: '24px',
    },
    exampleSize: [6, 6],
@ -42,23 +46,34 @@ export default implementRuntimeComponent({
    methods: {},
    events: [],
  },
-})(({ direction, wrap, align, justify, spacing, slotsElements, customStyle, elementRef }) => {
-  return (
-    <BaseHStack
-      height="full"
-      width="full"
-      padding="4"
-      background="white"
-      border="1px solid"
-      borderColor="gray.200"
-      borderRadius="4"
-      className={css`
-        ${customStyle?.content}
-      `}
-      ref={elementRef}
-      {...{ direction, wrap, align, justify, spacing }}
-    >
-      {slotsElements.content}
-    </BaseHStack>
-  );
-});
+})(
+  ({
+    direction,
+    wrap,
+    align,
+    justify,
+    spacing,
+    slotsElements,
+    customStyle,
+    elementRef,
+  }) => {
+    return (
+      <BaseHStack
+        height="full"
+        width="full"
+        padding="4"
+        background="white"
+        border="1px solid"
+        borderColor="gray.200"
+        borderRadius="4"
+        className={css`
+          ${customStyle?.content}
+        `}
+        ref={elementRef}
+        {...{ direction, wrap, align, justify, spacing }}
+      >
+        {slotsElements.content}
+      </BaseHStack>
+    );
+  }
+);
--- a/packages/chakra-ui-lib/src/components/Image.tsx
+++ b/packages/chakra-ui-lib/src/components/Image.tsx
@ -2,9 +2,10 @@ import { Image as BaseImage } from '@chakra-ui/react';
 import { css } from '@emotion/css';
 import { Type } from '@sinclair/typebox';
 import { implementRuntimeComponent } from '@sunmao-ui/runtime';
+import { BASIC, LAYOUT, BEHAVIOR, APPEARANCE } from './constants/category';

-const BoxSizePropertySchema = Type.Optional(
-  Type.Union([
+const BoxSizePropertySchema = Type.Union(
+  [
    Type.KeyOf(
      Type.Object({
        sm: Type.String(),
@ -14,7 +15,11 @@ const BoxSizePropertySchema = Type.Optional(
      })
    ),
    Type.String(),
-  ])
+  ],
+  {
+    title: 'Box Size',
+    category: APPEARANCE,
+  }
 );

 const GlobalCssSchema = Type.KeyOf(
@ -27,8 +32,8 @@ const GlobalCssSchema = Type.KeyOf(
  })
 );

-const ObjectFitSchema = Type.Optional(
-  Type.Union([
+const ObjectFitSchema = Type.Union(
+  [
    GlobalCssSchema,
    Type.KeyOf(
      Type.Object({
@ -39,11 +44,16 @@ const ObjectFitSchema = Type.Optional(
        'scale-down': Type.String(),
      })
    ),
-  ])
+  ],
+  {
+    title: 'Object Fit',
+    description: 'How the image should be scaled to fit the element.',
+    category: BEHAVIOR,
+  }
 );

-const BorderRadiusSchema = Type.Optional(
-  Type.Union([
+const BorderRadiusSchema = Type.Union(
+  [
    GlobalCssSchema,
    Type.Number(),
    Type.String(),
@ -60,7 +70,11 @@ const BorderRadiusSchema = Type.Optional(
        '3xl': Type.String(),
      })
    ),
-  ])
+  ],
+  {
+    title: 'Border Radius',
+    category: APPEARANCE,
+  }
 );

 const StateSchema = Type.Object({
@ -68,23 +82,52 @@ const StateSchema = Type.Object({
 });

 const PropsSchema = Type.Object({
-  src: Type.String(),
-  fallbackSrc: Type.Optional(Type.String()),
-  boxSize: BoxSizePropertySchema,
+  // basic
+  src: Type.String({
+    title: 'Src',
+    description: 'The source of the image',
+    category: BASIC,
+  }),
+  fallbackSrc: Type.String({
+    title: 'Fallback Src',
+    description: 'The source of the image to use when the src fails to load',
+    category: BASIC,
+  }),
+  alt: Type.String({
+    title: 'Alt Text',
+    description:
+      'An accessible description of the image for screen readers. This is also rendered as a fallback if the image fails to load.',
+    category: BASIC,
+  }),
+  ignoreFallback: Type.Boolean({
+    title: 'Ignore Fallback',
+    description: 'Whether to ignore the fallback image when the src fails to load',
+    category: BEHAVIOR,
+  }),
  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(),
-      })
-    )
+  crossOrigin: Type.KeyOf(
+    Type.Object({
+      anonymous: Type.String(),
+      'use-credentials': Type.String(),
+    }),
+    {
+      title: 'Cross Origin',
+      description: 'How the image should be loaded',
+      category: BEHAVIOR,
+    }
  ),
+  // layout
+  htmlHeight: Type.Union([Type.String(), Type.Number()], {
+    title: 'Height',
+    category: LAYOUT,
+  }),
+  htmlWidth: Type.Union([Type.String(), Type.Number()], {
+    title: 'Width',
+    category: LAYOUT,
+  }),
+  // style
+  boxSize: BoxSizePropertySchema,
+  borderRadius: BorderRadiusSchema,
 });

 export default implementRuntimeComponent({
@ -97,10 +140,15 @@ export default implementRuntimeComponent({
    isResizable: true,
    exampleProperties: {
      src: 'https://bit.ly/dan-abramov',
-      alt: 'dan-abramov',
-      objectFit: 'cover',
-      borderRadius: 5,
      fallbackSrc: 'https://via.placeholder.com/150',
+      alt: 'dan-abramov',
+      ignoreFallback: false,
+      objectFit: 'cover',
+      crossOrigin: 'anonymous',
+      boxSize: 'md',
+      htmlHeight: '',
+      htmlWidth: '',
+      borderRadius: 5,
    },
    exampleSize: [6, 6],
    annotations: {
--- a/packages/chakra-ui-lib/src/components/Input.tsx
+++ b/packages/chakra-ui-lib/src/components/Input.tsx
@ -10,48 +10,96 @@ import {
 import { Type } from '@sinclair/typebox';
 import { implementRuntimeComponent } from '@sunmao-ui/runtime';
 import { css } from '@emotion/css';
+import { BASIC, APPEARANCE, BEHAVIOR } from './constants/category';

-const AppendElementPropertySchema = Type.Union([
-  Type.Object({
-    type: Type.KeyOf(Type.Object({ addon: Type.String() })),
-    children: Type.Optional(Type.String()), // TODO: ReactNode
-  }),
-  Type.Object({
-    type: Type.KeyOf(Type.Object({ element: Type.String() })),
-    children: Type.Optional(Type.String()), // TODO: ReactNode
-    fontSize: Type.Optional(Type.String()),
-    color: Type.Optional(Type.String()),
-  }),
-]);
+const getAppendElementPropertySchema = (options?: Record<string, any>) =>
+  Type.Optional(
+    Type.Union(
+      [
+        Type.Object({
+          type: Type.KeyOf(Type.Object({ addon: Type.String() }), {
+            title: 'Type',
+          }),
+          children: Type.String({
+            title: 'Content',
+          }), // TODO: ReactNode
+        }),
+        Type.Object({
+          type: Type.KeyOf(Type.Object({ element: Type.String() }), {
+            title: 'Type',
+          }),
+          children: Type.String({
+            title: 'Content',
+          }), // TODO: ReactNode
+          fontSize: Type.String({
+            title: 'Font Size',
+          }),
+          color: Type.String({
+            title: 'Color',
+          }),
+        }),
+      ],
+      options
+    )
+  );

 const StateSchema = Type.Object({
  value: Type.String(),
 });

 const PropsSchema = Type.Object({
+  defaultValue: Type.String({
+    title: 'Default Value',
+    category: BASIC,
+  }),
+  placeholder: Type.String({
+    title: 'Placeholder',
+    category: BASIC,
+  }),
+  isDisabled: Type.Boolean({
+    title: 'Disabled',
+    category: BEHAVIOR,
+  }),
+  isRequired: Type.Boolean({
+    title: 'Required',
+    category: BEHAVIOR,
+  }),
  variant: Type.KeyOf(
    Type.Object({
      outline: Type.String(),
      unstyled: Type.String(),
      filled: Type.String(),
      flushed: Type.String(),
-    })
+    }),
+    {
+      title: 'Variant',
+      category: APPEARANCE,
+    }
  ),
-  placeholder: Type.Optional(Type.String()),
  size: Type.KeyOf(
    Type.Object({
      sm: Type.String(),
      md: Type.String(),
      lg: Type.String(),
      xs: Type.String(),
-    })
+    }),
+    {
+      title: 'Size',
+      category: APPEARANCE,
+    }
  ),
-  focusBorderColor: Type.Optional(Type.String()),
-  isDisabled: Type.Optional(Type.Boolean()),
-  isRequired: Type.Optional(Type.Boolean()),
-  left: Type.Optional(AppendElementPropertySchema),
-  right: Type.Optional(AppendElementPropertySchema),
-  defaultValue: Type.Optional(Type.String()),
+  left: getAppendElementPropertySchema({
+    title: 'Left Append',
+    category: APPEARANCE,
+  }),
+  right: getAppendElementPropertySchema({
+    title: 'Right Append',
+    category: APPEARANCE,
+  }),
+  focusBorderColor: Type.String({
+    title: 'Border Color Of Focusing',
+    category: APPEARANCE,
+  }),
 });

 export default implementRuntimeComponent({
@ -66,6 +114,7 @@ export default implementRuntimeComponent({
      variant: 'outline',
      placeholder: 'Please input value',
      size: 'md',
+      focusBorderColor: '',
      isDisabled: false,
      isRequired: false,
      defaultValue: '',
--- a/packages/chakra-ui-lib/src/components/Link.tsx
+++ b/packages/chakra-ui-lib/src/components/Link.tsx
@ -2,11 +2,20 @@ import { Link } from '@chakra-ui/react';
 import { css } from '@emotion/css';
 import { Type } from '@sinclair/typebox';
 import { implementRuntimeComponent, Text, TextPropertySchema } from '@sunmao-ui/runtime';
+import { BASIC, BEHAVIOR } from './constants/category';

 const PropsSchema = Type.Object({
  text: TextPropertySchema,
-  href: Type.String(),
-  isExternal: Type.Optional(Type.Boolean()),
+  href: Type.String({
+    title: 'Href',
+    description: 'The URL to link to.',
+    category: BASIC,
+  }),
+  isExternal: Type.Boolean({
+    title: 'External',
+    description: 'Whether the link should open in a new tab.',
+    category: BEHAVIOR,
+  }),
 });

 export default implementRuntimeComponent({
@ -23,6 +32,7 @@ export default implementRuntimeComponent({
        format: 'plain',
      },
      href: 'https://www.google.com',
+      isExternal: false,
    },
    exampleSize: [2, 1],
    annotations: {
--- a/packages/chakra-ui-lib/src/components/List.tsx
+++ b/packages/chakra-ui-lib/src/components/List.tsx
@ -8,9 +8,13 @@ import {
  ModuleRenderer,
 } from '@sunmao-ui/runtime';
 import { css } from '@emotion/css';
+import { BASIC } from './constants/category';

 const PropsSchema = Type.Object({
-  listData: Type.Array(Type.Record(Type.String(), Type.String())),
+  listData: Type.Array(Type.Record(Type.String(), Type.String()), {
+    title: 'Data',
+    category: BASIC,
+  }),
  template: ModuleSchema,
 });

--- a/packages/chakra-ui-lib/src/components/MultiSelect.tsx
+++ b/packages/chakra-ui-lib/src/components/MultiSelect.tsx
@ -4,6 +4,7 @@ import { Select as BaseMultiSelect } from 'chakra-react-select';
 import { implementRuntimeComponent } from '@sunmao-ui/runtime';
 import { Box } from '@chakra-ui/react';
 import { css } from '@emotion/css';
+import { BASIC, BEHAVIOR, APPEARANCE } from './constants/category';

 const StateSchema = Type.Object({
  value: Type.Array(Type.String()),
@ -11,30 +12,53 @@ const StateSchema = Type.Object({

 const OptionsSchema = Type.Array(
  Type.Object({
-    label: Type.String(),
-    value: Type.String(),
-  })
+    label: Type.String({
+      title: 'Label',
+    }),
+    value: Type.String({
+      title: 'Value',
+    }),
+  }),
+  {
+    title: 'Options',
+    category: BASIC,
+  }
 );

 const PropsSchema = Type.Object({
  options: OptionsSchema,
-  placeholder: Type.Optional(Type.String()),
-  defaultValue: Type.Optional(
-    Type.Array(
-      Type.Object({
-        label: Type.String(),
-        value: Type.String(),
-      })
-    )
+  placeholder: Type.String({
+    title: 'Placeholder',
+    category: BASIC,
+  }),
+  defaultValue: Type.Array(
+    Type.Object({
+      label: Type.String(),
+      value: Type.String(),
+    }),
+    {
+      title: 'Default Value',
+      category: BASIC,
+    }
  ),
-  isDisabled: Type.Optional(Type.Boolean()),
-  isRequired: Type.Optional(Type.Boolean()),
+  isDisabled: Type.Boolean({
+    title: 'Disabled',
+    category: BEHAVIOR,
+  }),
+  isRequired: Type.Boolean({
+    title: 'Required',
+    category: BEHAVIOR,
+  }),
  size: Type.KeyOf(
    Type.Object({
      sm: Type.String(),
      md: Type.String(),
      lg: Type.String(),
-    })
+    }),
+    {
+      title: 'Size',
+      category: APPEARANCE,
+    }
  ),
  variant: Type.KeyOf(
    Type.Object({
@ -42,7 +66,11 @@ const PropsSchema = Type.Object({
      unstyled: Type.String(),
      filled: Type.String(),
      flushed: Type.String(),
-    })
+    }),
+    {
+      title: 'Variant',
+      category: APPEARANCE,
+    }
  ),
 });

@ -61,6 +89,12 @@ const exampleProperties = {
      value: 'value3',
    },
  ],
+  placeholder: '',
+  defaultValue: [],
+  isDisabled: false,
+  isRequired: false,
+  size: 'md',
+  variant: 'outline',
 };

 export default implementRuntimeComponent({
--- a/packages/chakra-ui-lib/src/components/NumberInput.tsx
+++ b/packages/chakra-ui-lib/src/components/NumberInput.tsx
@ -9,33 +9,96 @@ import {
 import { Type } from '@sinclair/typebox';
 import { implementRuntimeComponent } from '@sunmao-ui/runtime';
 import { css } from '@emotion/css';
+import { BASIC, BEHAVIOR, APPEARANCE } from './constants/category';

 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()),
+  defaultValue: Type.Number({
+    title: 'Default Value',
+    category: BASIC,
+  }),
+  min: Type.Number({
+    title: 'Min',
+    category: BASIC,
+  }),
+  max: Type.Number({
+    title: 'Max',
+    category: BASIC,
+  }),
+  step: Type.Number({
+    title: 'Step',
+    description: 'The amount to increase or decrease the value by.',
+    category: BASIC,
+  }),
+  precision: Type.Number({
+    title: 'Precision',
+    category: BASIC,
+  }),
+  clampValueOnBlur: Type.Boolean({
+    title: 'Clamp Value On Blur',
+    category: BEHAVIOR,
+  }),
+  allowMouseWheel: Type.Boolean({
+    title: 'Allow Mouse Wheel',
+    description: 'Whether or not to allow the mouse wheel to control the number input.',
+    category: BEHAVIOR,
+  }),
  size: Type.KeyOf(
    Type.Object({
      sm: Type.String(),
      md: Type.String(),
      lg: Type.String(),
      xs: Type.String(),
-    })
+    }),
+    {
+      title: 'Size',
+      category: APPEARANCE,
+    }
  ),
-  customerIncrement: Type.Object({
-    bg: Type.Optional(Type.String()),
-    children: Type.Optional(Type.String()),
-    _active: Type.Object({ bg: Type.String() }),
-  }),
-  customerDecrement: Type.Object({
-    bg: Type.Optional(Type.String()),
-    children: Type.Optional(Type.String()),
-    _active: Type.Object({ bg: Type.String() }),
-  }),
+  customerIncrement: Type.Optional(Type.Object(
+    {
+      bg: Type.String({
+        title: 'Background',
+      }),
+      children: Type.String({
+        title: 'Text',
+      }),
+      _active: Type.Object({
+        bg: Type.String({
+          title: 'Active Background',
+        }),
+      }, {
+        title: 'Active',
+      }),
+    },
+    {
+      title: 'Increment Button',
+      category: APPEARANCE,
+    }
+  )),
+  customerDecrement: Type.Optional(Type.Object(
+    {
+      bg: Type.String({
+        title: 'Background',
+      }),
+      children: Type.String({
+        title: 'Text',
+      }),
+      _active: Type.Object(
+        {
+          bg: Type.String({
+            title: 'Active Background',
+          }),
+        },
+        {
+          title: 'Active',
+        }
+      ),
+    },
+    {
+      title: 'Decrement Button',
+      category: APPEARANCE,
+    }
+  )),
 });

 const StateSchema = Type.Object({
@ -45,13 +108,20 @@ const StateSchema = Type.Object({
 export default implementRuntimeComponent({
  version: 'chakra_ui/v1',
  metadata: {
-    name: 'number_input',
+    name: 'numberInput',
    description: 'chakra_ui number input',
    displayName: 'Number Input',
    isDraggable: true,
    isResizable: true,
    exampleProperties: {
      defaultValue: 0,
+      min: Number.MIN_SAFE_INTEGER,
+      max: Number.MAX_SAFE_INTEGER,
+      step: 1,
+      precision: 0,
+      clampValueOnBlur: false,
+      allowMouseWheel: false,
+      size: 'md',
    },
    exampleSize: [4, 1],
    annotations: {
--- a/packages/chakra-ui-lib/src/components/Radio.tsx
+++ b/packages/chakra-ui-lib/src/components/Radio.tsx
@ -2,8 +2,9 @@ import { useEffect } from 'react';
 import { Type } from '@sinclair/typebox';
 import { Radio as BaseRadio } from '@chakra-ui/react';
 import { implementRuntimeComponent, Text, TextPropertySchema } from '@sunmao-ui/runtime';
-import { ColorSchemePropertySchema } from './Types/ColorScheme';
+import { getColorSchemePropertySchema } from './Types/ColorScheme';
 import { css } from '@emotion/css';
+import { BASIC, BEHAVIOR, APPEARANCE, LAYOUT } from './constants/category';

 const StateSchema = Type.Object({
  value: Type.Union([Type.String(), Type.Number()]),
@ -11,22 +12,53 @@ const StateSchema = Type.Object({

 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()),
+  value: Type.Union([Type.String(), Type.Number()], {
+    title: 'Value',
+    category: BASIC,
+  }),
+  name: Type.String({
+    title: 'Name',
+    category: BASIC,
+  }),
+  isDisabled: Type.Boolean({
+    title: 'Disabled',
+    category: BEHAVIOR,
+  }),
+  isFocusable: Type.Boolean({
+    title: 'Focusable',
+    category: BEHAVIOR,
+  }),
+  isInValid: Type.Boolean({
+    title: 'Invalid',
+    category: BEHAVIOR,
+  }),
+  isReadOnly: Type.Boolean({
+    title: 'Read Only',
+    category: BEHAVIOR,
+  }),
+  isRequired: Type.Boolean({
+    title: 'Required',
+    category: BEHAVIOR,
+  }),
+  spacing: Type.String({
+    title: 'Spacing',
+    category: LAYOUT,
+  }),
+  colorScheme: getColorSchemePropertySchema({
+    title: 'Color Scheme',
+    category: APPEARANCE,
+  }),
  size: Type.KeyOf(
    Type.Object({
      sm: Type.String(),
      md: Type.String(),
      lg: Type.String(),
-    })
+    }),
+    {
+      title: 'Size',
+      category: APPEARANCE,
+    }
  ),
-  spacing: Type.Optional(Type.String()),
-  colorScheme: ColorSchemePropertySchema,
 });

 export default implementRuntimeComponent({
--- a/packages/chakra-ui-lib/src/components/RadioGroup.tsx
+++ b/packages/chakra-ui-lib/src/components/RadioGroup.tsx
@ -3,20 +3,28 @@ import { Type } from '@sinclair/typebox';
 import { RadioGroup as BaseRadioGroup } from '@chakra-ui/react';
 import { implementRuntimeComponent } from '@sunmao-ui/runtime';
 import { css } from '@emotion/css';
+import { BASIC, BEHAVIOR } from './constants/category';

 const StateSchema = Type.Object({
  value: Type.Union([Type.String(), Type.Number()]),
 });

 const PropsSchema = Type.Object({
-  defaultValue: Type.Union([Type.String(), Type.Number()]),
-  isNumerical: Type.Optional(Type.Boolean()),
+  defaultValue: Type.Union([Type.String(), Type.Number()], {
+    title: 'Default Value',
+    category: BASIC,
+  }),
+  isNumerical: Type.Boolean({
+    title: 'Numerical',
+    description: 'Whether the value is a number',
+    category: BEHAVIOR,
+  }),
 });

 export default implementRuntimeComponent({
  version: 'chakra_ui/v1',
  metadata: {
-    name: 'radio_group',
+    name: 'radioGroup',
    displayName: 'RadioGroup',
    description: 'chakra-ui radio group',
    isDraggable: true,
@ -38,27 +46,29 @@ export default implementRuntimeComponent({
    styleSlots: ['content'],
    events: [],
  },
-})(({ defaultValue, isNumerical, slotsElements, mergeState, customStyle, elementRef }) => {
-  const [value, setValue] = useState(defaultValue);
+})(
+  ({ defaultValue, isNumerical, slotsElements, mergeState, customStyle, elementRef }) => {
+    const [value, setValue] = useState(defaultValue);

-  useEffect(() => {
-    mergeState({ value });
-  }, [mergeState, value]);
+    useEffect(() => {
+      mergeState({ value });
+    }, [mergeState, value]);

-  useEffect(() => {
-    setValue(defaultValue);
-  }, [defaultValue]);
+    useEffect(() => {
+      setValue(defaultValue);
+    }, [defaultValue]);

-  return (
-    <BaseRadioGroup
-      value={value}
-      onChange={val => setValue(isNumerical ? Number(val) : val)}
-      className={css`
-        ${customStyle?.content}
-      `}
-      ref={elementRef}
-    >
-      {slotsElements.content}
-    </BaseRadioGroup>
-  );
-});
+    return (
+      <BaseRadioGroup
+        value={value}
+        onChange={val => setValue(isNumerical ? Number(val) : val)}
+        className={css`
+          ${customStyle?.content}
+        `}
+        ref={elementRef}
+      >
+        {slotsElements.content}
+      </BaseRadioGroup>
+    );
+  }
+);
--- a/packages/chakra-ui-lib/src/components/Select.tsx
+++ b/packages/chakra-ui-lib/src/components/Select.tsx
@ -3,6 +3,7 @@ import { Type } from '@sinclair/typebox';
 import { Select as BaseSelect } from '@chakra-ui/react';
 import { implementRuntimeComponent } from '@sunmao-ui/runtime';
 import { css } from '@emotion/css';
+import { BASIC, BEHAVIOR, APPEARANCE } from './constants/category';

 const StateSchema = Type.Object({
  value: Type.String(),
@ -11,25 +12,53 @@ const StateSchema = Type.Object({
 const PropsSchema = Type.Object({
  options: Type.Array(
    Type.Object({
-      label: Type.String(),
-      value: Type.String(),
-    })
+      label: Type.String({
+        title: 'Label',
+      }),
+      value: Type.String({
+        title: 'Value',
+      }),
+    }),
+    {
+      title: 'Options',
+      category: BASIC,
+    }
  ),
-  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()),
+  placeholder: Type.String({
+    title: 'Placeholder',
+    category: BASIC,
+  }),
+  defaultValue: Type.String({
+    title: 'Default Value',
+    category: BASIC,
+  }),
+  isDisabled: Type.Boolean({
+    title: 'Disabled',
+    category: BEHAVIOR,
+  }),
+  isInvalid: Type.Boolean({
+    title: 'Invalid',
+    category: BEHAVIOR,
+  }),
+  isReadOnly: Type.Boolean({
+    title: 'Read Only',
+    category: BEHAVIOR,
+  }),
+  isRequired: Type.Boolean({
+    title: 'Required',
+    category: BEHAVIOR,
+  }),
  size: Type.KeyOf(
    Type.Object({
      xs: Type.String(),
      sm: Type.String(),
      md: Type.String(),
      lg: Type.String(),
-    })
+    }),
+    {
+      title: 'Size',
+      category: APPEARANCE,
+    }
  ),
  variant: Type.KeyOf(
    Type.Object({
@ -37,8 +66,20 @@ const PropsSchema = Type.Object({
      unstyled: Type.String(),
      filled: Type.String(),
      flushed: Type.String(),
-    })
+    }),
+    {
+      title: 'Variant',
+      category: APPEARANCE,
+    }
  ),
+  errorBorderColor: Type.String({
+    title: 'Border Color Of Error',
+    category: APPEARANCE,
+  }),
+  focusBorderColor: Type.String({
+    title: 'Border Color Of Focus',
+    category: APPEARANCE,
+  }),
 });

 const exampleProperties = {
@ -56,6 +97,16 @@ const exampleProperties = {
      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({
--- a/packages/chakra-ui-lib/src/components/Stack.tsx
+++ b/packages/chakra-ui-lib/src/components/Stack.tsx
@ -1,9 +1,10 @@
 import { Type } from '@sinclair/typebox';
 import { Stack as BaseStack } from '@chakra-ui/react';
 import { implementRuntimeComponent } from '@sunmao-ui/runtime';
+import { LAYOUT } from './constants/category';

-export const DirectionSchema = Type.Optional(
-  Type.Union([
+export const DirectionSchema = Type.Union(
+  [
    Type.KeyOf(
      Type.Object({
        column: Type.String(),
@ -22,20 +23,35 @@ export const DirectionSchema = Type.Optional(
        })
      )
    ),
-  ])
+  ],
+  {
+    title: 'Flex Direction',
+    category: LAYOUT,
+  }
 );
-export const FlexWrapSchema = Type.Optional(
-  Type.KeyOf(
-    Type.Object({
-      nowrap: Type.String(),
-      wrap: Type.String(),
-      'wrap-reverse': Type.String(),
-    })
-  )
+export const FlexWrapSchema = Type.KeyOf(
+  Type.Object({
+    nowrap: Type.String(),
+    wrap: Type.String(),
+    'wrap-reverse': Type.String(),
+  }),
+  {
+    title: 'Flex Wrap',
+    category: LAYOUT,
+  }
 );
-export const AlignItemsSchema = Type.Optional(Type.String());
-export const JustifyContentSchema = Type.Optional(Type.String());
-export const SpacingSchema = Type.Optional(Type.Union([Type.String(), Type.Number()]));
+export const AlignItemsSchema = Type.String({
+  title: 'Align Items',
+  category: LAYOUT,
+});
+export const JustifyContentSchema = Type.String({
+  title: 'Justify Content',
+  category: LAYOUT,
+});
+export const SpacingSchema = Type.Union([Type.String(), Type.Number()], {
+  title: 'Spacing',
+  category: LAYOUT,
+});

 const PropsSchema = Type.Object({
  direction: DirectionSchema,
--- a/packages/chakra-ui-lib/src/components/Table/TableTypes.ts
+++ b/packages/chakra-ui-lib/src/components/Table/TableTypes.ts
@ -1,16 +1,30 @@
 import { Type } from '@sinclair/typebox';
 import { ModuleSchema, EventHandlerSchema } from '@sunmao-ui/runtime';
+import { BASIC, APPEARANCE, BEHAVIOR } from '../constants/category';

-export const MajorKeyPropertySchema = Type.String();
-export const RowsPerPagePropertySchema = Type.Number();
-export const DataPropertySchema = Type.Array(Type.Any());
-export const TableSizePropertySchema = Type.Optional(Type.KeyOf(
+export const MajorKeyPropertySchema = Type.String({
+  title: 'Major key',
+  description: 'The key of the data item object to use as the major key',
+  category: BASIC,
+});
+export const RowsPerPagePropertySchema = Type.Number({
+  title: 'Per Page Number',
+  category: BEHAVIOR,
+});
+export const DataPropertySchema = Type.Array(Type.Any(), {
+  title: 'Data',
+  category: BASIC,
+});
+export const TableSizePropertySchema = Type.KeyOf(
  Type.Object({
    sm: Type.String(),
    md: Type.String(),
    lg: Type.String(),
-  })
-));
+  }), {
+    title: 'Size',
+    category: APPEARANCE,
+  }
+);

 export const TdTypeSchema = Type.KeyOf(
  Type.Object({
@ -19,22 +33,43 @@ export const TdTypeSchema = Type.KeyOf(
    link: Type.String(),
    button: Type.String(),
    module: Type.String(),
-  })
+  }), {
+    title: 'TD Type',
+    category: APPEARANCE,
+  }
 );
 export const ColumnSchema = Type.Object({
-  key: Type.String(),
-  title: Type.String(),
-  displayValue: Type.Optional(Type.String()),
+  key: Type.String({
+    title: 'Key',
+  }),
+  title: Type.String({
+    title: 'Title',
+  }),
+  displayValue: Type.String({
+    title: 'Display value',
+  }),
  type: TdTypeSchema,
  buttonConfig: Type.Object({
-    text: Type.String(),
+    text: Type.String({
+      title: 'Text',
+    }),
    handlers: Type.Array(EventHandlerSchema),
+  }, {
+    title: 'Button Config',
  }),
  module: ModuleSchema,
+}, {
+  title: 'Column'
 });

-export const ColumnsPropertySchema = Type.Array(ColumnSchema);
-export const IsMultiSelectPropertySchema = Type.Boolean();
+export const ColumnsPropertySchema = Type.Array(ColumnSchema, {
+  title: 'Columns',
+  category: BASIC,
+});
+export const IsMultiSelectPropertySchema = Type.Boolean({
+  title: 'Enable Multiple Select',
+  category: BEHAVIOR,
+});

 export const TableStateSchema = Type.Object({
  selectedItem: Type.Optional(Type.Object({})),
--- a/packages/chakra-ui-lib/src/components/Table/spec.ts
+++ b/packages/chakra-ui-lib/src/components/Table/spec.ts
@ -13,10 +13,10 @@ import {
 const PropsSchema = Type.Object({
  data: DataPropertySchema,
  majorKey: MajorKeyPropertySchema,
-  rowsPerPage: RowsPerPagePropertySchema,
-  size: TableSizePropertySchema,
  columns: ColumnsPropertySchema,
  isMultiSelect: IsMultiSelectPropertySchema,
+  rowsPerPage: RowsPerPagePropertySchema,
+  size: TableSizePropertySchema,
 });

 const exampleProperties = {
@ -31,11 +31,13 @@ const exampleProperties = {
      key: 'name',
      title: 'Name',
      type: 'text',
+      displayValue: '',
    },
  ],
  majorKey: 'id',
  rowsPerPage: 5,
  isMultiSelect: false,
+  size: 'md',
 };

 export const implementTable = implementRuntimeComponent({
--- a/packages/chakra-ui-lib/src/components/Tabs.tsx
+++ b/packages/chakra-ui-lib/src/components/Tabs.tsx
@ -10,14 +10,21 @@ import {
 } from '@chakra-ui/react';
 import { Type } from '@sinclair/typebox';
 import { implementRuntimeComponent } from '@sunmao-ui/runtime';
+import { BASIC } from './constants/category';

 const StateSchema = Type.Object({
  selectedTabIndex: Type.Number(),
 });

 const PropsSchema = Type.Object({
-  tabNames: Type.Array(Type.String()),
-  initialSelectedTabIndex: Type.Optional(Type.Number()),
+  tabNames: Type.Array(Type.String(), {
+    title: 'Tab Names',
+    category: BASIC,
+  }),
+  initialSelectedTabIndex: Type.Number({
+    title: 'Default Selected Tab Index',
+    category: BASIC,
+  }),
 });

 export default implementRuntimeComponent({
@ -47,8 +54,14 @@ export default implementRuntimeComponent({
    events: [],
  },
 })(props => {
-  const { tabNames, mergeState, initialSelectedTabIndex, customStyle, slotsElements, elementRef } =
-    props;
+  const {
+    tabNames,
+    mergeState,
+    initialSelectedTabIndex,
+    customStyle,
+    slotsElements,
+    elementRef,
+  } = props;
  const [selectedTabIndex, setSelectedTabIndex] = useState(initialSelectedTabIndex ?? 0);

  useEffect(() => {
--- a/packages/chakra-ui-lib/src/components/Tooltip.tsx
+++ b/packages/chakra-ui-lib/src/components/Tooltip.tsx
@ -1,37 +1,58 @@
 import { Type } from '@sinclair/typebox';
 import { Tooltip } from '@chakra-ui/react';
 import { implementRuntimeComponent, TextPropertySchema } from '@sunmao-ui/runtime';
-import { ColorSchemePropertySchema } from './Types/ColorScheme';
+import { getColorSchemePropertySchema } from './Types/ColorScheme';
+import { BASIC, LAYOUT, BEHAVIOR, APPEARANCE } from './constants/category';

 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(),
-      })
-    )
+  defaultIsOpen: Type.Boolean({
+    title: 'Default Is Open',
+    category: BASIC,
+  }),
+  placement: 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(),
+    }),
+    {
+      title: 'Placement',
+      category: LAYOUT,
+    }
  ),
+  shouldWrapChildren: Type.Boolean({
+    title: 'Should Wrap Children',
+    category: BEHAVIOR,
+  }),
+  isDisabled: Type.Boolean({
+    title: 'Disabled',
+    category: BEHAVIOR,
+  }),
+  isOpen: Type.Boolean({
+    title: 'Open State',
+    category: BEHAVIOR,
+  }),
+  hasArrow: Type.Boolean({
+    title: 'Has Arrow',
+    category: APPEARANCE,
+  }),
+  colorScheme: getColorSchemePropertySchema({
+    title: 'Color Scheme',
+    category: APPEARANCE,
+  }),
 });

 export default implementRuntimeComponent({
@ -44,6 +65,13 @@ export default implementRuntimeComponent({
    isResizable: false,
    exampleProperties: {
      text: 'tooltip',
+      defaultIsOpen: false,
+      placement: 'top',
+      shouldWrapChildren: false,
+      isDisabled: false,
+      isOpen: false,
+      hasArrow: true,
+      colorScheme: 'blue',
    },
    exampleSize: [2, 1],
    annotations: {
--- a/packages/chakra-ui-lib/src/components/Types/ColorScheme.ts
+++ b/packages/chakra-ui-lib/src/components/Types/ColorScheme.ts
@ -1,6 +1,6 @@
 import { Type } from '@sinclair/typebox';

-export const ColorSchemePropertySchema = Type.Optional(
+export const getColorSchemePropertySchema = (options?: Record<string, any>) =>
  Type.KeyOf(
    Type.Object({
      whiteAlpha: Type.String(),
@ -21,6 +21,6 @@ export const ColorSchemePropertySchema = Type.Optional(
      whatsapp: Type.String(),
      twitter: Type.String(),
      telegram: Type.String(),
-    })
-  )
-);
+    }),
+    options
+  );
--- a/packages/chakra-ui-lib/src/components/VStack.tsx
+++ b/packages/chakra-ui-lib/src/components/VStack.tsx
@ -31,6 +31,10 @@ export default implementRuntimeComponent({
    isDraggable: true,
    isResizable: true,
    annotations: {
+      direction: 'column',
+      wrap: 'wrap',
+      align: '',
+      justify: '',
      category: 'Layout',
    },
  },
@ -42,23 +46,34 @@ export default implementRuntimeComponent({
    methods: {},
    events: [],
  },
-})(({ direction, wrap, align, justify, spacing, slotsElements, customStyle, elementRef }) => {
-  return (
-    <BaseVStack
-      width="full"
-      height="full"
-      padding="4"
-      background="white"
-      border="1px solid"
-      borderColor="gray.200"
-      borderRadius="4"
-      className={css`
-        ${customStyle?.content}
-      `}
-      ref={elementRef}
-      {...{ direction, wrap, align, justify, spacing }}
-    >
-      {slotsElements.content}
-    </BaseVStack>
-  );
-});
+})(
+  ({
+    direction,
+    wrap,
+    align,
+    justify,
+    spacing,
+    slotsElements,
+    customStyle,
+    elementRef,
+  }) => {
+    return (
+      <BaseVStack
+        width="full"
+        height="full"
+        padding="4"
+        background="white"
+        border="1px solid"
+        borderColor="gray.200"
+        borderRadius="4"
+        className={css`
+          ${customStyle?.content}
+        `}
+        ref={elementRef}
+        {...{ direction, wrap, align, justify, spacing }}
+      >
+        {slotsElements.content}
+      </BaseVStack>
+    );
+  }
+);
--- a/packages/chakra-ui-lib/src/components/constants/category.ts
+++ b/packages/chakra-ui-lib/src/components/constants/category.ts
@ -0,0 +1,6 @@
+export const BASIC = 'Basic';
+export const LAYOUT = 'Layout';
+export const BACKGROUND = 'Background';
+export const BORDER = 'Border';
+export const APPEARANCE = 'Appearance';
+export const BEHAVIOR = 'Behavior';
--- a/packages/editor/tests/validator/mock.ts
+++ b/packages/editor/tests/validator/mock.ts
@ -74,6 +74,7 @@ export const ComponentWrongPropertyExpressionSchema: ComponentSchema[] = [
    properties: {
      variant: 'outline',
      placeholder: '{{data.value}}',
+      focusBorderColor: '',
      size: 'md',
      isDisabled: false,
      isRequired: false,
@ -89,6 +90,8 @@ export const ComponentWrongPropertyExpressionSchema: ComponentSchema[] = [
        raw: '{{fetch.data.value}}',
        format: 'md',
      },
+      isLoading: false,
+      colorScheme: 'blue',
    },
    traits: [
      {
@ -169,6 +172,7 @@ export const EventTraitSchema: ComponentSchema[] = [
      isDisabled: false,
      isRequired: false,
      defaultValue: '',
+      focusBorderColor: '',
    },
    traits: [],
  },
@ -180,6 +184,8 @@ export const EventTraitSchema: ComponentSchema[] = [
        raw: 'hello',
        format: 'md',
      },
+      isLoading: false,
+      colorScheme: 'blue',
    },
    traits: [
      {
@ -258,6 +264,8 @@ export const EventTraitTraitMethodSchema: ComponentSchema[] = [
        raw: 'hello',
        format: 'md',
      },
+      isLoading: false,
+      colorScheme: 'blue',
    },
    traits: [
      {
--- a/packages/runtime/src/components/_internal/Text.tsx
+++ b/packages/runtime/src/components/_internal/Text.tsx
@ -4,13 +4,20 @@ import ReactMarkdown from 'react-markdown';
 import { Static, Type } from '@sinclair/typebox';

 export const TextPropertySchema = Type.Object({
-  raw: Type.String(),
+  raw: Type.String({
+    title: 'Raw',
+  }),
  format: Type.KeyOf(
    Type.Object({
      plain: Type.String(),
      md: Type.String(),
-    })
+    }), {
+      title: 'Format',
+    }
  ),
+}, {
+  title: 'Text',
+  category: 'Basic',
 });

 export type TextProps = {
--- a/packages/runtime/src/components/core/GridLayout.tsx
+++ b/packages/runtime/src/components/core/GridLayout.tsx
@ -9,13 +9,27 @@ const BaseGridLayout = React.lazy(() => import('../_internal/GridLayout'));
 const PropsSchema = Type.Object({
  layout: Type.Array(
    Type.Object({
-      x: Type.Number(),
-      y: Type.Number(),
-      w: Type.Number(),
-      h: Type.Number(),
+      x: Type.Number({
+        title: 'X',
+      }),
+      y: Type.Number({
+        title: 'Y',
+      }),
+      w: Type.Number({
+        title: 'Width',
+      }),
+      h: Type.Number({
+        title: 'Height',
+      }),
      i: Type.String(),
-      isResizable: Type.Optional(Type.Boolean()),
-    })
+      isResizable: Type.Boolean({
+        title: 'Resizable',
+      }),
+    }),
+    {
+      title: 'Layout',
+      category: 'Layout',
+    }
  ),
 });

--- a/packages/runtime/src/types/module.ts
+++ b/packages/runtime/src/types/module.ts
@ -3,10 +3,24 @@ import { Type } from '@sinclair/typebox';
 import { RuntimeModule } from '@sunmao-ui/core';

 export const ModuleSchema = Type.Object({
-  id: Type.String(),
-  type: Type.String(),
-  properties: Type.Record(Type.String(), Type.Any()),
-  handlers: Type.Array(EventHandlerSchema),
+  id: Type.String({
+    title: 'ID',
+    category: 'Basic',
+  }),
+  type: Type.String({
+    title: 'Type',
+    category: 'Basic',
+  }),
+  properties: Type.Record(Type.String(), Type.Any(), {
+    title: 'Properties',
+    category: 'Basic',
+  }),
+  handlers: Type.Array(EventHandlerSchema, {
+    title: 'Handlers',
+    category: 'Basic',
+  }),
+}, {
+  category: 'Appearance',
 });

 export type ImplementedRuntimeModule = RuntimeModule;