@popina/cli 5.0.1-20260204192447Z → 5.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@popina/cli",
-  "version": "5.0.1-20260204192447Z",
+  "version": "5.0.1",
   "description": "Popina CLI",
   "repository": {
     "type": "git",
@@ -20,8 +20,8 @@
   "author": "François Veauvy",
   "devDependencies": {
     "eslint": "^9.19.0",
-    "@pragma/config": "3.0.0",
-    "@pragma/eslint": "1.3.5",
+    "@pragma/config": "3.1.0",
+    "@pragma/eslint": "1.3.6",
     "@pragma/tsconfig": "1.0.2"
   },
   "dependencies": {

package/turbo/generators/plopGenerator/icon.ts

@@ -1,12 +1,23 @@
 import fs from 'fs'
+import { createRequire } from 'module'
 import path from 'path'
 import type { PlopTypes } from '@turbo/gen'
 
+const require = createRequire(import.meta.url)
+
 export const generatorIcon = (plop: PlopTypes.NodePlopAPI) => {
+  const absoluteUiIconsPath = path.resolve(
+    plop.getDestBasePath(),
+    '../../packages/ui/src/icons',
+  )
+  const absoluteUiPackageRoot = path.resolve(
+    plop.getDestBasePath(),
+    '../../packages/ui',
+  )
+
   plop.setGenerator('icon', {
     description: 'Create a new icon in @pragma/ui',
     prompts: [
-      // Prompt the user to choose how to create the icon
       {
         type: 'list',
         name: 'iconSource',
@@ -16,7 +27,6 @@ export const generatorIcon = (plop: PlopTypes.NodePlopAPI) => {
           '🔹 Create Custom SVG',
         ],
       },
-      // Prompt to enter the name of the Lucide icon to import (if chosen)
       {
         type: 'input',
         name: 'importedIconName',
@@ -25,67 +35,50 @@ export const generatorIcon = (plop: PlopTypes.NodePlopAPI) => {
           answers.iconSource ===
           '🔸 Import Lucide React from "https://lucide.dev/icons/"',
         validate: (input) => {
-          if (!input) {
-            return 'Icon name is required.'
-          }
+          if (!input) return 'Icon name is required.'
 
-          // Trim and convert the icon name to PascalCase
           const importedIconName = input.trim()
           const pascalCaseImportedIconName =
             importedIconName[0].toUpperCase() + importedIconName.slice(1)
           const importedIconFileName = `${importedIconName}.js`
 
-          // Build file paths
-          const importedIconFilePath = path.join(
-            plop.getDestBasePath(),
-            '/node_modules/lucide-react/dist/esm/icons/' + importedIconFileName,
-          )
-          const iconIndexFilePath = path.join(
-            plop.getDestBasePath(),
-            'packages/ui/src/icons/index.tsx',
-          )
+          const iconIndexFilePath = path.join(absoluteUiIconsPath, 'index.tsx')
 
-          // Check if the Lucide icon file exists
-          if (!fs.existsSync(importedIconFilePath)) {
-            return `The icon ${importedIconName} is not found in the Lucide React list. Please choose a different name or verify the icon exists. Refer to the website: 👉 https://lucide.dev/icons/ 👈`
+          try {
+            require.resolve(
+              `lucide-react/dist/esm/icons/${importedIconFileName}`,
+              {
+                paths: [absoluteUiPackageRoot],
+              },
+            )
+          } catch (error) {
+            return `The icon "${importedIconName}" is not found in Lucide React. Verify: https://lucide.dev/icons/`
           }
 
-          // Check if the Lucide icon name already exists in the index.tsx file
           if (fs.existsSync(iconIndexFilePath)) {
             const iconIndexContent = fs.readFileSync(iconIndexFilePath, 'utf-8')
             const iconIndexPattern = new RegExp(
               `\\b${pascalCaseImportedIconName}\\b`,
             )
-
             if (iconIndexPattern.test(iconIndexContent)) {
-              return `The icon name "${pascalCaseImportedIconName}" already exists in the index.tsx file. Please choose a different name.`
+              return `The icon name "${pascalCaseImportedIconName}" already exists in index.tsx.`
             }
           }
-
           return true
         },
       },
-      // Prompt to enter the name of the custom SVG icon (if chosen)
       {
         type: 'input',
         name: 'customIconName',
         message: 'What is the name of the icon you want to create?',
         when: (answers) => answers.iconSource === '🔹 Create Custom SVG',
         validate: (input) => {
-          if (!input) {
-            return 'Icon name is required.'
-          }
+          if (!input) return 'Icon name is required.'
 
-          // Trim and convert the icon name to PascalCase
           const pascalCaseCustomIconName = plop.getHelper('pascalCase')(input)
 
-          // Build the file path for the custom SVG icon
-          const customIconFilePath = path.join(
-            plop.getDestBasePath(),
-            'packages/ui/src/icons/index.tsx',
-          )
+          const customIconFilePath = path.join(absoluteUiIconsPath, 'index.tsx')
 
-          // Check if the custom SVG icon file already exists
           if (fs.existsSync(customIconFilePath)) {
             const iconIndexContent = fs.readFileSync(
               customIconFilePath,
@@ -94,12 +87,10 @@ export const generatorIcon = (plop: PlopTypes.NodePlopAPI) => {
             const iconIndexPattern = new RegExp(
               `\\b${pascalCaseCustomIconName}\\b`,
             )
-
             if (iconIndexPattern.test(iconIndexContent)) {
-              return `The icon name "${pascalCaseCustomIconName}" already exists in the index.tsx file. Please choose a different name.`
+              return `The icon name "${pascalCaseCustomIconName}" already exists in index.tsx.`
             }
           }
-
           return true
         },
       },
@@ -112,16 +103,15 @@ export const generatorIcon = (plop: PlopTypes.NodePlopAPI) => {
         const camelCaseCustomName = plop.getHelper('camelCase')(iconName)
         const customIconFileName = `${iconName}.tsx`
         const importStatement = `import { ${iconName} } from './${iconName}'`
-        const customIconFilePath = path.join(
-          plop.getDestBasePath(),
-          'packages/ui/src/icons/' + customIconFileName,
+        const finalCustomIconPath = path.join(
+          absoluteUiIconsPath,
+          customIconFileName,
         )
 
-        // Add actions for '🔹 Create Custom SVG'
         actions.push(
           {
             type: 'add',
-            path: customIconFilePath,
+            path: finalCustomIconPath,
             templateFile: 'templates/icon/icon-react.hbs',
           },
           {
@@ -139,41 +129,38 @@ export const generatorIcon = (plop: PlopTypes.NodePlopAPI) => {
         )
       }
 
-      if (
-        answers &&
-        answers.iconSource ===
-          '🔸 Import Lucide React from "https://lucide.dev/icons/"'
-      ) {
+      if (answers && answers.iconSource.includes('Import Lucide React')) {
         const importedIconName = answers.importedIconName
-
         let pascalCaseImportedIconName: string
 
         if (importedIconName.includes('-')) {
-          const splittedAnswer: string[] = answers.importedIconName.split('-') // ['air', 'vent']
-
+          const splittedAnswer: string[] = answers.importedIconName.split('-')
           pascalCaseImportedIconName = splittedAnswer.reduce<string>(
-            (acc, word) => {
-              return acc + word[0].toUpperCase() + word.slice(1)
-            },
+            (acc, word) => acc + word[0].toUpperCase() + word.slice(1),
             '',
           )
-          console.log(pascalCaseImportedIconName)
         } else {
           pascalCaseImportedIconName =
             importedIconName[0].toUpperCase() + importedIconName.slice(1)
         }
 
         const importedIconFileName = `${importedIconName}.js`
-        const importedIconFilePath = path.join(
-          plop.getDestBasePath(),
-          '/node_modules/lucide-react/dist/esm/icons/' + importedIconFileName,
-        )
 
-        if (fs.existsSync(importedIconFilePath)) {
-          const importKey = `${pascalCaseImportedIconName[0].toLowerCase()}${pascalCaseImportedIconName.slice(
-            1,
-          )}`
-          // Add actions for '🔸 Import Lucide React since "https://lucide.dev/icons/"'
+        let iconExists = false
+        try {
+          require.resolve(
+            `lucide-react/dist/esm/icons/${importedIconFileName}`,
+            {
+              paths: [absoluteUiPackageRoot],
+            },
+          )
+          iconExists = true
+        } catch (e) {
+          iconExists = false
+        }
+
+        if (iconExists) {
+          const importKey = `${pascalCaseImportedIconName[0].toLowerCase()}${pascalCaseImportedIconName.slice(1)}`
           actions.push(
             {
               type: 'modify',
@@ -188,10 +175,6 @@ export const generatorIcon = (plop: PlopTypes.NodePlopAPI) => {
               template: `\n  ${importKey}: ${pascalCaseImportedIconName},`,
             },
           )
-        } else {
-          console.error(
-            `The file "${importedIconFileName}" doesn't exist in the specified path.`,
-          )
         }
       }
 

package/turbo/generators/templates/icon/icon-react.hbs

@@ -5,15 +5,14 @@ interface {{pascalCase customIconName}}Props extends React.SVGProps<SVGSVGElemen
 }
 
 export const {{pascalCase customIconName}} =
-   ({ ref, className, ...props }: {{pascalCase customIconName}}Props) => {
+   ({ ref, className }: {{pascalCase customIconName}}Props) => {
     return (
       <svg
         xmlns="http://www.w3.org/2000/svg"
         width="24"
         height="24"
         viewBox="0 0 24 24"
-        fill="none"
-        stroke="#f62992"
+        fill="currentColor"
         strokeWidth="2"
         strokeLinecap="round"
         strokeLinejoin="round">
@@ -27,6 +26,6 @@ export const {{pascalCase customIconName}} =
 /**
  * TODO: Then add in svg
  * ref={ref}
- * className={props.className}
+ * className={className}
  * fill="currentColor"
  */