Homework 7

.github/workflows/main.yml

@@ -35,27 +35,27 @@ jobs:
         run: npm run lint && npm test
 
       # Собираем приложение
-      - name: Build Application
-        run: npm run build
+      # - name: Build Application
+      #   run: npm run build
 
       # Публикуем приложение на Github Pages
-      - name: Deploy to Github Pages
+      # - name: Deploy to Github Pages
+      #   uses: JamesIves/[email protected]
+      #   with:
+      #     branch: gh-pages
+      #     folder: dist
+
+      # Собираем Storybook
+      - name: Build Storybook
+        run: npm run build-storybook
+
+      # Публикуем Storybook на Github Pages
+      - name: Deploy Storybook to Github Pages
         uses: JamesIves/[email protected]
         with:
           branch: gh-pages
-          folder: dist
-
-      #      # Собираем Storybook
-      #      - name: Build Storybook
-      #        run: npm run build-storybook
-      #
-      #      # Публикуем Storybook на Github Pages
-      #      - name: Deploy Storybook to Github Pages
-      #        uses: JamesIves/[email protected]
-      #        with:
-      #          branch: gh-pages
-      #          folder: storybook-static
-      #          commit-message: "Automatically publish Storybook"
+          folder: storybook-static
+          commit-message: "Automatically publish Storybook"
 
       # Останавливаем выполнение строго при неудачных тестах
       - name: Fail on failed tests

package.json

@@ -64,8 +64,11 @@
     "webpack-dev-server": "^4.15.0"
   },
   "dependencies": {
+    "@hookform/resolvers": "^3.10.0",
     "clsx": "^1.2.1",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-hook-form": "^7.54.2",
+    "zod": "^3.24.1"
   }
 }

src/app/App.css

@@ -1,38 +1,44 @@
 .App {
-    text-align: center;
+  text-align: center;
+  background-color: var(--background-color);
+  color: var(--color);
 }
 
 .App-logo {
-    height: 40vmin;
-    pointer-events: none;
+  height: 40vmin;
+  pointer-events: none;
 }
 
 @media (prefers-reduced-motion: no-preference) {
-    .App-logo {
-        animation: App-logo-spin infinite 20s linear;
-    }
+  .App-logo {
+    animation: App-logo-spin infinite 20s linear;
+  }
 }
 
 .App-header {
-    background-color: #282c34;
-    min-height: 100vh;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    font-size: calc(10px + 2vmin);
-    color: white;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-size: calc(10px + 2vmin);
+}
+
+.App-nav {
+  display: flex;
+  justify-content: center;
+  gap: 15px;
 }
 
 .App-link {
-    color: #61dafb;
+  color: #61dafb;
 }
 
 @keyframes App-logo-spin {
-    from {
-        transform: rotate(0deg);
-    }
-    to {
-        transform: rotate(360deg);
-    }
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
 }

src/app/App.tsx

@@ -2,16 +2,57 @@ import React from 'react';
 import logo from './logo.svg';
 import './App.css';
 
+import { ThemeProvider } from '../shared/providers/ThemeProvider';
+import { LangProvider, Content, useLang } from '../shared/providers/LangProvider';
+import { ThemeSwitcher } from '../shared/theme-switcher/ThemeSwitcher';
+import { LangSwitcher } from '../shared/lang-switcher/LangSwitcher';
+
+const MainContent = () => {
+  const content: Content = {
+    fullname: { ru: 'Игорь Аралов', en: 'Igor Aralov' },
+    target: {
+      ru: 'Научиться разрабатывать веб-приложения при помощи React',
+      en: 'Learn to develop web applications using React',
+    },
+    skills: {
+      ru: 'Профессионально работаю SQL разработчиком уже 10 лет и принимаю участие в разработке десктопного приложения на Delphi',
+      en: 'I have been working professionally as an SQL developer for 10 years and am involved in the development of a desktop application using Delphi.',
+    },
+    hobby: {
+      ru: 'Интересуюсь фронтенд и фуллстек разработкой на js/ts',
+      en: "I'm interested in frontend and full-stack development using js/ts",
+    },
+  };
+
+  const { useContent } = useLang();
+  const l = useContent(content);
+
+  return (
+    <>
+      <h1>{l('fullname')} ([email protected])</h1>
+      <p>{l('target')}</p>
+      <p>{l('skills')}</p>
+      <p>{l('hobby')}</p>
+    </>
+  );
+};
+
 function App() {
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Текст писать тут
-        </p>
-      </header>
-    </div>
+    <ThemeProvider>
+      <LangProvider>
+        <div className="App">
+          <header className="App-header">
+            <div className="App-nav">
+              <ThemeSwitcher />
+              <LangSwitcher />
+            </div>
+            <img src={logo} className="App-logo" alt="logo" />
+            <MainContent />
+          </header>
+        </div>
+      </LangProvider>
+    </ThemeProvider>
   );
 }
 

src/app/index.css

@@ -1,13 +1,21 @@
+[data-theme='light'] {
+  --background-color: #fff;
+  --color: #000;
+}
+
+[data-theme='dark'] {
+  --background-color: #333;
+  --color: #fff;
+}
+
 body {
-    margin: 0;
-    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto',
-        'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans',
-        'Helvetica Neue', sans-serif;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans',
+    'Droid Sans', 'Helvetica Neue', sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }
 
 code {
-    font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-        monospace;
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
 }