@zuzjs/ui 0.3.3 → 0.3.5

package/src/actions/index.tsx

@@ -1,29 +0,0 @@
-import { UNDO } from './undo'
-import { REDO } from './redo'
-import { RESET } from './reset'
-
-export const ADD_FORM = (name, fields, forms) => ({
-    forms: {
-        ...forms,
-        [name] : { touched: false, loading: false, ...fields }
-    }
-})
-
-export const UPDATE_FORM_FIELD = (formName, field, value, forms) => {
-    if(forms[formName]){
-        let _forms = {
-            ...forms
-        }
-        _forms[formName][field] = value;
-        return {
-            forms: _forms
-        }
-    }
-    return {}
-}
-
-export {
-    UNDO,
-    REDO,
-    RESET
-}

package/src/actions/redo.tsx

@@ -1 +0,0 @@
-export const REDO = 'REDO';

package/src/actions/reset.tsx

@@ -1 +0,0 @@
-export const RESET = 'RESET';

package/src/actions/undo.tsx

@@ -1 +0,0 @@
-export const UNDO = 'UNDO';

package/src/comps/app.tsx

@@ -1,34 +0,0 @@
-import {
-    forwardRef,
-    useEffect
-} from 'react';
-import { setCSSVar, buildCSS } from '../core'
-import { Provider } from '../context'
-import { ClassNames } from '@emotion/react'
-import { useStore } from '../hooks'
-
-const AppMain = forwardRef((props : { [ key: string ] : any }, ref) => {
-
-    // const { dispatch } = useStore()
-
-    // if("theme" in props && !theme){
-    //     dispatch(setTheme(props.theme));
-    // }
-
-    return (
-        <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>
-    )
-})
-
-const App = forwardRef((props : { [ key: string ] : any }, ref) => {
-
-    return (
-        <Provider>
-            <AppMain />
-        </Provider>
-    )
-})
-
-export default App

package/src/comps/box.tsx

@@ -1,28 +0,0 @@
-import {
-    forwardRef,
-    useEffect
-} from 'react';
-import { ClassNames } from '@emotion/react'
-import { cleanProps, buildCSS } from '../core'
-
-const Box = forwardRef((props : { [ key: string ] : any }, ref) => {
-
-    const _noClick = () => {}
-
-    // console.log(props)
-
-    return (
-        <ClassNames>
-            {({ css, cx }) => <div 
-                {...cleanProps(props)}
-                title={props.title || undefined}
-                id={props.id || undefined}
-                onDoubleClick={props.onDoubleClick || undefined}
-                onClick={props.onClick || _noClick}
-                className={`${props.as ? `${props.as} ` : ``}${cx(css`${buildCSS(props)} &:hover {${buildCSS(props.hover || {})}} &:active {${buildCSS(props.active || {})}}`)}`} 
-                ref={props.bref || ref}>{props.html ? <span dangerouslySetInnerHTML={{ __html: props.html }} /> : props.children}</div>}
-        </ClassNames>
-    )
-})
-
-export default Box;

package/src/comps/button.tsx

@@ -1,47 +0,0 @@
-import React, { 
-  forwardRef,
-  LegacyRef
-} from 'react';
-import { ClassNames } from '@emotion/react'
-import { 
-  buildCSS,
-  cleanProps
-} from '../core'
-import { useStore } from '../hooks'
-import { STORE_FORM_KEY } from '../context/AppProvider'
-const Button = forwardRef((props: { [ key: string ] : any }, ref : LegacyRef<HTMLButtonElement>) => {
-
-  const { forms } = useStore(state => state[STORE_FORM_KEY], false);
-  const _otherProps = {}  
-  if(props.html){
-      _otherProps['dangerouslySetInnerHTML'] = { __html: props.html }
-  }
-
-  return (
-    <ClassNames>
-        {({ css, cx }) => {
-          return (
-            <button
-              {...cleanProps(props)}
-              title={"title" in props ? props.title : undefined}
-              type={props.type}
-              className={`button${props.as ? ` ${props.as}` : ``} ${cx(css`
-                padding: 5px 10px;
-                border-radius: 2px;
-                ${buildCSS(props)} &:hover {${buildCSS(props.hover || {})}} &:active {${buildCSS(props.active || {})}}`)}`} 
-              ref={ref} 
-              onDoubleClick={props.onDoubleClick || undefined}
-              onClick={e => {
-                  if(props.form && props.type && props.type == 'submit'){
-                      props.onSubmit(forms[props.form]);
-                  }else{
-                      props.onClick ? props.onClick(e) : () => console.warn('onClick Missing')
-                  }                    
-              }} disabled={props.disabled || false} >{props.html ? <span dangerouslySetInnerHTML={{ __html: props.html }} /> : props.children}</button>
-          )
-      }}
-    </ClassNames>
-  )
-})
-
-export default Button;

