SendHeader, ContactListTab and AdvancedTab story: converted knobs and actions to controls / args (#13230)

* SendHeader, ContactListTab and AdvancedTab story: converted knobs and actions to controls / args

* Added the other function type props to action controls

* Requested review changes

ui/pages/send/send-header/send-header.stories.js

@@ -2,7 +2,6 @@ import React, { useEffect } from 'react';
 import { combineReducers, createStore } from 'redux';
 import { Provider } from 'react-redux';
 
-import { select } from '@storybook/addon-knobs';
 import {
   updateSendStage,
   updateSendAsset,
@@ -10,47 +9,53 @@ import {
 
 import sendSBReducer from '../../../../.storybook/reducers/sb-send-reducer';
 import historySBReducer from '../../../../.storybook/reducers/sb-history-reducer';
-
-import { ASSET_TYPES, SEND_STAGES } from '../../../ducks/send';
 import SendHeader from './send-header.component';
 
 export default {
   title: 'Pages/Send/SendHeader',
   id: __filename,
+  argTypes: {
+    asset: {
+      control: {
+        type: 'select',
+      },
+      options: ['NATIVE', 'TOKEN'],
+    },
+    stage: {
+      control: {
+        type: 'select',
+      },
+      options: ['ADD_RECIPIENT', 'DRAFT', 'EDIT', 'INACTIVE'],
+    },
+  },
 };
 
-export const DefaultStory = () => {
+const store = createStore(
-  const store = createStore(
+  combineReducers({ send: sendSBReducer, history: historySBReducer }),
-    combineReducers({ send: sendSBReducer, history: historySBReducer }),
+);
-  );
+const state = store.getState();
-  const state = store.getState();
+const { send } = state;
-  const { send } = state;
-  const asset =
-    select('Asset', [ASSET_TYPES.NATIVE, ASSET_TYPES.TOKEN]) || send.asset;
 
-  const stage =
+export const DefaultStory = (args) => {
-    select('Stage', [
+  useEffect(() => {
-      SEND_STAGES.ADD_RECIPIENT,
+    store.dispatch(updateSendAsset(args.asset));
-      SEND_STAGES.DRAFT,
+  }, [args.asset]);
-      SEND_STAGES.EDIT,
-      SEND_STAGES.INACTIVE,
-    ]) || send.stage;
 
   useEffect(() => {
-    store.dispatch(updateSendAsset(asset));
+    store.dispatch(updateSendStage(args.stage));
-  }, [store, asset]);
+  }, [args.stage]);
-
-  useEffect(() => {
-    store.dispatch(updateSendStage(stage));
-  }, [store, stage]);
 
   return (
     <Provider store={store}>
       <div style={{ width: 600 }}>
-        <SendHeader />
+        <SendHeader {...args} />
       </div>
     </Provider>
   );
 };
 
 DefaultStory.storyName = 'Default';
+DefaultStory.args = {
+  asset: 'NATIVE' || send.asset,
+  stage: 'ADD_RECIPIENT' || send.stage,
+};

ui/pages/settings/advanced-tab/advanced-tab.stories.js

@@ -1,48 +1,121 @@
 import React from 'react';
-import { text, boolean } from '@storybook/addon-knobs';
+import { useArgs } from '@storybook/client-api';
 import AdvancedTab from './advanced-tab.component';
 
 export default {
   title: 'Pages/Settings/AdvancedTab',
   id: __filename,
+  argTypes: {
+    warning: { control: 'text' },
+    useNonceField: { control: 'boolean' },
+    sendHexData: { control: 'boolean' },
+    advancedInlineGas: { control: 'boolean' },
+    showFiatInTestnets: { control: 'boolean' },
+    threeBoxSyncingAllowed: { control: 'boolean' },
+    threeBoxDisabled: { control: 'boolean' },
+    useLedgerLive: { control: 'boolean' },
+    dismissSeedBackUpReminder: { control: 'boolean' },
+    setAutoLockTimeLimit: { action: 'setAutoLockTimeLimit' },
+    setShowFiatConversionOnTestnetsPreference: {
+      action: 'setShowFiatConversionOnTestnetsPreference',
+    },
+    setShowTestNetworks: { action: 'setShowTestNetworks' },
+    setThreeBoxSyncingPermission: { action: 'setThreeBoxSyncingPermission' },
+    setIpfsGateway: { action: 'setIpfsGateway' },
+    setLedgerTransportPreference: { action: 'setLedgerTransportPreference' },
+    setDismissSeedBackUpReminder: { action: 'setDismissSeedBackUpReminder' },
+    setUseNonceField: { action: 'setUseNonceField' },
+    setHexDataFeatureFlag: { action: 'setHexDataFeatureFlag' },
+    displayWarning: { action: 'displayWarning' },
+    history: { action: 'history' },
+    showResetAccountConfirmationModal: {
+      action: 'showResetAccountConfirmationModal',
+    },
+    setAdvancedInlineGasFeatureFlag: {
+      action: 'setAdvancedInlineGasFeatureFlag',
+    },
+  },
 };
 
-export const DefaultStory = () => {
+export const DefaultStory = (args) => {
+  const [
+    {
+      useNonceField,
+      sendHexData,
+      advancedInlineGas,
+      showFiatInTestnets,
+      threeBoxSyncingAllowed,
+      dismissSeedBackUpReminder,
+    },
+    updateArgs,
+  ] = useArgs();
+
+  const handleUseNonceField = () => {
+    updateArgs({
+      useNonceField: !useNonceField,
+    });
+  };
+
+  const handleSendHexData = () => {
+    updateArgs({
+      sendHexData: !sendHexData,
+    });
+  };
+
+  const handleAdvancedInlineGas = () => {
+    updateArgs({
+      advancedInlineGas: !advancedInlineGas,
+    });
+  };
+
+  const handleShowFiatInTestnets = () => {
+    updateArgs({
+      showFiatInTestnets: !showFiatInTestnets,
+    });
+  };
+
+  const handleThreeBoxSyncingAllowed = () => {
+    updateArgs({
+      threeBoxSyncingAllowed: !threeBoxSyncingAllowed,
+    });
+  };
+
+  const handleDismissSeedBackUpReminder = () => {
+    updateArgs({
+      dismissSeedBackUpReminder: !dismissSeedBackUpReminder,
+    });
+  };
   return (
     <div style={{ flex: 1, height: 500 }}>
       <AdvancedTab
-        setAutoLockTimeLimit={() => undefined}
+        {...args}
-        setShowFiatConversionOnTestnetsPreference={() => undefined}
+        useNonceField={useNonceField}
-        setShowTestNetworks={() => undefined}
+        setUseNonceField={handleUseNonceField}
-        setThreeBoxSyncingPermission={() => undefined}
+        sendHexData={sendHexData}
-        setIpfsGateway={() => undefined}
+        setHexDataFeatureFlag={handleSendHexData}
-        setLedgerTransportPreference={() => undefined}
+        advancedInlineGas={advancedInlineGas}
-        setDismissSeedBackUpReminder={() => undefined}
+        setAdvancedInlineGasFeatureFlag={handleAdvancedInlineGas}
-        setUseNonceField={() => undefined}
+        showFiatInTestnets={showFiatInTestnets}
-        setHexDataFeatureFlag={() => undefined}
+        setShowFiatConversionOnTestnetsPreference={handleShowFiatInTestnets}
-        displayWarning={() => undefined}
+        threeBoxSyncingAllowed={threeBoxSyncingAllowed}
-        history={{ push: () => undefined }}
+        setThreeBoxSyncingPermission={handleThreeBoxSyncingAllowed}
-        showResetAccountConfirmationModal={() => undefined}
+        dismissSeedBackUpReminder={dismissSeedBackUpReminder}
-        setAdvancedInlineGasFeatureFlag={() => undefined}
+        setDismissSeedBackUpReminder={handleDismissSeedBackUpReminder}
-        warning={text('Warning', 'Warning Sample')}
         ipfsGateway="ipfs-gateway"
-        useNonceField={boolean('Customize Transaction Nonce', false)}
-        sendHexData={boolean('Show Hex Data', false)}
-        advancedInlineGas={boolean('Advanced Inline Gas', false)}
-        showFiatInTestnets={boolean('Show Conversion on Testnets', false)}
-        threeBoxSyncingAllowed={boolean(
-          'Sync data with 3Box (experimental)',
-          false,
-        )}
-        threeBoxDisabled={boolean('3Box Disabled', false)}
-        useLedgerLive={boolean('Use Ledger Live', false)}
-        dismissSeedBackUpReminder={boolean(
-          'Dismiss recovery phrase backup reminder',
-          false,
-        )}
       />
     </div>
   );
 };
 
 DefaultStory.storyName = 'Default';
+DefaultStory.args = {
+  warning: 'Warning Sample',
+  useNonceField: false,
+  sendHexData: false,
+  advancedInlineGas: false,
+  showFiatInTestnets: false,
+  threeBoxSyncingAllowed: false,
+  threeBoxDisabled: false,
+  useLedgerLive: false,
+  dismissSeedBackUpReminder: false,
+};

ui/pages/settings/contact-list-tab/contact-list-tab.stories.js

@@ -1,6 +1,5 @@
 import React from 'react';
 import { Provider } from 'react-redux';
-import { object, boolean, select } from '@storybook/addon-knobs';
 
 import configureStore from '../../../store/store';
 import testData from '../../../../.storybook/test-data';
@@ -13,28 +12,28 @@ export default {
   title: 'Pages/Settings/ContactListTab',
   id: __filename,
   decorators: [(story) => <Provider store={store}>{story()}</Provider>],
+  argsTypes: {
+    addressBook: { control: 'object' },
+    hideAddressBook: { control: 'boolean' },
+    selectedAddress: { control: 'select' },
+    history: { action: 'history' },
+  },
 };
 
-export const DefaultStory = () => {
+const { metamask } = store.getState();
-  const { metamask } = store.getState();
+const { addresses } = metamask;
-  const { addresses } = metamask;
-  const addressBook = object('Address Book', addresses);
-  const hideAddressBook = boolean('Hide Address Book', false);
-  const selectedAddress = select(
-    'Selected Address',
-    addresses.map(({ address }) => address),
-  );
 
+export const DefaultStory = (args) => {
   return (
     <div style={{ width: 300 }}>
-      <ContactListTab
+      <ContactListTab {...args} />
-        addressBook={addressBook}
-        history={{ push: () => undefined }}
-        hideAddressBook={hideAddressBook}
-        selectedAddress={selectedAddress}
-      />
     </div>
   );
 };
 
 DefaultStory.storyName = 'Default';
+DefaultStory.args = {
+  addressBook: addresses,
+  hideAddressBook: false,
+  selectedAddress: addresses.map(({ address }) => address),
+};