From aef3ee9147846515b6487ac351ee4a374022917c Mon Sep 17 00:00:00 2001
From: Brian Nguyen <brianacnguyen@gmail.com>
Date: Tue, 26 Sep 2023 13:57:45 -0700
Subject: [PATCH 1/5] Initial Form conversion

---
 .storybook/main.js                            |  1 +
 .storybook/storybook.requires.js              | 11 +++
 .../Form/HelpText/HelpText.constants.ts       |  2 +-
 .../Form/HelpText/HelpText.stories.tsx        | 60 ++++++----------
 .../components/Form/Label/Label.stories.tsx   | 32 +++------
 .../Form/TextField/TextField.stories.tsx      | 68 ++++++++++---------
 .../components/Form/TextField/TextField.tsx   |  2 +-
 .../Form/TextField/foundation/Input/Input.tsx |  4 +-
 .../TextFieldSearch.stories.tsx               | 52 +++++++-------
 9 files changed, 110 insertions(+), 122 deletions(-)

diff --git a/.storybook/main.js b/.storybook/main.js
index 84117eacb0e..8db13114a66 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/Form/**/*.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..0a700ba32d6 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/Form",
+    files: "**/*.stories.?(ts|tsx|js|jsx)",
+    importPathMatcher:
+      "^\\.[\\\\/](?:app\\/component-library\\/components\\/Form(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.(?:ts|tsx|js|jsx)?)$",
+  },
 ];
 
 import "@storybook/addon-ondevice-controls/register";
@@ -50,6 +57,10 @@ 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/Form/HelpText/HelpText.stories.tsx": require("../app/component-library/components/Form/HelpText/HelpText.stories.tsx"),
+    "./app/component-library/components/Form/Label/Label.stories.tsx": require("../app/component-library/components/Form/Label/Label.stories.tsx"),
+    "./app/component-library/components/Form/TextField/TextField.stories.tsx": require("../app/component-library/components/Form/TextField/TextField.stories.tsx"),
+    "./app/component-library/components/Form/TextFieldSearch/TextFieldSearch.stories.tsx": require("../app/component-library/components/Form/TextFieldSearch/TextFieldSearch.stories.tsx"),
   };
 };
 
