Refactor withChildrenMock > withPropMock for simpler and more reusabl…

…e usage

src/stories/nrn/dataDisplay/Btn.stories.tsx

@@ -4,7 +4,7 @@ import {
 } from '@storybook/react/types-6-0';
 import React from 'react';
 import Btn, { Props } from '../../../components/utils/Btn';
-import withChildrenMock from '../../shared/hocs/withChildrenMock';
+import withPropMock from '../../shared/hocs/withPropMock';
 
 type PropsWithChildrenMock = Props & {
   text?: string;
@@ -13,7 +13,7 @@ type PropsWithChildrenMock = Props & {
 export default {
   title: 'Next Right Now/Data display/Btn',
   component: Btn,
-  argTypes: withChildrenMock({}),
+  argTypes: withPropMock({}),
 } as Meta;
 
 const Template: Story<PropsWithChildrenMock> = (props) => {

src/stories/nrn/dataDisplay/CircleBtn.stories.tsx

@@ -4,7 +4,7 @@ import {
 } from '@storybook/react/types-6-0';
 import React from 'react';
 import CircleBtn, { Props } from '../../../components/utils/CircleBtn';
-import withChildrenMock from '../../shared/hocs/withChildrenMock';
+import withPropMock from '../../shared/hocs/withPropMock';
 
 type PropsWithChildrenMock = Props & {
   text?: string;
@@ -13,7 +13,7 @@ type PropsWithChildrenMock = Props & {
 export default {
   title: 'Next Right Now/Data display/CircleBtn',
   component: CircleBtn,
-  argTypes: withChildrenMock({}),
+  argTypes: withPropMock({}),
 } as Meta;
 
 const Template: Story<PropsWithChildrenMock> = (props) => {

src/stories/nrn/dataDisplay/DocumentButton.stories.tsx

@@ -4,7 +4,7 @@ import {
 } from '@storybook/react/types-6-0';
 import React from 'react';
 import DocumentButton, { Props } from '../../../components/utils/DocumentButton';
-import withChildrenMock from '../../shared/hocs/withChildrenMock';
+import withPropMock from '../../shared/hocs/withPropMock';
 
 type PropsWithChildrenMock = Props & {
   text?: string;
@@ -13,7 +13,7 @@ type PropsWithChildrenMock = Props & {
 export default {
   title: 'Next Right Now/Data display/DocumentButton',
   component: DocumentButton,
-  argTypes: withChildrenMock({}),
+  argTypes: withPropMock({}),
 } as Meta;
 
 const Template: Story<PropsWithChildrenMock> = (props) => {

src/stories/nrn/dataDisplay/ExternalLink.stories.tsx

@@ -4,7 +4,7 @@ import {
 } from '@storybook/react/types-6-0';
 import React from 'react';
 import ExternalLink, { Props } from '../../../components/utils/ExternalLink';
-import withChildrenMock from '../../shared/hocs/withChildrenMock';
+import withPropMock from '../../shared/hocs/withPropMock';
 
 type PropsWithChildrenMock = Props & {
   text?: string;
@@ -13,7 +13,7 @@ type PropsWithChildrenMock = Props & {
 export default {
   title: 'Next Right Now/Data display/ExternalLink',
   component: ExternalLink,
-  argTypes: withChildrenMock({}),
+  argTypes: withPropMock({}),
 } as Meta;
 
 const Template: Story<PropsWithChildrenMock> = (props) => {

src/stories/nrn/dataDisplay/LinkButton.stories.tsx

@@ -5,7 +5,7 @@ import {
 import React from 'react';
 import ExternalLink from '../../../components/utils/ExternalLink';
 import LinkButton, { Props } from '../../../components/utils/LinkButton';
-import withChildrenMock from '../../shared/hocs/withChildrenMock';
+import withPropMock from '../../shared/hocs/withPropMock';
 
 type PropsWithChildrenMock = Props & {
   text?: string;
@@ -16,7 +16,7 @@ export default {
   title: 'Next Right Now/Data display/LinkButton',
   component: LinkButton,
   subcomponents: { ExternalLink },
-  argTypes: withChildrenMock({}),
+  argTypes: withPropMock({}),
 } as Meta;
 
 const Template: Story<PropsWithChildrenMock> = (props) => {

src/stories/nrn/dataDisplay/Stamp.stories.tsx

@@ -5,7 +5,7 @@ import {
 import React from 'react';
 import EllipsisText from '../../../components/utils/EllipsisText';
 import Stamp, { Props } from '../../../components/utils/Stamp';
-import withChildrenMock from '../../shared/hocs/withChildrenMock';
+import withPropMock from '../../shared/hocs/withPropMock';
 
 type PropsWithChildrenMock = Props & {
   text?: string | React.ReactElement;
@@ -14,7 +14,7 @@ type PropsWithChildrenMock = Props & {
 export default {
   title: 'Next Right Now/Data display/Stamp',
   component: Stamp,
-  argTypes: withChildrenMock({}),
+  argTypes: withPropMock({}),
 } as Meta;
 
 const Template: Story<PropsWithChildrenMock> = (props) => {

src/stories/nrn/dataDisplay/Text.stories.tsx

@@ -4,7 +4,7 @@ import {
 } from '@storybook/react/types-6-0';
 import React from 'react';
 import Text, { Props } from '../../../components/utils/Text';
-import withChildrenMock from '../../shared/hocs/withChildrenMock';
+import withPropMock from '../../shared/hocs/withPropMock';
 
 type PropsWithChildrenMock = Props & {
   text?: string;
@@ -13,7 +13,7 @@ type PropsWithChildrenMock = Props & {
 export default {
   title: 'Next Right Now/Data display/Text',
   component: Text,
-  argTypes: withChildrenMock({}),
+  argTypes: withPropMock({}),
 } as Meta;
 
 const Template: Story<PropsWithChildrenMock> = (props) => {

src/stories/nrn/i18n/I18nLink.stories.tsx

@@ -4,7 +4,7 @@ import {
 } from '@storybook/react/types-6-0';
 import React from 'react';
 import I18nLink, { Props } from '../../../components/i18n/I18nLink';
-import withChildrenMock from '../../shared/hocs/withChildrenMock';
+import withPropMock from '../../shared/hocs/withPropMock';
 import styles from './I18nLink.module.css';
 
 type PropsWithChildrenMock = {
@@ -15,7 +15,7 @@ type PropsWithChildrenMock = {
 export default {
   title: 'Next Right Now/I18n/I18nLink',
   component: I18nLink,
-  argTypes: withChildrenMock({
+  argTypes: withPropMock({
     wrapChildrenAsLink: {
       control: {
         disable: true, // Disable field because it crashes the UI when being used (expected behavior but bad UX)

src/stories/nrn/layout/Cards.stories.tsx

@@ -15,12 +15,11 @@ import I18nLink from '../../../components/i18n/I18nLink';
 import Btn from '../../../components/utils/Btn';
 import Cards, { Props } from '../../../components/utils/Cards';
 import ExternalLink from '../../../components/utils/ExternalLink';
-import withChildrenMock from '../../shared/hocs/withChildrenMock';
 
 export default {
   title: 'Next Right Now/Layout/Cards',
   component: Cards,
-  argTypes: withChildrenMock({}, { hasChildrenMock: false }),
+  argTypes: {},
 } as Meta;
 
 const Template: Story<Props> = (props) => {

src/stories/nrn/overlay/SimpleTooltip.stories.tsx

@@ -4,7 +4,7 @@ import {
 } from '@storybook/react/types-6-0';
 import React from 'react';
 import SimpleTooltip, { Props } from '../../../components/utils/SimpleTooltip';
-import withChildrenMock from '../../shared/hocs/withChildrenMock';
+import withPropMock from '../../shared/hocs/withPropMock';
 
 type PropsWithChildrenMock = Props & {
   text?: string;
@@ -14,7 +14,7 @@ type PropsWithChildrenMock = Props & {
 export default {
   title: 'Next Right Now/Overlay/SimpleTooltip',
   component: SimpleTooltip,
-  argTypes: withChildrenMock({}),
+  argTypes: withPropMock({}),
 } as Meta;
 
 const Template: Story<PropsWithChildrenMock> = (props) => {

src/stories/nrn/overlay/Tooltip.stories.tsx

@@ -4,7 +4,7 @@ import {
 } from '@storybook/react/types-6-0';
 import React from 'react';
 import Tooltip, { Props } from '../../../components/utils/Tooltip';
-import withChildrenMock from '../../shared/hocs/withChildrenMock';
+import withPropMock from '../../shared/hocs/withPropMock';
 
 type PropsWithChildrenMock = Props & {
   text?: string;
@@ -14,7 +14,10 @@ type PropsWithChildrenMock = Props & {
 export default {
   title: 'Next Right Now/Overlay/Tooltip',
   component: Tooltip,
-  argTypes: withChildrenMock({}),
+  argTypes: withPropMock(withPropMock({}, {
+    propName: 'overlay',
+    propMockName: 'tooltipText',
+  })),
 } as Meta;
 
 const Template: Story<PropsWithChildrenMock> = (props) => {

src/stories/nrn/text/EllipsisText.stories.tsx

@@ -4,7 +4,7 @@ import {
 } from '@storybook/react/types-6-0';
 import React from 'react';
 import EllipsisText, { Props } from '../../../components/utils/EllipsisText';
-import withChildrenMock from '../../shared/hocs/withChildrenMock';
+import withPropMock from '../../shared/hocs/withPropMock';
 
 type PropsWithChildrenMock = Props & {
   text?: string;
@@ -13,7 +13,7 @@ type PropsWithChildrenMock = Props & {
 export default {
   title: 'Next Right Now/Text/EllipsisText',
   component: EllipsisText,
-  argTypes: withChildrenMock({}),
+  argTypes: withPropMock({}),
 } as Meta;
 
 const Template: Story<PropsWithChildrenMock> = (props) => {

src/stories/shared/hocs/withPropMock.tsx

@@ -0,0 +1,81 @@
+import { ArgTypes } from '@storybook/addons/dist/types';
+
+/**
+ * HOC options.
+ */
+type Options = {
+  /**
+   * Name of the property to mock.
+   *
+   * Disables `children` by default, because it's the main reason why we use this HOC.
+   * Also, can often crash the app if not proper `children` is passed down, bad UX.
+   *
+   * @default children
+   */
+  propName: string;
+
+  /**
+   * Whether to mock the `propName`.
+   *
+   * @default true
+   */
+  shouldMockProp?: boolean;
+
+  /**
+   * Name of the property that mocks the `propName`.
+   *
+   * Replaces `children` prop by `text` by default, because that's our most common use-case.
+   *
+   * @default text
+   */
+  propMockName?: string;
+};
+
+/**
+ * Options applied by default.
+ */
+const defaultOptions: Partial<Options> = {
+  propName: 'children',
+  shouldMockProp: true,
+  propMockName: 'text',
+};
+
+/**
+ * Mocks the "argTypes" to automatically disable `children` control and add a mock field (default: `text`) with default documentation.
+ * Helps avoid code duplication
+ */
+const withPropMock = (argTypes: ArgTypes, options?: Options): ArgTypes => {
+  const {
+    propName,
+    shouldMockProp,
+    propMockName,
+  } = { ...defaultOptions, ...options || {} };
+  let computedArgTypes: ArgTypes;
+
+  if (shouldMockProp) {
+    computedArgTypes = {
+      ...argTypes,
+
+      /**
+       * Disables `propName` control.
+       */
+      [propName]: {
+        control: {
+          disable: true,
+        },
+      },
+
+      /**
+       * `propName` mock field, meant to replace the `propName` prop by providing interactivity (controls enabled).
+       * Must be added to the Story `args` with a default value to be interactive.
+       */
+      [propMockName]: {
+        description: `<code>${propName}</code> mock property.<br /><br /><span className="tip">Mock</span><i>This property doesn't really exist in the component.<br />It is made available to help manipulate the <code>${propName}</code> from Storybook</i>.<br /><br />You must use <code>${propName}</code> instead during actual code implementation.`,
+      },
+    };
+  }
+
+  return computedArgTypes;
+};
+
+export default withPropMock;