ywana-core8 0.0.1

package/src/domain/ContentEditor.js

@@ -0,0 +1,425 @@
+import React, { Fragment, useState } from 'react';
+import { Button, CheckBox, DataTable, DropDown, Icon, Stack, Tab, Tabs, Text, TextField, Tree, TreeNode, TreeItem, TokenField, Property } from '../html';
+import { Content, TYPES } from './ContentType';
+import './ContentEditor.css';
+
+/**
+ * Content Editor
+ */
+export const ContentEditor = ({ content, filter, onChange }) => {
+
+  function change(id, value) {
+    const nextValue = Object.assign({}, content.value(), { [id]: value })
+    if (onChange) onChange(nextValue)
+  }
+
+  const sections = content.sections()
+
+  return (
+    <div className='content-editor'>
+      {sections.map((section) => {
+        const { title, fields } = section
+        return (
+          <section key={title}>
+            <header>{title}</header>
+            <main>
+              {fields
+                .filter(field => field.id !== 'id')
+                .filter(field => filter ? filter(field, content) : true)
+                .map((field) => <FieldEditor key={field.id} field={field} onChange={change} />)}
+            </main>
+          </section>
+        )
+      })}
+    </div>
+  )
+}
+
+/**
+ * Tabbed Content Editor
+ */
+export const TabbedContentEditor = ({ content, filter, grouped = false, onChange }) => {
+
+  const [tab, setTab] = useState(0)
+
+  function change(id, value) {
+    const nextValue = Object.assign({}, content.value(), { [id]: value })
+    if (onChange) onChange(nextValue)
+  }
+
+  function changeTab(tab) {
+    setTab(tab)
+  }
+
+  function group(section) {
+    const { fields = [] } = section
+    const groups = fields.reduce((groups, field) => {
+      const groupName = field.group || ""
+      const group = groups[groupName] || { name: groupName, fields: [] }
+      group.fields.push(field)
+      groups[groupName] = group
+      return groups
+    }, {})
+    return Object.values(groups)
+  }
+
+  const sections = content.sections()
+
+  return (
+    <div className='content-editor tabbed'>
+      <Tabs selected={tab} onChange={changeTab}>
+        {sections.map(section => <Tab label={section.title} />)}
+      </Tabs>
+      <Stack selected={tab}>
+        {sections.map(section => {
+          const { title, fields } = section
+          return (
+            <section key={title}>
+              <nav>
+                &nbsp;
+              </nav>
+              <main>
+                {
+                  grouped ?
+                    group(section)
+                      .map(group => {
+                        return (
+                          <Fragment>
+                            {group.name.length > 0 ? <div className="group-caption">{group.name}</div> : null}
+                            {
+                              group.fields
+                                .filter(field => field.id !== 'id')
+                                .filter(field => filter ? filter(field) : true)
+                                .map((field) => <FieldEditor key={field.id} field={field} onChange={change} content={content} />)
+                            }
+                          </Fragment>
+                        )
+                      })
+                    :
+                    fields
+                      .filter(field => field.id !== 'id')
+                      .filter(field => filter ? filter(field) : true)
+                      .map((field) => <FieldEditor key={field.id} field={field} onChange={change} content={content} />)
+                }
+              </main>
+            </section>
+          )
+        })}
+      </Stack>
+    </div>
+  )
+}
+
+/**
+ * TreededContentEditor 
+ */
+export const TreededContentEditor = ({ content, filter, onChange }) => {
+
+
+  const value = content.value()
+  const nodes = Object.values(content.type).filter(field => field.type === TYPES.ARRAY)
+  const [selected, setSelected] = useState()
+
+  function select(index, field, node) {
+    const item = new Content(node.item, field)
+    setSelected({ index, item, node, value: value[node.id] })
+  }
+
+  function change(form) {
+    const nextNode = selected.value.slice()
+    nextNode[selected.index] = form
+    const nextContent = Object.assign({}, value, { [selected.node.id]: nextNode })
+    if (onChange) onChange(nextContent)
+  }
+
+  function add() {
+    //TODO
+  }
+
+  return (
+    <div className="content-editor treeded-editor">
+      <menu>
+        <header>
+          <Text use='caption'>Tree Editor</Text>
+        </header>
+        <Tree>
+          {nodes.map((node, index) => (
+            <TreeNode icon="folder" label={node.label} actions={[<Icon small icon="add" clickable action={add} />]}>
+              {
+                value[node.id] ? value[node.id].map((field, index) => <TreeItem icon={field.icon || "description"} label={field.name || field.label} onSelect={() => select(index, field, node)} />) : null
+              }
+            </TreeNode>
+          ))}
+        </Tree>
+      </menu>
+      <div>
+        {selected ? <TabbedContentEditor content={selected.item} onChange={change} /> : "select"}
+      </div>
+    </div>
+  )
+}
+
+/**
+ * FieldEditor
+ */
+export const FieldEditor = ({ field, onChange, content, outlined = false }) => {
+  const { id, type, item, label, editable, options } = field
+
+  function change(id, value) {
+    if (onChange) onChange(id, value)
+  }
+
+  function renderField() {
+    const value1 = field.value ? field.value : field.default
+    switch (type) {
+      case TYPES.ENTITY:
+        return <EntityEditor field={field} value={value1} onChange={change} />
+      case TYPES.STRING:
+        return <StringEditor outlined={outlined} field={field} value={value1} onChange={change} content={content} />
+      case TYPES.BOOLEAN:
+        return <CheckBox outlined id={id} label={label} value={value1} onChange={change} />
+      case TYPES.DATE:
+        return <TextField outlined={outlined} id={id} type='date' label={label} value={value1} onChange={change} disabled={editable} />
+      case TYPES.NUMBER:
+        return <NumberEditor outlined={outlined} field={field} value={value1} onChange={change} />
+      case TYPES.ARRAY:
+        return item === TYPES.STRING ?
+          options ? <MultiSelectionEditor content={content} field={field} value={value1} onChange={change} /> : <ListEditor field={field} value={value1} onChange={change} />
+          : <CollectionEditor field={field} value={value1} onChange={change} />
+      default:
+        return <div>{label}</div>
+    }
+  }
+  return renderField()
+}
+
+/**
+ * Entity Editor
+ */
+const EntityEditor = ({ field, value = {}, onChange }) => {
+  const { id, item, label } = field
+  const content = new Content(item, value)
+
+  function change(fid, value) {
+    const next = Object.assign({}, content.value(), { [fid]: value })
+    if (onChange) onChange(id, next)
+  }
+
+  const form = content.form()
+  const fields = Object.keys(form).map((key) => form[key])
+
+  return (
+    <div className='entity-editor'>
+      <header>
+        <Text use='caption'>{label}</Text>
+      </header>
+      <main>
+        {fields.map((field) => (
+          <FieldEditor key={field.id} field={field} onChange={change} />
+        ))}
+      </main>
+    </div>
+  )
+}
+
+/**
+ * String Editor
+ */
+export const StringEditor = ({ field, value = '', onChange, content, outlined }) => {
+  const { id, label, options, editable = true, filter } = field
+
+  function change(id, value) {
+    if (onChange) onChange(id, value)
+  }
+
+  function buildOptions() {
+    const opts = typeof options === 'function' ? options(field, content) : options
+    return opts
+  }
+
+  return (
+    <div className='field-editor string-editor'>
+      {
+        editable ?
+          options ? (
+            <DropDown outlined={outlined} id={id} label={label} value={value} onChange={change} options={buildOptions()} />
+          ) : (
+            <TextField outlined={outlined} id={id} label={label} value={value} onChange={change} />
+          ) : (
+            <TextField outlined={outlined} id={id} label={label} value={value} onChange={change} readOnly={true} />
+          )
+      }
+    </div>
+  )
+}
+
+/**
+ * Number Editor
+ */
+const NumberEditor = ({ field, value, onChange }) => {
+  const { id, label, editable = true } = field
+
+  function change(id, value) {
+    if (onChange) onChange(id, value)
+  }
+
+  const val = value || field.default
+  const min = field.min
+  const max = field.max
+  const disabled = !editable
+
+  return (
+    <div className='field-editor number-editor'>
+      <TextField outlined id={id} label={label} type='NUMBER' value={val} max={max} min={min} onChange={change} disabled={disabled} />
+    </div>
+  )
+}
+
+/**
+ * List Editor
+ */
+export const ListEditor = ({ field, value = [], onChange }) => {
+
+  const { label } = field
+
+  function change(id, value) {
+    if (onChange) onChange(id, value)
+  }
+
+  return (
+    <div className="list-editor">
+      <TokenField id={field.id} label={label} init={value} onChange={change} />
+    </div>
+  )
+}
+
+/**
+ * Multi Selection Editor
+ */
+export const MultiSelectionEditor = ({ field, value = [], content, onChange }) => {
+
+  const { id, label, options } = field
+
+  function change(v) {
+    const index = value.indexOf(v)
+    if (index >= 0) {
+      value.splice(index, 1)
+    } else {
+      value.push(v)
+    }
+    if (onChange) onChange(id, value)
+  }
+
+  function buildOptions() {
+    const opts = typeof options === 'function' ? options(field, content) : options
+    return opts
+  }
+
+  return (
+    <div className="multiselection-editor">
+      <label>{label}</label>
+      {buildOptions().map(option => {
+        const checked = value.includes(option.value)
+        return <CheckBox value={checked} label={option.label} onChange={() => change(option.value)} />
+      })}
+    </div>
+  )
+
+}
+
+/**
+ * Collection Editor
+ */
+export const CollectionEditor = ({ field, value = [], onChange }) => {
+
+  const { id, item, label, Feeder, Renderer, Adder = true, editable = true } = field
+
+  function add(rows) {
+    if (onChange) {
+      const next = value.concat(rows)
+      onChange(id, next)
+    }
+  }
+
+  function remove(index) {
+    if (onChange) {
+      const next = value.filter((item, i) => i !== index)
+      onChange(id, next)
+    }
+  }
+
+  function change(index, cellId, cellValue) {
+    if (onChange) {
+      const next = value.slice()
+      next[index][cellId] = cellValue
+      onChange(id, next)
+    }
+  }
+
+  const columns = Object.values(item).map((item) => ({ ...item, onChange: change }))
+  columns.push({ id: 'actions', label: 'Actions' })
+
+  const rows = value.map((item, index) => ({
+    ...item,
+    id: index,
+    actions: [
+      <Icon icon='delete' clickable action={() => remove(index)} small />
+    ]
+  }))
+
+  const table = { columns, rows }
+
+  return (
+    <div className='collection-editor'>
+      <header>
+        <Text use='caption'>{label}</Text>
+        <div className="actions" >
+          {Feeder ? <Feeder onAdd={add} /> : null}
+        </div>
+      </header>
+      {Renderer ? <Renderer field={field} value={value} onRemove={remove} onChange={onChange} /> : <DataTable {...table} editable={editable} />}
+      <footer>
+        {Adder ? <CollectionAdder item={item} onAdd={add} /> : null}
+      </footer>
+    </div>
+  )
+}
+
+/**
+ * Collection Adder
+ */
+const CollectionAdder = ({ item, onAdd }) => {
+
+  const [edit, setEdit] = useState(false)
+  const [form, setForm] = useState({})
+
+  function toggle() {
+    setEdit(!edit)
+  }
+
+  function change(index, cellId, cellValue) {
+    if (onAdd) {
+      const next = Object.assign({}, form, { [cellId]: cellValue })
+      setForm(next)
+    }
+  }
+
+  function save() {
+    if (onAdd) onAdd([form])
+    toggle()
+  }
+
+  const columns = Object.values(item).map((item) => ({ ...item, type: 'String', onChange: change }))
+  columns.push({ id: 'actions', label: '' })
+  const rows = [{
+    actions: [<Icon icon="done" clickable action={save} />, <Icon icon="close" clickable action={toggle} />]
+  }]
+  rows[0] = Object.assign({}, form, rows[0])
+  const table = { columns, rows }
+
+  return (
+    <div className="collection-adder">
+      {edit ? <DataTable {...table} editable={true} /> : <Button icon='add' label='Add' action={toggle} />}
+    </div>
+  )
+}

