Update stories of components

update stories of components
SAP · May 28, 2020 · 63c3bf2 · 63c3bf2
1 parent a233766
commit 63c3bf2
Show file tree

Hide file tree

Showing 18 changed files with 402 additions and 283 deletions.
diff --git a/packages/main/src/components/ActionSheet/demo.stories.tsx b/packages/main/src/components/ActionSheet/demo.stories.tsx
@@ -1,15 +1,21 @@
-import { select } from '@storybook/addon-knobs';
 import { ActionSheet } from '@ui5/webcomponents-react/lib/ActionSheet';
 import { Button } from '@ui5/webcomponents-react/lib/Button';
 import { PlacementType } from '@ui5/webcomponents-react/lib/PlacementType';
 import React, { useCallback, useRef } from 'react';
+import { createSelectArgTypes } from '@shared/stories/createSelectArgTypes';
 
 export default {
   title: 'Components / ActionSheet',
-  component: ActionSheet
+  component: ActionSheet,
+  argTypes: {
+    ...createSelectArgTypes({ placementType: PlacementType })
+  },
+  args: {
+    placement: PlacementType.Bottom
+  }
 };
 
-export const defaultStory = () => {
+export const defaultStory = (props) => {
   const actionSheetRef = useRef();
   const onButtonClick = useCallback(
     (e) => {
@@ -20,7 +26,7 @@ export const defaultStory = () => {
   return (
     <>
       <Button onClick={onButtonClick}>Open ActionSheet</Button>
-      <ActionSheet ref={actionSheetRef} placementType={select('placementType', PlacementType, PlacementType.Bottom)}>
+      <ActionSheet ref={actionSheetRef} placementType={props.placement}>
         <Button icon="add">Accept</Button>
         <Button>Reject</Button>
         <Button>This is my super long text!</Button>

diff --git a/packages/main/src/components/AnalyticalCard/demo.stories.tsx b/packages/main/src/components/AnalyticalCard/demo.stories.tsx
@@ -1,17 +1,38 @@
-import { action } from '@storybook/addon-actions';
-import { boolean, select, text } from '@storybook/addon-knobs';
 import { LineChart } from '@ui5/webcomponents-react-charts/lib/LineChart';
 import { AnalyticalCard } from '@ui5/webcomponents-react/lib/AnalyticalCard';
 import { AnalyticalCardHeader } from '@ui5/webcomponents-react/lib/AnalyticalCardHeader';
 import { DeviationIndicator } from '@ui5/webcomponents-react/lib/DeviationIndicator';
 import { ValueState } from '@ui5/webcomponents-react/lib/ValueState';
 import React from 'react';
+import { createSelectArgTypes } from '@shared/stories/createSelectArgTypes';
 
 export default {
   title: 'Components / Analytical Card',
   component: AnalyticalCard,
   parameters: {
     subcomponents: { AnalyticalCardHeader }
+  },
+  argTypes: {
+    ...createSelectArgTypes({ arrowIndicator: DeviationIndicator }),
+    ...createSelectArgTypes({ indicatorState: ValueState }),
+    ...createSelectArgTypes({ valueState: ValueState }),
+    ...createSelectArgTypes({ counterState: ValueState })
+  },
+  args: {
+    title: 'Title',
+    subTitle: 'Subtitle',
+    arrowIndicator: DeviationIndicator.Down,
+    indicatorState: ValueState.Success,
+    value: 'Value',
+    valueState: ValueState.Success,
+    unit: 'Unit',
+    target: 'Target',
+    deviation: 'Deviation',
+    showIndicator: true,
+    description: 'Description',
+    counter: 'Counter',
+    counterState: ValueState.Success,
+    currency: 'EUR'
   }
 };
 
@@ -38,25 +59,25 @@ const simpleDataSet = [
   }
 ];
 
-export const defaultStory = () => (
+export const defaultStory = (props) => (
   <AnalyticalCard
     header={
       <AnalyticalCardHeader
-        title={text('title', 'Title')}
-        subTitle={text('subTitle', 'Subtitle')}
-        arrowIndicator={select('arrowIndicator', DeviationIndicator, DeviationIndicator.Down)}
-        indicatorState={select('indicatorState', ValueState, ValueState.Success)}
-        value={text('value', 'Value')}
-        valueState={select('valueState', ValueState, ValueState.Success)}
-        unit={text('unit', 'Unit')}
-        target={text('target', 'target')}
-        deviation={text('deviation', 'deviation')}
-        onHeaderPress={action('Header pressed')}
-        showIndicator={boolean('showIndicator', true)}
-        description={text('description', 'Description')}
-        counter={text('counter', 'Counter')}
-        counterState={select('counterState', ValueState, ValueState.Success)}
-        currency={text('currency', 'EUR')}
+        title={props.title}
+        subTitle={props.subTitle}
+        arrowIndicator={props.arrowIndicator}
+        indicatorState={props.indicatorState}
+        value={props.value}
+        valueState={props.valueState}
+        unit={props.unit}
+        target={props.target}
+        deviation={props.deviation}
+        onHeaderPress={props.onHeaderPress}
+        showIndicator={props.showIndicator}
+        description={props.description}
+        counter={props.counter}
+        counterState={props.counterState}
+        currency={props.currency}
       />
     }
   >

diff --git a/packages/main/src/components/AnalyticalTable/AnalyticalTable.stories.tsx b/packages/main/src/components/AnalyticalTable/AnalyticalTable.stories.tsx
@@ -1,5 +1,3 @@
-import { action } from '@storybook/addon-actions';
-import { array, boolean, number, object, select, text } from '@storybook/addon-knobs';
 import '@ui5/webcomponents-icons/dist/icons/delete';
 import '@ui5/webcomponents-icons/dist/icons/edit';
 import '@ui5/webcomponents-icons/dist/icons/settings';
@@ -16,6 +14,7 @@ import { FlexBoxJustifyContent } from '@ui5/webcomponents-react/lib/FlexBoxJusti
 import React from 'react';
 import generateData from './demo/generateData';
 import mdx from './AnalyticalTable.mdx';
+import { createSelectArgTypes } from '@shared/stories/createSelectArgTypes';
 
 const columns = [
   {
@@ -83,7 +82,7 @@ const columns = [
 const data = generateData(10_000);
 const dataTree = generateData(20, true);
 
-export const defaultTable = () => {
+export const defaultTable = (props) => {
   return (
     <div style={{ display: 'flex', flexDirection: 'column' }}>
       <AnalyticalTable
@@ -95,69 +94,57 @@ export const defaultTable = () => {
         }
         data={data}
         columns={columns}
-        loading={boolean('loading', false)}
-        busyIndicatorEnabled={boolean('busyIndicatorEnabled', true)}
-        alternateRowColor={boolean('alternateRowColor', false)}
-        sortable={boolean('sortable', true)}
-        filterable={boolean('filterable', true)}
-        visibleRows={number('visibleRows', 15)}
-        minRows={number('minRows', 5)}
-        groupable={boolean('groupable', true)}
-        selectionMode={select<TableSelectionMode>(
-          'selectionMode',
-          TableSelectionMode,
-          TableSelectionMode.SINGLE_SELECT
-        )}
-        scaleWidthMode={select<TableScaleWidthMode>('scaleWidthMode', TableScaleWidthMode, TableScaleWidthMode.Default)}
-        onRowSelected={action('onRowSelected')}
-        onSort={action('onSort')}
-        onGroup={action('onGroup')}
-        onRowExpandChange={action('onRowExpandChange')}
-        groupBy={array('groupBy', [])}
-        rowHeight={number('rowHeight', 44)}
-        selectedRowIds={object('selectedRowIds', { 3: true })}
-        onColumnsReordered={action('onColumnsReordered')}
-        withRowHighlight={boolean('withRowHighlight', true)}
-        highlightField={text('highlightField', 'status')}
-        infiniteScroll={boolean('infiniteScroll', true)}
-        infiniteScrollThreshold={number('infiniteScrollThreshold', 20)}
-        onLoadMore={action('onLoadMore')}
-        selectionBehavior={select<TableSelectionBehavior>(
-          'selectionBehavior',
-          TableSelectionBehavior,
-          TableSelectionBehavior.ROW
-        )}
+        loading={props.loading}
+        busyIndicatorEnabled={props.busyIndicatorEnabled}
+        alternateRowColor={props.alternateRowColor}
+        sortable={props.sortable}
+        filterable={props.filterable}
+        visibleRows={props.visibleRows}
+        minRows={props.minRows}
+        groupable={props.groupable}
+        selectionMode={props.selectionMode}
+        scaleWidthMode={props.scaleWidthMode}
+        onRowSelected={props.onRowSelected}
+        onSort={props.onSort}
+        onGroup={props.onGroup}
+        onRowExpandChange={props.onRowExpandChange}
+        groupBy={props.groupBy}
+        rowHeight={props.rowHeight}
+        selectedRowIds={props.selectedRowIds}
+        onColumnsReordered={props.onColumnsReordered}
+        withRowHighlight={props.withRowHighlight}
+        highlightField={props.highlightField}
+        infiniteScroll={props.infiniteScroll}
+        infiniteScrollThreshold={props.infiniteScrollThreshold}
+        onLoadMore={props.onLoadMore}
+        selectionBehavior={props.selectionBehavior}
       />
     </div>
   );
 };
 
 defaultTable.storyName = 'Default';
 
-export const treeTable = () => {
+export const treeTable = (props) => {
   return (
     <AnalyticalTable
       title="Table Title"
       data={dataTree}
       columns={columns}
-      loading={boolean('loading', false)}
-      busyIndicatorEnabled={boolean('busyIndicatorEnabled', true)}
-      sortable={boolean('sortable', true)}
-      filterable={boolean('filterable', true)}
-      visibleRows={number('visibleRows', 15)}
-      minRows={number('minRows', 5)}
-      selectionMode={select<TableSelectionMode>('selectionMode', TableSelectionMode, TableSelectionMode.MULTI_SELECT)}
-      onRowSelected={action('onRowSelected')}
-      onSort={action('onSort')}
-      onRowExpandChange={action('onRowExpandChange')}
-      subRowsKey={text('subRowsKey', 'subRows')}
-      selectedRowIds={object('selectedRowIds', { 3: true })}
-      selectionBehavior={select<TableSelectionBehavior>(
-        'selectionBehavior',
-        TableSelectionBehavior,
-        TableSelectionBehavior.ROW
-      )}
-      isTreeTable={boolean('isTreeTable', true)}
+      loading={props.loading}
+      busyIndicatorEnabled={props.busyIndicatorEnabled}
+      sortable={props.sortable}
+      filterable={props.filterable}
+      visibleRows={props.visibleRows}
+      minRows={props.minRows}
+      selectionMode={props.selectionMode}
+      onRowSelected={props.onRowSelected}
+      onSort={props.onSort}
+      onRowExpandChange={props.onRowExpandChange}
+      subRowsKey={props.subRowsKey}
+      selectedRowIds={props.selectedRowIds}
+      selectionBehavior={props.selectionBehavior}
+      isTreeTable={props.isTreeTable}
     />
   );
 };
@@ -170,5 +157,30 @@ export default {
     docs: {
       page: mdx
     }
+  },
+  argTypes: {
+    ...createSelectArgTypes({ scaleWidthMode: TableScaleWidthMode }),
+    ...createSelectArgTypes({ selectionMode: TableSelectionMode }),
+    ...createSelectArgTypes({ selectionBehavior: TableSelectionBehavior })
+  },
+  args: {
+    busyIndicatorEnabled: true,
+    sortable: true,
+    filterable: true,
+    visibleRows: 15,
+    minRows: 5,
+    groupable: true,
+    groupBy: [],
+    rowHeight: 44,
+    selectedRowIds: { 3: true },
+    withRowHighlight: true,
+    highlightField: 'status',
+    infiniteScroll: true,
+    infiniteScrollThreshold: 20,
+    subRowsKey: 'subRows',
+    isTreeTable: true,
+    scaleWidthMode: TableScaleWidthMode.Default,
+    selectionMode: TableSelectionMode.SINGLE_SELECT,
+    selectionBehavior: TableSelectionBehavior.ROW
   }
 };
diff --git a/packages/main/src/components/Bar/demo.stories.tsx b/packages/main/src/components/Bar/demo.stories.tsx
@@ -1,13 +1,13 @@
-import { select } from '@storybook/addon-knobs';
 import { Bar } from '@ui5/webcomponents-react/lib/Bar';
 import { BarDesign } from '@ui5/webcomponents-react/lib/BarDesign';
 import { Label } from '@ui5/webcomponents-react/lib/Label';
 import React from 'react';
+import { createSelectArgTypes } from '@shared/stories/createSelectArgTypes';
 
-export const defaultStory = () => {
+export const defaultStory = (props) => {
   return (
     <Bar
-      design={select('design', BarDesign, BarDesign.Auto)}
+      design={props.design}
       contentLeft={<Label>Content Left</Label>}
       contentMiddle={<Label>Content Middle</Label>}
       contentRight={<Label>Content Right</Label>}
@@ -18,5 +18,11 @@ defaultStory.storyName = 'Default';
 
 export default {
   title: 'Components / Bar',
-  component: Bar
+  component: Bar,
+  argTypes: {
+    ...createSelectArgTypes({ design: BarDesign })
+  },
+  args: {
+    design: BarDesign.Auto
+  }
 };
diff --git a/packages/main/src/components/Breadcrumbs/demo.stories.tsx b/packages/main/src/components/Breadcrumbs/demo.stories.tsx
@@ -1,12 +1,12 @@
-import { select, text } from '@storybook/addon-knobs';
 import { Breadcrumbs } from '@ui5/webcomponents-react/lib/Breadcrumbs';
 import { BreadcrumbsSeparatorStyle } from '@ui5/webcomponents-react/lib/BreadcrumbsSeparatorStyle';
 import { Link } from '@ui5/webcomponents-react/lib/Link';
 import React from 'react';
+import { createSelectArgTypes } from '@shared/stories/createSelectArgTypes';
 
-export const defaultStory = () => {
+export const defaultStory = (props) => {
   return (
-    <Breadcrumbs separatorStyle={select('separatorStyle', BreadcrumbsSeparatorStyle, BreadcrumbsSeparatorStyle.Slash)}>
+    <Breadcrumbs separatorStyle={props.separatorStyle}>
       <Link>Products</Link>
       <Link>Hardware</Link>
       <Link>Notebooks</Link>
@@ -15,12 +15,9 @@ export const defaultStory = () => {
   );
 };
 defaultStory.storyName = 'Default';
-export const withCurrentLocation = () => {
+export const withCurrentLocation = (props) => {
   return (
-    <Breadcrumbs
-      separatorStyle={select('separatorStyle', BreadcrumbsSeparatorStyle, BreadcrumbsSeparatorStyle.Slash)}
-      currentLocationText={text('currentLocationText', 'Super Slim Notebook 13 inch')}
-    >
+    <Breadcrumbs separatorStyle={props.separatorStyle} currentLocationText={props.currentLocationText}>
       <Link>Products</Link>
       <Link>Hardware</Link>
       <Link>Notebooks</Link>
@@ -35,5 +32,12 @@ export default {
   component: Breadcrumbs,
   parameters: {
     subcomponents: { Link }
+  },
+  argTypes: {
+    ...createSelectArgTypes({ separatorStyle: BreadcrumbsSeparatorStyle })
+  },
+  args: {
+    separatorStyle: BreadcrumbsSeparatorStyle.Slash,
+    currentLocationText: 'Super Slim Notebook 13 inch'
   }
 };