Repository created

.babelrc

@@ -0,0 +1,6 @@
+{
+  "presets": [
+    "@babel/preset-env",
+    "@babel/preset-react"
+  ]
+}

.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

.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,
+    }],
+  },
+};

.gitignore

@@ -0,0 +1,3 @@
+.idea
+
+node_modules/

.nvmrc

@@ -0,0 +1 @@
+v12.13.1

README.md

@@ -0,0 +1,21 @@
+# Kaleider tester
+
+Se trata de una pequeña aplicación que consta de un formulario con diferentes inputs. Una vez remitido, devuelve el resultado en base a los datos de entrada.
+
+Es sobre todo una pequeña muestra de cómo emplear las bibliotecas mcf-components y mcf-object.
+
+
+## Instalación
+
+Una vez descomprimido el archivo que contiene los tres proyectos se deben instalar las dependencias en cada una de las bibliotecas mcf-components y mcf-object ya que van a funcionar como dependencias locales.
+Esto se realiza con el comando. 
+```shell
+npm install
+```
+
+Después de esto se realiza la misma acción en este proyecto. 
+
+Finalmente se levanta la aplicación en este proyecto mediante el comando
+```shell
+npm run start
+```

package.json

@@ -0,0 +1,30 @@
+{
+  "name": "Kaleider-tester",
+  "version": "0.1.0",
+  "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.14.6",
+    "@babel/preset-env": "^7.14.7",
+    "@babel/preset-react": "^7.14.5",
+    "babel-loader": "^8.2.2",
+    "css-loader": "^3.6.0",
+    "eslint": "^7.30.0",
+    "html-webpack-plugin": "^3.2.0",
+    "mini-css-extract-plugin": "^0.8.2",
+    "style-loader": "^1.3.0",
+    "webpack": "^4.46.0",
+    "webpack-cli": "^3.3.12",
+    "webpack-dev-server": "^3.11.2",
+    "webpack-merge": "^4.2.2"
+  },
+  "dependencies": {
+    "mcf-components": "file:../mcf-components/",
+    "mcf-objects": "file:../mcf-objects/"
+  }
+}

src/UI.js

@@ -0,0 +1,53 @@
+import { render, remove } from 'mcf-components'
+
+import { DefinedObject } from 'mcf-objects/src'
+
+import form from './components/form'
+import errorsDialog from './components/errorsDialog'
+
+
+const uiDefinition = {
+  htmlReference: { TYPE: 'string', required: true },
+
+  name: { TYPE: 'string' },
+  book: { TYPE: 'enum', availableValues: ['lor', 'sfi', 'tgr'] },
+
+  imageList:    { TYPE: 'array' },
+  activityList: { TYPE: 'array', maxLength: 3 },
+}
+const uiInitialValues = {
+  name: '',
+  imageList: [],
+  activityList: [],
+}
+
+export default class UI extends DefinedObject {
+  constructor(params, onSubmit) {
+    super({
+      fields: uiDefinition,
+      values: params,
+    })
+
+    this.onSubmit = onSubmit
+    this.setValue(uiInitialValues)
+  }
+
+  checkParams() {
+    const errors = []
+    if (!this.getValue().name) errors.push('Name')
+    if (!this.getValue().book) errors.push('Book')
+    if (this.getValue().imageList.length === 0) errors.push('Image')
+    if (this.getValue().activityList.length === 0) errors.push('Activity')
+    return errors
+  }
+
+  manageErrors(errors) {
+    remove(this.getValue().htmlReference)
+    render(errorsDialog(this, errors), this.getValue().htmlReference)
+  }
+
+  renderPage() {
+    remove(this.getValue().htmlReference)
+    render(form(this), this.getValue().htmlReference)
+  }
+}

src/components/activitiesDialog.js

@@ -0,0 +1,26 @@
+import activityOptions from './activityOptions'
+
+export default function activityDialog (ui) {
+  return {
+    type: 'dialog',
+    params: {
+      id: 'activities',
+      titleText: 'Activities',
+      contentText: 'Select one activity',
+      openButtonVariant: 'contained',
+      openButtonColor: 'primary',
+      openButtonText: 'Activities',
+      closeButtonVariant: 'contained',
+      closeButtonColor: 'primary',
+      closeButtonText: 'Close',
+      open: false,
+      openListener: function () {},
+      closeListener: function () {},
+      contents: [
+        activityOptions(ui),
+      ],
+      actionContents: [],
+    },
+  }
+}
+

src/components/activityOptions.js

