ywana-core8 0.0.1

package/src/html/textfield-outlined.css

@@ -0,0 +1,52 @@
+.textfield-outlined {
+  flex: 1;
+  position: relative;
+  padding-top: 1.5rem;
+  border-radius: 5px;
+  display: flex;
+  max-height: 3.5rem;
+  min-height: 3.5rem;
+}
+
+.textfield-outlined.no-label {
+  padding-top: .5rem;
+  margin-bottom: .5rem;
+}
+
+.textfield-outlined > input {
+  flex: 1;
+  padding: 10px 10px 10px 0.5rem;
+  display: block;
+  border: none;
+  border: 1px solid var(--divider-color);
+  overflow: hidden;
+}
+
+.textfield-outlined > input:focus {
+  outline: none;
+}
+
+.textfield-outlined > label {
+  color: var(--primary-color);
+  font-size: 1rem;
+  font-weight: normal;
+  position: absolute;
+  pointer-events: none;
+  left: 0.4rem;
+  top: 2rem;
+  transition: 0.2s ease all;
+  -moz-transition: 0.2s ease all;
+  -webkit-transition: 0.2s ease all;
+}
+
+/* active state */
+.textfield-outlined > input:focus ~ label,
+.textfield-outlined > input:valid ~ label {
+  top: 0.3rem;
+  font-size: .9rem;
+  color: var(--primary-color);
+}
+
+.textfield-outlined > .bar {
+  display: none;
+}

package/src/html/textfield.css

@@ -0,0 +1,130 @@
+.textfield {
+  flex: 1;
+  position: relative;
+  padding-top: 1.5rem;
+  overflow: hidden;
+  display: flex;
+  max-height: 3.5rem;
+  min-height: 3.5;
+}
+
+.textfield.no-label {
+  padding-top: .5rem;
+  padding-bottom: .5rem;
+}
+
+.textfield > input {
+  flex: 1;
+  padding: 10px 10px 10px .5rem;
+  display: block;
+  border: none;
+  border-bottom: 1px solid var(--divider-color);
+  overflow: hidden;
+  font-size: 1rem;
+}
+
+.textfield > input:focus {
+  outline: none;
+}
+
+.textfield > label {
+  color: var(--primary-color);
+  font-size: .9rem;
+  font-weight: normal;
+  position: absolute;
+  pointer-events: none;
+  left: .4rem;
+  top: 2rem;
+  transition: 0.2s ease all;
+  -moz-transition: 0.2s ease all;
+  -webkit-transition: 0.2s ease all;
+}
+
+input:read-only {
+  background-color: rgba(200,200,200,.1);
+  border: 0px !important;
+}
+
+/* active state */
+input:read-only ~ label,
+.textfield > input:focus ~ label,
+.textfield > input:valid ~ label {
+  top: .3rem;
+  font-size: .8rem;
+  color: var(--primary-color);
+}
+
+.textfield > .bar {
+  position: relative;
+  display: block;
+}
+
+.textfield > .bar:before,
+.textfield > .bar:after {
+  content: "";
+  height: 2px;
+  width: 0;
+  bottom: 1px;
+  position: absolute;
+  background: #5264ae;
+  transition: 0.2s ease all;
+  -moz-transition: 0.2s ease all;
+  -webkit-transition: 0.2s ease all;
+}
+
+.textfield > .bar:before {
+  left: 50%;
+}
+
+.textfield > .bar:after {
+  right: 50%;
+}
+
+/* active state */
+.textfield > input:focus ~ .bar:before,
+.textfield > input:focus ~ .bar:after {
+  width: 50%;
+}
+
+.dropdown {
+  position: relative;
+}
+
+.dropdown>.icon {
+  position: absolute;
+  top: 1.7rem;
+  right: .2rem;
+}
+
+.dropdown>menu {
+  z-index: 2;
+  position: absolute;
+  top: 3.8rem;
+  left: 0px;
+  right: 0px;
+  margin: 0;
+  border: solid 1px var(--divider-color);
+  background-color: var(--paper-color);
+  padding: 0;
+  max-height: 20rem;
+  overflow: auto;
+}
+
+.dropdown>menu ul {
+  list-style: none;
+  margin: 0;
+  padding: .5rem 0;
+  cursor: pointer;
+}
+
+.dropdown>menu li {
+  min-height: 2rem;
+  padding: 0 .5rem;
+  display: flex;
+  align-items: center;
+  font-size: .9rem;
+}
+
+.dropdown>menu li:hover {
+  background-color: var(--primary-color-lighter);
+}

package/src/html/textfield.js

