Migrate Dashboard components to React components library

[pkosiec]

Description

Changes proposed in this pull request:

• Migrate Dashboard components to React components library
• Fix build setup for components

Unfortunately I ran out of time to:

• Prepare Stylebook examples for all components
• Refactor components to use Styled Components
• I also wasn't able to fix the race condition in development setup build.

I will create a follow-up issue for that.

Relations

Needs #23 to be merged first

Testing

Follow the Readme to start app locally.
Also, see the sample repo with external usage of the components: https://github.com/pkosiec/dashboard-components-example

Issues

Among other things:

• crypto package included in components build

The problem was:

 ERROR in ../react-components/dist/esm/index.js 7:0-23
@capactio/dashboard-ui: Module not found: Error: Can't resolve 'crypto' in '/Users/pkosiec/repositories/dashboard/react-components/dist/esm'
@capactio/dashboard-ui: BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
@capactio/dashboard-ui: This is no longer the case. Verify if you need this module and configure a polyfill for it.
@capactio/dashboard-ui: If you want to include a polyfill, you need to:
@capactio/dashboard-ui:         - add a fallback 'resolve.fallback: { "crypto": require.resolve("crypto-browserify") }'
@capactio/dashboard-ui:         - install 'crypto-browserify'
@capactio/dashboard-ui: If you don't want to include a polyfill, you can use an empty module like this:
@capactio/dashboard-ui:         resolve.fallback: { "crypto": false }

Initially I checked facebook/create-react-app#11756 but it didn't seem right to have this error now, if previously we haven't had such issue.
Turned out that the react-jsonschema-form includes nanoid as dependency, which needed another customization in Rollup config to use the browser environment: https://github.com/ai/nanoid#rollup

• bundling React inside components library: solution is to use Lerna hoist and a proper Rollup configuration
• circular dependencies

@capactio/react-components: (!) Circular dependencies
@capactio/react-components: ../node_modules/@rjsf/core/dist/es/utils.js -> ../node_modules/@rjsf/core/dist/es/components/fields/index.js -> ../node_modules/@rjsf/core/dist/es/components/fields/ArrayField.js -> ../node_modules/@rjsf/core/dist/es/utils.js
@capactio/react-components: ../node_modules/@rjsf/core/dist/es/utils.js -> ../node_modules/@rjsf/core/dist/es/components/fields/index.js -> ../node_modules/@rjsf/core/dist/es/components/fields/BooleanField.js -> ../node_modules/@rjsf/core/dist/es/utils.js
@capactio/react-components: ../node_modules/@rjsf/core/dist/es/utils.js -> ../node_modules/@rjsf/core/dist/es/components/fields/index.js -> ../node_modules/@rjsf/core/dist/es/components/fields/MultiSchemaField.js -> ../node_modules/@rjsf/core/dist/es/utils.js
@capactio/react-components: ...and 26 more

This is just a warning. It is a known issue: rjsf-team/react-jsonschema-form#2341 - cannot do anything about it

Related issue(s)

Resolves #21

[mkuziemko]

I verified it locally and it works ok 👍 On my end, I noticed also the ,,race" and I needed to restart the app to work but it is not a big deal. :)

[mkuziemko]

Suggested change

	This command watches for changes to Dashboard of any related packages to build
	them and live reload the page.
	This command watches for changes to Dashboard of any related packages to build them and live reload the page.

[pkosiec]

On my end, I noticed also the ,,race" and I needed to restart the app to work but it is not a big deal. :)

Fortunately, you don't need to restart build - you can just e.g. add newline to any of the react component file, and it will trigger Dashboard rebuild with latest react components. So the race sometimes forces you to make double changes to see the initial change on Dashboard.