ywana-core8 0.0.842 → 0.0.844

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ywana-core8",
-  "version": "0.0.842",
+  "version": "0.0.844",
   "description": "ywana-core8",
   "homepage": "https://ywana.github.io/workspace",
   "author": "Ernesto Roldan Garcia",
@@ -37,6 +37,7 @@
     "moment": "^2.29.1",
     "moment-range": "^4.0.2",
     "react-datepicker": "^4.6.0",
+    "react-error-boundary": "^4.0.3",
     "react-error-overlay": "^6.0.10",
     "react-image-pan-zoom-rotate": "^1.6.0",
     "react-notifications-component": "^3.4.1",

package/src/html/textfield-outlined.css

@@ -15,7 +15,7 @@
 
 .textfield-outlined > input {
   flex: 1;
-  padding: 10px 10px 10px 0.5rem;
+  padding: 0.5rem;
   display: block;
   border: none;
   border: 1px solid var(--divider-color);

package/src/html/textfield.test.js

@@ -1,6 +1,5 @@
 import React, { useState } from 'react'
 import { DropDown, TextField, TextArea, TokenField } from '.'
-import { Wrapper } from '../../__reactpreview__/Wrapper'
 import { DateRange } from './textfield'
 
 const TextFieldTest = (prop) => {
@@ -33,7 +32,7 @@ const TextFieldTest = (prop) => {
     return (
         <>
             <TextField id="labelLeft" labelPosition="left" label="Label Left"  value={form.labelLeft} onChange={change}/>
-            <TextField id="name" label="Name" value={form.name} onChange={change}/>
+            <TextField id="name" label="Name" value={form.name} onChange={change} outlined/>
             <br/>
             <DropDown id="b1" label="Boolean1" labelPosition="left" onChange={change} options={options2} value={form.b1} />
             <br/>
@@ -47,7 +46,6 @@ const TextFieldTest = (prop) => {
             <TextArea id="text1" label="Text 1" value={form.text1} onChange={change} />
             <TextField id="date1" type="DATE" label="Date" value={form.date1} onChange={change} />
             <DateRange id="range1" value={form.range1} onChange={change}/>
-
         </>
     )
 }

package/src/http/client.js

@@ -23,22 +23,28 @@ async function fetchAsync(method, URL, body = null, token, headers) {
     }
     throw response
   } catch (error) {
-    if (error instanceof Error) { throw { error }}
+    if (error instanceof Error) { throw { error } }
     const json = await error.json()
     throw {
       success: false,
-      message: json.message || json.err
+      message: json.message || json.err
     }
   }
 }
 
-
+/**
+ * HTTP Client
+ * 
+ * @param {*} domain 
+ * @param {*} securityCtx 
+ * @returns 
+ */
 export const HTTPClient = (domain, securityCtx) => {
   return {
 
-    GET: (URL) => {
+    GET: (URL, headers) => {
       const token = securityCtx ? securityCtx.token() : null;
-      return fetchAsync('GET', domain + URL, undefined, token);
+      return fetchAsync('GET', domain + URL, undefined, token, headers);
     },
 
     POST: (URL, body, headers) => {
@@ -48,17 +54,17 @@ export const HTTPClient = (domain, securityCtx) => {
 
     PUT: (URL, body) => {
       const token = securityCtx ? securityCtx.token() : null;
-      return fetchAsync('PUT', domain + URL, body, token);
+      return fetchAsync('PUT', domain + URL, body, token, headers);
     },
 
     PATCH: (URL, body) => {
       const token = securityCtx ? securityCtx.token() : null;
-      return fetchAsync('PATCH', domain + URL, body, token);
+      return fetchAsync('PATCH', domain + URL, body, token, headers);
     },
 
     DELETE: (URL) => {
       const token = securityCtx ? securityCtx.token() : null;
-      return fetchAsync('DELETE', domain + URL, undefined, token);
+      return fetchAsync('DELETE', domain + URL, undefined, token, headers);
     }
   }
 }

package/src/incubator/task.js

@@ -19,13 +19,15 @@ export const TaskContextProvider = (props) => {
 
     useEffect(() => {
         const _interval = setInterval(async () => {
-            console.log("TASKS INTERVAL", listeners)
             const taskIDs = Object.keys(listeners)
             for (let i = 0; i < taskIDs.length; i++) {
+                
                 const taskID = taskIDs[i]
-                const listener = listeners[taskID]
                 const tsk = await task(taskID)
+
+                const listener = listeners[taskID]
                 if (listener) listener(tsk)
+            
             }
         }, frequency)
         return () => clearInterval(_interval)
@@ -106,9 +108,6 @@ export const TaskContextProvider = (props) => {
         removeListener
     };
 
-
-    console.log("TaskContextProvider", value, value.listeners.length)
-
     return (
         <TaskContext.Provider value={value}>
             {children}

package/src/site/site.css

@@ -159,4 +159,28 @@
     flex-direction: column;
     align-items: center;
     justify-content: center;
+}
+
+
+.site-error-fallback {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 100vh;
+    width: 100vw;
+    background-color: var(--background-color);
+}
+
+.site-error-fallback > dialog {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    width: 50%;
+    height: 50%;
+    background-color: var(--paper-color);
+    box-shadow: var(--shadow1);
+
+    border: solid 1px black;
 }

package/src/site/site.js

@@ -2,18 +2,19 @@ import React, { Children, Fragment, useState, useContext, useEffect } from 'reac
 import { Icon } from '../html/icon'
 import { Tabs, Tab } from '../html/tab'
 import { Header } from '../html/header'
-import { Tooltip } from '../html/tooltip'
+import { Tooltip } from '../html/tooltip'
 import { Page } from './page'
 import { SiteContext } from './siteContext'
 import { ReactNotifications, Store } from 'react-notifications-component'
 import 'react-notifications-component/dist/theme.css'
 import './site.css'
+import { ErrorBoundary } from 'react-error-boundary'
 
 /**
  * Site Provider
  */
 export const SiteProvider = ({ children, siteLang, siteDictionary }) => {
-    
+
     const [lang, setLang] = useState(siteLang)
     const [dictionary, setDictionary] = useState(siteDictionary)
     const [sideNav, setSideNav] = useState('max')
@@ -27,15 +28,15 @@ export const SiteProvider = ({ children, siteLang, siteDictionary }) => {
     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()
@@ -45,25 +46,25 @@ export const SiteProvider = ({ children, siteLang, siteDictionary }) => {
             if (focused) focused.lose()
             setFocused(null)
         },
-        
+
         sideNav,
         setSideNav,
 
         showNav,
         setShowNav,
-        
+
         info,
         openInfo: (info) => { setInfo(info) },
         closeInfo: () => { setInfo(null) },
-        
+
         consoleLines,
         showConsole,
         toggleConsole: () => { setShowConsole(!showConsole) },
-        writeLog: (line) => { 
+        writeLog: (line) => {
             const next = consoleLines.concat(line)
             setConsoleLines(next)
         },
-        clearLog: () => { setConsoleLines([])},
+        clearLog: () => { setConsoleLines([]) },
 
         breadcrumb,
         setBreadcrumb,
@@ -83,10 +84,10 @@ export const SiteProvider = ({ children, siteLang, siteDictionary }) => {
         prompt: (message) => window.prompt(message),
 
         promptDialog,
-        openPromptDialog: (dialog) => {setPromptDialog(dialog)},
-        closePromptDialog: () => { setPromptDialog(null)},
+        openPromptDialog: (dialog) => { setPromptDialog(dialog) },
+        closePromptDialog: () => { setPromptDialog(null) },
 
-        notify: ({ title, body, type = "success", duration=3000, onRemoval }) => {
+        notify: ({ title, body, type = "success", duration = 3000, onRemoval }) => {
             Store.addNotification({
                 title,
                 message: body,
@@ -104,9 +105,23 @@ export const SiteProvider = ({ children, siteLang, siteDictionary }) => {
         }
     }
 
+    function fallbackRenderer({ error, resetErrorBoundary }) {
+        return (
+            <div className="site-error-fallback" role="alert">
+                <dialog>
+                    <h3>Ywana Core 8</h3>
+                    <p>Something went wrong:</p>
+                    <pre>{error.message}</pre>
+                </dialog>
+            </div>
+        )
+    }
+
     return (
         <SiteContext.Provider value={value}>
-            {children}
+            <ErrorBoundary fallbackRender={fallbackRenderer}>
+                {children}
+            </ErrorBoundary>
         </SiteContext.Provider>
     )
 }
@@ -167,7 +182,7 @@ const SiteToolBar = ({ children }) => {
 /**
  * Site Footer
  */
- const SiteFooter = ({ children }) => {
+const SiteFooter = ({ children }) => {
     return (
         <footer>
             {children}
@@ -223,7 +238,7 @@ const SiteMenu = ({ logo, title, children, min }) => {
     const menutTitle = sideNav === 'max' ? title : ''
     return (
         <menu className={`${style} ${showNav ? 'show' : ''}`}>
-            <Header title={menutTitle}/>
+            <Header title={menutTitle} />
             <main >
                 {Object.keys(sections).map(title => (
                     <Fragment key={title}>
@@ -282,7 +297,7 @@ const SiteDialog = () => {
 /**
  * Site Promtp Dialog
  */
- const SitePromptDialog = () => {
+const SitePromptDialog = () => {
     const context = useContext(SiteContext)
     return context.promptDialog ? context.promptDialog : ''
 }
@@ -321,7 +336,7 @@ const SiteConsole = () => {
                 <Icon icon="clear_all" size="small" clickable action={clear} />
             </nav>
             <main>
-                {context.consoleLines.map((line,index) => <div key={`log-${index}`}>{line}</div>)}
+                {context.consoleLines.map((line, index) => <div key={`log-${index}`}>{line}</div>)}
             </main>
         </div>
     ) : ''

package/src/site/site.test.js

@@ -2,10 +2,8 @@ import React, { Fragment, useContext, useEffect, useState } from 'react'
 import { SiteContext } from './siteContext'
 import { Site } from './site'
 import { Page } from './page'
-import './site.css'
-import './page.css'
 import { Dialog } from './dialog'
-import { Button, DropDown, TextField, TextArea } from '../html'
+import { Button, DropDown, TextField, TextArea, Icon } from '../html'
 import { UploadDialog } from '../widgets/upload/UploadDialog'
 import { Uploader } from '../widgets/upload/Uploader'
 import { TabbedTablePage } from '../domain/TabbedTablePage'
@@ -15,6 +13,9 @@ import { CollectionPage } from '../domain/CollectionPage'
 import { FORMATS, TYPES } from '../domain/ContentType'
 import { TableTest } from '../html/table.test'
 import { PasswordEditor } from '../incubator/password'
+import './site.css'
+import './page.css'
+
 
 const SiteTest = (prop) => {
 
@@ -41,10 +42,11 @@ const SiteTest = (prop) => {
     )
 }
 
+
 const Page1 = (props) => {
 
     const site = useContext(SiteContext)
-    const [form, setForm] = useState({})
+    const [formm, setForm] = useState({})
 
     useEffect(() => {
         site.notify({ title: "Notification 1", body: "Lorem ipsum dolor sit amet" })
@@ -84,7 +86,7 @@ const Page1 = (props) => {
     )
 }
 
-const Page2 = (props) => {
+const Page2 = (props) => { 
 
     const site = useContext(SiteContext)
 

package/src/test.js

@@ -1,67 +0,0 @@
-import React from 'react'
-
-const Test = (props) => {
-
-    return (
-
-        <div>
-
-            <table border="1">
-                <thead>
-                    <tr>
-                        <th rowspan="2" colspan="1"><div class="checkbox"><input type="checkbox" value=""/><span class="checkmark"></span><label></label></div></th>
-                        <th rowspan="2" colspan="1"><span>Estado</span></th>
-                        <th rowspan="2" colspan="1"><span>Fecha de Entrada</span></th>
-                        <th rowspan="2" colspan="1"><span>Circuito</span></th>
-                        <th rowspan="2" colspan="1"><span>Clase de Muestra</span></th>
-                        <th colspan="3"><span>Referencia</span></th>
-                        <th></th>
-                    </tr>
-                    <tr>
-                        <th>Referencia</th>
-                        <th>Referencia</th>
-                        <th>Referencia</th>
-                    </tr>
-                </thead>
-                <tbody>
-                </tbody>
-            </table>
-
-            <table border="1">
-                <thead>
-                    <tr>
-                        <th rowSpan={2}>Uno</th>
-                        <th rowSpan={2}>Dos</th>
-                        <th rowSpan={2}>Tres</th>
-                        <th colspan="4">Cuatro</th>
-                        <th rowSpan={2}>Ocho</th>
-                    </tr>
-
-                    <tr>
-                        <th>a</th>
-                        <th>b</th>
-                        <th>c</th>
-                        <th>d</th>
-                    </tr>
-
-                </thead>
-                <tbody>
-
-                    <tr>
-                        <td>1</td>
-                        <td>2</td>
-                        <td>3</td>
-                        <td>4</td>
-                        <td>5</td>
-                        <td>6</td>
-                        <td>7</td>
-                        <td>8</td>
-                    </tr>
-                </tbody>
-            </table>
-
-        </div>
-
-    )
-}
-

package/src_old/upload/UploadArea.js

@@ -1,80 +0,0 @@
-import React, { useState, useEffect, useRef } from 'react'
-import { Icon, Text, CircularProgress } from '../html'
-
-/**
- * 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>
-    )
-}
-
-/**
- * Upload Button
- */
- export function UploadButton({ resumable, icon="file_upload", label="Upload"}) {
-
-    const buttonElement = useRef();
-
-    useEffect(() => {
-        if (resumable && buttonElement) resumable.assignBrowse(buttonElement.current);
-    }, []);
-
-    return (
-        <div className="upload-button" ref={buttonElement}>
-            <Button icon={icon} label={label} outlined/>
-        </div>
-    )
-}

package/src_old/upload/UploadDialog.js

@@ -1,41 +0,0 @@
-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_old/upload/UploadFile.js

@@ -1,29 +0,0 @@
-import React, { Fragment } from 'react'
-import { Icon, Text, LinearProgress } from '../html'
-import './uploader.css'
-
-/**
- * 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_old/upload/index.js

@@ -1,4 +0,0 @@
-export * from './uploader'
-export * from './UploadDialog'
-export * from './UploadArea'
-export * from './UploadFile'

package/src_old/upload/uploader.css

@@ -1,58 +0,0 @@
-.uploader {
-    display: flex;
-    flex-direction: column;
-    flex: 1;
-}
-
-.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
-}