update deps & and a little more

README.md

@@ -7,7 +7,7 @@ Made by Preact / Vite / VKUI
 ```
 git clone https://github.com/scffs/portfolio
 ```
-For installing all dependencies type `yarn`
+For installing all dependencies type `bun`
 > 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

@@ -16,24 +16,24 @@
   },
   "dependencies": {
     "@vkontakte/icons": "^2.95.0",
-    "@vkontakte/vk-bridge": "^2.13.0",
-    "@vkontakte/vk-mini-apps-router": "^1.4.2",
-    "@vkontakte/vkui": "^6.0.0",
-    "preact": "^10.19.3"
+    "@vkontakte/vk-bridge": "^2.14.1",
+    "@vkontakte/vk-mini-apps-router": "^1.4.3",
+    "@vkontakte/vkui": "^6.0.1",
+    "preact": "^10.19.7"
   },
   "devDependencies": {
-    "@preact/preset-vite": "^2.8.1",
-    "@rollup/plugin-terser": "^0.4.3",
+    "@preact/preset-vite": "^2.8.2",
+    "@rollup/plugin-terser": "^0.4.4",
     "@vitejs/plugin-react": "^4.2.1",
-    "@vitejs/plugin-react-swc": "^3.5.0",
+    "@vitejs/plugin-react-swc": "^3.6.0",
     "gh-pages": "^6.1.1",
-    "@biomejs/biome": "1.5.3",
+    "@biomejs/biome": "1.6.2",
     "typescript": "^5.3.3",
     "vite": "^5.0.12"
   },
   "peerDependencies": {
-    "@babel/core": "^7.0.0",
-    "react": "^18",
+    "@babel/core": "^7.24.3",
+    "react": "^18.2.0",
     "react-dom": "^18.2.0"
   }
 }

src/AppWrapper/App/Epic.tsx

