Move React components to separate package and unify data handling (#32)

* Move React components to separate package and unify data handling - Extract React components to separate, Theia-less package - Provide shared layer (reducer, context, provider) for all views - Align usage fo ErrorView to display errors - Improve overall typing of model reducer functionality (actions) - Use 'immer' hooks to ease changes to immutable state handling * Updated homepage,repo-url, license, author name & e-mail. * Refactored views for entity general properties and attributes to common views. Refactored form and property views to use the shared EntityGeneralForm and EntityAttributDataeGrid. Added ModelReducer action for updating a whole attribute and changed the datagrid to update on this level. * Moved css files to react package where needed and added import accordingly. Updated EntityAttributeDataGrid to contain tooltip validation on mandatory cells and removed errorRow stuff. * Removed errornous file. * Further moved css files to right place and removed unused parts. * Renamed yaml-example source folder to diagrams. * Removed all unneccessary undefined assignments for property declarations. * Updated dependencies in form-client, property-view and react-model-ui so they are in the right place. * updated dependencies and imports. --------- Co-authored-by: Harmen Wessels <97173058+harmen-xb@users.noreply.github.com>
CrossBreezeNL · Nov 10, 2023 · ce0fa56 · ce0fa56
1 parent f8c9c68
commit ce0fa56
Show file tree

Hide file tree

Showing 50 changed files with 904 additions and 1,915 deletions.
diff --git a/applications/browser-app/package.json b/applications/browser-app/package.json
@@ -3,15 +3,15 @@
   "version": "0.0.0",
   "private": true,
   "description": "CrossModel Community Edition",
-  "homepage": "https://github.com/CrossBreezeNL/CrossModel",
+  "homepage": "https://github.com/CrossBreezeNL/crossmodel",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/CrossBreezeNL/CrossModel"
+    "url": "git+https://github.com/CrossBreezeNL/crossmodel"
   },
-  "license": "UNLICENSED",
+  "license": "AGPL-3.0-or-later",
   "author": {
-    "name": "CrossBreeze Team",
-    "email": "team@x-breeze.com"
+    "name": "CrossBreeze",
+    "email": "devops@crossbreeze.nl"
   },
   "scripts": {
     "clean": "theia clean && rimraf lib && rimraf src-gen",

diff --git a/applications/electron-app/package.json b/applications/electron-app/package.json
@@ -3,15 +3,15 @@
   "version": "0.0.0",
   "private": true,
   "description": "CrossModel Community Edition",
-  "homepage": "https://github.com/CrossBreezeNL/CrossModel",
+  "homepage": "https://github.com/CrossBreezeNL/crossmodel",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/CrossBreezeNL/CrossModel"
+    "url": "git+https://github.com/CrossBreezeNL/crossmodel"
   },
-  "license": "UNLICENSED",
+  "license": "AGPL-3.0-or-later",
   "author": {
-    "name": "CrossBreeze Team",
-    "email": "team@x-breeze.com"
+    "name": "CrossBreeze",
+    "email": "devops@crossbreeze.nl"
   },
   "main": "scripts/electron-main.js",
   "scripts": {

diff --git a/.../source/voorbeeld_taal_diagram.diagram.cm → ...iagrams/voorbeeld_taal_diagram.diagram.cm b/.../source/voorbeeld_taal_diagram.diagram.cm → ...iagrams/voorbeeld_taal_diagram.diagram.cm
diff --git a/extensions/crossmodel-lang/package.json b/extensions/crossmodel-lang/package.json
@@ -7,15 +7,15 @@
   "categories": [
     "Programming Languages"
   ],
-  "homepage": "https://github.com/CrossBreezeNL/CrossModel",
+  "homepage": "https://github.com/CrossBreezeNL/crossmodel",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/CrossBreezeNL/CrossModel"
+    "url": "git+https://github.com/CrossBreezeNL/crossmodel"
   },
