Box story: convert knobs to controls (#13274)

Co-authored-by: caogu <sunlon1987@gmail.com>

ui/components/ui/box/box.stories.js

@@ -1,4 +1,3 @@
-import { number, select } from '@storybook/addon-knobs';
 import React from 'react';
 import {
   ALIGN_ITEMS,
@@ -11,96 +10,146 @@ import {
 } from '../../../helpers/constants/design-system';
 import Box from './box';
 
+const sizeKnobOptions = [undefined, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
+const marginSizeKnobOptions = [...sizeKnobOptions, 'auto'];
+
 export default {
   title: 'Components/UI/Box',
   id: __filename,
+  component: Box,
+  argTypes: {
+    size: {
+      control: { type: 'range', min: 50, max: 500, step: 10 },
+      table: { category: 'children' },
+      defaultValue: 100,
+    },
+    items: {
+      control: 'number',
+      table: { category: 'children' },
+      defaultValue: 1,
+    },
+    display: {
+      options: DISPLAY,
+      control: 'select',
+      defaultValue: DISPLAY.BLOCK,
+      table: { category: 'display' },
+    },
+    width: {
+      options: BLOCK_SIZES,
+      control: 'select',
+      defaultValue: BLOCK_SIZES.HALF,
+      table: { category: 'display' },
+    },
+    height: {
+      options: BLOCK_SIZES,
+      control: 'select',
+      defaultValue: BLOCK_SIZES.HALF,
+      table: { category: 'display' },
+    },
+    justifyContent: {
+      options: JUSTIFY_CONTENT,
+      control: 'select',
+      defaultValue: JUSTIFY_CONTENT.FLEX_START,
+      table: { category: 'display' },
+    },
+    alignItems: {
+      options: ALIGN_ITEMS,
+      control: 'select',
+      defaultValue: ALIGN_ITEMS.FLEX_START,
+      table: { category: 'display' },
+    },
+    textAlign: {
+      options: TEXT_ALIGN,
+      control: 'select',
+      defaultValue: TEXT_ALIGN.LEFT,
+      table: { category: 'left' },
+    },
+    margin: {
+      options: marginSizeKnobOptions,
+      control: 'select',
+      table: { category: 'margin' },
+    },
+    marginTop: {
+      options: marginSizeKnobOptions,
+      control: 'select',
+      table: { category: 'margin' },
+    },
+    marginRight: {
+      options: marginSizeKnobOptions,
+      control: 'select',
+      table: { category: 'margin' },
+    },
+    marginBottom: {
+      options: marginSizeKnobOptions,
+      control: 'select',
+      table: { category: 'margin' },
+    },
+    marginLeft: {
+      options: marginSizeKnobOptions,
+      control: 'select',
+      table: { category: 'margin' },
+    },
+    padding: {
+      options: sizeKnobOptions,
+      control: 'select',
+      table: { category: 'padding' },
+    },
+    paddingTop: {
+      options: sizeKnobOptions,
+      control: 'select',
+      table: { category: 'padding' },
+    },
+    paddingRight: {
+      options: sizeKnobOptions,
+      control: 'select',
+      table: { category: 'padding' },
+    },
+    paddingBottom: {
+      options: sizeKnobOptions,
+      control: 'select',
+      table: { category: 'padding' },
+    },
+    paddingLeft: {
+      options: sizeKnobOptions,
+      control: 'select',
+      table: { category: 'padding' },
+    },
+    borderStyle: {
+      options: BORDER_STYLE,
+      control: 'select',
+      defaultValue: BORDER_STYLE.DASHED,
+      table: { category: 'border' },
+    },
+    borderWidth: {
+      options: sizeKnobOptions,
+      control: 'number',
+      defaultValue: 1,
+      table: { category: 'border' },
+    },
+    borderColor: {
+      options: COLORS,
+      control: 'select',
+      defaultValue: COLORS.BLACK,
+      table: { category: 'border' },
+    },
+    backgroundColor: {
+      options: COLORS,
+      defaultValue: COLORS.WHITE,
+      control: 'select',
+      table: { category: 'background' },
+    },
+  },
 };
 
-const sizeKnobOptions = [undefined, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
-const marginSizeKnobOptions = [...sizeKnobOptions, 'auto'];
-
-export const DefaultStory = () => {
-  const items = [];
-  const size = number(
-    'size',
-    100,
-    { range: true, min: 50, max: 500, step: 10 },
-    'children',
+export const DefaultStory = (args) => {
+  const { items, size, ...rest } = args;
+  const children = [];
+  for (let $i = 0; $i < items; $i++) {
+    children.push(
+      <img width={size} height={size} src="./images/eth_logo.svg" />,
     );
-  for (let $i = 0; $i < number('items', 1, {}, 'children'); $i++) {
-    items.push(<img width={size} height={size} src="./images/eth_logo.svg" />);
   }
-  return (
-    <Box
-      display={select('display', DISPLAY, DISPLAY.BLOCK, 'display')}
-      width={select('width', BLOCK_SIZES, BLOCK_SIZES.HALF, 'display')}
-      height={select('height', BLOCK_SIZES, BLOCK_SIZES.HALF, 'display')}
-      justifyContent={select(
-        'justifyContent',
-        JUSTIFY_CONTENT,
-        undefined,
-        'display',
-      )}
-      textAlign={select('textAlign', TEXT_ALIGN, undefined, 'left')}
-      alignItems={select('alignItems', ALIGN_ITEMS, undefined, 'display')}
-      margin={select('margin', marginSizeKnobOptions, undefined, 'margin')}
-      marginTop={select(
-        'marginTop',
-        marginSizeKnobOptions,
-        undefined,
-        'margin',
-      )}
-      marginRight={select(
-        'marginRight',
-        marginSizeKnobOptions,
-        undefined,
-        'margin',
-      )}
-      marginBottom={select(
-        'marginBottom',
-        marginSizeKnobOptions,
-        undefined,
-        'margin',
-      )}
-      marginLeft={select(
-        'marginLeft',
-        marginSizeKnobOptions,
-        undefined,
-        'margin',
-      )}
-      padding={select('padding', sizeKnobOptions, undefined, 'padding')}
-      paddingTop={select('paddingTop', sizeKnobOptions, undefined, 'padding')}
-      paddingRight={select(
-        'paddingRight',
-        sizeKnobOptions,
-        undefined,
-        'padding',
-      )}
-      paddingBottom={select(
-        'paddingBottom',
-        sizeKnobOptions,
-        undefined,
-        'padding',
-      )}
-      paddingLeft={select('paddingLeft', sizeKnobOptions, undefined, 'padding')}
-      borderStyle={select(
-        'borderStyle',
-        BORDER_STYLE,
-        BORDER_STYLE.DASHED,
-        'border',
-      )}
-      borderWidth={number('borderWidth', 1, sizeKnobOptions, 'border')}
-      borderColor={select('borderColor', COLORS, COLORS.BLACK, 'border')}
-      backgroundColor={select(
-        'backgroundColor',
-        COLORS,
-        COLORS.WHITE,
-        'background',
-      )}
-    >
-      {items}
-    </Box>
-  );
+  return <Box {...rest}>{children}</Box>;
 };
 
 DefaultStory.storyName = 'Default';