refactor(eslint): add no-object-in-class-names (#5649)

VKCOM · Aug 22, 2023 · edcc8bb · edcc8bb
1 parent ba603f8
commit edcc8bb
Show file tree

Hide file tree

Showing 30 changed files with 283 additions and 252 deletions.
diff --git a/packages/vkui/.eslintrc.js b/packages/vkui/.eslintrc.js
@@ -101,6 +101,10 @@ module.exports = {
     ],
     'no-restricted-syntax': [
       'error',
+      {
+        selector: 'CallExpression[callee.name="classNames"] ObjectExpression',
+        message: 'Необходимо вынести объект на уровень модуля как константу',
+      },
       {
         selector: 'ImportDeclaration[source.value=/^\\W+(index(\\.ts)?)?$/i]',
         message: 'Do not import index',

diff --git a/packages/vkui/src/components/Badge/Badge.tsx b/packages/vkui/src/components/Badge/Badge.tsx
@@ -2,6 +2,11 @@ import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
 import styles from './Badge.module.css';
 
+const stylesMode = {
+  new: styles['Badge--mode-new'],
+  prominent: styles['Badge--mode-prominent'],
+};
+
 export interface BadgeProps extends React.HTMLAttributes<HTMLElement> {
   mode: 'new' | 'prominent';
 }
@@ -10,15 +15,5 @@ export interface BadgeProps extends React.HTMLAttributes<HTMLElement> {
  * @see https://vkcom.github.io/VKUI/#/Badge
  */
 export const Badge = ({ mode = 'new', className, ...restProps }: BadgeProps) => (
-  <span
-    className={classNames(
-      styles['Badge'],
-      {
-        new: styles['Badge--mode-new'],
-        prominent: styles['Badge--mode-prominent'],
-      }[mode],
-      className,
-    )}
-    {...restProps}
-  />
+  <span className={classNames(styles['Badge'], stylesMode[mode], className)} {...restProps} />
 );
diff --git a/packages/vkui/src/components/Banner/Banner.tsx b/packages/vkui/src/components/Banner/Banner.tsx
@@ -12,6 +12,11 @@ import { Text } from '../Typography/Text/Text';
 import { Title } from '../Typography/Title/Title';
 import styles from './Banner.module.css';
 
+const stylesSize = {
+  s: styles['Banner--size-s'],
+  m: styles['Banner--size-m'],
+};
+
 export interface BannerProps extends React.HTMLAttributes<HTMLDivElement>, HasRootRef<HTMLElement> {
   /**
    * Тип баннера.
@@ -153,10 +158,7 @@ export const Banner = ({
         !noPadding && styles['Banner--withPadding'],
         platform === Platform.IOS && styles['Banner--ios'],
         mode === 'image' && styles['Banner--mode-image'],
-        {
-          s: styles['Banner--size-s'],
-          m: styles['Banner--size-m'],
-        }[size],
+        stylesSize[size],
         mode === 'image' && imageTheme === 'dark' && styles['Banner--inverted'],
         className,
       )}

diff --git a/packages/vkui/src/components/BaseGallery/BaseGallery.tsx b/packages/vkui/src/components/BaseGallery/BaseGallery.tsx
@@ -31,6 +31,10 @@ const SHIFT_DEFAULT_STATE = {
   indent: 0,
 };
 
+const stylesBullets = {
+  dark: styles['BaseGallery__bullets--dark'],
+  light: styles['BaseGallery__bullets--light'],
+};
 export const BaseGallery = ({
   bullets = false,
   getRootRef,
@@ -343,13 +347,7 @@ export const BaseGallery = ({
       {bullets && (
         <div
           aria-hidden
-          className={classNames(
-            styles['BaseGallery__bullets'],
-            {
-              dark: styles['BaseGallery__bullets--dark'],
-              light: styles['BaseGallery__bullets--light'],
-            }[bullets],
-          )}
+          className={classNames(styles['BaseGallery__bullets'], stylesBullets[bullets])}
         >
           {React.Children.map(children, (_item: React.ReactNode, index: number) => (
             <div

diff --git a/packages/vkui/src/components/Button/Button.tsx b/packages/vkui/src/components/Button/Button.tsx
@@ -10,6 +10,35 @@ import { Tappable, TappableProps } from '../Tappable/Tappable';
 import '../Spinner/Spinner.module.css';
 import styles from './Button.module.css';
 
+const stylesSize = {
+  s: styles['Button--size-s'],
+  m: styles['Button--size-m'],
+  l: styles['Button--size-l'],
+};
+
+const stylesMode = {
+  primary: styles['Button--mode-primary'],
+  secondary: styles['Button--mode-secondary'],
+  tertiary: styles['Button--mode-tertiary'],
+  outline: styles['Button--mode-outline'],
+  link: styles['Button--mode-link'],
+};
+
+const stylesAppearance = {
+  'accent': styles['Button--appearance-accent'],
+  'positive': styles['Button--appearance-positive'],
+  'negative': styles['Button--appearance-negative'],
+  'neutral': styles['Button--appearance-neutral'],
+  'overlay': styles['Button--appearance-overlay'],
+  'accent-invariable': styles['Button--appearance-accent-invariable'],
+};
+
+const stylesAlign = {
+  left: styles['Button--align-left'],
+  center: styles['Button--align-center'],
+  right: styles['Button--align-right'],
+};
+
 const sizeYClassNames = {
   none: styles['Button--sizeY-none'],
   [SizeType.REGULAR]: styles['Button--sizeY-regular'],
@@ -65,31 +94,10 @@ export const Button = ({
       className={classNames(
         className,
         styles.Button,
-        {
-          s: styles['Button--size-s'],
-          m: styles['Button--size-m'],
-          l: styles['Button--size-l'],
-        }[size],
-        {
-          primary: styles['Button--mode-primary'],
-          secondary: styles['Button--mode-secondary'],
-          tertiary: styles['Button--mode-tertiary'],
-          outline: styles['Button--mode-outline'],
-          link: styles['Button--mode-link'],
-        }[mode],
-        {
-          'accent': styles['Button--appearance-accent'],
-          'positive': styles['Button--appearance-positive'],
-          'negative': styles['Button--appearance-negative'],
-          'neutral': styles['Button--appearance-neutral'],
-          'overlay': styles['Button--appearance-overlay'],
-          'accent-invariable': styles['Button--appearance-accent-invariable'],
-        }[appearance],
-        {
-          left: styles['Button--align-left'],
-          center: styles['Button--align-center'],
-          right: styles['Button--align-right'],
-        }[align],
+        stylesSize[size],
+        stylesMode[mode],
+        stylesAppearance[appearance],
+        stylesAlign[align],
         sizeY !== SizeType.COMPACT && sizeYClassNames[sizeY],
         platform === Platform.IOS && styles['Button--ios'],
         stretched && styles['Button--stretched'],

diff --git a/packages/vkui/src/components/ButtonGroup/ButtonGroup.tsx b/packages/vkui/src/components/ButtonGroup/ButtonGroup.tsx
@@ -3,6 +3,23 @@ import { classNames } from '@vkontakte/vkjs';
 import type { AlignType, HasRootRef } from '../../types';
 import styles from './ButtonGroup.module.css';
 
+const stylesMode = {
+  vertical: styles['ButtonGroup--mode-vertical'],
+  horizontal: styles['ButtonGroup--mode-horizontal'],
+};
+
+const stylesGap = {
+  space: styles['ButtonGroup--gap-space'],
+  s: styles['ButtonGroup--gap-s'],
+  m: styles['ButtonGroup--gap-m'],
+};
+
+const stylesAlign = {
+  left: styles['ButtonGroup--align-left'],
+  center: styles['ButtonGroup--align-center'],
+  right: styles['ButtonGroup--align-right'],
+};
+
 export interface ButtonGroupProps
   extends React.HTMLAttributes<HTMLDivElement>,
     HasRootRef<HTMLDivElement> {
@@ -44,22 +61,10 @@ export const ButtonGroup = ({
       className={classNames(
         className,
         styles.ButtonGroup,
-        {
-          vertical: styles['ButtonGroup--mode-vertical'],
-          horizontal: styles['ButtonGroup--mode-horizontal'],
-        }[mode],
-        gap !== 'none' &&
-          {
-            space: styles['ButtonGroup--gap-space'],
-            s: styles['ButtonGroup--gap-s'],
-            m: styles['ButtonGroup--gap-m'],
-          }[gap],
+        stylesMode[mode],
+        gap !== 'none' && stylesGap[gap],
         stretched && styles['ButtonGroup--stretched'],
-        {
-          left: styles['ButtonGroup--align-left'],
-          center: styles['ButtonGroup--align-center'],
-          right: styles['ButtonGroup--align-right'],
-        }[align],
+        stylesAlign[align],
       )}
       role="group"
       ref={getRootRef}

diff --git a/packages/vkui/src/components/CardGrid/CardGrid.tsx b/packages/vkui/src/components/CardGrid/CardGrid.tsx
@@ -9,6 +9,12 @@ const sizeXClassNames = {
   [SizeType.COMPACT]: styles['CardGrid--sizeX-compact'],
 };
 
+const stylesSize = {
+  s: 'vkuiInternalCardGrid--size-s',
+  m: 'vkuiInternalCardGrid--size-m',
+  l: 'vkuiInternalCardGrid--size-l',
+};
+
 export interface CardGridProps extends React.HTMLAttributes<HTMLDivElement> {
   size?: 's' | 'm' | 'l';
   /**
@@ -36,11 +42,7 @@ export const CardGrid = ({
         styles['CardGrid'],
         'vkuiInternalCardGrid',
         spaced && styles['CardGrid--spaced'],
-        {
-          s: 'vkuiInternalCardGrid--size-s',
-          m: 'vkuiInternalCardGrid--size-m',
-          l: 'vkuiInternalCardGrid--size-l',
-        }[size],
+        stylesSize[size],
         sizeX !== SizeType.REGULAR && sizeXClassNames[sizeX],
         className,
       )}

diff --git a/packages/vkui/src/components/CardScroll/CardScroll.tsx b/packages/vkui/src/components/CardScroll/CardScroll.tsx
@@ -4,6 +4,12 @@ import { useDOM } from '../../lib/dom';
 import { HorizontalScroll, HorizontalScrollProps } from '../HorizontalScroll/HorizontalScroll';
 import styles from './CardScroll.module.css';
 
+const stylesSize = {
+  s: 'vkuiInternalCardScroll--size-s',
+  m: 'vkuiInternalCardScroll--size-m',
+  l: 'vkuiInternalCardScroll--size-l',
+};
+
 export interface CardScrollProps extends React.HTMLAttributes<HTMLDivElement> {
   /**
    * При `size=false` ширина `Card` будет регулироваться контентом внутри. В остальных случаях — будет явно задана в процентах.
@@ -87,12 +93,7 @@ export const CardScroll = ({
       className={classNames(
         styles['CardScroll'],
         'vkuiInternalCardScroll',
-        size !== false &&
-          {
-            s: 'vkuiInternalCardScroll--size-s',
-            m: 'vkuiInternalCardScroll--size-m',
-            l: 'vkuiInternalCardScroll--size-l',
-          }[size],
+        size !== false && stylesSize[size],
         withSpaces && styles['CardScroll--withSpaces'],
         className,
       )}

diff --git a/packages/vkui/src/components/FixedLayout/FixedLayout.tsx b/packages/vkui/src/components/FixedLayout/FixedLayout.tsx
@@ -10,6 +10,14 @@ import { SplitColContext } from '../SplitCol/SplitColContext';
 import { TooltipContainer } from '../Tooltip/TooltipContainer';
 import styles from './FixedLayout.module.css';
 
+const stylesVertical = {
+  top: styles['FixedLayout--vertical-top'],
+  bottom: classNames(
+    styles['FixedLayout--vertical-bottom'],
+    'vkuiInternalFixedLayout--vertical-bottom',
+  ),
+};
+
 export interface FixedLayoutProps
   extends React.HTMLAttributes<HTMLDivElement>,
     HasRootRef<HTMLDivElement>,
@@ -84,14 +92,7 @@ export const FixedLayout = ({
         styles['FixedLayout'],
         platform === Platform.IOS && 'vkuiInternalFixedLayout--ios',
         filled && styles['FixedLayout--filled'],
-        vertical &&
-          {
-            top: styles['FixedLayout--vertical-top'],
-            bottom: classNames(
-              styles['FixedLayout--vertical-bottom'],
-              'vkuiInternalFixedLayout--vertical-bottom',
-            ),
-          }[vertical],
+        vertical && stylesVertical[vertical],
         className,
       )}
       style={{ ...style, width }}

diff --git a/packages/vkui/src/components/FocusVisible/FocusVisible.tsx b/packages/vkui/src/components/FocusVisible/FocusVisible.tsx
@@ -2,6 +2,12 @@ import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
 import styles from './FocusVisible.module.css';
 
+const stylesMode = {
+  inside: styles['FocusVisible--mode-inside'],
+  outside: styles['FocusVisible--mode-outside'],
+  outline: styles['FocusVisible--mode-outline'],
+};
+
 export type FocusVisibleMode = 'inside' | 'outside' | 'outline';
 
 export interface FocusVisibleProps {
@@ -21,11 +27,7 @@ export const FocusVisible = ({ visible, mode, thin, ...restProps }: FocusVisible
       styles['FocusVisible'],
       visible && styles['FocusVisible--visible'],
       thin && styles['FocusVisible--thin'],
-      {
-        inside: styles['FocusVisible--mode-inside'],
-        outside: styles['FocusVisible--mode-outside'],
-        outline: styles['FocusVisible--mode-outline'],
-      }[mode],
+      stylesMode[mode],
     )}
   />
 );
diff --git a/packages/vkui/src/components/FormField/FormField.tsx b/packages/vkui/src/components/FormField/FormField.tsx
@@ -13,6 +13,11 @@ const sizeYClassNames = {
   [SizeType.COMPACT]: styles['FormField--sizeY-compact'],
 };
 
+const stylesStatus = {
+  error: styles['FormField--status-error'],
+  valid: styles['FormField--status-valid'],
+};
+
 export interface FormFieldProps {
   status?: 'default' | 'error' | 'valid';
   /**
@@ -83,11 +88,7 @@ export const FormField = ({
       className={classNames(
         styles['FormField'],
         mode === 'default' && styles['FormField--mode-default'],
-        status !== 'default' &&
-          {
-            error: styles['FormField--status-error'],
-            valid: styles['FormField--status-valid'],
-          }[status],
+        status !== 'default' && stylesStatus[status],
         sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],
         disabled && styles['FormField--disabled'],
         !disabled && hover && styles['FormField--hover'],

diff --git a/packages/vkui/src/components/FormItem/FormItem.tsx b/packages/vkui/src/components/FormItem/FormItem.tsx
@@ -17,6 +17,11 @@ const sizeYClassNames = {
   ),
 };
 
+const stylesStatus = {
+  error: classNames(styles['FormItem--status-error'], 'vkuiInternalFormItem--status-error'),
+  valid: classNames(styles['FormItem--status-valid'], 'vkuiInternalFormItem--status-valid'),
+};
+
 export interface FormItemProps
   extends React.AllHTMLAttributes<HTMLElement>,
     HasRootRef<HTMLElement>,
@@ -98,17 +103,7 @@ export const FormItem = ({
         styles['FormItem'],
         !noPadding && styles['FormItem--withPadding'],
         'vkuiInternalFormItem',
-        status !== 'default' &&
-          {
-            error: classNames(
-              styles['FormItem--status-error'],
-              'vkuiInternalFormItem--status-error',
-            ),
-            valid: classNames(
-              styles['FormItem--status-valid'],
-              'vkuiInternalFormItem--status-valid',
-            ),
-          }[status],
+        status !== 'default' && stylesStatus[status],
         sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],
         hasReactNode(top) &&
           classNames(styles['FormItem--withTop'], 'vkuiInternalFormItem--withTop'),