Skip to content

feat(cra-template): add test setup and use latest version + docs #433

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.

Sign up for GitHub

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

Merged
merged 7 commits into from
Apr 16, 2020
Merged

feat(cra-template): add test setup and use latest version + docs #433

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
4ec2238
Update README.md
MarcusNotheis Apr 16, 2020
c64e336
Update Welcome.stories.mdx
MarcusNotheis Apr 16, 2020
ce348f4
feat(cra-template): update to latest version
MarcusNotheis Apr 16, 2020
c90b38b
Merge branch 'master' into docs/entry
MarcusNotheis Apr 16, 2020
c8ccf00
Update README.md
MarcusNotheis Apr 16, 2020
134cfdc
Update docs/welcome/Welcome.stories.mdx
MarcusNotheis Apr 16, 2020
cb06f67
Merge branch 'master' into docs/entry
MarcusNotheis Apr 16, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
124 changes: 57 additions & 67 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,41 +7,49 @@
<a href='https://coveralls.io/github/SAP/ui5-webcomponents-react'>
<img src='https://coveralls.io/repos/github/SAP/ui5-webcomponents-react/badge.svg' alt='Coverage Status' />
</a>
<a href="https://ui5-slack-invite.cfapps.eu10.hana.ondemand.com/" target="_blank">
<img alt="Slack Badge" src="https://badgen.net/badge/slack/Join OpenUI5 Slack workspace/blue?icon=slack">
</a>
<a href="https://openui5.slack.com/archives/CSQEJ2J04" target="_blank">
<img alt="Slack Badge" src="https://badgen.net/badge/slack/webcomponents-react/orange?icon=slack">
</a>
<a href="https://github.com/prettier/prettier" target="_blank">
<img alt="code style: prettier" src="https://img.shields.io/badge/code_style-prettier-ff69b4.svg">
<img alt="code style: prettier" src="https://badgen.net/badge/code%20style/prettier?color=pink">
</a>
<a href="https://lernajs.io/" target="_blank">
<img alt="lerna" src="https://img.shields.io/badge/maintained%20with-lerna-cc00ff.svg">
<img alt="lerna" src="https://badgen.net/badge/maintained%20with/lerna?color=purple">
</a>

</p>

