@zuzjs/ui 0.3.4 → 0.3.6

package/dist/ui.js

@@ -4,6 +4,7 @@ import Cookies from 'js-cookie';
 import axios from 'axios';
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
+import Link from 'next/link';
 import Children from 'react-children-utilities';
 import PropTypes from 'prop-types';
 
@@ -582,6 +583,24 @@ const Heading = forwardRef((props, ref) => {
     return jsx(HeadingTag, Object.assign({ className: _styles }, cleanProps(props), { children: props.html ? jsx("span", { dangerouslySetInnerHTML: { __html: props.html } }) : props.children }));
 });
 
+const Icon = forwardRef((props, ref) => {
+    const _styles = withStyle(Object.assign(Object.assign({}, props), { as: `icon-${props.as}`, size: props.size || 16 }));
+    return jsx("span", Object.assign({ ref: props.ref || ref, className: _styles }, cleanProps(props), { children: props.html ? jsx("span", { dangerouslySetInnerHTML: { __html: props.html } }) : props.children }));
+});
+
+function Crumb({ items, size }) {
+    const list = [];
+    {
+        items.map((n, i) => {
+            const h = jsx(Heading, { flex: true, size: size || 24, children: n.label }, `hc-${i}-${n.label.replace(/\s/g, '-')}`);
+            list.push(n.href ? jsx(Link, { href: n.href, className: `tdn tdnh`, children: h }, `crumb-${i}-${n.label.replace(/\s/g, '-')}`) : h);
+            if (i < items.length - 1)
+                list.push(jsx(Icon, { as: `chevron_right`, size: size || 24 }, `chev-${i}-${n.label.replace(/\s/g, '-')}`));
+        });
+    }
+    return (jsx(Box, { flex: true, aic: true, gap: 15, children: list }));
+}
+
 const Input = forwardRef((props, ref) => {
     let Tag = props.tag || 'input';
     const El = Tag;
@@ -639,11 +658,6 @@ const Form = (props) => {
         }, children: jsx(Box, Object.assign({}, _props, { children: props.children })) });
 };
 
-const Icon = forwardRef((props, ref) => {
-    const _styles = withStyle(Object.assign(Object.assign({}, props), { as: `icon-${props.as}`, size: props.size || 16 }));
-    return jsx("span", Object.assign({ ref: props.ref || ref, className: _styles }, cleanProps(props), { children: props.html ? jsx("span", { dangerouslySetInnerHTML: { __html: props.html } }) : props.children }));
-});
-
 const Spinner = (props) => {
     const { size, w, h, color, radius, anim } = props;
     return jsx(Box, { w: size || 50, rel: true, zIndex: `1`, userSelect: `none`, h: size || 50, as: `zuz-spinner`, anim: (anim || 2).toString(), flex: true, aic: true, jcc: true, children: jsx(Box, { as: `zuz-loader`, r: radius || 4, w: w || 30, h: h || 6, bg: color || `#111` }) });
@@ -662,4 +676,4 @@ const Select = forwardRef((props, ref) => {
     return jsx("select", Object.assign({ className: _styles }, cleanProps(props), { onChange: e => { props.onChange && props.onChange(e); }, children: props.options && props.options.map(o => jsx("option", { value: o.value, children: o.label }, `${props.id || props.as || props.name}-option-${o.value}`)) }));
 });
 
-export { Box, Button, Form, Heading, Icon, Input, Select, Spinner, Stylesheet, buildCSS, buildFormData, cleanProps, formatBytes, formatSeconds, getCookie, getStylesheet, isEmail, makeCSSValue, removeCookie, setCookie, uuid, withRest, withStyle };
+export { Box, Button, Crumb, Form, Heading, Icon, Input, Select, Spinner, Stylesheet, buildCSS, buildFormData, cleanProps, formatBytes, formatSeconds, getCookie, getStylesheet, isEmail, makeCSSValue, removeCookie, setCookie, uuid, withRest, withStyle };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zuzjs/ui",
-  "version": "0.3.4",
+  "version": "0.3.6",
   "type": "module",
   "main": "dist/index.js",
   "exports": {
@@ -40,6 +40,7 @@
     "rollup-plugin-scss": "^4.0.0",
     "rollup-plugin-typescript2": "^0.36.0",
     "rollup-plugin-uglify": "^6.0.4",
-    "sass": "^1.69.5"
+    "sass": "^1.69.5",
+    "next": "14.0.4"
   }
 }

package/jest.config.js

@@ -1,7 +0,0 @@
-module.exports = {
-    testMatch: ['**/+(*.)+(spec|test).+(ts|js)?(x)'],
-    moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
-    transform: {
-        '^.+\\.tsx?$': 'ts-jest'
-    }
-};

package/rollup.config.js

@@ -1,51 +0,0 @@
-import typescript from 'rollup-plugin-typescript2';
-import commonjs from '@rollup/plugin-commonjs';
-import scss from "rollup-plugin-scss";
-import postcss from 'postcss'
-import livereload from 'rollup-plugin-livereload'
-import { uglify } from 'rollup-plugin-uglify';
-
-const isWatching = process && process.argv.includes('-w') || process.argv.includes('--watch')
-const plugins = [
-    typescript(),
-    commonjs(),
-    scss({
-        processor: () => postcss(),
-        fileName: 'styles.css',
-        failOnError: true
-    }),
-    !isWatching && uglify()
-    // livereload()
-]
-const externals = [
-    "react","react-children-utilities","js-cookie","axios","nanoid","hashids","react/jsx-runtime","prop-types"
-]
-
-export default [
-    {
-        input: ["src/ui.tsx"],
-        output: [
-            {
-                dir: "dist",
-                entryFileNames: "[name].js",
-                format: "es",
-                exports: "named",
-            }
-        ],
-        plugins: plugins,
-        externals: externals
-    },
-    {
-        input: ["src/hooks.tsx"],
-        output: [
-            {
-                dir: "dist",
-                entryFileNames: "[name].js",
-                format: "es",
-                exports: "named",
-            }
-        ],
-        plugins: plugins,
-        externals: externals
-    }
-]

