feat: update eslint to restrict IconBase usage, IconBase - add color, tooltip and strokeWidth support

Author: RohitRaj011

.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.',
+                            },
                         ],
                     },
                 ],

scripts/generate-icon.cjs

@@ -55,6 +55,7 @@ const generateIconComponent = () => {
 
     ${imports.join('\n')}
 
+    // eslint-disable-next-line no-restricted-imports
     import { IconBase } from './IconBase';
     import { IconBaseProps } from './types';
 

src/Shared/Components/Icon/IconBase.tsx

@@ -1,11 +1,30 @@
+import { ConditionalWrap } from '@Common/Helper'
+import { Tooltip } from '@Common/Tooltip'
+
 import { IconBaseProps } from './types'
 
-export const IconBase = ({ name, iconMap, size = 24 }: IconBaseProps) => {
+import './styles.scss'
+
+const conditionalWrap = (tooltipProps: IconBaseProps['tooltipProps']) => (children: JSX.Element) => (
+    <Tooltip {...tooltipProps}>
+        <div className="flex">{children}</div>
+    </Tooltip>
+)
+
+export const IconBase = ({ name, iconMap, size = 16, tooltipProps, color, strokeWidth }: IconBaseProps) => {
     const IconComponent = iconMap[name]
 
     if (!IconComponent) {
         throw new Error(`Icon with name "${name}" does not exist.`)
     }
 
-    return <IconComponent className={`icon-dim-${size}`} />
+    return (
+        <ConditionalWrap condition={!!tooltipProps?.content} wrap={conditionalWrap(tooltipProps)}>
+            <IconComponent
+                className={`icon-dim-${size} ${color ? 'icon-component' : ''} dc__no-shrink`}
+                style={color ? { ['--iconColor' as string]: `var(--${color})` } : {}}
+                strokeWidth={strokeWidth}
+            />
+        </ConditionalWrap>
+    )
 }

src/Shared/Components/Icon/styles.scss

@@ -0,0 +1,10 @@
+.icon-component {
+    &:not([data-style-override='false']) {
+        :where([stroke^='#']:not([data-style-override='false'])) {
+            stroke: var(--iconColor);
+        }
+        :where([fill^='#']:not([data-style-override='false'])) {
+            fill: var(--iconColor);
+        }
+    }
+}

src/Shared/Components/Icon/types.ts

@@ -1,9 +1,13 @@
-import { FC, SVGProps } from 'react'
+import { FC, SVGAttributes, SVGProps } from 'react'
+
+import { TooltipProps } from '@Common/Tooltip/types'
 
 type IconMap = Record<string, FC<SVGProps<SVGSVGElement>>>
 
-export interface IconBaseProps {
+export interface IconBaseProps extends Pick<SVGAttributes<SVGSVGElement>, 'strokeWidth'> {
     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
+    tooltipProps?: TooltipProps
+    color: `${'B' | 'N' | 'G' | 'Y' | 'R' | 'V' | 'O'}${`${1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9}00` | '50'}` | null
 }