@zuzjs/ui 0.3.2 → 0.3.4

package/package.json

@@ -1,10 +1,12 @@
 {
   "name": "@zuzjs/ui",
-  "version": "0.3.2",
+  "version": "0.3.4",
   "type": "module",
   "main": "dist/index.js",
   "exports": {
-    ".": "./dist/index.js",
+    ".": "./dist/ui.js",
+    "./core": "./dist/index.js",
+    "./hooks": "./dist/hooks.js",
     "./styles": "./dist/styles.css"
   },
   "scripts": {
@@ -13,35 +15,31 @@
     "test": "jest"
   },
   "dependencies": {
-    "@emotion/react": "^11.10.6",
-    "@emotion/styled": "^11.10.6",
     "@testing-library/react": "14.0.0",
     "@types/jest": "^29.5.0",
     "@types/react": "^18.0.31",
-    "axios": "^1.3.4",
-    "jest": "^29.5.0",
-    "js-cookie": "^3.0.1",
-    "nanoid": "^4.0.2",
+    "axios": "^1.6.2",
+    "hashids": "^2.3.0",
+    "jest": "^29.7.0",
+    "js-cookie": "^3.0.5",
+    "nanoid": "^5.0.4",
     "prop-types": "^15.8.1",
     "react": "18.2.0",
     "react-children-utilities": "^2.9.0",
     "react-dom": "18.2.0",
-    "react-hot-toast": "^2.4.0",
-    "ts-jest": "^29.0.5",
-    "tslib": "^2.5.0",
-    "typescript": "^5.0.2"
+    "ts-jest": "^29.1.1",
+    "tslib": "^2.6.2",
+    "typescript": "^5.3.3"
   },
   "devDependencies": {
     "@rollup/plugin-commonjs": "^24.0.1",
     "postcss": "^8.4.21",
-    "react-router-dom": "^6.14.2",
-    "rimraf": "^4.4.1",
-    "rollup": "^3.20.2",
+    "rimraf": "^5.0.5",
+    "rollup": "^4.8.0",
     "rollup-plugin-livereload": "^2.0.5",
     "rollup-plugin-scss": "^4.0.0",
-    "rollup-plugin-typescript2": "^0.34.1",
+    "rollup-plugin-typescript2": "^0.36.0",
     "rollup-plugin-uglify": "^6.0.4",
-    "sass": "^1.60.0",
-    "vite-plugin-environment": "^1.1.3"
+    "sass": "^1.69.5"
   }
 }

package/rollup.config.js

@@ -6,63 +6,46 @@ 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/index.tsx"],
+        input: ["src/ui.tsx"],
         output: [
             {
                 dir: "dist",
                 entryFileNames: "[name].js",
                 format: "es",
                 exports: "named",
-                // preserveModules: true,
-                // preserveModulesRoot: 'src',
             }
         ],
-        plugins: [
-            typescript(),
-            commonjs(),
-            scss({
-                processor: () => postcss(),
-                fileName: 'styles.css',
-                failOnError: true
-            }),
-            !isWatching && uglify()
-            // livereload()
+        plugins: plugins,
+        externals: externals
+    },
+    {
+        input: ["src/hooks.tsx"],
+        output: [
+            {
+                dir: "dist",
+                entryFileNames: "[name].js",
+                format: "es",
+                exports: "named",
+            }
         ],
-        external: [
-            "react","react-children-utilities","js-cookie","axios","nanoid","@reduxjs/toolkit","react-redux","react/jsx-runtime",
-            "@emotion/react","@emotion/styled","prop-types","react-hot-toast"
-        ]
+        plugins: plugins,
+        externals: externals
     }
-    // ,
-    // {
-    //     input: ["src/kit/index.tsx"],
-    //     output: [
-    //         {
-    //             dir: "dist",
-    //             entryFileNames: "kit.js",
-    //             format: "es",
-    //             exports: "named",
-    //             // preserveModules: true,
-    //             // preserveModulesRoot: 'src',
-    //         }
-    //     ],
-    //     plugins: [
-    //         typescript(),
-    //         // commonjs(),
-    //         // scss({
-    //         //     processor: () => postcss(),
-    //         //     fileName: 'styles.css',
-    //         //     failOnError: true
-    //         // }),
-    //         // !isWatching && uglify()
-    //         // livereload()
-    //     ],
-    //     // external: [
-    //     //     "react","react-children-utilities","js-cookie","axios","nanoid","@reduxjs/toolkit","react-redux","react/jsx-runtime",
-    //     //     "@emotion/react","@emotion/styled","prop-types","react-hot-toast"
-    //     // ]
-    // }
-];
+]

package/src/comps/box.tsx

@@ -1,28 +1,24 @@
-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;
+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,47 +1,23 @@
-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;
+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

@@ -0,0 +1,9 @@
+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,89 +1,58 @@
-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
-}
-
-
+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,31 +1,25 @@
-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;
+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,36 +1,24 @@
-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;
+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