Merge pull request #599 from devtron-labs/release-candidate-v0.30.0

release: Release candidate v0.30.0

Author: eshankvaish

.eslintignore

@@ -1,4 +1,5 @@
 .eslintrc.cjs
+scripts/*.cjs
 
 # Files with ESLint errors/warnings
 src/Common/AddCDButton/AddCDButton.tsx
@@ -13,7 +14,6 @@ src/Common/Checkbox.tsx
 src/Common/ClipboardButton/__tests__/ClipboardButton.test.tsx
 src/Common/CodeEditor/CodeEditor.tsx
 src/Common/Common.service.ts
-src/Common/CustomInput/CustomInput.tsx
 src/Common/CustomTagSelector/PropagateTagInfo.tsx
 src/Common/CustomTagSelector/TagDetails.tsx
 src/Common/CustomTagSelector/TagLabelValueSelector.tsx

.eslintrc.cjs

@@ -122,7 +122,13 @@ module.exports = {
                             {
                                 name: 'react-toastify',
                                 message: 'Please use "ToastManager.showToast" instead.',
-                            }
+                            },
+                        ],
+                        patterns: [
+                            {
+                                group: ['IconBase'],
+                                message: 'Please use "Icon" component instead.',
+                            },
                         ],
                     },
                 ],

.husky/pre-commit

@@ -17,5 +17,35 @@
 
 . "$(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 -E 'IconV2/|generate-icon.cjs' || true)
+
+if [ -n "$CHANGED_FILES" ]; then
+    echo "Changes detected in the Icon folder or icon generation script. Running icon generation script..."
+    
+    if ! npm run generate-icon; then
+        echo "Error: Icon generation script failed."
+        exit 1
+    fi
+    
+    echo "Icon.tsx updated. Adding to commit."
+    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-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "1.7.0-patch-1",
+    "version": "1.8.0",
     "description": "Supporting common component library",
     "type": "module",
     "main": "dist/index.js",
@@ -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",
@@ -84,7 +85,7 @@
         "@rjsf/utils": "^5.13.3",
         "@rjsf/validator-ajv8": "^5.13.3",
         "@typeform/embed-react": "2.20.0",
-        "dompurify": "^3.0.2",
+        "dompurify": "^3.2.4",
         "patch-package": "^8.0.0",
         "react": "^17.0.2",
         "react-dom": "^17.0.2",
@@ -111,7 +112,7 @@
         "dayjs": "^1.11.13",
         "fast-json-patch": "^3.1.1",
         "framer-motion": "^6.5.1",
-        "jsonpath-plus": "^10.0.0",
+        "jsonpath-plus": "^10.3.0",
         "marked": "^13.0.3",
         "nanoid": "^3.3.8",
         "react-codemirror-merge": "4.23.6",

package.json

@@ -0,0 +1,87 @@
+const fs = require('fs')
+const path = require('path')
+const { execFile } = 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) => {
+    execFile('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')}
+
+    // eslint-disable-next-line no-restricted-imports
+    import { IconBase } from './IconBase';
+    import { IconBaseProps } from './types';
+
+    export const iconMap = {
+        ${iconMapEntries.join('\n')}
+    };
+
+    export type IconName = keyof typeof iconMap;
+
+    export interface IconsProps extends Omit<IconBaseProps, 'name' | 'iconMap'> {
+        /** The name of the icon to render. */
+        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()