chuva-inc · Stuepp · Apr 19, 2024
diff --git a/.browserslistrc b/.browserslistrc
@@ -0,0 +1,16 @@
+# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
+# For additional information regarding the format and rule options, please see:
+# https://github.com/browserslist/browserslist#queries
+
+# For the full list of supported browsers by the Angular framework, please see:
+# https://angular.io/guide/browser-support
+
+# You can see what browsers were selected by your queries by running:
+#   npx browserslist
+
+last 1 Chrome version
+last 1 Firefox version
+last 2 Edge major versions
+last 2 Safari major versions
+last 2 iOS major versions
+Firefox ESR
diff --git a/.editorconfig b/.editorconfig
@@ -0,0 +1,16 @@
+# Editor configuration, see https://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.ts]
+quote_type = single
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false
diff --git a/.gitignore b/.gitignore
@@ -1,77 +1,42 @@
-# Ignore DS_Store for those poor fellas that use MacOS
-.DS_Store
-
-# Ignore directories generated by Composer
-php/vendor/
-
-# ----
-# Angular/ts stuff
-# ----
-
-# Compiled output
-ts/dist
-ts/tmp
-ts/out-tsc
-ts/bazel-out
-
-# Node
-ts/node_modules
-npm-debug.log
-yarn-error.log
-
-# Miscellaneous
-ts/.angular/cache
-.sass-cache/
-ts/connect.lock
-ts/coverage
-ts/libpeerconnection.log
-testem.log
-ts/typings
-
-# System files
-.DS_Store
-Thumbs.db
-
-# Screenshots
-ts/cypress/screenshots
-
-# Miscellaneous
-dart/**/*.class
-dart/**/*.log
-dart/**/*.pyc
-dart/**/*.swp
-dart/**/.DS_Store
-dart/**/.atom/
-dart/**/.buildlog/
-dart/**/.history
-dart/**/.svn/
-dart/**/migrate_working_dir/
-
-# IntelliJ related
-dart/**/*.iml
-dart/**/*.ipr
-dart/**/*.iws
-dart/**/.idea/
-dart/**/.vscode/
-
-# Flutter/Dart/Pub related
-**/doc/api/
-**/ios/Flutter/.last_build_id
-dart/.dart_tool/
-dart/.flutter-plugins
-dart/.flutter-plugins-dependencies
-dart/.packages
-dart/.pub-cache/
-dart/.pub/
-dart/build/
-
-# Symbolication related
-dart/**/app.*.symbols
-
-# Obfuscation related
-dart/**/app.*.map.json
-
-# Android Studio will place build artifacts here
-dart/android/app/debug
-dart/android/app/profile
-dart/android/app/release
+# See http://help.github.com/ignore-files/ for more about ignoring files.
+
+# Compiled output
+/dist
+/tmp
+/out-tsc
+/bazel-out
+
+# Node
+/node_modules
+npm-debug.log
+yarn-error.log
+
+# IDEs and editors
+.idea/
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+*.sublime-workspace
+
+# Visual Studio Code
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+.history/*
+
+# Miscellaneous
+/.angular/cache
+.sass-cache/
+/connect.lock
+/coverage
+/libpeerconnection.log
+testem.log
+/typings
+
+# System files
+.DS_Store
+Thumbs.db
diff --git a/README.md b/README.md
@@ -1,34 +1,46 @@
-# Exercícios
-
-Olá! Este repositório contém os exercícios de desenvolvimento da Chuva, você **deve** implementar pelo menos uma das tecnologias disponíveis, conforme sua preferência pessoal e aptidão.
-
-Só serão considerados para correção testes em que as verificações do Github Actions estejam passando (verdinhas).
-
-
-# Tecnologias
-## Dart
-Nesse caso você deve implementar um protótipo de alta fidelidade no figma de uma tela para você implementar em Flutter, [veja detalhes aqui](https://github.com/chuva-inc/exercicios-2023/tree/master/dart/).
-
-## PHP
-Em PHP você deve implementar o [GaloScrapper, veja os detalhes aqui](https://github.com/chuva-inc/exercicios-2023/tree/master/php/src/WebScrapping).
-
-## Typescript + HTML + SCSS
-Nesse caso você deve implementar uma [página de trabalho](https://github.com/chuva-inc/exercicios-2023/tree/master/ts). Pra facilitar sua vida, nosso repositório já vem com pronto pra consumo, e mesmo que você não for familiar com o Angular ou Typescript, dá pra só colocar o html e o scss nos arquivos corretos, e vai funcionar (inclusive os testes automatizados vão passar).
-
-# FAQ
-Ficou com alguma dúvida? Crie uma issue nesse repo com a sua dúvida :)
-
-## Posso resolver mais de um exercício?
-Sim, pode resolver em todos se quiser, e vamos levar todas as resoluções em consideração!
-
-## Tenho que resolver todos os exercícios?
-Não, você pode resolver só um, dois, ou todos.
-
-## Como entregar os exercícios?
-
-Para entregar os exercícios:
-
-1. Crie um fork **público** deste repositório.
-2. Enquanto programa sua solução, faça [commits atômicos](https://en.wikipedia.org/wiki/Atomic_commit).
-3. Quando estiver tudo passando nos testes, grave o vídeo explicando sua resolução.
-4. Nos envie o link do seu repositório pelo formulário que te enviamos.
+# Página de Trabalho
+Na parte de html/scss/ts preparamos um [protótipo de alta fidelidade no figma](https://www.figma.com/proto/0D27YdXU8ibf0AhsBC2OEm/Chuva---Exerc%C3%ADcio-Frontend?page-id=0%3A1&type=design&node-id=1-123&viewport=404%2C346%2C0.24&t=qF57GDZnZJyE7F7q-1&scaling=scale-down&starting-point-node-id=1%3A123&show-proto-sidebar=1&mode=design) de uma tela para você implementar o HTML + CSS. Você pode fazer em CSS puro, utilizar pré-processadores CSS (SASS, LESS, etc), ou mesmo utilizar um framework (Bootstrap, Foundation, Ant, etc), utilize a ferramenta que você se sentir melhor e que lhe traga o melhor resultado.)
+
+![Screenshot Figma](https://github.com/chuva-inc/exercicios-2023/raw/master/ts/src/assets/figma.jpg)
+-> [Link para o Protótipo](https://www.figma.com/proto/0D27YdXU8ibf0AhsBC2OEm/Chuva---Exerc%C3%ADcio-Frontend?page-id=0%3A1&type=design&node-id=1-123&viewport=404%2C346%2C0.24&t=qF57GDZnZJyE7F7q-1&scaling=scale-down&starting-point-node-id=1%3A123&show-proto-sidebar=1&mode=design)
+
+-> [Link para o Editável](https://www.figma.com/file/0D27YdXU8ibf0AhsBC2OEm/Chuva---Exerc%C3%ADcio-Frontend?type=design&node-id=0%3A1&mode=design&t=yAHAJDpJya32qSBU-1)
+
+
+### Como rodar
+
+Dependências:
+
+* Node/npm
+* Cypress
+
+Rode o seguinte comando para instalar o ambiente:
+
+```
+npm install
+```
+
+Para rodar os testes, rode o seguinte comando:
+
+```
+npm run test
+```
+
+
+Para rodar desenvolver, rode os seguintes comandos:
+
+Para ligar o ambiente
+```
+ng serve
+```
+
+Para rodar a UI de testes
+```
+npx cypress open --env type=base
+```
+
+### Dicas de resolução
+
+Pra facilitar sua vida, nosso repositório já vem com pronto pra consumo, e mesmo que você não for familiar com o Angular ou Typescript, dá pra só colocar o html e o scss nos arquivos corretos, e vai funcionar (inclusive os testes automatizados vão passar).
+
+Não esqueca de commitar os screenshots que o cypress gera, utilizaremos eles na correção do exercício.
diff --git a/angular.json b/angular.json
@@ -0,0 +1,110 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "ts": {
+      "projectType": "application",
+      "schematics": {
+        "@schematics/angular:component": {
+          "style": "scss"
+        }
+      },
+      "root": "",
+      "sourceRoot": "src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "outputPath": "dist/ts",
+            "index": "src/index.html",
+            "main": "src/main.ts",
+            "polyfills": "src/polyfills.ts",
+            "tsConfig": "tsconfig.app.json",
+            "inlineStyleLanguage": "scss",
+            "assets": [
+              "src/favicon.ico",
+              "src/assets"
+            ],
+            "styles": [
+              "src/styles.scss"
+            ],
+            "scripts": []
+          },
+          "configurations": {
+            "production": {
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "500kb",
+                  "maximumError": "1mb"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "2kb",
+                  "maximumError": "4kb"
+                }
+              ],
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.prod.ts"
+                }
+              ],
+              "outputHashing": "all"
+            },
+            "development": {
+              "buildOptimizer": false,
+              "optimization": false,
+              "vendorChunk": true,
+              "extractLicenses": false,
+              "sourceMap": true,
+              "namedChunks": true
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "configurations": {
+            "production": {
+              "browserTarget": "ts:build:production"
+            },
+            "development": {
+              "browserTarget": "ts:build:development"
+            }
+          },
+          "defaultConfiguration": "development"
+        },
+        "extract-i18n": {
+          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "options": {
+            "browserTarget": "ts:build"
+          }
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "main": "src/test.ts",
+            "polyfills": "src/polyfills.ts",
+            "tsConfig": "tsconfig.spec.json",
+            "karmaConfig": "karma.conf.js",
+            "inlineStyleLanguage": "scss",
+            "assets": [
+              "src/favicon.ico",
+              "src/assets"
+            ],
+            "styles": [
+              "src/styles.scss"
+            ],
+            "scripts": []
+          }
+        }
+      }
+    }
+  },
+  "cli": {
+    "analytics": false
+  }
+}
diff --git a/app/app.component.base.html b/app/app.component.base.html
@@ -0,0 +1,43 @@
+<div class="page">
+  <app-side-menu></app-side-menu>
+  <!-- HEADER ; CONTENT ; FOOTER  -->
+  <div>
+    <app-header></app-header>
+    <!-- CONTENT -->
+    <div class="container">
+      <div class="content">
+        <!-- VIDEO AND DETAILS -->
+        <app-video-details></app-video-details>
+        <!-- RESUME -->
+        <app-summary></app-summary>
+        <!-- COMMENTS -->
+        <div class="content-box">
+          <div class="content-header">
+            <p>Discussões</p>
+          </div>
+          <!-- CREATE COMMENT -->
+          <app-create-comment></app-create-comment>
+          <!-- COMMENT -->
+          <div style="margin-top: 30px;">
+            <!--
+              Only reveals an already created comment when user sends a new one, to actually create would need some back-end logic
+            -->
+            <div style="position: relative;" *ngFor="let comment of commentList">
+              <div class="texto" [style.display]="comment.censorship_display">
+                Aguardando feedback dos autores
+                <a>Editar tópico</a>
+              </div>
+              <app-comment class="answered-topic" [comment_status]="comment"></app-comment>
+            </div>
+
+          </div>
+        </div>
+      </div>
+      <!-- FOOTER -->
+      <div>
+        <app-footer></app-footer>
+      </div>
+    </div>
+
+  </div>
+</div>