ywana-core8 0.0.352 → 0.0.355

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ywana-core8",
-  "version": "0.0.352",
+  "version": "0.0.355",
   "description": "ywana-core8",
   "author": "Ernesto Roldan Garcia",
   "license": "MIT",
@@ -29,6 +29,7 @@
     "react-dom": "^17.0.2"
   },
   "dependencies": {
+    "crypto-js": "^4.1.1",
     "deep-equal": "^2.0.5",
     "material-design-icons-iconfont": "^6.1.1",
     "moment": "^2.29.1",

package/src/html/menu.css

@@ -1,6 +1,5 @@
 .menu-icon {
   position: relative;
-  width: 3rem;
 }
 
 .menu-icon > .overlay {
@@ -44,7 +43,6 @@
 .menu-icon > menu li {
   min-height: 3rem;
   padding: 0 0.5rem;
-
   display: flex;
   align-items: center;
 }
@@ -57,10 +55,12 @@
   flex: 1;
   display: flex;
   align-items: center;
+  cursor: pointer;
 }
 
 .menu-item > .icon {
   color: var(--text-color-light);
+  cursor: pointer;
 }
 
 .menu-item > label {
@@ -69,11 +69,13 @@
   padding: 0 0.5rem 0 0;
   color: var(--text-color);
   font-size: 0.9rem;
+  cursor: pointer;
 }
 
 .menu-item.disabled > label,
 .menu-item.disabled > .icon {
   color: var(--text-color-lighter);
+  cursor: initial;
 }
 
 .menu-item > .meta {

package/src/html/menu.js

@@ -25,7 +25,7 @@ export const Menu = (props) => {
  */
 export const MenuIcon = (props) => {
 
-    const { icon = "more_vert", children, align } = props
+    const { icon = "more_vert", children, align, size="normal" } = props
     const [open, setOpen] = useState(false)
 
     function toggle() {
@@ -35,7 +35,7 @@ export const MenuIcon = (props) => {
     return (
         <MenuContext.Provider value={[open, setOpen]}>
             <div className="menu-icon">
-                <Icon icon={icon} clickable action={toggle} />
+                <Icon icon={icon} size={size} clickable action={toggle} />
                 {open ? (
                     <menu className={`${align}`}>
                         {children}

package/src/html/text.test.js

@@ -1,8 +1,10 @@
 import React, { useState } from 'react'
+import { useEffect } from 'react/cjs/react.production.min'
 import { Text, TEXTFORMATS } from './text'
 
 const TextTest = (prop) => {
 
+
     return (
         <>
            <Text format={TEXTFORMATS.NUMERIC}>846964.4199142859</Text>

package/src/http/token.test.js

@@ -0,0 +1,39 @@
+import React, { useState, useEffect } from 'react'
+import { TextField } from '../html'
+import CryptoJS from 'crypto-js';
+import { useEffect } from 'react/cjs/react.production.min';
+
+
+const Token = () => {
+
+    const [encrypted, setEncrypted] = useState("")
+    const [decrypted, setDecrypted] = useState("")
+
+    
+    function decryptData(encrypted, secret) {
+        const bytes = CryptoJS.AES.decrypt(encrypted, secret);
+        const originalText = bytes.toString(CryptoJS.enc.Utf8);
+        return originalText;
+    }
+    
+    function encryptData(message, secret) {
+        return CryptoJS.AES.encrypt(message, secret).toString();
+    }
+    
+    function change(id, value) {
+        const secret = '12345678';
+        const e = encryptData(value, secret)
+        setEncrypted(e)
+        const d = decryptData(e, secret)
+        setDecrypted(d)
+    }
+
+    return (
+        <>
+            <TextField label="Text" onChange={(id, value) => change(id, value)}></TextField>
+            <TextField label="Encrypted" value={encrypted}></TextField>
+            <TextField label="Decrypted" value={decrypted}></TextField>
+        </>
+    )
+}
+

package/src/site/site.css

@@ -109,6 +109,10 @@
 
 .site6>footer {
     grid-area: footer;
+}
+
+.site6>.site-console {
+    grid-area: footer;
     min-height: 20rem;
     background-color: rgb(222, 222, 222);
     color: #FFF;

package/src/site/site.js

@@ -104,7 +104,7 @@ export const SiteProvider = ({ children, siteLang, siteDictionary, showConsole }
 /**
  * Site
  */
-export const Site = ({ icon, logo, title, toolbar, children, init, min, lang, dictionary }) => {
+export const Site = ({ icon, logo, title, toolbar, footer, children, init, min, lang, dictionary }) => {
     return (
         <SiteProvider siteLang={lang} siteDictionary={dictionary}>
             <div className="site6">
@@ -121,6 +121,7 @@ export const Site = ({ icon, logo, title, toolbar, children, init, min, lang, di
                 <SitePromptDialog />
                 <SitePreview />
                 <SiteNotifications />
+                <SiteFooter>{footer}</SiteFooter>
             </div>
         </SiteProvider>
     )
@@ -141,6 +142,7 @@ const SiteHeader = (props) => {
         <Header icon={icon} title={title} />
     )
 }
+
 /**
  * Site ToolBar
  */
@@ -154,6 +156,19 @@ const SiteToolBar = ({ children }) => {
     )
 }
 
+/**
+ * Site Footer
+ */
+ const SiteFooter = ({ children }) => {
+    const context = useContext(SiteContext)
+    const { breadcrumb } = context
+    return (
+        <footer>
+            {children}
+        </footer>
+    )
+}
+
 /**
  * Site Aside
  */

package/src/site/site.test.js

@@ -9,8 +9,11 @@ import { Dialog } from './dialog'
 import { Button } from '../html'
 
 const SiteTest = (prop) => {
+
+    const footer = <div>FOOTER</div>
+
     return (
-        <Site icon="star" title="Site Test" init={"PAGE2"}>
+        <Site icon="star" title="Site Test" init={"PAGE2"} footer={footer}>
             <Page id="PAGE1" section="SECTION1" icon="description" title="Page 1" layout="workspace">
                 <Page1 />
             </Page>

package/src/widgets/explorer/Explorer.css

@@ -0,0 +1,118 @@
+.file-explorer {
+    width: 100%;
+    height: 100%;
+    display: grid;
+    grid-template-areas: 
+        "header header header"
+        "nav nav nav"
+        "menu main aside"
+        "footer footer footer";
+    grid-template-columns: auto 1fr auto;
+    grid-template-rows: auto auto 1fr auto;
+    padding: 2px;
+}
+
+.file-explorer>* {
+    margin: 2px;
+}
+
+.file-explorer>header {
+    grid-area: header;
+}
+
+.file-explorer>nav {
+    grid-area: nav;
+}
+
+.file-explorer>menu {
+    grid-area: menu;
+    padding: 0;
+}
+
+.file-explorer>main {
+    grid-area: main;
+    border-left: solid 1px var(--divider-color);
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+}
+
+.file-explorer>aside {
+    grid-area: aside;
+}
+
+.file-explorer>footer {
+    grid-area: footer;
+}
+
+.file-view {
+    flex: 1;
+    overflow: auto;
+    display: flex;
+    flex-wrap: wrap;
+    gap: .5rem;
+}
+
+.file-icon {
+    margin: .5rem;
+    border: solid 1px var(--divider-color);
+    width: 8rem;
+    height: 10rem;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+}
+
+.file-icon--selected {
+    background-color: var(--divider-color);
+}
+
+.file-icon:hover {
+    cursor: pointer;
+    box-shadow: var(--shadow1);
+}
+
+.file-icon>header {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    width: 100%;
+    height: 2rem;
+    display: flex;
+    justify-content: space-between;
+    color: var(--text-color-lighter);
+}
+
+.file-icon>picture {
+    flex: 1;
+    padding: 0 1rem;
+}
+
+.file-icon>picture>img {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+}
+
+.file-icon>main {
+    height: 2rem;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.file-icon>main>label {
+    font-size: .8rem;
+    color: var(--text-color);
+}
+
+.file-icon>footer {
+    width: 100%;
+    height: 1.5rem;
+    overflow: hidden;
+    border-top: solid 1px var(--divider-color);
+    display: flex;
+    align-items: center;
+    padding: 0 .5rem;
+}

package/src/widgets/explorer/Explorer.js

@@ -0,0 +1,77 @@
+import React, {useState} from 'react'
+import { MenuIcon, MenuItem, Icon } from '../../html'
+import './Explorer.css'
+
+/**
+ * File Explorer
+ */
+export const FileExplorer = (props) => {
+    const { files = [], onSelect } = props
+    return (
+        <div className="file-explorer">
+            <header>header</header>
+            <nav>nav</nav>
+            <menu>menu</menu>
+            <main>
+                <FileIconsView files={files} />
+            </main>
+            <aside></aside>
+            <footer>footer</footer>
+        </div>
+    )
+}
+
+/**
+ * File Icons View
+ */
+export const FileIconsView = (props) => {
+    const { files = [], onSelect } = props
+    const [selected, setSelected] = useState()
+
+    function select(id) {
+        setSelected(id)
+        if (onSelect) onSelect(id)
+    }
+
+    function isSelected(id) {
+        return selected === id
+    }
+
+    return (
+        <div className="file-view file-view--icons">
+            {files.map(file => <FileIcon file={file} onSelect={select} selected={isSelected(file.id)} />)}
+        </div>
+    )
+}
+
+/**
+ * File Icon
+ */
+const FileIcon = (props) => {
+
+    const { file = {}, selected = false, onSelect } = props
+    const { id, icon, label, actions = [], src = "https://findicons.com/files/icons/2813/flat_jewels/256/file.png", footer } = file
+
+    function select() {
+        if (onSelect && !selected) onSelect(id)
+    }
+
+    const style = selected ? 'file-icon--selected'  :''
+    return (
+        <div className={`file-icon ${style}`} onClick={select}>
+            <header>
+                {icon? <Icon size="small" icon={icon} /> : null }
+                <MenuIcon size="small">
+                    {actions.map(action => <MenuItem icon={action.icon} label={action.label} onSelect={action.execute} />)}
+                </MenuIcon>
+            </header>
+            <picture>
+                <img src={src}></img>
+            </picture>
+            <main>
+                <label>{label}</label>
+            </main>
+            { footer ? <footer>{footer}</footer> : null }
+        </div>
+    )
+}

package/src/widgets/explorer/Explorer.test.js

@@ -0,0 +1,35 @@
+import React from 'react'
+import { Button } from '../../html'
+import { FileExplorer, FileIconsView } from './explorer'
+
+const thumb1 = "https://findicons.com/files/icons/2813/flat_jewels/256/file.png"
+
+const files = [
+    { id: "0001", icon: "star", label: "File 1", src:thumb1, actions: [ { icon:"info", label:"Action1", execute: () => alert("Action1")} ], footer: <span>ok</span> },
+    { id: "0002", icon: "star", label: "File 2", src:thumb1 },
+    { id: "0003", icon: "star", label: "File 3", src:thumb1 },
+    { id: "0004", icon: "star", label: "File 4", src:thumb1 },
+    { id: "0005", icon: "star", label: "File 5", src:thumb1 },
+    { id: "0006", icon: "star", label: "File 6", src:thumb1 },
+    { id: "0007", icon: "star", label: "File 7", src:thumb1 },
+    { id: "0008", icon: "star", label: "File 8", src:thumb1 },
+    { id: "0009", icon: "star", label: "File 9", src:thumb1 },
+    { id: "0010", icon: "star", label: "File 10", src:thumb1 },
+]
+
+const FileExplorerTest = (props) => {
+    return (
+        <div style={{ padding: "1rem", flex: "1", height: "100%" }}>
+            <FileExplorer files={files} />
+        </div>
+    )
+}
+
+
+const FileIconViewTest = (props) => {
+    return (
+        <div style={{ padding: "1rem", flex: "1", height: "100%" }}>
+            <FileIconsView files={files} />
+        </div>
+    )
+}

package/src/widgets/index.js

@@ -5,4 +5,5 @@ export * from './kanban/Kanban'
 export * from './avatar/avatar'
 export * from './waiter'
 export * from './planner/Planner'
-export * from './upload'
+export * from './upload'
+export * from './explorer/Explorer'