add defaultProperties for components

packages/core/src/metadata.ts

@@ -8,5 +8,5 @@ export type ComponentMetadata = Metadata & {
   isResizable: boolean;
   displayName: string;
   icon?: string;
-  defaultProperties?: Record<string, unknown>;
+  defaultProperties: Record<string, unknown>;
 };

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

@@ -2,6 +2,7 @@ import RGL, { WidthProvider } from 'react-grid-layout';
 import { Static, Type } from '@sinclair/typebox';
 import 'react-grid-layout/css/styles.css';
 import 'react-resizable/css/styles.css';
+import { GRID_HEIGHT } from '../../constants';
 
 const ReactGridLayout = WidthProvider(RGL);
 
@@ -27,7 +28,7 @@ const GridLayout: React.FC<{
       isResizable={!!onDragStop}
       compactType={null}
       preventCollision={true}
-      rowHeight={40}
+      rowHeight={GRID_HEIGHT}
       layout={layout}
       onDragStop={onDragStop}
       onDrop={onDrop}

packages/runtime/src/components/chakra-ui/Box.tsx

@@ -4,6 +4,7 @@ import { Box as BaseBox } from '@chakra-ui/react';
 import { ComponentImplementation } from '../../services/registry';
 import Slot from '../_internal/Slot';
 import { pick } from 'lodash';
+import { GRID_HEIGHT } from '../../constants';
 
 const CssGlobals = Type.KeyOf(
   Type.Object({
@@ -293,6 +294,11 @@ export default {
       isDraggable: true,
       isResizable: true,
       description: 'chakra-ui box',
+      defaultProperties: {
+        w: GRID_HEIGHT,
+        h: GRID_HEIGHT,
+        border: '1px solid black',
+      },
     },
     spec: {
       properties: StyleSchema,

packages/runtime/src/components/chakra-ui/Form/FormControl.tsx

@@ -119,6 +119,12 @@ export default {
       isDraggable: true,
       displayName: 'FormControl',
       description: 'chakra-ui formControl',
+      defaultProperties: {
+        label: 'name',
+        fieldName: 'name',
+        isRequired: false,
+        helperText: '',
+      },
     },
     spec: {
       properties: PropsSchema,

packages/runtime/src/components/chakra-ui/List.tsx

@@ -99,6 +99,28 @@ const PropsSchema = Type.Object({
   template: Type.Object(Type.String(), Type.Array(Type.Object(Type.String()))),
 });
 
+const defaultProperties = {
+  listData: [
+    {
+      id: '1',
+      name: 'Bowen Tan',
+    },
+  ],
+  template: [
+    {
+      id: 'listItemName-{{$listItem.id}}',
+      type: 'core/v1/text',
+      properties: {
+        value: {
+          raw: 'Name：{{$listItem.name}}',
+          format: 'plain',
+        },
+      },
+      traits: [],
+    },
+  ],
+};
+
 export default {
   ...createComponent({
     version: 'chakra_ui/v1',
@@ -108,6 +130,7 @@ export default {
       displayName: 'List',
       isDraggable: true,
       isResizable: true,
+      defaultProperties,
     },
     spec: {
       properties: PropsSchema,

packages/runtime/src/components/chakra-ui/RadioGroup.tsx

@@ -49,6 +49,10 @@ export default {
       description: 'chakra-ui radio group',
       isDraggable: true,
       isResizable: true,
+      defaultProperties: {
+        defaultValue: 0,
+        isNumerical: true,
+      },
     },
     spec: {
       properties: PropsSchema,

packages/runtime/src/components/chakra-ui/Select.tsx

@@ -88,6 +88,23 @@ const PropsSchema = Type.Object({
   ),
 });
 
+const defaultProperties = {
+  options: [
+    {
+      label: 'value1',
+      value: 'value1',
+    },
+    {
+      label: 'value2',
+      value: 'value2',
+    },
+    {
+      label: 'value3',
+      value: 'value3',
+    },
+  ],
+};
+
 export default {
   ...createComponent({
     version: 'chakra_ui/v1',
@@ -97,6 +114,7 @@ export default {
       description: 'chakra-ui select',
       isResizable: true,
       isDraggable: true,
+      defaultProperties,
     },
     spec: {
       properties: PropsSchema,

packages/runtime/src/components/chakra-ui/Stack.tsx

@@ -67,6 +67,10 @@ export default {
       description: 'chakra-ui stack',
       isResizable: true,
       isDraggable: true,
+      defaultProperties: {
+        direction: 'column',
+        spacing: 10,
+      },
     },
     spec: {
       properties: PropsSchema,

packages/runtime/src/components/chakra-ui/Table/index.ts

@@ -20,6 +20,25 @@ const PropsSchema = Type.Object({
   isMultiSelect: IsMultiSelectPropertySchema,
 });
 
+const defaultProperties = {
+  data: [
+    {
+      id: '1',
+      name: 'Bowen Tan',
+    },
+  ],
+  columns: [
+    {
+      key: 'name',
+      title: 'Name',
+      type: 'text',
+    },
+  ],
+  majorKey: 'id',
+  rowsPerPage: 5,
+  isMultiSelect: false,
+};
+
 export default {
   ...createComponent({
     version: 'chakra_ui/v1',
@@ -29,13 +48,7 @@ export default {
       description: 'chakra-ui table',
       isDraggable: true,
       isResizable: true,
-      defaultProperties: {
-        data: [],
-        columns: [],
-        majorKey: 'id',
-        rowsPerPage: 5,
-        isMultiSelect: false,
-      },
+      defaultProperties,
     },
     spec: {
       properties: PropsSchema,

packages/runtime/src/components/chakra-ui/Tooltip.tsx

@@ -75,6 +75,9 @@ export default {
       displayName: 'Tooltip',
       isDraggable: false,
       isResizable: false,
+      defaultProperties: {
+        text: 'tooltip',
+      },
     },
     spec: {
       properties: PropsSchema,

packages/runtime/src/components/chakra-ui/VStack.tsx

@@ -43,6 +43,10 @@ export default {
       description: 'chakra-ui vstack',
       isDraggable: true,
       isResizable: true,
+      defaultProperties: {
+        spacing: 4,
+        align: 'stretch',
+      },
     },
     spec: {
       properties: PropsSchema,

packages/runtime/src/constants.ts

@@ -1,2 +1,3 @@
 export const LIST_ITEM_EXP = '$listItem';
 export const LIST_ITEM_INDEX_EXP = '$i';
+export const GRID_HEIGHT = 40;