ywana-core8 0.0.1

package/src/upload/UploadDialog.js

@@ -0,0 +1,41 @@
+import React, { Fragment, useContext, useState } from 'react';
+import { Uploader } from './uploader'
+import { Button, Text } from '../html';
+import { SiteContext, Dialog } from '../site';
+import { UploadFile } from './UploadFile';
+
+/**
+ * Upload Dialog
+ */
+export const UploadDialog = ({ label, target, accept, onSuccess, onOK, onError, onClose, onActionClose = true }) => {
+
+    const site = useContext(SiteContext);
+    const [file, setFile] = useState();
+    const [errors, setErrors] = useState([])
+
+    function onComplete(uploads) {
+        setFile(uploads[0]);
+        if (onSuccess) onSuccess(uploads[0])
+    }
+
+    function onAction(action) {
+        if (action === 'CLOSE' || onActionClose === true) {
+            site.closeDialog();
+            onClose()
+        }
+    }
+
+    const actions = (
+        <Fragment>
+            <Button label="CLOSE" action={() => onAction("CLOSE")} />
+        </Fragment>
+    )
+
+    const title = <Text use="headline6">{label}</Text>
+    return (
+        <Dialog title={title} open={true} onAction={onAction} actions={actions}>
+            {file ? <UploadFile file={file} /> : <Uploader label={label} accept={accept} target={target} onComplete={onComplete} />}
+            {errors.map(error => <Text use="overline" tag="div" className="error">{error}</Text>)}
+        </Dialog>
+    )
+}

package/src/upload/UploadFile.js

@@ -0,0 +1,31 @@
+import React, { Fragment } from 'react'
+import { Icon, Text } from 'ywana-core7'
+import { LinearProgress } from 'rmwc'
+import './uploader.css'
+import '@rmwc/linear-progress/styles';
+
+/**
+ * Upload File
+ */
+export const UploadFile = ({ file, state, progress, error }) => {
+
+    const STATES = { 'IDLE': 0, 'RUNNING': 1, 'SUCCESS': 2, 'ERROR': 3 }
+
+    const icon = error ?  <Icon icon="image" className="error"/> :  <Icon icon="image" />
+    return state !== STATES.IDLE ? (
+        <Fragment>
+
+            <div className="upload-file">
+                {icon}
+                <Text use="body1" tag="label">{file.fileName}</Text>
+                {state === STATES.RUNNING ? <LinearProgress progress={progress} /> : ''}
+                {state === STATES.RUNNING ? <Icon icon="close" clickable /> : ''}
+                {state === STATES.SUCCESS ? <Icon icon="done" /> : ''}
+                {state === STATES.ERROR ? <Icon icon="error" /> : ''}
+            </div>
+
+            { error ? <div className="error"><Text use="overline">{error}</Text></div> : ''}
+
+        </Fragment>
+    ) : ''
+}

package/src/upload/index.js

@@ -0,0 +1 @@
+export * from './uploader'

package/src/upload/uploader.css

