Merge pull request #46 from VKCOM/o.shcherbakov/modal/QA-15689

feat(ui): add modal component & upgrade vkui to v7

ui/.stylelintrc

@@ -15,7 +15,7 @@
   "overrides": [
     {
       "files": [
-        "src/components/views/settings-page/settings-page.module.css",
+        "src/components/lib/tabs-panel/tabs-panel.module.css",
         "src/components/views/control-page/control-page.module.css",
         "src/components/lib/marked-slider-range/marked-slider-range.module.css"
       ],

ui/eslint.config.mjs

@@ -324,7 +324,7 @@ export default tseslint.config(
       'no-await-in-loop': 'error',
       'no-shadow': 'off',
       'no-continue': 'off',
-      'i18next/no-literal-string': ['error', { words: { exclude: ['%', 'Stub'] } }],
+      'i18next/no-literal-string': ['error', { words: { exclude: ['%', 'Stub', 'OK'] } }],
     },
   },
   {

ui/package.json

@@ -32,7 +32,7 @@
     "@tanstack/react-table": "^8.20.5",
     "@tanstack/react-virtual": "^3.10.8",
     "@vkontakte/icons": "^2.148.0",
-    "@vkontakte/vkui": "^6.7.2",
+    "@vkontakte/vkui": "^7.0.0",
     "axios": "^1.7.7",
     "classnames": "^2.5.1",
     "date-fns": "^4.1.0",

ui/src/components/app/app.tsx

@@ -9,7 +9,7 @@ export const App = () => {
   const { theme } = useTheme()
 
   return (
-    <ConfigProvider appearance={theme === 'system' ? undefined : theme} platform='vkcom'>
+    <ConfigProvider colorScheme={theme === 'system' ? undefined : theme} platform='vkcom'>
       <AdaptivityProvider>
         <AppRoot>
           <RouterProvider router={appRouter} />

ui/src/components/app/providers/theme-provider/types.ts

@@ -1,3 +1,3 @@
-import type { AppearanceType } from '@vkontakte/vkui'
+import type { ColorSchemeType } from '@vkontakte/vkui'
 
-export type Theme = AppearanceType | 'system'
+export type Theme = ColorSchemeType | 'system'

ui/src/components/lib/error-fallback/error-fallback.tsx

@@ -14,8 +14,8 @@ export const ErrorFallback = ({ error, resetErrorBoundary }: FallbackProps) => {
   return (
     <Gradient className={styles.gradient} mode='tint'>
       <Placeholder
-        header={t('Something went wrong')}
         icon={<Icon24ErrorCircleFillRed height={56} width={56} />}
+        title={t('Something went wrong')}
         action={
           <Button appearance='accent-invariable' mode='outline' size='m' onClick={resetErrorBoundary}>
             {t('Retry')}

ui/src/components/lib/modal/index.ts

@@ -0,0 +1 @@
+export { Modal } from './modal'

ui/src/components/lib/modal/modal.module.css

@@ -0,0 +1,7 @@
+.modal {
+  width: fit-content;
+}
+
+.modalActions {
+  width: 100%;
+}

ui/src/components/lib/modal/modal.tsx

@@ -0,0 +1,53 @@
+import { useTranslation } from 'react-i18next'
+import { Icon20ErrorCircleFillYellow } from '@vkontakte/icons'
+import { Button, ButtonGroup, ModalCard, ModalRoot } from '@vkontakte/vkui'
+
+import { ConditionalRender } from '@/components/lib/conditional-render'
+
+import styles from './modal.module.css'
+
+type ModalProps = {
+  isOpen: boolean
+  title: string
+  description?: string
+  isCancelShown?: boolean
+  onOk?: () => void
+  onClose: () => void
+}
+
+export const Modal = ({ isOpen, title, description, onOk, onClose, isCancelShown = true }: ModalProps) => {
+  const { t } = useTranslation()
+
+  const onOkClick = () => {
+    onOk?.()
+    onClose()
+  }
+
+  return (
+    <ModalRoot activeModal={isOpen ? 'modal-card' : null} usePortal onClose={onClose}>
+      <ModalCard
+        className={styles.modal}
+        description={description}
+        dismissButtonMode='inside'
+        icon={<Icon20ErrorCircleFillYellow height={56} width={56} />}
+        id='modal-card'
+        open={isOpen}
+        size={900}
+        title={title}
+        actions={
+          <ButtonGroup align='right' className={styles.modalActions}>
+            <Button mode={isCancelShown ? 'secondary' : 'primary'} size='l' onClick={onOkClick}>
+              OK
+            </Button>
+            <ConditionalRender conditions={[isCancelShown]}>
+              <Button mode='primary' size='l' onClick={onClose}>
+                {t('Cancel')}
+              </Button>
+            </ConditionalRender>
+          </ButtonGroup>
+        }
+        onClose={onClose}
+      />
+    </ModalRoot>
+  )
+}

ui/src/components/lib/statistic-card/statistic-card.tsx

@@ -48,7 +48,7 @@ export const StatisticCard = ({
     </ConditionalRender>
     <Spacing />
     <ConditionalRender conditions={[value !== undefined]}>
-      <Counter mode='secondary' size='s'>
+      <Counter appearance='neutral' mode='primary' size='s'>
         {value}
       </Counter>
     </ConditionalRender>

ui/src/components/lib/tabs-panel/tabs-panel.module.css

@@ -0,0 +1,10 @@
+.tabsPanel {
+  :global(._in_sa4kt_20) {
+    justify-content: flex-start;
+  }
+
+  :global(.vkuiInternalPanelHeader__before) {
+    flex-grow: 0;
+    padding: 5px;
+  }
+}

ui/src/components/lib/tabs-panel/tabs-panel.tsx

@@ -1,9 +1,12 @@
 import { useLocation, useNavigate } from 'react-router'
+import cn from 'classnames'
 import { useTranslation } from 'react-i18next'
 import { Group, PanelHeader, Tabs, TabsItem } from '@vkontakte/vkui'
 
 import { ConditionalRender } from '@/components/lib/conditional-render'
 
+import styles from './tabs-panel.module.css'
+
 import type { TabsContent } from './types'
 
 type CommonTabsPanelProps<T> = {
@@ -39,7 +42,7 @@ export const TabsPanel = <T extends boolean = false>({
 
   return (
     <>
-      <PanelHeader className={className}>
+      <PanelHeader className={cn(styles.tabsPanel, className)}>
         <Tabs>
           {content.map((tab) => (
             <TabsItem

ui/src/components/ui/device-control-panel/device-control-card/device-control-card.tsx

@@ -39,14 +39,14 @@ export const DeviceControlCard = ({
           </Flex>
           <Flex align='center'>
             <ConditionalRender conditions={[!!helpTooltipText]}>
-              <Tooltip appearance='accent' placement='left' text={helpTooltipText}>
+              <Tooltip appearance='accent' description={helpTooltipText} placement='left'>
                 <Button appearance='neutral' before={<Icon20HelpOutline />} mode='tertiary' />
               </Tooltip>
             </ConditionalRender>
             <Tooltip
               appearance='accent'
+              description={afterTooltipText}
               shown={!!afterTooltipText && isAfterButtonTooltipShown}
-              text={afterTooltipText}
               onShownChange={setIsAfterButtonTooltipShown}
             >
               {after}

ui/src/components/ui/device/device-screen/device-screen.tsx

@@ -178,7 +178,7 @@ export const DeviceScreen = observer(() => {
             />
           ))}
           <ConditionalRender conditions={[!!deviceScreenStore?.isScreenLoading]}>
-            <Spinner className={styles.spinner} size='large' />
+            <Spinner className={styles.spinner} size='xl' />
           </ConditionalRender>
         </div>
       </div>

ui/src/components/ui/header/header.tsx

@@ -1,4 +1,4 @@
-import { Button, Tappable, useAppearance } from '@vkontakte/vkui'
+import { Button, Tappable, useColorScheme } from '@vkontakte/vkui'
 import { useTranslation } from 'react-i18next'
 import { Link } from 'react-router'
 import cn from 'classnames'
@@ -21,7 +21,7 @@ import styles from './header.module.css'
 
 export const Header = () => {
   const { t } = useTranslation()
-  const appearance = useAppearance()
+  const colorScheme = useColorScheme()
   const { data: authDocs } = useGetAuthDocs()
   const { data: authContact } = useGetAuthContact()
 
@@ -30,7 +30,7 @@ export const Header = () => {
       <div className={styles.leftSide}>
         <Link className={styles.logoLink} to={getMainRoute()}>
           <Tappable activeMode='opacity' focusVisibleMode='outside' hoverMode='opacity' onClick={() => {}}>
-            <DeviceHubIcon className={cn({ [styles.logo]: appearance === 'dark' })} />
+            <DeviceHubIcon className={cn({ [styles.logo]: colorScheme === 'dark' })} />
           </Tappable>
         </Link>
         <Link className={styles.navLink} to={getDevicesRoute()}>

ui/src/components/views/devices-page/devices-page.tsx

@@ -1,7 +1,7 @@
-import { View, Panel, Group, CustomScrollView, Header, Flex } from '@vkontakte/vkui'
-import { useTranslation } from 'react-i18next'
 import { useMemo } from 'react'
 import { observer } from 'mobx-react-lite'
+import { useTranslation } from 'react-i18next'
+import { View, Panel, Group, CustomScrollView, Header, Flex } from '@vkontakte/vkui'
 
 import { DeviceTable } from '@/components/ui/device-table'
 import { SearchDevice } from '@/components/ui/search-device'
@@ -27,12 +27,12 @@ export const DevicesPage = observer(() => {
     <View activePanel='main'>
       <Panel className={styles.devicesPage} id='main'>
         <DeviceStatistics />
-        <Group header={<Header mode='secondary'>{t('Devices')}</Header>}>
+        <Group header={<Header size='s'>{t('Devices')}</Header>}>
           <Flex align='center'>
             <SearchDevice />
             <TableColumnVisibility />
           </Flex>
-          <CustomScrollView enableHorizontalScroll={true} windowResize={true}>
+          <CustomScrollView enableHorizontalScroll={true}>
             <DeviceTable
               data={displayData}
               isError={devicesQueryResult.isError}

ui/src/components/views/settings-page/settings-page.module.css

@@ -2,12 +2,3 @@
   margin-top: 25px;
   padding: 0 10px;
 }
-
-:global(._PanelHeader__in_1h7ym_20) {
-  justify-content: flex-start;
-}
-
-:global(._PanelHeader--vkcom_1h7ym_193 ._PanelHeader__before_1h7ym_43) {
-  flex-grow: 0;
-  padding: 5px;
-}

ui/src/styles/variables/global.css

@@ -1,6 +1,6 @@
 :root {
   /* z-index */
-  --header-z-index: 150;
+  --header-z-index: 99;
   --screen-input-z-index: 10;
 
   /* Colors */