From a722dcc34aa54014546b76c14bc845759ab3e971 Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Wed, 9 Feb 2022 12:50:51 +0800
Subject: [PATCH] extend metadata and set category annotation to core
 components

---
 .eslintrc.json                                |  3 +-
 .../chakra-ui-lib/src/components/Tabs.tsx     |  6 +-
 packages/core/src/component.ts                |  5 +-
 packages/core/src/metadata.ts                 | 14 ++-
 .../JsonSchemaForm/SchemaField.tsx            |  1 +
 .../runtime/src/components/core/Dummy.tsx     |  3 +
 .../src/components/core/GridLayout.tsx        |  3 +
 .../src/components/core/ModuleContainer.tsx   | 86 +++++++++----------
 packages/runtime/src/components/core/Text.tsx |  3 +
 9 files changed, 70 insertions(+), 54 deletions(-)

diff --git a/.eslintrc.json b/.eslintrc.json
index 71019273..4e8cd4a9 100644
--- a/.eslintrc.json
+++ b/.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",
diff --git a/packages/chakra-ui-lib/src/components/Tabs.tsx b/packages/chakra-ui-lib/src/components/Tabs.tsx
index cfe26ea2..0a2bb6a0 100644
--- a/packages/chakra-ui-lib/src/components/Tabs.tsx
+++ b/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}
diff --git a/packages/core/src/component.ts b/packages/core/src/component.ts
index 24171302..14c40b6a 100644
--- a/packages/core/src/component.ts
+++ b/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,
diff --git a/packages/core/src/metadata.ts b/packages/core/src/metadata.ts
index 7faa3dae..e1c6ba9b 100644
--- a/packages/core/src/metadata.ts
+++ b/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;
diff --git a/packages/editor/src/components/ComponentForm/JsonSchemaForm/SchemaField.tsx b/packages/editor/src/components/ComponentForm/JsonSchemaForm/SchemaField.tsx
index ade3789e..ee9d0d63 100644
--- a/packages/editor/src/components/ComponentForm/JsonSchemaForm/SchemaField.tsx
+++ b/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}
diff --git a/packages/runtime/src/components/core/Dummy.tsx b/packages/runtime/src/components/core/Dummy.tsx
index b3b85183..747127ad 100644
--- a/packages/runtime/src/components/core/Dummy.tsx
+++ b/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({}),
diff --git a/packages/runtime/src/components/core/GridLayout.tsx b/packages/runtime/src/components/core/GridLayout.tsx
index 5b140fb9..e7023d62 100644
--- a/packages/runtime/src/components/core/GridLayout.tsx
+++ b/packages/runtime/src/components/core/GridLayout.tsx
@@ -31,6 +31,9 @@ export default implementRuntimeComponent({
       layout: [],
     },
     exampleSize: [6, 6],
+    annotations: {
+      category: 'Layout',
+    },
   },
   spec: {
     properties: PropsSchema,
diff --git a/packages/runtime/src/components/core/ModuleContainer.tsx b/packages/runtime/src/components/core/ModuleContainer.tsx
index 4f01644f..c8e5df0c 100644
--- a/packages/runtime/src/components/core/ModuleContainer.tsx
+++ b/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}
-      />
-    );
-  })
\ No newline at end of file
+  },
+  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}
+    />
+  );
+});
diff --git a/packages/runtime/src/components/core/Text.tsx b/packages/runtime/src/components/core/Text.tsx
index 31739bea..2ef6897e 100644
--- a/packages/runtime/src/components/core/Text.tsx
+++ b/packages/runtime/src/components/core/Text.tsx
@@ -25,6 +25,9 @@ export default implementRuntimeComponent({
       },
     },
     exampleSize: [4, 1],
+    annotations: {
+      category: 'Display',
+    },
   },
   spec: {
     properties: PropsSchema,