Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(web-components): add React wrapper #4678

Merged
merged 5 commits into from
Dec 16, 2020

Conversation

asudoh
Copy link
Contributor

@asudoh asudoh commented Dec 9, 2020

Related Ticket(s)

Refs #4251.

Description

Adds React wrapper generator (createReactCustomElementType), based on one in carbon-web-components to @carbon/ibmdotcom-web-components codebase.

It helps our adaptors using React to use our components, with the following support that React itself lacks for non-intrinsic elements:

  • Element attributes mapping to non-string element property values (e.g. Boolean attributes)
  • React props mapping to element properties instead of element attributes
  • Event handlers

Also adds a Babel plugin that automatically creates React wrappers of our components from our components' @property() annotations, as well as the corresponding build process that generates the React wrappers to es/components-react directory. So in the most typical scenario, our users can use components in es/components-react directory in the same
manner as regular React components.

Also adds React stories so we can demonstrate the React integration.

Changelog

New

  • React wrapper generator (createReactCustomElementType).
  • Build logics to generate React wrapper, one for running in browser and one for running in Node.

Changed

  • Moves enums to defs.ts to make above build steps simpler.

Adds React wrapper generator (`createReactCustomElementType`), based on
one in `carbon-web-components` to `@carbon/ibmdotcom-web-components`
codebase.

It helps our adoptors using React to use our components, with the
following support that React itself lacks for non-intrinsic elements:

* Element attributes mapping to non-string element property values
  (e.g. Boolean attributes)
* React props mapping to element properties instead of element
  attributes
* Event handlers

Also adds a Babel plugin that automatically creates React wrappers of
our components from our components' `@property()` annotations, as well
as the corresponding build process that generates the React wrappers to
`es/components-react` directory. So in the most typical scenario, our
users can use components in `es/components-react` directory in the same
manner as regular React components.

Also adds React stories so we can demonstrate the React integration.

Refs carbon-design-system#4251.
@asudoh asudoh added package: react Work necessary for the Carbon for IBM.com react components package package: web components Work necessary for the IBM.com Library web components package labels Dec 9, 2020
@ibmdotcom-bot
Copy link
Contributor

ibmdotcom-bot commented Dec 9, 2020

@ibmdotcom-bot
Copy link
Contributor

ibmdotcom-bot commented Dec 9, 2020

@asudoh asudoh force-pushed the react-ssr-partial branch 4 times, most recently from 19b16a2 to cd79f66 Compare December 9, 2020 10:03
@asudoh asudoh force-pushed the react-ssr-partial branch from cd79f66 to 368e7f7 Compare December 9, 2020 11:30
Copy link
Member

@kennylam kennylam left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good thanks @asudoh!

@jeffchew
Copy link
Member

Thank you @asudoh ! Can you resolve the conflicts?

@jeffchew jeffchew added the Ready to merge Label for the pull requests that are ready to merge label Dec 15, 2020
@kodiakhq
Copy link
Contributor

kodiakhq bot commented Dec 15, 2020

This PR currently has a merge conflict. Please resolve this and then re-add the Ready to merge label.

@kodiakhq kodiakhq bot removed the Ready to merge Label for the pull requests that are ready to merge label Dec 15, 2020
@asudoh
Copy link
Contributor Author

asudoh commented Dec 16, 2020

Thanks @kennylam for reviewing! @jeffchew Merged.

@asudoh asudoh merged commit 2838e4c into carbon-design-system:master Dec 16, 2020
@asudoh asudoh deleted the react-ssr-partial branch December 16, 2020 02:07
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
package: react Work necessary for the Carbon for IBM.com react components package package: web components Work necessary for the IBM.com Library web components package
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants