@zuzjs/ui 0.3.3 → 0.3.5

package/src/comps/input.tsx

@@ -1,224 +0,0 @@
-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 = typeof window !== "undefined" && !!(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

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/select.tsx

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

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

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

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