refactor: add id-length rule

gravity-ui · May 22, 2024 · 93bf346 · 93bf346
1 parent 0fc156e
commit 93bf346
Show file tree

Hide file tree

Showing 14 changed files with 28 additions and 20 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -8,7 +8,7 @@
     ],
     "root": true,
     "rules": {
-        "id-length": ["error", { "min": 2, "properties": "never", "exceptions": ["b", "i", "_"] }],
+        "id-length": ["error", { "min": 2, "properties": "never", "exceptions": ["b", "_"] }],
         "react/jsx-fragments": [
             "error",
             "element"

diff --git a/src/components/Alert/AlertActions.tsx b/src/components/Alert/AlertActions.tsx
@@ -18,8 +18,8 @@ export const AlertActions = ({items, children, className}: AlertActionsProps) =>
             wrap
             alignItems={layout === 'horizontal' ? 'center' : 'flex-start'}
         >
-            {items?.map(({handler, text}, i) => (
-                <AlertAction key={i} onClick={handler}>
+            {items?.map(({handler, text}, index) => (
+                <AlertAction key={index} onClick={handler}>
                     {text}
                 </AlertAction>
             )) || children}

diff --git a/src/components/Breadcrumbs/Breadcrumbs.tsx b/src/components/Breadcrumbs/Breadcrumbs.tsx
@@ -238,8 +238,8 @@ export class Breadcrumbs<T extends BreadcrumbsItem = BreadcrumbsItem> extends Re
             ];
 
             const itemsWidths = items.map(
-                (elem, i) =>
-                    elem.scrollWidth + (i === items.length - 1 ? GAP_WIDTH : GAP_WIDTH * 2),
+                (elem, index) =>
+                    elem.scrollWidth + (index === items.length - 1 ? GAP_WIDTH : GAP_WIDTH * 2),
             );
             const dividersWidths = dividers.map((elem) => elem.offsetWidth);
             const buttonsWidth = itemsWidths.reduce((total, width, index, widths) => {

diff --git a/src/components/List/List.tsx b/src/components/List/List.tsx
@@ -81,6 +81,7 @@ export class List<T = unknown> extends React.Component<ListProps<T>, ListState<T
         const dataLength = list.length;
         let currentIndex = (index + dataLength) % dataLength;
 
+        // eslint-disable-next-line id-length
         for (let i = 0; i < dataLength; i += 1) {
             if (list[currentIndex] && !list[currentIndex].disabled) {
                 return currentIndex;

diff --git a/src/components/Slider/utils.ts b/src/components/Slider/utils.ts
@@ -36,6 +36,7 @@ function calculateInfoPoints({count = 0, max, min}: {min: number; max: number; c
         const points = [];
         const step = Math.abs(max - min) / (count - 1);
 
+        // eslint-disable-next-line id-length
         for (let i = 0; i < count; i++) {
             points.push(Math.round((min + step * i) * 100) / 100);
         }
@@ -62,6 +63,7 @@ export function getMarksFromInfoPoints({
         if (step === 0) {
             marks[min] = min;
         } else {
+            // eslint-disable-next-line id-length
             for (let i = 0; i < infoPointsCount; i++) {
                 const point = Math.round((min + step * i) * 100) / 100;
                 marks[point] = point;
@@ -75,10 +77,10 @@ function createMarks(points: number[]): RcSliderProps['marks'] {
     const marks: RcSliderProps['marks'] = {};
 
     const lastIndex = points.length - 1;
-    points.forEach((point, i) => {
-        if (i === 0) {
+    points.forEach((point, index) => {
+        if (index === 0) {
             marks[point] = {label: point, style: CLEAR_MARK_STYLE};
-        } else if (i === lastIndex) {
+        } else if (index === lastIndex) {
             marks[point] = {label: point, style: CLEAR_MARK_STYLE};
         } else {
             marks[point] = point;

diff --git a/src/components/Table/hoc/withTableSelection/withTableSelection.tsx b/src/components/Table/hoc/withTableSelection/withTableSelection.tsx
@@ -132,9 +132,10 @@ export function withTableSelection<I extends TableDataItem, E extends {} = {}>(
                 const begin = Math.min(this.lastCheckedIndex, index);
                 const end = Math.max(this.lastCheckedIndex, index);
 
-                const dataIds = data.map((item, i) => Table.getRowId(this.props, item, i));
+                const dataIds = data.map((item, index) => Table.getRowId(this.props, item, index));
                 const diffIds = dataIds.filter(
-                    (_id, i) => begin <= i && i <= end && !this.isDisabled(data[i], i),
+                    (_id, index) =>
+                        begin <= index && index <= end && !this.isDisabled(data[index], index),
                 );
 
                 onSelectionChange(

diff --git a/src/components/Table/hoc/withTableSorting/withTableSorting.tsx b/src/components/Table/hoc/withTableSorting/withTableSorting.tsx
@@ -84,6 +84,7 @@ export function withTableSorting<I extends TableDataItem, E extends {} = {}>(
             }
 
             return data.slice().sort((itemA, itemB) => {
+                // eslint-disable-next-line id-length
                 let i = 0;
                 while (i < sortState.length) {
                     const state = sortState[i++];

diff --git a/src/components/useList/hooks/useListKeydown.tsx b/src/components/useList/hooks/useListKeydown.tsx
@@ -40,7 +40,7 @@ export const useListKeydown = ({
         (event: KeyboardEvent, step: number, defaultItemIndex = 0) => {
             event.preventDefault();
 
-            const maybeIndex = visibleFlattenIds.findIndex((i) => i === activeItemId);
+            const maybeIndex = visibleFlattenIds.findIndex((id) => id === activeItemId);
 
             const nextIndex = findNextIndex({
                 list: visibleFlattenIds,

diff --git a/src/components/useList/utils/findNextIndex.ts b/src/components/useList/utils/findNextIndex.ts
@@ -9,6 +9,7 @@ export const findNextIndex = ({list, index, step, disabledItems = {}}: FindNextI
     const dataLength = list.length;
     let currentIndex = (index + dataLength) % dataLength;
 
+    // eslint-disable-next-line id-length
     for (let i = 0; i < dataLength; i += 1) {
         if (list[currentIndex] && !disabledItems[currentIndex]) {
             return currentIndex;

diff --git a/src/demo/DocsExample/DocsExample.tsx b/src/demo/DocsExample/DocsExample.tsx
@@ -25,8 +25,8 @@ export function DocsExample({
 }: DocsExampleProps) {
     return (
         <div style={{background}} className={b({distribute, gap, space, rounded})}>
-            {React.Children.map(children, (elem, i) => (
-                <div key={i} className={b('item')}>
+            {React.Children.map(children, (elem, index) => (
+                <div key={index} className={b('item')}>
                     {elem}
                 </div>
             ))}

diff --git a/src/demo/ShowcaseGrid/getPropsCombinations.tsx b/src/demo/ShowcaseGrid/getPropsCombinations.tsx
@@ -43,6 +43,7 @@ export function getPropsCombinations<ComponentType extends React.ElementType>({
         };
     });
 
+    // eslint-disable-next-line id-length
     for (let i = 1; i < propNames.length; i++) {
         const newCombination = cache.reduce<PropSequences<React.ComponentProps<ComponentType>>>(
             (result, combination) => {

diff --git a/src/demo/colors/ColorTable.tsx b/src/demo/colors/ColorTable.tsx
@@ -15,6 +15,7 @@ export interface ColorTableProps {
 const b = cn('color-table');
 
 const steps: number[] = [];
+// eslint-disable-next-line id-length
 for (let i = 50; i <= 1000; i += 50) {
     steps.push(i);
 }

diff --git a/src/stories/Branding/BrandingConfugurator/BrandingConfigurator.tsx b/src/stories/Branding/BrandingConfugurator/BrandingConfigurator.tsx
@@ -121,8 +121,8 @@ export function BrandingConfigurator({theme}: BrandingConfiguratorProps) {
                     </Button>
                 </div>
                 <div className={b('colors')}>
-                    {paletteColors.map((color, i) => (
-                        <div key={i} className={b('color')} style={{backgroundColor: color}} />
+                    {paletteColors.map((color, index) => (
+                        <div key={index} className={b('color')} style={{backgroundColor: color}} />
                     ))}
                 </div>
             </div>

diff --git a/src/stories/Branding/PaletteGenerator/PaletteGenerator.tsx b/src/stories/Branding/PaletteGenerator/PaletteGenerator.tsx
@@ -59,11 +59,11 @@ export function PaletteGenerator({theme}: BrandingConfiguratorProps) {
     const palette = React.useMemo(() => {
         return Object.entries(colorsMap).reduce(
             (res, [key, {a, c}]) => {
-                const i = Number(key);
+                const parsedKey = Number(key);
                 const solidColor = chroma
                     .mix(color, c > 0 ? highContrastBase : lowContrastBase, 1 - a, 'rgb')
                     .css();
-                const alphaColor = i > 500 ? '' : chroma(color).alpha(a).css();
+                const alphaColor = parsedKey > 500 ? '' : chroma(color).alpha(a).css();
 
                 res[key] = [solidColor, alphaColor];
 
@@ -192,10 +192,10 @@ export function PaletteGenerator({theme}: BrandingConfiguratorProps) {
             <div className={b('title')}>Palette</div>
             <div className={b('palette')}>
                 <div className={b('palette-grid')}>
-                    {Object.entries(palette).map(([i, colors]) => {
+                    {Object.entries(palette).map(([index, colors]) => {
                         return (
-                            <React.Fragment key={i}>
-                                <div className={b('palette-item-number')}>{i}</div>
+                            <React.Fragment key={index}>
+                                <div className={b('palette-item-number')}>{index}</div>
                                 <div
                                     className={b('palette-item-color')}
                                     style={{backgroundColor: lowContrastBase}}