sprint_1

README.md

@@ -0,0 +1,81 @@
+# Описание проектной работы первого спринта, приложение Mesto
+
+## Проектирование
+
+В качестве фреймворка для создания микрофронтэндов выбран Module Federation.
+Это позволяет разделять код между несколькими независимыми приложениями и динамически загружать его в браузере пользователя. 
+В результате над кодом различных микрофронтэндов команды разработки могут работать и деплоить независимо, ускоряется начальная загрузка приложения.
+
+###  Обновленная структура проекта
+
+Исходя из доменных зон приложения, его можно поделить на следующие микрофронтэнды:
+
+1. _Хост-приложение_ - главное окно, инкапсулирует все остальные микрофронтэнды и предоставляет хэдер-футер.
+2. _Приложение для аутентификации_ - предоставляет функционал регистрации и авторизации пользователей.
+3. _Приложение для управления профелем_ - предоставляет функционал для редатирования/отображения профиля.
+4. _Приложение для управления карточками_ - функционал для отображения, добавления карточек с местами, лайки/дизлайки.
+
+### Дерево каталогов
+
+- _host_
+  - _/src_
+    - _/components_
+      - Header.js - Хедер страницы
+      - Footer.js - Футер страницы
+      - ProtectedRoute.js - Компонент маршрутизации
+      - Main.js – Главный компонент для отображения профиля и карточек
+    - /styles
+      - content - Стили для контента страницы
+      - header - Стили для компонента хидера
+      - footer - Стили для компонента футера
+      - page - Стили для страницы
+    - index.js - Точка входа хостового приложения
+  - package.json - Зависимости и скрипты микрофронтенда
+  - webpack.config.js - Конфиг для сборки с помощью webpack
+
+- _auth_
+  - _/src_
+    - _/components_
+      - Login.js – Компонент логина пользователя
+      - Register.js – Компонент регистрации пользователя
+    - _/styles_
+      - login – Стили для компонента логина
+      - auth-form – Стили для компонента регистрации
+    - _/utils_
+      - auth.js – Протокол для аутентификации
+    - index.js – Точка входа микрофронтенда
+  - package.json – Зависимости и скрипты микрофронтенда
+  - webpack.config.js - Конфиг для сборки с помощью webpack
+
+- _profile_
+  - _/src_
+    - _/components_
+      - EditProfilePopup.js – Компонент для редактирования профиля
+      - EditAvatarPopup.js – Компонент для обновления аватара
+    - _/utils_
+      - api.js – Утилиты для работы с API профиля
+    - _/styles_
+      - profile – Стили для компонента профиля
+    - index.js – Точка входа микрофронтенда
+  - package.json – Зависимости и скрипты микрофронтенда
+  - webpack.config.js - Конфиг для сборки с помощью webpack
+
+- _/places_
+  - _/src_
+    - _/components_
+      - Card.js – Компонент для отображения карточки
+      - AddPlacePopup.js – Компонент для добавления новой карточки
+      - ImagePopup.js – Компонент для отображения увеличенной карточки
+    - _/utils_
+      - api.js – Утилиты для работы с API карточек
+    - _/styles_
+      - card – Стили для карточек
+      - popup – Стили для всплывающих окон
+    - index.js – Точка входа микрофронтенда
+  - package.json – Зависимости и скрипты микрофронтенда
+  - webpack.config.js - Конфиг для сборки с помощью webpack
+
+## Второе задание
+
+Ссылка на обновленную архитектуру монолитного приложения из второго задания
+https://drive.google.com/file/d/1zrW0wUP8ORCMbGSkBLfTUXk65E0LdTgp/view?usp=sharing

frontend/microfrontend/auth/.babelrc

@@ -0,0 +1,7 @@
+{
+  "presets": [
+    ["@babel/preset-react", { "runtime": "automatic" }],
+    "@babel/preset-env"
+  ],
+  "plugins": [["@babel/transform-runtime"]]
+}

frontend/microfrontend/auth/.gitignore

