ywana-core8 0.0.1

package/src/html/checkbox.css

@@ -0,0 +1,51 @@
+.checkbox {
+  flex: 1;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  position: relative;
+}
+
+.checkbox .checkmark {
+  width: 1.5rem;
+  height: 1.4rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0.3rem;
+  border: solid 1px var(--primary-color);
+  background-color: var(--paper-color);
+  padding-bottom: .1rem;
+}
+
+.checkbox .checkmark:after {
+  content: "";
+  width: 0.3rem;
+  height: 0.8rem;
+  border: solid var(--primary-color);
+  border-width: 0 3px 3px 0;
+  -webkit-transform: rotate(45deg);
+  -ms-transform: rotate(45deg);
+  transform: rotate(45deg);
+  display: none;
+  z-index: 0;
+}
+
+.checkbox > input {
+  position: absolute;
+  flex: 1;
+  width: 2rem;
+  height: 2rem;
+  opacity: 0;
+  z-index: 1;
+}
+
+input:checked ~ .checkmark:after {
+    display: block;
+  }
+
+.checkbox > label {
+  color: var(--text-color-light);
+  font-size: 1rem;
+  font-weight: normal;
+}

package/src/html/checkbox.js

@@ -0,0 +1,33 @@
+import React from 'react'
+import { Text } from './text'
+import './checkbox.css'
+
+/**
+ * CheckBox
+ */
+export const CheckBox = (props) => {
+
+    const { id, label, placeholder, value, onChange } = props
+
+    function change(event) {
+        const value = event.target.checked
+        if (onChange) onChange(id, value)
+    }
+
+    const labelTxt = <Text>{label}</Text>
+    
+    console.log(label, value)
+    return value === true  ? (
+        <div className="checkbox" key={`${id}1`}>
+            <input id={id} type="checkbox" placeholder={placeholder} checked value={value} onChange={change} />
+            <span class="checkmark" />
+            <label htmlFor={id}>{labelTxt}</label>
+        </div>
+    ) : (
+        <div className="checkbox" key={`${id}0`}>
+        <input id={id} type="checkbox" placeholder={placeholder} value={value} onChange={change} />
+        <span class="checkmark" />
+        <label htmlFor={id}>{labelTxt}</label>
+    </div>
+    )
+}

package/src/html/chip.css

@@ -0,0 +1,63 @@
+.chips {
+    flex: 1;
+    display: flex;
+    overflow: auto;
+    max-height: 2rem;
+}
+
+.chip {
+    display: flex;
+    align-items: center;
+    border-radius: 2rem;
+    font-size: .9rem;
+    color: var(--text-color-light);
+    background-color: rgb(232, 232, 232);
+    margin: .2rem;
+    cursor: pointer;
+}
+
+.chip:hover {
+    background-color: rgba(200,200,200,.5);
+}
+
+.chip.selected {
+    background-color: var(--primary-color-lighter);
+}
+
+.chip.outlined {
+    background-color: transparent;
+    border: solid 1px var(--divider-color);
+}
+
+.chip.outlined:hover {
+    background-color: rgba(200,200,200,.5);
+}
+
+.chip.outlined.selected {
+    background-color: var(--primary-color-lighter);
+    border: solid 1px var(--primary-color-light);
+}
+
+.chip>.icon {
+    border-radius: 2rem;
+    width: 1.5rem;
+    height: 1.5rem;
+    margin: .2rem;
+}
+
+.chip>main {
+    flex: 1;
+    padding: .3rem;
+    display: flex;
+    align-items: center;
+    white-space: nowrap;
+}
+
+.chip>.meta>.icon {
+    background-color: rgba(200,200,200,.8);
+    border-radius: 2rem;
+    width: 1.2rem;
+    height: 1.2rem;
+    margin: .2rem;
+    font-size: .8rem;
+}

package/src/html/chip.js

@@ -0,0 +1,39 @@
+import { Icon } from './icon';
+import { Text } from './text'
+import './chip.css'
+
+/**
+ * Chip
+ */
+export const Chip = (props) => {
+
+    const { id, icon, label, action, outlined, selected, onSelect } = props
+
+    function select(event) {
+        event.stopPropagation();
+        event.preventDefault();
+        if (onSelect) onSelect(id)
+    }
+
+    let style = outlined ? "outlined" : "normal"
+    if (selected) style = `${style} selected`
+    return (
+        <div className={`chip ${style}`} onClick={select}>
+            {icon ? <Icon icon={icon} size="small" /> : null}
+            <main><Text>{label}</Text></main>
+            {action ? <span className="meta">{action}</span> : null}
+        </div>
+    )
+}
+
+/**
+ * Chips
+ */
+export const Chips = (props) => {
+    const { children } = props
+    return (
+        <div className="chips">
+            {children}
+        </div>
+    )
+}