@@ -0,0 +1,31 @@
+export default function activityOptions (ui) {
+  return {
+    type: 'checkboxesGroup',
+    params: {
+      id: 'activitiesOptions',
+      label: 'Funny activities',
+      helperText: 'Which one is for you?',
+      isRow: false,
+      checkboxes: [
+        {
+          id: 'nothing',
+          checked: false,
+          label: 'Do nothing',
+        },
+        {
+          id: 'friends',
+          checked: false,
+          label: 'Enjoy with friends',
+        },
+        {
+          id: 'programming',
+          checked: false,
+          label: 'Programming',
+        },
+      ],
+      onChangeListener: (function (id, value) {
+        ui.updateArrayField('activityList', id, value)
+      }),
+    },
+  }
+}

src/components/booksSelection.js

@@ -0,0 +1,24 @@
+export default function booksSelection (ui) {
+  return {
+    type: 'select',
+    params: {
+      id: 'booksOptions',
+      disabled: false,
+      error: false,
+      required: false,
+      shrink: false,
+      label: 'Books',
+      value: '',
+      displayEmpty: false,
+      autoWidth: false,
+      readOnly: false,
+      helperText: 'Select your favourite',
+      elementsList: [
+        {name: 'Lord of the Rings', value: 'lor'},
+        {name: 'Song of fire and ice', value: 'sfi'},
+        {name: 'Think and Grow Rich', value: 'tgr'},
+      ],
+      onSelectListener: function (value) {ui.setValue({book: value})},
+    },
+  }
+}

src/components/diversityImageCard.js

@@ -0,0 +1,30 @@
+export default function diversityImageCard(ui) {
+  return {
+    type: 'mediaCard',
+    params: {
+      id: 'diversityLike',
+      mainText: 'Diversity',
+      secondaryText: 'Click if like',
+      imageURL: 'https://i0.wp.com/www.ampaeb.cat/wp-content/uploads/2017/11/diversidad-funcional.jpg?resize=880%2C360&ssl=1',
+      imageTitle: 'Diversity',
+      imageAlt: 'A paper children circle joined by their hands',
+      contents: [
+        {
+          type: 'button',
+          params: {
+            id: 'diversityButton',
+            text: 'Like',
+            variant: 'contained',
+            color: 'primary',
+            size: 'medium',
+            disabled: false,
+            onClickListener: function () {
+              ui.updateArrayField('imageList', 'diversity', true)
+            },
+          },
+        },
+      ],
+    },
+  }
+}
+

src/components/errorsDialog.js

@@ -0,0 +1,33 @@
+
+
+export default function errorsDialog (ui, errors) {
+  let errorMessage = 'Please, review the inputs:'
+  for (const error of errors){
+    errorMessage += '  · ' + error
+  }
+
+  return {
+    type: 'dialog',
+    params: {
+      id: 'errors',
+      titleText: 'Check errors',
+      contentText: errorMessage,
+      openButtonVariant: 'text',
+      openButtonColor: 'primary',
+      openButtonText: 'Result',
+      closeButtonVariant: 'contained',
+      closeButtonColor: 'primary',
+      closeButtonText: 'Close',
+      open: true,
+      openListener: function () {
+      },
+      closeListener: function () {
+        ui.renderPage()
+      },
+      contents: [
+      ],
+      actionContents: [],
+    },
+  }
+}
+

src/components/feminismImageCard.js

@@ -0,0 +1,30 @@
+export default function feminismImageCard(ui) {
+  return {
+    type: 'mediaCard',
+    params: {
+      id: 'feminismLike',
+      mainText: 'Feminism',
+      secondaryText: 'Click if like',
+      imageURL: 'https://www.conservativewoman.co.uk/wp-content/uploads/2019/03/feminism.jpg',
+      imageTitle: 'Feminism',
+      imageAlt: 'Women hands join in a stack',
+      contents: [
+        {
+          type: 'button',
+          params: {
+            id: 'feminismButton',
+            text: 'Like',
+            variant: 'contained',
+            color: 'primary',
+            size: 'medium',
+            disabled: false,
+            onClickListener: function () {
+              ui.updateArrayField('imageList', 'feminism', true)
+            },
+          },
+        },
+      ],
+    },
+  }
+}
+

src/components/form.js

@@ -0,0 +1,39 @@
+import nameText from './nameText'
+import feminismImageCard from './feminismImageCard'
+import paperWorkImageCard from './paperWorkImageCard'
+import submitFormButton from './submitFormButton'
+import diversityImageCard from './diversityImageCard'
+import activitiesDialog from './activitiesDialog'
+import booksSelection from './booksSelection'
+
+export default function form(ui) {
+
+  return {
+    type: 'card',
+    params: {
+      id: 'mainContainer',
+      mainText: 'Kaleider tester',
+      secondaryText: '',
+      contents: [
+        {
+          type: 'card',
+          params: {
+            id: 'infoContainer',
+            mainText: '',
+            secondaryText: '',
+            contents: [
+              nameText(ui),
+              feminismImageCard(ui),
+              diversityImageCard(ui),
+              paperWorkImageCard(ui),
+              activitiesDialog(ui),
+              booksSelection(ui),
+            ],
+          },
+        },
+        {type: 'divider', params: {id: 'submitButtonDivider'}},
+        submitFormButton(ui),
+      ],
+    },
+  }
+}

