search

fintraffic-design / fds-coreui-components

Fintraffic Design System's Core UI Components. Work heavily in progress.
European Union Public License 1.2
0 stars 0 forks source link

Feature/React wrappers (DRAFT) #62

Closed Haprog closed 7 months ago

Haprog commented 9 months ago

This is currently a first PoC at adding React wrappers for the FDS components.

Feel free to test these from this feature/react-wrappers branch. For testing these now in a React project you can checkout this branch locally and then:

npm install
npm run build
npm pack # this generates a file like "fds-coreui-components-0.1.0.tgz"
# switch to your React project directory and install the tarball
npm install ../path/to/fds-coreui-components-0.1.0.tgz

See TESTING.md for some more info.

There are many ways how React wrappers could be implemented and released. I'm assuming we want to keep the wrappers in this same repository for simpler maintenance and releasing. The current approach in this PR is using @lit/react utility package for wrapper creation.

This currently assumes that the wrappers would be published directly as part of the @fintraffic/fds-coreui-components package but just imported from different paths when you want the React wrapper/component instead of web component class.

Assuming that we keep the same name for React wrapper/component as the original web component (e.g. FdsButton) it would probably be better for DX if the React wrappers would be published as a separate npm package (e.g. @fintraffic/fds-coreui-components-react). The code can still live in this same repository but the other package needs its own package.json and we may need some tweaks to package config and build scripts so we can easily publish the other package separately with only the needed files and not include the wrappers in the non-React package. Then IDE auto imports would probably work better for React (when you install this React specific package instead of the original) and the import paths can be cleaner as well. This should be discussed.

Closes #56.

Haprog commented 9 months ago

I think we need to tweak the events config for the wrappers a bit. Seems like at least onClick can be used even without the explicitly declared onclick event. The wrapper config can probably be simplified a bit for some components (in case of native events?). We might only need to declare those for custom events. I'll do some further testing on this and then update the PR.

Haprog commented 8 months ago

This PR should be updated so that we can publish the React wrappers as a separate npm package. So the file locations might need to be tweaked a bit, and need to make sure the wrappers are excluded from @fintraffic/fds-coreui-components package release. New separate package.json needs to be added for the new wrapper package.

Haprog commented 7 months ago

This will be implemented in https://github.com/fintraffic-design/fds-coreui-components-react/pull/1 (new repository for React wrappers) instead of here. Closing this as deprecated.