@@ -0,0 +1,99 @@
+import React, { useContext, useEffect, useState } from 'react'
+import { SiteContext } from '../site/siteContext'
+import { Icon } from './icon'
+import { Text } from './text'
+import './textfield-outlined.css'
+import './textfield.css'
+
+/**
+ * Text Field
+ */
+export const TextField = (props) => {
+
+    const site = useContext(SiteContext)
+    const { id, type = 'text', label, placeholder, value, outlined, readOnly=false, onChange, onEnter, onClick } = props
+
+    function onKeyPress(event) {
+        var key = event.charCode ? event.charCode : event.keyCode ? event.keyCode : 0;
+        if (key == 13) {
+            onEnter()
+        }
+    }
+
+    function change(event) {
+        event.stopPropagation()
+        event.preventDefault()
+        const value = event.target.value
+        if (onChange) onChange(id, value)
+    }
+
+    function focus() {
+        if (site) {
+            site.changeFocus({ lose: () => {
+                // DO NOTHING
+            }})
+        }
+    }
+
+    const borderStyle = outlined ? "textfield-outlined" : "textfield"
+    const labelStyle = label ? "" : "no-label"
+    const style = `${labelStyle} ${borderStyle}`
+    const labelTxt = <Text>{label}</Text>
+    return (
+        <div className={`${style}`} onClick={onClick}>
+            <input id={id} type={type} placeholder={placeholder} value={value} required onChange={change} onKeyDown={onKeyPress} onFocus={focus} readOnly={readOnly}/>
+            <span className="bar"></span>
+            { label ? <label>{labelTxt}</label> : null }
+        </div>
+    )
+}
+
+/**
+ * Dropdown
+ */
+export const DropDown = (props) => {
+
+    const site = useContext(SiteContext)
+    const { id, options = [], value, onChange } = props
+    const [open, setOpen] = useState(false)
+    const [label, setLabel] = useState()
+
+    useEffect(() => {
+        if (Array.isArray(options)) {
+            const option = options.find(option => option.value === value)
+            if (option) setLabel(option.label)
+        }
+    }, [value])
+
+
+    function toggle() {
+        if (site) {
+            site.changeFocus({ lose: () => {
+                setOpen(false) 
+            }})
+        } 
+        setOpen(!open)
+    }
+
+    function select(event) {
+        const next = event.target.getAttribute("value")
+        const option = options.find(option => option.value === next)
+        if (onChange) onChange(id, next)
+        setLabel(option.label)
+        setOpen(false)
+    }
+
+    return (
+        <div className="dropdown">
+            <TextField {...props} onClick={toggle} value={label} />
+            <Icon icon="expand_more" clickable size="small" action={toggle} />
+            {open == true ? (
+                <menu>
+                    <ul onClick={select}>
+                        {Array.isArray(options) ? options.map(option => <li key={option.value} value={option.value}>{option.label}</li>) : null}
+                    </ul>
+                </menu>
+            ) : null}
+        </div>
+    )
+}

package/src/html/tokenfield.css

@@ -0,0 +1,51 @@
+.tokenField {
+    position: relative;
+    border: solid 1px var(--divider-color);
+    display: flex;
+    align-items: center;
+    border-radius: .3rem;
+    padding: 1rem;
+    margin: 1rem 0;
+    display: flex;
+    flex-wrap: wrap;
+}
+
+.tokenField>label {
+    position: absolute;
+    top:-9px;
+    padding: 2px 6px 2px 4px;
+    font-size: .8rem;
+    background-color: var(--paper-color);
+    color: var(--text-color-light)
+}
+
+.tokenField input {
+    border: 0px;
+    padding: .5rem 0;
+    font-size: 1rem;
+    flex: 1;
+    min-width: 3rem;
+}
+
+.token {
+    display: flex;
+    border: solid 1px var(--divider-color);
+    background-color: rgba(200,200,200,.1);
+    align-items: center;
+    padding: .2rem .2rem .2rem .4rem;
+    border-radius: .3rem !important;
+    margin: .2rem;
+    max-height: 2rem;
+}
+
+.token > div {
+    white-space: nowrap;
+}
+
+.token button {
+    width: 2rem;
+    height: 1.6rem;
+    font-size: .8rem !important;
+    padding: 0 !important;
+    margin-left: .2rem;
+}

package/src/html/tokenfield.js

