Initial commit

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

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

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

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: [],
+    },
+  }
+}

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

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: [],
+    },
+  }
+}
+

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

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

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>

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()

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%;*/
+/*}*/