@zuzjs/ui 0.2.3 → 0.2.5

package/src/context/_AppProvider.tsx

@@ -0,0 +1,116 @@
+import React, {
+    useCallback,
+    useEffect,
+    useMemo,
+    useReducer
+} from 'react'
+import PropTypes from 'prop-types'
+import AppContext from './AppContext'
+// import useAppReducer from '../hooks/useAppReducer'
+import AppTheme from './store/theme'
+let isMounted = true;
+import appSlice from './store/appbase'
+import combineReducers, { combineState } from './combineReducers'
+import reduceReducers from './reduceReducers'
+// const rootReducer = (state, action ) => ({
+//     ...state,
+//     ...action.payload
+// })
+
+// const rootReducer = combineReducers()
+
+const AppProvider = ({ 
+    children, 
+    // initialState = {}, 
+    reducers = {}, 
+    theme = {} 
+}) => {
+
+    const _dynamiceState = useMemo(() => {
+        const __ = {}
+        Object.keys(reducers).map(k => {
+            __[reducers[k].name] = [reducers[k].reducer, reducers[k].state]
+        })
+        return __
+    }, [reducers])
+
+    const _dynamiceReducers = useMemo(() => {
+        const __ = {}
+        Object.keys(reducers).map(k => {
+            __[reducers[k].name] = reduceReducers(reducers[k].reducer)
+        })
+        return __
+    }, [reducers])
+
+    const themeReducer = useCallback(() => {
+        (state, action) => ({
+            ...state,
+            ...action.payload
+        })
+    }, [])
+
+    // const [rootReducer, rootState] = useMemo(() => combineReducers({
+    //     theme: [themeReducer, new AppTheme({ theme }).get()],
+    //     [appSlice.name] : [appSlice.reducer, appSlice.state],
+    //     ..._dynamiceReducers
+    // }), [reducers]);
+
+    const [_, rootState] = combineState({
+        theme: [themeReducer, new AppTheme({ theme }).get()],
+        [appSlice.name] : [appSlice.reducer, appSlice.state],
+        ..._dynamiceState
+    })
+
+    const rootReducer = combineReducers({
+        theme: reduceReducers(themeReducer),
+        [appSlice.name] : reduceReducers(appSlice.reducer),
+        ..._dynamiceReducers
+    })
+
+    console.log(rootState)
+
+    const [state, dispatch] = useReducer(
+        rootReducer, 
+        rootState
+    );
+
+    useEffect(() => {
+        isMounted = true;
+        return () => {
+            isMounted = false;
+        }
+    }, [])
+
+    // const dispatch = useCallback(() => {
+    //     if(isMounted){
+    //         // let ags = { ...args, action: }
+    //         _dispatch();
+    //         // _dispatch({ action: action, payload: payload })
+    //     }
+    // }, [_dispatch]);
+
+    const providedValue = useMemo(
+        () => ({
+            ...rootState,
+            // defaultState,
+            dispatch
+        }),
+        [state]
+        // [defaultState, state]
+    )
+
+    return <AppContext.Provider value={providedValue}>{children}</AppContext.Provider>
+}
+
+AppProvider.defaultProps = {
+    reducers: {}
+    // initialState : {},
+}
+
+AppProvider.propTypes = {
+    children: PropTypes.node.isRequired,
+    // initialState: PropTypes.instanceOf(Object)
+    reducers: PropTypes.instanceOf(Object)
+}
+
+export default AppProvider

package/src/context/combineReducers.tsx