package/src/comps/box.tsx

@@ -1,24 +0,0 @@
-import { 
-    forwardRef
-} from "react";
-import { 
-    cleanProps, 
-    withStyle,
-    getStylesheet
-} from "../core";
-
-const Box = forwardRef(( props: { [ key: string ] : any }, ref) => {
-
-    const _styles = withStyle(props)
-
-    return <div
-        ref={props.ref || ref}
-        className={_styles}
-        { ...cleanProps(props) }>
-        {props.html ? <span dangerouslySetInnerHTML={{ __html: props.html }} /> : props.children}
-        {/* {getStylesheet().join("")} */}
-    </div>
-
-});
-
-export default Box

package/src/comps/button.tsx

@@ -1,23 +0,0 @@
-import { 
-    LegacyRef,
-    forwardRef
-} from "react";
-import { 
-    cleanProps, 
-    withStyle 
-} from "../core";
-
-const Button = forwardRef(( props: { [ key: string ] : any }, ref : LegacyRef<HTMLButtonElement>) => {
-
-    const _styles = withStyle(props)
-
-    return <button
-        ref={props.ref || ref}
-        className={_styles}
-        { ...cleanProps(props) }>
-        {props.html ? <span dangerouslySetInnerHTML={{ __html: props.html }} /> : props.children}
-    </button>
-
-});
-
-export default Button

package/src/comps/crumb.tsx

@@ -1,9 +0,0 @@
-import Box from './box'
-
-const Icon = (props: any) => {
-
-    return <Box as={`icon-${props.as}`} size={props.size || 16} />
-
-}
-
-export default Icon

package/src/comps/form.tsx

@@ -1,58 +0,0 @@
-import Box from './box'
-import { buildFormData, isEmail } from '../core'
-// import { useEffect, useState } from 'react'
-import Children from 'react-children-utilities'
-
-const Form = (props: any) => {
-
-    const _props = { ...props }
-    delete _props['children']
-    const formName = `form-${props.name}`
-    const fields = []
-    
-    const validateForm = () => {
-        const _data = buildFormData(document.querySelector(`form[name="${formName}"]`))
-        const data = []
-        _data.map(f => {
-            const id = Object.keys(f)[0]
-            const field = fields.find(x => x.name == id)
-            if(field){
-                const value = decodeURIComponent(f[id])
-                let valid = 'should' in field ? field.value != "" : true
-                if('should' in field){
-                    switch(field.should){
-                        case "email":
-                            valid = isEmail(value)
-                            break;
-                    }
-                }
-                data.push({ name: field.name, value: value, valid: valid })
-            }
-        })
-        if(props.onSubmit){
-            props.onSubmit({ validation: !data.find(x => x.valid == false), data: data })
-        }
-    }
-
-    Children.deepMap(props.children, c => {
-        if(c['props'].name && !fields.find(x => x.name == c['props'].name)){
-            let xyz = { name: c['props'].name, touched: false }
-            if('should' in c['props']){
-                xyz['should'] = c['props'].should
-            }
-            fields.push(xyz)
-        }
-        return null
-    })    
-    
-    return <form name={formName} method={props.method || undefined} onSubmit={e => {
-        e.preventDefault(); e.stopPropagation();
-        validateForm()
-    }} >
-        <Box {..._props}>
-            {props.children}
-        </Box>
-    </form>
-}
-
-export default Form

package/src/comps/heading.tsx

@@ -1,25 +0,0 @@
-import { 
-    LegacyRef,
-    forwardRef 
-} from "react";
-import { 
-    cleanProps, 
-    withStyle 
-} from "../core";
-
-const Heading = forwardRef(( props: { [ key: string ] : any }, ref : LegacyRef<HTMLHeadingElement>) => {
-
-    const _styles = withStyle(props)
-
-    const Tag : string = `h${props.h || 1}`;
-    const HeadingTag = Tag as `h1` | `h2` | `h3` | `h4` | `h5` | `h6`
-
-    return <HeadingTag
-        className={_styles}
-        { ...cleanProps(props) }>
-        {props.html ? <span dangerouslySetInnerHTML={{ __html: props.html }} /> : props.children}
-    </HeadingTag>
-
-});
-
-export default Heading

package/src/comps/icon.tsx

@@ -1,24 +0,0 @@
-import { 
-    forwardRef
-} from "react";
-import { 
-    cleanProps, 
-    withStyle,
-    getStylesheet
-} from "../core";
-
-const Icon = forwardRef(( props: { [ key: string ] : any }, ref) => {
-
-    const _styles = withStyle({ ...props, as: `icon-${props.as}`, size: props.size || 16 })
-
-    return <span
-        ref={props.ref || ref}
-        className={_styles}
-        { ...cleanProps(props) }>
-        {props.html ? <span dangerouslySetInnerHTML={{ __html: props.html }} /> : props.children}
-        {/* {getStylesheet().join("")} */}
-    </span>
-
-});
-
-export default Icon

package/src/comps/input.tsx

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

@@ -1,5 +0,0 @@
-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 +0,0 @@
-import { createContext } from 'react'
-const AppContext = createContext({});
-export default AppContext;

package/src/context/AppProvider.tsx

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

package/src/context/index.tsx

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

package/src/core/css.ts

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