package/src/html/form.css

@@ -0,0 +1,17 @@
+.form-header {
+    padding: 0 1rem;
+}
+
+.form-grid {
+    display: grid;
+    grid-auto-rows: 4.2rem;
+    grid-gap: 0rem;
+}
+
+.field-wrapper {
+    display: flex;
+}
+
+.field-wrapper>* {
+    flex: 1;
+}

package/src/html/form.js

@@ -0,0 +1,80 @@
+import React, { Fragment, useState, useEffect } from 'react'
+import { Text } from './text';
+import './form.css'
+
+/**
+ * Form
+ */
+export const Form = ({ title, columns = 1, children, outlined, onChange }) => {
+
+    const [fields, setFields] = useState([])
+    const isEmpty = (value) => value === void 0 || value === null || value === '';
+
+    useEffect(() => {
+        const initFields = React.Children
+            .toArray(children)
+            .filter(child => child !== null && child !== '')
+            .map(child => {
+                const { id, value, required = false, validation } = child.props
+                const valid = required ? validation ? validation(value) : !isEmpty(value) : true
+                return { id, value, required, validation, valid }
+            })
+            .filter(field => field.id !== void 0)
+        setFields(initFields)
+    }, [])
+
+    useEffect(() => {
+        if (onChange) {
+            const valid = fields.every(({ valid }) => valid === true)
+            const form = fields.reduce((form, { id, value }) => {
+                if (value || value === false) form[id] = value
+                return form
+            }, {})
+            onChange(form, valid)
+        }
+    }, [fields])
+
+    const changeField = (id, value) => {
+        const field = fields.find(f => f.id === id)
+        if (field) {
+            const valid = field.required ? field.validation ? field.validation(value) : !isEmpty(value) : true
+            Object.assign(field, { value, valid })
+            setFields(fields.slice())
+        }
+    }
+
+    const items = React.Children
+        .toArray(children)
+        .filter(child => child !== null && child !== '')
+        .map(child => {
+            const { span = 1 } = child.props
+            const field = React.cloneElement(child, {
+                onChange: changeField,
+                outlined: !!outlined
+            })
+            const columnLayout = { gridColumn: `span ${span}`}
+            return (<FieldWrapper style={columnLayout}>{field}</FieldWrapper>)
+        })
+
+
+    const gridLayout = { gridTemplateColumns: `repeat(${columns}, 1fr)` }
+    return (
+        <Fragment>
+            {title ? (<header className="form-header"><Text use="headline6">{title}</Text></header>) : ''}
+            <form className="form-grid" style={gridLayout}>
+                {items}
+            </form>
+        </Fragment>
+    )
+}
+
+/**
+ * Form Field Wrapper
+ */
+const FieldWrapper = ({ style, children }) => {
+    return (
+        <div className="field-wrapper" style={style}>
+            {children}
+        </div>
+    )
+}

package/src/html/header.css

