[Bug] Storybook - Fix Code Snippets and Custom Docs Template

packages/components/.storybook/native/storybook.requires.ts

@@ -1,6 +1,10 @@
 /* do not change this file, it is auto generated by storybook. */
 
-import { start } from "@storybook/react-native";
+import {
+  start,
+  prepareStories,
+  getProjectAnnotations,
+} from "@storybook/react-native";
 
 import "@storybook/addon-ondevice-controls/register";
 import "@storybook/addon-ondevice-actions/register";
@@ -34,14 +38,37 @@ const normalizedStories = [
   },
 ];
 
-// @ts-ignore
+declare global {
+  var view: ReturnType<typeof start>;
+  var STORIES: typeof normalizedStories;
+}
+
+const annotations = [
+  require("./preview"),
+  require("@storybook/react-native/dist/preview"),
+  require("@storybook/addon-actions/preview"),
+];
+
 global.STORIES = normalizedStories;
 
-export const view = start({
-  annotations: [
-    require("./preview"),
-    require("@storybook/react-native/dist/preview"),
-    require("@storybook/addon-actions/preview"),
-  ],
-  storyEntries: normalizedStories,
-});
+// @ts-ignore
+module?.hot?.accept?.();
+
+if (!global.view) {
+  global.view = start({
+    annotations,
+    storyEntries: normalizedStories,
+  });
+} else {
+  const { importMap } = prepareStories({ storyEntries: normalizedStories });
+
+  global.view._preview.onStoriesChanged({
+    importFn: async (importPath: string) => importMap[importPath],
+  });
+
+  global.view._preview.onGetProjectAnnotationsChanged({
+    getProjectAnnotations: getProjectAnnotations(global.view, annotations),
+  });
+}
+
+export const view = global.view;

packages/components/.storybook/web/main.ts