@@ -0,0 +1,47 @@
+export const combineState = reducers => {
+    const reducerKeys = Object.keys(reducers);
+    const reducerValues = Object.values(reducers);
+
+    let globalState
+    reducerKeys.forEach((k, i) => globalState = { ...globalState, [k]: reducerValues[i][1] }  )
+
+    let finalReducers = {}
+    reducerValues.forEach((v, i) => finalReducers = { ...finalReducers, [reducerKeys[i]] : v[0] });
+
+    return [
+        (state, action) => {
+            console.log('state', state)
+            console.log('action', action)
+            let hasStateChanged = false
+            const newState = {}
+            let nextStateForCurrentKey = {}
+            for(let i = 0; i < reducerKeys.length; i++){
+                const currentKey = reducerKeys[i]
+                const currentReducer = finalReducers[currentKey]
+                const prevStateForCurrentKey = state[currentKey]
+                nextStateForCurrentKey = currentReducer(
+                    prevStateForCurrentKey,
+                    action
+                )
+                hasStateChanged = hasStateChanged || nextStateForCurrentKey !== prevStateForCurrentKey
+                newState[currentKey] = nextStateForCurrentKey
+            }
+            return hasStateChanged ? newState : state
+        },
+        globalState
+    ]
+            
+}
+
+const combineReducers = slices => {
+    return (state, action) =>
+      Object.keys(slices).reduce(
+        (acc, prop) => ({
+          ...acc,
+          [prop]: slices[prop](acc[prop], action)
+        }),
+        state
+      )
+}
+
+export default combineReducers;

package/src/context/combineState.tsx

@@ -0,0 +1,14 @@
+const combineState = (state) => {
+    // const reducerKeys = Object.keys(state);
+    // const stateValues = Object.values(state);
+
+    // let globalState
+    
+    // reducerKeys.forEach((k, i) => globalState = { ...globalState, [k]: reducerValues[i][1] }  )
+
+    // console.log(globalState)
+
+    return state;
+}
+
+export default combineState

package/src/context/createSlice.tsx

@@ -0,0 +1,40 @@
+import React, { useReducer, useMemo } from 'react'
+import PropTypes from 'prop-types'
+import combineReducers from './combineReducers'
+
+const createSlice = ({
+    name,
+    initialState,
+    reducers
+}) => {
+
+    // const _dynamiceReducers = {}
+    // Object.keys(reducers).map(k => {
+    //     _dynamiceReducers[reducers[k].name] = [reducers[k].reducer, initialState]
+    // })
+
+    // const _keys = Object.keys(reducers);
+    // const [reducer, state] = combineReducers(_dynamiceReducers);
+
+    return {
+        name,
+        reducer: reducers,
+        actions: reducers,
+        state: initialState
+    }
+
+}
+
+createSlice.defaultProps = {
+    name: `app`,
+    initialState: {},
+    reducers: {}
+}
+
+createSlice.propTypes = {
+    name: PropTypes.string.isRequired,
+    initialState: PropTypes.instanceOf(Object).isRequired,
+    reducers: PropTypes.instanceOf(Object).isRequired
+}
+
+export default createSlice;

package/src/context/index.tsx

@@ -0,0 +1,6 @@
+import AppContext from './AppContext'
+
+export default AppContext;
+
+export { default as Provider } from './AppProvider';
+export { default as createSlice } from './createSlice';

package/src/context/reduceReducers.tsx

@@ -0,0 +1,6 @@
+const reduceReducers = (...reducers) => { 
+    return (state, action) =>
+      reducers.reduce((acc, nextReducer) => nextReducer(acc, action), state)
+}
+
+export default reduceReducers;

package/src/context/store/appbase.tsx

@@ -0,0 +1,19 @@
+import createSlice from '../createSlice'
+
+const appSlice = createSlice({
+    name: 'app',
+    initialState: {
+        debug: true,
+        version: 1.2,
+        loading: false
+    },
+    reducers: {
+        setCVersion: (state, action) => state.version = action.payload
+    }
+});
+
+export const {
+    setLoading
+} = appSlice.actions
+
+export default appSlice;

package/src/context/store/theme.tsx

