feat: upgrade to VKUI 6 etc

scffs · Dec 11, 2023 · 9b4df87 · 9b4df87
1 parent 42db6f5
commit 9b4df87
Show file tree

Hide file tree

Showing 18 changed files with 133 additions and 2,121 deletions.
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
diff --git a/README.md b/README.md
@@ -1,5 +1,5 @@
 # Portfolio
-Made by React / Vite / VKUI
+Made by Preact / Vite / VKUI
 
 # Installation
 

diff --git a/biome.json b/biome.json
@@ -0,0 +1,30 @@
+{
+  "$schema": "https://biomejs.dev/schemas/1.4.1/schema.json",
+  "formatter": {
+    "indentStyle": "space",
+    "indentWidth": 2
+  },
+  "javascript": {
+    "formatter": {
+      "semicolons": "asNeeded",
+      "quoteStyle": "single",
+      "jsxQuoteStyle": "single",
+      "trailingComma": "none"
+    }
+  },
+  "organizeImports": {
+    "enabled": true
+  },
+  "linter": {
+    "enabled": true,
+    "rules": {
+      "recommended": true
+    },
+    "ignore": [
+      "node_modules",
+      "./apps/api/dist",
+      "./apps/web/dist",
+      "bun.lockb"
+    ]
+  }
+}
diff --git a/index.html b/index.html
@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8"/>
     <link rel="icon" type="image/svg+xml" href="/ava.ico"/>
-    <meta name="description" content="A simple portfolio made by React">
+    <meta name="description" content="A simple portfolio made by Preact">
     <meta name="author" content="Semyon Okulov">
     <meta name="keywords" content="frontend, разработка, web dev, junior frontend, react, фронтенд, web разработка">
     <meta

diff --git a/package.json b/package.json
@@ -2,48 +2,33 @@
   "name": "portfolio",
   "private": true,
   "homepage": "https://scffs.github.io/portfolio/",
-  "version": "4.0.1",
+  "version": "4.1.0",
   "type": "module",
   "scripts": {
     "dev": "vite",
     "build": "tsc && vite build",
     "deploy": "gh-pages -d dist",
     "predeploy": "tsc && vite build",
-    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
-    "lint:fix": "eslint . --ext ts,tsx --fix",
+    "lint": "biome lint . --apply",
+    "format": "biome format . --write",
+    "checkAll": "biome check . --apply",
     "preview": "vite preview"
   },
   "dependencies": {
-    "@vkontakte/icons": "^2.85.0",
+    "@vkontakte/icons": "^2.87.0",
     "@vkontakte/vk-bridge": "^2.12.2",
     "@vkontakte/vk-mini-apps-router": "^1.3.1",
-    "@vkontakte/vkui": "^5.9.6",
-    "preact": "^10.18.2",
-    "react": "npm:@preact/compat",
-    "react-dom": "npm:@preact/compat"
+    "@vkontakte/vkui": "^6.0.0-beta.1",
+    "preact": "^10.19.3"
   },
   "devDependencies": {
     "@preact/preset-vite": "^2.7.0",
     "@rollup/plugin-terser": "^0.4.3",
-    "@types/react": "^18.2.41",
-    "@types/react-dom": "^18.2.17",
-    "@typescript-eslint/eslint-plugin": "^6.13.1",
-    "@typescript-eslint/parser": "^6.13.1",
     "@vitejs/plugin-react": "^4.2.0",
     "@vitejs/plugin-react-swc": "^3.5.0",
-    "eslint": "^8.55.0",
-    "eslint-config-airbnb": "^19.0.4",
-    "eslint-config-airbnb-typescript": "^17.1.0",
-    "eslint-config-standard-with-typescript": "^40.0.0",
-    "eslint-plugin-import": "^2.25.2",
-    "eslint-plugin-jsx-a11y": "^6.8.0",
-    "eslint-plugin-n": "^16.3.1",
-    "eslint-plugin-promise": "^6.0.0",
-    "eslint-plugin-react": "^7.32.2",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-react-refresh": "0.4.5",
     "gh-pages": "^6.1.0",
-    "typescript": "^5.0.4",
-    "vite": "^5.0.5"
+    "@biomejs/biome": "1.4.1",
+    "typescript": "^5.3.3",
+    "vite": "^5.0.7"
   }
 }
diff --git a/src/App.tsx b/src/App.tsx
@@ -10,7 +10,6 @@ import { VIEW_PROFILE } from './routes';
 import { Pages } from './types';
 
 import Suspense from './components/Suspense';
-import ModalRoot from './components/ModalRoot';
 
 const Sidebar = lazy(() => import('./components/Sidebar'));
 const Epic = lazy(() => import('./components/Epic'));
@@ -27,8 +26,6 @@ const App = () => {
     await routeNavigator.push(`/${currentView}`);
   }, []);
 
