feat: new file structure & migrate to VKUI v6 (#147)

* update deps & lint

* migration to v6 & refactor

* wip

* wip

README.md

@@ -9,3 +9,5 @@ git clone https://github.com/scffs/portfolio
 ```
 For installing all dependencies type `yarn`
 > If you get some error delete `.node_modules` and try again **or** create an issue about that
+
+#### P.S. there are a lot of type errors because react types and preact types are not always compatible

package.json

@@ -18,7 +18,7 @@
     "@vkontakte/icons": "^2.95.0",
     "@vkontakte/vk-bridge": "^2.13.0",
     "@vkontakte/vk-mini-apps-router": "^1.4.2",
-    "@vkontakte/vkui": "^6.0.0-beta.3",
+    "@vkontakte/vkui": "^6.0.0",
     "preact": "^10.19.3"
   },
   "devDependencies": {

src/components/Epic/index.tsx → 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 → src/AppWrapper/App/index.tsx

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

src/AppWrapper.tsx → src/AppWrapper/index.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/assets/technologies.ts

@@ -1,11 +1,18 @@
+import ava from './avaSmall.jpg'
 import bun from './bun.png'
 import charp from './charp.png'
 import docker from './docker.png'
 import elysia from './elysia.svg'
 import fastify from './fastify.png'
+import github from './github.svg'
 import go from './go.png'
+import habr from './habr.svg'
 import js from './js.png'
+import avaKot from './kot.png'
 import kuber from './kuber.png'
+import leetcode from './leetcode.svg'
+import avaVKT from './logovkt.webp'
+import mdn from './mdn.svg'
 import mongodb from './mongodb.svg'
 import mysql from './mysql.svg'
 import nest from './nest.png'
@@ -25,6 +32,11 @@ import vue from './vue.svg'
 import zustand from './zustand.png'
 
 export {
+  mdn,
+  habr,
+  avaVKT,
+  avaKot,
+  ava,
   bun,
   charp,
   docker,
@@ -46,7 +58,9 @@ export {
   styled,
   ts,
   vite,
+  leetcode,
   vk,
+  github,
   vue,
   elysia,
   zustand

src/components/ExplanationTooltip.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/main.tsx

@@ -1,3 +1,4 @@
+import { ScreenSpinner } from '@vkontakte/vkui'
 import { render } from 'preact'
 import { Suspense, lazy } from 'react'
 
@@ -8,7 +9,7 @@ const AppWrapper = lazy(() => import('./AppWrapper'))
 
 const domNode = document.getElementById('root')
 const App = (
-  <Suspense>
+  <Suspense fallback={<ScreenSpinner />}>
     <AppWrapper />
   </Suspense>
 )

src/routes/index.ts

@@ -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/components/ProfileInfo/UserInfo.tsx → src/views/Profile/ProfileInfo/UserInfo.tsx

@@ -12,22 +12,21 @@ import {
 
 import { gradientBorder, infoStyle, styles } from './styles'
 
-import ava from '../../assets/avaSmall.jpg'
-
-import { VK_URL } from '../../constants'
+import { ava } from '../../../assets/technologies.ts'
+import { VK_URL } from '../../../constants'
 import { userInfoItems } from './data.tsx'
 
 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/UserStory.tsx → src/views/Profile/ProfileInfo/UserStory.tsx

@@ -1,8 +1,6 @@
 import { Accordion, Div, Gradient, Paragraph, Spacing } from '@vkontakte/vkui'
-
-import { gradientBorder } from './styles'
-
-import { userStoryContent } from './data'
+import { userStoryContent } from './data.tsx'
+import { gradientBorder } from './styles.ts'
 
 const UserStory = () => (
   <Gradient style={gradientBorder}>

src/components/ProfileInfo/data.tsx → src/views/Profile/ProfileInfo/data.tsx

@@ -4,6 +4,18 @@ import {
   Icon28ServicesOutline
 } from '@vkontakte/icons'
 import { Avatar, Div, Link, Spacing } from '@vkontakte/vkui'
+import {
+  avaKot,
+  avaVKT,
+  github,
+  habr,
+  leetcode,
+  mdn,
+  python,
+  react,
+  vk
+} from '../../../assets/technologies.ts'
+import Flex from '../../../components/Flex.tsx'
 import {
   GITHUB_URL,
   HABR_URL,
@@ -15,22 +27,9 @@ import {
   TEPT_URL,
   VKT_URL,
   VKUI_URL
-} from '../../constants'
-import Flex from '../Flex'
-
-import LinkWithImage from '../LinkWithImage'
-
-import github from '../../assets/github.svg'
-import habr from '../../assets/habr.svg'
-import avaKot from '../../assets/kot.png'
-import leetcode from '../../assets/leetcode.svg'
-import avaVKT from '../../assets/logovkt.webp'
-import mdn from '../../assets/mdn.svg'
-import python from '../../assets/python.png'
-import react from '../../assets/react.svg'
-import vkui from '../../assets/vk.svg'
-
-import { VIEW_PROJECTS, VIEW_STACK } from '../../routes'
+} from '../../../constants'
+import { VIEW_PROJECTS, VIEW_STACK } from '../../../routes'
+import LinkWithImage from './LinkWithImage.tsx'
 
 export const userInfoItems = [
   {
@@ -117,8 +116,8 @@ export const userStoryContent = [
         />
         ). Мне больше нравится Frontend, но на работе я пишу и Backend часть
         (что поделать).
-        <Spacing size={16} />
-        В свободное от работы время я могу решать алгоритмические задачки на{' '}
+        <Spacing size={16} />В свободное от работы время я могу решать
+        алгоритмические задачки на{' '}
         <LinkWithImage
           linkText='Leetcode'
           href={LEETCODE_URL}
@@ -152,7 +151,7 @@ export const userStoryContent = [
         прошлом был модератором и участником крупнейшей веб-документации{' '}
         <LinkWithImage linkText='MDN' href={MDN_URL} icon={mdn} /> и других
         крупных OpenSource проектов, например,
-        <LinkWithImage linkText='VKUI' href={VKUI_URL} icon={vkui} /> и
+        <LinkWithImage linkText='VKUI' href={VKUI_URL} icon={vk} /> и
         {/* Логотип реакта не квадратный, поэтому для полного отображения изменяю ширину */}
         <LinkWithImage
           linkText='React'

src/views/Profile.tsx → src/views/Profile/index.tsx

@@ -14,11 +14,10 @@ import {
   View
 } from '@vkontakte/vkui'
 import { FC } from 'react'
-
-import PanelHeaderWithBack from '../components/PanelHeaderWithBack'
-import { UserInfo, UserStory } from '../components/ProfileInfo'
-import Suspense from '../components/Suspense'
-import { VKT_URL } from '../constants'
+import PanelHeaderWithBack from '../../components/PanelHeaderWithBack'
+import Suspense from '../../components/Suspense.tsx'
+import { VKT_URL } from '../../constants'
+import { UserInfo, UserStory } from './ProfileInfo'
 
 const Profile: FC<{ id: string }> = ({ id }) => {
   const { panel: activePanel, panelsHistory } = useActiveVkuiLocation()

src/views/Projects.tsx

@@ -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/Settings.tsx → src/views/Settings/index.tsx

@@ -13,9 +13,8 @@ import {
   View
 } from '@vkontakte/vkui'
 import { FC, useEffect, useState } from 'react'
-
-import PanelHeaderWithBack from '../components/PanelHeaderWithBack'
-import ToggleTheme from '../components/ToggleTheme'
+import PanelHeaderWithBack from '../../components/PanelHeaderWithBack'
+import ToggleTheme from './ToggleTheme.tsx'
 
 const formatKeyText = (key: string) => {
   if (key.startsWith('orientation')) {
@@ -106,7 +105,7 @@ const Settings: FC<ISettings> = ({ id, toggleAppearance }) => {
           header={
             <Header
               mode='secondary'
-              aside={<Subhead>Хранится в LocalStorage</Subhead>}
+              aside={<Subhead Component='h5'>Хранится в LocalStorage</Subhead>}
             >
               Кеш
             </Header>

src/components/CustomList.tsx → src/views/Stack/StackInfo/CustomList.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/StackInfo/ExplanationGroup.tsx → src/views/Stack/StackInfo/ExplanationGroup.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/TechnologyGroup.tsx → src/views/Stack/StackInfo/TechnologyGroup.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/data.ts → src/views/Stack/StackInfo/data.ts

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