@@ -0,0 +1,52 @@
+class AppTheme {
+
+    #mode;
+    #listen;
+    #lightTheme;
+    #darkTheme;
+
+    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.#lightTheme = {
+            //CORE
+            tag: "light",
+            dark: false,
+            primary: '#edeef5',
+            secondary: '#f9f9f9',
+            textColor: '#111111',
+            ...( "theme" in conf && "light" in conf.theme ? {...conf.theme.light} : {})
+        };
+        this.#darkTheme = {
+            //CORE
+            tag: "dark",
+            dark: true,
+            primary: '#21222d',
+            secondary: '#282a37',
+            textColor: '#f9f9f9',
+            ...( "theme" in conf && "dark" in conf.theme ? {...conf.theme.dark} : {})
+        };
+    }
+
+    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;
+        }
+    }
+
+
+}
+
+export default AppTheme

package/src/core/defaultTheme.ts

@@ -0,0 +1,89 @@
+class AppTheme {
+
+    #mode;
+    #listen;
+    #lightTheme;
+    #darkTheme;
+
+    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.#lightTheme = {
+            //CORE
+            tag: "light",
+            dark: false,
+            color: "#3a43ac",
+            primary: '#edeef5',
+            secondary: '#e8e9f0',
+            textColor: '#111111',
+            borderColor: '#dcdce1',
+            //APP
+            app: {
+                action: 'rgba(0,0,0,0.1)',
+                actionHover: 'rgba(255,255,255,0.1)',
+                actionActive: 'rgba(0,0,0,0.8)',
+                actionDisabled: 'rgba(255,255,255,0.01)',
+                shimmerBG: '#383a48',
+                shimmerFrom: '#383a48',
+                shimmerTo: '#4a4c5b',
+                iconBG: '#4a4c5b',
+                icon: '#111111',
+                sidebarHover: 'rgba(255,255,255,0.2)',
+                sidebarActive: 'rgba(255,255,255,1)',
+                toolbar: '#d5d6dc',
+                tool: 'transparent',
+                toolActive: 'rgba(255,255,255,0.75)',
+                toolHover: 'rgba(255,255,255,0.5)',
+            }
+        };
+        this.#darkTheme = {
+            //CORE
+            tag: "dark",
+            dark: true,
+            color: "#3a43ac",
+            primary: '#21222d',
+            secondary: '#282a37',
+            textColor: '#f9f9f9',
+            borderColor: '#353640',
+            //APP
+            app: {
+                action: 'rgba(255,255,255,0.05)',
+                actionHover: 'rgba(255,255,255,0.1)',
+                actionActive: 'rgba(255,255,255,0.2)',
+                actionDisabled: 'rgba(255,255,255,0.01)',
+                shimmerBG: '#383a48',
+                shimmerFrom: '#383a48',
+                shimmerTo: '#4a4c5b',
+                iconBG: '#4a4c5b',
+                icon: '#ffffff',
+                toolbar: '#21222d',
+                tool: 'transparent',
+                toolHover: '#2f3144',
+                toolActive: '#2f3144',                
+            }
+        };
+    }
+
+    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;
+        }
+    }
+
+
+}
+
+export default AppTheme

package/src/core/index.ts

