npm package: @marxa/devkit
Description: Librería de servicios auxiliares para proyectos de **Angular**.
Author: Jorge Guzman
Latest version: 12.2209.3

# @marxa/devkit
Librería de servicios auxiliares para proyectos de **Angular**.

| ❗  IMPORTANTE ❗ |
|-----------------------------------------|
| Esta librería requiere **@angular/material** y opcionalmente **@angular/fire** |
| Esta librería no funciona en proyectos de versiones anteriores a **Angular 11**, puedes usar la versión para [Angular 9](https://www.npmjs.com/package/@marxa/devkit-v9) si lo necesitas |

This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 11.0.9.

| ❗  IMPORTANT ❗ |
|----------------------------------------|
| This documentation is writed in mexican spanish for latin developers for motivate to they always read software documentation. But you always can count on the cunning of google translate XD.|

| ❗  IMPORTANT ❗ |
|----------------------------------------|
| MxAlert cambió a la versión oficial 2 que maneja el soporte directo de sweetalert | 


## Instalación
Para que algunos componentes funciones, primero deberás instalar también **@angular/material**
```
ng add @angular/material
```

Para opciónes del módulo de alertas, si deseas registrar errores en producción en **Firestore** deberás instalar **@angular/fire**
Para instrucciones detalladas ve al módulo de [alertas](./src/lib/alert/README.md) 
```
ng add @angular/fire
```

### Instalación simple
Para instalación manual de la librería, puedes uar el siguiente comando

#### **Como dependencia Node**
1. Inicia sesión en https://marxa.jfrog.io/. En el menú de navegación ve a  **Set me up**. y sigue las instrucciones para ingresar tus contraseñas.
2. Si usas VSCode, en la terminal corre el comando `code ~/.npmrc`, si no, navega a  `~/.npmrc` en tu explorador de archivos y ábrelo.
3. Pega el código resultante de las instrucciones, asegurándote que la URL del artifact tenga el prefijo `@marxa:` en cada uno de los registros. Ejemplo:
```bash
_auth = <PASSWORD> (converted to base 64)
email = youremail@email.com
always-auth = true
@marxa:registry = https://marxa.jfrog.io/artifactory/api/npm/mx-library-npm/
```
3. Importa la dependencia
```bash
npm i -s @marxa/devkit
```

#### **Como submódulo**
1. Asegúrate de que tienes permisos para copiar el repositorio
2. Abre la terminal en la raíz de tu proyecto
3. Corre los comandos 
    ```bash
    git submodule init
    git submodule add -b develop https://github.com/Marxa-Digital/mx-devkit libs/marxa/devkit
    ```
4. Configura el archivo `angular.json` incluyendo este bloque de códgio dentro de `projects`
    ```json
    {
      "projects":{
        "@marxa/devkit": {
          "projectType": "library",
          "root": "projects/marxa/devkit",
          "sourceRoot": "projects/marxa/devkit/src",
          "prefix": "mx",
          "architect": {
            "build": {
              "builder": "@angular-devkit/build-angular:ng-packagr",
              "options": {
                "project": "projects/marxa/devkit/ng-package.json"
              },
              "configurations": {
                "production": {
                  "tsConfig": "projects/marxa/devkit/tsconfig.lib.prod.json"
                },
                "development": {
                  "tsConfig": "projects/marxa/devkit/tsconfig.lib.json"
                }
              },
              "defaultConfiguration": "production"
            },
            "test": {
              "builder": "@angular-devkit/build-angular:karma",
              "options": {
                "main": "projects/marxa/devkit/src/test.ts",
                "tsConfig": "projects/marxa/devkit/tsconfig.spec.json",
                "karmaConfig": "projects/marxa/devkit/karma.conf.js"
              }
            }
          }
        }
      }
    }
    ```
5. Configura el archivo `tsconfig.json` incluyendo este bloque de códgio dentro de `paths`
    ```json
    {
      "compilerOptions": {
        ...
        "paths":{
          "@marxa/devkit": [
            "dist/marxa/devkit/marxa-devkit",
            "dist/marxa/devkit"
          ],
        }
      }
    }
    ```
6. Corre el siguiente comando
    ```bash
    cd libs/marxa/devkit && start cmd /k ng build @marxa/devkit --watch
    ```
7. Instala la lib de manera manual con el siguiente comando
    ```bash
    npm i "./dist/marxa/devkit"
    ```
------------------

### Configuración de estilos
En el archivo styles.scss importa los estilos de la biblioteca
```scss
@import '~@marxa/devkit/src/lib/styles/stylesheets/all.scss';
```


### Instalación con compatibilidad
Puedes instalar también mediante `ng add` lo que también modificará y agregará algunos archivos que pueden ser de mucha utilidad.
```
ng add @marxa/devkit
```

| ❗  IMPORTANTE ❗ |
|-----------------------------------------|
| Esta opción sobreescribirá los archivos ya existentes. |

#### Arbol de archivos que se crearán o sobreescribirán
````
src 
|  app
|  | shared
|  |  | firebase.module.ts
|  |  |  marxa.module.ts
|  |  |  material.module.ts
|  |  app.component.ts
|  |  app.module.ts
|  environments
|  |  environment.ts
|  |  environment.prod.ts
|  styles.scss
````


Este comando modificará el archivo `app.component.ts` con las siguientes configuraciones por defecto:
```ts
import { Component } from '@angular/core';
import { MxAlert, MxColor, MxText } from "@marxa/devkit";

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {

  constructor(
    private _color: MxColor,
    private _text: MxText,
    private _alert: MxAlert
  ) {
    // Activa el registro de errores en una colecciónde firestore si es `true`. Recuerda que debes configurar un proyecto de firebase primero.
    this._alert.storeError = false
    // Carga la librería de íconos Font Awesome 5 Free en el head del html
    this._text.loadFontAwesome()
    // Configura la paleta de colores para la librería MxColor
    this._color.ColorPalette = {
      main: '#005daa',
      accent: '#09b8a9',
      dark1: '#00307f',
      dark2: '#001d4d',
      dark3: '#000a1a',
      ligth1: '#80aed5',
      ligth2: '#b3cee6',
      ligth3: '#e0ecf5',
    }
  }
}

```

## Módulos

Los módulos y sus documataciones se enlistan acontinuación

| Módulo | Descripción |
|--------|-------------|
| [Alert](https://marxa-digital.github.io/mx-devkit/injectables/MxAlert.html) | Cuádros de diálogo de alertas para proyectos de stack **Angular/Material + Firebase** |
| [Cache](https://marxa-digital.github.io/mx-devkit/injectables/MxCache.html) | Sistema de guardado de data en Local o Session Storage con estretegias de **Promesas, Observables y suscripciones** |
| [Color](https://marxa-digital.github.io/mx-devkit/injectables/MxColor.html) | Un auxilar de estilos y colores de elementos del DOM de tu aplicación. |
| [DateTime](https://marxa-digital.github.io/mx-devkit/injectables/MxDate-t.html.md) | Servicio en desarrollo, próximamente más completo. Por ahora puedes disfrutar de algunos métodos o componentes de este módulo. |
| [Loading](https://marxa-digital.github.io/mx-devkit/injectables/MxLoading.html) | Servicio que permite hacer magia en el loading de la aplicación o para optimizar las promesas |
| [Responsive](https://marxa-digital.github.io/mx-devkit/injectables/MxResponsive.html) | Un servicio auxiliar de ts para cuestiones responsivas. Sí, existen las *media queries* pero a veces se necesitan acciones desde TypeScript. |
| [SEO](https://marxa-digital.github.io/mx-devkit/injectables/MxSeo.html) | Un auxilar para configuración de SEO de manera reactiva. La estrategía de renderizado desde el servidor no es responsabilidad de esta librería. |
| [Text](https://marxa-digital.github.io/mx-devkit/injectables/MxText.html) | Un auxilar de métodos typescript para transformaciones de texto |

## Styles
Esta librería también cuenta con la inclusión de la librería de estilo de [materialize](http://archives.materializecss.com/0.100.2/about.html) y algunas cosas más.

De manera que puedes hacer uso de las funciones de esta librería y proximamente se publicará la documentación ofi cial aquí en esta misma.