@zuzjs/ui 0.2.4 → 0.2.6

package/src/comps/toaster.tsx

@@ -0,0 +1,115 @@
+import { nanoid } from 'nanoid'
+
+class Toaster {
+    
+    #container : any;
+    #startTop : number
+    #tout : null
+    #defaultTimeLeft : number
+
+    constructor(config?: { 
+        root : string,
+        duration: number
+    }){
+        this.#startTop = 20
+        this.#defaultTimeLeft = 4
+        const rootID = config?.root || `toast-container`;
+        if(document.querySelector(`#${rootID}`)) return;
+        var self = this;
+        var root = document.createElement('div');
+		root.id = rootID;
+		document.body.appendChild(root);
+        this.#container = document.querySelector(`#${rootID}`)       
+    }
+
+    show = (
+        message: string | null,
+        duration?: number
+    ) => {
+        let self = this;
+        self.toast({
+            message: message,
+            duration: duration
+        });
+    }
+
+    dismiss(ID: string){
+        let self = this
+        self.#tout && clearTimeout(self.#tout);
+        setTimeout(()=>{
+            let tost = document.querySelector(`#${ID}`);
+            tost && tost.classList.remove("visible");			
+            // tost && tost.classList.add("hidden");			
+            setTimeout(()=>{
+                try{
+                    document.getElementById(ID).parentNode.removeChild(document.getElementById(ID));
+                }catch(e){}
+                self.arrangeToasts();
+            }, 200);
+        }, 200);
+    }
+
+    toast(config?: {
+        message: string | null,
+        duration: number
+    }){
+        
+        var self = this;
+        var tout = null,
+        ID = 'toast-' + nanoid(),
+        toast = document.createElement('div'),
+        toastBG = document.createElement('div');
+        
+        toast.id = ID;
+        toast.style.backgroundColor = `#111`
+        toast.style.color = `#fff`
+        toast.style.transform = `translate(-50%, -300px) scale(0.5)`;
+        toast.style.position = `fixed`
+        toast.style.padding = `6px 12px`
+        toast.style.fontSize = `14px`
+        toast.style.left = `50%`
+        toast.style.maxWidth = `95%`
+        toast.style.zIndex = `2147483647`
+        toast.classList.add( 'zuz-toast' );
+        toast.classList.add( 'fixed' );
+        toast.classList.add( 'f' );
+
+        toast.innerHTML = config.message || `You haven't passed "message" in this toast`;
+
+        self.#container.appendChild(toast);
+
+        self.arrangeToasts()
+        .then(() => {
+            setTimeout(()=>{
+                let tost = document.querySelector("#"+ID);
+                tost.classList.add("showing");
+                tout = setTimeout(() => self.dismiss(ID), (config?.duration == undefined ? self.#defaultTimeLeft : config?.duration == -1 ? 86400 : config?.duration) * 1000);
+                setTimeout(()=>{
+                    let tost = document.querySelector("#"+ID);
+                    tost.classList.remove("showing");
+                    tost.classList.add("visible");
+                }, 200)
+
+            }, 10)
+        });
+    }
+
+    arrangeToasts(){
+        var self = this, top = self.#startTop;
+        return new Promise((resolve, reject) => {
+            var toasts = document.querySelectorAll(".zuz-toast"),
+			i = toasts.length;
+            while(i--){
+				toasts[i]['style'].top = `${top}px`
+				top += parseInt(getComputedStyle(toasts[i]).height.replace('px', '')) + 6;
+			}
+			resolve(null);
+        });
+    }
+
+    
+
+
+}
+
+export default Toaster;

package/src/comps/tweet.tsx

@@ -0,0 +1,48 @@
+import React, { useEffect, useRef, useState } from 'react';
+// import PropTypes from `prop-types`
+import Box from './box'
+import { addScript } from '../core';
+
+const Tweet = (props) => {
+
+    const [rand, setRand] = useState(Math.random())
+    const _tweet = useRef()
+    
+    const renderTweet = () => {
+        const twttr = window['twttr']
+        twttr.ready().then(({ widgets }) => {
+            const { options, onTweetLoadSuccess, onTweetLoadError } = props
+            widgets
+                .createTweetEmbed(props.id, _tweet.current, options || {})
+                .then((twitterWidgetElement) => {
+                    // this.setState({
+                    // isLoading: false
+                    // })
+                    // onTweetLoadSuccess && onTweetLoadSuccess(twitterWidgetElement)
+                })
+                .catch(() => {})
+
+        })
+    }   
+
+    useEffect(() => {
+        const twttr = window['twttr']
+        if (!(twttr && twttr.ready)){
+            addScript(`https://platform.twitter.com/widgets.js`, renderTweet)
+        }else{
+            renderTweet()
+        }
+    }, [])
+
+    useEffect(() => {
+        
+    }, [rand])
+
+    return (
+        <Box as={`tweet`} weight={1} bref={_tweet}></Box>
+    );
+}
+
+
+
+export default Tweet;

package/src/context/AppContext.tsx

@@ -0,0 +1,3 @@
+import { createContext } from 'react'
+const AppContext = createContext({});
+export default AppContext;

package/src/context/AppProvider.tsx

@@ -0,0 +1,101 @@
+import React, {
+    useCallback,
+    useEffect,
+    useMemo,
+    useReducer
+} from 'react'
+import PropTypes from 'prop-types'
+import AppContext from './AppContext'
+import AppTheme from './store/theme'
+
+let isMounted = true;
+export const STORE_KEY = `__zuzjs`
+export const STORE_FORM_KEY = `${STORE_KEY}forms`
+export const STORE_DEFAUTLS = [`${STORE_KEY}base`, `${STORE_KEY}forms`]
+
+const defaultState = {
+    [`${STORE_KEY}base`] : {
+        debug: true,
+        loading: false,
+        _tmp: Math.random()
+    },
+    [STORE_FORM_KEY] : {
+        forms: {}
+    }
+}
+
+const rootReducer = (state, action ) => ({
+    ...state,
+    ...action.payload
+})
+
+const AppProvider = ({ 
+    children, 
+    initialState = {}, 
+    theme = {} 
+}) => {
+
+
+    useEffect(() => {
+        isMounted = true;
+        return () => {
+            isMounted = false;
+        }
+    }, [])
+
+    const rootState = useMemo(() => ({ 
+        ...defaultState,
+        ...initialState,
+        theme: new AppTheme({ theme }).get()
+    }), [initialState])
+
+    const [state, _dispatch] = useReducer(rootReducer, rootState);
+
+    const dispatch = useCallback((args) => {
+          if (isMounted) {
+            _dispatch({ ...args });
+          }
+        },
+        [_dispatch],
+    );
+
+    // const dispatch = useCallback((payload = {}, _key = 'base') => {
+    //     if(isMounted){
+    //         const key = STORE_DEFAUTLS.indexOf(`${STORE_KEY}${_key}`) > -1 ? `${STORE_KEY}${_key}` : _key;
+    //         const _state = { ...state[key] }
+    //         console.log('key', key)
+    //         console.log('state', _state)
+    //         _dispatch({ 
+    //             type: 'any',
+    //             payload: {
+    //                 payload 
+    //             }
+    //         })
+    //     }
+    // }, [_dispatch]);
+
+    const providedValue = useMemo(
+        () => ({
+            ...state,
+            dispatch
+        }),
+        [state]
+    )
+
+
+    return <AppContext.Provider value={providedValue}>{children}</AppContext.Provider>
+
+}
+
+AppProvider.defaultProps = {
+    theme: {},
+    initialState : {},
+}
+
+AppProvider.propTypes = {
+    children: PropTypes.node.isRequired,
+    initialState: PropTypes.instanceOf(Object),
+    theme: PropTypes.instanceOf(Object)
+}
+
+export default AppProvider

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,53 @@
+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