diff --git a/app/component-library/components/Form/HelpText/HelpText.constants.ts b/app/component-library/components/Form/HelpText/HelpText.constants.ts
index bcf93b5c456..23240c1f140 100644
--- a/app/component-library/components/Form/HelpText/HelpText.constants.ts
+++ b/app/component-library/components/Form/HelpText/HelpText.constants.ts
@@ -26,7 +26,7 @@ export const TEXT_COLOR_BY_HELPTEXT_SEVERITY: TextColorByHelpTextSeverity = {
 
 // Sample consts
 export const SAMPLE_HELPTEXT_TEXT = 'Sample HelpText Text';
-export const SAMPLE_LIST_ITEM_PROPS: HelpTextProps = {
+export const SAMPLE_HELPTEXT_PROPS: HelpTextProps = {
   severity: DEFAULT_HELPTEXT_SEVERITY,
   children: SAMPLE_HELPTEXT_TEXT,
 };
diff --git a/app/component-library/components/Form/HelpText/HelpText.stories.tsx b/app/component-library/components/Form/HelpText/HelpText.stories.tsx
index 75296616f93..63a87780b7c 100644
--- a/app/component-library/components/Form/HelpText/HelpText.stories.tsx
+++ b/app/component-library/components/Form/HelpText/HelpText.stories.tsx
@@ -1,42 +1,24 @@
-/* eslint-disable no-console */
-
-// Third party dependencies.
-import React from 'react';
-import { storiesOf } from '@storybook/react-native';
-import { select, text } from '@storybook/addon-knobs';
-
-// External dependencies.
-import { storybookPropsGroupID } from '../../../constants/storybook.constants';
-
 // Internal dependencies.
-import HelpText from './HelpText';
-import { HelpTextProps, HelpTextSeverity } from './HelpText.types';
-import {
-  DEFAULT_HELPTEXT_SEVERITY,
-  SAMPLE_HELPTEXT_TEXT,
-} from './HelpText.constants';
-
-export const getHelpTextStoryProps = (): HelpTextProps => {
-  const helpTextText = text(
-    'HelpText',
-    SAMPLE_HELPTEXT_TEXT,
-    storybookPropsGroupID,
-  );
-
-  const severitySelector = select(
-    'severity',
-    HelpTextSeverity,
-    DEFAULT_HELPTEXT_SEVERITY,
-    storybookPropsGroupID,
-  );
-  return {
-    children: helpTextText,
-    severity: severitySelector,
-  };
+import { default as HelpTextComponent } from './HelpText';
+import { SAMPLE_HELPTEXT_PROPS } from './HelpText.constants';
+import { HelpTextSeverity } from './HelpText.types';
+
+const HelpTextMeta = {
+  title: 'Component Library / Form',
+  component: HelpTextComponent,
+  argTypes: {
+    severity: {
+      options: Object.values(HelpTextSeverity),
+      mapping: Object.values(HelpTextSeverity),
+      control: {
+        type: 'select',
+        labels: Object.keys(HelpTextSeverity),
+      },
+    },
+  },
 };
+export default HelpTextMeta;
 
-const HelpTextStory = () => <HelpText {...getHelpTextStoryProps()} />;
-
-storiesOf('Component Library / Form', module).add('HelpText', HelpTextStory);
-
-export default HelpTextStory;
+export const HelpText = {
+  args: SAMPLE_HELPTEXT_PROPS,
+};
diff --git a/app/component-library/components/Form/Label/Label.stories.tsx b/app/component-library/components/Form/Label/Label.stories.tsx
index 7df9fed7359..beb422a1f49 100644
--- a/app/component-library/components/Form/Label/Label.stories.tsx
+++ b/app/component-library/components/Form/Label/Label.stories.tsx
@@ -1,27 +1,15 @@
-/* eslint-disable no-console */
-
-// Third party dependencies.
-import React from 'react';
-import { storiesOf } from '@storybook/react-native';
-import { text } from '@storybook/addon-knobs';
-
-// External dependencies.
-import { storybookPropsGroupID } from '../../../constants/storybook.constants';
-
 // Internal dependencies.
-import Label from './Label';
-import { LabelProps } from './Label.types';
+import { default as LabelComponent } from './Label';
 import { SAMPLE_LABEL_TEXT } from './Label.constants';
 
-export const getLabelStoryProps = (): LabelProps => {
-  const labelText = text('label', SAMPLE_LABEL_TEXT, storybookPropsGroupID);
-  return {
-    children: labelText,
-  };
+const LabelMeta = {
+  title: 'Component Library / Form',
+  component: LabelComponent,
 };
+export default LabelMeta;
 
-const LabelStory = () => <Label {...getLabelStoryProps()} />;
-
-storiesOf('Component Library / Form', module).add('Label', LabelStory);
-
-export default LabelStory;
+export const Label = {
+  args: {
+    children: SAMPLE_LABEL_TEXT,
+  },
+};
diff --git a/app/component-library/components/Form/TextField/TextField.stories.tsx b/app/component-library/components/Form/TextField/TextField.stories.tsx
index 1f3dba2a1c1..faed208bb0a 100644
--- a/app/component-library/components/Form/TextField/TextField.stories.tsx
+++ b/app/component-library/components/Form/TextField/TextField.stories.tsx
@@ -1,37 +1,43 @@
-/* eslint-disable no-console */
-
-// Third party dependencies.
+/* eslint-disable react/display-name */
 import React from 'react';
-import { storiesOf } from '@storybook/react-native';
-import { boolean, select } from '@storybook/addon-knobs';
-
-// External dependencies.
-import { storybookPropsGroupID } from '../../../constants/storybook.constants';
 
 // Internal dependencies.
-import TextField from './TextField';
+import { default as TextFieldComponent } from './TextField';
+import { SAMPLE_TEXTFIELD_PROPS } from './TextField.constants';
 import { TextFieldProps, TextFieldSize } from './TextField.types';
-import { DEFAULT_TEXTFIELD_SIZE } from './TextField.constants';
 
-export const getTextFieldStoryProps = (): TextFieldProps => {
-  const sizeSelector = select(
-    'size',
-    TextFieldSize,
-    DEFAULT_TEXTFIELD_SIZE,
-    storybookPropsGroupID,
-  );
-  const isError = boolean('isError', false, storybookPropsGroupID);
-  const isDisabled = boolean('isDisabled', false, storybookPropsGroupID);
-
-  return {
-    size: sizeSelector,
-    isError,
-    isDisabled,
-  };
+const TextFieldMeta = {
+  title: 'Component Library / Form',
+  component: TextFieldComponent,
+  argTypes: {
+    size: {
+      options: Object.values(TextFieldSize),
+      mapping: Object.values(TextFieldSize),
+      control: {
+        type: 'select',
+        labels: Object.keys(TextFieldSize),
+      },
+    },
+    isError: {
+      control: { type: 'boolean' },
+    },
+    isDisabled: {
+      control: { type: 'boolean' },
+    },
+  },
+};
+export default TextFieldMeta;
+
+export const TextField = {
+  args: SAMPLE_TEXTFIELD_PROPS,
+  render: (
+    args: JSX.IntrinsicAttributes &
+      TextFieldProps & { children?: React.ReactNode },
+  ) => (
+    <TextFieldComponent
+      {...args}
+      startAccessory={args.startAccessory}
+      endAccessory={args.endAccessory}
+    />
+  ),
 };
-
-const TextFieldStory = () => <TextField {...getTextFieldStoryProps()} />;
-
-storiesOf('Component Library / Form', module).add('TextField', TextFieldStory);
-
-export default TextFieldStory;
diff --git a/app/component-library/components/Form/TextField/TextField.tsx b/app/component-library/components/Form/TextField/TextField.tsx
index 072eec9e093..a22e27d1601 100644
--- a/app/component-library/components/Form/TextField/TextField.tsx
+++ b/app/component-library/components/Form/TextField/TextField.tsx
@@ -77,13 +77,13 @@ const TextField: React.FC<TextFieldProps> = ({
           { inputElement }
         ) : (
           <Input
-            isStateStylesDisabled
             textVariant={TOKEN_TEXTFIELD_INPUT_TEXT_VARIANT}
             isDisabled={isDisabled}
             autoFocus={autoFocus}
             onBlur={onBlurHandler}
             onFocus={onFocusHandler}
             {...props}
+            isStateStylesDisabled
           />
         )}
       </View>
diff --git a/app/component-library/components/Form/TextField/foundation/Input/Input.tsx b/app/component-library/components/Form/TextField/foundation/Input/Input.tsx
index 61c4629e154..f8ca6222167 100644
--- a/app/component-library/components/Form/TextField/foundation/Input/Input.tsx
+++ b/app/component-library/components/Form/TextField/foundation/Input/Input.tsx
@@ -16,7 +16,7 @@ import { INPUT_TEST_ID } from './Input.constants';
 const Input: React.FC<InputProps> = ({
   style,
   textVariant = DEFAULT_TEXT_VARIANT,
-  isStateStylesDisabled = false,
+  isStateStylesDisabled,
   isDisabled = false,
   isReadonly = false,
   onBlur,
@@ -25,7 +25,7 @@ const Input: React.FC<InputProps> = ({
   ...props
 }) => {
   const [isFocused, setIsFocused] = useState(autoFocus);
-
+  console.log(isStateStylesDisabled);
   const { styles } = useStyles(styleSheet, {
     style,
     textVariant,
diff --git a/app/component-library/components/Form/TextFieldSearch/TextFieldSearch.stories.tsx b/app/component-library/components/Form/TextFieldSearch/TextFieldSearch.stories.tsx
index 5ad7c610031..d80b1a266f1 100644
--- a/app/component-library/components/Form/TextFieldSearch/TextFieldSearch.stories.tsx
+++ b/app/component-library/components/Form/TextFieldSearch/TextFieldSearch.stories.tsx
@@ -1,34 +1,34 @@
-/* eslint-disable no-console */
+// /* eslint-disable no-console */
 
-// Third party dependencies.
-import React from 'react';
-import { storiesOf } from '@storybook/react-native';
-import { boolean } from '@storybook/addon-knobs';
+// // Third party dependencies.
+// import React from 'react';
+// import { storiesOf } from '@storybook/react-native';
+// import { boolean } from '@storybook/addon-knobs';
 
-// External dependencies.
-import { storybookPropsGroupID } from '../../../constants/storybook.constants';
+// // External dependencies.
+// import { storybookPropsGroupID } from '../../../constants/storybook.constants';
 
-// Internal dependencies.
-import TextFieldSearch from './TextFieldSearch';
-import { TextFieldSearchProps } from './TextFieldSearch.types';
+// // Internal dependencies.
+// import TextFieldSearch from './TextFieldSearch';
+// import { TextFieldSearchProps } from './TextFieldSearch.types';
 
-export const getTextFieldSearchStoryProps = (): TextFieldSearchProps => {
-  const showClearButton = boolean(
-    'showClearButton',
-    false,
-    storybookPropsGroupID,
-  );
+// export const getTextFieldSearchStoryProps = (): TextFieldSearchProps => {
+//   const showClearButton = boolean(
+//     'showClearButton',
+//     false,
+//     storybookPropsGroupID,
+//   );
 
-  return { showClearButton };
-};
+//   return { showClearButton };
+// };
 
-const TextFieldSearchStory = () => (
-  <TextFieldSearch {...getTextFieldSearchStoryProps()} />
-);
+// const TextFieldSearchStory = () => (
+//   <TextFieldSearch {...getTextFieldSearchStoryProps()} />
+// );
 
-storiesOf('Component Library / Form', module).add(
-  'TextFieldSearch',
-  TextFieldSearchStory,
-);
+// storiesOf('Component Library / Form', module).add(
+//   'TextFieldSearch',
+//   TextFieldSearchStory,
+// );
 
-export default TextFieldSearchStory;
+// export default TextFieldSearchStory;

From 09d5a1edb38cc1d9df8ded1d063ab5694fca732f Mon Sep 17 00:00:00 2001
From: Brian Nguyen <brianacnguyen@gmail.com>
Date: Mon, 2 Oct 2023 08:52:36 -0700
Subject: [PATCH 2/5] Updated Form Stories

---
 .storybook/storybook.requires.js              |  1 +
 .../Form/HelpText/HelpText.stories.tsx        | 15 ++--
 .../components/Form/Label/Label.stories.tsx   | 14 ++--
 .../Form/TextField/TextField.constants.tsx    |  5 +-
 .../Form/TextField/TextField.stories.tsx      | 20 +++--
 .../foundation/Input/Input.stories.tsx        | 35 ++++++++
 .../TextFieldSearch.constants.ts              |  6 ++
 .../TextFieldSearch.stories.tsx               | 80 +++++++++++--------
 8 files changed, 123 insertions(+), 53 deletions(-)
 create mode 100644 app/component-library/components/Form/TextField/foundation/Input/Input.stories.tsx

diff --git a/.storybook/storybook.requires.js b/.storybook/storybook.requires.js
index 0a700ba32d6..332a09f751f 100644
--- a/.storybook/storybook.requires.js
+++ b/.storybook/storybook.requires.js
@@ -59,6 +59,7 @@ const getStories = () => {
     "./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/Form/HelpText/HelpText.stories.tsx": require("../app/component-library/components/Form/HelpText/HelpText.stories.tsx"),
     "./app/component-library/components/Form/Label/Label.stories.tsx": require("../app/component-library/components/Form/Label/Label.stories.tsx"),
+    "./app/component-library/components/Form/TextField/foundation/Input/Input.stories.tsx": require("../app/component-library/components/Form/TextField/foundation/Input/Input.stories.tsx"),
     "./app/component-library/components/Form/TextField/TextField.stories.tsx": require("../app/component-library/components/Form/TextField/TextField.stories.tsx"),
     "./app/component-library/components/Form/TextFieldSearch/TextFieldSearch.stories.tsx": require("../app/component-library/components/Form/TextFieldSearch/TextFieldSearch.stories.tsx"),
   };
diff --git a/app/component-library/components/Form/HelpText/HelpText.stories.tsx b/app/component-library/components/Form/HelpText/HelpText.stories.tsx
index 63a87780b7c..53ffd237a87 100644
--- a/app/component-library/components/Form/HelpText/HelpText.stories.tsx
+++ b/app/component-library/components/Form/HelpText/HelpText.stories.tsx
@@ -8,17 +8,20 @@ const HelpTextMeta = {
   component: HelpTextComponent,
   argTypes: {
     severity: {
-      options: Object.values(HelpTextSeverity),
-      mapping: Object.values(HelpTextSeverity),
+      options: HelpTextSeverity,
       control: {
         type: 'select',
-        labels: Object.keys(HelpTextSeverity),
       },
+      defaultValue: SAMPLE_HELPTEXT_PROPS.severity,
+    },
+    children: {
+      control: {
+        type: 'text',
+      },
+      defaultValue: SAMPLE_HELPTEXT_PROPS.children,
     },
   },
 };
 export default HelpTextMeta;
 
-export const HelpText = {
-  args: SAMPLE_HELPTEXT_PROPS,
-};
+export const HelpText = {};
diff --git a/app/component-library/components/Form/Label/Label.stories.tsx b/app/component-library/components/Form/Label/Label.stories.tsx
index beb422a1f49..14d38b91f54 100644
--- a/app/component-library/components/Form/Label/Label.stories.tsx
+++ b/app/component-library/components/Form/Label/Label.stories.tsx
@@ -5,11 +5,15 @@ import { SAMPLE_LABEL_TEXT } from './Label.constants';
 const LabelMeta = {
   title: 'Component Library / Form',
   component: LabelComponent,
+  argTypes: {
+    children: {
+      control: {
+        type: 'text',
+      },
+      defaultValue: SAMPLE_LABEL_TEXT,
+    },
+  },
 };
 export default LabelMeta;
 
-export const Label = {
-  args: {
-    children: SAMPLE_LABEL_TEXT,
-  },
-};
+export const Label = {};
diff --git a/app/component-library/components/Form/TextField/TextField.constants.tsx b/app/component-library/components/Form/TextField/TextField.constants.tsx
index f2cde2df151..831f862b2fc 100644
--- a/app/component-library/components/Form/TextField/TextField.constants.tsx
+++ b/app/component-library/components/Form/TextField/TextField.constants.tsx
@@ -7,7 +7,6 @@ import { TextVariant } from '../../Texts/Text';
 import { SAMPLE_ICON_PROPS } from '../../Icons/Icon/Icon.constants';
 import Icon from '../../Icons/Icon';
 import HelpText from '../HelpText';
-import { SAMPLE_INPUT_PROPS } from './foundation/Input/Input.constants';
 
 // Internal dependencies.
 import { TextFieldSize, TextFieldProps } from './TextField.types';
@@ -29,5 +28,7 @@ export const SAMPLE_TEXTFIELD_PROPS: TextFieldProps = {
   endAccessory: <HelpText>SAMPLE</HelpText>,
   size: DEFAULT_TEXTFIELD_SIZE,
   isError: false,
-  ...SAMPLE_INPUT_PROPS,
+  isDisabled: false,
+  isReadonly: false,
+  placeholder: 'Sample Placeholder',
 };
diff --git a/app/component-library/components/Form/TextField/TextField.stories.tsx b/app/component-library/components/Form/TextField/TextField.stories.tsx
index faed208bb0a..e0c0aa0fedd 100644
--- a/app/component-library/components/Form/TextField/TextField.stories.tsx
+++ b/app/component-library/components/Form/TextField/TextField.stories.tsx
@@ -11,33 +11,41 @@ const TextFieldMeta = {
   component: TextFieldComponent,
   argTypes: {
     size: {
-      options: Object.values(TextFieldSize),
-      mapping: Object.values(TextFieldSize),
+      options: TextFieldSize,
       control: {
         type: 'select',
-        labels: Object.keys(TextFieldSize),
       },
+      defaultValue: SAMPLE_TEXTFIELD_PROPS.size,
     },
     isError: {
       control: { type: 'boolean' },
+      defaultValue: SAMPLE_TEXTFIELD_PROPS.isError,
     },
     isDisabled: {
       control: { type: 'boolean' },
+      defaultValue: SAMPLE_TEXTFIELD_PROPS.isDisabled,
+    },
+    isReadonly: {
+      control: { type: 'boolean' },
+      defaultValue: SAMPLE_TEXTFIELD_PROPS.isReadonly,
+    },
+    placeholder: {
+      control: { type: 'text' },
+      defaultValue: SAMPLE_TEXTFIELD_PROPS.placeholder,
     },
   },
 };
 export default TextFieldMeta;
 
 export const TextField = {
-  args: SAMPLE_TEXTFIELD_PROPS,
   render: (
     args: JSX.IntrinsicAttributes &
       TextFieldProps & { children?: React.ReactNode },
   ) => (
     <TextFieldComponent
       {...args}
-      startAccessory={args.startAccessory}
-      endAccessory={args.endAccessory}
+      startAccessory={SAMPLE_TEXTFIELD_PROPS.startAccessory}
+      endAccessory={SAMPLE_TEXTFIELD_PROPS.endAccessory}
     />
   ),
 };
diff --git a/app/component-library/components/Form/TextField/foundation/Input/Input.stories.tsx b/app/component-library/components/Form/TextField/foundation/Input/Input.stories.tsx
new file mode 100644
index 00000000000..ac5aca6e451
--- /dev/null
+++ b/app/component-library/components/Form/TextField/foundation/Input/Input.stories.tsx
@@ -0,0 +1,35 @@
+// External dependencies.
+import { TextVariant } from '../../../../Texts/Text';
+
+// Internal dependencies.
+import { default as InputComponent } from './Input';
+import { SAMPLE_INPUT_PROPS } from './Input.constants';
+
+const InputMeta = {
+  title: 'Component Library / Form',
+  component: InputComponent,
+  argTypes: {
+    textVariant: {
+      options: TextVariant,
+      control: {
+        type: 'select',
+      },
+      defaultValue: SAMPLE_INPUT_PROPS.textVariant,
+    },
+    isDisabled: {
+      control: { type: 'boolean' },
+      defaultValue: SAMPLE_INPUT_PROPS.isDisabled,
+    },
+    isReadonly: {
+      control: { type: 'boolean' },
+      defaultValue: SAMPLE_INPUT_PROPS.isReadonly,
+    },
+    placeholder: {
+      control: { type: 'text' },
+      defaultValue: SAMPLE_INPUT_PROPS.placeholder,
+    },
+  },
+};
+export default InputMeta;
+
+export const Input = {};
diff --git a/app/component-library/components/Form/TextFieldSearch/TextFieldSearch.constants.ts b/app/component-library/components/Form/TextFieldSearch/TextFieldSearch.constants.ts
index 39cb487a71f..4ade80d6d1d 100644
--- a/app/component-library/components/Form/TextFieldSearch/TextFieldSearch.constants.ts
+++ b/app/component-library/components/Form/TextFieldSearch/TextFieldSearch.constants.ts
@@ -3,6 +3,7 @@
 // External dependencies.
 import { IconName, IconSize } from '../../Icons/Icon';
 import { ButtonIconSizes } from '../../Buttons/ButtonIcon';
+import { DEFAULT_TEXTFIELD_SIZE } from '../TextField/TextField.constants';
 
 // Internal dependencies.
 import { TextFieldSearchProps } from './TextFieldSearch.types';
@@ -22,4 +23,9 @@ export const SAMPLE_TEXTFIELDSEARCH_PROPS: TextFieldSearchProps = {
   onPressClearButton: () => {
     console.log('clicked');
   },
+  size: DEFAULT_TEXTFIELD_SIZE,
+  isError: false,
+  isDisabled: false,
+  isReadonly: false,
+  placeholder: 'Sample Placeholder',
 };
diff --git a/app/component-library/components/Form/TextFieldSearch/TextFieldSearch.stories.tsx b/app/component-library/components/Form/TextFieldSearch/TextFieldSearch.stories.tsx
index d80b1a266f1..5f5ff1ddb27 100644
--- a/app/component-library/components/Form/TextFieldSearch/TextFieldSearch.stories.tsx
+++ b/app/component-library/components/Form/TextFieldSearch/TextFieldSearch.stories.tsx
@@ -1,34 +1,46 @@
-// /* eslint-disable no-console */
-
-// // Third party dependencies.
-// import React from 'react';
-// import { storiesOf } from '@storybook/react-native';
-// import { boolean } from '@storybook/addon-knobs';
-
-// // External dependencies.
-// import { storybookPropsGroupID } from '../../../constants/storybook.constants';
-
-// // Internal dependencies.
-// import TextFieldSearch from './TextFieldSearch';
-// import { TextFieldSearchProps } from './TextFieldSearch.types';
-
-// export const getTextFieldSearchStoryProps = (): TextFieldSearchProps => {
-//   const showClearButton = boolean(
-//     'showClearButton',
-//     false,
-//     storybookPropsGroupID,
-//   );
-
-//   return { showClearButton };
-// };
-
-// const TextFieldSearchStory = () => (
-//   <TextFieldSearch {...getTextFieldSearchStoryProps()} />
-// );
-
-// storiesOf('Component Library / Form', module).add(
-//   'TextFieldSearch',
-//   TextFieldSearchStory,
-// );
-
-// export default TextFieldSearchStory;
+/* eslint-disable react/display-name */
+import React from 'react';
+
+// External dependencies.
+import { TextFieldSize } from '../TextField/TextField.types';
+
+// Internal dependencies.
+import { default as TextFieldSearchComponent } from './TextFieldSearch';
+import { SAMPLE_TEXTFIELDSEARCH_PROPS } from './TextFieldSearch.constants';
+
+const TextFieldSearchMeta = {
+  title: 'Component Library / Form',
+  component: TextFieldSearchComponent,
+  argTypes: {
+    size: {
+      options: TextFieldSize,
+      control: {
+        type: 'select',
+      },
+      defaultValue: SAMPLE_TEXTFIELDSEARCH_PROPS.size,
+    },
+    isError: {
+      control: { type: 'boolean' },
+      defaultValue: SAMPLE_TEXTFIELDSEARCH_PROPS.isError,
+    },
+    isDisabled: {
+      control: { type: 'boolean' },
+      defaultValue: SAMPLE_TEXTFIELDSEARCH_PROPS.isDisabled,
+    },
+    isReadonly: {
+      control: { type: 'boolean' },
+      defaultValue: SAMPLE_TEXTFIELDSEARCH_PROPS.isReadonly,
+    },
+    placeholder: {
+      control: { type: 'text' },
+      defaultValue: SAMPLE_TEXTFIELDSEARCH_PROPS.placeholder,
+    },
+    showClearButton: {
+      control: { type: 'boolean' },
+      defaultValue: SAMPLE_TEXTFIELDSEARCH_PROPS.showClearButton,
+    },
+  },
+};
+export default TextFieldSearchMeta;
+
+export const TextFieldSearch = {};

From 464975084a5dd19f55c0afad90c682be78abec07 Mon Sep 17 00:00:00 2001
From: Brian Nguyen <brianacnguyen@gmail.com>
Date: Wed, 25 Oct 2023 21:11:09 +0200
Subject: [PATCH 3/5] Addressed comments

---
 .../components/Form/HelpText/HelpText.constants.ts              | 2 +-
 .../components/Form/TextField/foundation/Input/Input.tsx        | 2 +-
 .../Form/TextFieldSearch/TextFieldSearch.constants.ts           | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/app/component-library/components/Form/HelpText/HelpText.constants.ts b/app/component-library/components/Form/HelpText/HelpText.constants.ts
index 23240c1f140..82f898e92a0 100644
--- a/app/component-library/components/Form/HelpText/HelpText.constants.ts
+++ b/app/component-library/components/Form/HelpText/HelpText.constants.ts
@@ -25,7 +25,7 @@ export const TEXT_COLOR_BY_HELPTEXT_SEVERITY: TextColorByHelpTextSeverity = {
 };
 
 // Sample consts
-export const SAMPLE_HELPTEXT_TEXT = 'Sample HelpText Text';
+export const SAMPLE_HELPTEXT_TEXT = 'Sample HelpText text';
 export const SAMPLE_HELPTEXT_PROPS: HelpTextProps = {
   severity: DEFAULT_HELPTEXT_SEVERITY,
   children: SAMPLE_HELPTEXT_TEXT,
diff --git a/app/component-library/components/Form/TextField/foundation/Input/Input.tsx b/app/component-library/components/Form/TextField/foundation/Input/Input.tsx
index f8ca6222167..5adf9970365 100644
--- a/app/component-library/components/Form/TextField/foundation/Input/Input.tsx
+++ b/app/component-library/components/Form/TextField/foundation/Input/Input.tsx
@@ -25,7 +25,7 @@ const Input: React.FC<InputProps> = ({
   ...props
 }) => {
   const [isFocused, setIsFocused] = useState(autoFocus);
-  console.log(isStateStylesDisabled);
+
   const { styles } = useStyles(styleSheet, {
     style,
     textVariant,
diff --git a/app/component-library/components/Form/TextFieldSearch/TextFieldSearch.constants.ts b/app/component-library/components/Form/TextFieldSearch/TextFieldSearch.constants.ts
index 4ade80d6d1d..d2f49325319 100644
--- a/app/component-library/components/Form/TextFieldSearch/TextFieldSearch.constants.ts
+++ b/app/component-library/components/Form/TextFieldSearch/TextFieldSearch.constants.ts
@@ -27,5 +27,5 @@ export const SAMPLE_TEXTFIELDSEARCH_PROPS: TextFieldSearchProps = {
   isError: false,
   isDisabled: false,
   isReadonly: false,
-  placeholder: 'Sample Placeholder',
+  placeholder: 'Sample placeholder',
 };

From 56cb320b4db2056d4626463746f927c85837dc61 Mon Sep 17 00:00:00 2001
From: Brian Nguyen <brianacnguyen@gmail.com>
Date: Wed, 25 Oct 2023 21:20:54 +0200
Subject: [PATCH 4/5] Removed unused var

---
 .../components/Form/TextFieldSearch/TextFieldSearch.stories.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/app/component-library/components/Form/TextFieldSearch/TextFieldSearch.stories.tsx b/app/component-library/components/Form/TextFieldSearch/TextFieldSearch.stories.tsx
index 5f5ff1ddb27..74152135e1c 100644
--- a/app/component-library/components/Form/TextFieldSearch/TextFieldSearch.stories.tsx
+++ b/app/component-library/components/Form/TextFieldSearch/TextFieldSearch.stories.tsx
@@ -1,6 +1,4 @@
 /* eslint-disable react/display-name */
-import React from 'react';
-
 // External dependencies.
 import { TextFieldSize } from '../TextField/TextField.types';
 

From eb5e44600fc820d3eb52b577d9622e8b9617b385 Mon Sep 17 00:00:00 2001
From: Brian Nguyen <brianacnguyen@gmail.com>
Date: Wed, 25 Oct 2023 21:34:27 +0200
Subject: [PATCH 5/5] Updated snapshots

---
 .../Form/HelpText/__snapshots__/HelpText.test.tsx.snap          | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/component-library/components/Form/HelpText/__snapshots__/HelpText.test.tsx.snap b/app/component-library/components/Form/HelpText/__snapshots__/HelpText.test.tsx.snap
index ab78d97e28b..023e2a6b9a8 100644
--- a/app/component-library/components/Form/HelpText/__snapshots__/HelpText.test.tsx.snap
+++ b/app/component-library/components/Form/HelpText/__snapshots__/HelpText.test.tsx.snap
@@ -6,6 +6,6 @@ exports[`HelpText should render default settings correctly 1`] = `
   testID="helptext"
   variant="sBodySM"
 >
-  Sample HelpText Text
+  Sample HelpText text
 </Text>
 `;