docs: Adding knobs to Table and SVG Icons (#698)

Signed-off-by: Marcos Iglesias Valle <golodhros@gmail.com>

amundsen_application/static/.storybook/main.ts

@@ -4,7 +4,11 @@ import devWebpackConfig from '../webpack.dev';
 
 module.exports = {
   stories: ['../js/**/*.story.tsx'],
-  addons: ['@storybook/addon-actions', '@storybook/addon-links'],
+  addons: [
+    '@storybook/addon-actions',
+    '@storybook/addon-links',
+    '@storybook/addon-knobs'
+  ],
   webpackFinal: async (config) => {
     return merge(devWebpackConfig, config);
   },

amundsen_application/static/js/components/common/SVGIcons/svgIcons.story.tsx

@@ -2,26 +2,40 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import React from 'react';
-import { storiesOf } from '@storybook/react';
+import { withKnobs, object } from '@storybook/addon-knobs';
 
 import StorySection from '../StorySection';
 import { AlertIcon, DownIcon, UpIcon, RightIcon } from '.';
 
-const stories = storiesOf('Attributes/Iconography', module);
-
-stories.add('SVG Icons', () => (
+export const SVGIcons = () => (
   <>
     <StorySection title="Alert">
-      <AlertIcon />
+      <AlertIcon stroke={object('Alert stroke', 'currentColor')} />
     </StorySection>
     <StorySection title="Down">
-      <DownIcon />
+      <DownIcon
+        stroke={object('DownIcon stroke', 'currentColor')}
+        fill={object('DownIcon fill', '#9191A8')}
+      />
     </StorySection>
     <StorySection title="Up">
-      <UpIcon />
+      <UpIcon
+        stroke={object('UpIcon stroke', 'currentColor')}
+        fill={object('UpIcon fill', '#9191A8')}
+      />
     </StorySection>
     <StorySection title="Right">
-      <RightIcon />
+      <RightIcon
+        stroke={object('RightIcon stroke', 'currentColor')}
+        fill={object('RightIcon fill', '#9191A8')}
+      />
     </StorySection>
   </>
-));
+);
+SVGIcons.storyName = 'SVG Icons';
+
+export default {
+  title: 'Attributes/Iconography',
+  component: AlertIcon,
+  decorators: [withKnobs],
+};

amundsen_application/static/js/components/common/Table/table.story.tsx

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import React from 'react';
-import { storiesOf } from '@storybook/react';
+import { withKnobs, object } from '@storybook/addon-knobs';
 
 import StorySection from '../StorySection';
 import Table from '.';
@@ -39,60 +39,80 @@ const expandRowComponent = (rowValue, index) => (
   </strong>
 );
 
-const stories = storiesOf('Components/Table', module);
+// const stories = storiesOf('Components/Table', module);
 
-stories.add('Table States', () => (
+export const TableStates = () => (
   <>
     <StorySection title="Basic Table">
-      <Table columns={columns} data={data} />
+      <Table
+        columns={object('basic table columns', columns)}
+        data={object('basic table data', data)}
+      />
     </StorySection>
     <StorySection title="Empty Table">
-      <Table columns={columns} data={[]} />
+      <Table
+        columns={object('empty table columns', columns)}
+        data={object('empty table data', [])}
+      />
     </StorySection>
     <StorySection title="Loading Table">
-      <Table columns={[]} data={[]} options={{ isLoading: true }} />
+      <Table
+        columns={[]}
+        data={[]}
+        options={object('options', { isLoading: true })}
+      />
     </StorySection>
   </>
-));
+);
 
-stories.add('Styled Table', () => (
+export const StyledTable = () => (
   <>
     <StorySection title="with different column alignment">
-      <Table columns={alignedColumns} data={alignedData} />
+      <Table
+        columns={object('aligned columns', alignedColumns)}
+        data={object('aligned columns data', alignedData)}
+      />
     </StorySection>
     <StorySection title="with 50px row height">
-      <Table columns={columns} data={data} options={{ rowHeight: 50 }} />
+      <Table
+        columns={columns}
+        data={data}
+        options={object('row height options', { rowHeight: 50 })}
+      />
     </StorySection>
     <StorySection title="with different column widths">
       <Table
-        columns={differentWidthColumns}
+        columns={object(
+          'different column widths columns',
+          differentWidthColumns
+        )}
         data={data}
         options={{ rowHeight: 50 }}
       />
     </StorySection>
   </>
-));
+);
 
-stories.add('Customized Table', () => (
+export const CustomizedTable = () => (
   <>
     <StorySection title="with custom column components">
       <Table
-        columns={customColumns}
-        data={customColumnsData}
+        columns={object('custom component columns', customColumns)}
+        data={object('custom component data', customColumnsData)}
         options={{ rowHeight: 40 }}
       />
     </StorySection>
     <StorySection title="with multiple custom column components">
       <Table
-        columns={multipleCustomColumns}
-        data={multipleCustomComlumnsData}
+        columns={object('multiple component columns', multipleCustomColumns)}
+        data={object('multiple component data', multipleCustomComlumnsData)}
         options={{ rowHeight: 40 }}
       />
     </StorySection>
     <StorySection title="with Bootstrap dropdown as component">
       <Table
-        columns={columnsWithAction}
-        data={dataWithAction}
+        columns={object('action columns', columnsWithAction)}
+        data={object('action data', dataWithAction)}
         options={{ rowHeight: 40 }}
       />
     </StorySection>
@@ -100,19 +120,24 @@ stories.add('Customized Table', () => (
       <Table
         columns={columns}
         data={[]}
-        options={{ emptyMessage: 'Custom Empty Message Here!' }}
+        options={object('empty message options', {
+          emptyMessage: 'Custom Empty Message Here!',
+        })}
       />
     </StorySection>
   </>
-));
+);
 
-stories.add('Collapsible Table', () => (
+export const CollapsibleTable = () => (
   <>
     <StorySection title="with Collapsed Rows">
       <Table
-        columns={columnsWithCollapsedRow}
-        data={dataWithCollapsedRow}
-        options={{ rowHeight: 40, expandRow: expandRowComponent }}
+        columns={object('collapsed rows columns', columnsWithCollapsedRow)}
+        data={object('collapsed rows data', dataWithCollapsedRow)}
+        options={object('collapsed rows options', {
+          rowHeight: 40,
+          expandRow: expandRowComponent,
+        })}
       />
     </StorySection>
     <StorySection
@@ -122,14 +147,14 @@ stories.add('Collapsible Table', () => (
       <Table
         columns={columnsWithCollapsedRow}
         data={dataWithCollapsedRow}
-        options={{
+        options={object('onExpand options', {
           rowHeight: 40,
           expandRow: expandRowComponent,
           onExpand: (rowValues, index) => {
             console.log('Expanded row values:', rowValues);
             console.log('Expanded row index:', index);
           },
-        }}
+        })}
       />
     </StorySection>
     <StorySection
@@ -139,15 +164,21 @@ stories.add('Collapsible Table', () => (
       <Table
         columns={columnsWithCollapsedRow}
         data={dataWithCollapsedRow}
-        options={{
+        options={object('onCollapse options', {
           rowHeight: 40,
           expandRow: expandRowComponent,
           onCollapse: (rowValues, index) => {
             console.log('Collapsed row values:', rowValues);
             console.log('Collapsed row index:', index);
           },
-        }}
+        })}
       />
     </StorySection>
   </>
-));
+);
+
+export default {
+  title: 'Components/Table',
+  component: Table,
+  decorators: [withKnobs],
+};

amundsen_application/static/package.json

@@ -69,6 +69,7 @@
     "@types/react-redux": "^6.0.14",
     "@types/react-router": "^4.4.5",
     "@types/react-tagsinput": "^3.19.7",
+    "@types/storybook__addon-knobs": "^5.2.1",
     "@types/webpack": "^4.41.12",
     "@typescript-eslint/eslint-plugin": "^3.9.0",
     "@typescript-eslint/eslint-plugin-tslint": "^3.1.0",