extend metadata and set category annotation to core components

.eslintrc.json

@@ -25,7 +25,7 @@
     "linebreak-style": ["error", "unix"],
     "no-case-declarations": "off",
     "no-use-before-define": "off",
-    "no-unused-vars":"off",
+    "no-unused-vars": "off",
     "@typescript-eslint/no-unused-vars": ["error"],
     "comma-dangle": "off",
     "space-before-function-paren": "off",
@@ -33,6 +33,7 @@
     "@typescript-eslint/explicit-module-boundary-types": "off",
     "@typescript-eslint/no-explicit-any": "off",
     "@typescript-eslint/no-non-null-assertion": "off",
+    "@typescript-eslint/ban-types": "off",
     "react/prop-types": "off",
     "react/display-name": "off",
     "react/jsx-uses-react": "off",

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

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { css } from '@emotion/css';
 import {
   Tabs as BaseTabs,
@@ -74,7 +74,9 @@ export default implementRuntimeComponent({
       </TabList>
       <TabPanels>
         {tabNames.map((_, idx) => {
-          const ele = slotsElements.content ? ([] as React.ReactElement[]).concat(slotsElements.content)[idx] : placeholder;
+          const ele = slotsElements.content
+            ? ([] as React.ReactElement[]).concat(slotsElements.content)[idx]
+            : placeholder;
           return (
             <TabPanel
               key={idx}

packages/core/src/component.ts

@@ -1,10 +1,7 @@
 import { JSONSchema7 } from 'json-schema';
-import { parseVersion } from './version';
+import { parseVersion, Version } from './version';
 import { ComponentMetadata } from './metadata';
 import { MethodSchema } from './method';
-import { Version } from './version';
-
-// TODO: (type-safe), rename version 2 to normal version
 
 type ComponentSpec<
   KMethodName extends string,

packages/core/src/metadata.ts

@@ -1,9 +1,19 @@
-export type Metadata = {
+export type Metadata<TAnnotations = Record<string, unknown>> = {
   name: string;
   description?: string;
+  annotations?: Record<string, any> & TAnnotations;
 };
 
-export type ComponentMetadata = Metadata & {
+type ComponentCategory =
+  | (string & {})
+  | 'Layout'
+  | 'Input'
+  | 'Display'
+  | 'Advance'
+  | undefined;
+
+export type ComponentMetadata = Metadata<{ category?: ComponentCategory }> & {
+  // TODO:(yanzhen): move to annotations
   isDraggable: boolean;
   isResizable: boolean;
   displayName: string;

packages/editor/src/components/ComponentForm/JsonSchemaForm/SchemaField.tsx

@@ -134,6 +134,7 @@ const SchemaField: React.FC<Props> = props => {
   return (
     <DefaultTemplate
       label={label}
+      description={schema.description}
       displayLabel={displayLabel}
       codeMode={codeMode}
       isExpression={isExpression}

packages/runtime/src/components/core/Dummy.tsx

@@ -12,6 +12,9 @@ export default implementRuntimeComponent({
     isResizable: false,
     exampleProperties: {},
     exampleSize: [1, 1],
+    annotations: {
+      category: 'Advance',
+    },
   },
   spec: {
     properties: Type.Object({}),

packages/runtime/src/components/core/GridLayout.tsx

@@ -31,6 +31,9 @@ export default implementRuntimeComponent({
       layout: [],
     },
     exampleSize: [6, 6],
+    annotations: {
+      category: 'Layout',
+    },
   },
   spec: {
     properties: PropsSchema,

packages/runtime/src/components/core/ModuleContainer.tsx

@@ -3,50 +3,46 @@ import { ModuleSchema } from '../../types';
 import { ModuleRenderer } from '../_internal/ModuleRenderer';
 
 export default implementRuntimeComponent({
-    version: 'core/v1',
-    metadata: {
-      name: 'moduleContainer',
-      displayName: 'ModuleContainer',
-      description: 'ModuleContainer component',
-      isDraggable: true,
-      isResizable: true,
-      exampleProperties: {
-        id: 'myModule',
-        type: 'custom/v1/module',
-      },
-      exampleSize: [6, 6],
+  version: 'core/v1',
+  metadata: {
+    name: 'moduleContainer',
+    displayName: 'ModuleContainer',
+    description: 'ModuleContainer component',
+    isDraggable: true,
+    isResizable: true,
+    exampleProperties: {
+      id: 'myModule',
+      type: 'custom/v1/module',
     },
-    spec: {
-      properties: ModuleSchema,
-      state: {},
-      methods: {},
-      slots: [],
-      styleSlots: [],
-      events: [],
+    exampleSize: [6, 6],
+    annotations: {
+      category: 'Advance',
     },
-  })(({
-    id,
-    type,
-    properties,
-    handlers,
-    services,
-    app
-  }) => {
-    if (!type) {
-      return <span>Please choose a module to render.</span>
-    }
-    if (!id) {
-      return <span>Please set a id for module.</span>
-    }
-  
-    return (
-      <ModuleRenderer
-        id={id}
-        type={type}
-        properties={properties}
-        handlers={handlers}
-        services={services}
-        app={app}
-      />
-    );
-  })
+  },
+  spec: {
+    properties: ModuleSchema,
+    state: {},
+    methods: {},
+    slots: [],
+    styleSlots: [],
+    events: [],
+  },
+})(({ id, type, properties, handlers, services, app }) => {
+  if (!type) {
+    return <span>Please choose a module to render.</span>;
+  }
+  if (!id) {
+    return <span>Please set a id for module.</span>;
+  }
+
+  return (
+    <ModuleRenderer
+      id={id}
+      type={type}
+      properties={properties}
+      handlers={handlers}
+      services={services}
+      app={app}
+    />
+  );
+});

packages/runtime/src/components/core/Text.tsx

@@ -25,6 +25,9 @@ export default implementRuntimeComponent({
       },
     },
     exampleSize: [4, 1],
+    annotations: {
+      category: 'Display',
+    },
   },
   spec: {
     properties: PropsSchema,