diff --git a/README.md b/README.md
index 67710e2ae44..1658b607965 100644
--- a/README.md
+++ b/README.md
@@ -7,41 +7,49 @@
+
+
+
-
+
-
+
-
-
-
-## Description
-
-`ui5-webcomponents-react` is providing a Fiori-compliant React implementation by leveraging the [UI5 Web Components](https://github.com/SAP/ui5-webcomponents). This project was formerly known as `fiori-for-react`.
-
-### Explore our components
-You can play around with our components by visiting our [Storybook](https://sap.github.io/ui5-webcomponents-react/).
+`ui5-webcomponents-react` is providing a Fiori-compliant React implementation by leveraging the [UI5 Web Components](https://github.com/SAP/ui5-webcomponents).
+This project was formerly known as `fiori-for-react`.
-### Package Overview
+## Resources
-#### [@ui5/webcomponents-react](https://github.com/SAP/ui5-webcomponents-react/tree/master/packages/main) - Fiori 3 Components
-[](https://www.npmjs.com/package/@ui5/webcomponents-react) [](https://www.npmjs.com/package/@ui5/webcomponents-react)
-[](https://bundlephobia.com/result?p=@ui5/webcomponents-react)
+You can find our documentation under the following links:
+- [Stable Release Documentation](https://sap.github.io/ui5-webcomponents-react/)
+- [Next Release Documentation](https://ui5-webcomponents-react.netlify.app/)
-#### [@ui5/webcomponents-react-charts](https://github.com/SAP/ui5-webcomponents-react/tree/master/packages/charts) - Fiori Charts
-[](https://www.npmjs.com/package/@ui5/webcomponents-react-charts) [](https://www.npmjs.com/package/@ui5/webcomponents-react-charts)
-[](https://bundlephobia.com/result?p=@ui5/webcomponents-react-charts)
-#### [@ui5/webcomponents-react-base](https://github.com/SAP/ui5-webcomponents-react/tree/master/packages/base) - Utils
-[](https://www.npmjs.com/package/@ui5/webcomponents-react-base) [](https://www.npmjs.com/package/@ui5/webcomponents-react-base)
-[](https://bundlephobia.com/result?p=@ui5/webcomponents-react-base)
+## Package Overview
+- [@ui5/webcomponents-react](https://github.com/SAP/ui5-webcomponents-react/tree/master/packages/main) - Fiori 3 Components
+ [](https://www.npmjs.com/package/@ui5/webcomponents-react)
+ [](https://www.npmjs.com/package/@ui5/webcomponents-react)
+ [](https://bundlephobia.com/result?p=@ui5/webcomponents-react)
+
+- [@ui5/webcomponents-react-charts](https://github.com/SAP/ui5-webcomponents-react/tree/master/packages/charts) - Fiori Charts
+ [](https://www.npmjs.com/package/@ui5/webcomponents-react-charts)
+ [](https://www.npmjs.com/package/@ui5/webcomponents-react-charts)
+ [](https://bundlephobia.com/result?p=@ui5/webcomponents-react-charts)
+
+- [@ui5/webcomponents-react-base](https://github.com/SAP/ui5-webcomponents-react/tree/master/packages/base) - Utils
+ [](https://www.npmjs.com/package/@ui5/webcomponents-react-base)
+ [](https://www.npmjs.com/package/@ui5/webcomponents-react-base)
+ [](https://bundlephobia.com/result?p=@ui5/webcomponents-react-base)
+
+- [@ui5/cra-template-webcomponents-react](https://github.com/SAP/ui5-webcomponents-react/tree/master/packages/cra-template) - Template for `create-react-app`
+ [](https://www.npmjs.com/package/@ui5/cra-template-webcomponents-react)
@@ -63,8 +71,26 @@ npm install @ui5/webcomponents-react --save
## Configuration
-**Prerequisite: You have a React app.** In case you don't, we recommend to create one using [create-react-app](https://facebook.github.io/create-react-app/).
-In order to use `ui5-webcomponents-react` you have to wrap your application's root component into the `ThemeProvider`.
+### Creating a new React app
+
+You can create a new react app by using [create-react-app](https://facebook.github.io/create-react-app/) with our template.
+This template is installing all required dependencies for you and is setting up the `App.js` file for you:
+```sh
+npx create-react-app my-app --template @ui5/webcomponents-react
+# or if you want to use yarn
+yarn create react-app my-app --template @ui5/webcomponents-react
+```
+
+### Add `@ui5/webcomponents-react` to an existing app
+
+First of all, you need to add the `@ui5/webcomponents-react` dependency to your project. Please also keep in mind installing the required peer dependencies:
+```sh
+npm install @ui5/webcomponents @ui5/webcomponents-react --save
+# if you want to use the ShellBar or the ProductSwitcher component, you also need to install this package as well
+npm install @ui5/webcomponents-fiori
+```
+
+In order to use `@ui5/webcomponents-react` you have to wrap your application's root component into the `ThemeProvider`.
You will find this component most likely in `src/App.js`:
```jsx
import { ThemeProvider } from '@ui5/webcomponents-react/lib/ThemeProvider';
@@ -72,7 +98,7 @@ import { ThemeProvider } from '@ui5/webcomponents-react/lib/ThemeProvider';
render() {
return (
-
+
@@ -80,8 +106,8 @@ render() {
}
```
-Then, you are ready to use `ui5-webcomponents-react` and you can import the desired component(s) in your app:
-For example, to use ```Button``` you need to import it:
+Then you are ready to use `@ui5/webcomponents-react` and you can import the desired component(s) in your app:
+For example, to use the `Button` component you need to import it:
```jsx
import { Button } from '@ui5/webcomponents-react/lib/Button'; // loads ui5-button wrapped in a ui5-webcomponents-react component
@@ -93,18 +119,12 @@ Then, you can use the Button in your app:
```
-You could import all components also from `@ui5/webcomponents-react` directly, but this will have a negative impact on your bundle size.
-
-### Configure Compact/Cozy setting
-UI5 Web Components supports ```Compact``` and ```Cozy``` mode. It is set to ```Cozy``` by default. To enable ```Compact``` globally, provide the option ```compactSize: true``` in the configuration ```script``` tag:
+You can also import all components from `@ui5/webcomponents-react` directly.
-```html
-
-```
+For Browser Support and the configuration of the UI5 Web Components, please take a look at the
+ [Browser Support](https://github.com/SAP/ui5-webcomponents#browser-support) and the
+ [Configure](https://github.com/SAP/ui5-webcomponents#browser-support) sections of the
+ [UI5 Web Components Readme](https://github.com/SAP/ui5-webcomponents#ui5-web-components).
### Browser Support
`@ui5/webcomponents-react` is supporting all modern major browsers. There is no support for Internet Explorer 11 built in.
@@ -120,42 +140,12 @@ You can install `react-app-polyfill` and `@webcomponents/webcomponentsjs` with t
npm install react-app-polyfill @webcomponents/webcomponentsjs --save
```
-For Browser Support and the configuration of the UI5 Web Components, please take a look at the
- [Browser Support](https://github.com/SAP/ui5-webcomponents#browser-support) and the
- [Configure](https://github.com/SAP/ui5-webcomponents#browser-support) sections of the
- [UI5 Web Components Readme](https://github.com/SAP/ui5-webcomponents#ui5-web-components).
-
-### Improving Bundle Size
-If you are running a default `create-react-app`, you will have will huge bundle size after creating a production build.
-This is caused by the fact that the webpack bundler is including all UI5 Web Component translation files and CLDR data files in the application bundle.
-In order to decrease the bundle size of the application a custom Webpack configuration should be provided.
-1. Eject the react build with ```npm run eject```
-2. Open ```config/webpack.config.js``` file and add the following lines before the last loader:
-```js
-{
- test: [/cldr\/.*\.json$/, /i18n\/.*\.json$/],
- loader: 'file-loader',
- options: {
- name: 'static/media/[name].[hash:8].[ext]',
- },
- type: 'javascript/auto'
-},
-// "file" loader makes sure those assets get served by WebpackDevServer.
-// When you `import` an asset, you get its (virtual) filename.
-// In production, they would get copied to the `build` folder.
-// This loader doesn't use a "test" so it will catch all modules
-// that fall through the other loaders.
-```
-Please also refer to the [UI5 Web Components React Sample](https://github.com/SAP/ui5-webcomponents-sample-react#configure-react-build).
-
## Known Issues
Please look at our [GitHub Issues](https://github.com/SAP/ui5-webcomponents-react/issues) .
-
-
## Support
diff --git a/docs/welcome/Welcome.stories.mdx b/docs/welcome/Welcome.stories.mdx
index 22ebc913f9d..1d46ffc7253 100644
--- a/docs/welcome/Welcome.stories.mdx
+++ b/docs/welcome/Welcome.stories.mdx
@@ -5,12 +5,13 @@ import { Button } from '@ui5/webcomponents-react/lib/Button';
# UI5 Web Components for React
-[](https://travis-ci.org/SAP/ui5-webcomponents-react)
-[](https://coveralls.io/github/SAP/ui5-webcomponents-react)
-[](https://www.npmjs.com/package/@ui5/webcomponents-react)
-[](https://www.npmjs.com/package/@ui5/webcomponents-react)
+[](https://github.com/SAP/ui5-webcomponents-react/actions?query=workflow:%22build%22)
+[](https://coveralls.io/github/SAP/ui5-web)
+[](https://ui5-slack-invite.cfapps.eu10.hana.ondemand.com/)
[](https://openui5.slack.com/archives/CSQEJ2J04)
-[](https://github.com/SAP/ui5-webcomponents-react/stargazers)
+[](https://github.com/prettier/prettier)
+[](https://lernajs.io/)
+[](https://github.com/SAP/ui5-webcomponents-react/stargazers)
[Open Github Project](https://github.com/SAP/ui5-webcomponents-react)
@@ -26,16 +27,34 @@ In addition to that, UI5 Web Components for React is providing complex component
## Getting Started
-**Prerequisite: You have a React app.** In case you don't, we recommend to create one using [create-react-app](https://facebook.github.io/create-react-app/).
-In order to use `ui5-webcomponents-react` you have to wrap your application's root component into the `ThemeProvider`.
-You will find this component most likely in `src/App.js`:
+### Creating a new React app
+
+You can create a new react app by using [create-react-app](https://facebook.github.io/create-react-app/) with our template.
+This template is installing all required dependencies for you and is setting up the `App.js` file for you:
+```sh
+npx create-react-app my-app --template @ui5/webcomponents-react
+# or if you want to use yarn
+yarn create react-app my-app --template @ui5/webcomponents-react
+```
+
+### Add `@ui5/webcomponents-react` to an existing app
+
+First of all, you need to add the `@ui5/webcomponents-react` dependency to your project. Please also keep in mind installing the required peer dependencies:
+```sh
+npm install @ui5/webcomponents @ui5/webcomponents-react --save
+# if you want to use the ShellBar or the ProductSwitcher component, you also need to install this package as well
+npm install @ui5/webcomponents-fiori
+```
+
+In order to use `@ui5/webcomponents-react` you have to wrap your application's root component into the `ThemeProvider`.
+You will find this component most likely in `src/App.js`:
```jsx
import { ThemeProvider } from '@ui5/webcomponents-react/lib/ThemeProvider';
...
render() {
return (
-
+
@@ -43,11 +62,11 @@ render() {
}
```
-Then, you are ready to use `ui5-webcomponents-react` and you can import the desired component(s) in your app:
-For example, to use ```Button``` you need to import it:
+Then you are ready to use `@ui5/webcomponents-react` and you can import the desired component(s) in your app:
+For example, to use the `Button` component you need to import it:
```jsx
-import { Button } from '@ui5/webcomponents-react/lib/Button';
+import { Button } from '@ui5/webcomponents-react/lib/Button'; // loads ui5-button wrapped in a ui5-webcomponents-react component
```
Then, you can use the Button in your app:
@@ -55,9 +74,6 @@ Then, you can use the Button in your app:
```jsx
```
-
-
-You could import all components also from `@ui5/webcomponents-react` directly, but this will have a negative impact on your bundle size.
### Theming
@@ -81,14 +97,12 @@ Available Themes:
- `sap_belize_hcw`
### Configure Compact/Cozy setting
-UI5 Web Components supports ```Compact``` and ```Cozy``` mode. It is set to ```Cozy``` by default. To enable ```Compact``` globally, provide the option ```compactSize: true``` in the configuration ```script``` tag:
+UI5 Web Components supports ```Compact``` and ```Cozy``` mode. It is set to ```Cozy``` by default. To enable ```Compact```, provide the css class ```ui5-content-density-compact``` to any of your HTML elements and it apply compact size to all of its children.
```html
-
+
+ ...
+
```
### Support
diff --git a/packages/cra-template/template.json b/packages/cra-template/template.json
index b493e3ef89e..8ec88e54aba 100644
--- a/packages/cra-template/template.json
+++ b/packages/cra-template/template.json
@@ -1,8 +1,22 @@
{
- "dependencies": {
- "@ui5/webcomponents-react": "^0.7.0",
- "@testing-library/react": "^9.3.2",
- "@testing-library/jest-dom": "^4.2.4",
- "@testing-library/user-event": "^7.1.2"
+ "package": {
+ "dependencies": {
+ "@ui5/webcomponents": "1.0.0-rc.6",
+ "@ui5/webcomponents-fiori": "1.0.0-rc.6",
+ "@ui5/webcomponents-icons": "1.0.0-rc.6",
+ "@ui5/webcomponents-react": "^0.9.0-rc.14",
+ "@testing-library/react": "^9.3.2",
+ "@testing-library/jest-dom": "^4.2.4",
+ "@testing-library/user-event": "^7.1.2",
+ "jest-environment-jsdom-sixteen": "^1.0.3"
+ },
+ "scripts": {
+ "test": "react-scripts test --env jest-environment-jsdom-sixteen"
+ },
+ "jest": {
+ "transformIgnorePatterns": [
+ "node_modules/(?!(@ui5|lit-html)).*\\.js$"
+ ]
+ }
}
}
+ 
+