From 4667a821c5e01a8d6721c678525be1b8c0dd5b55 Mon Sep 17 00:00:00 2001
From: Brian Nguyen <brianacnguyen@gmail.com>
Date: Sat, 7 Oct 2023 16:52:02 -0700
Subject: [PATCH 1/2] Converted Overlay stories

---
 .storybook/main.js                            |  1 +
 .storybook/storybook.requires.js              |  8 ++++
 .../components/Overlay/Overlay.stories.tsx    | 43 ++++++++-----------
 3 files changed, 26 insertions(+), 26 deletions(-)

diff --git a/.storybook/main.js b/.storybook/main.js
index 84117eacb0e..cac59b2f16b 100644
--- a/.storybook/main.js
+++ b/.storybook/main.js
@@ -2,6 +2,7 @@ module.exports = {
   stories: [
     '../app/component-library/components/Cards/Card/**/*.stories.?(ts|tsx|js|jsx)',
     '../app/component-library/components/Banners/Banner/variants/BannerAlert/**/*.stories.?(ts|tsx|js|jsx)',
+    '../app/component-library/components/Overlay/**/*.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
index 8614f98a259..33100757921 100644
--- a/.storybook/storybook.requires.js
+++ b/.storybook/storybook.requires.js
@@ -24,6 +24,13 @@ global.STORIES = [
     importPathMatcher:
       "^\\.[\\\\/](?:app\\/component-library\\/components\\/Banners\\/Banner\\/variants\\/BannerAlert(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.(?:ts|tsx|js|jsx)?)$",
   },
+  {
+    titlePrefix: "",
+    directory: "./app/component-library/components/Overlay",
+    files: "**/*.stories.?(ts|tsx|js|jsx)",
+    importPathMatcher:
+      "^\\.[\\\\/](?:app\\/component-library\\/components\\/Overlay(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.(?:ts|tsx|js|jsx)?)$",
+  },
 ];
 
 import "@storybook/addon-ondevice-controls/register";
@@ -50,6 +57,7 @@ const getStories = () => {
   return {
     "./app/component-library/components/Cards/Card/Card.stories.tsx": require("../app/component-library/components/Cards/Card/Card.stories.tsx"),
     "./app/component-library/components/Banners/Banner/variants/BannerAlert/BannerAlert.stories.tsx": require("../app/component-library/components/Banners/Banner/variants/BannerAlert/BannerAlert.stories.tsx"),
+    "./app/component-library/components/Overlay/Overlay.stories.tsx": require("../app/component-library/components/Overlay/Overlay.stories.tsx"),
   };
 };
 
diff --git a/app/component-library/components/Overlay/Overlay.stories.tsx b/app/component-library/components/Overlay/Overlay.stories.tsx
index 573abead2d3..7ade6fff2ec 100644
--- a/app/component-library/components/Overlay/Overlay.stories.tsx
+++ b/app/component-library/components/Overlay/Overlay.stories.tsx
@@ -1,33 +1,24 @@
-/* eslint-disable no-console, react-native/no-inline-styles */
-
-// Third party dependencies.
-import React from 'react';
-import { color } from '@storybook/addon-knobs';
-import { storiesOf } from '@storybook/react-native';
-
+/* eslint-disable no-console */
 // External dependencies.
 import { mockTheme } from '../../../util/theme';
-import { storybookPropsGroupID } from '../../constants/storybook.constants';
 
 // Internal dependencies.
-import Overlay from './Overlay';
-import { OverlayProps } from './Overlay.types';
-
-export const getOverlayStoryProps = (): OverlayProps => {
-  const colorSelector = color(
-    'color',
-    mockTheme.colors.overlay.default,
-    storybookPropsGroupID,
-  );
+import { default as OverlayComponent } from './Overlay';
+
+const OverlayMeta = {
+  title: 'Component Library / Overlay',
+  component: OverlayComponent,
+  argTypes: {
+    color: {
+      control: { type: 'color' },
+      defaultValue: mockTheme.colors.overlay.default,
+    },
+  },
+};
+export default OverlayMeta;
 
-  return {
-    color: colorSelector,
+export const Overlay = {
+  args: {
     onPress: () => console.log("I'm clicked!"),
-  };
+  },
 };
-
-const OverlayStory = () => <Overlay {...getOverlayStoryProps()} />;
-
-storiesOf('Component Library / Overlay', module).add('Overlay', OverlayStory);
-
-export default OverlayStory;

From b281de2ee695fdfb5e1f6389827561f52b7ae07e Mon Sep 17 00:00:00 2001
From: Brian Nguyen <brianacnguyen@gmail.com>
Date: Wed, 25 Oct 2023 19:30:59 +0200
Subject: [PATCH 2/2] Updated render method

---
 .../components/Overlay/Overlay.stories.tsx             | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/app/component-library/components/Overlay/Overlay.stories.tsx b/app/component-library/components/Overlay/Overlay.stories.tsx
index 7ade6fff2ec..88ffd38ca61 100644
--- a/app/component-library/components/Overlay/Overlay.stories.tsx
+++ b/app/component-library/components/Overlay/Overlay.stories.tsx
@@ -1,4 +1,8 @@
+/* eslint-disable react/display-name */
 /* eslint-disable no-console */
+// Third party dependencies.
+import React from 'react';
+
 // External dependencies.
 import { mockTheme } from '../../../util/theme';
 
@@ -18,7 +22,7 @@ const OverlayMeta = {
 export default OverlayMeta;
 
 export const Overlay = {
-  args: {
-    onPress: () => console.log("I'm clicked!"),
-  },
+  render: (args: any) => (
+    <OverlayComponent {...args} onPress={() => console.log("I'm clicked!")} />
+  ),
 };