@@ -3,7 +3,6 @@ const CopyPlugin = require('copy-webpack-plugin')
 
 module.exports = {
   stories: [
-    '../../src/components/**/*.stories.mdx',
     '../../src/components/**/*.stories.@(js|jsx|ts|tsx)',
   ],
   addons: [
@@ -21,9 +20,6 @@ module.exports = {
   },
   framework: '@storybook/react-webpack5',
   options: { builder: { useSWC: true } }, // improves build performance
-  typescript: {
-    reactDocgen: 'react-docgen',
-  },
   staticDirs: ['../../src/assets'],
   webpackFinal: async (config) => {
     // Copies fonts from mobile-assets to storybook static folder

packages/components/package.json

@@ -62,19 +62,19 @@
     "@react-native-async-storage/async-storage": "1.23.1",
     "@react-native-community/datetimepicker": "7.7.0",
     "@react-native-community/slider": "4.5.2",
-    "@storybook/addon-actions": "^7.6.15",
-    "@storybook/addon-controls": "^7.6.15",
+    "@storybook/addon-actions": "7.6.19",
+    "@storybook/addon-controls": "7.6.19",
     "@storybook/addon-designs": "^7.0.9",
-    "@storybook/addon-docs": "^7.6.15",
-    "@storybook/addon-essentials": "^7.6.15",
-    "@storybook/addon-links": "^7.6.15",
-    "@storybook/addon-ondevice-actions": "^7.6.15",
-    "@storybook/addon-ondevice-controls": "^7.6.15",
+    "@storybook/addon-docs": "7.6.19",
+    "@storybook/addon-essentials": "7.6.19",
+    "@storybook/addon-links": "7.6.19",
+    "@storybook/addon-ondevice-actions": "^7.6.18",
+    "@storybook/addon-ondevice-controls": "^7.6.18",
     "@storybook/addon-react-native-web": "^0.0.23",
-    "@storybook/builder-webpack5": "^7.6.15",
-    "@storybook/react": "^7.6.15",
-    "@storybook/react-native": "^7.6.15",
-    "@storybook/react-webpack5": "^7.6.15",
+    "@storybook/builder-webpack5": "7.6.19",
+    "@storybook/react": "7.6.19",
+    "@storybook/react-native": "^7.6.18",
+    "@storybook/react-webpack5": "7.6.19",
     "@svgr/webpack": "^8.1.0",
     "@testing-library/react-native": "^12.4.5",
     "@types/jest": "^29.5.12",
@@ -107,7 +107,7 @@
     "react-native-svg-transformer": "^1.3.0",
     "react-native-web": "~0.19.10",
     "react-test-renderer": "^18.2.0",
-    "storybook": "^7.6.15",
+    "storybook": "7.6.19",
     "storybook-dark-mode": "^3.0.3",
     "ts-jest": "^29.1.2",
     "typescript": "^5.3.3"

packages/components/src/components/Alert/Alert.stories.tsx

@@ -1,10 +1,12 @@
-import { Alert, AlertProps } from './Alert'
-import { Link } from '../Link/Link'
 import { Meta, StoryObj } from '@storybook/react'
-import { Spacer } from '../Spacer/Spacer'
 import { View } from 'react-native'
 import React from 'react'
 
+import { Alert, AlertProps } from './Alert'
+import { Link } from '../Link/Link'
+import { Spacer } from '../Spacer/Spacer'
+import { generateDocs } from '../../utils/storybook'
+
 const meta: Meta<AlertProps> = {
   title: 'Alert',
   component: Alert,
@@ -20,6 +22,13 @@ const meta: Meta<AlertProps> = {
       </View>
     ),
   ],
+  parameters: {
+    docs: generateDocs({
+      name: 'Alert',
+      docUrl:
+        'https://department-of-veterans-affairs.github.io/va-mobile-app/design/Components/Alerts%20and%20Progress/Alert',
+    }),
+  },
 }
 
 export default meta

packages/components/src/components/Alert/Alert.tsx

@@ -61,7 +61,6 @@ export type AlertProps = {
     }
 )
 
-/** [View guidance for the Alert component on the VA Mobile Documentation Site](https://department-of-veterans-affairs.github.io/va-mobile-app/design/Components/Alerts%20and%20progress/Alert) */
 export const Alert: FC<AlertProps> = ({
   variant,
   header,

packages/components/src/components/Button/Button.stories.tsx

@@ -1,8 +1,10 @@
-import { Button, ButtonProps, ButtonVariants } from './Button'
 import { Meta, StoryObj } from '@storybook/react'
 import { View } from 'react-native'
 import React from 'react'
 
+import { Button, ButtonProps, ButtonVariants } from './Button'
+import { generateDocs } from '../../utils/storybook'
+
 const meta: Meta<ButtonProps> = {
   title: 'Button',
   component: Button,
@@ -36,6 +38,11 @@ const meta: Meta<ButtonProps> = {
         url: 'https://www.figma.com/file/Zzt8z60hCtdEzXx2GFWghH/%F0%9F%93%90-Component-Library?type=design&node-id=224-532&mode=design&t=LVehKHpWhqSKrQMW-4',
       },
     ],
+    docs: generateDocs({
+      name: 'Button',
+      docUrl:
+        'https://department-of-veterans-affairs.github.io/va-mobile-app/design/Components/Buttons%20and%20links/Button',
+    }),
   },
 }
 

packages/components/src/components/Button/Button.tsx

@@ -36,7 +36,6 @@ export type ButtonProps = {
   testOnlyPressed?: boolean
 }
 
-/** [View guidance for the Button component on the VA Mobile Documentation Site](https://department-of-veterans-affairs.github.io/va-mobile-app/design/Components/Buttons%20and%20links/Button)  */
 export const Button: React.FC<ButtonProps> = ({
   label,
   onPress,

packages/components/src/components/Icon/Icon.stories.tsx

@@ -3,6 +3,7 @@ import { View } from 'react-native'
 import React from 'react'
 
 import { Icon, IconMap, IconProps } from './Icon'
+import { generateDocs } from '../../utils/storybook'
 import CustomSVG from '../../assets/svgs/custom.svg'
 
 const meta: Meta<IconProps> = {
@@ -23,6 +24,9 @@ const meta: Meta<IconProps> = {
   argTypes: {
     name: { options: Object.keys(IconMap) },
   },
+  parameters: {
+    docs: generateDocs({})
+  }
 }
 
 export default meta

packages/components/src/components/Link/Link.stories.tsx

@@ -3,6 +3,7 @@ import { View } from 'react-native'
 import React from 'react'
 
 import { Link, LinkProps } from './Link'
+import { generateDocs } from '../../utils/storybook'
 
 const meta: Meta<LinkProps> = {
   title: 'Link',
@@ -24,6 +25,13 @@ const meta: Meta<LinkProps> = {
       </View>
     ),
   ],
+  parameters: {
+    docs: generateDocs({
+      name: 'Link',
+      docUrl:
+        'https://department-of-veterans-affairs.github.io/va-mobile-app/design/Components/Buttons%20and%20links/Link',
+    }),
+  },
 }
 
 export default meta

packages/components/src/components/Link/Link.tsx

@@ -121,7 +121,6 @@ export type LinkProps = linkTypes & {
   testOnlyPressed?: boolean
 }
 
-/** [View guidance for the Link component on the VA Mobile Documentation Site](https://department-of-veterans-affairs.github.io/va-mobile-app/design/Components/Buttons%20and%20links/Link)  */
 export const Link: FC<LinkProps> = ({
   type,
   text,

packages/components/src/components/SegmentedControl/SegmentedControl.stories.tsx

@@ -3,6 +3,7 @@ import { View } from 'react-native'
 import React, { useState } from 'react'
 
 import { SegmentedControl, SegmentedControlProps } from './SegmentedControl'
+import { generateDocs } from '../../utils/storybook'
 
 const meta: Meta<SegmentedControlProps> = {
   title: 'Segmented control',
@@ -27,6 +28,11 @@ const meta: Meta<SegmentedControlProps> = {
         url: 'https://www.figma.com/file/QVLPB3eOunmKrgQOuOt0SU/%F0%9F%93%90-DesignLibrary2.0---VAMobile?type=design&node-id=7332%3A11331&mode=design&t=IfpGfogEOoBtNhmN-1',
       },
     ],
+    docs: generateDocs({
+      name: 'Segmented control',
+      docUrl:
+        'https://department-of-veterans-affairs.github.io/va-mobile-app/design/Components/Navigation/Secondary/SegmentedControl',
+    }),
   },
 }
 

packages/components/src/components/SegmentedControl/SegmentedControl.tsx

@@ -41,9 +41,7 @@ const Segment = styled(Pressable)<SegmentProps>`
   elevation: ${(props) => (props.isSelected ? 4 : 0)};
   background-color: ${(props) => props.backgroundColor};
 `
-/** A segmented control is used to switch between related views of information within the same context.
- *
- * [View guidance for the SegmentedControl component on the VA Mobile Documentation Site](https://department-of-veterans-affairs.github.io/va-mobile-app/design/Components/Navigation/Secondary/SegmentedControl)  */
+/** A segmented control is used to switch between related views of information within the same context. */
 export const SegmentedControl: FC<SegmentedControlProps> = ({
   labels,
   onChange,

packages/components/src/components/Spacer/Spacer.stories.tsx

@@ -6,6 +6,7 @@ import { Button, ButtonVariants } from '../Button/Button'
 import { Icon } from '../Icon/Icon'
 import { Link } from '../Link/Link'
 import { Spacer, SpacerProps } from './Spacer'
+import { generateDocs } from '../../utils/storybook'
 
 const centerProps: ViewStyle = {
   flex: 1,
@@ -23,6 +24,9 @@ const meta: Meta<SpacerProps> = {
       </View>
     ),
   ],
+  parameters: {
+    docs: generateDocs({})
+  }
 }
 
 export default meta

packages/components/src/utils/storybook.tsx

@@ -1,17 +1,17 @@
+import { ColorSchemeName, Linking, Text, View } from 'react-native'
 import {
-  ArgsTable,
+  Controls,
   Description,
   Primary,
   Stories,
   Subtitle,
   Title,
 } from '@storybook/addon-docs'
-import { ColorSchemeName, Linking, Text, View } from 'react-native'
 import React, { useSyncExternalStore } from 'react'
 
 type DocProps = {
-  name: string
-  docUrl: string
+  name?: string
+  docUrl?: string
 }
 
 /**
@@ -20,7 +20,7 @@ type DocProps = {
  * @param docUrl - URL for the component's documentation on the docs site
  * @returns
  */
-export const DocLink = ({ name, docUrl }: DocProps): JSX.Element => (
+export const DocLink = ({ name, docUrl }: Required<DocProps>): JSX.Element => (
   <View style={{ marginVertical: 10 }}>
     <Text
       style={{ color: 'blue', textDecorationLine: 'underline', lineHeight: 20 }}
@@ -43,10 +43,10 @@ export const generateDocs = ({ name, docUrl }: DocProps) => ({
     <>
       <Title />
       <Subtitle />
-      <DocLink name={name} docUrl={docUrl} />
+      {name && docUrl ? <DocLink name={name} docUrl={docUrl} /> : null}
       <Description />
       <Primary />
-      <ArgsTable />
+      <Controls />
       <Stories />
     </>
   ),