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

@@ -15,6 +15,9 @@ export default implementRuntimeComponent({
       type: 'custom/v1/module',
     },
     exampleSize: [6, 6],
+    annotations: {
+      category: 'Advance',
+    },
   },
   spec: {
     properties: ModuleSchema,
@@ -24,19 +27,12 @@ export default implementRuntimeComponent({
     styleSlots: [],
     events: [],
   },
-  })(({
-    id,
-    type,
-    properties,
-    handlers,
-    services,
-    app
-  }) => {
+})(({ id, type, properties, handlers, services, app }) => {
   if (!type) {
-      return <span>Please choose a module to render.</span>
+    return <span>Please choose a module to render.</span>;
   }
   if (!id) {
-      return <span>Please set a id for module.</span>
+    return <span>Please set a id for module.</span>;
   }
 
   return (
@@ -49,4 +45,4 @@ export default implementRuntimeComponent({
       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,