package/src/comps/checkbox.tsx

@@ -1,74 +0,0 @@
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
-import PropTypes from 'prop-types'
-import { nanoid } from 'nanoid'
-import Box from './box'
-import Button from './button'
-import useTheme from '../hooks/useTheme'
-import useDispatch from '../hooks/useDispatch'
-import useStore from '../hooks/useStore'
-import { STORE_FORM_KEY } from '../context/AppProvider'
-import {
-    UPDATE_FORM_FIELD
-} from '../actions'
-import { ClassNames } from '@emotion/react'
-
-function Checkbox(props) {
-
-    const {
-        checked,
-        as,
-        name,
-        form,
-        touched,
-        onChange
-    } = props;
-
-    const [_checked, setChecked] = useState(checked || false)
-    const theme = useTheme();
-    
-    const dispatch = useDispatch(STORE_FORM_KEY)
-    const { forms } = useStore(state => state[STORE_FORM_KEY], false)
-
-    const switchCheck = useCallback(() => {
-        let nextVal = !_checked;
-        onChange && onChange(nextVal)
-        setChecked(nextVal)
-        dispatch( dispatch( UPDATE_FORM_FIELD( form || 'orphan', name, nextVal, forms ) ) );
-    }, [_checked])
-
-    const defaultCSS = `cursor: pointer;&:before {
-        background: ${!_checked ? `transparent` : theme.color} !important;
-    }`
-
-    const _name = useMemo(() => name || nanoid(), [name])
-    
-    return (
-        <ClassNames>
-            {({ css, cx }) => <>
-                <input
-                    onChange={switchCheck}
-                    id={`zuz${_name}`}
-                    // className={`${_checked ? 'y' : 'n'} ${as ? ` ${as} ` : ``}f ${cx(css`opacity: 0;position: absolute;&:checked {${defaultCSSChecked}}`)}`} 
-                    className={`zuz-checkbox`} 
-                    name={_name}
-                    type={`checkbox`} 
-                    value={`checked`}
-                />
-                <label 
-                    className={`${as ? `${as} ` : ``}f ${cx(css`${defaultCSS}`)}`} 
-                    htmlFor={`zuz${_name}`} /> 
-            </>}
-        </ClassNames>
-        // <Button 
-        //     overflow={`hidden`}
-        //     name={name || nanoid()}
-        //     onClick={switchCheck} 
-        //     w={38} h={22} r={20} bg={`#ddd`} rel>
-        //     <Box w={38} h={22} anim={`0.2`} abs top={0} r={20} left={0} transform={`translateX(${_checked ? 0 : -16}px)`} bg={theme.color}>
-        //         <Box w={18} h={18} abs right={2} top={2} bg={`#fff`} r={20} boxShadow={`0px 0px 0px 5px ${_checked ? theme.color : `#ddd`}`} />
-        //     </Box>
-        // </Button>
-    );
-}
-
-export default Checkbox;

package/src/comps/component.tsx

@@ -1,32 +0,0 @@
-import React, {
-    forwardRef
-} from 'react';
-import styled from '@emotion/styled'
-import { css } from '@emotion/react'
-import { 
-    buildCSS,
-    filterHTMLProps
-} from '../core'
-
-// const CoreBlock = styled.section`display: block;`
-// const buildComponent = (props: any) => Block.withComponent(props.for || `div`)`${buildCSS(props)}`
-
-const Component = forwardRef((props: any, ref: any) => {
-
-    const Tag = props.for;
-    const Block = (
-        typeof props.for == 'string' ?
-        styled[props.for || `div`] : Tag
-    )`${buildCSS(props)}`;
-    // const Block = styled.`${buildCSS(props)}`;
-    // const Block = CoreBlock.withComponent(props.for)`background: red`
-    // console.log(props)
-    // console.log(Styles)
-    
-
-    // return <button>{props.children}</button>
-    return <Block className={props.as || ``} {...filterHTMLProps(props)} />
-
-})
-
-export default Component;

