BREAKING CHANGE: rm enums

docs/ADAPTIVITY_GUIDE.md

@@ -19,7 +19,7 @@
 **Пример 1.**
 
 ```tsx
-<AdaptivityProvider sizeX={SizeType.COMPACT}>
+<AdaptivityProvider sizeX="compact">
   <Component>lorem ipsum</Component>
 </AdaptivityProvider>
 ```
@@ -30,12 +30,11 @@ _Component.tsx_
 import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
 import { useAdaptivity } from '../../hooks/useAdaptivity';
-import { SizeType } from '../../../lib/adaptivity';
 import styles from './Component.module.css';
 
 const sizeXClassNames = {
   none: styles['Component--sizeX-none'], // означает, что sizeX не определён в AdaptivityProvider – используем `@media`
-  [SizeType.COMPACT]: styles['Component--sizeX-compact'],
+  ['compact']: styles['Component--sizeX-compact'],
 };
 
 const Component = () => {
@@ -46,7 +45,7 @@ const Component = () => {
       className={classNames(
         styles.Component,
         // компонент слушает только compact
-        sizeX !== SizeType.REGULAR && sizeXClassNames[sizeX],
+        sizeX !== 'regular' && sizeXClassNames[sizeX],
       )}
     />
   );

docs/TESTING.md

@@ -98,12 +98,11 @@ test.describe('Example', () => {
 // Accordion.e2e.tsx
 import * as React from 'react';
 import { test } from '@vkui-e2e/test';
-import { Platform } from '../../lib/platform';
 import { AccordionPlayground } from './Accordion.e2e-playground';
 
 test.describe(() => {
   // Будет применяться для всех тестов внутри `test.describe('Accordion')`
-  test.use({ onlyForPlatforms: [Platform.VKCOM] });
+  test.use({ onlyForPlatforms: ['vkcom'] });
   test('Accordion', async ({ mount expectScreenshotClippedToContent componentPlaygroundProps }) => {
     await mount(<AccordionPlayground {...componentPlaygroundProps} />);
     await expectScreenshotClippedToContent();

packages/vkui/.eslintrc.js

@@ -122,6 +122,10 @@ module.exports = {
         selector: 'ImportDefaultSpecifier[local.name="React"][parent.source.value="react"]',
         message: 'Не используйте импорт React по умолчанию',
       },
+      {
+        selector: 'TSEnumDeclaration',
+        message: 'Не используйте enum',
+      },
     ],
 
     'import/no-default-export': 'error',

packages/vkui/.storybook/addons/appearance/AppearanceSwitch.tsx

@@ -3,14 +3,13 @@ import { Icon16Moon, Icon16Sun } from '@vkontakte/icons';
 import { useGlobals } from '@storybook/manager-api';
 import { IconButton } from '@storybook/components';
 import { PARAM_KEY } from './constants';
-import { Appearance } from '../../../src';
 
 export const AppearanceSwitch = () => {
   const [globals, updateGlobals] = useGlobals();
-  const isDarkTheme = globals[PARAM_KEY] === Appearance.DARK;
+  const isDarkTheme = globals[PARAM_KEY] === 'dark';
 
   const toggleTheme = React.useCallback(() => {
-    updateGlobals({ [PARAM_KEY]: isDarkTheme ? Appearance.LIGHT : Appearance.DARK });
+    updateGlobals({ [PARAM_KEY]: isDarkTheme ? 'light' : 'dark' });
   }, [isDarkTheme, updateGlobals]);
 
   const title = isDarkTheme ? 'Turn the light theme' : 'Turn the dark theme';

packages/vkui/.storybook/preview.ts

@@ -6,7 +6,6 @@ import '../src/styles/adaptivity.module.css';
 
 import { Preview } from '@storybook/react';
 import { BREAKPOINTS } from '../src/lib/adaptivity';
-import { Platform, Appearance } from '../src';
 import { withVKUIWrapper } from '../src/storybook/VKUIDecorators';
 
 interface CustomViewPortItem {
@@ -51,18 +50,18 @@ const preview: Preview = {
   },
   globalTypes: {
     appearance: {
-      defaultValue: Appearance.LIGHT,
+      defaultValue: 'light',
     },
     hasPointer: {
       defaultValue: true,
     },
     platform: {
       name: 'Platform',
       description: 'Platform for components',
-      defaultValue: Platform.ANDROID,
+      defaultValue: 'android',
       toolbar: {
         icon: 'mobile',
-        items: [Platform.ANDROID, Platform.IOS, Platform.VKCOM],
+        items: ['android', 'ios', 'vkcom'],
         title: 'Platform',
         dynamicTitle: true,
       },

packages/vkui/playwright-ct.config.ts

@@ -3,7 +3,6 @@ import {
   defineConfig,
   type DeviceKey,
   devices,
-  PlaywrightConfigPlatform,
   type ReporterDescription,
   type TestProject,
   type VKUITestOptions,
@@ -130,7 +129,7 @@ function generateProjects(): TestProject {
         use: {
           ...getDeviceDescriptorWithoutScaleFactor('Pixel 5'),
           appearance,
-          platform: PlaywrightConfigPlatform.ANDROID,
+          platform: 'android',
         },
       },
 
@@ -139,7 +138,7 @@ function generateProjects(): TestProject {
         use: {
           ...getDeviceDescriptorWithoutScaleFactor('iPhone XR'),
           appearance,
-          platform: PlaywrightConfigPlatform.IOS,
+          platform: 'ios',
         },
       },
 
@@ -148,7 +147,7 @@ function generateProjects(): TestProject {
         use: {
           ...getDeviceDescriptorWithoutScaleFactor('Desktop Chrome'),
           appearance,
-          platform: PlaywrightConfigPlatform.VKCOM,
+          platform: 'vkcom',
         },
       },
 
@@ -157,7 +156,7 @@ function generateProjects(): TestProject {
         use: {
           ...getDeviceDescriptorWithoutScaleFactor('Desktop Firefox'),
           appearance,
-          platform: PlaywrightConfigPlatform.VKCOM,
+          platform: 'vkcom',
         },
       },
 
@@ -166,7 +165,7 @@ function generateProjects(): TestProject {
         use: {
           ...getDeviceDescriptorWithoutScaleFactor('Desktop Safari'),
           appearance,
-          platform: PlaywrightConfigPlatform.VKCOM,
+          platform: 'vkcom',
         },
       },
     ])

packages/vkui/src/components/ActionSheet/ActionSheet.e2e-playground.tsx

@@ -9,7 +9,6 @@ import {
   TEST_CLASS_NAMES,
 } from '@vkui-e2e/playground-helpers';
 import { usePlatform } from '../../hooks/usePlatform';
-import { Platform } from '../../lib/platform';
 import { ActionSheetItem } from '../ActionSheetItem/ActionSheetItem';
 import { ActionSheet, type ActionSheetProps } from './ActionSheet';
 
@@ -24,7 +23,7 @@ const ActionSheetWrapper = (props: ActionSheetProps) => {
   const toggleRef = React.useRef<HTMLButtonElement>(null);
 
   return (
-    <div style={platform === Platform.VKCOM ? { height: 900 } : {}}>
+    <div style={platform === 'vkcom' ? { height: 900 } : {}}>
       <button ref={toggleRef} className={TEST_CLASS_NAMES.CONTENT}>
         target
       </button>

packages/vkui/src/components/ActionSheet/ActionSheet.e2e.tsx

@@ -1,16 +1,15 @@
 import * as React from 'react';
 import { test } from '@vkui-e2e/test';
-import { SizeType, ViewWidth } from '../../lib/adaptivity';
-import { Platform } from '../../lib/platform';
+import { ViewWidth } from '../../lib/adaptivity';
 import { ActionSheetPlayground } from './ActionSheet.e2e-playground';
 
 test.describe('ActionSheet', () => {
   test.use({
     adaptivityProviderProps: {
       viewWidth: ViewWidth.MOBILE,
-      sizeY: SizeType.REGULAR,
+      sizeY: 'regular',
     },
-    onlyForPlatforms: [Platform.IOS, Platform.ANDROID],
+    onlyForPlatforms: ['ios', 'android'],
   });
   test('ViewWidth.MOBILE sizeY=regular', async ({
     mount,
@@ -26,9 +25,9 @@ test.describe('ActionSheet', () => {
   test.use({
     adaptivityProviderProps: {
       viewWidth: ViewWidth.DESKTOP,
-      sizeY: SizeType.REGULAR,
+      sizeY: 'regular',
     },
-    onlyForPlatforms: [Platform.VKCOM],
+    onlyForPlatforms: ['vkcom'],
     toMatchSnapshot: {
       threshold: 0.02,
     },

packages/vkui/src/components/ActionSheet/ActionSheet.test.tsx

@@ -2,7 +2,6 @@ import * as React from 'react';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { ViewWidth } from '../../lib/adaptivity';
-import { Platform } from '../../lib/platform';
 import { baselineComponent, runAllTimers, waitForFloatingPosition } from '../../testing/utils';
 import { ActionSheetItem } from '../ActionSheetItem/ActionSheetItem';
 import { AdaptivityProvider } from '../AdaptivityProvider/AdaptivityProvider';
@@ -14,7 +13,7 @@ describe('ActionSheet', () => {
   afterAll(() => jest.useRealTimers());
   const toggle = document.createElement('div');
   const ActionSheetDesktop = (props: Partial<ActionSheetProps>) => (
-    <ConfigProvider platform={Platform.VKCOM}>
+    <ConfigProvider platform="vkcom">
       <AdaptivityProvider viewWidth={ViewWidth.DESKTOP} hasPointer>
         <ActionSheet toggleRef={toggle} onClose={jest.fn()} {...props} />
       </AdaptivityProvider>
@@ -151,7 +150,7 @@ describe('ActionSheet', () => {
 
   test('renders close button only on mobile iOS', () => {
     const { rerender } = render(
-      <ConfigProvider platform={Platform.IOS}>
+      <ConfigProvider platform="ios">
         <AdaptivityProvider viewWidth={ViewWidth.MOBILE} hasPointer>
           <ActionSheet onClose={jest.fn()} />
         </AdaptivityProvider>
@@ -162,7 +161,7 @@ describe('ActionSheet', () => {
     expect(screen.queryByText('Отмена')).toBeTruthy();
 
     rerender(
-      <ConfigProvider platform={Platform.IOS}>
+      <ConfigProvider platform="ios">
         <AdaptivityProvider viewWidth={ViewWidth.DESKTOP} hasPointer>
           <ActionSheet onClose={jest.fn()} />
         </AdaptivityProvider>
@@ -173,7 +172,7 @@ describe('ActionSheet', () => {
     expect(screen.queryByText('Отмена')).toBeFalsy();
 
     rerender(
-      <ConfigProvider platform={Platform.ANDROID}>
+      <ConfigProvider platform="android">
         <AdaptivityProvider viewWidth={ViewWidth.MOBILE} hasPointer>
           <ActionSheet onClose={jest.fn()} />
         </AdaptivityProvider>
@@ -184,7 +183,7 @@ describe('ActionSheet', () => {
     expect(screen.queryByText('Отмена')).toBeFalsy();
 
     rerender(
-      <ConfigProvider platform={Platform.ANDROID}>
+      <ConfigProvider platform="android">
         <AdaptivityProvider viewWidth={ViewWidth.DESKTOP} hasPointer>
           <ActionSheet onClose={jest.fn()} />
         </AdaptivityProvider>

packages/vkui/src/components/ActionSheet/ActionSheet.tsx

@@ -4,7 +4,6 @@ import { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJS
 import { useObjectMemo } from '../../hooks/useObjectMemo';
 import { usePlatform } from '../../hooks/usePlatform';
 import { useTimeout } from '../../hooks/useTimeout';
-import { Platform } from '../../lib/platform';
 import { warnOnce } from '../../lib/warnOnce';
 import { useScrollLock } from '../AppRoot/ScrollContext';
 import { PopoutWrapper } from '../PopoutWrapper/PopoutWrapper';
@@ -73,7 +72,7 @@ export const ActionSheet = ({
 
   useScrollLock(mode === 'sheet');
 
-  let timeout = platform === Platform.IOS ? 300 : 200;
+  let timeout = platform === 'ios' ? 300 : 200;
 
   if (mode === 'menu') {
     timeout = 0;
@@ -141,7 +140,7 @@ export const ActionSheet = ({
           )}
           {children}
         </div>
-        {platform === Platform.IOS && mode === 'sheet' && (
+        {platform === 'ios' && mode === 'sheet' && (
           <div className={styles['ActionSheet__close-item-wrapper--ios']}>
             {iosCloseItem ?? <ActionSheetDefaultIosCloseItem />}
           </div>

packages/vkui/src/components/ActionSheet/ActionSheetDropdownMenu.tsx

@@ -4,10 +4,8 @@ import { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJS
 import { useEffectDev } from '../../hooks/useEffectDev';
 import { useEventListener } from '../../hooks/useEventListener';
 import { usePlatform } from '../../hooks/usePlatform';
-import { SizeType } from '../../lib/adaptivity';
 import { useDOM } from '../../lib/dom';
 import { isRefObject } from '../../lib/isRefObject';
-import { Platform } from '../../lib/platform';
 import { warnOnce } from '../../lib/warnOnce';
 import { FocusTrap } from '../FocusTrap/FocusTrap';
 import { Popper } from '../Popper/Popper';
@@ -82,9 +80,9 @@ export const ActionSheetDropdownMenu = ({
       placement={placement}
       className={classNames(
         styles['ActionSheet'],
-        platform === Platform.IOS && styles['ActionSheet--ios'],
+        platform === 'ios' && styles['ActionSheet--ios'],
         styles['ActionSheet--menu'],
-        sizeY === SizeType.COMPACT && styles['ActionSheet--sizeY-compact'],
+        sizeY === 'compact' && styles['ActionSheet--sizeY-compact'],
         className,
       )}
       style={style}

packages/vkui/src/components/ActionSheet/ActionSheetDropdownSheet.tsx

@@ -2,8 +2,6 @@ import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
 import { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';
 import { usePlatform } from '../../hooks/usePlatform';
-import { SizeType } from '../../lib/adaptivity';
-import { Platform } from '../../lib/platform';
 import { FocusTrap } from '../FocusTrap/FocusTrap';
 import { SharedDropdownProps } from './types';
 import styles from './ActionSheet.module.css';
@@ -32,9 +30,9 @@ export const ActionSheetDropdownSheet = ({
       onClick={stopPropagation}
       className={classNames(
         styles['ActionSheet'],
-        platform === Platform.IOS && styles['ActionSheet--ios'],
+        platform === 'ios' && styles['ActionSheet--ios'],
         closing && styles['ActionSheet--closing'],
-        sizeY === SizeType.COMPACT && styles['ActionSheet--sizeY-compact'],
+        sizeY === 'compact' && styles['ActionSheet--sizeY-compact'],
         className,
       )}
     >

packages/vkui/src/components/ActionSheet/Readme.md

@@ -78,12 +78,8 @@ const openIcons = () =>
         autoClose
         before={
           <AdaptiveIconRenderer
-            IconCompact={
-              platform === Platform.IOS ? Icon20DeleteOutline : Icon20DeleteOutlineAndroid
-            }
-            IconRegular={
-              platform === Platform.IOS ? Icon28DeleteOutline : Icon28DeleteOutlineAndroid
-            }
+            IconCompact={platform === 'ios' ? Icon20DeleteOutline : Icon20DeleteOutlineAndroid}
+            IconRegular={platform === 'ios' ? Icon28DeleteOutline : Icon28DeleteOutlineAndroid}
           />
         }
         mode="destructive"

packages/vkui/src/components/ActionSheetItem/ActionSheetItem.tsx

@@ -2,8 +2,6 @@ import * as React from 'react';
 import { classNames, noop } from '@vkontakte/vkjs';
 import { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';
 import { usePlatform } from '../../hooks/usePlatform';
-import { SizeType } from '../../lib/adaptivity';
-import { Platform } from '../../lib/platform';
 import { ActionSheetContext, type ActionSheetContextType } from '../ActionSheet/ActionSheetContext';
 import { Tappable } from '../Tappable/Tappable';
 import { Subhead } from '../Typography/Subhead/Subhead';
@@ -83,7 +81,7 @@ export const ActionSheetItem = ({
   }
 
   const isRich = subtitle || meta || selectable;
-  const isCentered = !isRich && !before && platform === Platform.IOS;
+  const isCentered = !isRich && !before && platform === 'ios';
 
   return (
     <Tappable
@@ -99,13 +97,13 @@ export const ActionSheetItem = ({
               isCancelItem: Boolean(isCancelItem),
             })
       }
-      activeMode={platform === Platform.IOS ? styles['ActionSheetItem--active'] : undefined}
+      activeMode={platform === 'ios' ? styles['ActionSheetItem--active'] : undefined}
       className={classNames(
         styles['ActionSheetItem'],
-        platform === Platform.IOS && styles['ActionSheetItem--ios'],
+        platform === 'ios' && styles['ActionSheetItem--ios'],
         mode === 'cancel' && styles['ActionSheetItem--mode-cancel'],
         mode === 'destructive' && styles['ActionSheetItem--mode-destructive'],
-        sizeY === SizeType.COMPACT && styles['ActionSheetItem--sizeY-compact'],
+        sizeY === 'compact' && styles['ActionSheetItem--sizeY-compact'],
         isRich && styles['ActionSheetItem--rich'],
         actionSheetMode === 'menu' && styles['ActionSheetItem--menu'],
         selectable && styles['ActionSheetItem--selectable'],
@@ -125,7 +123,7 @@ export const ActionSheetItem = ({
             isCentered && styles['ActionSheetItem--centered'],
           )}
         >
-          {platform === Platform.IOS ? (
+          {platform === 'ios' ? (
             <Title
               className={styles['ActionSheetItem__children']}
               weight={mode === 'cancel' ? '2' : '3'}