Merge pull request #418 from vip-git/universal-schema

feat: universal schema setup for cross framework compilation

Author: vip-git

.eslintrc.js

@@ -19,6 +19,7 @@ module.exports = {
     'no-trailing-spaces': 'off',
     'react/jsx-indent': 'off',
     'no-unused-vars': 'off',
+    'no-mixed-spaces-and-tabs': 'off',
     'react/jsx-indent-props': 'off',
     'react/jsx-props-no-spreading': 'off',
     'react/prop-types': 'off',
@@ -74,4 +75,7 @@ module.exports = {
   'env': {
     'jest/globals': true
   },
+  "ignorePatterns": [
+    "src/types/helpers/TransformSchema.type.ts"
+  ],
 };

.github/workflows/node-e2e.yml

@@ -33,7 +33,7 @@ jobs:
       uses: actions/setup-node@v1
       with:
         node-version: ${{ matrix.node-version }}
-    - run: rm -rf package.json && mv wdio-package.json package.json && npm install
+    - run: rm -rf package.json && mv wdio-package.json package.json && npm install && npm run install-react-mui
     #- name: "Check if deployment is done"
       #env:
       #  VERCEL_TOKEN: ${{secrets.VERCEL_TOKEN}}

.github/workflows/node.js.yml

@@ -29,6 +29,7 @@ jobs:
       with:
         node-version: ${{ matrix.node-version }}
     - run: npm install --force
+    - run: npm run install-react-mui
     - run: npm run build
     - run: npx jest --env=jsdom --config=jest.config.js --coverage --ci --updateSnapshot --detectOpenHandles --forceExit
     - name: Codecov

.github/workflows/prerelease.yml

@@ -17,6 +17,7 @@ jobs:
         with:
           node-version: 14
       - run: npm install
+      - run: npm run install-react-mui
       - run: npm run build
       - run: npx jest --env=jsdom --config=jest.config.js --coverage --ci --updateSnapshot --detectOpenHandles --forceExit
 
@@ -31,6 +32,7 @@ jobs:
           node-version: 14
           registry-url: https://registry.npmjs.org/
       - run: npm install
+      - run: npm run install-react-mui
       - run: npm run build
       - run: npm install -g json
       - run: json -I -f package.json -e 'this.scripts.postinstall="echo done"'
@@ -49,6 +51,7 @@ jobs:
           node-version: 14
           registry-url: https://npm.pkg.github.com/
       - run: npm install
+      - run: npm run install-react-mui
       - run: npm run build
       - run: npm install -g json
       - run: json -I -f package.json -e 'this.name="@vip-git/react-jsonschema-form-material-ui"'

.github/workflows/release.yml

@@ -17,6 +17,7 @@ jobs:
         with:
           node-version: 14
       - run: npm install
+      - run: npm run install-react-mui
       - run: npm run build
       - run: npx jest --env=jsdom --config=jest.config.js --coverage --ci --updateSnapshot --detectOpenHandles --forceExit
 
@@ -31,6 +32,7 @@ jobs:
           node-version: 14
           registry-url: https://registry.npmjs.org/
       - run: npm install
+      - run: npm run install-react-mui
       - run: npm run build
       - run: npx tsc index.js --declaration --allowJs --emitDeclarationOnly --skipLibCheck --outDir .
       - run: npm install -g json
@@ -50,6 +52,7 @@ jobs:
           node-version: 14
           registry-url: https://npm.pkg.github.com/
       - run: npm install
+      - run: npm run install-react-mui
       - run: npm run build
       - run: npx tsc index.js --declaration --allowJs --emitDeclarationOnly --skipLibCheck --outDir .
       - run: npm install -g json

.gitignore

@@ -12,3 +12,15 @@ generator/package.json
 coverage
 .husky
 src/fields/components/**/package-lock.json
+src/framework
+src/universal-schema/ui-framework.ts
+src/universal-schema/types/ui-framework.type.ts
+scripts/installer/templates/react/src/ui-framework/index.ts
+package-lock.json
+temp
+scripts/installer/frameworks/**/config
+scripts/installer/frameworks/**/helpers
+scripts/installer/frameworks/**/universal-schema
+scripts/installer/frameworks/**/src/types
+scripts/generator/package-lock.json
+scripts/generator/package.json

changelog.md

@@ -6,7 +6,7 @@ import schema from './schema.json';
 import uiSchema from './ui-schema.json';
 import xhrSchema from './xhr-schema.json';
 import formData from './form-data.json';
-import config from '../../../../../scripts/generator/components.json';
+import config from '../../../scripts/generator/frameworks/react/mui/components.json';
 
 const sessionId = generate();
 

demo/web/react/examples/additional-props/form-data.json renamed to demo/examples/additional-props/form-data.json

@@ -0,0 +1,100 @@
+// JSON
+import schema from './schema.json';
+import uiSchema from './ui-schema.json';
+import xhrSchema from './xhr-schema.json';
+import formData from './form-data.json';
+import config from '../../../scripts/generator/frameworks/react-native/rnpaper/components.json';
+
+const sessionId = Math.random(123);
+
+formData.SelectComponents = {
+  sessionId,
+};
+formData.PublishPackage = {
+  sessionId,
+};
+formData.SelectComponents.listOfComponents = [];
+formData.SelectComponents.listOfInterceptors = [];
+formData.SelectComponents.listOfUtils = [];
+
+Object.keys(config.interceptors).forEach((interceptor) => {
+  schema.definitions.componentsList.dependencies.selectTheme.oneOf[1].properties.listOfInterceptors.items.enum.push(
+    {
+      key: config.interceptors[interceptor].name,
+      value: config.interceptors[interceptor].name,
+      disabled: config.interceptors[interceptor].isRequired,
+    },
+  );
+
+  if (config.interceptors[interceptor].isRequired) {
+    formData.SelectComponents.listOfInterceptors.push(
+      config.interceptors[interceptor].name,
+    );
+  }
+});
+
+Object.keys(config.utils).forEach((util) => {
+  /**
+   * Todo: add support for component utils to be selected automatically and disabled
+   */
+  schema.definitions.componentsList.dependencies.selectTheme.oneOf[1].properties.listOfUtils.items.enum.push(
+    {
+      key: config.utils[util].name,
+      value: config.utils[util].name,
+      disabled: config.utils[util].isRequired,
+    },
+  );
+  
+  if (config.utils[util].isRequired) {
+    formData.SelectComponents.listOfUtils.push(config.utils[util].name);
+  }
+});
+  
+Object.keys(config.components).forEach((comp) => {
+  const compEnums = schema
+    .definitions
+    .componentsList
+    .dependencies
+    .selectTheme.oneOf[1]
+    .properties
+    .listOfComponents
+    .items
+    .enum;
+
+  const compEnumVal = {
+    key: config.components[comp].name,
+    value: config.components[comp].name,
+    disabled:
+      config.components[comp].isDefault || config.components[comp].isRequired,
+  };
+
+  if (config.components[comp]?.utils) {
+    // Todo: Covert this to rules.json
+    compEnumVal.onData = {
+      equals: config.components[comp].name,
+      adds: {
+        listOfUtils: [],
+      },
+    };
+    config.components[comp].utils.forEach((cu) => {
+      const cUtils = config.utils[cu];
+      compEnumVal.onData.adds.listOfUtils.push(cUtils.name);
+    });
+  }
+
+  compEnums.push(compEnumVal);
+
+  if (config.components[comp].isDefault || config.components[comp].isRequired) {
+    formData.SelectComponents.listOfComponents.push(
+      config.components[comp].name,
+    );
+  }
+});
+
+export default {
+  title: 'Steps UI',
+  schema,
+  uiSchema,
+  formData,
+  xhrSchema,
+};

demo/web/react/examples/additional-props/index.js renamed to demo/examples/additional-props/index.js

@@ -2,12 +2,8 @@
 import React from 'react';
 import {
   DefaultTheme,
-  Provider as PaperProvider,
-  Avatar,
-  Button,
   Card,
-  Title,
-  Paragraph
+  Provider as PaperProvider,
 } from 'react-native-paper';
 import {
   SafeAreaView,
@@ -17,9 +13,10 @@ import {
 } from 'react-native';
 
 // Internal
-import ReactNativeForm from '../../../src/Form';
+import ReactNativeForm from '../../../src/cross-framework-wrapper/react/Form';
 
-const LeftContent = (props: any) => <Avatar.Icon {...props} icon="folder" />
+// Demo
+import examples from '../../examples';
 
 const App = () => {
   const isDarkMode = useColorScheme() === 'dark';
@@ -33,28 +30,45 @@ const App = () => {
     },
   };
 
-
   const backgroundStyle = {
     backgroundColor: isDarkMode ? theme.colors.primary : theme.colors.accent,
   };
+  
+  // Make this dynamic based on array selection
+  const { schema, uiSchema, formData } = examples[3].numbers;
+
+  const onSubmit = () => {};
+  const onCancel = () => {};
+  const onUpload = () => {};
+  const onFormChanged = () => {};
+  const onError = () => {};
 
   return (
     <PaperProvider theme={theme}>
       <SafeAreaView style={backgroundStyle}>
         <StatusBar barStyle={isDarkMode ? 'light-content' : 'dark-content'} />
         <Card>
-          <Card.Title title="Card Title" subtitle="Card Subtitle" left={LeftContent} />
+          <Card.Title title="JSON Schema Form" subtitle="React-Native Paper" />
           <Card.Content>
-            <Title>Card title</Title>
-            <Paragraph>Card content</Paragraph>
+            <ReactNativeForm 
+              schema={schema}
+              xhrSchema={{}}
+              uiSchema={uiSchema}
+              formData={formData}
+              onCancel={onCancel}
+              onSubmit={onSubmit}
+              onStepNext={onSubmit}
+              onUpload={onUpload}
+              onChange={onFormChanged}
+              onError={onError}
+              interceptors={{}}
+              components={{}}
+              validations={{}}
+              submitOnEnter
+              activityIndicatorEnabled
+            />
           </Card.Content>
-          <Card.Cover source={{ uri: 'https://picsum.photos/700' }} />
-          <Card.Actions>
-            <Button>Cancel</Button>
-            <Button>Ok</Button>
-          </Card.Actions>
         </Card>
-        <ReactNativeForm />
       </SafeAreaView>
     </PaperProvider>
   );

demo/web/react/examples/additional-props/schema.json renamed to demo/examples/additional-props/schema.json

@@ -8,11 +8,17 @@
  const path = require('path');
 
  const extraNodeModules = {
-   '../../../src': path.resolve(__dirname + '/../../../src'),
+   '../../../scripts/installer/frameworks/react-native/src': path.resolve(__dirname + '/../../../scripts/installer/frameworks/react-native/src'),
+   '../../examples': path.resolve(__dirname + '/../../examples'),
+   '../../../scripts/generator': path.resolve(__dirname + '/../../../scripts/generator'),
+   '../../../src': path.resolve(__dirname + '/../../../src')
  };
 
  const watchFolders = [
-   path.resolve(__dirname + '/../../../src')
+   path.resolve(__dirname + '/../../../scripts/installer/frameworks/react-native/src'),
+   path.resolve(__dirname + '/../../examples'),
+   path.resolve(__dirname + '/../../../scripts/generator'),
+   path.resolve(__dirname + '/../../../src'),
  ];
 
 module.exports = {
@@ -30,6 +36,29 @@ module.exports = {
         //redirects dependencies referenced from common/ to local node_modules
         name in target ? target[name] : path.join(process.cwd(), `node_modules/${name}`),
     }),
+    resolveRequest: (context, realModuleName, platform, moduleName) => {
+      let module = realModuleName;
+      if(realModuleName.includes('@universal-schema')) {
+        module = module.replace('@universal-schema', path.resolve(__dirname + '/../../../src/universal-schema'));
+      }
+      if(realModuleName.includes('@core-types')) {
+        module = module.replace('@core-types', path.resolve(__dirname + '/../../../src/types'));
+      }
+      if(realModuleName.includes('@helpers')) {
+        module = module.replace('@helpers', path.resolve(__dirname + '/../../../src/helpers'));
+      }
+      if(realModuleName.includes('@framework')) {
+        module = module.replace('@framework', path.resolve(__dirname + '/../../../scripts/installer/frameworks/react-native/src'));
+      }
+      if(realModuleName.includes('@config')) {
+        module = module.replace('@config', path.resolve(__dirname + '/../../../src/config'));
+      }
+      if(realModuleName.includes('@generated')) {
+        module = module.replace('@generated', path.resolve(__dirname + '/../../../scripts/installer/frameworks/react-native/src/generated'));
+      }
+      const { resolveRequest: removed, ...restContext } = context;
+      return require("metro-resolver").resolve(restContext, module, platform);
+    }
   },
   watchFolders,
 };