Working except for Storybook bug

department-of-veterans-affairs · Jun 4, 2024 · 670be04 · 670be04
1 parent d268758
commit 670be04
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 4 deletions.
diff --git a/packages/components/src/components/Icon/Icon.stories.tsx b/packages/components/src/components/Icon/Icon.stories.tsx
@@ -1,3 +1,4 @@
+import { IconGallery, IconItem } from '@storybook/blocks'
 import { Meta, StoryObj } from '@storybook/react'
 import { View } from 'react-native'
 import React from 'react'
@@ -6,6 +7,29 @@ import { Icon, IconMap, IconProps } from './Icon'
 import { generateDocs } from '../../utils/storybook'
 import CustomSVG from '../../assets/svgs/custom.svg'
 
+const buildIconItems = () => {
+  const iconItems = []
+  const iconMapArray = Object.keys(IconMap)
+
+  for (const icon of iconMapArray) {
+    if (!icon) continue
+    iconItems.push(
+      <IconItem name={icon} >
+        {/* @ts-ignore */}
+        <Icon name={icon} />
+      </IconItem>
+    )
+  }
+
+  return iconItems
+}
+
+const iconGallery = (
+  <IconGallery >
+    {buildIconItems()}
+  </IconGallery>
+)
+
 const meta: Meta<IconProps> = {
   title: 'Icon',
   component: Icon,
@@ -25,8 +49,8 @@ const meta: Meta<IconProps> = {
     name: { options: Object.keys(IconMap) },
   },
   parameters: {
-    docs: generateDocs({})
-  }
+    docs: generateDocs({ icons: iconGallery }),
+  },
 }
 
 export default meta

diff --git a/packages/components/src/utils/storybook.tsx b/packages/components/src/utils/storybook.tsx
@@ -12,6 +12,7 @@ import React, { useSyncExternalStore } from 'react'
 type DocProps = {
   name?: string
   docUrl?: string
+  icons?: React.JSX.Element
 }
 
 /**
@@ -20,7 +21,10 @@ type DocProps = {
  * @param docUrl - URL for the component's documentation on the docs site
  * @returns
  */
-export const DocLink = ({ name, docUrl }: Required<DocProps>): JSX.Element => (
+export const DocLink = ({
+  name,
+  docUrl,
+}: Required<Pick<DocProps, 'name' | 'docUrl'>>): JSX.Element => (
   <View style={{ marginVertical: 10 }}>
     <Text
       style={{ color: 'blue', textDecorationLine: 'underline', lineHeight: 20 }}
@@ -36,9 +40,10 @@ export const DocLink = ({ name, docUrl }: Required<DocProps>): JSX.Element => (
  *
  * @param name - Name of the component
  * @param docUrl - URL for the component's documentation on the docs site
+ * @param icons - IconGallery documentation section passthrough
  * @returns
  */
-export const generateDocs = ({ name, docUrl }: DocProps) => ({
+export const generateDocs = ({ name, docUrl, icons }: DocProps) => ({
   page: () => (
     <>
       <Title />
@@ -47,6 +52,7 @@ export const generateDocs = ({ name, docUrl }: DocProps) => ({
       <Description />
       <Primary />
       <Controls />
+      {icons ? icons : null}
       <Stories />
     </>
   ),