Sprint 2

.editorconfig

@@ -0,0 +1,3 @@
+[*]
+indent_style = space
+indent_size = 2

.eslintrc.cjs

@@ -0,0 +1,34 @@
+module.exports = {
+    "env": {
+        "browser": true,
+        "node": true,
+        "es2021": true
+    },
+    "extends": [
+        "eslint:recommended",
+        "plugin:@typescript-eslint/recommended"
+    ],
+    "overrides": [
+        {
+            "env": {
+                "node": true
+            },
+            "files": [
+                ".eslintrc.{js,cjs}"
+            ],
+            "parserOptions": {
+                "sourceType": "script"
+            }
+        }
+    ],
+    "parser": "@typescript-eslint/parser",
+    "parserOptions": {
+        "ecmaVersion": "latest",
+        "sourceType": "module"
+    },
+    "plugins": [
+        "@typescript-eslint"
+    ],
+    "rules": {
+    },
+}

.gitignore

@@ -0,0 +1,26 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+.stylelintcache
+package-lock.json

.prettierrc

@@ -0,0 +1,6 @@
+{
+  "trailingComma": "es5",
+  "tabWidth": 2,
+  "semi": false,
+  "singleQuote": true
+}

.stylelintrc

@@ -0,0 +1,5 @@
+{
+  "extends": "stylelint-config-standard",
+  "rules": {"selector-class-pattern": null
+  }
+}

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Yan
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -1,83 +1,42 @@
-### Ветка, в которой делаете задания спринта, должна называться sprint_i, где i - номер спринта. Не переименовывайте её.
+# Тренировочный проект мессенджера.
 
-### Откройте pull request в ветку main из ветки, где вы разрабатывали проект, и добавьте ссылку на этот pr в README.md в ветке main. 
-### ВАЖНО: pull request должен называться “Sprint i” (i — номер спринта).
+Использовался сборщик Vite, Typescript, линтеры Eslint и Stylelint, шаблонизатор Handlebars
 
-### Например, задания для проектной работы во втором спринте вы делаете в ветке sprint_2. Открываете из неё pull request в ветку main. Ссылку на этот pr добавляете в README.md в ветке main. После этого на платформе Практикума нажимаете «Проверить задание».
+### Макеты приложения
 
