refactor: Convert Badge stories to csf format

.storybook/main.js

@@ -1,6 +1,7 @@
 module.exports = {
   stories: [
     '../app/component-library/components/Cards/Card/**/*.stories.?(ts|tsx|js|jsx)',
+    '../app/component-library/components/Badges/**/*.stories.?(ts|tsx|js|jsx)',
     '../app/component-library/components/Accordions/**/*.stories.?(ts|tsx|js|jsx)',
     '../app/component-library/components/Banners/**/*.stories.?(ts|tsx|js|jsx)',
     '../app/component-library/components/Modals/**/*.stories.?(ts|tsx|js|jsx)',

.storybook/storybook.requires.js

@@ -16,6 +16,13 @@ global.STORIES = [
     importPathMatcher:
       "^\\.[\\\\/](?:app\\/component-library\\/components\\/Cards\\/Card(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.(?:ts|tsx|js|jsx)?)$",
   },
+  {
+    titlePrefix: "",
+    directory: "./app/component-library/components/Badges",
+    files: "**/*.stories.?(ts|tsx|js|jsx)",
+    importPathMatcher:
+      "^\\.[\\\\/](?:app\\/component-library\\/components\\/Badges(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.(?:ts|tsx|js|jsx)?)$",
+  },
   {
     titlePrefix: "",
     directory: "./app/component-library/components/Accordions",
@@ -160,6 +167,10 @@ if (parameters) {
 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/Badges/Badge/Badge.stories.tsx": require("../app/component-library/components/Badges/Badge/Badge.stories.tsx"),
+    "./app/component-library/components/Badges/Badge/variants/BadgeNetwork/BadgeNetwork.stories.tsx": require("../app/component-library/components/Badges/Badge/variants/BadgeNetwork/BadgeNetwork.stories.tsx"),
+    "./app/component-library/components/Badges/Badge/variants/BadgeStatus/BadgeStatus.stories.tsx": require("../app/component-library/components/Badges/Badge/variants/BadgeStatus/BadgeStatus.stories.tsx"),
+    "./app/component-library/components/Badges/BadgeWrapper/BadgeWrapper.stories.tsx": require("../app/component-library/components/Badges/BadgeWrapper/BadgeWrapper.stories.tsx"),
     "./app/component-library/components/Accordions/Accordion/Accordion.stories.tsx": require("../app/component-library/components/Accordions/Accordion/Accordion.stories.tsx"),
     "./app/component-library/components/Accordions/Accordion/foundation/AccordionHeader/AccordionHeader.stories.tsx": require("../app/component-library/components/Accordions/Accordion/foundation/AccordionHeader/AccordionHeader.stories.tsx"),
     "./app/component-library/components/Banners/Banner/Banner.stories.tsx": require("../app/component-library/components/Banners/Banner/Banner.stories.tsx"),

app/component-library/components/Badges/Badge/Badge.stories.tsx

@@ -1,64 +1,58 @@
-/* eslint-disable no-console */
-
+/* eslint-disable react-native/no-inline-styles */
+/* eslint-disable react/display-name */
 // Third party dependencies.
 import React from 'react';
-import { View } from 'react-native';
-import { select } from '@storybook/addon-knobs';
-import { storiesOf } from '@storybook/react-native';
 
 // External dependencies.
-import { storybookPropsGroupID } from '../../../constants/storybook.constants';
-import BadgeNetworkStory, {
-  getBadgeNetworkStoryProps,
-} from './variants/BadgeNetwork/BadgeNetwork.stories';
-import BadgeStatusStory, {
-  getBadgeStatusStoryProps,
-} from './variants/BadgeStatus/BadgeStatus.stories';
+import { SAMPLE_BADGENETWORK_PROPS } from './variants/BadgeNetwork/BadgeNetwork.constants';
+import { SAMPLE_BADGESTATUS_PROPS } from './variants/BadgeStatus/BadgeStatus.constants';
 
 // Internal dependencies.
-import { BadgeVariant, BadgeProps } from './Badge.types';
-import Badge from './Badge';
-
-export const getBadgeStoryProps = (): BadgeProps => {
-  let badgeProps: BadgeProps;
+import { BadgeVariant } from './Badge.types';
+import { default as BadgeComponent } from './Badge';
+import { View } from 'react-native';
 
-  const badgeVariantSelector = select(
-    'variant',
-    BadgeVariant,
-    BadgeVariant.Network,
-    storybookPropsGroupID,
-  );
-  switch (badgeVariantSelector) {
-    case BadgeVariant.Network:
-      badgeProps = {
-        ...getBadgeNetworkStoryProps(),
-        variant: BadgeVariant.Network,
-      };
-      break;
-    case BadgeVariant.Status:
-      badgeProps = {
-        ...getBadgeStatusStoryProps(),
-        variant: BadgeVariant.Status,
-      };
-      break;
-  }
-  return badgeProps;
+const BadgeMeta = {
+  title: 'Component Library / Badges',
+  component: BadgeComponent,
+  argTypes: {
+    variant: {
+      options: BadgeVariant,
+      control: {
+        type: 'select',
+      },
+      defaultValue: BadgeVariant.Network,
+    },
+  },
 };
-const BadgeStory = () => (
-  <View
-    // eslint-disable-next-line react-native/no-inline-styles
-    style={{
-      height: 50,
-      width: 50,
-    }}
-  >
-    <Badge {...getBadgeStoryProps()} />
-  </View>
-);
-
-storiesOf('Component Library / Badges', module)
-  .add('Badge', BadgeStory)
-  .add('Variants / BadgeNetwork', BadgeNetworkStory)
-  .add('Variants / BadgeStatus', BadgeStatusStory);
+export default BadgeMeta;
 
-export default BadgeStory;
+export const Badge = {
+  render: (args: { variant: BadgeVariant }) => {
+    switch (args.variant) {
+      case BadgeVariant.Network:
+        return (
+          <View
+            style={{
+              height: 50,
+              width: 50,
+            }}
+          >
+            <BadgeComponent
+              variant={BadgeVariant.Network}
+              {...SAMPLE_BADGENETWORK_PROPS}
+            />
+          </View>
+        );
+      case BadgeVariant.Status:
+        return (
+          <BadgeComponent
+            variant={BadgeVariant.Status}
+            {...SAMPLE_BADGESTATUS_PROPS}
+          />
+        );
+      default:
+        throw new Error('Invalid Badge Variant');
+    }
+  },
+};

app/component-library/components/Badges/Badge/Badge.tsx

@@ -12,24 +12,12 @@ import {
   BADGE_BADGESTATUS_TEST_ID,
 } from './Badge.constants';
 
-const Badge = (badgeProps: BadgeProps) => {
-  switch (badgeProps.variant) {
+const Badge = ({ variant, ...props }: BadgeProps) => {
+  switch (variant) {
     case BadgeVariant.Network:
-      return (
-        <BadgeNetwork
-          testID={BADGE_BADGENETWORK_TEST_ID}
-          {...badgeProps}
-          variant={BadgeVariant.Network}
-        />
-      );
+      return <BadgeNetwork testID={BADGE_BADGENETWORK_TEST_ID} {...props} />;
     case BadgeVariant.Status:
-      return (
-        <BadgeStatus
-          testID={BADGE_BADGESTATUS_TEST_ID}
-          {...badgeProps}
-          variant={BadgeVariant.Status}
-        />
-      );
+      return <BadgeStatus testID={BADGE_BADGESTATUS_TEST_ID} {...props} />;
     default:
       throw new Error('Invalid Badge Variant');
   }

app/component-library/components/Badges/Badge/__snapshots__/Badge.test.tsx.snap

@@ -3,14 +3,12 @@
 exports[`Badge should render badge network given the badge network variant 1`] = `
 <BadgeNetwork
   testID="badge-badgenetwork"
-  variant="network"
 />
 `;
 
 exports[`Badge should render badge status given the badge status variant 1`] = `
 <BadgeStatus
   state="Inactive"
   testID="badge-badgestatus"
-  variant="status"
 />
 `;

app/component-library/components/Badges/Badge/foundation/BadgeBase/BadgeBase.types.ts

@@ -2,17 +2,10 @@
 import React from 'react';
 import { ViewProps } from 'react-native';
 
-// External dependencies.
-import { BadgeVariant } from '../../Badge.types';
-
 /**
  * Badge component props.
  */
 export interface BadgeBaseProps extends ViewProps {
-  /**
-   * Optional prop to control the variant of Badge
-   */
-  variant?: BadgeVariant;
   /**
    * The content of the badge itself. This can take in any component.
    */

app/component-library/components/Badges/Badge/variants/BadgeNetwork/BadgeNetwork.constants.ts

@@ -6,7 +6,6 @@ import {
   TEST_REMOTE_IMAGE_SOURCE,
   TEST_NETWORK_NAME,
 } from '../../../../Avatars/Avatar/variants/AvatarNetwork/AvatarNetwork.constants';
-import { BadgeVariant } from '../../Badge.types';
 
 // Internal dependencies.
 import { BadgeNetworkProps } from './BadgeNetwork.types';
@@ -21,7 +20,6 @@ export const DEFAULT_BADGENETWORK_NETWORKICON_SIZE = AvatarSize.Md;
 const SAMPLE_BADGENETWORK_NAME = TEST_NETWORK_NAME;
 const SAMPLE_BADGENETWORK_IMAGESOURCE = TEST_REMOTE_IMAGE_SOURCE;
 export const SAMPLE_BADGENETWORK_PROPS: BadgeNetworkProps = {
-  variant: BadgeVariant.Network,
   name: SAMPLE_BADGENETWORK_NAME,
   imageSource: SAMPLE_BADGENETWORK_IMAGESOURCE,
 };

app/component-library/components/Badges/Badge/variants/BadgeNetwork/BadgeNetwork.stories.tsx

@@ -1,25 +1,37 @@
-/* eslint-disable no-console */
-// Third party dependencies.
+/* eslint-disable react-native/no-inline-styles */
+/* eslint-disable react/display-name */
 import React from 'react';
 import { View } from 'react-native';
 
 // Internal dependencies.
-import BadgeNetwork from './BadgeNetwork';
+import { default as BadgeNetworkComponent } from './BadgeNetwork';
 import { SAMPLE_BADGENETWORK_PROPS } from './BadgeNetwork.constants';
 import { BadgeNetworkProps } from './BadgeNetwork.types';
 
-export const getBadgeNetworkStoryProps = (): BadgeNetworkProps =>
-  SAMPLE_BADGENETWORK_PROPS;
+const BadgeNetworkMeta = {
+  title: 'Component Library / Badges',
+  component: BadgeNetworkComponent,
+  argTypes: {
+    name: {
+      control: { type: 'text' },
+      defaultValue: SAMPLE_BADGENETWORK_PROPS.name,
+    },
+  },
+};
+export default BadgeNetworkMeta;
 
-const BadgeNetworkStory = () => (
-  <View
-    // eslint-disable-next-line react-native/no-inline-styles
-    style={{
-      height: 50,
-      width: 50,
-    }}
-  >
-    <BadgeNetwork {...getBadgeNetworkStoryProps()} />
-  </View>
-);
-export default BadgeNetworkStory;
+export const BadgeNetwork = {
+  render: (args: JSX.IntrinsicAttributes & BadgeNetworkProps) => (
+    <View
+      style={{
+        height: 50,
+        width: 50,
+      }}
+    >
+      <BadgeNetworkComponent
+        {...args}
+        imageSource={SAMPLE_BADGENETWORK_PROPS.imageSource}
+      />
+    </View>
+  ),
+};

app/component-library/components/Badges/Badge/variants/BadgeNetwork/BadgeNetwork.types.ts

@@ -2,17 +2,12 @@
 import { ImageSourcePropType } from 'react-native';
 
 // External dependencies.
-import { BadgeVariant } from '../../Badge.types';
 import { BadgeBaseProps } from '../../foundation/BadgeBase/BadgeBase.types';
 
 /**
  * BadgeNetwork component props.
  */
 export interface BadgeNetworkProps extends Omit<BadgeBaseProps, 'children'> {
-  /**
-   * Optional prop to control the variant of badge.
-   */
-  variant: BadgeVariant.Network;
   /**
    * Optional prop for name of the network.
    */

app/component-library/components/Badges/Badge/variants/BadgeNetwork/README.md

@@ -6,14 +6,6 @@ BadgeNetwork is used on top of an element to display network information. **This
 
 This component extends [BadgeBaseProps](../../foundation/BadgeBase/BadgeBase.types.ts).
 
-### `variant`
-
-Optional prop to control the variant of badge.
-
-| <span style="color:gray;font-size:14px">TYPE</span> | <span style="color:gray;font-size:14px">REQUIRED</span> |
-| :-------------------------------------------------- | :------------------------------------------------------ |
-| [BadgeVariant.Network](../../Badge.types.ts)                                           | Yes                                                     |
-
 ### `name`
 
 Optional prop for name of the network.

app/component-library/components/Badges/Badge/variants/BadgeStatus/BadgeStatus.constants.ts

@@ -1,7 +1,4 @@
 /* eslint-disable import/prefer-default-export */
-// External dependencies.
-import { BadgeVariant } from '../../Badge.types';
-
 // Internal dependencies.
 import { BadgeStatusState, BadgeStatusProps } from './BadgeStatus.types';
 
@@ -13,6 +10,5 @@ export const BADGE_STATUS_TEST_ID = 'badge-status';
 
 // Samples
 export const SAMPLE_BADGESTATUS_PROPS: BadgeStatusProps = {
-  variant: BadgeVariant.Status,
   state: DEFAULT_BADGESTATUS_STATE,
 };

app/component-library/components/Badges/Badge/variants/BadgeStatus/BadgeStatus.stories.tsx

@@ -1,27 +1,21 @@
-/* eslint-disable no-console */
-// Third party dependencies.
-import React from 'react';
-import { select } from '@storybook/addon-knobs';
-
-// External dependencies.
-import { storybookPropsGroupID } from '../../../../../constants/storybook.constants';
-import { BadgeVariant } from '../../Badge.types';
-
 // Internal dependencies.
-import BadgeStatus from './BadgeStatus';
-import { BadgeStatusState, BadgeStatusProps } from './BadgeStatus.types';
-import { DEFAULT_BADGESTATUS_STATE } from './BadgeStatus.constants';
-
-export const getBadgeStatusStoryProps = (): BadgeStatusProps => ({
-  variant: BadgeVariant.Status,
-  state: select(
-    'state',
-    BadgeStatusState,
-    DEFAULT_BADGESTATUS_STATE,
-    storybookPropsGroupID,
-  ),
-});
+import { default as BadgeStatusComponent } from './BadgeStatus';
+import { SAMPLE_BADGESTATUS_PROPS } from './BadgeStatus.constants';
+import { BadgeStatusState } from './BadgeStatus.types';
 
-const BadgeStatusStory = () => <BadgeStatus {...getBadgeStatusStoryProps()} />;
+const BadgeStatusMeta = {
+  title: 'Component Library / Badges',
+  component: BadgeStatusComponent,
+  argTypes: {
+    state: {
+      options: BadgeStatusState,
+      control: {
+        type: 'select',
+      },
+      defaultValue: SAMPLE_BADGESTATUS_PROPS.state,
+    },
+  },
+};
+export default BadgeStatusMeta;
 
-export default BadgeStatusStory;
+export const BadgeStatus = {};

app/component-library/components/Badges/Badge/variants/BadgeStatus/BadgeStatus.types.ts

@@ -2,7 +2,6 @@
 import { ColorValue } from 'react-native';
 
 // External dependencies.
-import { BadgeVariant } from '../../Badge.types';
 import { BadgeBaseProps } from '../../foundation/BadgeBase/BadgeBase.types';
 
 /**
@@ -17,10 +16,6 @@ export enum BadgeStatusState {
  * BadgeStatus component props.
  */
 export interface BadgeStatusProps extends Omit<BadgeBaseProps, 'children'> {
-  /**
-   * Optional prop to control the variant of badge.
-   */
-  variant: BadgeVariant.Status;
   /**
    * Optional prop to control the status of BadgeStatus.
    * @default BadgeStatusState.Inactive