ywana-core8 0.0.1

package/src/html/menu.js

@@ -0,0 +1,80 @@
+import React, { useContext, useState } from 'react'
+import { Icon } from './icon';
+import './menu.css'
+
+
+/**
+ * Page Context
+ */
+export const MenuContext = React.createContext({})
+
+/** 
+ * Menu 
+ **/
+export const Menu = (props) => {
+    const { children } = props
+    return (
+        <ul>
+            {children}
+        </ul>
+    )
+}
+
+/**
+ * Menu Icon
+ */
+export const MenuIcon = (props) => {
+
+    const { icon = "more_vert", children, align } = props
+    const [open, setOpen] = useState(false)
+
+    function toggle() {
+        setOpen(!open)
+    }
+
+    return (
+        <MenuContext.Provider value={[open, setOpen]}>
+            <div className="menu-icon">
+                <Icon icon={icon} clickable action={toggle} />
+                {open ? (
+                    <menu className={`${align}`}>
+                        {children}
+                    </menu>
+                ) : null}
+                {open ? <div className="overlay" onClick={toggle}/> : null}
+            </div>
+        </MenuContext.Provider>
+    )
+}
+
+/**
+ * Menu Item
+ */
+export const MenuItem = (props) => {
+
+    const { id, icon, label, meta, onSelect } = props
+    const [open, setOpen] = useContext(MenuContext)
+
+    function select() {
+        if (onSelect) onSelect()
+        setOpen(false)
+    }
+    return (
+        <li className="menu-item" onClick={select}>
+            {icon ? <Icon icon={icon} /> : null}
+            <label>{label}</label>
+            {meta ? <div className="meta">{meta}</div> : null}
+        </li>
+    )
+}
+
+/**
+ * Menu Separator
+ */
+export const MenuSeparator = (props) => {
+    return (
+        <li>
+            menuSeparator
+        </li>
+    )
+}

package/src/html/progress.css

@@ -0,0 +1,20 @@
+@keyframes rotating {
+    from {
+      -ms-transform: rotate(0deg);
+      -moz-transform: rotate(0deg);
+      -webkit-transform: rotate(0deg);
+      -o-transform: rotate(0deg);
+      transform: rotate(0deg);
+    }
+    to {
+      -ms-transform: rotate(360deg);
+      -moz-transform: rotate(360deg);
+      -webkit-transform: rotate(360deg);
+      -o-transform: rotate(360deg);
+      transform: rotate(360deg);
+    }
+  }
+  
+.circular-progress {
+    animation: rotating 2s linear infinite;
+}

package/src/html/progress.js

@@ -0,0 +1,27 @@
+import { Icon } from './icon'
+import './progress.css'
+
+/**
+ * Circular Progress
+ */
+export const CircularProgress = (props) => {
+    return (
+        <div className="circular-progress">
+            <Icon icon="refresh" size="small" />
+        </div>
+    )
+}
+
+/**
+ * Linear Progress
+ */
+export const LinearProgress = (props) => {
+
+    const { progress= 0, max = 100 } = props
+
+    return (
+        <div className="linear-progress">
+            <progress value={progress} max={max}/>
+        </div>
+    )
+}

package/src/html/property.css

