ywana-core8 0.0.407 → 0.0.410

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ywana-core8",
-  "version": "0.0.407",
+  "version": "0.0.410",
   "description": "ywana-core8",
   "homepage": "https://ywana.github.io/workspace",
   "author": "Ernesto Roldan Garcia",

package/preview.config.cjs

@@ -0,0 +1,35 @@
+// preview.config.js
+
+/** @type {import("@previewjs/config").PreviewConfig} */
+module.exports = {
+    /**
+     * Configure custom aliases (auto-detected if you use TypeScript).
+     */
+    alias: {
+      foo: "src/foo"
+    },
+  
+    /**
+     * Configure a public assets directory.
+     */
+    publicDir: "public",
+  
+    /**
+     * Set up a custom component to wrap around previewed components.
+     *
+     * Useful to set up context providers and global CSS.
+     */
+    wrapper: {
+      path: "__previewjs__/Wrapper.tsx",
+      componentName: "Wrapper"
+    },
+  
+    /**
+     * Specify a custom Vite configuration.
+     *
+     * See https://vitejs.dev/config.
+     */
+    vite: {
+
+    }
+  };

package/src/desktop/dektop.test.js

@@ -0,0 +1,11 @@
+import React, { Fragment, useContext, useEffect, useState } from 'react'
+import { Desktop } from './desktop'
+import { Window } from './window'
+
+const DesktopTest = (prop) => {
+    return (
+        <Desktop>
+            <Window id="w1" icon="folder" title="Window 1" />
+        </Desktop>
+    )
+}

package/src/desktop/desktop.css

@@ -0,0 +1,6 @@
+.desktop {
+     height: 100vh;
+     width: 100vw;
+     background-color: rgb(113, 102, 226);
+     position: relative;
+}

package/src/desktop/desktop.js

@@ -0,0 +1,13 @@
+import React from 'react'
+import './desktop.css'
+
+export const Desktop = (props) => {
+
+    const { children } = props
+
+    return (
+        <div className='desktop'>
+            { children }
+        </div>
+    )
+}

package/src/desktop/window.css

@@ -0,0 +1,58 @@
+.window {
+    position: absolute;
+    top: 1rem;
+    left: 1rem;
+    min-width: 20rem;
+    min-height: 15rem;
+    resize: both;
+    background-color: rgb(227, 227, 227);
+    display: grid;
+    overflow: hidden;
+    resize: both;
+}
+
+.window.normal {
+    grid-template-areas: 
+        "header header header"
+        "nav nav nav"
+        "menu main aside"
+        "footer footer footer";
+    grid-template-columns: auto 1fr auto;
+    grid-template-rows: 2rem auto 1fr auto;
+}
+
+.window>header {
+    grid-area: header;
+    padding: .3rem .3rem 0 0;
+    display: flex;
+    align-items: center;
+    overflow: hidden;
+}
+
+.window>header>label {
+    flex: 1;
+}
+
+.window>nav {
+    grid-area: nav;
+}
+
+.window>menu {
+    grid-area: menu;
+    padding: 0;
+}
+
+.window>main {
+    grid-area: main;
+    padding: .5rem;
+    overflow: hidden;
+    border: solid 1px var(--divider-color);
+}
+
+.window>aside {
+    grid-area: aside;
+}
+
+.window>footer {
+    grid-area: footer;
+}

package/src/desktop/window.js

@@ -0,0 +1,27 @@
+import React from 'react'
+import { Button, Icon } from '../html'
+import './window.css'
+
+export const Window = (props) => {
+
+    const { id, icon, title, children } = props
+
+    return (
+        <div className="window normal" draggable>
+            <header>
+                <Icon icon={icon} size="small" />
+                <label>{title}</label>
+                <Icon icon="close" clickable size="small" />
+            </header>
+            <nav>
+
+            </nav>
+            <menu></menu>
+            <main>
+                {children}x
+            </main>
+            <aside></aside>
+            <footer>x</footer>
+        </div>
+    )
+} 

package/src/domain/ContentEditor.js

@@ -249,7 +249,7 @@ export const StringEditor = ({ field, value = '', onChange, content, outlined })
       case FORMATS.COLOR: return <ColorField id={id} onChange={change} value={value}/>
       case FORMATS.HTML: return <Editor id={id} value={value} onChange={change} content={content} />
       case FORMATS.DATE: return <TextField outlined={outlined} id={id} type="date" label={label} value={value} onChange={change} readOnly={!editable} />
