Merge pull request #234 from webzard-io/fix/bug

fix some small bugs and style

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

@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
-import { sortBy } from 'lodash-es';
+import { isArray, sortBy } from 'lodash-es';
 import {
   Table as BaseTable,
   Thead,
@@ -63,6 +63,7 @@ export const TableImpl = implementTable(
     }, [data, updateSelectedItem, updateSelectedItems]);
 
     const sortedData = useMemo(() => {
+      if (!isArray(data)) return [];
       if (!sortRule) return data;
       const sorted = sortBy(data, sortRule.key);
       return sortRule.desc ? sorted.reverse() : sorted;

packages/editor/src/AppModel/AppModel.ts

@@ -6,6 +6,7 @@ import {
   ComponentType,
   IAppModel,
   IComponentModel,
+  ModuleId,
   SlotName,
 } from './IAppModel';
 import { genComponent } from './utils';
@@ -36,6 +37,10 @@ export class AppModel implements IAppModel {
     return Object.values(this.componentMap);
   }
 
+  get moduleIds(): ModuleId[] {
+    return this.allComponents.filter(c => c.type === 'core/v1/moduleContainer').map(c => c.properties.rawValue.id);
+  }
+
   toSchema(): ComponentSchema[] {
     this.schema = this.allComponents.map(c => {
       return c.toSchema();

packages/editor/src/AppModel/IAppModel.ts

@@ -39,6 +39,7 @@ export type EventName = string & {
 export interface IAppModel {
   topComponents: IComponentModel[];
   // modules: IModuleModel[];
+  moduleIds: ModuleId[];
   // generated by traverse the tree. Component will be overwritten if its id is duplicated.
   allComponents: IComponentModel[];
   // all components, including orphan component

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

@@ -153,7 +153,7 @@ export const ComponentForm: React.FC<Props> = observer(props => {
           </VStack>
         </VStack>
         <EventTraitForm component={selectedComponent} services={services} />
-        { hasFetchTrait ? <FetchTraitForm component={selectedComponent} services={services} /> : null }
+        { hasFetchTrait ? <FetchTraitForm key={selectedComponent.id} component={selectedComponent} services={services} /> : null }
         <StyleTraitForm component={selectedComponent} services={services} />
         <GeneralTraitFormList component={selectedComponent} services={services} />
       </VStack>

packages/editor/src/components/ComponentForm/FetchTraitForm/FetchTraitForm.tsx

@@ -41,7 +41,7 @@ export const FetchTraitForm: React.FC<Props> = props => {
     ?.properties as Static<typeof FetchTraitPropertiesSchema>;
 
   const formik = useFormik({
-    initialValues: fetchTrait,
+    initialValues: { onComplete: [], onError: [], ...fetchTrait },
     onSubmit: values => {
       const index = component.traits.findIndex(t => t.type === 'core/v1/fetch');
       eventBus.send(

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

@@ -33,7 +33,7 @@ const ArrayField: React.FC<Props> = props => {
     <>
       {formData.map((v, idx) => {
         return (
-          <Box key={idx} mb={2}>
+          <Box key={idx} mb={2} border='1px solid black' borderColor='gray.200' borderRadius='4' padding='8px'>
             <ButtonGroup
               spacing={0}
               size="xs"

packages/editor/src/components/WarningArea.tsx

@@ -75,6 +75,7 @@ export const WarningArea: React.FC<Props> = observer(({ services }) => {
       paddingY="2"
       paddingX="4"
       boxShadow="0 0 4px rgba(0, 0, 0, 0.1)"
+      background='white'
     >
       <HStack width="full" justifyContent="space-between">
         <Text fontSize="md" fontWeight="bold">

packages/editor/src/validator/rules/PropertiesRules.ts

@@ -1,5 +1,5 @@
 import { get, has } from 'lodash-es';
-import { ComponentId } from '../../AppModel/IAppModel';
+import { ComponentId, ModuleId } from '../../AppModel/IAppModel';
 import {
   PropertiesValidatorRule,
   PropertiesValidateContext,
@@ -97,8 +97,11 @@ class ExpressionValidatorRule implements PropertiesValidatorRule {
               break;
             }
           }
+        } else if (appModel.moduleIds.includes(id as ModuleId)) {
+          // case 3: id is a module
+          // TODO: check module stateMap
         } else {
-          // case 3: id doesn't exist
+          // case 4: id doesn't exist
           results.push({
             message: `Cannot find '${id}' in store or window.`,
             componentId: component.id,

packages/runtime/src/utils/parseTypeBox.ts

@@ -9,6 +9,7 @@ import {
   TSchema,
   OptionalModifier,
   UnionKind,
+  AnyKind,
 } from '@sinclair/typebox';
 
 export function parseTypeBox(tSchema: TSchema, noOptional = false): Static<typeof tSchema> {
@@ -40,6 +41,8 @@ export function parseTypeBox(tSchema: TSchema, noOptional = false): Static<typeo
       const subSchema = (tSchema.anyOf || tSchema.oneOf)[0];
       return parseTypeBox(subSchema, noOptional);
     }
+    case tSchema.kind === AnyKind:
+      return undefined;
     default:
       return {};
   }