@@ -0,0 +1,18 @@
+.property {
+    flex:1;
+    display: flex;
+}
+
+.property-name {
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.property-value {
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}

package/src/html/property.js

@@ -0,0 +1,16 @@
+import './property.css'
+
+/**
+ * Property
+ */
+export const Property = (props) => {
+
+    const { name, value} = props
+
+    return (
+        <div className="property">
+            <div className="property-name">{name}</div>
+            <div className="property-value">{value}</div>
+        </div>
+    )
+}

package/src/html/radio.css

@@ -0,0 +1,50 @@
+.radio {
+    flex: 1;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    position: relative;
+  }
+  
+  .radio .checkmark {
+    width: 1.5rem;
+    height: 1.5rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: 0.3rem;
+    border: solid 1px var(--primary-color);
+    background-color: var(--paper-color);
+    border-radius: 3rem;
+  }
+  
+  .radio .checkmark:after {
+    content: "";
+    width: .4rem;
+    height: .4rem;
+    border: solid 5px var(--primary-color);
+    border-radius: 5rem;
+    background-color: var(--primary-color);
+    display: none;
+    z-index: 0;
+  }
+  
+  .radio > input {
+    position: absolute;
+    flex: 1;
+    width: 2rem;
+    height: 2rem;
+    opacity: 0;
+    z-index: 1;
+  }
+  
+  input:checked ~ .checkmark:after {
+      display: block;
+    }
+  
+  .radio > label {
+    color: var(--text-color-light);
+    font-size: 1rem;
+    font-weight: normal;
+  }
+  

package/src/html/radio.js

@@ -0,0 +1,25 @@
+import React from 'react'
+import { Text } from './text';
+import './radio.css'
+
+/**
+ * Radio Button
+ */
+export const RadioButton = (props) => {
+
+    const { id, name, label, placeholder, value, onChange } = props
+
+    function change(event) {
+        const value = event.target.value
+        if (onChange) onChange(id, value)
+    }
+
+    const labelTxt = <Text>{label}</Text>
+    return (
+        <div className="radio">
+            <input id={id} name={name} type="radio" placeholder={placeholder} value={value} onClick={change} />
+            <span class="checkmark" />
+            <label htmlFor={id}>{labelTxt}</label>
+        </div>
+    )
+}

package/src/html/section.css

@@ -0,0 +1,6 @@
+.section2>header {
+    background-color: rgba(200,200,200,.1);
+    padding: 0 1rem;
+    min-height: 3rem;
+    font-weight: 500;
+}

package/src/html/section.js

@@ -0,0 +1,31 @@
+import React, { useEffect, useState } from 'react'
+import { Icon } from './icon';
+import { Header } from './header';
+import './section.css'
+
+/**
+ * Section
+ */
+export const Section = (props) => {
+
+    const { icon, title = '', canCollapse = true, open = false, actions, children, className } = props
+    const [isOpen, setOpen] = useState(open)
+
+    useEffect(() => {
+        setOpen(open)
+    }, [open])
+
+    const toggle = () => {
+        setOpen(!open)
+    }
+
+    return (
+        <section className={`section2 ${className}`}>
+            <Header icon={{ icon }} title={title}>
+                {actions}
+                {canCollapse ? <Icon icon="expand_more" onIcon="expand_less" clickable action={toggle} /> : ''}
+            </Header>
+            {isOpen ? (<main>{children}</main>) : ''}
+        </section>
+    )
+}

package/src/html/tab.css

@@ -0,0 +1,45 @@
+.tabs {
+  flex: 1;
+  display: flex;
+  overflow-x: auto;
+  align-items: flex-end;
+  max-height: 3rem;
+}
+
+.tab, .tab-filler {
+  padding: 0 1rem;
+  text-transform: uppercase;
+  overflow: hidden;
+  cursor: pointer;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 2rem;
+  border-bottom: solid 1px var(--divider-color);
+  background-color: transparent !important;
+  min-width: 5rem;
+  font-size: .9rem;
+  color: var(--text-color-light);
+}
+
+.tab-filler {
+  flex: 1;
+}
+
+.tab:hover {
+  background-color: var(--background-color);
+  cursor: pointer;
+}
+
+.tab.selected {
+  background-color: var(--paper-color) !important;
+  color: var(--text-color);
+  border: solid 1px var(--divider-color);
+  border-bottom-width: 0;
+  min-height: 2.2rem;
+  border-radius: 0;
+}
+
+.tab.small {
+  padding: .2rem;
+}

package/src/html/tab.js

@@ -0,0 +1,68 @@
+import React, { useState } from 'react'
+import { Fragment } from 'react'
+import './tab.css'
+
+/**
+ * Tabs
+ */
+export const Tabs = (props) => {
+
+  const { children, selected, onChange } = props
+
+  const tabs = React.Children.map(children, (child, index) => {
+
+    function select() {
+      if (onChange) onChange(index)
+    }
+
+    return React.cloneElement(child, {
+      selected: index === selected,
+      onSelect: select
+    })
+  })
+
+  return (
+    <div class="tabs">
+      {tabs}
+      <div class="tab-filler" />
+    </div>
+  )
+}
+
+/**
+ * Tab
+ */
+export const Tab = (props) => {
+
+  const { label, selected, actions, onSelect } = props
+
+  function select() {
+    if (onSelect) onSelect()
+  }
+
+  const style = selected ? "selected" : ""
+  return (
+    <div className={`tab ${style}`} onClick={select}>
+      {label}
+      {actions ? actions : null}
+    </div>
+  )
+}
+
+/**
+ * Stack
+ */
+ export const Stack = (props) => {
+
+  const { selected = 0 } = props
+
+  const child = React.Children
+    .toArray(props.children)
+    .filter((child, index) => index === selected )[0]
+  
+  return (
+    <Fragment>
+      {child}
+    </Fragment>
+  )
+}

package/src/html/table.css

@@ -0,0 +1,56 @@
+.datatable8 {
+    max-height: 40rem;
+    overflow: hidden;
+    border: solid 0px var(--divider-color);
+    background-color: var(--paper-color);
+}
+
+.datatable8.outlined {
+    border: solid 1px var(--divider-color);
+}
+
+.datatable8 table {
+    width: 100%;
+}
+
+.datatable8 thead  {
+    position: sticky;
+    top: 0px;
+    background-color: rgba(200,200,200,.4);
+    overflow: hidden;
+    color: var(--text-color-lighter);
+}
+
+.datatable8 thead tr {
+    border-bottom: solid 1px var(--divider-color);
+}
+
+.datatable8 thead th {
+    padding: 0 1rem;
+    text-align: left;
+    font-weight: 600 !important;
+}
+
+.datatable8 tbody {
+    overflow: visible;
+    height: 5rem;
+}
+
+.datatable8 tbody tr {
+    border-bottom: solid 1px var(--divider-color);
+}
+
+.datatable8 tbody tr:hover {
+    background-color: rgba(200,200,200,.2);
+    cursor: pointer
+}
+
+.datatable8 tbody td {
+    height: 3rem;
+    padding: 0 1rem;
+    overflow: visible;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    max-width: 10rem;
+    color: var(--text-color-light);
+}   

package/src/html/table.js

@@ -0,0 +1,186 @@
+import { Fragment, useState } from 'react'
+import { CheckBox } from './checkbox'
+import { Icon } from './icon'
+import { Text } from './text'
+import { DropDown, TextField } from './textfield'
+import './table.css'
+
+/**
+ * DataTable
+ */
+export const DataTable = (props) => {
+
+    const { columns = [], rows = [], onRowSelection, onSort, editable, outlined } = props
+    const [sortDir, setSortDir] = useState({})
+
+    function multiSort(array, sortObject = {}) {
+
+        const sortKeys = Object.keys(sortObject);
+
+        if (!sortKeys.length) {
+            return array;
+        }
+
+        const keySort = (a, b, direction) => {
+            direction = direction !== null ? direction : 1;
+
+            if (a === b) { // If the values are the same, do not switch positions.
+                return 0;
+            }
+
+            // If b > a, multiply by -1 to get the reverse direction.
+            return a > b ? direction : -1 * direction;
+        };
+
+        return array.sort((a, b) => {
+            let sorted = 0;
+            let index = 0;
+
+            // Loop until sorted (-1 or 1) or until the sort keys have been processed.
+            while (sorted === 0 && index < sortKeys.length) {
+                const key = sortKeys[index];
+
+                if (key) {
+                    const direction = sortObject[key];
+
+                    sorted = keySort(a[key], b[key], direction);
+                    index++;
+                }
+            }
+
+            return sorted;
+        });
+    }
+
+    function select(row, event) {
+        if (onRowSelection) onRowSelection(row, event)
+    }
+
+    function sort(dragged, dropped) {
+        if (onSort) onSort(dragged, dropped)
+    }
+
+    const style = outlined ? "outlined" : ""
+    return (
+        <div className={`datatable8 ${style}`}>
+            <table>
+                <thead>
+                    <tr>
+                        {columns.map(({ id, label, sortable }) => {
+                            const sort = sortDir[id] ? sortDir[id] : null
+                            return (
+                                <th>
+                                    <Text>{label}</Text>
+                                    {sortable ? <Icon icon="arrow_up" size="small" clickable /> : null}
+                                </th>
+                            )
+                        })}
+                    </tr>
+                </thead>
+                <tbody>
+                    {
+                        multiSort(rows, sortDir).map(row => (
+                            <DataTableRow key={row.id} row={row} columns={columns} onSelect={select} onDrop={sort} editable={editable}/>
+                        ))
+                    }
+                </tbody>
+            </table>
+        </div>
+    )
+}
+
+/**
+ * DataTable Row
+ */
+const DataTableRow = (props) => {
+    const { row, columns = [], onSelect, editable } = props
+    const [isInfoOpen, toggleInfo] = useState(false)
+    const infoIcon = isInfoOpen ? 'expand_more' : 'expand_less'
+
+    const isFunction = value => value && (Object.prototype.toString.call(value) === "[object Function]" || "function" === typeof value || value instanceof Function);
+
+    return (
+        <Fragment>
+            <tr onClick={ev => onSelect(row, ev)}>
+                {columns.map(column => <DataTableCell row={row} column={column} cell={row[column.id]} editable={editable}/>)}
+                {row.info ? <Icon icon={infoIcon} clickable action={() => toggleInfo(!isInfoOpen)} /> : null}
+            </tr>
+            {row.info && isInfoOpen ? (
+                <tr className="table-row-info">
+                    {isFunction(row.info) ? row.info() : row.info}
+                </tr>
+            ) : null}
+        </Fragment>
+    )
+}
+
+/**
+ * DataTable Cell
+ */
+const DataTableCell = ({ row, column, cell, editable }) => {
+
+    const render = (type) => {
+        const { id, disabled = false, min, max, onChange, options } = column
+        if (editable && onChange) {
+            switch (type) {
+                case "ICON": return <Icon icon={cell} />
+                case "BOOLEAN": return <CheckBox id={id} value={cell} onChange={(id, value) => onChange(row.id, id, value)} disabled={disabled} />
+                case "Boolean": return <CheckBox id={id} value={cell} onChange={(id, value) => onChange(row.id, id, value)} disabled={disabled} />
+                case "SELECTION": return <DropDown id={id} value={cell} placeholder="--Select--" options={options} onChange={(id, value) => onChange(row.id, id, value)} />
+                case "CHECK": return <CheckBox id={id} value={cell} onChange={(id, value) => onChange(row.id, id, value)} disabled={row.disabled} />
+                case "CHECKABLE": return cell && cell.value ? <CheckBox id={id} value={cell.checked || false} label={cell.value} onChange={(id, checked) => onChange(row.id, id, cell.value, checked, cell)} /> : ''
+                case "TEXTFIELD": return <TextField id={id} value={cell} onChange={(id, value) => onChange(row.id, id, value)} />
+                case "String": return <StringCellEditor id={id} value={cell} options={options} onChange={(id, value) => onChange(row.id, id, value)} />
+                case "Number": return <TextField id={id} type="number" value={cell} min={min} max={max} onChange={(id, value) => onChange(row.id, id, value)} />
+                default: return cell
+            }
+        } else {
+            switch (type) {
+                case "ICON": return <Icon icon={cell} />
+                case "Boolean": return <BooleanCellViewer id={id} value={cell} />
+                case "String": return <StringCellViewer id={id} value={cell} options={options} />
+                default: return cell
+            }
+        }
+    }
+
+    return (
+        <td className={column.id}>{render(column.type)}</td>
+    )
+}
+
+/**
+ * Boolean Cell Viewer
+ */
+const BooleanCellViewer = ({ id, value = false }) => {
+    const icon = value === true ?  "check_box" : "check_box_outline_blank"
+    return <Icon icon={icon} />
+}
+
+/**
+ * String Cell Viewer
+ */
+const StringCellViewer = ({ id, value, options }) => {
+    const option = options ? options.find( o => o.value === value) : null
+    const text = option ? option.label : value
+    return (<div className="field-editor string-editor">{text}</div>)
+}
+
+/**
+ * String Cell Editor
+ */
+export const StringCellEditor = ({ id, value = '', options, onChange }) => {
+
+    function change(id, value) {
+        if (onChange) onChange(id, value)
+    }
+
+    return (
+        <div className='field-editor string-editor'>
+            {options ?
+                <DropDown outlined id={id} value={value} onChange={change} options={options} />
+                : <TextField outlined id={id} value={value} onChange={change} />
+            }
+        </div>
+    )
+}

package/src/html/text.js

@@ -0,0 +1,20 @@
+import { useContext } from "react"
+import { SiteContext } from "../site/siteContext"
+
+/**
+ * Text
+ */
+export const Text = ({ children }) => {
+
+    const site = useContext(SiteContext)
+
+    if (site) {
+      const { lang, dictionary = {}} = site
+      const term = dictionary[children]
+      const text = term ? term[lang] : children
+      return text ? <span>{text}</span> : ''
+    }
+
+    return children ? <span>{children}</span> : ''
+
+}