From 371da2eb83515d7112ec3e5c954d3c876d129940 Mon Sep 17 00:00:00 2001
From: 6201 <sunlon_ye@163.com>
Date: Tue, 18 Jan 2022 05:50:27 +0800
Subject: [PATCH] Box story: convert knobs to controls (#13274)

Co-authored-by: caogu <sunlon1987@gmail.com>
---
 ui/components/ui/box/box.stories.js | 223 +++++++++++++++++-----------
 1 file changed, 136 insertions(+), 87 deletions(-)

diff --git a/ui/components/ui/box/box.stories.js b/ui/components/ui/box/box.stories.js
index f4c357c15..382927a78 100644
--- a/ui/components/ui/box/box.stories.js
+++ b/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';
 
-export default {
-  title: 'Components/UI/Box',
-  id: __filename,
-};
-
 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',
-  );
-  for (let $i = 0; $i < number('items', 1, {}, 'children'); $i++) {
-    items.push(<img width={size} height={size} src="./images/eth_logo.svg" />);
+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' },
+    },
+  },
+};
+
+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" />,
+    );
   }
-  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';