@@ -0,0 +1,74 @@
+import React, { useEffect, useRef, useState } from 'react'
+import { Icon } from './icon';
+import { Text } from './text';
+import './tokenfield.css'
+
+/**
+ * Token Field
+ */
+export const TokenField = ({ id, label, init, onChange }) => {
+  const mounted = useRef(false)
+  const [value, setValue] = useState()
+  const [tokens, setTokens] = useState(init)
+
+  useEffect(() => {
+    if (mounted.current) {
+      if (onChange) {
+        if (tokens) onChange(id, tokens)
+      }
+    } else {
+      mounted.current = true
+    }
+  }, [tokens])
+
+  function remove(index) {
+    const next = tokens.slice()
+    next.splice(index, 1)
+    setTokens(next)
+  }
+
+  function change(event) {
+    const value = event.target.value
+    setValue(value)
+  }
+
+  function onEnter(event) {
+    if (event.key === 'Enter') {
+      event.preventDefault()
+      event.stopPropagation()
+      const token = event.target.value
+      const next = tokens.concat(token)
+      setTokens(next)
+      setValue('')
+    }
+
+    if (value === '' && tokens.length> 0 && event.key === 'Backspace') {
+      const next = tokens.slice(0, -1)
+      setTokens(next)
+    }
+  }
+
+  return (
+    <div className='tokenField'>
+      <label>{label}</label>
+      {tokens.map((text, index) => (
+        <Token text={text} onDelete={() => remove(index)} />
+      ))}
+      <input type='text' value={value} onChange={change} onKeyDown={onEnter} />
+    </div>
+  )
+}
+
+/**
+ * Token
+ */
+const Token = ({ text, onDelete }) => {
+  return (
+    <div className='token'>
+      <Text use='caption' tag='div'>
+        {text}
+      </Text>
+      <Icon icon='close' clickable action={onDelete} size="small"/>
+    </div>
+  )
+}

package/src/html/tree.css

@@ -0,0 +1,63 @@
+.tree {
+    padding: .5rem 0;
+}
+
+.tree-node {
+    margin: 0;
+    padding: 0;
+    padding-left: 1rem;
+}
+
+.tree-item{
+    margin: 0;
+    padding: .5rem 0;
+    display: flex;
+    align-items: center;
+    font: 1rem;
+    color: rgba(0,0,0,.7);
+}
+
+.tree-item:hover {
+    cursor: pointer;
+    background-color: rgba(200,200,200,.7);
+    font-weight: 500;
+} 
+
+.tree-item.final {
+    margin-left: 1rem;
+    padding-left: 1rem;
+}
+
+.tree-item>i {
+    padding-left: .3rem;
+}
+
+.tree-item>.label {
+    padding-left: .8rem;
+    width: 100%;
+}
+
+.tree-item>.actions {
+    padding: 0 .5rem;
+    color: var(--text-color-lighter);
+}
+
+.tree-item>.actions .rmwc-icon {
+    padding: 0;
+    font-size: 1rem;
+    width: 2rem;
+    height: 2rem;
+}
+
+.tree-node>summary::before {
+    content: "\25B6";
+    color: black;
+    display: inline-block;
+    margin-right: 6px;
+    font-size: 10px;
+    color: rgba(0,0,0,.3);
+}
+
+details[open].tree-node>summary::before {
+	transform: rotate(90deg)
+}

package/src/html/tree.js

@@ -0,0 +1,49 @@
+import React from 'react'
+import { Icon } from './icon'
+import './tree.css'
+
+/**
+ * Tree
+ */
+export const Tree = ({ nodes = [], children }) => {
+    return (
+        <div className="tree">
+            {nodes}
+            {children}
+        </div>
+    )
+}
+
+/**
+ * Tree Node
+ */
+export const TreeNode = ({ icon = 'folder', label, tooltip, open=false, children, actions }) => {
+    return (
+        <details className="tree-node" open={open}>
+            <summary className="tree-item">
+                { icon ? <Icon icon={icon} size="small" small /> : null }
+                <div className="label">{label}</div>
+                <div className="actions">{actions}</div>
+            </summary>
+            {children}
+        </details>
+    )
+}
+
+/**
+ * Tree Item
+ */
+export const TreeItem = ({ id, icon = 'description', label, actions, onSelect }) => {
+
+    function select() {
+        if (onSelect) onSelect(id)
+    }
+
+    return (
+        <div className="tree-item final" onClick={select}>
+            <Icon icon={icon} size="small" small />
+            <div className="label">{label}</div>
+            <div className="actions">{actions}</div>
+        </div>
+    )
+} 

package/src/http/client.js

