-
Notifications
You must be signed in to change notification settings - Fork 103
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: expose CLI package for creating web component wrappers (#6212)
This PR adds the documentation for the `@ui5/webcomponents-react-cli` package and describes how to create web components wrappers on the fly. Closes #5046 --------- Co-authored-by: Lukas Harbarth <lukas.harbarth@sap.com>
- Loading branch information
1 parent
7981491
commit 28b14d9
Showing
1 changed file
with
71 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,71 @@ | ||
import { Footer, TableOfContent } from '@sb/components'; | ||
import { Meta } from '@storybook/blocks'; | ||
import { Link, MessageStrip } from '@ui5/webcomponents-react'; | ||
|
||
<Meta title="Bring Your Own Web Components" /> | ||
|
||
# Bring Your Own Web Components | ||
|
||
<TableOfContent /> | ||
|
||
If you have created a custom UI5 Web Components package, you will be able to create React component wrappers in your project by leveraging our [@ui5/webcomponents-react-cli](http://npmjs.com/package/@ui5/webcomponents-react-cli). | ||
|
||
<MessageStrip | ||
hideCloseButton | ||
design="Critical" | ||
children={ | ||
<> | ||
The UI5 Web Components for React CLI package is tailor-made for custom UI5 Web Components packages following{' '} | ||
<Link href="https://sap.github.io/ui5-webcomponents/docs/development/">this documentation</Link>. <br /> | ||
You can not use it for creating React wrapper for arbitrary custom element libraries. | ||
</> | ||
} | ||
/> | ||
|
||
<br /> | ||
<br /> | ||
|
||
## Create React Wrappers | ||
|
||
> This guide uses the name `my-custom-webcomponents-package` for the custom UI5 Web Components package. <br /> | ||
> Please replace all occurrences with your real package name when following this guide. | ||
First of all, install the `@ui5/webcomponents-react-cli` package in your project: | ||
|
||
```shell | ||
npm install @ui5/webcomponents-react-cli --save-dev | ||
|
||
# if your package is based on UI5 Web Components V1, please install the V1 version of the CLI | ||
npm install @ui5/webcomponents-react-cli@V1 --save-dev | ||
``` | ||
|
||
Then, install your custom UI5 Web Components package: | ||
|
||
```shell | ||
npm install my-custom-webcomponents-package --save | ||
``` | ||
|
||
Now, you can add a npm script to create your wrapper components.<br /> | ||
_We recommend ensuring that the target directory (specified by the `--out` parameter) is empty._ | ||
|
||
<MessageStrip | ||
hideCloseButton | ||
children={ | ||
<> | ||
The UI5 Web Component for React CLI is not aware of any code style conventions you may be using in your project, so we recommend that you run tools such as <Link href="https://prettier.io/">prettier</Link> and{' '} | ||
<Link href="https://eslint.org/">eslint</Link> after creating the wrapper components if you are using them in your project. | ||
</> | ||
} | ||
/> | ||
|
||
```json | ||
{ | ||
"//": "rest of your applications package.json", | ||
"scripts": { | ||
"//": "your other scripts", | ||
"create-webcomponent-wrappers": "ui5-wcr create-wrappers --packageName my-custom-webcomponents-package --out ./any/directory/in/your/project" | ||
} | ||
} | ||
``` | ||
|
||
<Footer /> |