@zuzjs/ui 0.3.2 → 0.3.4

package/src/comps/toaster.tsx

@@ -1,117 +0,0 @@
-import { nanoid } from 'nanoid'
-
-class Toaster {
-    
-    #container : any;
-    #startTop : number
-    #tout : null
-    #defaultTimeLeft : number
-    #root : string
-
-    constructor(config?: { 
-        root : string,
-        duration: number
-    }){
-        this.#startTop = 20
-        this.#defaultTimeLeft = 4
-        const rootID = config?.root || `toast-container`;
-        this.#root = rootID;
-        if(window.document.querySelector(`#${rootID}`)) return;
-        var self = this;
-        var root = window.document.createElement('div');
-		root.id = rootID;
-		window.document.body.appendChild(root);
-        this.#container = window.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 = window.document.createElement('div'),
-        toastBG = window.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 || window.document.querySelector(`#${self.#root}`)).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

@@ -1,48 +0,0 @@
-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/_AppProvider.tsx

@@ -1,116 +0,0 @@
-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

@@ -1,47 +0,0 @@
-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

@@ -1,14 +0,0 @@
-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/reduceReducers.tsx

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

package/src/context/store/appbase.tsx

@@ -1,19 +0,0 @@
-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/lang.tsx

@@ -1,26 +0,0 @@
-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

@@ -1,54 +0,0 @@
-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 || conf.theme.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

@@ -1,90 +0,0 @@
-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