package/src/domain/ContentForm.js

@@ -0,0 +1,74 @@
+import React from 'react';
+import { TYPES } from './ContentType';
+import { TextField, CheckBox, DropDown, Form } from '../html';
+
+/**
+ * Content Form 
+ */
+export const ContentForm = ({ content, columns = 1, filter, rules, onChange }) => {
+
+    const form = content.form()
+    console.log(form)
+
+    const fields = Object.keys(form)
+        .map(key => form[key])
+        .filter( field => filter ? filter(field) : true)
+
+    console.log(fields)
+    
+    return (
+        <Form className="content-form" columns={columns} outlined={true} onChange={onChange}>
+            { fields.map(field => <ContentFormField key={field.id} {...field} />)}
+        </Form>
+    )
+}
+
+/**
+ * Content Form Field
+ */
+const ContentFormField = (props) => {
+    const { type, label } = props
+    switch (type) {
+        case TYPES.BOOLEAN:
+            return <CheckBox key={props.id} {...props} />
+        case TYPES.NUMBER:
+            return <NumberField key={props.id} {...props} />
+        default:
+            return <StringField key={props.id} {...props} />
+    }
+}
+
+/**
+* String Editor
+*/
+export const StringField = ({ id, type, label, options, textarea, required = false, value, hidden, onChange, outlined }) => {
+
+    const fieldTypes = {
+        [TYPES.NUMBER] : 'number',
+        [TYPES.DATE] : 'date',
+    }
+
+    function buildOptions() {
+        const opts = typeof options === 'function' ? options() : options
+        return opts
+      }
+
+    const fieldType = fieldTypes[type] || 'text'
+
+    if (options) return <DropDown key={id} id={id} label={label} value={value} onChange={onChange} options={buildOptions()} outlined={outlined} />
+    return <TextField key={id} id={id} type={fieldType} label={label} value={value} onChange={onChange} required={required} outlined={outlined} textarea={textarea}/>
+}
+
+/**
+* Number Editor
+*/
+export const NumberField = ({ id, label, options, required = false, value, onChange, outlined }) => {
+
+    function change(id, value) {
+        const num = !!+value ? +value : value
+        if (onChange) onChange(id, num)
+    }
+
+    if (options) return <DropDown key={id} id={id} label={label} value={value} onChange={change} options={options} outlined={outlined} />
+    return <TextField key={id} id={id} type="number" label={label} value={value} onChange={change} required={required} outlined={outlined} />
+}