@@ -0,0 +1,285 @@
+import {
+    cloneElement,
+    isValidElement
+} from 'react'
+import type { ReactNode, ReactElement } from 'react'
+import Children from 'react-children-utilities';
+import Cookies from 'js-cookie'
+import axios from 'axios'
+import { 
+    cssPropsDirect, 
+    cssProps, 
+    cssPropsVals, 
+    cssPropsIgnore,
+    cssColors
+} from './styles'
+import { nanoid } from 'nanoid'
+import Input from '../comps/input' 
+import Select from '../comps/select' 
+import Button from '../comps/button' 
+import { generateModalRoutes, generatePreservedRoutes, generateRegularRoutes } from './router'
+
+const makeCSSValue = (k : any, v : any, o : any) => {
+    let ignore = cssPropsIgnore.indexOf(o) == -1;
+    if(k in cssPropsDirect && ignore == true){
+        // return cssPropsDirect[k];
+        return cssPropsDirect[k].indexOf(`__VALUE__`) > - 1 ? 
+            cssPropsDirect[k].replaceAll(`__VALUE__`, `${v}${"number" == typeof v ? `px` : ``}`) 
+            : cssPropsDirect[k];
+    }
+    let unit = "number" == typeof v && ignore ? `px` : ``;
+    if(cssColors.indexOf(v) > -1){
+        v = `var(--colors-${v.replaceAll(`.`, `-`)})`;
+        unit = ``;
+    }
+    else if(v in cssPropsVals){
+        v = cssPropsVals[v];
+    }
+    return `${k}:${v}${unit};`;
+}
+
+const buildCSS = (props : any) => {
+    let css = ``;
+    Object.keys(props).map(k => {
+        css += k in cssProps ? makeCSSValue(cssProps[k], props[k], k) : '';
+    });
+    return css;
+}
+
+const setCSSVar = ( key : string, val : string ) => {
+    document.documentElement.style.setProperty(`--${key}`, val);
+}
+
+const isUrl = (u : string) => {
+    let url;
+    try{
+        url = new URL(u);
+    }catch(_){
+        return false;
+    }
+    return url.protocol === 'http:' || url.protocol === 'https:'
+}
+
+const isEmail = (e : string) => {
+	let reg = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/ ;
+	return reg.test(e);
+}
+
+const isIPv4 = (ipaddress : string) => {  
+	return /^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/.test(ipaddress);
+}
+
+const randstr = function(len? : number){	
+	var text = ""; var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";	
+    len = len || 10;
+	for (var i = 0; i < len; i++){ 
+		text += possible.charAt(Math.floor(Math.random() * possible.length)); 
+	}
+	return text;    
+}
+
+const setCookie = (key : string, value : any, expiry? : number)  => Cookies.set(key, value, { expires: expiry || 7 })
+
+const getCookie = (key : string) => Cookies.get(key) || null;
+
+const removeCookie = (key : string) => Cookies.remove(key)
+
+const buildFormData = (data : object) : FormData => {
+    var formData = new FormData();
+    var _data = Cookies.get();
+    Object.keys(_data).map(k => formData.append(k, _data[k]));
+    Object.keys(data).filter(x => x != 'files').map(k => formData.append(k, data[k]));
+    if('files' in data) [data['files']].map((f: any) => formData.append('files[]', f));
+    return formData;
+}
+
+const grab = async (uri : string, data : object, timeout : number = 60, fd : object = null, progress? : Function, bearer : string = `__ha`) => {
+    var Bearer = getCookie(bearer) || `${randstr(8)}^${randstr(8)}`;
+	window['__grabToken'] = axios.CancelToken.source();
+    if(fd){
+        return new Promise((resolve, reject) => {
+            axios({
+                method: "post",
+                url: uri,
+                data: buildFormData(data),
+                timeout: 1000 * timeout,
+                cancelToken: window['__grabToken'].token,
+                headers: {
+                    'Content-Type': 'multipart/form-data',
+                    'Authorization': `Bearer ${Bearer}`
+                },
+                onUploadProgress: ev => {
+                    //TODO: Add progress
+                    // if(progress) progress(ev.)
+                }
+            })
+            .then(resp => {
+                if(resp.data && "kind" in resp.data){
+                    resolve(resp.data)
+                }else{
+                    reject(resp.data)
+                }            
+            })
+            .catch(err => reject(err));
+        })
+    }
+    return new Promise((resolve, reject) => {
+        axios.post(
+            uri,
+            {
+                ...Cookies.get(),
+                ...data,
+                __ustmp: new Date().getTime() / 1000
+            },
+            {
+                timeout: 1000 * timeout,
+                headers: {
+                    'Content-Type': 'application/json',
+                    'Authorization': `Bearer ${Bearer}`
+                },
+                cancelToken: window['__grabToken'].token
+            }
+        )
+        .then(resp => {
+            if(resp.data && "kind" in resp.data){
+                resolve(resp.data)
+            }else{
+                reject(resp.data)
+            }            
+        })
+        .catch(err => reject(err));
+    })
+}
+
+const el = (e : string) => document.querySelector(e);
+
+const byName = (e : string) => document.querySelector(`*[name="${e}"]`);
+
+const byId = (e : string) => document.getElementById(e);
+
+const addProps = (children : any, prop : any) => {
+    let form = {}
+    let allowedFields = [Input, Select, Button];
+    let child =  Children.deepMap(children, c => {
+        if(allowedFields.indexOf(c['type']) > -1 && c['props'] && !form[c['props'].name]){
+            form[c['props'].name] = c['props'].value || null;
+        }
+        let Clone = cloneElement(c as ReactElement<any>, prop);
+        return Clone;
+    });
+
+    return {
+        children : child,
+        fields: form
+    }
+}
+
+const ucfirst = ( str : string ) => {
+    return str.charAt(0).toUpperCase() + str.slice(1);
+}
+
+const filterStyleProps = (props : any) => {
+
+    const pks = Object.keys(props);
+    const css = Object.keys(cssProps);
+    let filter = {}
+    css.filter(x => pks.includes(x))
+    
+        // .map(k => filter[k] = props[k].toString());
+    return filter;
+    // const allowed = Object.keys(props);
+    // let allowed = Object.keys(cssProps);
+    
+    // return Object.keys(props)
+    //         .filter( k => allowed.includes(k))
+    //         .reduce( (o, k) => {
+    //             // console.log(o)
+    //             console.log(k, props[k])
+    //             // o[k] = props[k].toString();
+    //             // return o;
+    //         })
+    // return [props].filter( row => (
+    //     Object.keys(row)
+    //         .map(key => css.includes(key))
+    // ));
+}
+
+const filterHTMLProps = (props : any) => {
+    const pks = Object.keys(props);
+    const css = Object.keys(cssProps);
+    let filter = {}
+    pks.filter(x => {
+        if(x!= `for` && !css.includes(x)){
+            filter[x] = props[x]
+        }
+    })
+    return filter;
+}
+
+const uuid = () => nanoid()
+
+const addScript = (src: string, callback: () => any) => {
+    var s = document.createElement('script')
+    s.setAttribute('src', src)
+    s.addEventListener('load', callback, false)
+    document.body.appendChild(s)
+}
+
+const shuffleArray = array => {
+    for (let i = array.length - 1; i > 0; i--) {
+      const j = Math.floor(Math.random() * (i + 1));
+      [array[i], array[j]] = [array[j], array[i]];
+    }
+    return array
+}
+
+const getUriParams = () => {
+	var search = location.search.substring(1);
+	if(search=='') return JSON.parse('{}');	
+	var xny = {};
+	if("URLSearchParams" in window){
+		var items = new URLSearchParams(search);
+		for(const [k, v] of items){
+			xny[k] = v || ``;
+		}
+	}else{	
+		try{
+			xny = JSON.parse('{"' + decodeURI(search).replace(/"/g, '\\"').replace(/&/g, '","').replace(/=/g,'":"') + '"}');
+		}catch(e){
+			xny = {};
+		}
+	}
+	return xny;
+}
+
+const rgb2hex = rgb => `#${rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/).slice(1).map(n => parseInt(n, 10).toString(16).padStart(2, '0')).join('')}`
+
+export {
+    addProps,
+    addScript,
+    buildCSS,
+    buildFormData,
+    byName,
+    byId,
+    el,    
+    grab,
+    isEmail,
+    isIPv4,
+    isUrl,
+    randstr,
+    setCSSVar,
+    getCookie,
+    setCookie,
+    removeCookie,
+    ucfirst,
+    filterStyleProps,
+    filterHTMLProps,
+    uuid,
+    shuffleArray,
+    getUriParams,
+    rgb2hex,
+    generateModalRoutes, 
+    generatePreservedRoutes, 
+    generateRegularRoutes
+}
+