feat(icons): generate util file with icons list

apps/docs/stories/1_4_Icons.stories.mdx

@@ -1,6 +1,6 @@
 import { Meta, Title, IconGallery, IconItem } from '@storybook/blocks'
 
-import { mdiIconsList, customIconsList } from '../utils/icon-list'
+import { iconList } from '../utils/icon-list'
 
 <Meta title="Getting Started/Icons" />
 
@@ -11,7 +11,7 @@ The icons library is a collection of icons that can be used in your components.
 <details class="icon-gallery">
   <summary>Custom Icons</summary>
   <IconGallery>
-    {customIconsList?.map((icon) => (
+    {iconList.custom.map((icon) => (
       <IconItem name={icon}>
         <atom-icon icon={icon}></atom-icon>
       </IconItem>
@@ -22,7 +22,7 @@ The icons library is a collection of icons that can be used in your components.
 <details class="icon-gallery">
   <summary>Material Design Icons</summary>
   <IconGallery>
-    {mdiIconsList?.map((icon) => (
+    {iconList.mdi?.map((icon) => (
       <IconItem name={icon}>
         <atom-icon icon={icon}></atom-icon>
       </IconItem>

apps/docs/utils/icon-list.ts

@@ -0,0 +1,18 @@
+export const iconList = {
+  custom: ['professional-plus'],
+  mdi: [
+    'account-multiple-outline',
+    'account-multiple',
+    'alert',
+    'check',
+    'close-outline',
+    'close',
+    'eye-off',
+    'eye',
+    'heart-outline',
+    'heart',
+    'home-outline',
+    'home',
+    'magnify',
+  ],
+}

packages/icons/scripts/generate-types.ts

@@ -1,8 +1,13 @@
-import { readSvgDirectories, writeTypeDefinitionFile } from './helpers.js'
+import {
+  readSvgDirectories,
+  writeListFile,
+  writeTypeDefinitionFile,
+} from './helpers.js'
 
 function generateTypes() {
   console.log(`Generating types...`)
   const files = readSvgDirectories()
+  writeListFile(files)
   writeTypeDefinitionFile(files)
 }
 

packages/icons/scripts/helpers.ts

@@ -58,3 +58,27 @@ export const writeTypeDefinitionFile = (
   const typeDef = `export type IconProps = ${types.join('\n | ')};`
   fs.writeFileSync(path.join(outputPath, '..', 'icons.d.ts'), typeDef)
 }
+
+export const writeListFile = (
+  svgFiles: string[],
+  outputPath = getCurrentDirPath()
+) => {
+  const list = svgFiles.reduce((acc, file) => {
+    const category = path.basename(path.dirname(file))
+    const name = path.basename(file, '.svg')
+
+    if (!acc[category]) {
+      acc[category] = []
+    }
+
+    acc[category].push(name)
+
+    return acc
+  }, {} as Record<'custom' | 'mdi', string[]>)
+
+  const output = `export const iconList = ${JSON.stringify(list)}`
+  fs.writeFileSync(
+    path.join(outputPath, '../../../..', 'apps/docs/utils', 'icon-list.ts'),
+    output
+  )
+}