From 528e51bcad358da1244a890a8fe1305fc171e9df Mon Sep 17 00:00:00 2001
From: Mauricio Mutte <mauriciomutte.mm@gmail.com>
Date: Tue, 18 Jul 2023 18:44:05 -0300
Subject: [PATCH] feat(icons): generate util file with icons list

---
 apps/docs/stories/1_4_Icons.stories.mdx  |  6 +++---
 apps/docs/utils/icon-list.ts             | 18 ++++++++++++++++++
 packages/icons/scripts/generate-types.ts |  7 ++++++-
 packages/icons/scripts/helpers.ts        | 24 ++++++++++++++++++++++++
 4 files changed, 51 insertions(+), 4 deletions(-)
 create mode 100644 apps/docs/utils/icon-list.ts

diff --git a/apps/docs/stories/1_4_Icons.stories.mdx b/apps/docs/stories/1_4_Icons.stories.mdx
index 9053b5f38..8c920cb9a 100644
--- a/apps/docs/stories/1_4_Icons.stories.mdx
+++ b/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>
diff --git a/apps/docs/utils/icon-list.ts b/apps/docs/utils/icon-list.ts
new file mode 100644
index 000000000..bab9368ec
--- /dev/null
+++ b/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',
+  ],
+}
diff --git a/packages/icons/scripts/generate-types.ts b/packages/icons/scripts/generate-types.ts
index a982b285d..864f84ac6 100644
--- a/packages/icons/scripts/generate-types.ts
+++ b/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)
 }
 
diff --git a/packages/icons/scripts/helpers.ts b/packages/icons/scripts/helpers.ts
index 597b1eea5..a707a7b7e 100644
--- a/packages/icons/scripts/helpers.ts
+++ b/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
+  )
+}