@@ -0,0 +1,64 @@
+.header {
+  display: flex;
+  padding: 0;
+  min-height: 3rem;
+  align-items: center;
+  background-repeat: no-repeat;
+  background-size: cover;
+}
+
+.header>.icon .header>img {
+  margin-right: 1.6rem
+}
+
+.header>label {
+  margin-left: 1rem
+}
+
+.header.caption {
+  height: 4rem;
+  border-bottom: solid 1px var(--divider-color);
+}
+
+.header.dense {
+  height: 2.4rem;
+  padding: 0;
+}
+
+.header.prominent {
+  height: 12.8rem;
+  align-items: flex-start;
+}
+
+.header.prominent>label {
+  align-self: flex-end;
+}
+
+.header-icon {
+  max-width: 4rem;
+  max-height: 4rem;
+  object-fit: contain;
+  padding: .5rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.header>.actions {
+  position: relative;
+  flex: 1;
+  display: flex;
+  flex-direction: row-reverse;
+  align-items: center;
+  overflow: vivsible;
+}
+
+.header.primary {
+  background-color: var(--primary-color-dark);
+  color: var(--primary-color-text);
+}
+
+.header.secondary {
+  color: var(--secondary-color-text);
+  background-color: var(--secondary-color-dark);
+}

package/src/html/header.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import { Icon } from './icon';
+import { Text } from './text';
+import './header.css';
+
+/**
+ * Header
+ */
+export const Header = (props) => {
+
+    const caption = props.caption ? 'caption' : ''
+    const prominent = props.prominent ? 'prominent' : ''
+    const dense = props.dense ? 'dense' : ''
+    let theme = props.primary ? 'primary' : ''
+    theme = props.secondary ? 'secondary' : theme
+    let icon = props.icon ? <Icon icon={props.icon} clickable={props.clickable} action={props.action}/> : ''
+    icon = props.iconSrc ? <img className="header-icon" src={props.iconSrc} /> : icon;
+
+    const style = props.img ? { backgroundImage: `url(${props.img })` } : {}
+
+    const title=<Text>{props.title}</Text>
+    return (
+        <header className={`header ${caption} ${prominent} ${dense} ${theme} ${props.className}`} style={style}>
+            {icon}
+            {props.title ? <label>{title}</label> : null }
+            <span className="actions">{props.children}</span>
+        </header>
+    )
+}
+

package/src/html/icon.css

@@ -0,0 +1,53 @@
+.icon {
+    position: relative;
+    display: flex !important;
+    align-items: center;
+    justify-content: center;
+}
+
+.icon:before {
+    content: "";
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    display: block;
+    width: 0;
+    padding-top: 0;
+    border-radius: 100%;
+    background-color: rgba(236, 240, 241, 0.548);
+    -webkit-transform: translate(-50%, -50%);
+    -moz-transform: translate(-50%, -50%);
+    -ms-transform: translate(-50%, -50%);
+    -o-transform: translate(-50%, -50%);
+    transform: translate(-50%, -50%);
+  }
+  
+  .icon:active:before {
+    width: 120%;
+    padding-top: 120%;
+    transition: width .2s ease-out, padding-top .2s ease-out;
+  }
+
+.icon.clickable:hover {
+    background-color: rgba(100,100,100,.1);
+    cursor: pointer;
+    border-radius: 100%;
+}
+
+.icon.small {
+    width: 2rem;
+    height: 2rem;
+    font-size: 1.2rem;
+}
+
+.icon.normal {
+    width: 3rem;
+    height: 3rem;
+    font-size: 1.7rem;
+}
+
+.icon.large {
+    width: 4rem;
+    height: 4rem;
+    font-size: 2rem;
+}

package/src/html/icon.js

@@ -0,0 +1,21 @@
+import React from 'react'
+import './icon.css'
+
+/**
+ * Icon 
+ */
+export const Icon = ({ icon, size = "normal", clickable = false, action }) => {
+
+    function click (event) {
+        event.stopPropagation()
+        event.preventDefault();
+        if (action) action()
+    }
+
+    const clicker = clickable ? "clickable" : ""
+    return (
+        <i className={`icon ${size} ${clicker} material-icons`} onClick={click}>
+            {icon}
+        </i>
+    )
+}

package/src/html/index.js

@@ -0,0 +1,18 @@
+export { Button } from './button'
+export { CheckBox } from './checkbox'
+export { Chips, Chip } from './chip'
+export { Form } from './form'
+export { Header } from './header'
+export { Icon } from './icon'
+export { List } from './list'
+export { MenuIcon, Menu, MenuItem, MenuSeparator } from './menu'
+export { CircularProgress, LinearProgress } from './progress'
+export { Property } from './property'
+export { RadioButton } from './radio'
+export { Section } from './section'
+export { Tabs, Tab, Stack } from './tab'
+export { DataTable } from './table'
+export { Text } from './text'
+export { TextField, DropDown } from './textfield'
+export { TokenField } from './tokenfield'
+export { Tree, TreeNode, TreeItem } from './tree'

package/src/html/list.css

@@ -0,0 +1,72 @@
+.list {
+  flex: 1;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+.list>header {
+  padding: .5rem 0 0 1.5rem;
+  color: var(--text-color-light);
+  text-transform: capitalize;
+  font-size: .8rem;
+}
+
+.list > ul {
+  flex: 1;
+  overflow: auto;
+  list-style: none;
+  margin: 0;
+  padding: 0.5rem 0;
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+}
+
+.list > ul li {
+  flex: 1;
+  overflow: hidden;
+  min-height: 3rem;
+  padding: .3rem 0.5rem;
+  display: flex;
+  align-items: center;
+}
+
+.list > ul li:hover {
+  background-color: var(--primary-color-lighter);
+}
+
+.list > ul li > .icon {
+  color: var(--text-color-lighter);
+}
+
+.list > ul li > main {
+  flex: 1;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+.list > ul li > main  > * {
+  flex: 1;
+  padding: 0 1rem;
+  display: flex;
+  align-items: flex-end;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.list > ul li > main  > .primary-line {
+  font-size: 1rem;
+  color: var(--text-color);
+}
+
+.list > ul li > main  > .secondary-line {
+  font-size: .9rem;
+  color: var(--text-color-lighter);
+}
+
+.list > ul li > .meta {
+  
+}

package/src/html/list.js

@@ -0,0 +1,78 @@
+import { Fragment } from 'react'
+import { Icon } from './icon';
+import { Text } from './text';
+import "./list.css"
+
+/**
+ * List
+ */
+export const List = (props) => {
+
+    const { items = [], children, onSelect, groupBy } = props
+
+    function select(id) {
+        if (onSelect) onSelect(id)
+    }
+
+    return groupBy ? <GroupedList {...props} onSelect={select} /> : (
+        <div className="list">
+            <ul>
+                {items.map(item => <ListItem key={item.id} item={item} onSelect={select} />)}
+            </ul>
+            {children}
+        </div>
+    )
+}
+
+/**
+ * Grouped List
+ */
+const GroupedList = (props) => {
+    const { items = [], children, onSelect, groupBy } = props
+
+    const groups = items.reduce((groups, item) => {
+        let group = groups.find(g => g.name === item.content[groupBy])
+        if (!group) {
+            group = { name: item.content[groupBy], items: []}
+            groups.push(group)
+        } 
+        group.items.push(item)
+        return groups
+    }, [])
+
+    return (
+        <div className="list">
+            {groups.map(group => (
+                <Fragment key={group.name}>
+                    <header key={`${group.name}-header`}><Text>{group.name}</Text></header>
+                    <ul key={`${group.name}-ul`}>
+                        {group.items.map(item => <ListItem key={item.id} item={item} onSelect={onSelect} />)}
+                    </ul>
+                </Fragment>
+            ))}
+            {children}
+        </div>
+    )
+}
+
+/**
+ * List Item
+ */
+const ListItem = ({ item, onSelect }) => {
+    const { id, icon, line1, line2, meta } = item
+
+    function select() {
+        if (onSelect) onSelect(id)
+    }
+
+    return (
+        <li id={id} onClick={select}>
+            {icon ? <Icon icon={icon} size="small" /> : null}
+            <main>
+                <div className="primary-line"><Text>{line1}</Text></div>
+                {line2 ? <div className="secondary-line"><Text>{line2}</Text></div> : null}
+            </main>
+            {meta ? <div className="meta">{meta}</div> : null}
+        </li>
+    )
+}

package/src/html/menu.css

@@ -0,0 +1,76 @@
+.menu-icon {
+    position: relative;
+    width: 3rem;
+}
+
+.menu-icon>.overlay {
+  position: fixed;
+  top: 0px;
+  left: 0px;
+  width: 100vw;
+  height: 100vh;
+  z-index: 5;
+  background-color: transparent;
+}
+
+.menu-icon>menu {
+    z-index: 6;
+    position: absolute;
+    top: 3rem;
+    left: 0px;
+    margin: 0;
+    border: solid 1px var(--divider-color);
+    background-color: var(--paper-color);
+    padding: 0;
+    min-width: 7rem;
+    max-width: 14rem;
+    max-height: 50vh;
+    overflow: auto;
+    box-shadow: var(--shadow1);
+}
+
+.menu-icon>menu.alignRight {
+    left:unset;
+    right: 0px;
+  }
+
+.menu-icon>menu ul {
+    list-style: none;
+    margin: 0;
+    padding: .5rem 0;
+    cursor: pointer;
+  }
+  
+  .menu-icon>menu li {
+    min-height: 3rem;
+    padding: 0 .5rem;
+    
+    display: flex;
+    align-items: center;
+  }
+  
+  .menu-icon>menu li:hover {
+    background-color: var(--primary-color-lighter);
+  }
+
+  .menu-item {
+      flex: 1;
+      display: flex;
+      align-items: center;
+  }
+
+  .menu-item>.icon {
+      color: var(--text-color-light)
+  }
+
+  .menu-item>label {
+      flex: 1;
+      white-space: nowrap;
+      padding: 0 .5rem 0 0;
+      color: var(--text-color);
+      font-size: .9rem;
+  }
+
+  .menu-item>.meta {
+    color: var(--text-color-lighter)
+}