migration to v6 & refactor

Author: scffs

src/components/Epic/index.tsx renamed to src/AppWrapper/App/Epic.tsx

@@ -2,6 +2,8 @@ import { useActiveVkuiLocation } from '@vkontakte/vk-mini-apps-router'
 import { useAdaptivityConditionalRender } from '@vkontakte/vkui'
 import { Epic as VKUIEpic } from '@vkontakte/vkui/dist/components/Epic/Epic'
 import { FC } from 'react'
+import Suspense from '../../components/Suspense.tsx'
+import Tabbar from '../../components/Tabbar'
 import {
   VIEW_CONTACTS,
   VIEW_PROFILE,
@@ -11,8 +13,6 @@ import {
 } from '../../routes'
 import { Pages } from '../../types'
 import { Contacts, Profile, Projects, Settings, Stack } from '../../views'
-import Suspense from '../Suspense'
-import Tabbar from '../Tabbar'
 
 interface IEpic {
   onStoryChange: (current: Pages) => void

src/App.tsx renamed to src/AppWrapper/App/index.tsx

@@ -12,15 +12,11 @@ import {
   useAdaptivityConditionalRender,
   usePlatform
 } from '@vkontakte/vkui'
-import { lazy, useCallback, useEffect, useState } from 'react'
-
-import { VIEW_PROFILE } from './routes'
-import { Pages } from './types'
-
-import Suspense from './components/Suspense'
-
-const Sidebar = lazy(() => import('./components/Sidebar'))
-const Epic = lazy(() => import('./components/Epic'))
+import { Suspense, lazy, useCallback, useEffect, useState } from 'react'
+import Sidebar from '../../components/Sidebar'
+import { VIEW_PROFILE } from '../../routes'
+import { Pages } from '../../types'
+import Epic from './Epic.tsx'
 
 const App = () => {
   const platform = usePlatform()
@@ -71,7 +67,7 @@ const App = () => {
     <ConfigProvider appearance={appearance}>
       <AppRoot>
         <SplitLayout
-          header={isVKCOM && <PanelHeader separator={false} />}
+          header={isVKCOM && <PanelHeader delimiter='none' />}
           style={{ justifyContent: 'center' }}
         >
           {sidebar}

src/components/NotFound.tsx renamed to src/AppWrapper/NotFound.tsx

@@ -1,13 +1,11 @@
 import { RouterProvider } from '@vkontakte/vk-mini-apps-router'
 import { AdaptivityProvider } from '@vkontakte/vkui'
 import { lazy } from 'react'
-
-import Suspense from './components/Suspense'
-
-import { router } from './routes'
+import Suspense from '../components/Suspense.tsx'
+import { router } from '../routes'
 
 const App = lazy(() => import('./App'))
-const NotFound = lazy(() => import('./components/NotFound'))
+const NotFound = lazy(() => import('./NotFound'))
 
 const AppWrapper = () => (
   <AdaptivityProvider>

src/AppWrapper.tsx renamed to src/AppWrapper/index.tsx

@@ -11,6 +11,7 @@ const ExplanationTooltip: FC<TooltipTextProps> = ({ text, tooltipContent }) => {
   const textTooltip = (
     <Subhead
       style={{ padding: '8px 12px', color: 'var(--vkui--color_text_primary)' }}
+      Component='h5'
     >
       {tooltipContent}
     </Subhead>

src/components/ExplanationTooltip.tsx

@@ -21,13 +21,13 @@ const UserInfo = () => (
   <>
     <Gradient style={{ ...styles, ...gradientBorder }}>
       <Avatar size={90} src={ava} alt='ava' />
-      <Title style={{ marginTop: 20 }} level='2' weight='2'>
+      <Title style={{ marginTop: 20 }} level='2' weight='2' Component='h2'>
         Семён Окулов
       </Title>
       <Link href={VK_URL} target='_blank'>
         @scffs
       </Link>
-      <Title level='3' weight='3'>
+      <Title level='3' weight='3' Component='h3'>
         Fullstack-разработчик
       </Title>
     </Gradient>

src/components/ProfileInfo/UserInfo.tsx

@@ -3,19 +3,19 @@ import {
   createHashRouter
 } from '@vkontakte/vk-mini-apps-router'
 
-export const PAGE_MAIN = '/'
-export const PAGE_PROFILE = '/profile'
-export const PAGE_CONTACTS = '/contacts'
-export const PAGE_PROJECTS = '/projects'
-export const PAGE_STACK = '/stack'
-export const PAGE_SETTINGS = '/settings'
-
 export const VIEW_PROFILE = 'profile'
 export const VIEW_CONTACTS = 'contacts'
 export const VIEW_PROJECTS = 'projects'
 export const VIEW_STACK = 'stack'
 export const VIEW_SETTINGS = 'settings'
 
+export const PAGE_MAIN = '/'
+export const PAGE_PROFILE = `/${VIEW_PROFILE}`
+export const PAGE_CONTACTS = `/${VIEW_CONTACTS}`
+export const PAGE_PROJECTS = `/${VIEW_PROJECTS}`
+export const PAGE_STACK = `/${VIEW_STACK}`
+export const PAGE_SETTINGS = `/${VIEW_SETTINGS}`
+
 const routes: RouteWithoutRoot[] = [
   {
     path: PAGE_MAIN,

src/routes/index.ts

@@ -45,6 +45,7 @@ const Projects: FC<{ id: string }> = ({ id }) => {
               subtitle='React, TypeScript etc...'
               header='Gatto'
               caption="Gatto - это большая, яркая и увлекательная игра. По типу напоминает 'тамагочи' - есть прокачка персонажей, различные локации и элементы скрещивания."
+              headerComponent='h4'
             />
             <ContentCard
               onClick={() => window.open('https://vk.com/diary_spo', '_blank')}
@@ -53,6 +54,7 @@ const Projects: FC<{ id: string }> = ({ id }) => {
               subtitle='Preact, TypeScript, VKUI etc...'
               header='Дневник СПО'
               caption='Обёртка над дневником Сетевого города для СПО (API совпадает с Томской областью). В сервисе студенты могут полностью следить за своей успеваемостью и расписанием.'
+              headerComponent='h4'
             />
             <ContentCard
               onClick={() =>
@@ -66,6 +68,7 @@ const Projects: FC<{ id: string }> = ({ id }) => {
               subtitle='Preact, TypeScript, VKUI, Docker, ElysiaJS etc...'
               header='Дневник Admin'
               caption='Попытка сделать собственный дневник, а именно часть администратора: создание групп, расписаний, выставление оценок и тд.'
+              headerComponent='h4'
             />
             <ContentCard
               onClick={() =>
@@ -76,6 +79,7 @@ const Projects: FC<{ id: string }> = ({ id }) => {
               subtitle='C#'
               header='Fake DB'
               caption='Консольное приложение для управления пользователями с использованием фейковой базы данных.'
+              headerComponent='h4'
             />
             <ContentCard
               onClick={() =>
@@ -86,6 +90,7 @@ const Projects: FC<{ id: string }> = ({ id }) => {
               subtitle='C#, WPF'
               header='WPF Quiz'
               caption='Игроку предлагается лист, на котором написан текст. В тексте некоторые слова заменены пиктограммами. Пиктограммы в тексте заменены в случайном порядке.'
+              headerComponent='h4'
             />
           </CardGrid>
         </Group>

src/views/Projects.tsx

@@ -106,7 +106,7 @@ const Settings: FC<ISettings> = ({ id, toggleAppearance }) => {
           header={
             <Header
               mode='secondary'
-              aside={<Subhead>Хранится в LocalStorage</Subhead>}
+              aside={<Subhead Component='h5'>Хранится в LocalStorage</Subhead>}
             >
               Кеш
             </Header>

src/views/Settings.tsx

@@ -5,12 +5,8 @@ import {
   Image,
   List
 } from '@vkontakte/vkui'
-import React, { Dispatch, SetStateAction, memo } from 'react'
-
-import { Technology } from './StackInfo/data'
-
-export type UpdateDraggingList = Dispatch<SetStateAction<Technology[]>>
-
+import React, { memo } from 'react'
+import { Technology } from './data.ts'
 interface CustomListProps {
   items: Technology[]
   isHorizontal: boolean

src/components/CustomList.tsx renamed to src/views/Stack/StackInfo/CustomList.tsx

@@ -1,6 +1,5 @@
 import { Div, Group, Header } from '@vkontakte/vkui'
-
-import ExplanationTooltip from '../ExplanationTooltip'
+import ExplanationTooltip from '../../../components/ExplanationTooltip.tsx'
 
 const ExplanationGroup = () => (
   <Group header={<Header>Пояснение</Header>}>

src/components/StackInfo/ExplanationGroup.tsx renamed to src/views/Stack/StackInfo/ExplanationGroup.tsx

@@ -1,11 +1,10 @@
 import { Button, Group, Header } from '@vkontakte/vkui'
 import { FC, lazy, memo, useEffect, useState } from 'react'
 
-import Suspense from '../Suspense'
-
+import Suspense from '../../../components/Suspense.tsx'
 import { Technology } from './data'
 
-const CustomList = lazy(() => import('../CustomList'))
+const CustomList = lazy(() => import('./CustomList'))
 
 interface TechnologyGroupProps {
   id: string

src/components/StackInfo/TechnologyGroup.tsx renamed to src/views/Stack/StackInfo/TechnologyGroup.tsx

@@ -24,7 +24,7 @@ import {
   vk,
   vue,
   zustand
-} from '../../assets/technologies.ts'
+} from '../../../assets/technologies.ts'
 
 export interface Technology {
   name: string

src/components/StackInfo/data.ts renamed to src/views/Stack/StackInfo/data.ts

@@ -4,16 +4,14 @@ import {
 } from '@vkontakte/vk-mini-apps-router'
 import { Panel, View } from '@vkontakte/vkui'
 import { FC } from 'react'
-
-import PanelHeaderWithBack from '../components/PanelHeaderWithBack'
-import ExplanationGroup from '../components/StackInfo/ExplanationGroup'
-
-import TechnologyGroup from '../components/StackInfo/TechnologyGroup'
+import PanelHeaderWithBack from '../../components/PanelHeaderWithBack'
+import ExplanationGroup from './StackInfo/ExplanationGroup.tsx'
+import TechnologyGroup from './StackInfo/TechnologyGroup.tsx'
 import {
   technologiesBackend,
   technologiesFront,
   technologiesOther
-} from '../components/StackInfo/data'
+} from './StackInfo/data.ts'
 
 const Stack: FC<{ id: string }> = ({ id }) => {
   const { panel: activePanel, panelsHistory } = useActiveVkuiLocation()