Merge pull request #1 from Softx0/develop

v1.0.0

Author: Softx0

.eslintignore

@@ -0,0 +1,16 @@
+node_modules
+**/dist
+**/build
+**/coverage
+*.css
+*.svg
+**/configs
+.eslintrc
+.prettierrc
+index.html
+package.json
+README.md
+src/vite-env.d.ts
+tsconfig.json
+tsconfig.node.json 
+vite.config.ts

.eslintrc

@@ -0,0 +1,20 @@
+{
+  "root": true,
+  "extends": ["./configs/eslint/recommended.cjs", "prettier"],
+  "plugins": ["prettier"],
+  "parser": "@typescript-eslint/parser",
+    "parserOptions": {
+        "ecmaFeatures": {
+            "jsx": true
+        },
+        "ecmaVersion": "latest",
+        "sourceType": "module"
+    },
+  "env": {
+    "browser": true,
+    "es2021": true,
+    "node": true,
+    "jest": true
+  }
+  
+}

.gitignore

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

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+yarn run lint-and-prettier

.prettierignore

@@ -0,0 +1,14 @@
+# Ignore artifacts:
+build
+coverage
+**/configs
+
+.eslintrc
+.prettierrc
+index.html
+package.json
+README.md
+src/vite-env.d.ts
+tsconfig.json
+tsconfig.node.json 
+vite.config.ts

.prettierrc

@@ -0,0 +1,12 @@
+{
+  "bracketSameLine": true,
+  "bracketSpacing": false,
+  "jsxSingleQuote": false,
+  "semi": true,
+  "trailingComma": "none",
+  "singleQuote": false,
+  "tabWidth": 2,
+  "printWidth": 160,
+  "arrowParens": "always",
+  "endOfLine": "auto"
+}

README.md