<!-- *********************************************************************** -->
<a name="description"></a>
## 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<br />
[![](https://img.shields.io/npm/v/@ui5/webcomponents-react/latest.svg)](https://www.npmjs.com/package/@ui5/webcomponents-react) [![](https://img.shields.io/npm/v/@ui5/webcomponents-react/next.svg)](https://www.npmjs.com/package/@ui5/webcomponents-react)
[![npm bundle size (scoped)](https://img.shields.io/bundlephobia/minzip/@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<br />
[![](https://img.shields.io/npm/v/@ui5/webcomponents-react-charts/latest.svg)](https://www.npmjs.com/package/@ui5/webcomponents-react-charts) [![](https://img.shields.io/npm/v/@ui5/webcomponents-react-charts/next.svg)](https://www.npmjs.com/package/@ui5/webcomponents-react-charts)
[![npm bundle size (scoped)](https://img.shields.io/bundlephobia/minzip/@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<br />
[![](https://img.shields.io/npm/v/@ui5/webcomponents-react-base/latest.svg)](https://www.npmjs.com/package/@ui5/webcomponents-react-base) [![](https://img.shields.io/npm/v/@ui5/webcomponents-react-base/next.svg)](https://www.npmjs.com/package/@ui5/webcomponents-react-base)
[![npm bundle size (scoped)](https://img.shields.io/bundlephobia/minzip/@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<br/>
[![](https://badgen.net/npm/v/@ui5/webcomponents-react?icon=npm)](https://www.npmjs.com/package/@ui5/webcomponents-react)
[![](https://badgen.net/npm/v/@ui5/webcomponents-react/next?icon=npm)](https://www.npmjs.com/package/@ui5/webcomponents-react)
[![npm bundle size (scoped)](https://badgen.net/bundlephobia/minzip/@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<br />
[![](https://badgen.net/npm/v/@ui5/webcomponents-react-charts?icon=npm)](https://www.npmjs.com/package/@ui5/webcomponents-react-charts)
[![](https://badgen.net/npm/v/@ui5/webcomponents-react-charts/next?icon=npm)](https://www.npmjs.com/package/@ui5/webcomponents-react-charts)
[![npm bundle size (scoped)](https://badgen.net/bundlephobia/minzip/@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<br />
[![](https://badgen.net/npm/v/@ui5/webcomponents-react-base?icon=npm)](https://www.npmjs.com/package/@ui5/webcomponents-react-base)
[![](https://badgen.net/npm/v/@ui5/webcomponents-react-base/next?icon=npm)](https://www.npmjs.com/package/@ui5/webcomponents-react-base)
[![npm bundle size (scoped)](https://badgen.net/bundlephobia/minzip/@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` <br/>
[![](https://badgen.net/npm/v/@ui5/cra-template-webcomponents-react?icon=npm)](https://www.npmjs.com/package/@ui5/cra-template-webcomponents-react)

<!-- *********************************************************************** -->
<a name="requirements"></a>
Expand All @@ -63,25 +71,43 @@ npm install @ui5/webcomponents-react --save
<a name="configuration"></a>
## 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/).<br/>
In order to use `ui5-webcomponents-react` you have to wrap your application's root component into the `ThemeProvider`.<br/>
### 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`.<br/>
You will find this component most likely in `src/App.js`:
```jsx
import { ThemeProvider } from '@ui5/webcomponents-react/lib/ThemeProvider';
...
render() {
return (
<div>
<ThemeProvider withToastContainer>
<ThemeProvider>
<MyApp />
</ThemeProvider>
</div>
);
}
```

Then, you are ready to use `ui5-webcomponents-react` and you can import the desired component(s) in your app:<br />
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:<br />
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
Expand All @@ -93,18 +119,12 @@ Then, you can use the Button in your app:
<Button onClick={() => alert('Hello World!')}>Hello world!</Button>
```

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
<script data-ui5-config type="application/json">
{
"compactSize": true
}
</script>
```
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.<br />
Expand All @@ -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).

<!-- *********************************************************************** -->
<a name="issues"></a>
## Known Issues

Please look at our [GitHub Issues](https://github.com/SAP/ui5-webcomponents-react/issues) .



<!-- *********************************************************************** -->
<a name="support"></a>
## Support
Expand Down
56 changes: 35 additions & 21 deletions docs/welcome/Welcome.stories.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,12 +5,13 @@ import { Button } from '@ui5/webcomponents-react/lib/Button';
<Meta title="1 Welcome / Getting Started" />

# UI5 Web Components for React
[![](https://img.shields.io/travis/SAP/ui5-webcomponents-react/master.svg)](https://travis-ci.org/SAP/ui5-webcomponents-react)
[![Coverage Status](https://coveralls.io/repos/github/SAP/ui5-webcomponents-react/badge.svg)](https://coveralls.io/github/SAP/ui5-webcomponents-react)
[![](https://img.shields.io/npm/v/@ui5/webcomponents-react/latest.svg)](https://www.npmjs.com/package/@ui5/webcomponents-react)
[![](https://img.shields.io/npm/v/@ui5/webcomponents-react/next.svg)](https://www.npmjs.com/package/@ui5/webcomponents-react)
[![](https://github.com/SAP/ui5-webcomponents-react/workflows/build/badge.svg)](https://github.com/SAP/ui5-webcomponents-react/actions?query=workflow:%22build%22)
[![](https://coveralls.io/repos/github/SAP/ui5-webcomponents-react/badge.svg)](https://coveralls.io/github/SAP/ui5-web)
[![](https://badgen.net/badge/slack/Join%20OpenUI5%20Slack%20workspace/blue?icon=slack)](https://ui5-slack-invite.cfapps.eu10.hana.ondemand.com/)
[![](https://badgen.net/badge/slack/webcomponents-react/orange?icon=slack)](https://openui5.slack.com/archives/CSQEJ2J04)
[![GitHub stars](https://img.shields.io/github/stars/SAP/ui5-webcomponents-react?style=social)](https://github.com/SAP/ui5-webcomponents-react/stargazers)
[![](https://badgen.net/badge/code%20style/prettier?color=pink)](https://github.com/prettier/prettier)
[![](https://badgen.net/badge/maintained%20with/lerna?color=purple)](https://lernajs.io/)
[![](https://badgen.net/github/stars/SAP/ui5-webcomponents-react?icon=github&color=black)](https://github.com/SAP/ui5-webcomponents-react/stargazers)

[Open Github Project](https://github.com/SAP/ui5-webcomponents-react)

Expand All @@ -26,38 +27,53 @@ 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/).<br/>
In order to use `ui5-webcomponents-react` you have to wrap your application's root component into the `ThemeProvider`.<br/>
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`.<br/>
You will find this component most likely in `src/App.js`:
```jsx
import { ThemeProvider } from '@ui5/webcomponents-react/lib/ThemeProvider';
...
render() {
return (
<div>
<ThemeProvider withToastContainer>
<ThemeProvider>
<MyApp />
</ThemeProvider>
</div>
);
}
```

Then, you are ready to use `ui5-webcomponents-react` and you can import the desired component(s) in your app:<br />
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:<br />
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:

```jsx
<Button onClick={() => alert('Hello World!')}>Hello world!</Button>
```
<Button onClick={() => alert('Hello World!')}>Hello World</Button>

You could import all components also from `@ui5/webcomponents-react` directly, but this will have a negative impact on your bundle size.

### Theming

Expand All @@ -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
<script data-ui5-config type="application/json">
{
"compactSize": true
}
</script>
<body class="ui5-content-density-compact">
...
</body>
```

### Support
Expand Down
24 changes: 19 additions & 5 deletions packages/cra-template/template.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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$"
]
}
}
}