-      case FORMATS.TOKENS: return <TokenField id={id} label={label} onChange={change} readOnly={!editable} options={options} />
+      case FORMATS.TOKENS: return <TokenField id={id} label={label} onChange={change} readOnly={!editable} options={buildOptions()} />
       default:
         return options ? (
           <DropDown outlined={outlined} id={id} label={label} value={value} onChange={change} options={buildOptions()} readOnly={!editable} predictive={predictive} />

package/src/domain/ContentEditor.test.js

@@ -3,15 +3,19 @@ import { ContentEditor } from './ContentEditor'
 import { Content, FORMATS, TYPES } from './ContentType'
 import './ContentEditor.test.css'
 
+function buildTokenOptions() {
+    return [
+        {label: "One", value: 1 },
+        {label: "Two", value: 2 },
+        {label: "Thressse", value: 3 },
+    ]
+}
+
 const schema = {
     name  : { id: "name"  , type: TYPES.STRING, format: FORMATS.NONE, required: true, label: "Name" },
     field1: { id: "field1", type: TYPES.STRING, format: FORMATS.NONE, required: true, label: "field1", multivalue: true },
     field2: { id: "field2", type: TYPES.STRING, format: FORMATS.NONE, required: true, label: "field2" },
-    field3: { id: "field3", type: TYPES.STRING, format: FORMATS.TOKENS, required: true, label: "field3", options: [
-        {label: "One", value: 1 },
-        {label: "Two", value: 2 },
-        {label: "Three", value: 3 },
-    ] },
+    field3: { id: "field3", type: TYPES.STRING, format: FORMATS.TOKENS, required: true, label: "field3", options: buildTokenOptions },
     field4: { id: "field4", type: TYPES.STRING, format: FORMATS.COLOR, required: true, label: "Color" },
 }
 

package/src/domain/TablePage.js

@@ -272,7 +272,7 @@ const TableFilters = (props) => {
                 }
             }
         }
-        Object.values(filterSchema).forEach(field => field.section = null)
+        //Object.values(filterSchema).forEach(field => field.section = null)
         delete filterSchema.flows
         return filterSchema
     }, [schema])

package/src/html/table.js

@@ -15,6 +15,7 @@ export const DataTable = (props) => {
 
     const { columns = [], rows = [], onRowSelection, onSort, onCheckAll, editable, outlined, expanded = false } = props
     const [sortDir, setSortDir] = useState({})
+    const [allChecked, setAllChecked] = useState(false)
 
     function multiSort(array, sortObject = {}) {
 
@@ -65,6 +66,7 @@ export const DataTable = (props) => {
 
     function checkAll(id, value) {
         const ids = rows.map(row => row.id)
+        setAllChecked(value)
         if (onCheckAll) onCheckAll(ids, value)
     }
 
@@ -79,7 +81,7 @@ export const DataTable = (props) => {
                             const [rowspan, colspan] = type === TYPES.ENTITY ? [1, Object.values(item).filter(v=>v.column===true).length] : [2, 1]
                             return (
                                 <th key={id} rowSpan={rowspan} colSpan={colspan}>
-                                    {id === "checked" ? <CheckBox onChange={checkAll} /> : <Text key={`th_${id}`}>{label}</Text>}
+                                    {id === "checked" ? <CheckBox onChange={checkAll} value={allChecked} /> : <Text key={`th_${id}`}>{label}</Text>}
                                     {sortable ? <Icon icon="arrow_up" size="small" clickable /> : null}
                                 </th>
                             )

package/src/html/table.test.js

@@ -3,6 +3,14 @@ import { DataTable } from './table'
 
 const TableTest = (prop) => {
 
+
+    const [rows, setRows] = useState(
+        [
+            { id: 1, checked: false, name: "John Smith", thumb: "https://w7.pngwing.com/pngs/881/826/png-transparent-pikachu-ash-ketchum-pokemon-vrste-pikachu-leaf-flower-meme-thumbnail.png"},
+            { id: 2, checked: false, name: "Ann Martin" }
+        ]
+    )
+
     function select(row) {
         console.log('select',row)
     }
@@ -11,6 +19,11 @@ const TableTest = (prop) => {
         console.log('check', id, checked, c)
     }
 
+    function checkAll(ids, checked) {
+        const next = rows.map( row => Object.assign({}, row, { checked }))
+        setRows(next)
+    }
+
     const table = {
         columns : [
             { id: "checked", onChange: check },
@@ -18,15 +31,12 @@ const TableTest = (prop) => {
             { id: "thumb", label: "Thumb", type: "String", format: "IMG" },
 
         ],
-        rows: [
-            { checked: true, name: "John Smith", thumb: "https://w7.pngwing.com/pngs/881/826/png-transparent-pikachu-ash-ketchum-pokemon-vrste-pikachu-leaf-flower-meme-thumbnail.png"},
-            { checked: false, name: "Ann Martin" },
-        ]
+        rows
     }
 
     return (
         <>
-           <DataTable {...table} onRowSelection={select}/>
+           <DataTable {...table} onRowSelection={select} onCheckAll={checkAll}/>
         </>
     )
 }

package/src/html/tokenfield.css

@@ -1,5 +1,4 @@
 .tokenField {
-    max-height: 3.8rem;
     min-height: 3.8;
     position: relative;
     border-bottom: solid 1px var(--divider-color);

package/reactpreview.config.js

@@ -1,37 +0,0 @@
-const reactpreview = require("@reactpreview/config");
-
-module.exports = reactpreview.config({
-  /**
-   * Configure custom aliases (auto-detected if you use TypeScript).
-   */
-  alias: {
-    foo: "src/foo"
-  },
-
-  /**
-   * Configure a public assets directory.
-   */
-  publicDir: "public",
-
-  /**
-   * Set up a custom component to wrap around previewed components.
-   *
-   * Useful to set up context providers and CSS dependencies.
-   */
-  wrapper: {
-    path: "src/ReactPreviewWrapper.js",
-    componentName: "Wrapper"
-  },
-
-  /**
-   * Customise the exported React component name for SVG files.
-   */
-  svgr: {
-    componentName: "default"
-  },
-
-  /**
-   * Specify a custom Vite configuration.
-   */
-  vite: vite.UserConfig;
-});