refactor: Updated Toast story (#7860)

## **Description** - Updated Toast story to new format ## **Screenshots/Recordings** ![Simulator Screen Shot - iPhone 14 Pro - 2023-11-16 at 21 04 11](https://github.com/MetaMask/metamask-mobile/assets/14355083/7de6a622-3f50-4ec2-b600-8012f70fe51d) ![Simulator Screen Shot - iPhone 14 Pro - 2023-11-16 at 21 04 15](https://github.com/MetaMask/metamask-mobile/assets/14355083/8038bf9b-bdf5-470b-ad9d-b1140d91ee81) ![Simulator Screen Shot - iPhone 14 Pro - 2023-11-16 at 21 04 19](https://github.com/MetaMask/metamask-mobile/assets/14355083/7d3ac339-0148-4d4d-acdd-9172f0ef22c9) ## **Pre-merge author checklist** - [ ] I’ve followed [MetaMask Coding Standards](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/CODING_GUIDELINES.md). - [ ] I've clearly explained what problem this PR is solving and how it is solved. - [ ] I've linked related issues - [ ] I've included manual testing steps - [ ] I've included screenshots/recordings if applicable - [ ] I’ve included tests if applicable - [ ] I’ve documented my code using [JSDoc](https://jsdoc.app/) format if applicable - [ ] I’ve applied the right labels on the PR (see [labeling guidelines](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/LABELING_GUIDELINES.md)). Not required for external contributors. - [ ] I’ve properly set the pull request status: - [ ] In case it's not yet "ready for review", I've set it to "draft". - [ ] In case it's "ready for review", I've changed it from "draft" to "non-draft". ## **Pre-merge reviewer checklist** - [ ] I've manually tested the PR (e.g. pull and build branch, run the app, test code being changed). - [ ] I confirm that this PR addresses all acceptance criteria described in the ticket it closes and includes the necessary testing evidence such as recordings and or screenshots.
MetaMask · Nov 17, 2023 · 5516de3 · 5516de3
1 parent 3264308
commit 5516de3
Show file tree

Hide file tree

Showing 3 changed files with 94 additions and 68 deletions.
diff --git a/.storybook/main.js b/.storybook/main.js
@@ -20,6 +20,7 @@ module.exports = {
     '../app/component-library/components/Overlay/**/*.stories.?(ts|tsx|js|jsx)',
     '../app/component-library/components/Icons/**/*.stories.?(ts|tsx|js|jsx)',
     '../app/component-library/components/Checkbox/**/*.stories.?(ts|tsx|js|jsx)',
+    '../app/component-library/components/Toast/**/*.stories.?(ts|tsx|js|jsx)',
   ],
   addons: ['@storybook/addon-ondevice-controls'],
   framework: '@storybook/react-native',

diff --git a/.storybook/storybook.requires.js b/.storybook/storybook.requires.js
@@ -149,6 +149,13 @@ global.STORIES = [
     importPathMatcher:
       "^\\.[\\\\/](?:app\\/component-library\\/components\\/Checkbox(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.(?:ts|tsx|js|jsx)?)$",
   },
+  {
+    titlePrefix: "",
+    directory: "./app/component-library/components/Toast",
+    files: "**/*.stories.?(ts|tsx|js|jsx)",
+    importPathMatcher:
+      "^\\.[\\\\/](?:app\\/component-library\\/components\\/Toast(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.(?:ts|tsx|js|jsx)?)$",
+  },
 ];
 
 import "@storybook/addon-ondevice-controls/register";
@@ -223,6 +230,7 @@ const getStories = () => {
     "./app/component-library/components/Overlay/Overlay.stories.tsx": require("../app/component-library/components/Overlay/Overlay.stories.tsx"),
     "./app/component-library/components/Icons/Icon/Icon.stories.tsx": require("../app/component-library/components/Icons/Icon/Icon.stories.tsx"),
     "./app/component-library/components/Checkbox/Checkbox.stories.tsx": require("../app/component-library/components/Checkbox/Checkbox.stories.tsx"),
+    "./app/component-library/components/Toast/Toast.stories.tsx": require("../app/component-library/components/Toast/Toast.stories.tsx"),
   };
 };
 

diff --git a/app/component-library/components/Toast/Toast.stories.tsx b/app/component-library/components/Toast/Toast.stories.tsx
@@ -1,16 +1,15 @@
-/* eslint-disable no-console */
-
+/* eslint-disable react-native/no-inline-styles */
+/* eslint-disable react/display-name */
 // Third party dependencies.
 import React, { useContext } from 'react';
 import { Alert } from 'react-native';
-import { storiesOf } from '@storybook/react-native';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
 
 // External dependencies.