-### Также не забудьте проверить, что репозиторий публичный.
----
+[Figma](https://www.figma.com/file/EhwzOuHmvUtGVE62At4ZgK/Chat_external_link-(Copy)?type=design&mode=design&t=bhHRbfH2S9ivRlpz-1 "Макеты в Figma")
 
+### Ссылки на страницы приложения при запуске локально
 
-Даже законченный проект остаётся только заготовкой, пока им не начнут пользоваться. Но сначала пользователь должен понять, зачем ему пользоваться вашим кодом. В этом помогает файл README.
+| Экран           | Ссылка                              |
+|:----------------|-------------------------------------|
+| Логин           | http://localhost:3000/#login        |
+| Регистрация     | http://localhost:3000/#register     |
+| Мессенджер      | http://localhost:3000/#main         |
+| Профиль         | http://localhost:3000/#profile      |
+| Изменить данные | http://localhost:3000/#editUserdata |
+| Изменить пароль | http://localhost:3000/#editPassword |
+| 404             | http://localhost:3000/#notFound     |
+| 500             | http://localhost:3000/#serverError  |
 
-README — первое, что прочитает пользователь, когда попадёт в репозиторий на «Гитхабе». Хороший REAMDE отвечает на четыре вопроса:
+### Ссылки на страницы приложения на Netlify
 
-- Готов ли проект к использованию?
-- В чём его польза?
-- Как установить?
-- Как применять?
+| Экран           | Ссылка                                   |
+|:----------------|------------------------------------------|
+| Логин           | https://yamess.netlify.app/#login        |
+| Регистрация     | https://yamess.netlify.app/#register     |
+| Мессенджер      | https://yamess.netlify.app/#main         |
+| Профиль         | https://yamess.netlify.app/#profile      |
+| Изменить данные | https://yamess.netlify.app/#editUserdata |
+| Изменить пароль | https://yamess.netlify.app/#editPassword |
+| 404             | https://yamess.netlify.app/#notFound     |
+| 500             | https://yamess.netlify.app/#serverError  |
 
-## Бейджи
+### Команды npm
 
-Быстро понять статус проекта помогают бейджи на «Гитхабе». Иногда разработчики ограничиваются парой бейджев, которые сообщат о статусе тестов кода:
+| Команда       | Результат                         |
+|:--------------|-----------------------------------|
+| npm run start | сборка и запуск сервера Express   |
+| npm run dev   | запуск dev сервера для разработки |
+| npm run build | запуск сборки проекта             |
 
-![Бэйджи](https://github.com/yandex-praktikum/mf.messenger.praktikum.yandex.images/blob/master/mf/b.png)
-
-Если пользователь увидит ошибку в работе тестов, то поймёт: использовать текущую версию в важном проекте — не лучшая идея.
-
-Бейджи помогают похвастаться достижениями: насколько популярен проект, как много разработчиков создавало этот код. Через бейджи можно даже пригласить пользователя в чат:
-
-![Версии](https://github.com/yandex-praktikum/mf.messenger.praktikum.yandex.images/blob/master/mf/vers.png)
-
-В README **Webpack** строка бейджев подробно рассказывает о покрытии кода тестами. Когда проект протестирован, это вызывает доверие пользователя. Последний бейдж приглашает присоединиться к разработке. 
-
-Другая строка убедит пользователя в стабильности инфраструктуры и популярности проекта. Последний бейдж зовёт в чат проекта.
-
-## Описание
-
-Краткое опишите, какую задачу решает проект. Пользователь не верит обещаниям и не готов читать «полотна» текста. Поэтому в описании достаточно нескольких строк:
-
-![Описание](https://github.com/yandex-praktikum/mf.messenger.praktikum.yandex.images/blob/master/mf/desc.png)
-
-Авторы **React** дробят описание на абзацы и списки — так проще пробежаться глазами по тексту и найти ключевую информацию.
-
-Если у проекта есть сайт, добавьте ссылку в заголовок.
-
-## Установка
-
-Лучше всего пользователя убеждает собственный опыт. Чем быстрее он начнёт пользоваться проектом, тем раньше почувствует пользу. Для этого помогите ему установить приложение: напишите краткую пошаговую инструкцию.
-
-Если проект предназначен для разработчиков, добавьте информацию об установке тестовых версий. Например:
-
-- `npm install` — установка стабильной версии,
-- `npm start` — запуск версии для разработчика,
-- `npm run build:prod` — сборка стабильной версии.
-
-## **Примеры использования**
-
-Хорошо, если сразу после установки пользователь сможет решить свои задачи без изучения проекта. Это особенно верно, если ваш пользователь — не профессиональный разработчик. Но даже профессионал поймёт вас лучше, если показать примеры использования:
-
-![Ссылки](https://github.com/yandex-praktikum/mf.messenger.praktikum.yandex.images/blob/master/mf/link.png)
-
-Для более подробных инструкции добавьте новые разделы или ссылки:
-
-- на документацию,
-- вики проекта,
-- описание API.
-
-В учебном проекте будут полезен раздел с описанием стиля кода и правилами разработки: как работать с ветками, пул-реквестами и релизами.
-
-### **Команда**
-
-Если вы работаете в команде, укажите основных участников: им будет приятно, а новые разработчики охотнее присоединятся к проекту. «Гитхаб» — не просто инструмент, это социальная сеть разработчиков.
-
-![Команда](https://github.com/yandex-praktikum/mf.messenger.praktikum.yandex.images/blob/master/mf/team.png)
-
-### **Примеры README**
-
-- «[Реакт](https://github.com/facebook/react)»,
-- «[Эхо](https://github.com/labstack/echo)»,
-- «[Вебпак](https://github.com/webpack/webpack)»,
-- «[ТДенгине](https://github.com/taosdata/TDengine)»,
-- «[Соул-хантинг](https://github.com/vladpereskokov/soul-hunting/)».

package.json

@@ -0,0 +1,36 @@
+{
+  "name": "yamess",
+  "private": true,
+  "version": "0.0.1",
+  "type": "module",
+  "engines": {
+    "node": ">=18.14.0"
+  },
+  "scripts": {
+    "start": "tsc && vite build && node src/server.js",
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@types/express": "^4.17.21",
+    "express": "^4.18.3",
+    "handlebars": "^4.7.6"
+  },
+  "devDependencies": {
+    "@typescript-eslint/eslint-plugin": "^7.1.0",
+    "@typescript-eslint/parser": "^7.1.0",
+    "eslint": "^8.57.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-prettier": "^5.1.3",
+    "nanoid": "^5.0.6",
+    "postcss-nested": "^6.0.1",
+    "prettier": "3.2.5",
+    "stylelint": "^16.3.1",
+    "stylelint-config-standard": "^36.0.0",
+    "typescript": "^5.3.3",
+    "vite": "^5.1.4",
+    "vite-plugin-eslint": "^1.8.1",
+    "vite-plugin-stylelint": "^5.3.1"
+  }
+}

postcss.config.js

@@ -0,0 +1,5 @@
+import postcssNested from 'postcss-nested'
+
+export default {
+    plugins: [postcssNested],
+}

src/components/avatar/avatar.css

@@ -0,0 +1,13 @@
+.avatar {
+  width: 130px;
+  height: 130px;
+  overflow: hidden;
+  border-radius: 50%;
+
+  &__img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    object-position: center;
+  }
+}

src/components/avatar/avatar.ts

@@ -0,0 +1,34 @@
+import Block from '../../core/Block'
+import './avatar.css'
+
+// language=hbs
+const avatarTemplate = `
+    <div class="avatar {{ className }}">
+        <img class="avatar__img" src="{{ src }}" alt="{{alt}}">
+    </div>
+`
+
+type AvatarProps = {
+  src: string
+  alt: string
+  size?: string
+  className?: string
+}
+
+export default class Avatar extends Block {
+  constructor(props: AvatarProps) {
+    super(props)
+    const element = this.element as HTMLElement
+    if (props.size) {
+      element.style.width = props.size
+      element.style.height = props.size
+    } else {
+      element.style.width = '130px'
+      element.style.height = '130px'
+    }
+  }
+
+  render() {
+    return this.compile(avatarTemplate, this.props)
+  }
+}

src/components/button/button.css

@@ -0,0 +1,15 @@
+.button {
+  width: 100%;
+  padding: 12px 0;
+  background: var(--color-blue);
+  color: var(--color-white);
+  border: none;
+  border-radius: var(--border-radius);
+  cursor: pointer;
+}
+
+.button-icon {
+  background: none;
+  border: none;
+  outline: none;
+}

src/components/button/button.ts

@@ -0,0 +1,20 @@
+import Block, { Props } from '../../core/Block'
+import './button.css'
+
+// language=hbs
+const buttonTemplate: string = `<button class="button {{ className }}">{{ label }}</button>`
+
+type ButtonProps = {
+  label: string
+  className?: string
+} & Props
+
+export default class Button extends Block {
+  constructor(props: ButtonProps) {
+    super(props)
+  }
+
+  render() {
+    return this.compile(buttonTemplate, this.props)
+  }
+}

src/components/chat/chat.css

@@ -0,0 +1,42 @@
+.chat {
+  display: grid;
+  grid-template-rows: 44px auto 44px;
+  padding: 10px 0;
+  gap: 10px;
+  max-height: 100%;
+  overflow-y: hidden;
+  scrollbar-width: thin;
+  box-sizing: border-box;
+
+  &__user {
+    display: grid;
+    grid-template-columns: 34px auto 30px;
+    padding: 0 20px 10px;
+    gap: 10px;
+    align-items: center;
+    border-bottom: 1px solid var(--border);
+  }
+
+  &__messages {
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+    height: 100%;
+    padding: 0 20px;
+    overflow-y: scroll;
+    scrollbar-width: thin;
+  }
+
+  &__input {
+    display: flex;
+    align-items: center;
+    padding: 10px 20px 0;
+    border-top: 1px solid var(--border);
+
+    .lni-paperclip {
+      color: var(--color-gray);
+      font-size: 20px;
+      transform: rotate(45deg);
+    }
+  }
+}