@@ -0,0 +1,57 @@
+.uploader {
+    display: flex;
+    flex-direction: column;
+}
+
+.demo-uploader {
+    width: 40rem;
+    height: 30rem;
+    margin: 5rem auto;
+    flex-direction: column;
+}
+
+/***************** Upload Area ***********************/
+
+.upload-area6 {
+    flex: 1;
+    margin: 0 0 1rem 0;
+    border: dashed 2px var(--divider-color);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    border-radius: 1rem;
+    min-height: 10rem;
+  }
+  
+  .upload-area6>label {
+    font-size: 1.1rem;
+    font-weight: 500;
+  }
+  
+  .upload-area6.drag-over {
+    background-color: rgba(200,200,200,.1);
+  }
+
+  /***************** Upload File ***********************/
+
+.upload-file {
+    display: flex;
+    align-items: center;
+    min-height: 4rem;
+    padding: 0 1rem;
+}
+
+.upload-file>label {
+    padding: 0 1rem;
+    min-width: 40%;
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.error {
+  color: red;
+  text-align: center
+}

package/src/upload/uploader.js

@@ -0,0 +1,69 @@
+import React, { useState, useMemo } from 'react'
+import ResumableJS from 'resumablejs'
+import { UploadArea } from './UploadArea'
+import { UploadFile } from './UploadFile'
+import './uploader.css'
+
+/**
+ * Uploader
+ */
+export const Uploader = ({ label, target, accept, className, onSuccess, onError, onComplete, errors = [] }) => {
+
+    const STATES = { 'IDLE': 0, 'RUNNING': 1, 'SUCCESS': 2, 'ERROR': 3, 'COMPLETED': 4 }
+
+    const resumable = useMemo(() => {
+        const config = {
+            target: target,
+            chunkSize: 1 * 1024 * 1024,
+            simultaneousUploads: 1,
+            testChunks: false,
+            throttleProgressCallbacks: 1,
+            fileType: accept
+        }
+        const resumable = new ResumableJS(config)
+        resumable.on('fileAdded', onFileAdded)
+        resumable.on('fileProgress', onFileProgress)
+        resumable.on('fileSuccess', onFileSuccess)
+        resumable.on('fileError', onFileError)
+        resumable.on('complete', onAllComplete)
+        return resumable
+    }, [])
+
+    const [progress, setProgress] = useState(0)
+    const [state, setState] = useState(STATES.IDLE)
+    const [error, setError] = useState()
+    const [files, setFiles] = useState([])
+
+    function onFileAdded(file) {
+        files.push(file)
+        setFiles(files)
+        resumable.upload()
+    }
+
+    function onFileProgress(file) {
+        const progress = file.progress()
+        setProgress(progress)
+    }
+
+    function onFileSuccess(file, message) {
+        setState(STATES.SUCCESS)
+        if (onSuccess) onSuccess(file, message)
+    }
+
+    function onFileError(file, message) {
+        setError(message)
+        setState(STATES.ERROR)
+        if (onError) onError(file, message)
+    }
+
+    function onAllComplete() {
+        setState(STATES.IDLE)
+        if (onComplete) onComplete(files)
+    }
+
+    return (
+        <div className={`uploader ${className}`}>
+            <UploadArea resumable={resumable} state={state} label={label} error={error}/>
+        </div>
+    )
+}

package/src/widgets/index.js

@@ -0,0 +1,4 @@
+export * from './login/LoginBox'
+export * from './login/ResetPasswordBox'
+export * from './viewer/Viewer'
+export * from './kanban/Kanban'

package/src/widgets/kanban/Kanban.css

@@ -0,0 +1,80 @@
+.kanban {
+    display: flex;
+    min-height: 30rem;
+    background-color: var(--background-color);
+    overflow-x: auto;
+    max-height: 90vh;
+    border-top: solid 1px var(--divider-color);
+    border-left: solid 1px var(--divider-color);
+    border-bottom: solid 1px var(--divider-color);
+}
+
+.kanban-column {
+    flex: 1;
+    min-width: 20rem;
+    display: flex;
+    flex-direction: column;
+    border-right: solid 1px var(--divider-color);
+}
+
+.kanban-column.disabled {
+    pointer-events: none;
+    opacity: 0.7;
+}
+
+.kanban-column.dragOver {
+    background-color: rgba(100,100,100,.1);
+}
+
+.kanban-column.min {
+    flex: 0;
+    min-width: 4rem;
+}
+
+.kanban-column>header {
+    height: 5rem;
+    border-bottom: solid 1px var(--divider-color);
+    display: flex;
+    align-items: flex-start;
+    padding: 1rem;
+}
+
+.kanban-column>header>.title {
+    padding: 0 1rem;
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+}
+
+.kanban-column>header>i, .kanban-column>footer>button {
+    color: rgba(100, 100, 100, .6);
+}
+
+.kanban-column>main {
+    flex: 1;
+    overflow: auto;
+}
+
+.kanban-column.min>main {
+    min-height: 10rem;
+    padding: 1rem;
+    -webkit-writing-mode: vertical-rl;
+    writing-mode: vertical-rl;
+    color: var(--primary-color-light);
+}
+
+.kanban-card {
+    margin: 2rem;
+    box-shadow: var(--shadow1);
+    background-color: var(--paper-color);
+    border-radius: 5px;
+    min-height: 10rem;
+}
+
+.kanban-card.red {
+    border-left: solid 5px red;
+}
+
+.secondary-text {
+    color: rgba(100, 100, 100, .8);
+}

package/src/widgets/kanban/Kanban.js

@@ -0,0 +1,65 @@
+import React, { useState } from 'react'
+import { Icon, Text } from '../../html'
+import './Kanban.css'
+
+/**
+ * Kanban
+ */
+export const Kanban = ({ children }) => {
+    return (
+        <div className="kanban">
+            {children}
+        </div>
+    )
+}
+
+/**
+ * Kanban Column
+ */
+export const KanbanColumn = ({ id, accept = [], icon, title, subtitle, badge, children, minified = false, disabled = false }) => {
+
+    const [min, setMin] = useState(minified)
+
+    function toggle() {
+        setMin(!min)
+    }
+
+    return min ? (
+        <div className={`kanban-column ${id} min`}>
+            <main>
+                {title}
+            </main>
+            <footer>
+                <Icon icon="toggle_off" onIcon="toggle_on" clickable action={toggle} />
+            </footer>
+        </div>
+    ) : (
+        <div className={`kanban-column ${id} ${disabled ? 'disabled' : ''}`}>
+            <header>
+                <Icon icon={icon} />
+                <div className="title">
+                    <Text use="headline6">{title}</Text>
+                    <Text className="secondary-text" use="body2">{subtitle}</Text>
+                </div>
+                <div className="badge" >{badge}</div>
+            </header>
+            <main>
+                {children}
+            </main>
+            <footer>
+                <Icon icon="toggle_off" onIcon="toggle_on" clickable action={toggle} />
+            </footer>
+        </div>
+    )
+}
+
+/**
+ * Kanban Card
+ */
+export const KanbanCard = ({ id, type, color, children }) => {
+    return (
+        <div className={`kanban-card ${color}`} >
+            {children}
+        </div>
+    )
+}

package/src/widgets/login/LoginBox.css

@@ -0,0 +1,89 @@
+.login-box {
+  background-color: var(--paper-color);
+  display: grid;
+  grid-template-areas:
+    "header header"
+    "main main"
+    "footer footer";
+}
+
+.login-box > header {
+  grid-area: header;
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  justify-content: space-around;
+  align-items: center;
+  padding: 1rem;
+}
+
+.login-box > header > img {
+  max-width: 90%;
+}
+
+.login-box > header > .title {
+  font-size: 2rem;
+  font-weight: 600;
+}
+
+.login-box > main {
+  grid-area: main;
+  padding: 1rem 1rem 0 1rem;
+  display: flex;
+  flex-direction: column;
+}
+
+.login-box .message {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding-top: 1rem;
+  color: var(--danger-color-light);
+  font-weight: 500;
+}
+
+.load-box {
+  color: var(--primary-color-text);
+  background-color: var(--primary-color);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.load-box .icon {
+  animation: rotation 2s infinite linear;
+}
+
+@keyframes rotation-counterclock {
+    from {
+      transform: rotate(359deg);
+    }
+    to {
+      transform: rotate(0deg);
+    }
+  }
+
+@keyframes rotation {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(359deg);
+  }
+}
+
+.login-box > footer {
+  grid-area: footer;
+  padding: 1rem;
+  display: flex;
+  flex-direction: column;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}

package/src/widgets/login/LoginBox.js

@@ -0,0 +1,66 @@
+import React, { useState } from 'react'
+import { Icon , Button, Text, TextField } from '../../html'
+import './LoginBox.css'
+
+/**
+ * Login Box
+ */
+export const LoginBox = ({
+    logo, title,
+    userLabel = "User",
+    passwordLabel = "Password",
+    loginLabel = "Log In", onOK,
+    forgotLabel = "Forgot Password ?", onForgot,
+    message,
+    loading
+}) => {
+
+    const [user, setUser] = useState('')
+    const [password, setPassword] = useState('')
+
+    function canOK() {
+        return user && user.length > 0 && password && password.length > 0
+    }
+
+    function ok(forcedPwd) {
+        if (onOK && canOK()) onOK(user, forcedPwd || password)
+    }
+
+    function canForgot() {
+        return user && user.length > 0
+    }
+
+    function forgot() {
+        if (onForgot) onForgot(user)
+    }
+
+    function tx(txt) {
+        return <Text>{txt}</Text>
+    }
+
+    function changeUser(id, value) {
+        setUser(value)
+    }
+    
+    function changePassword(id, value) {
+        setPassword(value)
+    }
+
+    return (
+        <div className="login-box">
+            <header>
+                {logo ? <img src={logo} /> : ''}
+                <div className="title"><Text>{title}</Text></div>
+            </header>
+            <main>
+                <TextField label={tx(userLabel)} value={user} onChange={changeUser} onEnter={ok} outlined />
+                <TextField label={tx(passwordLabel)} value={password} onChange={changePassword} onEnter={ok} type="password" outlined />
+            </main>
+            <footer>
+                { onForgot ? <Button label={tx(forgotLabel)} action={forgot} disabled={!canForgot()}/> : null }
+                { loading ? <div className="load-box"><Icon icon="refresh" /></div> : <Button label={tx(loginLabel)} action={ok} disabled={!canOK()} raised /> }
+                { message ? <div className="message"><Text>{message}</Text></div> : null}
+            </footer>
+        </div>
+    )
+}

package/src/widgets/login/ResetPasswordBox.css

@@ -0,0 +1,50 @@
+.reset-password-box {
+    background-color: var(--paper-color);
+    display: grid;
+    grid-template-areas: "header header" "main main" "footer footer";
+    animation: fadeIn 2s;
+    padding: .5rem;
+}
+
+.reset-password-box>header {
+    grid-area: header;
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    justify-content: space-around;
+    align-items: center;
+}
+
+.reset-password-box>main {
+    grid-area: main;
+    display: flex;
+    flex-direction: column;
+}
+
+.reset-password-box>main>label {
+    margin: 1rem 0 0 0;
+}
+
+.reset-password-box .error {
+    font-weight: 600;
+    color: red;
+    padding: 1rem;
+    text-align: center;
+}
+
+.reset-password-box>footer {
+    grid-area: footer;
+    margin-top: .5rem;
+    display: flex;
+    justify-content: space-between;
+}
+
+.reset-password-box>footer>button {
+    min-width: 6rem;
+    max-height: 3rem;
+}
+
+@keyframes fadeIn {
+    from { opacity: 0; }
+    to   { opacity: 1; }
+}

package/src/widgets/login/ResetPasswordBox.js

@@ -0,0 +1,56 @@
+import React, { useEffect, useState } from 'react'
+import { TextField, Text, Button } from '../../html'
+import './ResetPasswordBox.css'
+
+/**
+ * Reset Password
+ */
+export const ResetPasswordBox = ({ logo, title, children, onOK, onClose }) => {
+
+    const [form, setForm ] = useState({})
+    const [error, setError] = useState()
+
+    function canOK() {
+        return form.password1 && form.password2
+    }
+
+    function changeField(id, value) {
+        const next = Object.assign({}, form, {[id]: value})
+        setForm(next)
+    }
+
+    function ok() {
+        if (onOK && canOK()) {
+            if (form.password1 === form.password2 ) {
+                setError(null)
+                onOK(form)
+            } else {
+                setError("New Password and Confirm New Password do not match")
+            }
+        }
+    }
+
+    function close() {
+        if (onClose) onClose()
+    }
+
+    return (
+        <div className="reset-password-box">
+            <header>
+                {logo ? <img src={logo} /> : null}
+                {title ? <div className="title"><Text>{title}</Text></div> : null}
+                { children }
+            </header>
+            <main>
+                <Text use="headline6">Change Password</Text>
+                <TextField id="password1" outlined icon="lock" type="password" label="New Password" lapse={100} onChange={changeField} onEnter={ok}/>
+                <TextField id="password2" outlined icon="lock" type="password" label="Confirm New Password" lapse={100} onChange={changeField} onEnter={ok}/>
+                { error ? <div className="error">{error}</div> : null}
+            </main>
+            <footer>
+                <Button label="Close" action={close}/>
+                <Button label="OK" raised disabled={!canOK()} action={ok}/>
+            </footer>
+        </div>
+    )
+}

package/src/widgets/viewer/Viewer.css

@@ -0,0 +1,87 @@
+.viewer {
+    width: 100vw;
+    height: 100vh;
+    background-color: rgba(0, 0, 0, .75);
+    display: grid;
+    grid-template-columns: 1fr auto;
+    grid-template-rows: 4rem 1fr;
+    grid-template-areas: "header aside" "main aside";
+    color: #FFF;
+}
+
+.viewer>header {
+    grid-area: header;
+    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.65) 0%, transparent 100%);
+    background-image: linear-gradient(rgba(0, 0, 0, 0.65) 0%, transparent 100%);
+    background-position-x: initial;
+    background-position-y: initial;
+    background-size: initial;
+    background-repeat-x: initial;
+    background-repeat-y: initial;
+    background-attachment: initial;
+    background-origin: initial;
+    background-clip: initial;
+    background-color: initial;
+}
+
+.viewer>main {
+    grid-area: main;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    overflow: auto;
+}
+
+.viewer>main>.resizer {
+    width: 100%;
+    overflow: hidden;
+    position: relative;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 1rem;
+}
+
+.viewer>main>.resizer img {
+    width: 100%;
+    object-fit: fill;
+}
+
+@media (min-width: 800px) {
+    .viewer>main>.resizer {
+        width: 800px;
+        padding: 0;
+    }
+}
+
+.viewer>aside {
+    min-width: 22rem;
+    grid-area: aside;
+    display: none;
+    background-color: rgb(50, 50, 50);
+}
+
+.viewer>aside.open {
+    grid-area: aside;
+    display: flex;
+    flex-direction: column;
+}
+
+.viewer>aside .property>label {
+    color: #AAA;
+}
+
+.viewer>footer {
+    width: 15rem;
+    position: absolute;
+    bottom: 1rem;
+    left: calc(50vw - 4rem);
+    border-radius: 3px;
+    z-index: 100;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: .5rem;
+    background-color: rgba(0, 0, 0, .75);
+}