@@ -1 +1,103 @@
-# react-templater-2023
+## React Boilerplate
+
+Proyecto con la estructura inicial para todos los proyectos basados en React.js + Typescript
+
+## Que debo conocer antes de:
+
+### Tecnologias
+
+- ViteJS
+- React v18
+- Docker
+- ESLint
+- Prettier
+- Husky
+- Axios
+
+### Setup
+
+1. Clonar el repositorio
+2. Crear archivo `.env` con las variables especificadas en el `.env.sample`
+3. Para correrlo sin docker:
+
+   3.1. Situarse en la raiz del proyecto, proceder a instalar las dependencias con `yarn install`
+
+   3.2. Ejecutar `yarn start`
+
+4. Para correrlo con docker:
+   4.1. Construimos la imagen
+   ```
+   docker build -t IMAGE_NAME:$TAG_IMAGE_DEV -f Dockerfile .
+   ```
+   4.2. Procedemos a crear el container
+   ```
+   docker run -dp 3000:3000 --name PROJECT_NAME IMAGE_NAME:$TAG_IMAGE_DEV
+   ```
+5. Abrir el browser y dirigirse a `localhost:3000`
+
+### Consideraciones para el CI-CD
+
+Como se presenta en el `Dockerfile`, se debe tener en cuenta antes de emitir un lanzamiento hacia el CI se debe de con antelación crear el archivo yarn.lock localmente. Esto con el objetivo de optimizar el despliegue y liberación del proyecto en el servidor, así como también que el motivo es que a nivel del Dockerfile se esta utilizando el comando `yarn install --frozen-lockfile` buscando mejorar el rendimiento del pipeline.
+
+## Arquitectura
+
+### Clean Architecture
+
+En _Clean Architecture_, una aplicación se divide en responsabilidades y cada una de estas responsabilidades se representa en forma de capa.
+
+Se basa en que la capa de dominio (Models/State) no dependa de ninguna capa exterior.
+La de aplicación sólo depende de la de dominio y el resto (normalmente presentación y acceso a datos) depende de la capa de aplicación.
+Esto se logra con la implementación de interfaces que luego tendrán que implementar las capas externas mediante la inyección de dependencias.
+
+El siguiente diagrama representa la adaptación hecha de Clean Architecture para un proyecto Frontend basado en Typescrit y React
+
+![CleanArchitectureReact](https://user-images.githubusercontent.com/32858351/173492130-2400f1b6-0262-4214-86c8-2733a5219f57.svg)
+
+### Capas
+
+- **Servicios Externos:** es la capa que contiene los servicios que conectan el dominio con el mundo exterior (capas exteriores). Aquí se definen los contratos, interfaces destinados a consumir los servicios externos.
+
+  - **services**: todos aquellos lugares donde vamos a estar llamando para buscar la información
+
+- **Adaptadores:** es la capa de estandarización datos. Implementa interfaces definida en la capa de Servicios Externos y estandariza los responses de los servicios externos buscando llevar a la aplicación la menor cantidad errores humanos.
+
+  - **adapters**: estandarizar en base al modelo y el endpoint de momento. Reciben informacion y la devuelven.
+  - **interceptors**: se busca en base a los adapters adaptar lo que enviamos y lo que recibimos (usalmente se utiliza axios como estandar)
+
+- **Componentes:** Aqui se define toda la logica de negocio, mediante los components como tal, los hooks, utilities entre otros...
+
+  - **components**: logica de negocio / componentes estilizados
+  - **hooks**: custom hooks que sean reutilizables en un segmento o toda la aplicación, para controlar su ciclo de vida.
+  - **routes**: definir las rutas de la aplicación y sus conexiones
+  - **utilities**: porciones de logica reutilizables en la aplicacion
+  - **assets**: estilos, fonts, recursos graficos, entre otros.
+
+- **Models/State:** es el corazon de la aplicación y tiene que estar totalmente aislada de cualquier dependencia ajena a la lógica o los datos de negocio. Puede contener entidades, value objects, eventos y servicios del dominio. Representan el state y el state en sí.
+
+  - **types/interfaces/models**: dar la representacion de nuestras entidades, y estandarizar un contrato sobre lo que se utilizara.
+  - **context**: cualquier recurso que se necesite para manejar el state dentro de un alcance definido y que no sera necesario en toda la aplicación en todo momento.
+  - **redux**: información que se necesita en toda la aplicación en todo momento.
+
+### Patrones y metodologías utilizadas:
+
+- **Axios:** Para el consumo de servicios en la capa de Servicios Externos
+
+- **Pruebas unitarias:** Se debe utilizar jest asi como react-testing-library
+
+- **ESLint:** En este proyecto se utiliza eslinter para la estandarización y verificación del código
+
+- **Prettier:** De igual manera buscando establecer un estandar de legibilidad del código formateando un estilo en comun.
+
+- **Husky:** Utilizando las virtudes, como pre-commits en el cual se ejecutan los comandos de eslint y prettier, para que antes de cada commit se le de formato con prettier y se valide el codigo que se trata de commitear con ESLint
+
+### Tecnología CSS
+
+**Importante:** Hasta ahora no se ajustara el template a una tecnologias de css en especifica, con el objetivo de que cada quien al utilizar el template pueda configurar e instalar la tecnologia que le guste
+
+#### Opciones recomendadas:
+
+- **TaildWindCSS**
+- **StyledComponents**
+- **Emotion**
+- **Bootstrap**
+- **AntDesign**

configs/eslint/-private/eslint/best-practices.cjs

@@ -0,0 +1,92 @@
+module.exports = {
+    rules: {
+        "accessor-pairs": "error",
+        "array-callback-return": "error",
+        "block-scoped-var": "error",
+        complexity: "error",
+        curly: ["error", "multi-line"],
+        "default-case": "error",
+        "default-case-last": "error",
+        "dot-location": ["error", "property"],
+        "dot-notation": "error",
+        eqeqeq: "error",
+        "guard-for-in": "error",
+        "no-caller": "error",
+        "no-div-regex": "error",
+        "no-else-return": "error",
+        "no-eq-null": "error",
+        "no-eval": "error",
+        "no-extend-native": "error",
+        "no-extra-bind": "error",
+        "no-extra-label": "error",
+        "no-floating-decimal": "error",
+        "no-implicit-coercion": "error",
+        "no-implicit-globals": "error",
+        "no-implied-eval": "error",
+        "no-iterator": "error",
+        "no-labels": "error",
+        "no-lone-blocks": "error",
+        "no-loop-func": "error",
+        "no-loss-of-precision": "error",
+        "no-multi-spaces": "error",
+        "no-multi-str": "error",
+        "no-new": "error",
+        "no-new-func": "error",
+        "no-new-wrappers": "error",
+        "no-nonoctal-decimal-escape": "error",
+        "no-octal-escape": "error",
+        "no-proto": "error",
+        "no-restricted-properties": "error",
+        "no-return-await": "error",
+        "no-script-url": "error",
+        "no-self-compare": "error",
+        "no-sequences": "error",
+        "no-throw-literal": "error",
+        "no-unmodified-loop-condition": "error",
+        "no-unused-expressions": 0,
+        "no-useless-call": "error",
+        "no-useless-concat": "error",
+        "no-useless-return": "error",
+        "no-void": "error",
+        "prefer-named-capture-group": "error",
+        "prefer-promise-reject-errors": "error",
+        radix: "error",
+        // "require-unicode-regexp": "error",
+        "vars-on-top": "error",
+        "wrap-iife": "error",
+        yoda: "error",
+        "default-param-last": "error",
+        "grouped-accessor-pairs": ["error", "getBeforeSet"],
+        "no-case-declarations": "error",
+        "no-constructor-return": "error",
+        "no-empty-pattern": "error",
+        "no-fallthrough": "error",
+        "no-global-assign": "error",
+        "no-octal": "error",
+        "no-redeclare": "error",
+        "no-self-assign": "error",
+        "no-unused-labels": "error",
+        "no-useless-catch": "error",
+        "no-useless-escape": "error",
+        "no-with": "error",
+        "prefer-regex-literals": "error",
+        "no-only-tests/no-only-tests": [
+            "error",
+            {
+                block: ['describe', 'it', 'context', 'test', 'tape', 'fixture', 'serial', 'suite'],
+            },
+        ],
+        "class-methods-use-this": "off",
+        "consistent-return": "off",
+        "max-classes-per-file": "off",
+        "no-alert": "off",
+        "no-empty-function": "off",
+        "no-invalid-this": "off",
+        "no-magic-numbers": "off",
+        "no-param-reassign": "off",
+        "no-return-assign": "off",
+        "no-warning-comments": "off",
+        "require-await": "off",
+        "prettier/prettier": "error",
+    },
+};

configs/eslint/-private/eslint/es6.cjs

@@ -0,0 +1,52 @@
+module.exports = {
+    rules: {
+        "arrow-body-style": ["error", "as-needed"],
+        "arrow-parens": "error",
+        "arrow-spacing": "error",
+        "generator-star-spacing": "error",
+        "no-confusing-arrow": ["error", { allowParens: true }],
+        "no-duplicate-imports": "error",
+        "no-useless-computed-key": "error",
+        "no-useless-constructor": "error",
+        "no-useless-rename": "error",
+        "no-var": "error",
+        "object-shorthand": "error",
+        "prefer-const": "error",
+        "prefer-destructuring": [
+            "error",
+            {
+                VariableDeclarator: {
+                    array: true,
+                    object: true,
+                },
+                AssignmentExpression: {
+                    array: false,
+                    object: true,
+                },
+            },
+            {
+                enforceForRenamedProperties: false,
+            },
+        ],
+        "prefer-numeric-literals": "error",
+        "prefer-spread": "error",
+        "prefer-template": "error",
+        "rest-spread-spacing": "error",
+        "symbol-description": "error",
+        "template-curly-spacing": "error",
+        "yield-star-spacing": "error",
+        "constructor-super": "error",
+        "no-class-assign": "error",
+        "no-const-assign": "error",
+        "no-dupe-class-members": "error",
+        "no-new-symbol": "error",
+        "no-restricted-exports": "error",
+        "no-this-before-super": "error",
+        "require-yield": "error",
+
+        "no-restricted-imports": "off",
+        "prefer-arrow-callback": "off",
+        "prefer-rest-params": "off",
+        "sort-imports": "off",
+    },
+};