commit 6f1812e17ea68249a0d69ad93a1cf633862af4d3 Author: Daniel Garcia Date: Thu Sep 9 18:04:57 2021 +0200 Initial commit diff --git a/.babelrc b/.babelrc new file mode 100644 index 0000000..2b7bafa --- /dev/null +++ b/.babelrc @@ -0,0 +1,3 @@ +{ + "presets": ["@babel/preset-env", "@babel/preset-react"] +} diff --git a/.editorconfig b/.editorconfig new file mode 100644 index 0000000..8822ba2 --- /dev/null +++ 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 diff --git a/.eslintrc.js b/.eslintrc.js new file mode 100644 index 0000000..d5fe488 --- /dev/null +++ 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, + }], + }, +} diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..400900c --- /dev/null +++ b/.gitignore @@ -0,0 +1,3 @@ +/node_modules/ +/.idea/ +/dist/ \ No newline at end of file diff --git a/.nvmrc b/.nvmrc new file mode 100644 index 0000000..28193ca --- /dev/null +++ b/.nvmrc @@ -0,0 +1 @@ +v12.13.1 diff --git a/README.md b/README.md new file mode 100644 index 0000000..86306e6 --- /dev/null +++ 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)). diff --git a/package.json b/package.json new file mode 100644 index 0000000..16b058c --- /dev/null +++ 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" + } +} diff --git a/src/UI.js b/src/UI.js new file mode 100644 index 0000000..d457f4b --- /dev/null +++ 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) + } +} diff --git a/src/components/adCallSelect.js b/src/components/adCallSelect.js new file mode 100644 index 0000000..026fd7c --- /dev/null +++ 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, + }, + } +} diff --git a/src/components/form.js b/src/components/form.js new file mode 100644 index 0000000..d16120e --- /dev/null +++ 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, + ], + }, + } +} diff --git a/src/components/librariesDialog.js b/src/components/librariesDialog.js new file mode 100644 index 0000000..be5bf8f --- /dev/null +++ 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: [], + }, + } +} diff --git a/src/components/librariesOptions.js b/src/components/librariesOptions.js new file mode 100644 index 0000000..a5973c4 --- /dev/null +++ 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, + }, + } +} diff --git a/src/components/messageDialog.js b/src/components/messageDialog.js new file mode 100644 index 0000000..d1e8d1a --- /dev/null +++ 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: [], + }, + } +} + diff --git a/src/components/nameText.js b/src/components/nameText.js new file mode 100644 index 0000000..bcafde2 --- /dev/null +++ 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, + }, + } +} diff --git a/src/components/submitFormButton.js b/src/components/submitFormButton.js new file mode 100644 index 0000000..00e96fb --- /dev/null +++ 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, + }, + } +} diff --git a/src/index.html b/src/index.html new file mode 100644 index 0000000..22b0d9f --- /dev/null +++ b/src/index.html @@ -0,0 +1,18 @@ + + + + + + + + + + + + Page title + + + +
+ + diff --git a/src/index.js b/src/index.js new file mode 100644 index 0000000..532d885 --- /dev/null +++ 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() diff --git a/src/styles.css b/src/styles.css new file mode 100644 index 0000000..d150807 --- /dev/null +++ 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%;*/ +/*}*/ diff --git a/webpack.common.js b/webpack.common.js new file mode 100644 index 0000000..0b97388 --- /dev/null +++ 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', + ], + }, + ], + }, + +}; \ No newline at end of file diff --git a/webpack.dev.js b/webpack.dev.js new file mode 100644 index 0000000..e7c8d29 --- /dev/null +++ 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, + }, +}); diff --git a/webpack.prod.js b/webpack.prod.js new file mode 100644 index 0000000..3698d41 --- /dev/null +++ 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', +});