@@ -0,0 +1,62 @@
+async function fetchAsync(method, URL, body = null, token) {
+
+  console.log('FETCH', method, URL)
+
+  const request = {
+    method,
+    mode: 'cors',
+    headers: {
+      "Accept": "application/json",
+      "Content-Type": "application/json",
+      "x-access-token": token
+    },
+    body
+  }
+
+  try {
+    var response = await fetch(URL, request);
+    if (response.ok) {
+      const json = await response.json();
+      return json
+    }
+    throw response
+  } catch (error) {
+    if (error instanceof Error) { throw { error }}
+    const json = await error.json()
+    throw {
+      success: false,
+      message: json.message
+    }
+  }
+}
+
+
+export const HTTPClient = (domain, securityCtx) => {
+  return {
+
+    GET: (URL) => {
+      const token = securityCtx ? securityCtx.token() : null;
+      return fetchAsync('GET', domain + URL, undefined, token);
+    },
+
+    POST: (URL, body) => {
+      const token = securityCtx ? securityCtx.token() : null;
+      return fetchAsync('POST', domain + URL, body, token);
+    },
+
+    PUT: (URL, body) => {
+      const token = securityCtx ? securityCtx.token() : null;
+      return fetchAsync('PUT', domain + URL, body, token);
+    },
+
+    PATCH: (URL, body) => {
+      const token = securityCtx ? securityCtx.token() : null;
+      return fetchAsync('PATCH', domain + URL, body, token);
+    },
+
+    DELETE: (URL) => {
+      const token = securityCtx ? securityCtx.token() : null;
+      return fetchAsync('DELETE', domain + URL, undefined, token);
+    }
+  }
+}

package/src/http/index.js

@@ -0,0 +1,2 @@
+export { HTTPClient } from './client'
+export { Session } from './session'

package/src/http/session.js

@@ -0,0 +1,39 @@
+/**
+ * Session store
+ * implements securityCtx methods
+ */
+
+const SESSION_NAME = process.env.REACT_APP_SESSION || window && window.SESSION ? window.SESSION : 'YWANA-CORE6-SESSION';
+
+export const Session = {
+
+  token() {
+    const item = sessionStorage.getItem(SESSION_NAME);
+    const json = item ? JSON.parse(sessionStorage.getItem(SESSION_NAME)) : {};
+    return json.token;
+  },
+
+  me() {
+    const item = sessionStorage.getItem(SESSION_NAME);
+    const json = item ? JSON.parse(sessionStorage.getItem(SESSION_NAME)) : {};
+    return json.me;
+  },
+
+  init(token, me) {
+    sessionStorage.setItem(SESSION_NAME, JSON.stringify({ token, me }));
+  },
+
+  refresh(token) {
+    const me = this.me();
+    sessionStorage.setItem(SESSION_NAME, JSON.stringify({ token, me }));
+  },
+
+  isLoggedIn() {
+    return !!sessionStorage.DSSession;
+  },
+
+  logout() {
+    sessionStorage.removeItem(SESSION_NAME);
+  },
+
+}

package/src/index.js

@@ -0,0 +1,9 @@
+import 'material-design-icons-iconfont/dist/material-design-icons.css'
+
+export * from './http'
+export * from './html'
+export * from './widgets'
+export * from './site'
+export * from './domain'
+
+export const isFunction = value => value && (Object.prototype.toString.call(value) === "[object Function]" || "function" === typeof value || value instanceof Function);

package/src/site/details.css

@@ -0,0 +1,58 @@
+
+.page6>details {
+    position: absolute;
+    bottom: 0px;
+    left: 0px;
+    right: 0px;
+    margin: auto;
+    min-width: 30rem;
+    width: 100vw;
+    max-width: 50rem;
+    min-height: 3rem;
+    background-color: var(--paper-color);
+    border-radius: 5px 5px 0 0;
+    overflow: hidden;
+    box-shadow: var(--shadow-top);
+}
+
+.page6>details>summary {
+    display: flex;
+    align-items: center;
+    min-height: 3rem;
+}
+
+summary {
+    /* list-style-type: none; /* Firefox */
+    padding: 0 0 0 1rem;
+}
+  
+summary::-webkit-details-marker {
+    display: none; /* Chrome */
+}
+
+details[open] main {
+	animation-name: invisiblyGrowFontSize, fadeIn;
+    animation-duration: 500ms, 200ms;
+    animation-delay: 0ms, 500ms;
+}
+  
+/* add wrapper, continue with font-size */
+@keyframes invisiblyGrowFontSize {
+	0% {
+        font-size: 0;
+        opacity: 0;
+	}
+	100% {
+        font-size: 1em;
+        opacity: 0;
+	}
+}
+
+@keyframes fadeIn {
+    0% {
+        opacity: 0;
+    }
+	100% {
+		opacity: 1;
+	}
+}