Merge branch 'docs/analytical-table' of github.com:SAP/ui5-webcomponents-react into docs/analytical-table

Author: Lukas742

README.md

@@ -112,8 +112,11 @@ For more info, check the [seed documentation](https://github.com/SAP/ui5-webcomp
 
 ```sh
 npx create-react-app my-app --template @ui5/webcomponents-react-seed
+npm run mock
+
 # or if you want to use yarn
 yarn create react-app my-app --template @ui5/webcomponents-react-seed
+yarn mock
 ```
 
 ### Add `@ui5/webcomponents-react` to an existing app

docs/1-Welcome.stories.mdx

@@ -52,8 +52,11 @@ For more info, check the [seed documentation](https://github.com/SAP/ui5-webcomp
 
 ```sh
 npx create-react-app my-app --template @ui5/webcomponents-react-seed
+npm run mock
+
 # or if you want to use yarn
 yarn create react-app my-app --template @ui5/webcomponents-react-seed
+yarn mock
 ```
 
 ### Add `@ui5/webcomponents-react` to an existing app

packages/cra-template-seed/README.md

@@ -9,10 +9,11 @@ This seed decrease’s the bootstrap time spent on new projects, POCs or MVPs wh
 # Usage
 ```shell script
 npx create-react-app my-app --template @ui5/webcomponents-react-seed
+npm run mock
 
 # or if you prefer to use yarn
-
 yarn create react-app my-app --template @ui5/webcomponents-react-seed
+yarn mock
 ```
 
 # Configuration Included

packages/main/src/components/Form/Form.stories.mdx

@@ -34,6 +34,9 @@ import { DocsHeader } from '@shared/stories/DocsHeader';
   <Story name="Default">
     {(args) => (
       <Form {...args} title={args.title}>
+        <FormItem label={'Sole Form Item'}>
+          <Input type={InputType.Text} />
+        </FormItem>
         <FormGroup title={'Personal Data'}>
           <FormItem label={'Name'}>
             <Input type={InputType.Text} />
@@ -52,9 +55,6 @@ import { DocsHeader } from '@shared/stories/DocsHeader';
             <CheckBox checked />
           </FormItem>
         </FormGroup>
-        <FormItem label={'Sole Form Item'}>
-          <Input type={InputType.Text} />
-        </FormItem>
         <FormGroup title={'Company Data'}>
           <FormItem label={'Company Name'}>
             <Input type={InputType.Text} />
@@ -91,9 +91,9 @@ import { DocsHeader } from '@shared/stories/DocsHeader';
   </Story>
 </Canvas>
 
+<ArgsTable story="." />
+
 ### Usage Notes
 
 Please note that the `FormGroup` and `FormItem` components are only used for calculating the final layout of the `Form`,
-thus they don't accept any other props then the specified ones, especially no `className`, `style` or `ref`.
-
-<ArgsTable story="." />
+thus they don't accept any other props than the specified ones, especially no `className`, `style` or `ref`.

packages/main/src/components/Form/index.tsx

@@ -82,7 +82,9 @@ export interface FormPropTypes extends CommonProps {
 }
 
 const useStyles = createComponentStyles(styles, { name: 'Form' });
-
+/**
+ * The `Form` component arranges labels and fields into groups and rows. There are different ways to visualize forms for different screen sizes.
+ */
 const Form: FC<FormPropTypes> = forwardRef((props: FormPropTypes, ref: Ref<HTMLDivElement>) => {
   const {
     title,

packages/main/src/components/FormGroup/index.tsx

@@ -23,7 +23,10 @@ const useStyles = createComponentStyles(
   },
   { name: 'FormGroup' }
 );
-
+/**
+ * The `FormGroup` encapsulates `FormItems` into groups.
+ * __Note:__ `FormGroup` is only used for calculating the final layout of the `Form`, thus it doesn't accept any other props than `title` and `children`, especially no `className`, `style` or `ref`.
+ */
 const FormGroup: FC<FormGroupProps> = (props: FormGroupProps) => {
   const { title, children } = props;
 

packages/main/src/components/FormItem/index.tsx

@@ -70,7 +70,9 @@ const renderLabel = (
 
   return null;
 };
-
+/**
+ * The `FormItem` is only used for calculating the final layout of the `Form`, thus it doesn't accept any other props than `label` and `children`, especially no `className`, `style` or `ref`.
+ */
 const FormItem: FC<FormItemProps> = (props: FormItemProps) => {
   const { label, children, columnIndex, rowIndex, labelSpan } = props as InternalProps;
 

packages/main/src/components/Loader/Loader.stories.mdx

@@ -0,0 +1,128 @@
+import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs/blocks';
+import { Loader } from '@ui5/webcomponents-react/lib/Loader';
+import { LoaderType } from '@ui5/webcomponents-react/lib/LoaderType';
+import { Card } from '@ui5/webcomponents-react/lib/Card';
+import { Text } from '@ui5/webcomponents-react/lib/Text';
+import { Icon } from '@ui5/webcomponents-react/lib/Icon';
+import { FlexBox } from '@ui5/webcomponents-react/lib/FlexBox';
+import { FlexBoxDirection } from '@ui5/webcomponents-react/lib/FlexBoxDirection';
+import { createSelectArgTypes } from '@shared/stories/createSelectArgTypes';
+import { DocsHeader } from '@shared/stories/DocsHeader';
+import { DocsCommonProps } from '@shared/stories/DocsCommonProps';
+import { spacing } from '@ui5/webcomponents-react-base';
+import '@ui5/webcomponents-icons/dist/icons/activate.js';
+import { useEffect, useRef, useState } from 'react';
+
+<Meta
+  title="Components / Loader"
+  component={Loader}
+  argTypes={{
+    ...createSelectArgTypes({ type: LoaderType }),
+    ...DocsCommonProps
+  }}
+  args={{
+    type: LoaderType.Indeterminate,
+    progress: '60%',
+    style: {},
+    className: '',
+    tooltip: '',
+    slot: '',
+    ref: null
+  }}
+/>
+
+<DocsHeader />
+
+<Canvas>
+  <Story name="Default">
+    {(args) => {
+      return <Loader {...args} />;
+    }}
+  </Story>
+</Canvas>
+
+<ArgsTable story="." />
+
+<br />
+
+# Stories
+
+<br />
+
+## Card with Loader
+
+<Canvas>
+  <Story name="with Card">
+    {(args) => {
+      const initialText =
+        'This is a text that will be updated 5 seconds after the header is clicked. The text will be visible until the new text has been fetched. To let the user know that the text is updating, the Loader will be displayed.';
+      const [text, setText] = useState(initialText);
+      const [loading, setLoading] = useState(false);
+      const counter = useRef(0);
+      const onHeaderClick = () => {
+        setLoading(true);
+      };
+      useEffect(() => {
+        if (loading) {
+          setTimeout(() => {
+            if (counter.current < 10) {
+              setText((prev) => (prev === initialText ? 'Updated (⌐■_■)' : initialText));
+            } else {
+              setText('You really must be bored ಠ_ಠ');
+            }
+            counter.current++;
+            setLoading(false);
+          }, 5000);
+        }
+      }, [loading]);
+      return (
+        <Card
+          avatar={<Icon name="activate" />}
+          heading="Click the header to update the text below."
+          headerInteractive
+          style={{ width: '400px' }}
+          onHeaderClick={onHeaderClick}
+        >
+          <FlexBox direction={FlexBoxDirection.Column}>
+            {loading && <Loader {...args} />}
+            <Text style={spacing.sapUiContentPadding}>{text}</Text>
+          </FlexBox>
+        </Card>
+      );
+    }}
+  </Story>
+</Canvas>
+
+```jsx
+const LoaderComponent = () => {
+  const initialText =
+    'This is a text that will be updated 5 seconds after the header is clicked. The text will be visible until the new text has been fetched. To let the user know that the text is updating, the Loader will be displayed.';
+  const [text, setText] = useState(initialText);
+  const [loading, setLoading] = useState(false);
+  const onHeaderClick = () => {
+    setLoading(true);
+  };
+  useEffect(() => {
+    if (loading) {
+      setTimeout(() => {
+        setText((prev) => (prev === initialText ? 'Updated (⌐■_■)' : initialText));
+        setLoading(false);
+      }, 5000);
+    }
+  }, [loading]);
+  return (
+    <Card
+      avatar={<Icon name="activate" />}
+      heading="Click the header to update the text below."
+      headerInteractive
+      style={{ width: '400px' }}
+      onHeaderClick={onHeaderClick}
+    >
+      <FlexBox direction={FlexBoxDirection.Column}>
+        {loading && <Loader />}
+        <Text style={spacing.sapUiContentPadding}>{text}</Text>
+      </FlexBox>
+    </Card>
+  );
+};
+```

packages/main/src/components/Loader/demo.stories.tsx

@@ -9,16 +9,27 @@ import { CommonProps } from '../../interfaces/CommonProps';
 import { styles } from './Loader.jss';
 
 export interface LoaderProps extends CommonProps {
-  /*
+  /**
    * Delay in ms until the Loader will be displayed
    */
   delay?: number;
+  /**
+   * Defines the type of the `Loader`.
+   * __Note:__ If the process completion rate can be detected the `Determinate` type should be used.
+   */
   type?: LoaderType;
+  /**
+   * Defines the progress of the Loader Bar. <br />
+   * __Note:__ This prop has no effect if used with type `Indeterminate`.
+   */
   progress?: CSSProperties['width'];
 }
 
 const useStyles = createComponentStyles(styles, { name: 'Loader' });
-
+/**
+ * The `Loader` signals that an operation is currently being executed. It uses as little space as possible to allow the user to interact with the UI.<br />
+ * It can be used to signal a data update on an already existing dataset, or where an expansion will happen.
+ */
 const Loader: FC<LoaderProps> = forwardRef((props: LoaderProps, ref: RefObject<HTMLDivElement>) => {
   const { className, type, progress, tooltip, slot, style, delay } = props;
   const classes = useStyles(props);