ywana-core8 0.0.407 → 0.0.408

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ywana-core8",
-  "version": "0.0.407",
+  "version": "0.0.408",
   "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/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/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;
-});