feat: create IconBase component, add script to create Icon.tsx file

Author: RohitRaj011

.eslintignore

@@ -1,4 +1,5 @@
 .eslintrc.cjs
+scripts/*.cjs
 
 # Files with ESLint errors/warnings
 src/Common/AddCDButton/AddCDButton.tsx

.husky/pre-commit

@@ -17,5 +17,34 @@
 
 . "$(dirname "$0")/_/husky.sh"
 
-npx tsc --noEmit
-npm run lint-staged
+echo "Running pre-commit hook..."
+
+# Check for changes in the Icon folder
+CHANGED_FILES=$(git diff --cached --name-only --diff-filter=ACMR | grep 'IconV2/')
+
+if [ -n "$CHANGED_FILES" ]; then
+    echo "Changes detected in the Icon folder. Running icon generation script..."
+    
+    if ! npm run generate-icon; then
+        echo "Error: Icon generation script failed."
+        exit 1
+    fi
+    
+    git add src/Shared/Components/Icon/Icon.tsx
+else
+    echo "No changes in the IconsV2 folder. Skipping icon generation."
+fi
+
+# TypeScript check
+if ! npx tsc --noEmit; then
+    echo "Error: TypeScript check failed."
+    exit 1
+fi
+
+# Lint-staged
+if ! npm run lint-staged; then
+    echo "Error: Lint-staged failed."
+    exit 1
+fi
+
+echo "Pre-commit hook completed successfully."

package.json

@@ -32,7 +32,8 @@
         "build-lib": "vite build",
         "preview": "vite preview",
         "lint-staged": "lint-staged",
-        "postinstall": "patch-package"
+        "postinstall": "patch-package",
+        "generate-icon": "node ./scripts/generate-icon.cjs"
     },
     "devDependencies": {
         "@esbuild-plugins/node-globals-polyfill": "0.2.3",

scripts/generate-icon.cjs

@@ -0,0 +1,85 @@
+const fs = require('fs')
+const path = require('path')
+const { exec } = require('child_process')
+
+// Base path relative to the current script
+const basePath = path.resolve(__dirname, '../src')
+
+// Directory containing SVG icons and the output file
+const iconsDir = path.join(basePath, 'Assets', 'IconV2')
+const outputFile = path.join(basePath, 'Shared', 'Components', 'Icon', 'Icon.tsx')
+
+const runESLint = (filePath) => {
+    exec(`npx eslint ${filePath} --fix`, (error, stdout, stderr) => {
+        if (error) {
+            console.error(`Error running ESLint: ${error.message}`)
+            return
+        }
+        if (stderr) {
+            console.error(`ESLint stderr: ${stderr}`)
+        }
+        if (stdout) {
+            console.log(`ESLint output:\n${stdout}`)
+        }
+        console.log('ESLint completed successfully.')
+    })
+}
+
+const generateIconComponent = () => {
+    // Read all files in the icons directory
+    const files = fs.readdirSync(iconsDir)
+
+    // Filter for SVG files
+    const svgFiles = files.filter((file) => file.endsWith('.svg'))
+
+    // Generate import statements and the icon map
+    const imports = []
+    const iconMapEntries = []
+
+    svgFiles.forEach((file) => {
+        // Remove the .svg extension
+        const iconName = path.basename(file, '.svg')
+        // Convert icon-name to IconName for importName
+        const importName = iconName
+            .replace(/(^\w+)/, (match) => match.toUpperCase())
+            .replace(/-./g, (match) => match[1].toUpperCase())
+        // Push imports statement
+        imports.push(`import { ReactComponent as ${importName} } from '@IconsV2/${file}'`)
+        // Push icons to iconMap
+        iconMapEntries.push(`["${iconName}"]: ${importName},`)
+    })
+
+    // Generate the Icon.tsx content
+    const content = `
+    // NOTE: This file is auto-generated. Do not edit directly. Run the script \`npm run generate-icon\` to update.
+
+    ${imports.join('\n')}
+
+    import { IconBase } from './IconBase';
+    import { IconBaseProps } from './types';
+
+    const iconMap = {
+        ${iconMapEntries.join('\n')}
+    };
+
+    export type IconName = keyof typeof iconMap;
+
+    export interface IconsProps extends Omit<IconBaseProps, 'name' | 'iconMap'> {
+        name: keyof typeof iconMap;
+    }
+
+    export const Icon = (props: IconsProps) => {
+        return <IconBase {...props} iconMap={iconMap} />;
+    };
+`
+
+    // Write the content to the Icon.tsx file
+    fs.writeFileSync(outputFile, content.trim(), 'utf-8')
+    console.log(`Icon component file generated at: ${outputFile}`)
+
+    // Run ESLint on the generated file
+    runESLint(outputFile)
+}
+
+// Run the script
+generateIconComponent()

src/Assets/IconV2/ic-clock.svg

@@ -0,0 +1,18 @@
+// NOTE: This file is auto-generated. Do not edit directly. Run the script `npm run generate-icon` to update.
+
+import { ReactComponent as ICClock } from '@IconsV2/ic-clock.svg'
+
+import { IconBase } from './IconBase'
+import { IconBaseProps } from './types'
+
+const iconMap = {
+    'ic-clock': ICClock,
+}
+
+export type IconName = keyof typeof iconMap
+
+export interface IconsProps extends Omit<IconBaseProps, 'name' | 'iconMap'> {
+    name: keyof typeof iconMap
+}
+
+export const Icon = (props: IconsProps) => <IconBase {...props} iconMap={iconMap} />

src/Shared/Components/Icon/Icon.tsx

@@ -0,0 +1,11 @@
+import { IconBaseProps } from './types'
+
+export const IconBase = ({ name, iconMap, size = 24 }: IconBaseProps) => {
+    const IconComponent = iconMap[name]
+
+    if (!IconComponent) {
+        throw new Error(`Icon with name "${name}" does not exist.`)
+    }
+
+    return <IconComponent className={`icon-dim-${size}`} />
+}

src/Shared/Components/Icon/IconBase.tsx

@@ -0,0 +1 @@
+export * from './Icon'

src/Shared/Components/Icon/index.ts

@@ -0,0 +1,9 @@
+import { FC, SVGProps } from 'react'
+
+type IconMap = Record<string, FC<SVGProps<SVGSVGElement>>>
+
+export interface IconBaseProps {
+    name: keyof IconMap
+    iconMap: IconMap
+    size?: 6 | 8 | 10 | 12 | 14 | 16 | 18 | 20 | 22 | 24 | 28 | 30 | 32 | 34 | 36 | 40 | 42 | 44 | 48 | 72 | 80
+}

src/Shared/Components/Icon/types.ts

@@ -76,3 +76,4 @@ export * from './ThemeSwitcher'
 export * from './TargetPlatforms'
 export * from './UnsavedChanges'
 export * from './UnsavedChangesDialog'
+export * from './Icon'