@@ -0,0 +1,116 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Snowpack dependency directory (https://snowpack.dev/)
+web_modules/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+.env.test
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+.parcel-cache
+
+# Next.js build output
+.next
+out
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and not Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port
+
+# Stores VSCode versions used for testing VSCode extensions
+.vscode-test
+
+# yarn v2
+.yarn/cache
+.yarn/unplugged
+.yarn/build-state.yml
+.yarn/install-state.gz
+.pnp.*

frontend/microfrontend/auth/compilation.config.js

@@ -0,0 +1,31 @@
+const printCompilationMessage = (status, port) => {
+  let messageColor, messageType, browserMessage;
+
+  switch (status) {
+    case "success":
+      messageColor = "\x1b[32m";
+      messageType = "Compiled successfully!";
+      browserMessage = "You can now view";
+      break;
+    case "failure":
+      messageColor = "\x1b[31m";
+      messageType = "Compilation Failed!";
+      browserMessage = "You can't now view";
+      break;
+    case "compiling":
+      messageColor = "\x1b[94m";
+      messageType = "Compiling...";
+      browserMessage = "Compiling the";
+      break;
+  }
+
+  console.log(`\n\n
+  ${messageColor}${messageType}\x1b[0m\n
+  ${browserMessage} \x1b[1mRemote\x1b[0m in the browser.
+  ${messageColor}${messageType}\x1b[0m\n
+  \x1b[1mLocal\x1b[0m:  http://localhost:\x1b[1m${port}\x1b[0m
+  \x1b[1mLocal\x1b[0m:  http://localhost:\x1b[1m${port}\x1b[0m\n\n
+    `);
+};
+
+module.exports = printCompilationMessage;

frontend/microfrontend/auth/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "auth",
+  "version": "1.0.0",
+  "scripts": {
+    "build": "webpack --mode production",
+    "build:dev": "webpack --mode development",
+    "build:start": "cd dist && PORT=8081 npx serve",
+    "start": "webpack serve --mode development",
+    "start:live": "webpack serve --mode development --live-reload --hot"
+  },
+  "license": "MIT",
+  "author": {
+    "name": "Jack Herrington",
+    "email": "jherr@pobox.com"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.15.8",
+    "@babel/plugin-transform-runtime": "^7.15.8",
+    "@babel/preset-env": "^7.15.8",
+    "@babel/preset-react": "^7.14.5",
+    "autoprefixer": "^10.1.0",
+    "babel-loader": "^8.2.2",
+    "css-loader": "^6.3.0",
+    "html-webpack-plugin": "^5.3.2",
+    "postcss": "^8.2.1",
+    "postcss-loader": "^4.1.0",
+    "style-loader": "^3.3.0",
+    "webpack": "^5.57.1",
+    "webpack-cli": "^4.10.0",
+    "webpack-dev-server": "^4.3.1",
+    "dotenv-webpack": "^8.0.1"
+  },
+  "dependencies": {
+    "@babel/runtime": "^7.13.10",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  }
+}

frontend/microfrontend/auth/src/App.jsx

@@ -0,0 +1,19 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+
+import "./index.css";
+
+const App = () => (
+  <div className="container">
+    <div>Name: auth</div>
+    <div>Framework: react</div>
+    <div>Language: JavaScript</div>
+    <div>CSS: Empty CSS</div>
+  </div>
+);
+const rootElement = document.getElementById("app")
+if (!rootElement) throw new Error("Failed to find the root element")
+
+const root = ReactDOM.createRoot(rootElement)
+
+root.render(<App />)

frontend/microfrontend/auth/src/components/Login.js

@@ -0,0 +1,39 @@
+import React from 'react';
+
+import '../blocks/login/login.css';
+
+function Login ({ onLogin }){
+  const [email, setEmail] = React.useState('');
+  const [password, setPassword] = React.useState('');
+
+  function handleSubmit(e){
+    e.preventDefault();
+    const userData = {
+      email,
+      password
+    }
+    onLogin(userData);
+  }
+  return (
+    <div className="auth-form">
+      <form className="auth-form__form" onSubmit={handleSubmit}>
+        <div className="auth-form__wrapper">
+          <h3 className="auth-form__title">Вход</h3>
+          <label className="auth-form__input">
+            <input type="text" name="name" id="email"
+              className="auth-form__textfield" placeholder="Email"
+              onChange={e => setEmail(e.target.value)} required  />
+          </label>
+          <label className="auth-form__input">
+            <input type="password" name="password" id="password"
+              className="auth-form__textfield" placeholder="Пароль"
+              onChange={e => setPassword(e.target.value)} required  />
+          </label>
+        </div>
+        <button className="auth-form__button" type="submit">Войти</button>
+      </form>
+    </div>
+  )
+}
+
+export default Login;