@zuzjs/ui 0.2.8 → 0.3.1

package/src/comps/image.tsx

@@ -9,17 +9,25 @@ import Box from './box'
 
 const Image = forwardRef((props : { [ key: string ] : any }, ref : LegacyRef<HTMLImageElement>) => {
 
-    const [photo, status] = useImage(props.src, 'anonymous', 'origin');
+    const { src, isLoading, error } = useImage({ srcList: props.src, useSuspense: false });
     
     return (
         <ClassNames>
-            {({ css, cx }) => <picture className={cx(css`${buildCSS({ flex: true })}`)}>
-                {status == 'loading' && <Box className={`${props.as ? `${props.as} ` : ``}${cx(css`background: #eee;${buildCSS(props)}`)}`} />}
-                {status == 'loaded' && <img src={props.src}
-                className={`${props.as ? `${props.as} ` : ``}${cx(css`${buildCSS(props)}`)}`} 
-                ref={ref} />}
-            </picture>}
+            {({ css, cx }) => <>
+                {isLoading && <Box className={`${props.as ? `${props.as} ` : ``}${cx(css`background: #eee;${buildCSS(props)}`)}`} />}
+                {!isLoading && <img src={src}
+                    className={`${props.as ? `${props.as} ` : ``}${cx(css`${buildCSS(props)}`)}`} 
+                    ref={ref} />}
+            </>}
         </ClassNames>
+        // <ClassNames>
+        //     {({ css, cx }) => <picture className={cx(css`${buildCSS({ flex: true })}`)}>
+        //         {status == 'loading' && <Box className={`${props.as ? `${props.as} ` : ``}${cx(css`background: #eee;${buildCSS(props)}`)}`} />}
+        //         {status == 'loaded' && <img src={props.src}
+        //         className={`${props.as ? `${props.as} ` : ``}${cx(css`${buildCSS(props)}`)}`} 
+        //         ref={ref} />}
+        //     </picture>}
+        // </ClassNames>
     )
 })
 

package/src/comps/input.tsx

@@ -7,7 +7,7 @@ import {
 } from 'react';
 import { ClassNames } from '@emotion/react'
 import { nanoid } from 'nanoid';
-import { buildCSS } from '../core'
+import { cleanProps, buildCSS } from '../core'
 import { STORE_FORM_KEY } from '../context/AppProvider'
 import useDispatch from '../hooks/useDispatch'
 import useStore from '../hooks/useStore'
@@ -32,8 +32,10 @@ const Input = forwardRef((props : { [ key: string ] : any }, ref : LegacyRef<HTM
         form,
         touched,
         onSubmit,
+        value,
         defaultValue,
-        fref
+        fref,
+        autoComplete
     } = props;
 
     const dispatch = useDispatch(STORE_FORM_KEY)
@@ -48,13 +50,16 @@ const Input = forwardRef((props : { [ key: string ] : any }, ref : LegacyRef<HTM
     return (
         <ClassNames>
             {({ css, cx }) => <El
+                {...cleanProps(props)}
                 type={type || `text`} 
                 placeholder={placeholder || undefined}
+                autoComplete={autoComplete || undefined}
                 name={name || nanoid()}
                 multiple={type == 'file' ? multiple : undefined}
                 accept={accept || `*`}
                 className={`${as ? `${as} ` : ``}f ${cx(css`${_defaultCSS}${buildCSS(props)}&:hover {${buildCSS(props.hover || {})}} &:focus {${buildCSS(props.focus || {})}}`)}`} 
                 ref={_ref}
+                value={value || undefined}
                 defaultValue={defaultValue || ``}
                 onKeyUp={(e : SyntheticEvent) => {
                     let k = e['keyCode'] || ['which'];

package/src/comps/toaster.tsx

@@ -6,6 +6,7 @@ class Toaster {
     #startTop : number
     #tout : null
     #defaultTimeLeft : number
+    #root : string
 
     constructor(config?: { 
         root : string,
@@ -14,12 +15,13 @@ class Toaster {
         this.#startTop = 20
         this.#defaultTimeLeft = 4
         const rootID = config?.root || `toast-container`;
-        if(document.querySelector(`#${rootID}`)) return;
+        this.#root = rootID;
+        if(window.document.querySelector(`#${rootID}`)) return;
         var self = this;
-        var root = document.createElement('div');
+        var root = window.document.createElement('div');
 		root.id = rootID;
-		document.body.appendChild(root);
-        this.#container = document.querySelector(`#${rootID}`)       
+		window.document.body.appendChild(root);
+        this.#container = window.document.querySelector(`#${rootID}`)       
     }
 
     show = (
@@ -57,8 +59,8 @@ class Toaster {
         var self = this;
         var tout = null,
         ID = 'toast-' + nanoid(),
-        toast = document.createElement('div'),
-        toastBG = document.createElement('div');
+        toast = window.document.createElement('div'),
+        toastBG = window.document.createElement('div');
         
         toast.id = ID;
         toast.style.backgroundColor = `#111`
@@ -76,7 +78,7 @@ class Toaster {
 
         toast.innerHTML = config.message || `You haven't passed "message" in this toast`;
 
-        self.#container.appendChild(toast);
+        (self.#container || window.document.querySelector(`#${self.#root}`)).appendChild(toast);
 
         self.arrangeToasts()
         .then(() => {

package/src/context/AppProvider.tsx

@@ -7,6 +7,7 @@ import React, {
 import PropTypes from 'prop-types'
 import AppContext from './AppContext'
 import AppTheme from './store/theme'
+import AppLang from './store/lang'
 
 let isMounted = true;
 export const STORE_KEY = `__zuzjs`
@@ -32,7 +33,8 @@ const rootReducer = (state, action ) => ({
 const AppProvider = ({ 
     children, 
     initialState = {}, 
-    theme = {} 
+    theme = {},
+    lang = {}
 }) => {
 
 
@@ -46,7 +48,8 @@ const AppProvider = ({
     const rootState = useMemo(() => ({ 
         ...defaultState,
         ...initialState,
-        theme: new AppTheme({ theme }).get()
+        theme: new AppTheme({ theme }).get(),
+        lang: new AppLang({ lang }).get(),
     }), [initialState])
 
     const [state, _dispatch] = useReducer(rootReducer, rootState);
@@ -89,13 +92,15 @@ const AppProvider = ({
 
 AppProvider.defaultProps = {
     theme: {},
+    lang: {},
     initialState : {},
 }
 
 AppProvider.propTypes = {
     children: PropTypes.node.isRequired,
     initialState: PropTypes.instanceOf(Object),
-    theme: PropTypes.instanceOf(Object)
+    theme: PropTypes.instanceOf(Object),
+    lang: PropTypes.instanceOf(Object)
 }
 
 export default AppProvider

package/src/context/store/lang.tsx

@@ -0,0 +1,26 @@
+class AppLang {
+
+    #mode;
+    #listen;
+    #lang;
+
+    constructor(_conf){
+        const conf = _conf || {}
+        this.#listen = "listen" in conf ? conf.listen : (mod) => { console.log(`Lang switched to ${mod}`); };
+        this.#mode = conf.mode || "en";
+        this.#lang = {
+            //CORE
+            tag: "en",
+            ...( "lang" in conf ? {...conf.lang} : {})
+        };
+    }
+
+    get = () => {
+        let self = this;
+        return self.#lang
+    }
+
+
+}
+
+export default AppLang

package/src/context/store/theme.tsx

@@ -8,7 +8,7 @@ class AppTheme {
     constructor(_conf){
         const conf = _conf || {}
         this.#listen = "listen" in conf ? conf.listen : (mod) => { console.log(`Theme switched to ${mod}`); };
-        this.#mode = conf.mode || "auto";
+        this.#mode = conf.mode || conf.theme.mode || "auto";
         this.#lightTheme = {
             //CORE
             tag: "light",
@@ -31,19 +31,20 @@ class AppTheme {
 
     get = () => {
         let self = this;
-        // if(self.#mode === "auto"){
-        //     window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event => {
-        //         self.#mode = event.matches ? "dark" : "light";
-        //         self.#listen(self.#mode);
-        //     });
-        //     return window.matchMedia && 
-        //         window.matchMedia('(prefers-color-scheme: dark)').matches ? 
-        //         self.#darkTheme : self.#lightTheme;
-        // }else 
-        if(self.#mode === "light"){
-            return self.#lightTheme;
-        }else if(self.#mode === "dark"){
-            return self.#darkTheme;
+        if(self.#mode === "auto"){
+            window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event => {
+                self.#mode = event.matches ? "dark" : "light";
+                self.#listen(self.#mode);
+            });
+            return window.matchMedia && 
+                window.matchMedia('(prefers-color-scheme: dark)').matches ? 
+                self.#darkTheme : self.#lightTheme;
+        }else{ 
+            if(self.#mode === "light"){
+                return self.#lightTheme;
+            }else if(self.#mode === "dark"){
+                return self.#darkTheme;
+            }
         }
     }
 

package/src/core/defaultTheme.ts

@@ -67,19 +67,20 @@ class AppTheme {
 
     get = () => {
         let self = this;
-        // if(self.#mode === "auto"){
-        //     window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event => {
-        //         self.#mode = event.matches ? "dark" : "light";
-        //         self.#listen(self.mode);
-        //     });
-        //     return window.matchMedia && 
-        //         window.matchMedia('(prefers-color-scheme: dark)').matches ? 
-        //         self.#darkTheme : self.#lightTheme;
-        // }else 
-        if(self.#mode === "light"){
-            return self.#lightTheme;
-        }else if(self.#mode === "dark"){
-            return self.#darkTheme;
+        if(self.#mode === "auto"){
+            window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event => {
+                self.#mode = event.matches ? "dark" : "light";
+                self.#listen(self.#mode);
+            });
+            return window.matchMedia && 
+                window.matchMedia('(prefers-color-scheme: dark)').matches ? 
+                self.#darkTheme : self.#lightTheme;
+        }else{ 
+            if(self.#mode === "light"){
+                return self.#lightTheme;
+            }else if(self.#mode === "dark"){
+                return self.#darkTheme;
+            }
         }
     }
 

package/src/core/index.ts

@@ -38,6 +38,18 @@ const makeCSSValue = (k : any, v : any, o : any) => {
     return `${k}:${v}${unit};`;
 }
 
+const cleanProps = (props : any) => {
+    let _props = { ...props }
+    Object.keys(_props).map(k => {
+        if(k in cssProps){
+            delete _props[k]
+        }
+    });
+    let _extras = [`as`, `hover`, `bref`]
+    _extras.map(x => x in _props && delete _props[x])
+    return _props
+}
+
 const buildCSS = (props : any) => {
     let css = ``;
     Object.keys(props).map(k => {
@@ -78,7 +90,7 @@ const randstr = function(len? : number){
 	return text;    
 }
 
-const setCookie = (key : string, value : any, expiry? : number)  => Cookies.set(key, value, { expires: expiry || 7 })
+const setCookie = (key : string, value : any, expiry? : number, host? : string)  => Cookies.set(key, value, { expires: expiry || 7, domain: host || window.location.host })
 
 const getCookie = (key : string) => Cookies.get(key) || null;
 
@@ -254,10 +266,65 @@ const getUriParams = () => {
 
 const rgb2hex = rgb => `#${rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/).slice(1).map(n => parseInt(n, 10).toString(16).padStart(2, '0')).join('')}`
 
+const getHostname = url => {
+	if(window.URL){
+		let u = new window.URL(url);
+		return u.hostname
+	}else{
+		var a = document.createElement(`a`)
+		a.href = url
+		return a.hostname.replace("www.", "")
+	}
+}
+
+const imgPromiseFactory = ({decode = true, crossOrigin = ''}) =>
+(src): Promise<void> => {
+  return new Promise((resolve, reject) => {
+    const i = new Image()
+    if (crossOrigin) i.crossOrigin = crossOrigin
+    i.onload = () => {
+      decode && i.decode ? i.decode().then(resolve).catch(reject) : resolve()
+    }
+    i.onerror = reject
+    i.src = src
+  })
+}
+
+const parseFilename = nm => {
+    var re = /(?:\.([^.]+))?$/;
+    return {
+        name: nm.split('.').slice(0, -1).join('.'),
+        ext: re.exec(nm)[1]
+    }
+}
+
+const camelCase = str => str.replace(":", "-").replace(/-([a-z])/g, function (g) { return g[1].toUpperCase(); });
+
+const getMousePosition = e => {
+    const pos = {
+      x: (e as MouseEvent).clientX,
+      y: (e as MouseEvent).clientY,
+    };
+  
+    const touch = (e as TouchEvent).changedTouches;
+  
+    if (touch) {
+      pos.x = touch[0].clientX;
+      pos.y = touch[0].clientY;
+    }
+  
+    if (!pos.x || pos.x < 0) pos.x = 0;
+  
+    if (!pos.y || pos.y < 0) pos.y = 0;
+  
+    return pos;
+}
+
 export {
     addProps,
     addScript,
     buildCSS,
+    cleanProps,
     buildFormData,
     byName,
     byId,
@@ -266,6 +333,7 @@ export {
     isEmail,
     isIPv4,
     isUrl,
+    imgPromiseFactory,
     randstr,
     setCSSVar,
     getCookie,
@@ -280,6 +348,10 @@ export {
     rgb2hex,
     generateModalRoutes, 
     generatePreservedRoutes, 
-    generateRegularRoutes
+    generateRegularRoutes,
+    getHostname,
+    parseFilename,
+    camelCase,
+    getMousePosition
 }
 

package/src/hooks/index.tsx

@@ -5,4 +5,5 @@ export { default as useDispatch } from './useDispatch'
 export { default as useResizeObserver } from './useResizeObserver'
 export { default as useDevice } from './useDevice'
 export { default as useToast } from './useToast'
-// export { default as useRouter } from './useRouter'
+export { default as useLang } from './useLang'
+export { default as useContextMenu } from './useContextMenu'

package/src/hooks/useContextMenu.tsx

@@ -0,0 +1,88 @@
+import { SyntheticEvent, useEffect, useState, useRef } from "react"
+import ReactDOM from 'react-dom/client'
+import Box from '../comps/box'
+import { getMousePosition } from "../core"
+
+const useContextMenu = (contextID : string) => {
+
+    const ID = `context-${contextID}`
+    const [visible, setVisible] = useState(false)
+    const [root, setRoot] = useState(null)
+    const nodeRef = useRef<HTMLDivElement>(null);
+
+    const el = (e : string) => window.document.createElement(e)
+
+    function checkBoundaries(x: number, y: number) {
+        if (nodeRef.current) {
+          const { innerWidth, innerHeight } = window;
+          const { offsetWidth, offsetHeight } = nodeRef.current;
+    
+          if (x + offsetWidth > innerWidth) x -= x + offsetWidth - innerWidth;
+    
+          if (y + offsetHeight > innerHeight) y -= y + offsetHeight - innerHeight;
+        }
+    
+        return { x, y };
+    }
+
+    const hide = () => {
+        try{
+            root?.unmount()
+            setRoot(null)
+        }catch(e){}
+    }
+
+    const Menu = (e: MouseEvent, items : Array<any>) => {
+
+        const p = getMousePosition(e);
+        const { x, y } = checkBoundaries(p.x, p.y);
+
+        return (
+            <Box 
+                bref={nodeRef}
+                flex dir={`cols`}
+                fixed
+                top={y}
+                left={x}
+                as={`zuz-contextmenu ${ID}`}>
+                {items && items.map((m, i) => m.id == `line` ? <Box as={`line`} key={`line-${i}-${m.id}`} /> : <button 
+                    key={`cm-${i}-${m.id}`} 
+                    onClick={ev => {
+                        if(m.onClick){
+                            m.onClick(ev, m)
+                        }else{
+                            console.log(`No onClick eventFound`)
+                        }
+                        hide()
+                    }}>{m.label}</button>)}
+            </Box>
+        )
+    }
+
+    const show = (e : MouseEvent, items : Array<any>) => {
+        e.preventDefault(); e.stopPropagation();
+        if(!window.document.querySelector(`#context-${contextID}`)){
+            let div = el(`div`)
+            div.id = ID
+            window.document.body.appendChild(div)
+        }
+        root.render(Menu(e, items))        
+    }
+
+    useEffect(() => {
+        if(!window.document.querySelector(`#context-${contextID}`)){
+            let div = el(`div`)
+            div.id = ID
+            window.document.body.appendChild(div)
+        }
+        if(!root) setRoot(ReactDOM.createRoot(document.getElementById(ID)))
+    }, [root])
+
+    return {
+        show,
+        hide
+    }
+
+}
+
+export default useContextMenu

package/src/hooks/useImage.tsx

@@ -1,58 +1,84 @@
-import React, { useRef, useLayoutEffect, useState } from 'react'
+import React, {useState} from 'react'
+import { imgPromiseFactory } from '../core'
 
-const useImage = (url, crossOrigin, referrerpolicy) => {
-    
-    const statusRef = useRef('loading')
-    const imageRef = useRef<HTMLImageElement>();
+export type useImageProps = {
+    srcList: string | string[]
+    imgPromise?: (...args: any[]) => Promise<void>
+    useSuspense?: boolean
+}
+
+const removeBlankArrayElements = (a) => a.filter((x) => x)
+const stringToArray = (x) => (Array.isArray(x) ? x : [x])
+const cache = {}
 
-    const [_, setStateToken] = useState(0);
+// sequential map.find for promises
+const promiseFind = (arr, promiseFactory) => {
+    let done = false
+    return new Promise((resolve, reject) => {
+      const queueNext = (src) => {
+        return promiseFactory(src).then(() => {
+          done = true
+          resolve(src)
+        })
+      }
+  
+      arr
+        .reduce((p, src) => {
+          // ensure we aren't done before enqueuing the next source
+          return p.catch(() => {
+            if (!done) return queueNext(src)
+          })
+        }, queueNext(arr.shift()))
+        .catch(reject)
+    })
+}
 
-    const oldUrl = useRef();
-    const oldCrossOrigin = useRef();
-    const oldReferrerPolicy = useRef();
+const useImage = ({
+    srcList,
+    imgPromise = imgPromiseFactory({decode: true}),
+    useSuspense = true,
+} : useImageProps) : {src: string | undefined; isLoading: boolean; error: any} => {
 
-    if(oldUrl.current !== url || oldCrossOrigin.current !== crossOrigin || oldReferrerPolicy.current !== referrerpolicy){
-        statusRef.current = 'loading';
-        imageRef.current = undefined;
-        oldUrl.current = url;
-        oldCrossOrigin.current = crossOrigin;
-        oldReferrerPolicy.current = referrerpolicy;
+    const [, setIsSettled] = useState(false)
+    const sourceList = removeBlankArrayElements(stringToArray(srcList))
+    const sourceKey = sourceList.join('')
+
+    if (!cache[sourceKey]) {
+        // create promise to loop through sources and try to load one
+        cache[sourceKey] = {
+          promise: promiseFind(sourceList, imgPromise),
+          cache: 'pending',
+          error: null,
+        }
     }
 
-    useLayoutEffect(
-        function(){
-            
-            if(!url) return;
-            var img = document.createElement('img');
-
-            function onload(){
-                statusRef.current = 'loaded';
-                imageRef.current = img;
-                setStateToken(Math.random());
-            }
-
-            function onerror(){
-                statusRef.current = 'failed';
-                imageRef.current = undefined;
-                setStateToken(Math.random());
-            }
-            
-            img.addEventListener('load', onload);
-            img.addEventListener('error', onerror);
-            crossOrigin && (img.crossOrigin = crossOrigin);
-            referrerpolicy && (img.referrerPolicy = referrerpolicy);
-            img.src = url;
-
-            return function cleanup() {
-                img.removeEventListener('load', onload);
-                img.removeEventListener('error', onerror);
-            };
-
-        },
-        [url, crossOrigin, referrerpolicy]
-    );
-
-    return [imageRef.current, statusRef.current];
+    // when promise resolves/reject, update cache & state
+    if (cache[sourceKey].cache === 'resolved') {
+        return {src: cache[sourceKey].src, isLoading: false, error: null}
+    }
+
+    if (cache[sourceKey].cache === 'rejected') {
+        if (useSuspense) throw cache[sourceKey].error
+        return {isLoading: false, error: cache[sourceKey].error, src: undefined}
+    }
+
+    cache[sourceKey].promise
+        // if a source was found, update cache
+        // when not using suspense, update state to force a rerender
+        .then((src) => {
+            cache[sourceKey] = {...cache[sourceKey], cache: 'resolved', src}
+            if (!useSuspense) setIsSettled(sourceKey)
+        })
+        // if no source was found, or if another error occurred, update cache
+        // when not using suspense, update state to force a rerender
+        .catch((error) => {
+            cache[sourceKey] = {...cache[sourceKey], cache: 'rejected', error}
+            if (!useSuspense) setIsSettled(sourceKey)
+        })
+    // cache[sourceKey].cache === 'pending')
+    if (useSuspense) throw cache[sourceKey].promise
+    return {isLoading: true, src: undefined, error: null}
+
 }
 
 export default useImage;

package/src/hooks/useLang.tsx

@@ -0,0 +1,9 @@
+import { useContext, useEffect } from 'react'
+import AppContext from '../context'
+
+const useLang = (mod = 'en') => {
+    const state = useContext(AppContext)
+    return state['lang'] || {};
+}
+
+export default useLang

package/src/index.tsx

@@ -4,6 +4,8 @@ import { Provider, createSlice } from './context'
 export * from './core/index';
 export * from './hooks/index';
 
+export { Link } from "react-router-dom"
+
 export { default as App } from './comps/app'
 export { default as Box } from './comps/box'
 export { default as Button } from './comps/button'

package/src/scss/props.scss

@@ -57,4 +57,14 @@ $colors: 'fff','111','222','333','444','555','666','777','888','999';
     @if $i % 2 == 0 {
         .s#{$i} { font-size: #{$i}px; }
     }
+}
+
+/*
+    BoldSize
+    It will generate .b400 { font-weight: 400; } from '400'
+*/
+$bsizes: 100,200,300,400,500,600,700,800,900;
+.bold{ font-weight: bold; }
+@each $n in $bsizes{
+    .b#{$n} { font-weight: #{$n}; }
 }