@zuzjs/ui 0.2.3 → 0.2.5

package/src/comps/image.tsx

@@ -0,0 +1,26 @@
+import {
+    forwardRef,
+    LegacyRef
+} from 'react'
+import { ClassNames } from '@emotion/react'
+import { buildCSS } from '../core'
+import useImage from '../hooks/useImage'
+import Box from './box'
+
+const Image = forwardRef((props : { [ key: string ] : any }, ref : LegacyRef<HTMLImageElement>) => {
+
+    const [photo, status] = useImage(props.src, 'anonymous', 'origin');
+    
+    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>}
+        </ClassNames>
+    )
+})
+
+export default Image;

package/src/comps/input.tsx

@@ -0,0 +1,80 @@
+import {
+    FC,
+    LegacyRef,
+    forwardRef,
+    useRef,
+    SyntheticEvent,
+} from 'react';
+import { ClassNames } from '@emotion/react'
+import { nanoid } from 'nanoid';
+import { buildCSS } from '../core'
+import { STORE_FORM_KEY } from '../context/AppProvider'
+import useDispatch from '../hooks/useDispatch'
+import useStore from '../hooks/useStore'
+import {
+    UPDATE_FORM_FIELD
+} from '../actions'
+
+const Input = forwardRef((props : { [ key: string ] : any }, ref : LegacyRef<HTMLHeadingElement>) => {
+
+    const {
+        as,
+        accept,
+        multiple,
+        onChange,
+        onKeyUp,
+        type,
+        tag,
+        placeholder,
+        name,
+        form,
+        touched,
+        onSubmit,
+        defaultValue,
+        fref
+    } = props;
+
+    const dispatch = useDispatch(STORE_FORM_KEY)
+    const { forms } = useStore(state => state[STORE_FORM_KEY], false)
+
+    let Tag : string = tag || 'input';
+    const El = Tag as `textarea` | `input`
+    const _ref = fref || useRef();
+
+    const _defaultCSS = `width: 100%;border-radius: var(--radius-base);padding-left: 4px;padding-right: 4px;border-style: solid;border-width: 1px;border-color: var(--colors-gray-200);`;
+
+    return (
+        <ClassNames>
+            {({ css, cx }) => <El
+                type={type || `text`} 
+                placeholder={placeholder || 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}
+                defaultValue={defaultValue || ``}
+                onKeyUp={(e : SyntheticEvent) => {
+                    let k = e['keyCode'] || ['which'];
+                    if(El != 'textarea' && k == 13 && form && onSubmit){
+                        onSubmit(forms[form]);
+                    }
+                }}
+                onChange={e => {
+                    let val = type == 'file' ? 
+                        e.currentTarget.files
+                        : e.currentTarget.value;
+                    dispatch( dispatch( UPDATE_FORM_FIELD( form || 'orphan', name, val == "" ? null : val, forms ) ) );
+                    onChange && onChange(val == "" ? null : val)
+                }}
+                onBlur={e => {
+                    if(touched){}
+                }}
+                onFocus={ e => touched == false && dispatch( UPDATE_FORM_FIELD( form || 'orphan', `touched`, true, forms ) ) }
+            />}
+        </ClassNames>
+    )
+
+})
+
+export default Input

package/src/comps/placeholder.tsx

@@ -0,0 +1,58 @@
+import {
+    forwardRef
+} from 'react';
+import PropTypes from 'prop-types'
+import Box from './box'
+
+export interface PlaceholderProps {
+    width: number|string,
+    height: number|string,
+    duration?: number,
+    bg?: string,
+    bgFrom?: string,
+    bgTo?: string
+}
+
+const calcPlaceholderStyle = (
+    width: number|string,
+    height: number|string,
+    duration = 1600
+) => ({
+    backgroundSize: `${parseInt(width.toString()) * 10}px ${height}px`,
+    animationDuration: `${(duration / 1000).toFixed(1)}s`,
+});
+
+const Placeholder = forwardRef(({
+    width,
+    height,
+    duration,
+    bg,
+    bgFrom,
+    bgTo
+} : PlaceholderProps, ref) => {
+
+    const placeholderStyle = calcPlaceholderStyle(width, height, duration);
+
+    return (
+        <Box 
+            as={`shimmer`}
+            w={width}
+            h={height}
+            bg={bg || `#f6f7f8`}
+            backgroundImage={`linear-gradient(to right, ${bgFrom || `rgb(238, 238, 238)`} 8%, ${bgTo || `rgb(203, 203, 203)`} 18%,  ${bgFrom || `rgb(238, 238, 238)`} 33%);`}
+            backgroundSize={placeholderStyle.backgroundSize}
+            animationDuration={placeholderStyle.animationDuration}
+        />
+    )
+})
+
+Placeholder.propTypes = {
+    width: PropTypes.oneOfType([ PropTypes.number, PropTypes.string ]).isRequired,
+    height: PropTypes.oneOfType([ PropTypes.number, PropTypes.string ]).isRequired,
+    duration: PropTypes.number,
+    bg: PropTypes.string,
+    bgFrom: PropTypes.string,
+    bgTo: PropTypes.string
+}
+
+export default Placeholder;

package/src/comps/root.tsx

