@zuzjs/ui 0.3.2 → 0.3.4

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/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/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;

package/src/comps/masonry.tsx

@@ -1,192 +0,0 @@
-import { Component, Children } from "react"
-import PropTypes from 'prop-types'
-
-const DEFAULT_COLUMNS = 2;
-
-class Masonry extends Component<any, any> {
-
-    constructor(props : { [ key: string ] : any }) {
-        super(props);
-        // Correct scope for when methods are accessed externally
-        this.reCalculateColumnCount = this.reCalculateColumnCount.bind(this);
-        this.reCalculateColumnCountDebounce = this.reCalculateColumnCountDebounce.bind(this);
-        // default state
-        let columnCount
-        if (this.props && this.props.breakpointCols.default) {
-            columnCount = this.props.breakpointCols.default
-        } else {
-            columnCount = parseInt(this.props.breakpointCols) || DEFAULT_COLUMNS
-        }
-        this.state = {
-            columnCount
-        };
-    }
-
-    componentDidMount() {
-        this.reCalculateColumnCount();
-        // window may not be available in some environments
-        if(window) {
-          window.addEventListener('resize', this.reCalculateColumnCountDebounce);
-        }
-    }
-
-    componentDidUpdate() {
-        this.reCalculateColumnCount();
-    }
-    
-    componentWillUnmount() {
-        if(window) {
-            window.removeEventListener('resize', this.reCalculateColumnCountDebounce);
-        }
-    }
-
-    reCalculateColumnCountDebounce() {
-        if(!window || !window.requestAnimationFrame) {  // IE10+
-          this.reCalculateColumnCount();
-          return;
-        }
-        
-        if(window.cancelAnimationFrame) { // IE10+
-          window.cancelAnimationFrame(this._lastRecalculateAnimationFrame);
-        }
-  
-    }
-
-    _lastRecalculateAnimationFrame = window.requestAnimationFrame(() => {
-      this.reCalculateColumnCount();
-    });
-
-    reCalculateColumnCount() {
-        const windowWidth = window && window.innerWidth || Infinity;
-        let breakpointColsObject = this.props.breakpointCols;
-    
-        // Allow passing a single number to `breakpointCols` instead of an object
-        if(typeof breakpointColsObject !== 'object') {
-          breakpointColsObject = {
-            default: parseInt(breakpointColsObject) || DEFAULT_COLUMNS
-          }
-        }
-    
-        let matchedBreakpoint = Infinity;
-        let columns = breakpointColsObject.default || DEFAULT_COLUMNS;
-    
-        for(let breakpoint in breakpointColsObject) {
-          const optBreakpoint = parseInt(breakpoint);
-          const isCurrentBreakpoint = optBreakpoint > 0 && windowWidth <= optBreakpoint;
-    
-          if(isCurrentBreakpoint && optBreakpoint < matchedBreakpoint) {
-            matchedBreakpoint = optBreakpoint;
-            columns = breakpointColsObject[breakpoint];
-          }
-        }
-    
-        columns = Math.max(1, parseInt(columns) || 1);
-    
-        if(this.state.columnCount !== columns) {
-          this.setState({
-            columnCount: columns
-          });
-          this.props.onChange && this.props.onChange({ columns: columns });
-        }
-    }
-
-    itemsInColumns() {
-        const currentColumnCount = this.state.columnCount;
-        const itemsInColumns = new Array(currentColumnCount);
-    
-        // Force children to be handled as an array
-        const items = Children.toArray(this.props.children)
-    
-        for (let i = 0; i < items.length; i++) {
-          const columnIndex = i % currentColumnCount;
-    
-          if(!itemsInColumns[columnIndex]) {
-            itemsInColumns[columnIndex] = [];
-          }
-    
-          itemsInColumns[columnIndex].push(items[i]);
-        }
-    
-        return itemsInColumns;
-    }
-
-    renderColumns() {
-        const { column, columnAttrs = {}, columnClassName } = this.props;
-        const childrenInColumns = this.itemsInColumns();
-        const columnWidth = `${100 / childrenInColumns.length}%`;
-        let className = columnClassName;
-    
-        if(className && typeof className !== 'string') {
-          this.logDeprecated('The property "columnClassName" requires a string');
-    
-          // This is a deprecated default and will be removed soon.
-          if(typeof className === 'undefined') {
-            className = 'my-masonry-grid_column';
-          }
-        }
-    
-        const columnAttributes = {
-          // NOTE: the column property is undocumented and considered deprecated.
-          // It is an alias of the `columnAttrs` property
-          ...column,
-          ...columnAttrs,
-          style: {
-            ...columnAttrs.style,
-            width: columnWidth
-          },
-          className
-        };
-    
-        return childrenInColumns.map((items, i) => {
-          return <div
-            {...columnAttributes}
-    
-            key={i}
-          >
-            {items}
-          </div>;
-        });
-    }
-    
-    logDeprecated(message) {
-        console.error('[Masonry]', message);
-    }
-
-    render() {
-        const {
-          // ignored
-          children,
-          breakpointCols,
-          columnClassName,
-          columnAttrs,
-          column,
-    
-          // used
-          className,
-    
-          ...rest
-        } = this.props;
-    
-        let classNameOutput = className;
-    
-        if(typeof className !== 'string') {
-          this.logDeprecated('The property "className" requires a string');
-    
-          // This is a deprecated default and will be removed soon.
-          if(typeof className === 'undefined') {
-            classNameOutput = 'my-masonry-grid';
-          }
-        }
-    
-        return (
-          <div
-            {...rest}
-            className={classNameOutput}
-          >
-            {this.renderColumns()}
-          </div>
-        );
-    }
-}
-
-export default Masonry;

package/src/comps/mediaplayer.tsx

@@ -1,12 +0,0 @@
-import {
-    forwardRef,
-    LegacyRef
-} from 'react'
-import { ClassNames } from '@emotion/react'
-import { buildCSS } from '../core'
-
-const MediaPlayer = forwardRef((props : { [ key: string ] : any }, ref : LegacyRef<HTMLImageElement>) => {
-
-})
-
-export default MediaPlayer;

package/src/comps/placeholder.tsx

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

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

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

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