ywana-core8 0.0.1

package/src/site/dialog.css

@@ -0,0 +1,63 @@
+.overlay {
+  opacity: 0.5;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(77, 77, 77, 0.7);
+  z-index: 100;
+}
+
+.dialog {
+  border-radius: 4px;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 110;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.dialog-panel {
+  min-width: 500px;
+  max-width: 90%;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background: var(--paper-color, #fff);
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  border-radius: 5px;
+  box-shadow: var(--shadow1);
+  overflow: auto;
+}
+
+.dialog-panel > header {
+  font-size: 1rem;
+  font-weight: 600;
+  padding: 1rem;
+}
+
+.dialog-panel > main {
+  flex: 1;
+  padding: 1rem;
+}
+
+.dialog-panel > footer {
+  padding: 1rem;
+  display: flex;
+  justify-content: flex-end;
+}
+
+.dialog-panel > footer button {
+  min-width: 5rem;
+}

package/src/site/dialog.js

@@ -0,0 +1,43 @@
+import { Fragment, useContext } from 'react'
+import { SiteContext } from './siteContext'
+import { MenuIcon, Text } from '../html'
+import './dialog.css'
+
+/**
+ * Dialog
+ * 
+ * <Dialog title={title} open={true} onAction={onAction} actions={actions}>
+ */
+export const Dialog = (props) => {
+    const site = useContext(SiteContext)
+    const { icon, title = "Dialog", children, onAction, actions } = props
+    
+    function close() {
+        site.closeDialog()
+    }
+    
+    function prevent(e) {
+        e.preventDefault()
+        e.stopPropagation()
+    }
+    
+    return (
+        <Fragment>
+            <div className="overlay" />
+            <div className="dialog" onClick={close}>
+                <div className="dialog-panel" onClick={prevent}>
+                    <header>
+                        {icon ? <MenuIcon icon={icon} /> : null}
+                        <Text>{title}</Text>
+                    </header>
+                    <main>
+                        {children}
+                    </main>
+                    <footer>
+                        {actions}
+                    </footer>
+                </div>
+            </div>
+        </Fragment>
+    )
+}

package/src/site/index.js

@@ -0,0 +1,3 @@
+export * from './site'
+export * from './page'
+export * from './dialog'

package/src/site/layouts.css

@@ -0,0 +1,27 @@
+:root {
+    --timeout: 800ms;
+}
+
+.workspace { 
+    display: grid;
+    grid-template-areas: "header header header" 
+                         "menu   nav    nav"
+                         "menu   main   aside"
+                         "menu   detail aside" 
+                         "footer footer footer";
+    grid-template-columns: auto 1fr auto;
+    grid-template-rows: auto auto 1fr auto auto;
+}
+
+.workspace>nav {
+    min-height: 3rem;
+}
+
+.overall {
+    position: absolute;
+    top:0;
+    bottom: 0;
+    left:0;
+    right: 0;
+    background-color: var(--background-color);
+}

package/src/site/page.css

@@ -0,0 +1,44 @@
+.page6 {
+    height: 100%;
+    color: var(--text-color);
+}
+
+.page6>menu {
+    padding: 0px;
+    margin: 0px;
+    grid-area: menu;
+    width: var(--page-menu-width);
+    color: var(--page-menu-color);
+    background-color: var(--page-menu-bgcolor);
+    border-right: solid 1px var(--divider-color);
+}
+
+.page6>header {
+    grid-area: header;
+    height: var(--page-header-height);
+    color: var(--page-header-color);
+    background-color: var(--page-header-bgcolor);
+    border-bottom: solid 1px var(--divider-color);
+}
+
+.page6>nav {
+    grid-area: nav;
+    height: var(--page-nav-height);
+}
+
+.page6>main {
+    grid-area: main;
+    overflow: hidden;
+}
+
+.page6>aside {
+    grid-area: aside;
+    width: var(--page-aside-width);
+    color: var(--page-aside-color);
+    background-color: var(--page-aside-bgcolor);
+}
+
+.page6>footer {
+    grid-area: footer;
+    min-height: var(--page-footer-height);
+}

package/src/site/page.js

@@ -0,0 +1,36 @@
+import React, { useState, useEffect } from 'react'
+import './page.css'
+import './layouts.css'
+
+/**
+ * Page Context
+ */
+export const PageContext = React.createContext({})
+
+/**
+ * Page Provider
+ */
+export const PageProvider = ({ context = {}, children }) => {
+    
+    const [pageCtx, setPageCtx] = useState(context)
+
+    return (
+        <PageContext.Provider value={[pageCtx, setPageCtx]}>
+            {children}
+        </PageContext.Provider>
+    )
+}
+
+/**
+ * Page
+ */
+export const Page = (props) => {
+    const { children, layout = "simple", context = {} } = props
+    return (
+        <PageProvider context={context}>
+            <article className={`page6 ${layout}`}>
+                {children}
+            </article>
+        </PageProvider>
+    )
+}

package/src/site/site.css

@@ -0,0 +1,85 @@
+
+.site6 {
+    width: 100vw;
+    height: 100vh;
+    display: grid;
+    grid-template-columns: auto 1fr auto;
+    grid-template-rows: var(--site-header-height) 1fr auto;
+    grid-template-areas: "header nav nav" "menu main aside" "footer footer footer";
+    background-color: var(--background-color);
+}
+
+.site6>header {
+    grid-area: header;
+    color: var(--site-header-color);
+    background-color: var(--site-header-bgcolor);
+    display: flex;
+    align-items: center;
+    width: var(--site-menu-width);
+}
+
+.site6>nav {
+    grid-area: nav;
+    color: var(--site-nav-color);
+    background-color: var(--site-nav-bgcolor);
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    padding-right: 1rem;
+}
+
+.site6>nav>header {
+    flex: 1;
+}
+
+.site6>menu {
+    grid-area: menu;
+    margin: 0;
+    border-right: solid 1px var(--divider-color);
+    padding: .2rem;
+    color: var(--site-menu-color);
+    background-color: var(--site-menu-bgcolor);
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    width: var(--site-menu-width);
+}
+
+.site6>menu>main {
+    flex: 1;
+    overflow-x: hidden;
+    overflow-y: auto;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.site6>main {
+    grid-area: main;
+    overflow: hidden;
+}
+
+.site6>aside {
+    grid-area: aside;
+    color: var(--site-aside-color);
+    background-color: var(--site-aside-bgcolor);
+}
+
+.site6>footer {
+    grid-area: footer;
+    min-height: 20rem;
+    background-color: rgb(222, 222, 222);
+    color: #FFF;
+}
+
+.site6>.site-preview {
+    position: absolute;
+    z-index: 10;
+    width: 100vw;
+    height: 100vh;
+    background-color: rgba(0, 0, 0, 0.32);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+}

package/src/site/site.js

@@ -0,0 +1,234 @@
+import React, { Children, Fragment, useState, useContext, useEffect } from 'react'
+import { Icon } from '../html/icon'
+import { Tabs, Tab } from '../html/tab'
+import { Header } from '../html/header'
+import { Page } from './page'
+import './site.css'
+import { SiteContext } from './siteContext'
+
+
+
+/**
+ * Site Provider
+ */
+export const SiteProvider = ({ children, siteLang, siteDictionary, showConsole }) => {
+
+    const [lang, setLang] = useState(siteLang)
+    const [dictionary, setDictionary] = useState(siteDictionary)
+    const [sideNav, setSideNav] = useState('max')
+    const [showNav, setShowNav] = useState(false)
+    const [info, setInfo] = useState(null)
+    const [console, setConsole] = useState(false)
+    const [page, setPage] = useState()
+    const [dialog, setDialog] = useState()
+    const [preview, setPreview] = useState()
+    const [breadcrumb, setBreadcrumb] = useState()
+    const [focused, setFocused] = useState()
+
+    const value = {
+
+        lang,
+        setLang,
+
+        dictionary,
+        setDictionary,
+
+        focused,
+        changeFocus: (next) => {
+            if (focused) focused.lose()
+            setFocused(next)
+        },
+
+        sideNav,
+        setSideNav,
+
+        showNav,
+        setShowNav,
+
+        info,
+        openInfo: (info) => { setInfo(info) },
+        closeInfo: () => { setInfo(null) },
+
+        console,
+        toggleConsole: () => { setConsole(!console) },
+
+        breadcrumb,
+        setBreadcrumb,
+
+        page,
+        goto: (id) => { setPage(id) },
+
+        dialog,
+        openDialog: (dialog) => { setDialog(dialog) },
+        closeDialog: () => { setDialog(null) },
+
+        preview,
+        openPreview: (preview) => { setPreview(preview) },
+        closePreview: () => { setPreview(null) }
+
+    }
+
+    return (
+        <SiteContext.Provider value={value}>
+            {children}
+        </SiteContext.Provider>
+    )
+}
+
+/**
+ * Site
+ */
+export const Site = ({ icon, logo, title, toolbar, children, init, min, lang, dictionary }) => {
+    return (
+        <SiteProvider siteLang={lang} siteDictionary={dictionary}>
+            <div className="site6">
+                <SiteHeader icon={icon} />
+                <SiteToolBar >{toolbar}</SiteToolBar>
+                <SiteMenu logo={logo} title={title} min={min} >{children}</SiteMenu>
+                <SitePage init={init}>
+                    {children}
+                    <Page id="EMPTY">EMPTY</Page>
+                </SitePage>
+                <SiteAside />
+                <SiteConsole />
+                <SiteDialog />
+                <SitePreview />
+            </div>
+        </SiteProvider>
+    )
+}
+
+/**
+ * Site Header
+ */
+const SiteHeader = (props) => {
+    const { icon = "equalizer", title } = props
+    return (
+        <Header icon={icon} title={title} />
+    )
+}
+/**
+ * Site ToolBar
+ */
+const SiteToolBar = ({ children }) => {
+    const context = useContext(SiteContext)
+    const { breadcrumb } = context
+    return (
+        <nav>
+            {children}
+        </nav>
+    )
+}
+
+/**
+ * Site Aside
+ */
+const SiteAside = () => {
+    const context = useContext(SiteContext)
+    return context.info ? (
+        <aside>
+            {context.info}
+        </aside>
+    ) : ''
+}
+
+/**
+ * SiteMenu
+ */
+const SiteMenu = ({ logo, title, children, min }) => {
+
+    const context = useContext(SiteContext)
+    const { sideNav, showNav } = context
+    const toggleIcon = sideNav === 'max' ? 'chevron_left' : 'chevron_right'
+
+    useEffect(() => {
+        if (min) context.setSideNav('min')
+    }, [])
+
+    const goto = (id) => {
+        context.setShowNav(false)
+        context.goto(id)
+    }
+    const sections = children ?
+        Children.toArray(children).reduce((sections, page) => {
+            const section = page.props ? page.props.section : '...'
+            if (!sections[section]) sections[section] = []
+            const { id, icon, title } = page.props
+            if (title) sections[section].push({ id, icon, title })
+            return sections
+        }, {}) : {}
+
+    return (
+        <menu className={`min ${showNav ? 'show' : ''}`}>
+            <main >
+                {Object.keys(sections).map(title => (
+                    <Fragment key={title}>
+                        {sections[title].map(({ id, icon = 'info', title }) => {
+                            return (<Icon key={id} icon={icon} clickable checked={id === context.page} action={() => goto(id)} />)
+                        })}
+                        <div className="section-divider" ></div>
+                    </Fragment>
+                ))}
+            </main>
+        </menu>
+    )
+}
+
+/**
+ * SitePage
+ */
+const SitePage = ({ children, init }) => {
+    const context = useContext(SiteContext)
+    const { page } = context
+    useEffect(() => {
+        if (init) {
+            context.goto(init)
+        } else {
+            context.goto("EMPTY")
+        }
+    }, [])
+    return (
+        <main>
+            {React.Children.toArray(children).filter(child => child.props ? child.props.id === page : false)}
+        </main>
+    )
+}
+
+/**
+ * Site Dialog
+ */
+const SiteDialog = () => {
+    const context = useContext(SiteContext)
+    return context.dialog ? context.dialog : ''
+}
+
+/**
+ * Site Preview
+ */
+const SitePreview = () => {
+    const context = useContext(SiteContext)
+    return context.preview ? (
+        <div className="site-preview" >
+            {context.preview}
+        </div>
+    ) : ''
+}
+
+/**
+ * Site Console
+ */
+const SiteConsole = () => {
+    const context = useContext(SiteContext)
+    return context.console ? (
+        <footer className="site-console" >
+            <Header>
+                <Tabs>
+                    <Tab label="Console" />
+                </Tabs>
+            </Header>
+            <main>
+
+            </main>
+        </footer>
+    ) : ''
+}

package/src/site/siteContext.js

@@ -0,0 +1,4 @@
+/**
+ * Site Context
+ */
+export const SiteContext = React.createContext({})

package/src/site/workspace.js

@@ -0,0 +1,57 @@
+import React, { useState } from 'react'
+import { Button } from '../src/widgets'
+import { TransitionGroup, CSSTransition } from 'react-transition-group'
+
+/**
+ * Workspace Page Layout
+ */
+// TODO: WIP
+export const Workspace = () => {
+
+    const [active, setActive] = useState(1)
+    const [effect, setEffect] = useState('shift')
+
+    function changeActive(next) {
+        const nextEffect = next > active ? 'shift' : 'unshift' 
+        setEffect(nextEffect)
+        setActive(next)
+    }
+    
+    function canRender(area) {
+        const desktop = window.matchMedia('(min-width: 416px)').matches
+        return desktop ? true : active === area
+    }
+
+    return (
+        <TransitionGroup component={null}>
+            {canRender(1) ? (
+                <CSSTransition timeout={1500} classNames={effect} key='menu'>
+                    <menu>
+                        <span>menu</span>
+                        <Button label=">>>" action={() => changeActive(2)} />
+                    </menu>
+                </CSSTransition>
+            ) : null}
+            {canRender('header') ? <header>Title</header> : null}
+            {canRender('nav') ? <nav>Nav Toolbar</nav> : null}
+            {canRender(2) ? (
+                <CSSTransition timeout={3500} classNames={effect} key='main'>
+                    <main>
+                        <Button label="<<<" action={() => changeActive(1)} />
+                        <span>Content</span>
+                        <Button label=">>>" action={() => changeActive(3)} />
+                    </main>
+                </CSSTransition>
+            ) : null}
+            {canRender(3) ? (
+                <CSSTransition timeout={3500} classNames={effect} key='aside'>
+                    <aside>
+                        <Button label="<<<" action={() => changeActive(2)} />
+                        <span>aside</span>
+                    </aside>
+                </CSSTransition>
+            ) : null}
+            {canRender('footer') ? <footer>Footer</footer> : null}
+        </TransitionGroup>
+    )
+}

package/src/upload/UploadArea.js

@@ -0,0 +1,64 @@
+import React, { useState, useEffect, useRef } from 'react'
+import { CircularProgress } from 'rmwc'
+import { Icon, Text } from 'ywana-core7'
+import '@rmwc/circular-progress/styles';
+
+/**
+ * Component
+ */
+export const UploadArea = (props) => {
+
+    const STATES = { 'IDLE': 0, 'RUNNING': 1, 'SUCCESS': 2, 'ERROR': 3 }
+
+    const areaElement = useRef()
+    const [drag, setDrag] = useState(false)
+
+    useEffect(() => {
+        const { resumable } = props
+        if (resumable && areaElement) resumable.assignDrop(areaElement.current)
+    }, [])
+
+    const onDragOver = () => {
+        setDrag(true)
+    }
+
+    const onDragLeave = () => {
+        setDrag(false)
+    }
+
+    const { state = STATES.IDLE, label = 'Add file or drop file here...', error } = props
+    const dragging = drag === true ? 'drag-over' : ''
+
+    return (
+        <div className={`upload-area6 ${dragging}`}
+            onDragOver={onDragOver}
+            onDragLeave={onDragLeave}
+            ref={areaElement}
+        >
+            {state === STATES.IDLE ? <UploadIcon resumable={props.resumable} /> : ''}
+            {state === STATES.IDLE ? <label>{label}</label> : ''}
+            {state === STATES.RUNNING ? <CircularProgress size="xlarge" /> : ''}
+            {state === STATES.SUCCESS ? <Icon icon="done_all" /> : ''}
+            {state === STATES.ERROR ? <Text use="body1">{error}</Text> : ''}
+            {props.children}
+        </div>
+    )
+}
+
+/**
+ * Component
+ */
+const UploadIcon = ({ resumable }) => {
+
+    const iconElement = useRef()
+
+    useEffect(() => {
+        if (resumable && iconElement) resumable.assignBrowse(iconElement.current)
+    }, [])
+
+    return (
+        <div className="upload-icon" ref={iconElement}>
+            <Icon icon="folder_open" clickable/>
+        </div>
+    )
+}