Skip to content

Commit 0c210a3

Browse files
MarcusNotheisMarcusNotheis
authored
docs: update storybook to rc.27 (#641)
1 parent 119ed73 commit 0c210a3

File tree

22 files changed

+327
-686
lines changed

22 files changed

+327
-686
lines changed

‎docs/1-Welcome.stories.mdx‎

Lines changed: 16 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
1-
2-
import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
1+
import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks';
32
import { Button } from '@ui5/webcomponents-react/lib/Button';
43

54
<Meta title="Getting Started" />
65

76
# UI5 Web Components for React
7+
88
[![](https://github.com/SAP/ui5-webcomponents-react/workflows/build/badge.svg)](https://github.com/SAP/ui5-webcomponents-react/actions?query=workflow:%22build%22)
99
[![](https://coveralls.io/repos/github/SAP/ui5-webcomponents-react/badge.svg)](https://coveralls.io/github/SAP/ui5-web)
1010
[![](https://badgen.net/badge/slack/Join%20OpenUI5%20Slack%20workspace/blue?icon=slack)](https://ui5-slack-invite.cfapps.eu10.hana.ondemand.com/)
@@ -16,6 +16,7 @@ import { Button } from '@ui5/webcomponents-react/lib/Button';
1616
[Open Github Project](https://github.com/SAP/ui5-webcomponents-react)
1717

1818
## Description
19+
1920
UI5 Web Components for React is a Fiori3 compliant React library built on top of the UI5 Web Components.
2021
With the help of UI5 Web Components for React, you can use UI5 Web Components as if they were native React components.
2122
In addition to that, UI5 Web Components for React is providing complex components and layouts on top of the UI5 Web Components.
@@ -31,6 +32,7 @@ In addition to that, UI5 Web Components for React is providing complex component
3132

3233
You can create a new react app by using [create-react-app](https://facebook.github.io/create-react-app/) with our template.
3334
This template is installing all required dependencies for you and is setting up the `App.js` file for you:
35+
3436
```sh
3537
npx create-react-app my-app --template @ui5/webcomponents-react
3638
# or if you want to use yarn
@@ -40,14 +42,16 @@ yarn create react-app my-app --template @ui5/webcomponents-react
4042
### Add `@ui5/webcomponents-react` to an existing app
4143

4244
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:
45+
4346
```sh
4447
npm install @ui5/webcomponents @ui5/webcomponents-react --save
4548
# if you want to use the ShellBar or the ProductSwitcher component, you also need to install this package as well
4649
npm install @ui5/webcomponents-fiori
4750
```
4851

4952
In order to use `@ui5/webcomponents-react` you have to wrap your application's root component into the `ThemeProvider`.<br/>
50-
You will find this component most likely in `src/App.js`:
53+
You will find this component most likely in `src/App.js`:
54+
5155
```jsx
5256
import { ThemeProvider } from '@ui5/webcomponents-react/lib/ThemeProvider';
5357
...
@@ -79,6 +83,7 @@ Then, you can use the Button in your app:
7983

8084
UI5 Web Components and UI5 Web Components for React are both coming with the `sap_fiori_3` a.k.a. `Quartz` Theme built in.
8185
In case you want to change your applications' theme, you have to import a couple of modules:
86+
8287
```js
8388
import { setTheme } from '@ui5/webcomponents-base/dist/config/Theme';
8489
import '@ui5/webcomponents/dist/Assets';
@@ -87,22 +92,25 @@ import '@ui5/webcomponents-fiori/dist/Assets'; // only if you are using the Shel
8792

8893
You can now change the Theme by calling `setTheme` with a string parameter of the new theme.<br />
8994
Available Themes:
95+
9096
- `sap_fiori_3` (default)
9197
- `sap_fiori_dark`
9298
- `sap_belize`
9399
- `sap_belize_hcb`
94100
- `sap_belize_hcw`
95101

96102
### Configure Compact/Cozy setting
97-
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.
103+
104+
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.
98105

99106
```html
100-
<body class="ui5-content-density-compact">
101-
...
102-
</body>
107+
<body class="ui5-content-density-compact">
108+
...
109+
</body>
103110
```
104111

105112
### Support
106-
Feel free to open issues or ask us directly in the [`#webcomponents-react`](https://openui5.slack.com/archives/CSQEJ2J04) channel in the
113+
114+
Feel free to open issues or ask us directly in the [`#webcomponents-react`](https://openui5.slack.com/archives/CSQEJ2J04) channel in the
107115
[OpenUI5 Community Slack](https://ui5-slack-invite.cfapps.eu10.hana.ondemand.com/).<br />
108116
Please note that you have to join this slack workspace via [this link](https://ui5-slack-invite.cfapps.eu10.hana.ondemand.com/) if you are not part of it already.

‎docs/2-MigrationGuide.stories.mdx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
1+
import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks';
22

33
<Meta title="Migration Guide" />
44

@@ -323,6 +323,7 @@ Popovers like the `Dialog`, `Popover` and `ResponsivePopover` now only can be op
323323
and then call the corresponding `open` method:
324324

325325
- Dialog - `.open()`:
326+
326327
```JSX
327328
const DialogComponent = () => {
328329
const dialogRef = useRef();
@@ -338,6 +339,7 @@ and then call the corresponding `open` method:
338339
);
339340
};
340341
```
342+
341343
- Popover - `.openBy(event.target)`:
342344
```JSX
343345
const PopoverComponent = () => {

‎docs/3-Styling.stories.mdx‎

Lines changed: 18 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,45 +1,51 @@
1-
2-
import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
1+
import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks';
32
import { MyCustomElement } from './styling/MyCustomElement';
43
import { ThemeProvider } from '@ui5/webcomponents-react/lib/ThemeProvider';
54

65
<Meta title="Style Web Components" />
76

87
# How can I style my Web Components?
8+
99
[Open Github Project](https://github.com/SAP/ui5-webcomponents-react)
1010

1111
## Change styles for existing components
12+
1213
You can easily change the appearance of the Web Components by using [CSS Variables](https://www.w3schools.com/Css/css3_variables.asp).
1314
Per default, we are injecting the Fiori 3 theme parameters as CSS Variables into the `document head`.
1415
If you want to change e.g. the color of all texts, you can do that by creating another `style` element with the following content:
16+
1517
```html
1618
<style>
17-
--sapTextColor: limegreen;
19+
--sapTextColor: limegreen;
1820
</style>
1921
```
22+
2023
As a consequence, all HTML Elements in the subtree where this style was applied are now displaying their texts in `limegreen` instead of `#32363a` which would be the default value for Fiori 3.
2124
You can change CSS Variables on any level - in the head, or on every single element by using either CSS classes or element style.
2225
23-
A full list of all supported CSS Variables can be found [here](https://github.com/SAP/ui5-webcomponents-react/blob/master/packages/base/src/styling/sap_fiori_3.ts)
26+
A full list of all supported CSS Variables can be found [here](https://github.com/SAP/ui5-webcomponents-react/blob/master/packages/base/src/styling/sap_fiori_3.ts)
2427
or in the [SAPUI5 Theming Parameters Toolbox](https://sapui5.hana.ondemand.com/test-resources/sap/m/demokit/theming/webapp/index.html).
2528
2629
## Reuse global style classes
30+
2731
The `ThemeProvider` component is offering global css classes that can be reused in your applications code to help you to achieve a Fiori look-and-feel.
2832
All globally available style classes are tracked in the `GlobalStyleClasses` enum which can be imported from `import { GlobalStyleClasses } from "@ui5/webcomponents-react/lib/GlobalStyleClasses";`.
2933
30-
|CSS Class|Description|
31-
|---------|-----------|
32-
|`sapScrollBar`|If added to an container that supports scrolling, the scrollbar will be styled according to the Fiori guidelines. |
34+
| CSS Class | Description |
35+
| -------------- | ----------------------------------------------------------------------------------------------------------------- |
36+
| `sapScrollBar` | If added to an container that supports scrolling, the scrollbar will be styled according to the Fiori guidelines. |
3337
3438
## Style your own components
39+
3540
It's quite likely that you have to create some custom components when you are building an app.
36-
In order to reuse our central styling approach, you can import the `ThemingParameters` that contain the various CSS variables used in our theming.
41+
In order to reuse our central styling approach, you can import the `ThemingParameters` that contain the various CSS variables used in our theming.
3742
If you want to style your components with the `react-jss` syntax, you can use our custom `jss` styling hook.
3843
3944
`react-jss` comes already as a dependency of `@ui5/webcomponents-react` to your project - but we recommend adding it to your `package.json` as well.
4045
**Please make sure you are installing `"react-jss": "^10.0.0"`**. Previous versions of this library won't work correctly together with our library.
4146
4247
You can then create a custom component by following this recipe:
48+
4349
```jsx
4450
import React from 'react';
4551
import { createUseStyles } from 'react-jss';
@@ -68,8 +74,10 @@ const MyCustomElement = () => {
6874
</div>
6975
);
7076
};
71-
```
77+
```
78+
7279
This would then be the result:
80+
7381
<ThemeProvider>
74-
<MyCustomElement />
82+
<MyCustomElement />
7583
</ThemeProvider>

‎docs/4-TestSetup.stories.mdx‎

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,41 @@
1-
2-
import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
1+
import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks';
32

43
<Meta title="Test Setup" />
54

65
# Test Setup for UI5 Web Components for React
76

87
This guide is applicable if you are using a standard `create-react-app` setup.
98

10-
119
## Install the jsdom 16 jest environment
10+
1211
As the UI5 Web Components are based on the `customElements` Web Standard, you need to install the latest version of `jsdom` to your project and tell the `jest` test runner to use it.
1312
Therefore you need to install the `jest-environment-jsdom-sixteen` npm package.
13+
1414
```sh
1515
npm install jest-environment-jsdom-sixteen --save-dev
16-
# OR
16+
# OR
1717
yarn add jest-environment-jsdom-sixteen -D
1818
```
1919

2020
## Tell jest to transpile the UI5 Web Components
21+
2122
`create-react-app` offers you to modify specific parts of the `jest` config by adding `jest` object to your `package.json`.
2223
Here you need to tell `jest` to transpile the UI5 Web Components as well as the `lit-html` library:<br />
2324
`package.json:`
25+
2426
```json
2527
{
2628
"jest": {
27-
"transformIgnorePatterns": [
28-
"node_modules/(?!(@ui5|lit-html)).*\\.js$"
29-
]
29+
"transformIgnorePatterns": ["node_modules/(?!(@ui5|lit-html)).*\\.js$"]
3030
}
3131
}
3232
```
3333

3434
## Modify the test script
35+
3536
In order to tell the `jest` runner of `create-react-app` to use our newly installed jest environment, you need to add
3637
one addition parameter to the `test` script: `--env jest-environment-jsdom-sixteen`. Your scripts should now look like:
38+
3739
```json
3840
{
3941
"scripts": {

‎package.json‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -20,14 +20,14 @@
2020
"deploy:storybook": "lerna run build:i18n && storybook-to-ghpages --ci"
2121
},
2222
"dependencies": {
23-
"@storybook/addon-actions": "6.0.0-rc.20",
24-
"@storybook/addon-controls": "6.0.0-rc.20",
25-
"@storybook/addon-docs": "6.0.0-rc.20",
26-
"@storybook/addon-toolbars": "6.0.0-rc.20",
27-
"@storybook/addons": "6.0.0-rc.20",
28-
"@storybook/cli": "6.0.0-rc.20",
29-
"@storybook/react": "6.0.0-rc.20",
30-
"@storybook/theming": "6.0.0-rc.20",
23+
"@storybook/addon-actions": "6.0.0-rc.27",
24+
"@storybook/addon-controls": "6.0.0-rc.27",
25+
"@storybook/addon-docs": "6.0.0-rc.27",
26+
"@storybook/addon-toolbars": "6.0.0-rc.27",
27+
"@storybook/addons": "6.0.0-rc.27",
28+
"@storybook/cli": "6.0.0-rc.27",
29+
"@storybook/react": "6.0.0-rc.27",
30+
"@storybook/theming": "6.0.0-rc.27",
3131
"@ui5/webcomponents": "1.0.0-rc.8",
3232
"@ui5/webcomponents-fiori": "1.0.0-rc.8",
3333
"@ui5/webcomponents-icons": "1.0.0-rc.8",

‎packages/charts/src/components/MicroBarChart/MicroBarChart.stories.mdx‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Meta, Title, Description, Story, Preview, Props } from '@storybook/addon-docs/blocks';
1+
import { Meta, Title, Description, Story, Canvas, ArgsTable } from '@storybook/addon-docs/blocks';
22
import { MicroBarChart } from '@ui5/webcomponents-react-charts/lib/MicroBarChart';
33

44
<Meta
@@ -34,7 +34,7 @@ import { MicroBarChart } from '@ui5/webcomponents-react-charts/lib/MicroBarChart
3434
<Title />
3535
<Description />
3636

37-
<Preview>
37+
<Canvas>
3838
<Story name="Default">
3939
{(args) => (
4040
<MicroBarChart
@@ -50,11 +50,11 @@ import { MicroBarChart } from '@ui5/webcomponents-react-charts/lib/MicroBarChart
5050
/>
5151
)}
5252
</Story>
53-
</Preview>
53+
</Canvas>
5454

55-
<Props story="Default" of={MicroBarChart} />
55+
<ArgsTable story="Default" of={MicroBarChart} />
5656

57-
<Preview>
57+
<Canvas>
5858
<Story name="With custom props">
5959
{(args) => (
6060
<MicroBarChart
@@ -74,9 +74,9 @@ import { MicroBarChart } from '@ui5/webcomponents-react-charts/lib/MicroBarChart
7474
/>
7575
)}
7676
</Story>
77-
</Preview>
77+
</Canvas>
7878

79-
<Preview>
79+
<Canvas>
8080
<Story name="Loading Placeholder">
8181
<MicroBarChart
8282
dataset={[]}
@@ -89,4 +89,4 @@ import { MicroBarChart } from '@ui5/webcomponents-react-charts/lib/MicroBarChart
8989
style={{ width: '20%' }}
9090
/>
9191
</Story>
92-
</Preview>
92+
</Canvas>

‎packages/main/scripts/create-web-components-wrapper.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -425,7 +425,7 @@ const createWebComponentDemo = (componentSpec, componentProps) => {
425425

426426
return prettier.format(
427427
dedent`
428-
import { Title, Subtitle, Description, Meta, Story, Preview, Props } from '@storybook/addon-docs/blocks';
428+
import { Title, Subtitle, Description, Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs/blocks';
429429
import { ${componentName} } from '@ui5/webcomponents-react/lib/${componentName}';
430430
${enumImports.join('\n')}
431431
${additionalComponentImports.join('\n')}
@@ -447,17 +447,17 @@ const createWebComponentDemo = (componentSpec, componentProps) => {
447447
<Subtitle />
448448
<Description />
449449
450-
<Preview>
450+
<Canvas>
451451
<Story name="Default">
452452
{(args) => {
453453
return (
454454
<${componentName} {...args} />
455455
);
456456
}}
457457
</Story>
458-
</Preview>
458+
</Canvas>
459459
460-
<Props story="Default" components={{ ${[componentName].concat(additionalComponentDocs).join(', ')} }} />
460+
<ArgsTable story="Default" components={{ ${[componentName].concat(additionalComponentDocs).join(', ')} }} />
461461
462462
`,
463463
{ ...prettierConfigRaw, parser: 'mdx' }

‎packages/main/src/components/ActionSheet/ActionSheet.stories.mdx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Meta, Title, Description, Story, Preview, Props } from '@storybook/addon-docs/blocks';
1+
import { Meta, Title, Description, Story, Canvas, ArgsTable } from '@storybook/addon-docs/blocks';
22
import { createSelectArgTypes } from '@shared/stories/createSelectArgTypes';
33
import { ActionSheet } from '@ui5/webcomponents-react/lib/ActionSheet';
44
import { Button } from '@ui5/webcomponents-react/lib/Button';
@@ -40,7 +40,7 @@ import { useCallback, useRef } from 'react';
4040
<Subtitle />
4141
<Description />
4242

43-
<Preview>
43+
<Canvas>
4444
<Story name="Default">
4545
{(args) => {
4646
const actionSheetRef = useRef();
@@ -62,6 +62,6 @@ import { useCallback, useRef } from 'react';
6262
);
6363
}}
6464
</Story>
65-
</Preview>
65+
</Canvas>
6666

67-
<Props story="Default" components={{ ActionSheet }} />
67+
<ArgsTable story="Default" of="." />

‎packages/main/src/components/AnalyticalTable/AnalyticalTable.stories.mdx‎

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Title, Subtitle, Primary, Description, Meta, Story, Preview, Props } from '@storybook/addon-docs/blocks';
1+
import { Title, Subtitle, Primary, Description, Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs/blocks';
22
import { AnalyticalTable } from '@ui5/webcomponents-react/lib/AnalyticalTable';
33
import { createSelectArgTypes } from '../../../../../shared/stories/createSelectArgTypes';
44
import { TableScaleWidthMode } from '@ui5/webcomponents-react/lib/TableScaleWidthMode';
@@ -124,7 +124,7 @@ import { FlexBoxJustifyContent } from '@ui5/webcomponents-react/lib/FlexBoxJusti
124124

125125
<Description />
126126

127-
<Preview>
127+
<Canvas>
128128
<Story name="Default">
129129
{(args) => (
130130
<div style={{ display: 'flex', flexDirection: 'column' }}>
@@ -160,9 +160,9 @@ import { FlexBoxJustifyContent } from '@ui5/webcomponents-react/lib/FlexBoxJusti
160160
</div>
161161
)}
162162
</Story>
163-
</Preview>
163+
</Canvas>
164164

165-
<Props story="Default" components={{ AnalyticalTable }} />
165+
<ArgsTable story="Default" of="." />
166166

167167
## Column Properties
168168

@@ -272,7 +272,7 @@ This even works if you resize the browser window!
272272

273273
## Tree Table
274274

275-
<Preview>
275+
<Canvas>
276276
<Story name="Tree Table">
277277
{(args) => (
278278
<AnalyticalTable
@@ -296,6 +296,4 @@ This even works if you resize the browser window!
296296
/>
297297
)}
298298
</Story>
299-
</Preview>
300-
301-
<Props story="Tree Table" components={{ AnalyticalTable }} />
299+
</Canvas>

0 commit comments

Comments
 (0)