src/components/nameText.js

@@ -0,0 +1,25 @@
+export default function nameText(ui) {
+  const onChange = params => {
+    ui.setValue({name: params.value})
+  }
+
+  return {
+    type: 'text',
+    params: {
+      id: 'name',
+      label: 'Name',
+      helperText: 'Write your name',
+      value: ui.getValue().name,
+      margin: 'normal',
+      required: false,
+      error: false,
+      disabled: false,
+      placeholder: 'Site',
+      fullWidth: false,
+      variant: 'standard',
+      type: 'text',
+      shrink: true,
+      onChangeListener: onChange,
+    },
+  }
+}

src/components/paperWorkImageCard.js

@@ -0,0 +1,30 @@
+export default function paperWorkImageCard(ui) {
+  return {
+    type: 'mediaCard',
+    params: {
+      id: 'paperWorkLike',
+      mainText: 'Paper work',
+      secondaryText: 'Click if like',
+      imageURL: 'https://hermandadblanca.org/wp-content/uploads/2016/06/hermandadblanca_org_pereza1-620x465.jpg',
+      imageTitle: 'Paper work',
+      imageAlt: 'A person surrounded by paper and a laptop yawning',
+      contents: [
+        {
+          type: 'button',
+          params: {
+            id: 'paperWorkButton',
+            text: 'Like',
+            variant: 'contained',
+            color: 'primary',
+            size: 'medium',
+            disabled: false,
+            onClickListener: function () {
+              ui.updateArrayField('imageList', 'paperWork', true)
+            },
+          },
+        },
+      ],
+    },
+  }
+}
+

src/components/resultDialog.js

@@ -0,0 +1,31 @@
+
+
+export default function resultDialog (ui, isPassed) {
+  const passText = 'You are a kaleider!!'
+  const doNotPassText = "No, you aren't a kaleider"
+
+  return {
+    type: 'dialog',
+    params: {
+      id: 'result',
+      titleText: 'Test result',
+      contentText: 'The test result is: ' + (isPassed ? passText : doNotPassText),
+      openButtonVariant: 'text',
+      openButtonColor: 'primary',
+      openButtonText: 'Result',
+      closeButtonVariant: 'contained',
+      closeButtonColor: 'primary',
+      closeButtonText: 'Close',
+      open: true,
+      openListener: function () {
+      },
+      closeListener: function () {
+        ui.renderPage()
+      },
+      contents: [
+      ],
+      actionContents: [],
+    },
+  }
+}
+

src/components/submitFormButton.js

@@ -0,0 +1,19 @@
+export default function submitFormButton(ui) {
+  const onClick = function () {
+    const errors = ui.checkParams()
+    errors.length > 0 ? ui.manageErrors(errors) : ui.onSubmit(ui.getValue())
+  }
+  
+  return {
+    type: 'button',
+    params: {
+      id: 'submitFormButton',
+      text: 'Check it!',
+      variant: 'contained',
+      color: 'primary',
+      size: 'medium',
+      disabled: false,
+      onClickListener: onClick,
+    },
+  }
+}

src/index.html

@@ -0,0 +1,14 @@
+<!doctype html>
+<html>
+  <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">
+
+    <title>Kaleider tester</title>
+  </head>
+  <body>
+    <div id="app"></div>
+  </body>
+</html>

src/index.js

@@ -0,0 +1,26 @@
+import './styles.css'
+
+import {remove, render} from 'mcf-components'
+
+import resultDialog from './components/resultDialog'
+import UI from './UI'
+
+
+const htmlReference = 'app'
+const ui = new UI({htmlReference: htmlReference}, onSubmit)
+
+function onSubmit(uiOutput) {
+  let result = true
+
+  if (uiOutput.book === 'tgr' || uiOutput.imageList.includes('paperWork') || uiOutput.activityList.includes('nothing')) result = false
+
+  remove(htmlReference)
+  render(resultDialog(ui, result), htmlReference)
+}
+
+function initPage() {
+  ui.renderPage()
+}
+
+
+initPage()

src/styles.css

@@ -0,0 +1,6 @@
+html {
+  background-color: #dcb4df;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}

webpack.common.js

@@ -0,0 +1,44 @@
+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',
+        ],
+      },
+    ],
+  },
+
+};

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,
+  },
+});

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',
+});