layout improvement:replacement of tag fieldset with div/header section

[rsoika]

I also added a error section. But the property 'errors' is possible
missing. I am not sure how to add this. This is just a suggestion

Signed-off-by: Ralph Soika ralph.soika@imixs.com

[CLAassistant]

All committers have signed the CLA.

[sdirix]

Thanks for the contribution!

[rsoika]

Hi @sdirix have you seen that I improved my pull request and followed your suggestions?

[sdirix]

Yes! Thanks ;) Will take a look soon!

[coveralls]

Coverage remained the same at 84.356% when pulling 27c73ff on rsoika:master into 0f0470f on eclipsesource:master.

[sdirix]

This works, however when running the example application (npm run dev in packages/vanilla) one can see that the CSS was not yet accounted for, i.e. the label and add button are rendered without any styling at the beginning of the div.

Suggestion:

• Align the table renderer and array control renderer until the header element. At the moment they are very similar but not quite.

i.e. copy the following lines from the table renderer

      <div className={controlClass} hidden={!visible}>
        <header>
          <label className={labelClass}>{label}</label>
          <button
            className={buttonClass}
            onClick={addItem(path, createDefaultValue(schema))}
          >
            Add to {labelObject.text}
          </button>
        </header>
        <div className={divClassNames}>
          {!isValid ? errors : ''}
        </div>

and then just adjust them by using array.control instead of array.table in all places.

Then adjust styles.ts by adding array.control entries (you start by copying the array table entries)

Then adjust the example.css so that it correctly applies to the classes you defined in styles.ts.

The goal is to have a sensible rendering of the new array.control in the React Vanilla example application.

[rsoika]

Sorry, I was not yet able to run a test.

I can successful build all packages with

$ yarn

But when I try to run npm run dev in packages/vanilla I got errors with an output like this:

$ npm run dev

> @jsonforms/vanilla-renderers@3.0.0-rc.0 dev /home/rsoika/git/jsonforms/packages/vanilla
> webpack --config ./webpack/webpack.dev.js && webpack-dev-server --config webpack/webpack.dev.js --env=dev --inline

Hash: 190dbecb9060e1687d39
Version: webpack 4.46.0
Time: 14250ms
Built at: 12.08.2022 11:47:35

........
..............
Entrypoint main = bundle.js bundle.js.map
[0] multi webpack-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/index.ts ../examples/src/index.ts ./example/index.ts 76 bytes {main} [built]
[../example/src/index.tsx] 1.51 KiB {main} [built] [3 errors]
[../examples/src/example.ts] 10 bytes {main} [built] [1 error]
[../examples/src/examples/1169.ts] 1.69 KiB {main} [built] [1 error]
[../examples/src/examples/1220.ts] 3.09 KiB {main} [built] [1 error]
[../examples/src/examples/1253.ts] 3.93 KiB {main} [built]
[../examples/src/examples/1254.ts] 1.74 KiB {main} [built]
[../examples/src/examples/1645.ts] 2.3 KiB {main} [built] [1 error]
[../examples/src/examples/1779.ts] 2.12 KiB {main} [built]
[../examples/src/examples/1884.ts] 3.71 KiB {main} [built]
[../examples/src/index.ts] 4.88 KiB {main} [built]
[./example/index.ts] 1.38 KiB {main} [built]
[./node_modules/webpack-dev-server/client/index.js?http://localhost:8080] (webpack)-dev-server/client?http://localhost:8080 4.29 KiB {main} [built]
[./node_modules/webpack/hot/dev-server.js] (webpack)/hot/dev-server.js 1.59 KiB {main} [built]
[./src/index.ts] 2.22 KiB {main} [built]
    + 459 hidden modules

ERROR in ../examples/src/examples/nestedArrays.ts
Module not found: Error: Can't resolve '@jsonforms/core' in '/home/rsoika/git/jsonforms/packages/examples/src/examples'
 @ ../examples/src/examples/nestedArrays.ts 26:0-49 82:60-74
 @ ../examples/src/index.ts
 @ multi webpack-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/index.ts ../examples/src/index.ts ./example/index.ts

.........

Can you help me how to build and test correctly?

[sdirix]

You need to install the base dependencies, then run lerna and then build all packages. Only then can the example application be executed.

So starting from the root directory:

# reset and clean everything
git reset --hard
git clean -dfx

# build JSON Forms
npm ci
npm run init
npm run build

# Start React Vanilla example application
(cd packages/vanilla && npm run dev)

You should not use yarn, maybe it works but chances are that it doesn't.

[rsoika]

Thanks for this help. Now it works. Which is the issue you are using to test the array in the react test panel?

[sdirix]

To be frank, I don't think we need this and it rather "pollutes" the root Readme. The Readme already covers the first time setup, the build and how to start the example applications. We don't need to explain how git and Github works within the JSON Forms Readme ;)

The only thing missing in the root Readme is on which port the example applications can be found. Note that it's port 8080 and not 3000 as here.

[rsoika]

You can either 'pollute' the readme or you can explain to stupid people like me how to build the project. As a JakartaEE developer I do not have the NodeJS expert knowledge as you expect...
I will remove the changes from the README again and continue working on the CSS fixes....

[sdirix]

Hi @rsoika, I'm pretty sure that you're not stupid at all, just unfamiliar with the tools used here. The root readme is just the wrong place for this kind of information / writing style. It would rather fit into a contribution guide or in the wiki. If you agree I would copy this over into the developer wiki.

[rsoika]

@sdirix , yes the wiki is maybe the best place for this kind of tutorial. In the mean time I added the information into my own readme here

[sdirix]

Thanks for this help. Now it works. Which is the issue you are using to test the array in the react test panel?

You can for example use "Nested Array" (#nestedArray) or "Array with detail" (#array-with-detail).

[rsoika]

Now I think the layout should be fine. I added the class definitions to styles.ts and also into the example.css

I am also now more familiar with the css-class concept - somehow strange ;-)
It would be great if you can accept this. In the next step I would like to work on the delete button in a separate pull request.

[rsoika]

Hi, @sdirix, what do you think about the latest update. I hope this is now fine and can be merged?

[sdirix]

LGTM! Thanks for the contribution! ❤️