@zuzjs/ui 0.2.4 → 0.2.6

package/src/comps/form.tsx

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

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

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

@@ -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/masonry.tsx

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