chore: fix test cases and change some properties' spec

2025-02-17 17:40:31 +08:00 · 2022-02-15 15:19:05 +08:00 · 2022-02-15 15:19:05 +08:00 · 79c4c29e95
commit 79c4c29e95
parent fc15a2dc50
10 changed files with 114 additions and 57 deletions
--- a/packages/chakra-ui-lib/src/components/Input.tsx
+++ b/packages/chakra-ui-lib/src/components/Input.tsx
@ -13,20 +13,34 @@ import { css } from '@emotion/css';
 import { BASIC, APPEARANCE, BEHAVIOR } from './constants/category';

 const getAppendElementPropertySchema = (options?: Record<string, any>) =>
-  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()),
-      }),
-    ],
-    options
+  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({
@ -103,8 +117,6 @@ export default implementRuntimeComponent({
      focusBorderColor: '',
      isDisabled: false,
      isRequired: false,
-      left: {},
-      right: {},
      defaultValue: '',
    },
    exampleSize: [4, 1],
--- a/packages/chakra-ui-lib/src/components/MultiSelect.tsx
+++ b/packages/chakra-ui-lib/src/components/MultiSelect.tsx
@ -12,8 +12,12 @@ 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',
--- a/packages/chakra-ui-lib/src/components/NumberInput.tsx
+++ b/packages/chakra-ui-lib/src/components/NumberInput.tsx
@ -54,7 +54,7 @@ const PropsSchema = Type.Object({
      category: APPEARANCE,
    }
  ),
-  customerIncrement: Type.Object(
+  customerIncrement: Type.Optional(Type.Object(
    {
      bg: Type.String({
        title: 'Background',
@ -62,14 +62,20 @@ const PropsSchema = Type.Object({
      children: Type.String({
        title: 'Text',
      }),
-      _active: Type.Object({ bg: Type.String() }),
+      _active: Type.Object({
+        bg: Type.String({
+          title: 'Active Background',
+        }),
+      }, {
+        title: 'Active',
+      }),
    },
    {
      title: 'Increment Button',
      category: APPEARANCE,
    }
-  ),
-  customerDecrement: Type.Object(
+  )),
+  customerDecrement: Type.Optional(Type.Object(
    {
      bg: Type.String({
        title: 'Background',
@ -77,13 +83,22 @@ const PropsSchema = Type.Object({
      children: Type.String({
        title: 'Text',
      }),
-      _active: Type.Object({ bg: Type.String() }),
+      _active: Type.Object(
+        {
+          bg: Type.String({
+            title: 'Active Background',
+          }),
+        },
+        {
+          title: 'Active',
+        }
+      ),
    },
    {
      title: 'Decrement Button',
      category: APPEARANCE,
    }
-  ),
+  )),
 });

 const StateSchema = Type.Object({
@ -107,8 +122,6 @@ export default implementRuntimeComponent({
      clampValueOnBlur: false,
      allowMouseWheel: false,
      size: 'md',
-      customerIncrement: {},
-      customerDecrement: {},
    },
    exampleSize: [4, 1],
    annotations: {
--- a/packages/chakra-ui-lib/src/components/Select.tsx
+++ b/packages/chakra-ui-lib/src/components/Select.tsx
@ -12,8 +12,12 @@ 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',
--- a/packages/chakra-ui-lib/src/components/Stack.tsx
+++ b/packages/chakra-ui-lib/src/components/Stack.tsx
@ -3,9 +3,17 @@ 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(),
+        'column-reverse': Type.String(),
+        row: Type.String(),
+        'row-reverse': Type.String(),
+      })
+    ),
+    Type.Array(
      Type.KeyOf(
        Type.Object({
          column: Type.String(),
@ -13,23 +21,13 @@ export const DirectionSchema = Type.Optional(
          row: Type.String(),
          'row-reverse': Type.String(),
        })
-      ),
-      Type.Array(
-        Type.KeyOf(
-          Type.Object({
-            column: Type.String(),
-            'column-reverse': Type.String(),
-            row: Type.String(),
-            'row-reverse': Type.String(),
-          })
-        )
-      ),
-    ],
-    {
-      title: 'Flex Direction',
-      category: LAYOUT,
-    }
-  )
+      )
+    ),
+  ],
+  {
+    title: 'Flex Direction',
+    category: LAYOUT,
+  }
 );
 export const FlexWrapSchema = Type.KeyOf(
  Type.Object({
--- a/packages/chakra-ui-lib/src/components/Table/TableTypes.ts
+++ b/packages/chakra-ui-lib/src/components/Table/TableTypes.ts
@ -8,7 +8,7 @@ export const MajorKeyPropertySchema = Type.String({
  category: BASIC,
 });
 export const RowsPerPagePropertySchema = Type.Number({
-  title: '',
+  title: 'Per Page Number',
  category: BEHAVIOR,
 });
 export const DataPropertySchema = Type.Array(Type.Any(), {
@ -39,13 +39,23 @@ export const TdTypeSchema = Type.KeyOf(
  }
 );
 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,
 }, {
--- a/packages/chakra-ui-lib/src/components/Table/spec.ts
+++ b/packages/chakra-ui-lib/src/components/Table/spec.ts
@ -31,6 +31,7 @@ const exampleProperties = {
      key: 'name',
      title: 'Name',
      type: 'text',
+      displayValue: '',
    },
  ],
  majorKey: 'id',
--- a/packages/chakra-ui-lib/src/components/Tooltip.tsx
+++ b/packages/chakra-ui-lib/src/components/Tooltip.tsx
@ -65,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 getColorSchemePropertySchema = (options?: Record<string, any>)=> Type.Optional(
+export const getColorSchemePropertySchema = (options?: Record<string, any>) =>
  Type.KeyOf(
    Type.Object({
      whiteAlpha: Type.String(),
@ -21,6 +21,6 @@ export const getColorSchemePropertySchema = (options?: Record<string, any>)=> Ty
      whatsapp: Type.String(),
      twitter: Type.String(),
      telegram: Type.String(),
-    }), options
-  )
-);
+    }),
+    options
+  );
--- 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: [
      {