@@ -0,0 +1,32 @@
+import {
+    forwardRef,
+    useEffect
+} from 'react';
+import { 
+    Provider
+} from 'react-redux'
+import appstore from '../redux/store'
+import { setCSSVar, buildCSS } from '../core'
+import { ClassNames } from '@emotion/react'
+
+const AppRoot = forwardRef((props : { [ key: string ] : any }, ref) => {
+
+    if("reducers" in props){
+        props.reducers.map(r => appstore['injectReducer'](r.id, r.reducer));
+    }
+
+    useEffect(() => {    
+        if('primaryColor' in props) setCSSVar('primary-color', props.primaryColor);
+        if('primaryFont' in props) setCSSVar('primary-font', props.primaryFont);
+    }, [])
+
+    return (
+        <Provider store={appstore}>
+            <ClassNames>
+                {({ css, cx }) => <main className={`${props.as ? props.as : `zuz-app`} ${cx(css`${buildCSS(props)} &:hover {${buildCSS(props.hover || {})}} &:active {${buildCSS(props.active || {})}}`)}`}>{props.children}</main>}
+            </ClassNames>
+        </Provider>
+    )
+})
+
+export default AppRoot;

package/src/comps/select.tsx

@@ -0,0 +1,63 @@
+import {
+    FC,
+    LegacyRef,
+    forwardRef,
+    useRef,
+    useEffect
+} from 'react';
+import { ClassNames } from '@emotion/react'
+import { buildCSS } from '../core'
+import { nanoid } from 'nanoid';
+import useStore from "../hooks/useStore";
+import useDispatch from "../hooks/useDispatch";
+import {
+    UPDATE_FORM_FIELD
+} from '../actions'
+import { STORE_FORM_KEY } from '../context/AppProvider'
+
+const Select = forwardRef((props : { [ key: string ] : any }, ref : LegacyRef<HTMLHeadingElement>) => {
+
+    const {
+        as,
+        onChange,
+        name,
+        form,
+        touched,
+        options,
+        defaultValue
+    } = props;
+
+    const _ref = useRef();
+    const dispatch = useDispatch(STORE_FORM_KEY)
+    const { forms } = useStore(state => state[STORE_FORM_KEY], false)
+
+    const _defaultCSS = `width: 100%;border-radius: var(--radius-base);padding-left: 4px;padding-right: 4px;border-style: solid;border-width: 1px;border-color: var(--colors-gray-200);`;
+
+    useEffect(() => {
+        dispatch( dispatch( UPDATE_FORM_FIELD( form || 'orphan', name, 
+        defaultValue && defaultValue != null && defaultValue != "" && defaultValue != undefined ? defaultValue : options[0]?.value || '-1', 
+        forms ) ) );
+    }, [])
+
+    return (
+        <ClassNames>
+            {({ css, cx }) => <select
+                onChange={e => {
+                    let val = e.currentTarget.value;
+                    dispatch( dispatch( UPDATE_FORM_FIELD( form || 'orphan', name, val, forms ) ) );
+                    onChange && onChange(val)
+                }}
+                onFocus={ e => touched == false && dispatch( UPDATE_FORM_FIELD( form || 'orphan', `touched`, true, forms ) ) }
+                onBlur={e => {
+                    if(touched){}
+                }}
+                name={name || nanoid()}
+                className={`${as ? as : ``} ${cx(css`${_defaultCSS}${buildCSS(props)}&:hover {${buildCSS(props.hover || {})}}`)}`} 
+                ref={_ref}>{options?.map(o => <option key={`select-${name}-option-${o.value}`} value={o.value}>{o.label}</option>)}</select>}
+        </ClassNames>
+    )
+
+
+})
+
+export default Select

package/src/comps/spacer.tsx

@@ -0,0 +1,20 @@
+import {
+    FC,
+    forwardRef
+} from 'react';
+import Box from './box'
+
+interface Props {
+    w?: string|number,
+    h?: string|number
+}
+
+const Spacer : FC<Props> = ({
+    w, h
+}) => {
+    return (
+        <Box as={`spacer`} w={w || 0} h={h || 0} />
+    )
+}
+
+export default Spacer;

package/src/comps/spinner.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import Box from './box'
+import PropTypes from 'prop-types'
+
+const Spinner = (props : any) => {
+    
+    return (
+        <Box
+            rel
+            w={props.size}
+            h={props.size}
+            zIndex={`1`}
+            useSelect={`none`}>
+                <Box abs as={`spinner rotating`} animationDirection={`reverse`} animationDuration={typeof props.s1  == `string` ? props.s1 : `${props.s1}s`} w={props.size} r={props.radius} h={props.size} bg={props.color} opacity={0.2} />
+                <Box abs as={`spinner rotating`}  animationDuration={typeof props.s2  == `string` ? props.s2 : `${props.s2}s`} w={props.size} r={props.radius} h={props.size} bg={props.color} opacity={0.5} />
+        </Box>
+    );
+}
+
+Spinner.defaultProps = {
+    size: 30,
+    radius: 4,
+    color: `black`,
+    s1: `5s`,
+    s2: `1s`
+}
+
+Spinner.propTypes = {
+    size: PropTypes.number.isRequired,
+    color: PropTypes.string,
+    radius: PropTypes.number,
+    s1: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    s2: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+}
+
+export default Spinner;

package/src/comps/text.tsx

@@ -0,0 +1,27 @@
+import {
+    FC,
+    LegacyRef,
+    forwardRef,
+    HTMLAttributes
+  } from 'react';
+  import { ClassNames } from '@emotion/react'
+  import { buildCSS } from '../core'
+  
+  const Text = forwardRef((props : { [ key: string ] : any }, ref : LegacyRef<HTMLParagraphElement>) => {
+  
+    const {
+        children,
+        as
+    } = props;
+  
+    return (
+        <ClassNames>
+            {({ css, cx }) => <p
+                className={`${as ? `${as} ` : ``}${cx(css`${buildCSS(props)}`)}`} 
+                ref={ref} 
+                >{props.html ? <span dangerouslySetInnerHTML={{ __html: props.html }} /> : children}</p>}
+        </ClassNames>
+    )
+  })
+  
+  export default Text;

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