Initial commit

2021-09-09 18:04:57 +02:00 · 2021-09-09 18:04:57 +02:00 · 6f1812e17e
commit 6f1812e17e
21 changed files with 650 additions and 0 deletions
--- a/.babelrc
+++ b/.babelrc
@ -0,0 +1,3 @@
+{
+  "presets": ["@babel/preset-env", "@babel/preset-react"]
+}
--- a/.editorconfig
+++ b/.editorconfig
@ -0,0 +1,10 @@
+# top-most EditorConfig file
+root = true
+
+# Unix-style newlines with a newline ending every file
+[*]
+end_of_line = lf
+insert_final_newline = true
+charset = utf-8
+indent_style = space
+indent_size = 2
--- a/.eslintrc.js
+++ b/.eslintrc.js
@ -0,0 +1,52 @@
+module.exports = {
+  'plugins': ['jest'],
+  'env': {
+    'commonjs': true,
+    'es6': true,
+    'node': true,
+    'jest/globals': true,
+  },
+  'extends': 'eslint:recommended',
+  'globals': {
+    'Atomics': 'readonly',
+    'SharedArrayBuffer': 'readonly',
+  },
+  'parserOptions': {
+    'ecmaVersion': 2018,
+    'sourceType': 'module',
+  },
+  'rules': {
+    'indent': [
+      'error',
+      2,
+    ],
+    'linebreak-style': [
+      'error',
+      'unix',
+    ],
+    'quotes': [
+      'error',
+      'single',
+      { 'avoidEscape': true },
+    ],
+    'semi': [
+      'error',
+      'never',
+    ],
+    'comma-dangle': [
+      'error',
+      'always-multiline',
+    ],
+    'arrow-parens': [
+      'error',
+      'as-needed',
+    ],
+    'no-var': [
+      'error',
+    ],
+    'prefer-const': ['error', {
+      'destructuring': 'all',
+      'ignoreReadBeforeAssign': true,
+    }],
+  },
+}
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,3 @@
+/node_modules/
+/.idea/
+/dist/
--- a/.nvmrc
+++ b/.nvmrc
@ -0,0 +1 @@
+v12.13.1
--- a/README.md
+++ b/README.md
@ -0,0 +1,143 @@
+# Prepara el entorno de desarrollo
+
+0. Deben tenerse instalados todas las aplicaciones necesarias:
+  - Editor de código o IDE
+    - Visual Code Studio
+    - Sublime text
+    - Notepad++
+    - Atom
+    - PHPStorm
+  - [Cliente git](https://git-scm.com/downloads) (si no se emplea un IDE que lo traiga)
+  - [Nodejs y npm](https://nodejs.org/en/download/)
+  - [Shell] (si no se emplea un IDE que lo traiga)
+    - [cygwin](https://cygwin.com/install.html)
+    - powershell: viene con windows
+    - git bash: se puede seleccionar la opción de instalarlo junto con git
+  - cliente SSH
+    - [putty](https://www.microsoft.com/en-us/p/putty-unofficial/9n8pdn6ks0f8?activetab=pivot:overviewtab)
+    - [superputty](https://www.puttygen.com/superputty)
+    - [mobaxterm](https://mobaxterm.mobatek.net/)
+  - cliente SFTP
+    - [filezilla](https://filezilla-project.org/download.php)
+    - [superputty](https://www.puttygen.com/superputty)
+    - [mobaxterm](https://mobaxterm.mobatek.net/)
+
+1. Descargar del repositorio remoto el proyecto **starter**, si no se tiene en local. [(documentación de referencia)](https://git-scm.com/book/en/v2/Git-Basics-Getting-a-Git-Repository)
+  ```shell
+  $ git clone git@bitbucket.org:SmartclipDev/starter.git
+  ```
+2. Crear la carpeta de nuestro nuevo proyecto
+3. Copiar los archivos de configuración a la nueva carpeta y la carpeta `src`.
+4. Modificar los archivos de configuración según las necesidades del proyecto.
+  - webpack.common.js [(documentación de referencia)](https://webpack.js.org/guides/production/#setup)
+```javascript
+entry: './src/index.js',  // change if needed
+  output: {
+    filename: 'index.js',  // change if needed
+    path: path.resolve(__dirname, 'dist'),    // change if needed
+  },
+  plugins: [
+    new HtmlWebpackPlugin({
+      template: './src/index.html',  // change if needed
+      filename: path.resolve(__dirname, 'dist', 'index.html'),  // change if needed
+    }),
+    
+    // ...
+  ],
+```
+  - webpack.dev.js
+```javascript
+devServer: {
+  contentBase: path.join(__dirname, 'dist'),  // change if needed
+  port: 9000,  // change if needed
+  historyApiFallback: true,
+},
+```
+
+  - package.json [(documentación de referencia)](https://docs.npmjs.com/cli/v6/configuring-npm/package-json)
+```json
+{
+    "name": "test-app", // project name
+    "version": "0.1.0", // initial version
+    "description": "",  // project description
+    "main": "src/index.js", // main project file. Where the party starts.
+    "scripts": {
+        "start": "webpack-dev-server --open --config webpack.dev.js",
+        "dist": "webpack --config webpack.prod.js",
+        "test": "jest",
+        "test:watch": "jest --watch"
+    },
+    "devDependencies": {
+        "@babel/core": "^7.11.6",
+        "@babel/preset-env": "^7.11.5",
+        "@babel/preset-react": "^7.10.4",
+        "babel-loader": "^8.0.6",
+        "css-loader": "^3.6.0",
+        "eslint": "^7.8.1",
+        "html-webpack-plugin": "^3.2.0",
+        "husky": "^4.3.0",
+        "jest": "^24.9.0",
+        "jsdoc": "^3.6.5",
+        "mini-css-extract-plugin": "^0.8.2",
+        "nodemon": "^2.0.4",
+        "redoc-cli": "^0.9.12",
+        "style-loader": "^1.2.1",
+        "webpack": "^4.44.1",
+        "webpack-cli": "^3.3.12",
+        "webpack-dev-server": "^3.11.0",
+        "webpack-merge": "^4.2.2"
+    }
+}
+```
+5. Añadir las dependencias de desarrollo o de producción necesarias.
+  - por terminal [(documentación de referencia)](https://nodejs.dev/learn/npm-dependencies-and-devdependencies)
+    ```shell
+    $ npm install dev dependency-name
+    $ npm i -D dependency-name
+    ```
+  - añadiendo en el archivo package.json las nuevas dependencias [(documentación de referencia)](https://docs.npmjs.com/specifying-dependencies-and-devdependencies-in-a-package-json-file#manually-editing-the-packagejson-file)
+6. Añadir las bibiotecas de **Adtech Smartclip** necesarias como dependencias.
+  - [MCF Objects](https://bitbucket.org/SmartclipDev/mcf-objects/src/master/): Gestión de objetos añadiendo tipado fuerte
+  - [MCF Components](https://bitbucket.org/SmartclipDev/mcf-components/src/master/): Capa de abstracción sobre React y Material-UI
+  - [Smart Ads](https://bitbucket.org/SmartclipDev/smart-ads/src/master/): Definición de los objetos necesarios comunes a todas las applicaciones
+  - [Smart Client Socket](https://bitbucket.org/SmartclipDev/smart-client-socket/src/master/): Set de funciones para trabajar con servidores
+  - [Smart Utils](https://bitbucket.org/SmartclipDev/smart-utils/src/master/): Set de funciones de proposito general
+
+  Una vez añadidas quedarían de la siguiente forma:
+```json
+"dependencies": {
+  "mcf-components": "git+ssh://git@bitbucket.org/SmartclipDev/mcf-components.git#v0.2.0",
+  "mcf-objects": "git+ssh://git@bitbucket.org/SmartclipDev/mcf-objects.git#v0.2.0",
+  "smart-client-socket": "git+ssh://git@bitbucket.org/SmartclipDev/smart-client-socket.git#v0.2.0",
+  "smart-ads": "git+ssh://git@bitbucket.org/SmartclipDev/smart-ads.git#v0.2.0",
+  "smart-utils": "git+ssh://git@bitbucket.org/SmartclipDev/smart-utils.git#v0.1.3"
+}
+```
+Es necesario revisar en los repositorios las últimas versiones de las bibliotecas para incluir la versión adecuada en el proyecto. Esto se hace mediante el número de la versión detrás del símbolo `#`.
+
+7. Incluir las dependencias adicionales que sean necesarias. 
+8. Modificar la estructura de archivos y carpetas según lo que se haya cambiado en los archivos de configuración. Si no se han relizado modificaciones, la estructura será la siguiente:
+```
+app-name
+    +-- src
+        +-- index.js
+        +-- index.html
+```
+9. Descargar e instalar todas las dependencias del proyecto ([documentación de referencia](https://docs.npmjs.com/cli/v6/commands/npm-install))
+```shell
+$ npm install
+```
+10. Actualizar las dependencias a la última versión ([documentación de referencia](https://docs.npmjs.com/cli/v6/commands/npm-update)).
+```shell
+$ npm update
+```
+11. Iniciar el entorno de desarrollo para verificar que el funcionamiento es correcto.
+```shell
+$ npm run start
+```
+Debería abrirse una nueva pestaña en el navegador haciendo una petición al servidor local localhost en el puerto que se haya indicado en la configuración (por defecto 9000) y en la cual se puede leer un mensaje de bienvenida.
+
+12. Crear el repositorio remoto en el [workspace de bitbucket](https://bitbucket.org/SmartclipDev/). Si se trata de una web-app, dentro del [proyecto web-apps](https://bitbucket.org/SmartclipDev/workspace/projects/WA)
+13. Iniciar el repositorio local con git y añadir la referencia remota al repositorio local ([documentación de referencia](https://git-scm.com/book/en/v2/Git-Basics-Working-with-Remotes)).
+14. Verificar que el archivo .gitignore contiene todos los path necesarios ([documentación de referencia](https://git-scm.com/docs/gitignore))
+15. Realizar el primer commit ([documentación de referencia](https://git-scm.com/book/en/v2/Git-Basics-Recording-Changes-to-the-Repository)).
--- a/package.json
+++ b/package.json
@ -0,0 +1,39 @@
+{
+    "name": "app-name",
+    "version": "0.1.0",
+    "description": "",
+    "main": "src/index.js",
+    "scripts": {
+        "start": "webpack-dev-server --open --config webpack.dev.js",
+        "dist": "webpack --config webpack.prod.js",
+        "test": "jest",
+        "test:watch": "jest --watch"
+    },
+    "devDependencies": {
+        "@babel/core": "^7.11.6",
+        "@babel/preset-env": "^7.11.5",
+        "@babel/preset-react": "^7.10.4",
+        "babel-loader": "^8.0.6",
+        "css-loader": "^3.6.0",
+        "eslint": "^7.8.1",
+        "html-webpack-plugin": "^3.2.0",
+        "husky": "^4.3.0",
+        "jest": "^24.9.0",
+        "jsdoc": "^3.6.5",
+        "mini-css-extract-plugin": "^0.8.2",
+        "nodemon": "^2.0.4",
+        "redoc-cli": "^0.9.12",
+        "style-loader": "^1.2.1",
+        "webpack": "^4.44.1",
+        "webpack-cli": "^3.3.12",
+        "webpack-dev-server": "^3.11.0",
+        "webpack-merge": "^4.2.2"
+    },
+    "dependencies": {
+        "mcf-components": "git+ssh://git@bitbucket.org/SmartclipDev/mcf-components.git#v0.2.0",
+        "mcf-objects": "git+ssh://git@bitbucket.org/SmartclipDev/mcf-objects.git#v0.2.0",
+        "smart-ads": "git+ssh://git@bitbucket.org/SmartclipDev/smart-ads.git#v0.2.0",
+        "smart-client-socket": "git+ssh://git@bitbucket.org/SmartclipDev/smart-client-socket.git#v0.2.0",
+        "smart-utils": "git+ssh://git@bitbucket.org/SmartclipDev/smart-utils.git#v0.1.4"
+    }
+}
--- a/src/UI.js
+++ b/src/UI.js
@ -0,0 +1,61 @@
+import { render, remove } from 'mcf-components'
+import { DefinedObject } from 'mcf-objects/src'
+
+import form from './components/form'
+
+
+
+const uiDefinition = {
+  htmlReference: { TYPE: 'string', required: true },
+  errorList:     { TYPE: 'array' },
+  message:       { TYPE: 'array'},
+
+  name:        { TYPE: 'string' },
+  adCall:      { TYPE: 'string' },
+  libraryList: { TYPE: 'array' },
+}
+const uiInitialValues = {
+  errorList: [],
+  message: [],
+
+  name: '',
+  adCall: '',
+  libraryList: [],
+}
+
+export default class UI extends DefinedObject {
+  constructor(params, onSubmit) {
+    super({
+      fields: uiDefinition,
+      values: params,
+    })
+
+    this.onSubmit = onSubmit
+    this.setValue(uiInitialValues)
+  }
+
+  showMessage(messageTitle, message) {
+    this.setValue({message: [messageTitle, message]})
+    this.renderPage()
+    this.setValue({message: []})
+  }
+
+  checkParams() {
+    if (!this.getValue().name) this.updateArrayField('errorList', 'Name', true)
+    if (!this.getValue().adCall) this.updateArrayField('errorList', 'Ad-call', true)
+    if (this.getValue().libraryList.length === 0) this.updateArrayField('errorList', 'Libraries', true)
+  }
+
+  createErrorMessage() {
+    let errorMessage = 'Please, review these inputs:'
+    for (const error of this.getValue().errorList){
+      errorMessage += '  · ' + error
+    }
+    return errorMessage
+  }
+
+  renderPage() {
+    remove(this.getValue().htmlReference)
+    render(form(this), this.getValue().htmlReference)
+  }
+}
--- a/src/components/adCallSelect.js
+++ b/src/components/adCallSelect.js
@ -0,0 +1,28 @@
+export default function selectScheme(ui) {
+  const onSelect = function(input) {
+    ui.setValue({adCall: input})
+  }
+
+  return {
+    type: 'select',
+    params: {
+      id: 'adCallSelect',
+      label: '',
+      helperText: 'Your preferred ad-call',
+      value: ui.getValue().adCall,
+      disabled: false,
+      error: false,
+      required: false,
+      shrink: false,
+      displayEmpty: false,
+      autoWidth: false,
+      readOnly: false,
+      options: [
+        {id: 'url', value: 'url', label: 'URL'},
+        {id: 'script', value: 'script', label: 'Script'},
+        {id: 'amp', value: 'amp', label: 'AMP'},
+      ],
+      onSelectListener: onSelect,
+    },
+  }
+}
--- a/src/components/form.js
+++ b/src/components/form.js
@ -0,0 +1,40 @@
+import adCallSelect from './adCallSelect'
+import librariesDialog from './librariesDialog'
+import messageDialog from './messageDialog'
+import nameText from './nameText'
+import submitFormButton from './submitFormButton'
+
+export default function form(ui) {
+  const messageInsertion = ui.getValue().message.length===0 ? {type: 'divider', params: {id: 'emptyMessage'}} : messageDialog(ui, ui.getValue().message[0], ui.getValue().message[1])
+  const errorsInsertion = ui.getValue().errorList.length===0 ? {type: 'divider', params: {id: 'emptyError'}} : messageDialog(ui, 'Check the inputs', ui.createErrorMessage())
+
+  return {
+    type: 'card',
+    params: {
+      id: 'formContainer',
+      mainText: 'Awesome form',
+      secondaryText: 'Give some random info',
+      contents: [
+        {
+          type: 'card',
+          params: {
+            id: 'inputsContainer',
+            mainText: '',
+            secondaryText: '',
+            contents: [
+              nameText(ui),
+              {type: 'divider', params: {id: 'librariesDivider'}},
+              librariesDialog(ui),
+              {type: 'divider', params: {id: 'adCallDivider'}},
+              adCallSelect(ui),
+            ],
+          },
+        },
+        {type: 'divider', params: {id: 'creationButtonDivider'}},
+        submitFormButton(ui),
+        messageInsertion,
+        errorsInsertion,
+      ],
+    },
+  }
+}
--- a/src/components/librariesDialog.js
+++ b/src/components/librariesDialog.js
@ -0,0 +1,27 @@
+import librariesOptions from './librariesOptions'
+
+
+
+export default function librariesDialog(ui) {
+  return {
+    type: 'dialog',
+    params: {
+      id: 'librariesDialog',
+      titleText: 'Libraries',
+      contentText: '',
+      open: false,
+      openButtonVariant: 'contained',
+      openButtonColor: 'primary',
+      openButtonText: 'Libraries',
+      closeButtonVariant: 'contained',
+      closeButtonColor: 'primary',
+      closeButtonText: 'Close',
+      openListener: function () {},
+      closeListener: function () {ui.renderPage()},
+      contents: [
+        librariesOptions(ui),
+      ],
+      actionContents: [],
+    },
+  }
+}
--- a/src/components/librariesOptions.js
+++ b/src/components/librariesOptions.js
@ -0,0 +1,31 @@
+export default function librariesOptions (ui) {
+  const onToggle = function(id, value) {
+    ui.updateArrayField( 'libraryList', id, value)
+  }
+
+  function createCheckboxes(){
+    const LIBRARIES = {
+      smartAds: {label:'smart-ads'},
+      mcfComponents: {label:'mcf-components'},
+      mcfObjects: {label:'mcf-objects'},
+    }
+    const checkboxes = []
+    for (const library in LIBRARIES){
+      const value = !!ui.getValue().libraryList.find(element => element === library)
+      checkboxes.push({id: library, checked: value, label: LIBRARIES[library].label})
+    }
+    return checkboxes
+  }
+
+  return {
+    type: 'checkboxesGroup',
+    params: {
+      id: 'libraryOptions',
+      label: '',
+      helperText: 'Select which libraries are awesome',
+      isRow: false,
+      checkboxes: createCheckboxes(),
+      onChangeListener: onToggle,
+    },
+  }
+}
--- a/src/components/messageDialog.js
+++ b/src/components/messageDialog.js
@ -0,0 +1,24 @@
+export default function messageDialog (ui, messageTitle, message) {
+  return {
+    type: 'dialog',
+    params: {
+      id: 'errors',
+      titleText: messageTitle,
+      contentText: message,
+      openButtonVariant: 'text',
+      openButtonColor: 'primary',
+      openButtonText: '',
+      closeButtonVariant: 'contained',
+      closeButtonColor: 'primary',
+      closeButtonText: 'Close',
+      open: true,
+      openListener: function () {},
+      closeListener: function () {
+        ui.renderPage()
+      },
+      contents: [],
+      actionContents: [],
+    },
+  }
+}
+
--- a/src/components/nameText.js
+++ b/src/components/nameText.js
@ -0,0 +1,36 @@
+import {isOnlyNumbersAndLetters} from 'smart-utils/src'
+
+
+
+export default function nameText(ui) {
+  const onChange = function (input, setError) {
+    if (isOnlyNumbersAndLetters(input)) {
+      ui.setValue({name: input.toLowerCase()})
+      setError(false)
+    } else {
+      ui.setValue({name: ''})
+      setError(true)
+    }
+    return input
+  }
+
+  return {
+    type: 'text',
+    params: {
+      id: 'nameText',
+      label: 'Name',
+      helperText: 'Give me your name',
+      placeholder: 'Your name...',
+      value: ui.getValue().name,
+      type: 'text',
+      margin: 'normal',
+      variant: 'standard',
+      error: false,
+      required: false,
+      disabled: false,
+      shrink: true,
+      fullWidth: false,
+      onChangeListener: onChange,
+    },
+  }
+}
--- a/src/components/submitFormButton.js
+++ b/src/components/submitFormButton.js
@ -0,0 +1,20 @@
+export default function submitFormButton(ui) {
+  const onClick = function () {
+    ui.checkParams()
+    ui.getValue().errorList.length > 0 ? ui.renderPage() : ui.onSubmit(ui.getValue())
+    ui.setValue({errorList: []})
+  }
+  
+  return {
+    type: 'button',
+    params: {
+      id: 'submitFormButton',
+      text: 'Go!',
+      variant: 'contained',
+      color: 'primary',
+      size: 'medium',
+      disabled: false,
+      onClickListener: onClick,
+    },
+  }
+}
--- a/src/index.html
+++ b/src/index.html
@ -0,0 +1,18 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="robots" content="noindex, nofollow">
+  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
+  <meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no">
+
+  <!-- Load fonts -->
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" />
+
+  <title>Page title</title>
+  <link rel="icon" href="https://tools.smartclip-services.com/favicon.png">
+</head>
+<body>
+  <div id="app"></div>
+</body>
+</html>
--- a/src/index.js
+++ b/src/index.js
@ -0,0 +1,20 @@
+import './styles.css'
+
+import UI from './UI'
+
+
+
+const htmlReference = 'app'
+
+const ui = new UI({htmlReference: htmlReference}, onSubmit)
+
+function onSubmit(uiOutput) {
+  console.log(uiOutput)
+}
+
+function initPage() {
+  ui.renderPage()
+}
+
+
+initPage()
--- a/src/styles.css
+++ b/src/styles.css
@ -0,0 +1,32 @@
+html {
+  background-color: #dcb4df;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+#myVideo {
+  position: fixed;
+  right: 0;
+  bottom: 0;
+  min-width: 100%;
+  min-height: 100%;
+  transform: translateX(-50%) translateY(-50%);
+  transition: 1s opacity;
+  height: auto;
+  top: 50%;
+  left: 50%;
+  z-index: -100;
+  width: auto;
+}
+
+/*#rgba-gradient {*/
+/*  background: -moz-linear-gradient(45deg, rgba(213, 15, 61, 0.6), rgba(13, 17, 198, 0.69) 100%);*/
+/*  background: -webkit-linear-gradient(45deg, rgba(213, 15, 61, 0.6), rgba(13, 17, 198, 0.69) 100%);*/
+/*  background: linear-gradient(to 45deg, rgba(213, 15, 61, 0.6), rgba(13, 17, 198, 0.69) 100%);*/
+/*  position: fixed;*/
+/*  right: 0;*/
+/*  bottom: 0;*/
+/*  min-width: 100%;*/
+/*  min-height: 100%;*/
+/*}*/
--- a/webpack.common.js
+++ b/webpack.common.js
@ -0,0 +1,42 @@
+const path = require('path');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+
+module.exports = {
+    entry: './src/index.js',
+    output: {
+        filename: 'index.js',
+        path: path.resolve(__dirname, 'dist'),
+        // library: 'smartClientSocket',
+        // libraryTarget: 'umd'
+    },
+    plugins: [
+        new HtmlWebpackPlugin({
+            template: './src/index.html',
+            filename: path.resolve(__dirname, 'dist', 'index.html'),
+        }),
+        new MiniCssExtractPlugin({
+            filename: '[name].css',
+            chunkFilename: '[id].css',
+        }),
+    ],
+    module: {
+        rules: [{
+                test: /\.(js|jsx)$/,
+                exclude: /node_modules/,
+                use: {
+                    loader: 'babel-loader',
+                },
+            },
+            {
+                test: /\.css$/,
+                use: [{
+                        loader: MiniCssExtractPlugin.loader,
+                    },
+                    'css-loader',
+                ],
+            },
+        ],
+    },
+
+};
--- a/webpack.dev.js
+++ b/webpack.dev.js
@ -0,0 +1,13 @@
+const path = require('path');
+const merge = require('webpack-merge');
+const common = require('./webpack.common.js');
+
+module.exports = merge(common, {
+  mode: 'development',
+  devtool: 'inline-source-map',
+  devServer: {
+    contentBase: path.join(__dirname, 'dist'),
+    port: 9000,
+    historyApiFallback: true,
+  },
+});
--- a/webpack.prod.js
+++ b/webpack.prod.js
@ -0,0 +1,7 @@
+const merge = require('webpack-merge');
+const common = require('./webpack.common.js');
+
+module.exports = merge(common, {
+  mode: 'production',
+  devtool: 'source-map',
+});