add module metaData form

packages/editor/src/AppStorage.ts

@@ -84,7 +84,7 @@ export class AppStorage {
     }
   }
 
-  saveAppMetaDataInLS({version, name}: { version: string, name: string }) {
+  saveAppMetaDataInLS({ version, name }: { version: string; name: string }) {
     const newApp = produce(this.app, draft => {
       draft.metadata.name = name;
       draft.version = version;
@@ -93,6 +93,30 @@ export class AppStorage {
     this.saveAppInLS();
   }
 
+  saveModuleMetaDataInLS(
+    { originName, originVersion }: { originName: string; originVersion: string },
+    {
+      version,
+      name,
+      stateMap,
+    }: {
+      version: string;
+      name: string;
+      stateMap: Record<string, string>;
+    }
+  ) {
+    const i = this.modules.findIndex(
+      m => m.version === originVersion && m.metadata.name === originName
+    );
+    const newModules = produce(this.modules, draft => {
+      draft[i].metadata.name = name;
+      draft[i].spec.stateMap = stateMap;
+      draft[i].version = version;
+    });
+    this.setModules(newModules);
+    this.saveModulesInLS();
+  }
+
   private saveAppInLS() {
     localStorage.setItem(AppStorage.AppLSKey, JSON.stringify(this.app));
   }

packages/editor/src/components/ComponentForm/GeneralTraitFormList/GeneralTraitForm.tsx

@@ -31,7 +31,7 @@ export const GeneralTraitForm: React.FC<Props> = props => {
       value,
       fullKey: key,
       type: trait.type,
-      selectedId: component.id,
+      selectedComponentId: component.id,
     });
   });
   return (

packages/editor/src/components/Explorer/ExplorerForm/ExplorerForm.tsx

@@ -3,6 +3,9 @@ import { observer } from 'mobx-react-lite';
 import { Button, Text, VStack } from '@chakra-ui/react';
 import { ArrowLeftIcon } from '@chakra-ui/icons';
 import { AppMetaDataForm } from './AppMetaDataForm';
+import { ModuleMetaDataForm } from './ModuleMetaDataForm';
+import { registry } from '../../../setup';
+
 type Props = {
   formType: 'app' | 'module';
   version: string;
@@ -22,11 +25,13 @@ export const ExplorerForm: React.FC<Props> = observer(
         form = <AppMetaDataForm data={appMetaData} />;
         break;
       case 'module':
-        form = (
-          <span>
-            module Form: {version}/{name}
-          </span>
-        );
+        const moduleSpec = registry.getModule(version, name);
+        const moduleMetaData = {
+          name,
+          version,
+          stateMap: moduleSpec.spec.stateMap,
+        };
+        form = <ModuleMetaDataForm data={moduleMetaData} />;
         break;
     }
     return (
@@ -38,7 +43,7 @@ export const ExplorerForm: React.FC<Props> = observer(
           variant="ghost"
           colorScheme="blue"
           onClick={onBack}
-          padding='0'
+          padding="0"
         >
           Back
         </Button>

packages/editor/src/components/Explorer/ExplorerForm/ModuleMetaDataForm.tsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import { FormControl, FormLabel, Input, VStack } from '@chakra-ui/react';
+import { useFormik } from 'formik';
+import { observer } from 'mobx-react-lite';
+import { editorStore } from '../../../EditorStore';
+import { KeyValueEditor } from '../../KeyValueEditor';
+
+type ModuleMetaDataFormData = {
+  name: string;
+  version: string;
+  stateMap: Record<string, string>;
+};
+
+type ModuleMetaDataFormProps = {
+  data: ModuleMetaDataFormData;
+};
+
+export const ModuleMetaDataForm: React.FC<ModuleMetaDataFormProps> = observer(
+  ({ data }) => {
+    const onSubmit = (value: ModuleMetaDataFormData) => {
+      editorStore.appStorage.saveModuleMetaDataInLS(
+        { originName: data.name, originVersion: data.version },
+        value
+      );
+    };
+    const formik = useFormik({
+      initialValues: data,
+      onSubmit,
+    });
+    return (
+      <VStack>
+        <FormControl isRequired>
+          <FormLabel>Module Version</FormLabel>
+          <Input
+            name="version"
+            value={formik.values.version}
+            onChange={formik.handleChange}
+            onBlur={() => formik.submitForm()}
+          />
+        </FormControl>
+        <FormControl isRequired>
+          <FormLabel>Module Name</FormLabel>
+          <Input
+            name="name"
+            value={formik.values.name}
+            onChange={formik.handleChange}
+            onBlur={() => formik.submitForm()}
+          />
+        </FormControl>
+        <FormControl>
+          <FormLabel>Module StateMap</FormLabel>
+          <KeyValueEditor
+            initValue={formik.values.stateMap}
+            onChange={json => {
+              formik.setFieldValue('stateMap', json);
+              formik.submitForm();
+            }}
+          />
+        </FormControl>
+      </VStack>
+    );
+  }
+);

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

@@ -18,13 +18,14 @@ export type TextProps = {
 };
 
 const Text: React.FC<TextProps> = ({ value, cssStyle }) => {
+  const text = typeof value.raw === 'string' ? value.raw : `${value.raw}`;
   if (value.format === 'md') {
     const Div = styled.div`
       ${cssStyle}
     `;
     return (
       <Div>
-        <ReactMarkdown>{value.raw}</ReactMarkdown>
+        <ReactMarkdown>{text}</ReactMarkdown>
       </Div>
     );
   }
@@ -33,7 +34,7 @@ const Text: React.FC<TextProps> = ({ value, cssStyle }) => {
   const Span = styled.span`
     ${cssStyle}
   `;
-  return <Span>{value.raw}</Span>;
+  return <Span>{text}</Span>;
 };
 
 export default Text;