-import Button, { ButtonSize, ButtonVariants } from '../Buttons/Button';
+import Button, { ButtonVariants } from '../Buttons/Button';
 
 // Internal dependencies.
-import Toast from './Toast';
+import { default as ToastComponent } from './Toast';
 import { ToastContext, ToastContextWrapper } from './Toast.context';
 import { ToastVariants } from './Toast.types';
 import {
@@ -19,70 +18,88 @@ import {
   TEST_NETWORK_IMAGE_URL,
 } from './Toast.constants';
 
-const ToastExample = () => {
-  const { toastRef } = useContext(ToastContext);
+const ToastMeta = {
+  title: 'Component Library / Toast',
+  component: ToastComponent,
+  decorators: [
+    (Story: any) => (
+      <SafeAreaProvider>
+        <ToastContextWrapper>
+          <Story />
+        </ToastContextWrapper>
+      </SafeAreaProvider>
+    ),
+  ],
+  argTypes: {
+    variant: {
+      options: ToastVariants,
+      control: {
+        type: 'select',
+      },
+      defaultValue: ToastVariants.Plain,
+    },
+  },
+};
+export default ToastMeta;
+
+export const Toast = {
+  render: (args: any) => {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const { toastRef } = useContext(ToastContext);
+    let otherToastProps: any;
 
-  return (
-    <>
-      <Button
-        variant={ButtonVariants.Link}
-        size={ButtonSize.Md}
-        label={'Show Account Toast'}
-        onPress={() => {
-          toastRef?.current?.showToast({
-            variant: ToastVariants.Account,
-            labelOptions: [
-              { label: 'Switching to' },
-              { label: ' Account 2.', isBold: true },
-            ],
-            accountAddress: TEST_ACCOUNT_ADDRESS,
-            accountAvatarType: TEST_AVATAR_TYPE,
-          });
-        }}
-      />
-      <Button
-        variant={ButtonVariants.Link}
-        size={ButtonSize.Md}
-        label={'Show Network Toast'}
-        onPress={() => {
-          toastRef?.current?.showToast({
-            variant: ToastVariants.Network,
-            labelOptions: [
-              { label: 'Added' },
-              { label: ' Mainnet', isBold: true },
-              { label: ' network.' },
-            ],
-            networkImageSource: { uri: TEST_NETWORK_IMAGE_URL },
-            linkButtonOptions: {
-              label: 'Click here!',
-              onPress: () => {
-                Alert.alert('Clicked toast link!');
-              },
+    switch (args.variant) {
+      case ToastVariants.Plain:
+        otherToastProps = {
+          labelOptions: [{ label: 'This is a Toast message.' }],
+        };
+        break;
+      case ToastVariants.Account:
+        otherToastProps = {
+          labelOptions: [
+            { label: 'Switching to' },
+            { label: ' Account 2.', isBold: true },
+          ],
+          accountAddress: TEST_ACCOUNT_ADDRESS,
+          accountAvatarType: TEST_AVATAR_TYPE,
+        };
+        break;
+      case ToastVariants.Network:
+        otherToastProps = {
+          labelOptions: [
+            { label: 'Added' },
+            { label: ' Mainnet', isBold: true },
+            { label: ' network.' },
+          ],
+          networkImageSource: { uri: TEST_NETWORK_IMAGE_URL },
+          linkButtonOptions: {
+            label: 'Click here!',
+            onPress: () => {
+              Alert.alert('Clicked toast link!');
             },
-          });
-        }}
-      />
-      <Button
-        variant={ButtonVariants.Link}
-        size={ButtonSize.Md}
-        label={'Show Plain Toast'}
-        onPress={() => {
-          toastRef?.current?.showToast({
-            variant: ToastVariants.Plain,
-            labelOptions: [{ label: 'This is a plain message.' }],
-          });
-        }}
-      />
+          },
+        };
+        break;
+      default:
+        otherToastProps = {
+          labelOptions: [{ label: 'This is a Toast message.' }],
+        };
+    }
 
-      <Toast ref={toastRef} />
-    </>
-  );
+    return (
+      <>
+        <Button
+          variant={ButtonVariants.Secondary}
+          label={`Show ${args.variant} Toast`}
+          onPress={() => {
+            toastRef?.current?.showToast({
+              variant: args.variant,
+              ...otherToastProps,
+            });
+          }}
+        />
+        <ToastComponent ref={toastRef} />
+      </>
+    );
+  },
 };
-
-storiesOf('Component Library / Toast', module)
-  .addDecorator((storyFn) => (
-    <SafeAreaProvider>
-      <ToastContextWrapper>{storyFn()}</ToastContextWrapper>
-    </SafeAreaProvider>
-  ))
-  .add('Default', () => <ToastExample />);