package/src/comps/contextmenu.tsx

@@ -1,60 +0,0 @@
-import {
-    FC,
-    LegacyRef,
-    forwardRef,
-    useRef,
-    useState,
-    useEffect,
-} from 'react';
-import Box from './box'
-import Button from './button'
-
-const ContextMenu = forwardRef((props : { [ key: string ] : any }, ref : LegacyRef<HTMLHeadingElement>) => {
-
-    const { ID, p, items, hide } = props;
-    // const [p, setP] = useState(p)
-    const nodeRef = useRef(null);
-
-    const checkBoundaries = () => {
-
-        let x = p.x
-        let y = p.y
-
-        if (nodeRef.current) {
-          const { innerWidth, innerHeight } = window;
-          const { offsetWidth, offsetHeight } = nodeRef.current;
-    
-          if (x + offsetWidth > innerWidth) x -= x + offsetWidth - innerWidth;
-    
-          if (y + offsetHeight > innerHeight) y -= y + offsetHeight - innerHeight;
-        }
-        // setP({x: x, y: y})    
-    }
-
-    useEffect(() => {
-        // checkBoundaries();        
-    }, [])
-
-    return (
-        <Box 
-            bref={nodeRef}
-            flex dir={`cols`}
-            fixed
-            top={p.x}
-            left={p.y}
-            as={`zuz-contextmenu ${ID}`}>
-            {items && items.map((m, i) => m.id == `line` ? <Box as={`line`} key={`line-${i}-${m.id}`} /> : <button 
-                key={`cm-${i}-${m.id}`} 
-                onClick={ev => {
-                    if(m.onClick){
-                        m.onClick(ev, m)
-                    }else{
-                        console.log(`No onClick eventFound`)
-                    }
-                    hide()
-                }}>{m.label}</button>)}
-        </Box>
-    )
-})
-
-export default ContextMenu;

package/src/comps/cover.tsx

@@ -1,34 +0,0 @@
-import React from 'react';
-import Box from './box'
-import Spinner from './spinner'
-import Heading from './heading'
-import PropTypes from 'prop-types'
-
-const Cover = (props) => {
-
-    return (
-        <Box key={`cover-cloud`} abs fill 
-            bgFilter={props.backdrop ? `saturate(${props.backdrop.saturate}%) blur(${props.backdrop.blur}px)` : undefined}
-            zIndex={`2`} 
-            bg={props.bg}>
-            <Box key={`cover-shadow`} abs abc aic jcc flex dir={`cols`} gap={20}>
-                <Spinner key={`cover-spinner`} />
-                {props.label && <Heading key={`cover-label`} size={16} as={`f`} opacity={0.7}>{props.label}</Heading>}
-            </Box>
-        </Box>
-    );
-}
-
-Cover.defaultProps = {
-    bg: `rgba(0,0,0,0.5)`,
-    backdrop: { saturate: 80, blur: 10 },
-    label: null
-}
-
-Cover.propTypes = {
-    bg: PropTypes.string,
-    backdrop: PropTypes.object,
-    label: PropTypes.string,
-}
-
-export default Cover;

package/src/comps/form.tsx

