refactor: Convert Form stories

.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)',
     '../app/component-library/components/List/**/*.stories.?(ts|tsx|js|jsx)',
     '../app/component-library/components/Texts/**/*.stories.?(ts|tsx|js|jsx)',
     '../app/component-library/components/Overlay/**/*.stories.?(ts|tsx|js|jsx)',

.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)?)$",
+  },
   {
     titlePrefix: "",
     directory: "./app/component-library/components/List",
@@ -85,6 +92,11 @@ 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/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"),
     "./app/component-library/components/List/ListItem/ListItem.stories.tsx": require("../app/component-library/components/List/ListItem/ListItem.stories.tsx"),
     "./app/component-library/components/Texts/Text/Text.stories.tsx": require("../app/component-library/components/Texts/Text/Text.stories.tsx"),
     "./app/component-library/components/Texts/TextWithPrefixIcon/TextWithPrefixIcon.stories.tsx": require("../app/component-library/components/Texts/TextWithPrefixIcon/TextWithPrefixIcon.stories.tsx"),

app/component-library/components/Form/HelpText/HelpText.constants.ts

@@ -25,8 +25,8 @@ 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_TEXT = 'Sample HelpText text';
+export const SAMPLE_HELPTEXT_PROPS: HelpTextProps = {
   severity: DEFAULT_HELPTEXT_SEVERITY,
   children: SAMPLE_HELPTEXT_TEXT,
 };

app/component-library/components/Form/HelpText/HelpText.stories.tsx

@@ -1,42 +1,27 @@
-/* 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: HelpTextSeverity,
+      control: {
+        type: 'select',
+      },
+      defaultValue: SAMPLE_HELPTEXT_PROPS.severity,
+    },
+    children: {
+      control: {
+        type: 'text',
+      },
+      defaultValue: SAMPLE_HELPTEXT_PROPS.children,
+    },
+  },
 };
+export default HelpTextMeta;
 
-const HelpTextStory = () => <HelpText {...getHelpTextStoryProps()} />;
-
-storiesOf('Component Library / Form', module).add('HelpText', HelpTextStory);
-
-export default HelpTextStory;
+export const HelpText = {};

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>
 `;

app/component-library/components/Form/Label/Label.stories.tsx

@@ -1,27 +1,19 @@
-/* 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,
+  argTypes: {
+    children: {
+      control: {
+        type: 'text',
+      },
+      defaultValue: SAMPLE_LABEL_TEXT,
+    },
+  },
 };
+export default LabelMeta;
 
-const LabelStory = () => <Label {...getLabelStoryProps()} />;
-
-storiesOf('Component Library / Form', module).add('Label', LabelStory);
-
-export default LabelStory;
+export const Label = {};

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',
 };

app/component-library/components/Form/TextField/TextField.stories.tsx

@@ -1,37 +1,51 @@
-/* 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: TextFieldSize,
+      control: {
+        type: 'select',
+      },
+      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 = {
+  render: (
+    args: JSX.IntrinsicAttributes &
+      TextFieldProps & { children?: React.ReactNode },
+  ) => (
+    <TextFieldComponent
+      {...args}
+      startAccessory={SAMPLE_TEXTFIELD_PROPS.startAccessory}
+      endAccessory={SAMPLE_TEXTFIELD_PROPS.endAccessory}
+    />
+  ),
 };
-
-const TextFieldStory = () => <TextField {...getTextFieldStoryProps()} />;
-
-storiesOf('Component Library / Form', module).add('TextField', TextFieldStory);
-
-export default TextFieldStory;

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>

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 = {};

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,

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',
 };