UpdateNickname story : convert knobs and actions to controls/args (#13189)

Co-authored-by: George Marshall <georgewrmarshall@gmail.com>

ui/components/ui/update-nickname-popover/README.mdx

@@ -0,0 +1,14 @@
+import { Story, Canvas, ArgsTable } from '@storybook/addon-docs';
+import UpdateNicknamePopover from '.';
+
+# UpdateNicknamePopover
+
+Popover to update nickname of an address
+
+<Canvas>
+  <Story id="ui-components-ui-update-nickname-popover-update-nickname-popover-stories-js--default-story" />
+</Canvas>
+
+## Component API
+
+<ArgsTable of={UpdateNicknamePopover} />

ui/components/ui/update-nickname-popover/update-nickname-popover.stories.js

@@ -1,44 +1,71 @@
-import React, { useState } from 'react';
-import { action } from '@storybook/addon-actions';
-import { text } from '@storybook/addon-knobs';
+import { useArgs } from '@storybook/client-api';
+import React from 'react';
 import Button from '../button';
+import README from './README.mdx';
 import UpdateNicknamePopover from '.';
 
 export default {
-  title: 'Components/UI/UpdateNickname',
+  title: 'Components/UI/UpdateNicknamePopover',
   id: __filename,
+  parameters: {
+    docs: {
+      page: README,
+    },
+  },
+  argTypes: {
+    address: {
+      control: { type: 'text' },
+      defaultValue: '0xdeDbcA0156308960E3bBa2f5a273E72179940788',
+    },
+    showPopover: {
+      control: { type: 'boolean' },
+      defaultValue: false,
+    },
+    onAdd: { action: 'onAdd' },
+    onClose: { action: 'onClose' },
+  },
+};
+
+export const DefaultStory = (args) => {
+  const [{ showPopover }, updateArgs] = useArgs();
+
+  const handlePopoverState = () => {
+    updateArgs({
+      showPopover: !showPopover,
+    });
   };
 
-export const AddNickname = () => {
-  const [showPopover, setShowPopover] = useState(false);
   return (
     <div style={{ width: '600px' }}>
-      <Button onClick={() => setShowPopover(true)}>
-        Open Add Nickname Popover
-      </Button>
+      <Button onClick={handlePopoverState}>Open Update Nickname Popover</Button>
       {showPopover && (
         <UpdateNicknamePopover
-          address={text('address', '0x0011244f50ff4')}
-          onClose={() => action(`Close Update Nickname Popover`)()}
+          {...args}
+          nickname="user_nickname"
+          memo="This is a memo"
+          onClose={handlePopoverState}
         />
       )}
     </div>
   );
 };
 
-export const UpdateNickname = () => {
-  const [showPopover, setShowPopover] = useState(false);
+DefaultStory.storyName = 'UpdateNickname';
+
+export const AddNickname = (args) => {
+  const [{ showPopover }, updateArgs] = useArgs();
+
+  const handlePopoverState = () => {
+    updateArgs({
+      showPopover: !showPopover,
+    });
+  };
+
   return (
     <div style={{ width: '600px' }}>
-      <Button onClick={() => setShowPopover(true)}>
-        Open Update Nickname Popover
-      </Button>
+      <Button onClick={handlePopoverState}>Open Add Nickname Popover</Button>
       {showPopover && (
-        <UpdateNicknamePopover
-          address={text('address', '0x0011244f50ff4')}
-          nickname={text('nickname', 'user_nickname')}
-          onClose={() => action(`Close Update Nickname Popover`)()}
-        />
+        <UpdateNicknamePopover {...args} onClose={handlePopoverState} />
       )}
     </div>
   );