@@ -1,7 +1,7 @@
 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 type { FC } from 'react'
 import Suspense from '../../components/Suspense.tsx'
 import Tabbar from '../../components/Tabbar'
 import {
@@ -11,7 +11,7 @@ import {
   VIEW_SETTINGS,
   VIEW_STACK
 } from '../../routes'
-import { Pages } from '../../types'
+import type { Pages } from '../../types'
 import { Contacts, Profile, Projects, Settings, Stack } from '../../views'
 
 interface IEpic {

src/AppWrapper/App/Sidebar.tsx

@@ -6,15 +6,15 @@ import {
   Icon28UserCircleOutline
 } from '@vkontakte/icons'
 import { Cell, Group, Panel } from '@vkontakte/vkui'
-import { FC } from 'react'
+import type { FC } from 'react'
 import {
   VIEW_CONTACTS,
   VIEW_PROFILE,
   VIEW_PROJECTS,
   VIEW_SETTINGS,
   VIEW_STACK
 } from '../../routes'
-import { Pages } from '../../types'
+import type { Pages } from '../../types'
 
 interface ISidebarProps {
   activeView: Pages

src/AppWrapper/App/index.tsx

@@ -15,7 +15,7 @@ import {
 import { useCallback, useEffect, useState } from 'react'
 import Suspense from '../../components/Suspense.tsx'
 import { VIEW_PROFILE } from '../../routes'
-import { Pages } from '../../types'
+import type { Pages } from '../../types'
 import Epic from './Epic.tsx'
 import Sidebar from './Sidebar.tsx'
 

src/AppWrapper/NotFound.tsx

@@ -1,6 +1,6 @@
 import { useRouteNavigator } from '@vkontakte/vk-mini-apps-router'
 import { AppRoot, AppearanceProvider, Button, Div } from '@vkontakte/vkui'
-import { CSSProperties } from 'react'
+import type { CSSProperties } from 'react'
 
 const notFoundStyle: CSSProperties = {
   display: 'flex',

src/components/ExplanationTooltip.tsx

@@ -1,6 +1,6 @@
 import { Icon16HelpOutline } from '@vkontakte/icons'
 import { Popover, Subhead, Text } from '@vkontakte/vkui'
-import { FC } from 'react'
+import type { FC } from 'react'
 
 interface TooltipTextProps {
   text: string

src/components/Flex.tsx

@@ -1,4 +1,4 @@
-import { FC, ReactNode } from 'react'
+import type { FC, ReactNode } from 'react'
 
 interface IFlex {
   gap?: number

src/components/PanelHeaderWithBack/index.tsx

@@ -1,6 +1,6 @@
 import { useRouteNavigator } from '@vkontakte/vk-mini-apps-router'
 import { PanelHeader, PanelHeaderBack } from '@vkontakte/vkui'
-import { FC } from 'react'
+import type { FC } from 'react'
 
 const PanelHeaderWithBack: FC<{ title: string }> = ({ title }) => {
   const routeNavigator = useRouteNavigator()

src/components/Suspense.tsx

@@ -1,5 +1,5 @@
 import { PanelSpinner, ScreenSpinner, Spinner } from '@vkontakte/vkui'
-import { FC, ReactNode, Suspense as ReactSuspense } from 'react'
+import { type FC, type ReactNode, Suspense as ReactSuspense } from 'react'
 
 interface ISpinner {
   size?: 'small' | 'regular' | 'medium' | 'large'

src/components/Tabbar/index.tsx

@@ -1,9 +1,9 @@
 import {
-  Tabbar as VKUITabbar,
   TabbarItem,
+  Tabbar as VKUITabbar,
   useAdaptivityConditionalRender
 } from '@vkontakte/vkui'
-import { FC } from 'react'
+import type { FC } from 'react'
 
 import {
   Icon28MailOutline,
@@ -20,7 +20,7 @@ import {
   VIEW_SETTINGS,
   VIEW_STACK
 } from '../../routes'
-import { Pages } from '../../types'
+import type { Pages } from '../../types'
 
 interface ITabbar {
   onStoryChange: (current: Pages) => void

src/routes/index.ts

@@ -1,5 +1,5 @@
 import {
-  RouteWithoutRoot,
+  type RouteWithoutRoot,
   createHashRouter
 } from '@vkontakte/vk-mini-apps-router'
 

src/views/Contacts.tsx

@@ -11,7 +11,7 @@ import {
   SimpleCell,
   View
 } from '@vkontakte/vkui'
-import { FC } from 'react'
+import type { FC } from 'react'
 
 import PanelHeaderWithBack from '../components/PanelHeaderWithBack'
 import { GITHUB_URL, HABR_URL, VK_URL } from '../constants'

src/views/Profile/ProfileInfo/LinkWithImage.tsx

@@ -1,5 +1,5 @@
 import { Link } from '@vkontakte/vkui'
-import { CSSProperties, FC, ReactNode } from 'react'
+import type { CSSProperties, FC, ReactNode } from 'react'
 
 interface ILinkWithImage {
   linkText: string

src/views/Profile/ProfileInfo/styles.ts

@@ -1,4 +1,4 @@
-import { CSSProperties } from 'react'
+import type { CSSProperties } from 'react'
 
 export const styles: CSSProperties = {
   margin: 0,

src/views/Profile/index.tsx

@@ -13,7 +13,7 @@ import {
   SimpleCell,
   View
 } from '@vkontakte/vkui'
-import { FC } from 'react'
+import type { FC } from 'react'
 import PanelHeaderWithBack from '../../components/PanelHeaderWithBack'
 import Suspense from '../../components/Suspense.tsx'
 import { VKT_URL } from '../../constants'

src/views/Projects.tsx

@@ -13,7 +13,7 @@ import {
   Placeholder,
   View
 } from '@vkontakte/vkui'
-import { FC } from 'react'
+import type { FC } from 'react'
 
 import admin from '../assets/admin.jpg'
 import db from '../assets/db.png'

src/views/Settings/ToggleTheme.tsx

@@ -1,6 +1,6 @@
 import { Icon28MoonOutline, Icon28SunOutline } from '@vkontakte/icons'
 import { CellButton, useAppearance } from '@vkontakte/vkui'
-import { FC } from 'react'
+import type { FC } from 'react'
 
 interface IToggleTheme {
   toggleAppearance: () => void

src/views/Settings/index.tsx

@@ -12,7 +12,7 @@ import {
   Subhead,
   View
 } from '@vkontakte/vkui'
-import { FC, useEffect, useState } from 'react'
+import { type FC, useEffect, useState } from 'react'
 import PanelHeaderWithBack from '../../components/PanelHeaderWithBack'
 import ToggleTheme from './ToggleTheme.tsx'
 

src/views/Stack/StackInfo/CustomList.tsx

@@ -5,8 +5,9 @@ import {
   Image,
   List
 } from '@vkontakte/vkui'
-import React, { memo } from 'react'
-import { Technology } from './data.ts'
+import type React from 'react'
+import { memo } from 'react'
+import type { Technology } from './data.ts'
 interface CustomListProps {
   items: Technology[]
   isHorizontal: boolean

src/views/Stack/StackInfo/TechnologyGroup.tsx

@@ -1,8 +1,8 @@
 import { Button, Group, Header } from '@vkontakte/vkui'
-import { FC, lazy, memo, useEffect, useState } from 'react'
+import { type FC, lazy, memo, useEffect, useState } from 'react'
 
 import Suspense from '../../../components/Suspense.tsx'
-import { Technology } from './data'
+import type { Technology } from './data'
 
 const CustomList = lazy(() => import('./CustomList'))
 

src/views/Stack/index.tsx

@@ -3,7 +3,7 @@ import {
   useRouteNavigator
 } from '@vkontakte/vk-mini-apps-router'
 import { Panel, View } from '@vkontakte/vkui'
-import { FC } from 'react'
+import type { FC } from 'react'
 import PanelHeaderWithBack from '../../components/PanelHeaderWithBack'
 import ExplanationGroup from './StackInfo/ExplanationGroup.tsx'
 import TechnologyGroup from './StackInfo/TechnologyGroup.tsx'