@@ -1,89 +0,0 @@
-import {
-    Ref,
-    LegacyRef,
-    forwardRef,
-    useState,
-    createElement,
-    useEffect,
-    useImperativeHandle
-} from 'react';
-import PropTypes from 'prop-types'
-import Box from './box'
-import Cover from './cover'
-import { addProps } from '../core'
-import useDispatch from '../hooks/useDispatch'
-import useStore from '../hooks/useStore'
-import { STORE_FORM_KEY, STORE_DEFAUTLS } from '../context/AppProvider'
-import { nanoid } from 'nanoid'
-import {
-    ADD_FORM,
-    UPDATE_FORM_FIELD
-} from '../actions'
-
-const Form = forwardRef((props : { [ key: string ] : any }, ref : Ref<any>) => {
-
-    const { 
-        name, 
-        children,
-        onSubmit,
-        cover,
-        debug
-    } = props;
-    
-    const [_html, setHTML] = useState(null);
-    const [_loading, setLoading] = useState(debug?.loading || false);
-    const dispatch = useDispatch(STORE_FORM_KEY)
-    const { forms } = useStore(state => state[STORE_FORM_KEY], false)
-
-    const buildFields = () => {
-        return addProps(children, { form : name, touched: undefined, loading: undefined, onSubmit: onSubmit ? onSubmit : () => console.log(`onSubmit Missing`) })
-    }
-
-    const update = (e : object) => Object.keys(e).map(k => {
-        dispatch( UPDATE_FORM_FIELD( name || 'orphan', k, e[k], forms ) )
-        if(k == 'loading') setLoading(e[k])
-    }) 
-
-    const get = (k : string) => forms[name][k] || null
-
-    useImperativeHandle(ref, () => ({
-        update,
-        get 
-    }))
-
-    useEffect(() => {
-        let f = buildFields();
-        setHTML(f.children);
-        if(!forms[name]){
-            dispatch(ADD_FORM(name, f.fields, forms))
-        }
-    }, [children, forms[name]?.loading])
-
-    return createElement(
-        Box,
-        {
-            rel: true,
-            ...props,
-            as: name
-        },
-        [
-            _loading? <Cover key={`form-${name}-cover`} backdrop={cover?.filter || { saturate: 80, blur: 10 }} bg={cover?.bg || `rgba(0,0,0,0.5)`} /> : null,
-            _html
-        ]
-    )    
-
-})
-
-Form.defaultProps = {
-    name: 'form1',
-    onSubmit: () => { console.log(`onSubmit not provided`) }
-}
-
-Form.propTypes = {
-    name: PropTypes.string.isRequired,
-    children: PropTypes.node.isRequired,
-    onSubmit: PropTypes.func.isRequired
-}
-
-
-export default Form

package/src/comps/heading.tsx

@@ -1,31 +0,0 @@
-import {
-  FC,
-  LegacyRef,
-  forwardRef,
-  HTMLAttributes
-} from 'react';
-import { ClassNames } from '@emotion/react'
-import { buildCSS } from '../core'
-
-const Heading = forwardRef((props : { [ key: string ] : any }, ref : LegacyRef<HTMLHeadingElement>) => {
-
-  const {
-      children,
-      as,
-      h
-  } = props;
-
-  let Tag : string = `h${h || 1}`;
-  const HeadingTag = Tag as `h1` | `h2` | `h3` | `h4` | `h5` | `h6`
-  
-  return (
-      <ClassNames>
-          {({ css, cx }) => <HeadingTag
-              className={`${as ? `${as} ` : ``}${cx(css`${buildCSS(props)}`)}`} 
-              ref={ref} 
-              >{props.html ? <span dangerouslySetInnerHTML={{ __html: props.html }} /> : children}</HeadingTag>}
-      </ClassNames>
-  )
-})
-
-export default Heading;

package/src/comps/icon.tsx

@@ -1,36 +0,0 @@
-import {
-    FC,
-    LegacyRef,
-    forwardRef,
-    useRef,
-    SyntheticEvent,
-} from 'react';
-import Box from './box'
-
-const Icon = forwardRef((props : { [ key: string ] : any }, ref : LegacyRef<HTMLHeadingElement>) => {
-
-    const {
-        as,
-        path,
-        size,
-        color,
-        hover
-    } = props;
-
-    return (
-        <Box 
-            hover={hover || {}}
-            flex
-            bref={ref}
-            as={`icon-${as}`}
-            ai={`c`}
-            jc={`c`}
-            size={size || 24}
-            color={color || `#111111`}
-        >
-            {path && Array(path).fill(undefined).map((p : any, i : any) => <span key={`ico-${as}-${i}`} className={`path${i+1}`} />)}
-        </Box>
-    )
-})
-
-export default Icon;

package/src/comps/image.tsx

@@ -1,34 +0,0 @@
-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 { src, isLoading, error } = useImage({ srcList: props.src, useSuspense: false });
-    
-    return (
-        <ClassNames>
-            {({ css, cx }) => <>
-                {isLoading && <Box className={`${props.as ? `${props.as} ` : ``}${cx(css`background: #eee;${buildCSS(props)}`)}`} />}
-                {!isLoading && <img src={src}
-                    className={`${props.as ? `${props.as} ` : ``}${cx(css`${buildCSS(props)}`)}`} 
-                    ref={ref} />}
-            </>}
-        </ClassNames>
-        // <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;