From d12097ac1c305ae04bb32d119164be9a925d3239 Mon Sep 17 00:00:00 2001
From: Benjamin Bourgeois <benjishift@gmail.com>
Date: Mon, 17 Jan 2022 22:00:40 +0000
Subject: [PATCH] UpdateNickname story : convert knobs and actions to
 controls/args (#13189)

Co-authored-by: George Marshall <georgewrmarshall@gmail.com>
---
 .../ui/update-nickname-popover/README.mdx     | 14 ++++
 .../update-nickname-popover.stories.js        | 69 +++++++++++++------
 2 files changed, 62 insertions(+), 21 deletions(-)
 create mode 100644 ui/components/ui/update-nickname-popover/README.mdx

diff --git a/ui/components/ui/update-nickname-popover/README.mdx b/ui/components/ui/update-nickname-popover/README.mdx
new file mode 100644
index 000000000..28074738c
--- /dev/null
+++ b/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} />
diff --git a/ui/components/ui/update-nickname-popover/update-nickname-popover.stories.js b/ui/components/ui/update-nickname-popover/update-nickname-popover.stories.js
index 4e870b01f..fa8973298 100644
--- a/ui/components/ui/update-nickname-popover/update-nickname-popover.stories.js
+++ b/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 AddNickname = () => {
-  const [showPopover, setShowPopover] = useState(false);
+export const DefaultStory = (args) => {
+  const [{ showPopover }, updateArgs] = useArgs();
+
+  const handlePopoverState = () => {
+    updateArgs({
+      showPopover: !showPopover,
+    });
+  };
+
   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>
   );