feat: initial openchakra integration

[vmutafov]

No description provided.

[github-advanced-security]

CodeQL found more than 10 potential problems in the proposed changes. Check the Files changed tab for more details.

[ThuF]

+1 Seems good to me.

[ThuF]

Overview

Steps to test the openchakra integration:

• React UI project have to be generated from the Welcome view.

  • Note: Set the file name to app.

• Right-click on the generated template New -> UI Designer.

• Drag & Drop some UI components.

• Save the changes by pressing Ctrl+S/Cmd+S

• Press the c key on the keyboard in order to open the code preview.

• Copy the React code by pressing the Copy button.

• Open the app.tsx file and replace the content with the React code from the UI Designer.

• Note: By default the generated React App code is exported as a default for the module:

  import React from 'https://esm.sh/react@18.2.0'
  ...
  export default App

  • The index.tsx file needs to be updated as follows:

       import React from "https://esm.sh/react@18.2.0";
       import ReactDOM from "https://esm.sh/react-dom@18.2.0";
  -    import { App } from "./app"
  +    import App from "./app"
  
       ReactDOM.render(<App />, document.getElementById("root"));

• After saving the changes and publishing the project, the application can be accessed by selecting the index.html.

Feedback & Findings

Some of the openchakra components are not easy to use, for example:

• The Checkbox component can't be selected - the parent component should be selected and from the Configurations -> Children you can modify the Checkbox component.
• The Checkbox component has isReadOnly property set by default inside the Custom props tab.
• The Checked property of the Checkbox is not working as expected, instead a Custom property has to be set (defaultChecked=true).
• The Radio Group is not working as expected by default - many radio buttons can be selected at the same time.
• It seems that you can't provide Options for the Select component from the UI Designer.
• It seems that you can't modify the text of the Tabs from the UI Designer.
• Some more complex structures can't be created (e.g. list of links, list item can be created, but only text) - this can be workarounded by manually updating the generated code.

Sample

The following demo project can be downloaded and imported in Eclipse Dirigible: demo.zip