-  "license": "UNLICENSED",
+  "license": "AGPL-3.0-or-later",
   "author": {
-    "name": "CrossBreeze Team",
-    "email": "team@x-breeze.com"
+    "name": "CrossBreeze",
+    "email": "devops@crossbreeze.nl"
   },
   "main": "./out/extension.js",
   "bin": {

diff --git a/extensions/crossmodel-lang/src/language-server/lexer/cross-model-indentation-tokens.ts b/extensions/crossmodel-lang/src/language-server/lexer/cross-model-indentation-tokens.ts
@@ -73,7 +73,7 @@ function matchIndentBase(text: string, offset: number, matchedTokens: IToken[],
 
     // indentation can only be matched at the start of a line.
     if (isFirstLine || isStartOfLine) {
-        let currIndentLevel: number | undefined = undefined;
+        let currIndentLevel: number | undefined;
         const prevIndentLevel = indentStack.getLast();
 
         const wsRegExp = /[ ]+/y;

diff --git a/extensions/crossmodel-lang/src/language-server/lexer/cross-model-token-generator.ts b/extensions/crossmodel-lang/src/language-server/lexer/cross-model-token-generator.ts
@@ -27,10 +27,10 @@ export class CrossModelTokenBuilder extends DefaultTokenBuilder {
         const tokens: TokenType[] = super.buildTokens(grammar, options) as TokenType[];
 
         const updatedTokens: TokenType[] = [];
-        let tokenWithSpaces: TokenType | undefined = undefined;
-        let tokenIndent: TokenType | undefined = undefined;
-        let tokenDedent: TokenType | undefined = undefined;
-        let tokenNewLine: TokenType | undefined = undefined;
+        let tokenWithSpaces: TokenType | undefined;
+        let tokenIndent: TokenType | undefined;
+        let tokenDedent: TokenType | undefined;
+        let tokenNewLine: TokenType | undefined;
 
         for (const token of tokens) {
             if (token.name === NAMES.SPACES) {

diff --git a/extensions/crossmodel-lang/src/model-server/model-server.ts b/extensions/crossmodel-lang/src/model-server/model-server.ts
@@ -57,7 +57,7 @@ export class ModelServer implements Disposable {
      */
     async requestModelDiagramNode(uri: string, id: string): Promise<DiagramNodeEntity | undefined> {
         const root = (await this.modelService.request(uri)) as CrossModelRootAst;
-        let diagramNode: DiagramNode | undefined = undefined;
+        let diagramNode: DiagramNode | undefined;
 
         if (!root || !root.diagram) {
             throw new Error('Something went wrong loading the diagram');

diff --git a/packages/core/package.json b/packages/core/package.json
@@ -6,15 +6,15 @@
   "keywords": [
     "theia-extension"
   ],
-  "homepage": "https://github.com/CrossBreezeNL/CrossModel",
+  "homepage": "https://github.com/CrossBreezeNL/crossmodel",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/CrossBreezeNL/CrossModel"
+    "url": "git+https://github.com/CrossBreezeNL/crossmodel"
   },
-  "license": "UNLICENSED",
+  "license": "AGPL-3.0-or-later",
   "author": {
-    "name": "CrossBreeze Team",
-    "email": "team@x-breeze.com"
+    "name": "CrossBreeze",
+    "email": "devops@crossbreeze.nl"
   },
   "files": [
     "lib",

diff --git a/packages/form-client/package.json b/packages/form-client/package.json
@@ -6,20 +6,19 @@
   "keywords": [
     "theia-extension"
   ],
-  "homepage": "https://github.com/CrossBreezeNL/CrossModel",
+  "homepage": "https://github.com/CrossBreezeNL/crossmodel",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/CrossBreezeNL/CrossModel"
+    "url": "git+https://github.com/CrossBreezeNL/crossmodel"
   },
-  "license": "UNLICENSED",
+  "license": "AGPL-3.0-or-later",
   "author": {
-    "name": "CrossBreeze Team",
-    "email": "team@x-breeze.com"
+    "name": "CrossBreeze",
+    "email": "devops@crossbreeze.nl"
   },
   "files": [
     "lib",
-    "src",
-    "style"
+    "src"
   ],
   "scripts": {
     "build": "tsc -b",
@@ -30,17 +29,12 @@
     "watch": "tsc -w"
   },
   "dependencies": {
-    "@crossbreeze/core": "0.0.0",
     "@crossbreeze/model-service": "^1.0.0",
     "@crossbreeze/protocol": "0.0.0",
-    "@emotion/react": "^11.10.6",
-    "@emotion/styled": "^11.10.6",
-    "@mui/material": "^5.13.5",
-    "@mui/x-data-grid": "^6.2.1",
+    "@crossbreeze/react-model-ui": "0.0.0",
     "@theia/core": "1.37.2",
-    "lodash": "^4.17.21",
-    "react-tabs": "^6.0.1",
-    "vscode-jsonrpc": "^8.0.2"
+    "fast-deep-equal": "3.1.3",
+    "p-debounce": "2.1.0"
   },
   "theiaExtensions": [
     {

diff --git a/packages/form-client/src/browser/form-editor-widget.tsx b/packages/form-client/src/browser/form-editor-widget.tsx
@@ -17,10 +17,9 @@ import {
 import URI from '@theia/core/lib/common/uri';
 import { inject, injectable, postConstruct } from '@theia/core/shared/inversify';
 import * as React from '@theia/core/shared/react';
-import '../../style/form-view.css';
-import { App } from './react-components/App';
-import debounce = require('p-debounce');
-import deepEqual = require('fast-deep-equal');
+import * as debounce from 'p-debounce';
+import * as deepEqual from 'fast-deep-equal';
+import { EntityForm, withModelProvider } from '@crossbreeze/react-model-ui';
 
 export const FormEditorWidgetOptions = Symbol('FormEditorWidgetOptions');
 export interface FormEditorWidgetOptions extends NavigatableWidgetOptions {
@@ -42,8 +41,8 @@ export class FormEditorWidget extends ReactWidget implements NavigatableWidget,
     @inject(CommandService) protected commandService: CommandService;
     @inject(ModelServiceClient) protected formClient: ModelServiceClient;
 
-    protected syncedModel: CrossModelRoot | undefined = undefined;
-    protected error: string | undefined = undefined;
+    protected syncedModel: CrossModelRoot | undefined;
+    protected error: string | undefined;
 
     @postConstruct()
     init(): void {
@@ -116,14 +115,11 @@ export class FormEditorWidget extends ReactWidget implements NavigatableWidget,
     }
 
     render(): React.ReactNode {
-        const props = {
+        const FormComponent = withModelProvider(EntityForm, {
             model: this.syncedModel,
-            updateModel: this.updateModel,
-            getResourceUri: this.getResourceUri,
-            formClient: this.formClient
-        };
-
-        return <App {...props} />;
+            onModelUpdate: this.updateModel
+        });
+        return <FormComponent />;
     }
 
     protected override onActivateRequest(msg: Message): void {

diff --git a/packages/form-client/src/browser/react-components/App.tsx b/packages/form-client/src/browser/react-components/App.tsx
diff --git a/packages/form-client/src/browser/react-components/ModelContext.tsx b/packages/form-client/src/browser/react-components/ModelContext.tsx