package/src/domain/ContentType.js

@@ -0,0 +1,187 @@
+/**
+ * TYPES
+ */
+export const TYPES = {
+    STRING: 'String',
+    NUMBER: 'Number',
+    DATE: 'Date',
+    BOOLEAN: 'Boolean',
+    ARRAY: 'Array',
+    ENTITY: 'Object',
+    FUNCTION: 'Function',
+    EMAIL: 'String'
+}
+
+/**
+ * CHECK
+ */
+export const CHECK = Object.values(TYPES).reduce((obj, name) => {
+    obj['is' + name] = x => toString.call(x) == '[object ' + name + ']';
+    return obj;
+}, {});
+
+/**
+ * Content Type
+ */
+export class ContentType {
+
+    constructor(schema) {
+        this._schema = schema
+    }
+
+    checkType({ type, item }, data) {
+        let valid = true
+        let validChildren = true
+        if (item) {
+            const child = new ContentType(item)
+            switch (type) {
+                case TYPES.ARRAY:
+                    valid = CHECK['is' + type](data)
+                    validChildren = data.every(element => child.validate(element))
+                    break
+                case TYPES.ENTITY:
+                    valid = CHECK['is' + type](data)
+                    validChildren = child.validate(data)
+                    break
+                case TYPES.NUMBER:
+                    valid = CHECK['is' + type](data.value)
+                    validChildren = true
+                    break
+                default:
+                    valid = true
+                    validChildren = true;
+            }
+        }
+        return valid && validChildren
+    }
+
+    /**
+     * Validate entity data
+     * - Inspect required attributes only
+     * - Check attributes type
+     */
+    validate(data) {
+        const attributes = Object.entries(this._schema)
+        return attributes
+            .filter(([name, attr]) => attr.required === true)
+            .every(([name, attr]) => data[name] !== undefined ? this.checkType(attr, data[name]) : false)
+    }
+
+    /**
+     * Content Type Form
+     */
+    form(data) {
+
+        const entries = Object.entries(this._schema)
+
+        const form = entries.reduce((form, [id, field]) => {
+            form[id] = Object.assign({}, field, { value: data[id] })
+            return form
+        }, {})
+
+        return form
+    }
+
+    /**
+     * Content Type Sections
+     */
+    sections(data) {
+
+        const form = this.form(data)
+        const fields = Object.values(form)
+        const sections = fields.reduce((sections, field) => {
+            const { section } = field
+            const title = section ? section : ''
+            if (!sections.hasOwnProperty(title)) sections[title] = { title, fields: [] }
+            sections[title].fields.push(field)
+            return sections
+        }, {});
+
+        return Object.values(sections)
+    }
+
+    /**
+     * value 
+     */
+    value(data) {
+
+        const fields = Object.entries(this._schema)
+        const next = fields.reduce((next, [name, field]) => {
+
+            const { type, item } = field
+            const entryData = data ? data[name] : null
+
+            switch (type) {
+
+                case TYPES.STRING:
+                    next[name] = entryData || field.default
+                    break;
+
+                case TYPES.NUMBER:
+                    next[name] = entryData || field.default
+                    break;
+
+                case TYPES.BOOLEAN:
+                    next[name] = entryData || field.default
+                    break
+
+                case TYPES.ENTITY:
+                    const child1 = new ContentType(item)
+                    next[name] = child1.value(entryData)
+                    break;
+
+                case TYPES.ARRAY:
+                    if (item === TYPES.STRING) {
+                        next[name] = entryData ? entryData : []
+                    } else {
+                        const child2 = new ContentType(item)
+                        next[name] = entryData ? entryData.map(data2 => child2.value(data2)) : []
+                    }
+                    break;
+
+                default:
+                    next[name] = field
+                    break;
+
+            }
+
+            return next
+
+        }, {})
+
+        return next
+    }
+}
+
+
+/**
+ * Content
+ */
+export class Content {
+
+    constructor(type, value) {
+        this.type = type
+        this._type = new ContentType(type)
+        this._value = value
+    }
+
+    isValid() {
+        return this._type.validate(this._value)
+    }
+
+    value() {
+        return this._type.value(this._value)
+    }
+
+    form() {
+        return this._type.form(this._value)
+    }
+
+    sections() {
+        return this._type.sections(this._value)
+    }
+
+    update(value) {
+        this._value = value
+    }
+}