refactor: Convert Picker stories to csf format

.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/Pickers/**/*.stories.?(ts|tsx|js|jsx)',
     '../app/component-library/components/Cells/**/*.stories.?(ts|tsx|js|jsx)',
     '../app/component-library/components/HeaderBase/**/*.stories.?(ts|tsx|js|jsx)',
     '../app/component-library/components/Form/**/*.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/Pickers",
+    files: "**/*.stories.?(ts|tsx|js|jsx)",
+    importPathMatcher:
+      "^\\.[\\\\/](?:app\\/component-library\\/components\\/Pickers(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.(?:ts|tsx|js|jsx)?)$",
+  },
   {
     titlePrefix: "",
     directory: "./app/component-library/components/Cells",
@@ -106,6 +113,8 @@ 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/Pickers/PickerAccount/PickerAccount.stories.tsx": require("../app/component-library/components/Pickers/PickerAccount/PickerAccount.stories.tsx"),
+    "./app/component-library/components/Pickers/PickerNetwork/PickerNetwork.stories.tsx": require("../app/component-library/components/Pickers/PickerNetwork/PickerNetwork.stories.tsx"),
     "./app/component-library/components/Cells/Cell/Cell.stories.tsx": require("../app/component-library/components/Cells/Cell/Cell.stories.tsx"),
     "./app/component-library/components/Cells/Cell/variants/CellDisplay/CellDisplay.stories.tsx": require("../app/component-library/components/Cells/Cell/variants/CellDisplay/CellDisplay.stories.tsx"),
     "./app/component-library/components/Cells/Cell/variants/CellMultiSelect/CellMultiSelect.stories.tsx": require("../app/component-library/components/Cells/Cell/variants/CellMultiSelect/CellMultiSelect.stories.tsx"),

app/component-library/components/Pickers/PickerAccount/PickerAccount.constants.ts

@@ -1,5 +1,16 @@
+/* eslint-disable no-console */
 /* eslint-disable import/prefer-default-export */
+// External dependencies.
+import { AvatarAccountType } from '../../Avatars/Avatar/variants/AvatarAccount';
 
-export const TEST_ACCOUNT_ADDRESS =
-  '0x2990079bcdEe240329a520d2444386FC119da21a';
-export const TEST_ACCOUNT_NAME = 'Orangefox.eth';
+// Internal dependencies.
+import { PickerAccountProps } from './PickerAccount.types';
+
+// Sample consts
+export const SAMPLE_PICKERACCOUNT_PROPS: PickerAccountProps = {
+  accountAddress: '0x2990079bcdEe240329a520d2444386FC119da21a',
+  accountAvatarType: AvatarAccountType.JazzIcon,
+  accountName: 'Orangefox.eth',
+  onPress: () => console.log('PickerAccount pressed'),
+  showAddress: false,
+};

app/component-library/components/Pickers/PickerAccount/PickerAccount.stories.tsx

@@ -1,25 +1,36 @@
-/* eslint-disable no-console */
-
-// Third party dependencies.
-import React from 'react';
-import { Alert } from 'react-native';
-import { storiesOf } from '@storybook/react-native';
-
+/* eslint-disable react/display-name */
 // External dependencies.
 import { AvatarAccountType } from '../../Avatars/Avatar/variants/AvatarAccount';
 
 // Internal dependencies.
-import PickerAccount from './PickerAccount';
-import {
-  TEST_ACCOUNT_ADDRESS,
-  TEST_ACCOUNT_NAME,
-} from './PickerAccount.constants';
+import { default as PickerAccountComponent } from './PickerAccount';
+import { SAMPLE_PICKERACCOUNT_PROPS } from './PickerAccount.constants';
+
+const PickerAccountMeta = {
+  title: 'Component Library / Pickers',
+  component: PickerAccountComponent,
+  argTypes: {
+    accountAddress: {
+      control: { type: 'text' },
+      defaultValue: SAMPLE_PICKERACCOUNT_PROPS.accountAddress,
+    },
+    accountAvatarType: {
+      options: AvatarAccountType,
+      control: {
+        type: 'select',
+      },
+      defaultValue: SAMPLE_PICKERACCOUNT_PROPS.accountAvatarType,
+    },
+    accountName: {
+      control: { type: 'text' },
+      defaultValue: SAMPLE_PICKERACCOUNT_PROPS.accountName,
+    },
+    showAddress: {
+      control: { type: 'boolean' },
+      defaultValue: SAMPLE_PICKERACCOUNT_PROPS.showAddress,
+    },
+  },
+};
+export default PickerAccountMeta;
 
-storiesOf('Component Library / PickerAccount', module).add('Default', () => (
-  <PickerAccount
-    accountAddress={TEST_ACCOUNT_ADDRESS}
-    accountName={TEST_ACCOUNT_NAME}
-    accountAvatarType={AvatarAccountType.JazzIcon}
-    onPress={() => Alert.alert('Pressed account picker!')}
-  />
-));
+export const PickerAccount = {};

app/component-library/components/Pickers/PickerAccount/PickerAccount.test.tsx

@@ -7,17 +7,14 @@ import { AvatarAccountType } from '../../Avatars/Avatar/variants/AvatarAccount';
 
 // Internal dependencies.
 import PickerAccount from './PickerAccount';
-import {
-  TEST_ACCOUNT_ADDRESS,
-  TEST_ACCOUNT_NAME,
-} from './PickerAccount.constants';
+import { SAMPLE_PICKERACCOUNT_PROPS } from './PickerAccount.constants';
 
 describe('PickerAccount', () => {
   it('should render correctly', () => {
     const wrapper = shallow(
       <PickerAccount
-        accountAddress={TEST_ACCOUNT_ADDRESS}
-        accountName={TEST_ACCOUNT_NAME}
+        accountAddress={SAMPLE_PICKERACCOUNT_PROPS.accountAddress}
+        accountName={SAMPLE_PICKERACCOUNT_PROPS.accountName}
         accountAvatarType={AvatarAccountType.JazzIcon}
         onPress={jest.fn}
       />,

app/component-library/components/Pickers/PickerNetwork/PickerNetwork.constants.ts

@@ -1,4 +1,13 @@
+/* eslint-disable no-console */
 /* eslint-disable import/prefer-default-export */
+// Internal dependencies.
+import { PickerNetworkProps } from './PickerNetwork.types';
 
-export const TEST_IMAGE_URL =
-  'https://assets.coingecko.com/coins/images/279/small/ethereum.png?1595348880';
+// Sample consts
+export const SAMPLE_PICKERNETWORK_PROPS: PickerNetworkProps = {
+  imageSource: {
+    uri: 'https://assets.coingecko.com/coins/images/279/small/ethereum.png?1595348880',
+  },
+  label: 'Ethereum Mainnet',
+  onPress: () => console.log('PickerNetwork pressed'),
+};

app/component-library/components/Pickers/PickerNetwork/PickerNetwork.stories.tsx

@@ -1,38 +1,28 @@
-/* eslint-disable no-console */
-
-// Third party dependencies.
+/* eslint-disable react/display-name */
 import React from 'react';
-import { ImageSourcePropType, StyleSheet } from 'react-native';
-import { storiesOf } from '@storybook/react-native';
-import { boolean, text } from '@storybook/addon-knobs';
 
 // Internal dependencies.
-import PickerNetwork from './PickerNetwork';
-import { TEST_IMAGE_URL } from './PickerNetwork.constants';
+import { default as PickerNetworkComponent } from './PickerNetwork';
+import { SAMPLE_PICKERNETWORK_PROPS } from './PickerNetwork.constants';
 
-const styles = StyleSheet.create({
-  networkPicker: {
-    alignSelf: 'flex-start',
+const PickerNetworkMeta = {
+  title: 'Component Library / Pickers',
+  component: PickerNetworkComponent,
+  argTypes: {
+    label: {
+      control: { type: 'text' },
+      defaultValue: SAMPLE_PICKERNETWORK_PROPS.label,
+    },
   },
-});
-
-storiesOf('Component Library / PickerNetwork', module).add('Default', () => {
-  const groupId = 'Props';
-  const networkLabelSelector = text('label', 'Ethereum Mainnet', groupId);
-  const includesImage = boolean('Includes image', true, groupId);
-  const imageUrl = text('imageSource.uri', TEST_IMAGE_URL, groupId);
-  const imageSource = (includesImage && {
-    uri: imageUrl,
-  }) as ImageSourcePropType;
+};
+export default PickerNetworkMeta;
 
-  return (
-    <PickerNetwork
-      onPress={() => {
-        console.log('Picking network!');
-      }}
-      label={networkLabelSelector}
-      imageSource={imageSource}
-      style={styles.networkPicker}
+export const PickerNetwork = {
+  render: (args: any) => (
+    <PickerNetworkComponent
+      {...args}
+      imageSource={SAMPLE_PICKERNETWORK_PROPS.imageSource}
+      onPress={SAMPLE_PICKERNETWORK_PROPS.onPress}
     />
-  );
-});
+  ),
+};

app/component-library/components/Pickers/PickerNetwork/PickerNetwork.test.tsx

@@ -4,15 +4,15 @@ import { shallow } from 'enzyme';
 
 // Internal dependencies.
 import PickerNetwork from './PickerNetwork';
-import { TEST_IMAGE_URL } from './PickerNetwork.constants';
+import { SAMPLE_PICKERNETWORK_PROPS } from './PickerNetwork.constants';
 
 describe('PickerNetwork', () => {
   it('should render correctly', () => {
     const wrapper = shallow(
       <PickerNetwork
         onPress={jest.fn}
-        label={'Ethereum Mainnet'}
-        imageSource={{ uri: TEST_IMAGE_URL }}
+        label={SAMPLE_PICKERNETWORK_PROPS.label}
+        imageSource={SAMPLE_PICKERNETWORK_PROPS.imageSource}
       />,
     );
     expect(wrapper).toMatchSnapshot();