Add basic Vue Vanilla renderer set

Adds a basic Vanilla renderer set for Vue 3 and Vue 2. It provides 
primitive control renderers, basic layout renderers as well as an
array list renderer based on Vanilla HTML5.

CSS classes are completely customizable programmatically as well as via
the ui schema to allow straightforward integration with CSS libraries
like Tailwind.

Complimentary changes:

- The Vue 'config' object was only top-level reactive. Now JSON Forms
will also react to nested changes.
- Export the whole content of Vue `jsonFormsCompositions` to make them
reusable by the vanilla-renderers as well as any custom library.
- Restructured package layout to enable sharing the same Vue library over
multiple bundles during development.
- Add id calculation to existing composition function
- Reworked watching in composition API as the previous approach led to
endless loops in Vue 2

lerna.json

@@ -1,7 +1,19 @@
 {
-  "lerna": "2.5.1",
   "packages": [
-    "packages/*"
+    "packages/angular",
+    "packages/angular-material",
+    "packages/angular-test",
+    "packages/core",
+    "packages/example",
+    "packages/examples",
+    "packages/material",
+    "packages/react",
+    "packages/vue",
+    "packages/vue/vue",
+    "packages/vue/vue-vanilla",
+    "packages/vue2",
+    "packages/vue2/vue2",
+    "packages/vue2/vue2-vanilla"
   ],
   "version": "2.5.0",
   "nohoist": [

package.json

@@ -21,6 +21,7 @@
     "ava": "~2.4.0",
     "babel-loader": "^8.0.6",
     "coveralls": "^3.0.9",
+    "core-js": "^3.9.1",
     "cross-env": "^7.0.2",
     "css-loader": "^3.2.0",
     "lcov-result-merger": "^3.1.0",

packages/core/src/util/index.ts

@@ -152,3 +152,4 @@ export * from './combinators';
 export * from './uischema';
 export * from './array';
 export * from './type';
+export * from './schema';

packages/core/src/util/renderer.ts

@@ -750,6 +750,16 @@ export const layoutDefaultProps: {
   direction: 'column'
 };
 
+const getDirection = (uischema: UISchemaElement) => {
+  if (uischema.type === 'HorizontalLayout') {
+    return 'row';
+  }
+  if (uischema.type === 'VerticalLayout') {
+    return 'column';
+  }
+  return layoutDefaultProps.direction;
+};
+
 /**
  * Map state to layout props.
  * @param state JSONForms state tree
@@ -784,7 +794,7 @@ export const mapStateToLayoutProps = (
     data,
     uischema: ownProps.uischema,
     schema: ownProps.schema,
-    direction: ownProps.direction || layoutDefaultProps.direction
+    direction: ownProps.direction ?? getDirection(uischema)
   };
 };
 

packages/core/src/util/schema.ts

@@ -0,0 +1,15 @@
+import find from "lodash/find";
+
+export const getFirstPrimitiveProp = (schema: any) => {
+  if (schema.properties) {
+    return find(Object.keys(schema.properties), propName => {
+      const prop = schema.properties[propName];
+      return (
+        prop.type === 'string' ||
+        prop.type === 'number' ||
+        prop.type === 'integer'
+      );
+    });
+  }
+  return undefined;
+};

packages/material/src/layouts/ExpandPanelRenderer.tsx

@@ -19,12 +19,12 @@ import {
   Resolve,
   update,
   JsonFormsCellRendererRegistryEntry,
-  JsonFormsUISchemaRegistryEntry
+  JsonFormsUISchemaRegistryEntry,
+  getFirstPrimitiveProp
 } from '@jsonforms/core';
 import ExpansionPanelDetails from '@material-ui/core/ExpansionPanelDetails';
 import IconButton from '@material-ui/core/IconButton';
 import ExpansionPanel from '@material-ui/core/ExpansionPanel';
-import find from 'lodash/find';
 import ExpansionPanelSummary from '@material-ui/core/ExpansionPanelSummary';
 import { Grid } from '@material-ui/core';
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
@@ -236,20 +236,6 @@ export const ctxDispatchToExpandPanelProps: (
   }
 });
 
-const getFirstPrimitiveProp = (schema: any) => {
-  if (schema.properties) {
-    return find(Object.keys(schema.properties), propName => {
-      const prop = schema.properties[propName];
-      return (
-        prop.type === 'string' ||
-        prop.type === 'number' ||
-        prop.type === 'integer'
-      );
-    });
-  }
-  return undefined;
-};
-
 /**
  * Map state to control props.
  * @param state the JSON Forms state

packages/material/src/mui-controls/MuiInputText.tsx

@@ -32,6 +32,7 @@ import InputAdornment from '@material-ui/core/InputAdornment';
 import Close from '@material-ui/icons/Close';
 import { useTheme } from '@material-ui/core/styles';
 import { JsonFormsTheme } from '../util';
+import { InputBaseComponentProps } from '@material-ui/core';
 
 interface MuiTextInputProps {
   muiInputProps?: InputProps['inputProps'];
@@ -56,7 +57,7 @@ export const MuiInputText = React.memo((props: CellProps & WithClassname & MuiTe
   } = props;
   const maxLength = schema.maxLength;
   const appliedUiSchemaOptions = merge({}, config, uischema.options);
-  let inputProps: any;
+  let inputProps: InputBaseComponentProps;
   if (appliedUiSchemaOptions.restrict) {
     inputProps = { maxLength: maxLength };
   } else {