-  const modals = <ModalRoot />;
-
   const [appearance, setAppearance] = useState<'light' | 'dark'>('light');
 
   const toggleAppearance = useCallback(() => {
@@ -58,7 +55,6 @@ const App = () => {
     <ConfigProvider appearance={appearance}>
       <AppRoot>
         <SplitLayout
-          modal={modals}
           header={isVKCOM && <PanelHeader separator={false} />}
           style={{ justifyContent: 'center' }}
         >

diff --git a/src/assets/avaSmall.jpg b/src/assets/avaSmall.jpg
diff --git a/src/components/ExplanationTooltip.tsx b/src/components/ExplanationTooltip.tsx
@@ -1,6 +1,6 @@
 import { FC } from 'react';
 import {
-  Text, unstable_Popover as Popover, Subhead,
+  Text, Popover, Subhead,
 } from '@vkontakte/vkui';
 import { Icon16HelpOutline } from '@vkontakte/icons';
 
@@ -21,7 +21,7 @@ const ExplanationTooltip: FC<TooltipTextProps> = ({ text, tooltipContent }) => {
       {text}
       <Popover
         style={{ maxWidth: 220 }}
-        action='hover'
+        trigger='hover'
         content={textTooltip}
       >
         <Icon16HelpOutline

diff --git a/src/components/ModalRoot/constants.ts b/src/components/ModalRoot/constants.ts
diff --git a/src/components/ModalRoot/index.tsx b/src/components/ModalRoot/index.tsx
diff --git a/src/components/Modals/FullstackModal.tsx b/src/components/Modals/FullstackModal.tsx
diff --git a/src/components/Modals/index.tsx b/src/components/Modals/index.tsx
diff --git a/src/components/NotFound.tsx b/src/components/NotFound.tsx
@@ -28,7 +28,7 @@ const NotFound = () => {
   const routeNavigator = useRouteNavigator();
 
   return (
-    <AppearanceProvider appearance='dark'>
+    <AppearanceProvider value='dark'>
       <AppRoot>
         <Div style={notFoundStyle}>
           <h1 style={text}>404</h1>

diff --git a/src/components/ProfileInfo/UserInfo.tsx b/src/components/ProfileInfo/UserInfo.tsx
@@ -1,24 +1,14 @@
-import { useActiveVkuiLocation, useRouteNavigator } from '@vkontakte/vk-mini-apps-router';
 import {
-  Avatar, Button, Gradient, Link, Title,
+  Avatar, Gradient, Link, Title,
 } from '@vkontakte/vkui';
 
-import { ABOUT_FULLSTACK } from '../ModalRoot/constants';
 import { gradientBorder, styles } from './styles';
 
 import ava from '../../assets/avaSmall.jpg';
 
 import { VK_URL } from '../../constants';
 
-const UserInfo = () => {
-  const routeNavigator = useRouteNavigator();
-  const { modal: activeModal } = useActiveVkuiLocation();
-
-  const handleOpenModal = () => {
-    routeNavigator.push(ABOUT_FULLSTACK);
-  };
-
-  return (
+const UserInfo = () => (
     <Gradient style={{ ...styles, ...gradientBorder }}>
       <Avatar size={90} src={ava} alt='ava' />
       <Title style={{ marginTop: 20 }} level='2' weight='2'>
@@ -28,17 +18,7 @@ const UserInfo = () => {
       <Title level='3' weight='3'>
         Fullstack-разработчик
       </Title>
-      <Button
-        size='l'
-        style={{ marginTop: 10 }}
-        mode='secondary'
-        onClick={handleOpenModal}
-        disabled={activeModal === ABOUT_FULLSTACK}
-      >
-        Кто?
-      </Button>
     </Gradient>
-  );
-};
+);
 
 export default UserInfo;
diff --git a/src/normalize.css b/src/normalize.css
@@ -6,3 +6,7 @@
 ._HorizontalCell__content_1q642_21 {
      word-break: unset !important;
 }
+
+._ImageBase__img_d71ki_32 {
+    object-fit: unset !important;
+}
diff --git a/src/routes/index.ts b/src/routes/index.ts
@@ -1,7 +1,5 @@
 import { createHashRouter, RouteWithoutRoot } from '@vkontakte/vk-mini-apps-router';
 
-import { ABOUT_FULLSTACK } from '../components/ModalRoot/constants';
-
 export const PAGE_MAIN = '/';
 export const PAGE_PROFILE = '/profile';
 export const PAGE_CONTACTS = '/contacts';
@@ -21,18 +19,6 @@ const routes: RouteWithoutRoot[] = [
     panel: VIEW_PROFILE,
     view: VIEW_PROFILE,
   },
-  {
-    path: ABOUT_FULLSTACK,
-    panel: VIEW_PROFILE,
-    view: VIEW_PROFILE,
-    modal: ABOUT_FULLSTACK,
-  },
-  {
-    path: `profile/${ABOUT_FULLSTACK}`,
-    panel: VIEW_PROFILE,
-    view: VIEW_PROFILE,
-    modal: ABOUT_FULLSTACK,
-  },
   {
     path: PAGE_PROFILE,
     panel: VIEW_PROFILE,

diff --git a/tsconfig.json b/tsconfig.json
@@ -20,6 +20,10 @@
     "allowSyntheticDefaultImports": true,
     "noEmitOnError": false,
     "ignoreDeprecations": "5.0",
+    "paths": {
+      "react": ["./node_modules/preact/compat/"],
+      "react-dom": ["./node_modules/preact/compat/"]
+    }
   },
   "include": ["src"],
   "references": [{ "path": "./tsconfig.node.json" }]