feat: expose CLI package for creating web component wrappers

docs/knowledge-base/BringYourOwnWebComponents.mdx

@@ -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 />