@zuzjs/ui 0.3.2 → 0.3.4

package/src/comps/input.tsx

@@ -1,224 +1,24 @@
-import {
-    FC,
-    Ref,
-    LegacyRef,
-    forwardRef,
-    useRef,
-    SyntheticEvent,
-    useEffect,
-    memo,
-} from 'react';
-import { ClassNames } from '@emotion/react'
-import { nanoid } from 'nanoid';
-import { cleanProps, 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 SIZING_STYLE = [
-    'borderBottomWidth',
-    'borderLeftWidth',
-    'borderRightWidth',
-    'borderTopWidth',
-    'boxSizing',
-    'fontFamily',
-    'fontSize',
-    'fontStyle',
-    'fontWeight',
-    'letterSpacing',
-    'lineHeight',
-    'paddingBottom',
-    'paddingLeft',
-    'paddingRight',
-    'paddingTop',
-    // non-standard
-    'tabSize',
-    'textIndent',
-    // non-standard
-    'textRendering',
-    'textTransform',
-    'width',
-    'wordBreak',
-] as const;
-type SizingProps = Extract<
-  (typeof SIZING_STYLE)[number],
-  keyof CSSStyleDeclaration
->;
-
-export const noop = () => {};
-
-const pick = <Obj extends { [key: string]: any }, Key extends keyof Obj>(
-  props: Key[],
-  obj: Obj,
-): Pick<Obj, Key> =>
-  props.reduce((acc, prop) => {
-    acc[prop] = obj[prop];
-    return acc;
-}, {} as Pick<Obj, Key>);
-
-type SizingStyle = Pick<CSSStyleDeclaration, SizingProps>;
-
-export type SizingData = {
-    sizingStyle: SizingStyle;
-    paddingSize: number;
-    borderSize: number;
-};
-
-const isIE = !!(document.documentElement as any).currentStyle
-
-const getSizingData = (node: HTMLElement): SizingData | null => {
-    
-    const style = window.getComputedStyle(node);
-
-    if (style === null) {
-        return null;
-    }
-
-    const sizingStyle = pick(SIZING_STYLE as unknown as SizingProps[], style);
-    const { boxSizing } = sizingStyle;
-
-    // probably node is detached from DOM, can't read computed dimensions
-    if (boxSizing === '') {
-        return null;
-    }
-
-    // IE (Edge has already correct behaviour) returns content width as computed width
-    // so we need to add manually padding and border widths
-    if (isIE && boxSizing === 'border-box') {
-        sizingStyle.width =
-        parseFloat(sizingStyle.width!) +
-        parseFloat(sizingStyle.borderRightWidth!) +
-        parseFloat(sizingStyle.borderLeftWidth!) +
-        parseFloat(sizingStyle.paddingRight!) +
-        parseFloat(sizingStyle.paddingLeft!) +
-        'px';
-    }
-
-    const paddingSize =
-        parseFloat(sizingStyle.paddingBottom!) +
-        parseFloat(sizingStyle.paddingTop!);
-
-    const borderSize =
-        parseFloat(sizingStyle.borderBottomWidth!) +
-        parseFloat(sizingStyle.borderTopWidth!);
-
-    return {
-        sizingStyle,
-        paddingSize,
-        borderSize,
-    };
-
-}
-
-const Input = forwardRef((props : { [ key: string ] : any }, ref : Ref<HTMLTextAreaElement|HTMLInputElement>) => {
-
-    const {
-        as,
-        accept,
-        multiple,
-        onChange,
-        onKeyUp,
-        onClick,
-        onBlur,
-        onFocus,
-        readOnly,
-        type,
-        tag,
-        placeholder,
-        name,
-        form,
-        touched,
-        onSubmit,
-        value,
-        defaultValue,
-        fref,
-        autoComplete,
-        elastic,
-        minRows,
-        maxRows
-    } = 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);`;
-
-    const isControlled = props.value !== undefined;
-    const measurementsCacheRef = useRef<SizingData>();
-
-    const handleElastic = () => {
-        const node = _ref.current!
-        const nodeSizingData = measurementsCacheRef.current
-        ? measurementsCacheRef.current : getSizingData(node)
-        if (!nodeSizingData) {
-            return;
-        }
-        measurementsCacheRef.current = nodeSizingData;
-
-        // const [height, rowHeight] = calculateNodeHeight(
-        //     nodeSizingData,
-        //     node.value || node.placeholder || 'x',
-        //     minRows || 6,
-        //     maxRows || 6,
-        // );
-
-    }
-
-    useEffect(() => {}, [])
-
-    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'];
-                    if(form && onSubmit && El != 'textarea' && k == 13){
-                        onSubmit(forms[form]);
-                    }else{
-                        if(onKeyUp) onKeyUp(e)
-                    }
-                    
-                }}
-                onChange={e => {
-                    let val = type == 'file' ? 
-                        e.currentTarget.files
-                        : e.currentTarget.value;
-                    if(form) dispatch( dispatch( UPDATE_FORM_FIELD( form || 'orphan', name, val == "" ? null : val, forms ) ) );
-                    // if(El == `textarea` && elastic) handleElastic()
-                    onChange && onChange(val == "" ? null : val)
-                }}
-                onClick={onClick ? onClick : () => {}}
-                readOnly={readOnly || false}
-                onBlur={e => {
-                    if(onBlur) onBlur(e)
-                    if(touched){}
-                }}
-                onFocus={ e => {
-                    if(touched == false)dispatch( UPDATE_FORM_FIELD( form || 'orphan', `touched`, true, forms ) ) 
-                    if(onFocus) onFocus(e)
-                }}
-            />}
-        </ClassNames>
-    )
-    
-    
-})
-
-export default Input
+import { 
+    Ref,
+    forwardRef 
+} from "react";
+import { 
+    cleanProps, 
+    withStyle 
+} from "../core";
+
+const Input = forwardRef(( props: { [ key: string ] : any }, ref : Ref<HTMLTextAreaElement|HTMLInputElement>) => {
+
+    let Tag : string = props.tag || 'input';
+    const El = Tag as `textarea` | `input`
+    const _styles = withStyle(props)
+
+    return <El 
+        className={_styles}
+        onChange={e => { props.onChange && props.onChange(e) }}
+        { ...cleanProps(props) }
+    />
+
+})
+
+export default Input

package/src/comps/select.tsx

@@ -1,63 +1,23 @@
-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
+import { 
+    Ref,
+    forwardRef 
+} from "react";
+import { 
+    cleanProps, 
+    withStyle 
+} from "../core";
+
+const Select = forwardRef(( props: { [ key: string ] : any }, ref : Ref<HTMLTextAreaElement|HTMLInputElement>) => {
+
+    const _styles = withStyle(props)
+
+    return <select
+        className={_styles}
+        { ...cleanProps(props) }
+        onChange={e => { props.onChange && props.onChange(e) }}>
+        {props.options && props.options.map(o => <option key={`${props.id || props.as || props.name}-option-${o.value}`} value={o.value}>{o.label}</option>)}
+    </select>
+
+})
+
+export default Select

package/src/comps/spinner.tsx

@@ -1,36 +1,24 @@
-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]),
-}
-
+import React from 'react';
+import Box from './box'
+import PropTypes from 'prop-types'
+
+const Spinner = (props : any) => {
+    
+    const { size, w, h, color, radius, anim } = props
+
+    return <Box w={size || 50} rel zIndex={`1`} userSelect={`none`} h={size || 50} as={`zuz-spinner`} anim={(anim || 2).toString()} flex aic jcc>
+        <Box as={`zuz-loader`} r={radius || 4} w={w || 30} h={h || 6} bg={color || `#111`} />
+    </Box>
+
+}
+
+Spinner.propTypes = {
+    size: PropTypes.number,
+    w: PropTypes.number,
+    h: PropTypes.number,
+    radius: PropTypes.number,
+    color: PropTypes.string,    
+    anim: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
+}
+
 export default Spinner;

package/src/comps/stylesheet.tsx

@@ -0,0 +1,5 @@
+import { getStylesheet } from "../core";
+
+const Stylesheet = (props: any) => <style className={props.id || undefined}>{getStylesheet().join("")}</style>
+
+export default Stylesheet

package/src/context/AppContext.tsx

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

package/src/context/AppProvider.tsx

@@ -1,106 +1,69 @@
-import React, {
-    useCallback,
-    useEffect,
-    useMemo,
-    useReducer
-} from '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`
-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 = {},
-    lang = {}
-}) => {
-
-
-    useEffect(() => {
-        isMounted = true;
-        return () => {
-            isMounted = false;
-        }
-    }, [])
-
-    const rootState = useMemo(() => ({ 
-        ...defaultState,
-        ...initialState,
-        theme: new AppTheme({ theme }).get(),
-        lang: new AppLang({ lang }).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: {},
-    lang: {},
-    initialState : {},
-}
-
-AppProvider.propTypes = {
-    children: PropTypes.node.isRequired,
-    initialState: PropTypes.instanceOf(Object),
-    theme: PropTypes.instanceOf(Object),
-    lang: PropTypes.instanceOf(Object)
-}
-
+import {
+    useCallback,
+    useEffect,
+    useMemo,
+    useReducer
+} from 'react'
+import AppContext from './AppContext'
+
+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 = {}
+}) => {
+
+    useEffect(() => {
+        isMounted = true;
+        return () => {
+            isMounted = false;
+        }
+    }, [])
+
+    const rootState = useMemo(() => ({ 
+        ...defaultState,
+        ...initialState
+    }), [initialState])
+
+    const [state, _dispatch] = useReducer(rootReducer, rootState);
+
+    const dispatch = useCallback((args) => {
+        if (isMounted) {
+          _dispatch({ ...args });
+        }
+      },
+      [_dispatch],
+  );
+
+    const providedValue = useMemo(
+        () => ({
+            ...state,
+            dispatch
+        }),
+        [state]
+    )
+
+    return <AppContext.Provider value={providedValue}>{children}</AppContext.Provider>
+
+}
+
 export default AppProvider

package/src/context/createSlice.tsx

@@ -1,40 +1,16 @@
-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
-}
-
+const createSlice = ({
+    name,
+    initialState,
+    reducers
+}) => {
+
+    return {
+        name,
+        reducer: reducers,
+        actions: reducers,
+        state: initialState
+    }
+
+}
+
 export default createSlice;

package/src/context/index.tsx

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

package/src/core/css.ts

@@ -0,0 +1 @@
+export default {}