@zuzjs/ui 0.3.7 → 0.3.8

package/dist/bin.d.ts

@@ -0,0 +1,2 @@
+#!/usr/bin/env node
+export {};

package/dist/bin.js

@@ -0,0 +1,107 @@
+#!/usr/bin/env node
+import fs, { readdirSync, statSync } from "fs";
+import { program } from "commander";
+import chokidar from 'chokidar';
+import path from "path";
+import CSS from "./funs/css.js";
+import pc from "picocolors";
+program
+    .option(`-d, --debug`)
+    .option(`-v, --version`)
+    .option(`-root, --root <char>`);
+program.parse();
+const options = program.opts();
+const getAllFiles = (dir, extn, files, result, regex) => {
+    files = files || readdirSync(dir);
+    result = result || [];
+    regex = regex || new RegExp(`\\${extn}$`);
+    for (let i = 0; i < files.length; i++) {
+        let file = path.join(dir, files[i]);
+        if (statSync(file).isDirectory()) {
+            try {
+                result = getAllFiles(file, extn, readdirSync(file), result, regex);
+            }
+            catch (error) {
+                continue;
+            }
+        }
+        else {
+            if (regex.test(file)) {
+                result.push(file);
+            }
+        }
+    }
+    return result;
+};
+const rebuild = (f) => {
+    const raw = fs.readFileSync(f, `utf8`);
+    const list = [];
+    const processMatch = (matches, type) => {
+        if (matches && matches.length > 0) {
+            matches.map((m) => {
+                let v2;
+                if (type == `as`) {
+                    const [x, v1] = m.split(/as\s*=/);
+                    v2 = v1.trim().slice(1, -1);
+                }
+                else if (type == `css`) {
+                    const v1 = m.split(/css\s*\(/)[1].slice(0, -1);
+                    v2 = v1.trim().slice(1, -1);
+                }
+                list.push(v2);
+                // console.log(type, v2)
+                // const _ = v2!.match(/\w+:\$?\w+|\$?\w+/g)
+                // if(_){
+                //     _.map((n:string) => !list.includes(n) && list.push(n))
+                // }
+            });
+        }
+    };
+    /**
+     * match as={?}
+     */
+    processMatch(raw.match(/as\s*=\s*\{([^{}]|{([^{}]|{[^{}]*})*})*\}/g), `as`);
+    /**
+     * match css()
+     */
+    processMatch(raw.match(/css\(\s*`([^`]*?([$&]{[^}]*})?[^`]*)*`\s*\)/g), `css`);
+    return list;
+};
+const rebuildAll = () => {
+    console.log(pc.gray(`○ Building Zuz CSS`));
+    const files = getAllFiles(process.cwd(), `.jsx`);
+    if (files.length > 0) {
+        const as = [];
+        files.map(f => {
+            const filter = null;
+            if (filter && f.endsWith(filter)) {
+                const r = rebuild(f);
+                if (r && r.length > 0)
+                    as.push(r);
+            }
+            else {
+                const r = rebuild(f);
+                if (r && r.length > 0)
+                    as.push(r);
+            }
+        });
+        const { sheet } = new CSS().Build(as);
+        // console.log(cache)
+        if (!fs.existsSync(path.join(process.cwd(), `src`, `app`, `css`))) {
+            fs.mkdirSync(path.join(process.cwd(), `src`, `app`, `css`));
+        }
+        // console.log(sheet)
+        fs.writeFileSync(path.join(process.cwd(), `src`, `app`, `css`, `zuz.scss`), sheet, {
+            encoding: `utf8`,
+            flag: `w+`
+        });
+        console.log(pc.green(`✓ Zuz CSS Generated`));
+    }
+};
+const watcher = chokidar.watch([
+    `${path.resolve(`./`)}/**/*.jsx`
+], {
+    ignored: (p) => p.includes(`/dist`) || p.includes('node_modules'),
+    persistent: true
+});
+watcher.on(`change`, rebuildAll);

package/dist/comps/box.d.ts

@@ -0,0 +1,3 @@
+import { UIProps } from "../types/interfaces";
+declare const Box: (props: UIProps<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element;
+export default Box;

package/dist/comps/box.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { css, cleanProps } from "../funs";
+const Box = (props) => {
+    const { cx } = css.Build(props.as);
+    return _jsx("div", { ref: props.ref, className: cx.join(` `), ...cleanProps(props), children: props.children });
+};
+export default Box;

package/dist/comps/button.d.ts

@@ -0,0 +1,3 @@
+import { UIProps } from "../types/interfaces";
+declare const Button: (props: UIProps<HTMLButtonElement>) => import("react/jsx-runtime").JSX.Element;
+export default Button;

package/dist/comps/button.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { css, cleanProps } from "../funs";
+const Button = (props) => {
+    const { as, ref, children } = props;
+    const { cx } = css.Build(as);
+    return _jsx("button", { ref: ref, className: cx.join(` `), ...cleanProps(props), children: children });
+};
+export default Button;

package/dist/comps/checkbox.d.ts

@@ -0,0 +1,3 @@
+import { UIProps } from "../types/interfaces";
+declare const CheckBox: (props: UIProps<HTMLInputElement>) => import("react/jsx-runtime").JSX.Element;
+export default CheckBox;

package/dist/comps/checkbox.js

@@ -0,0 +1,14 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import { cleanProps, css } from "../funs";
+const CheckBox = (props) => {
+    const { cx } = css.Build(props.as);
+    const [checked, setChecked] = useState(props.checked || false);
+    return _jsx("label", { ...({
+            className: `zuz-checkbox${checked ? ` is-checked` : ``} rel${cx.length > 0 ? ` ` + cx.join(` `) : ``}`
+        }), children: _jsx("input", { type: 'checkbox', ref: props.ref, onChange: e => {
+                setChecked(e.target.checked);
+            }, className: `abs`, ...cleanProps(props) }) });
+};
+export default CheckBox;

package/dist/comps/cover.d.ts

@@ -0,0 +1,4 @@
+import { UIProps } from "../types/interfaces";
+import { SpinnerProps } from "./spinner";
+declare const Cover: (props: UIProps<HTMLDivElement>, spinner?: SpinnerProps) => import("react/jsx-runtime").JSX.Element;
+export default Cover;

package/dist/comps/cover.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { css, cleanProps } from "../funs";
+import Spinner from "./spinner";
+const Cover = (props, spinner) => {
+    const { cx } = css.Build(props.as);
+    return _jsx("div", { ref: props.ref, className: `zuz-cover abs fill ${cx.join(` `)}`.trim(), ...cleanProps(props), children: _jsx(Spinner, { ...(spinner || {}) }) });
+};
+export default Cover;

package/dist/comps/form.d.ts

@@ -0,0 +1,4 @@
+import { UIProps } from "../types/interfaces";
+import { SpinnerProps } from "./spinner";
+declare const Form: (props: UIProps<HTMLDivElement>, spinner?: SpinnerProps) => import("react/jsx-runtime").JSX.Element;
+export default Form;

package/dist/comps/form.js

@@ -0,0 +1,105 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { css, cleanProps } from "../funs";
+import Cover from "./cover";
+import { FORMVALIDATION } from "../types/enums";
+const Form = (props, spinner) => {
+    const { as, ref, at, onSubmit, onSuccess, onError, children } = props;
+    const [loading, setLoading] = useState(false);
+    const { cx } = css.Build(as);
+    const _ref = useRef(ref || null);
+    const _nodes = (query) => _ref.current.querySelectorAll(query);
+    const _init = () => {
+        const _submit = _nodes(`[type=submit]`);
+        if (!_submit || _submit.length == 0) {
+            console.error(`You should add at least 1 button with type=\`SUBMIT\``);
+        }
+        else {
+            _submit.forEach(el => {
+                el.addEventListener(`click`, _onSubmit);
+            });
+        }
+    };
+    const _validate = (el) => {
+        if (el.required && el.value == ``)
+            return false;
+        if (el.getAttribute(`with`)) {
+            switch (el.getAttribute(`with`).toUpperCase()) {
+                case FORMVALIDATION.Email:
+                    console.log(`Add FORMVALIDATION.Email`);
+                    return false;
+                    break;
+                case FORMVALIDATION.Uri:
+                    console.log(`Add FORMVALIDATION.Uri`);
+                    return false;
+                    break;
+                case FORMVALIDATION.Password:
+                    console.log(`Add FORMVALIDATION.Password`);
+                    return false;
+                    break;
+                case FORMVALIDATION.MatchField:
+                    console.log(`Add FORMVALIDATION.MatchField`);
+                    return false;
+                    break;
+                default:
+                    return true;
+            }
+        }
+        return true;
+    };
+    const _buildFormData = () => {
+        const data = {};
+        let _error = null;
+        Array.from(_nodes(`[name]`))
+            .forEach((el) => {
+            let valid = true;
+            if (el.required || el.with)
+                valid = _validate(el);
+            data[el.name] = {
+                valid: valid,
+                value: el.value
+            };
+            if (!valid) {
+                if (_error == null)
+                    _error = el;
+                el.classList.add(`input-with-error`);
+            }
+            else
+                el.classList.remove(`input-with-error`);
+        });
+        if (_error)
+            _error.focus();
+        // ref.querySelectorAll(`[name]`)
+        // Array.from(form.elements).forEach((element: any) => {
+        //     if (!element.name) return;
+        //     /**
+        //      * Validation
+        //      */
+        //     if ( element.required ) {
+        //     }
+        // })
+        // return formData
+        return data;
+    };
+    const _onSubmit = () => {
+        const data = _buildFormData();
+        // console.log(data)
+        if (props.onSubmit) {
+            if (data) {
+                if (props.onPost)
+                    props.onPost(data);
+                else
+                    props.onGet(data);
+            }
+        }
+        else {
+            console.warn(`onSubmit missing for this form.`);
+        }
+    };
+    useEffect(() => {
+        _init();
+    }, []);
+    return _jsxs("div", { ref: _ref, className: `rel ${cx.join(` `)}`.trim(), ...cleanProps(props, [`withData`, `at`, `onSubmit`, `onSuccess`, `onError`]), children: [loading && _jsx(Cover, { ...(spinner || {}) }), children] });
+};
+export default Form;

package/dist/comps/heading.d.ts

@@ -0,0 +1,3 @@
+import { UIProps } from "../types/interfaces";
+declare const Heading: (props: UIProps<HTMLHeadingElement>) => import("react/jsx-runtime").JSX.Element;
+export default Heading;

package/dist/comps/heading.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { css, cleanProps } from "../funs";
+const Heading = (props) => {
+    const { children, ref, h, html } = props;
+    let Tag = `h${h || 1}`;
+    const HeadingTag = Tag;
+    const { cx } = css.Build(props.as);
+    return _jsx(HeadingTag, { ref: ref, className: cx.join(` `), ...cleanProps(props), children: props.html ? _jsx("span", { ...({ dangerouslySetInnerHTML: { __html: html } }) }) : children });
+};
+export default Heading;

package/dist/comps/icon.d.ts

@@ -0,0 +1,3 @@
+import { UIProps } from "../types/interfaces";
+declare const Icon: (props: UIProps<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element;
+export default Icon;

package/dist/comps/icon.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { css, cleanProps } from "../funs";
+const Icon = (props) => {
+    const { cx } = css.Build(props.as);
+    return _jsx("div", { ref: props.ref, className: `icon-${props.name}${cx.length > 0 ? ` ` + cx.join(` `) : ``}`, ...cleanProps(props), children: props.children });
+};
+export default Icon;

package/dist/comps/input.d.ts

@@ -0,0 +1,7 @@
+import { UIProps } from "../types/interfaces";
+import { FORMVALIDATION } from "../types/enums";
+export interface InputProps extends UIProps<HTMLInputElement> {
+    required?: FORMVALIDATION;
+}
+declare const Input: (props: InputProps) => import("react/jsx-runtime").JSX.Element;
+export default Input;

package/dist/comps/input.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { css, cleanProps } from "../funs";
+const Input = (props) => {
+    const { cx } = css.Build(props.as);
+    // console.log(`inputing...`)
+    return _jsx("input", { ref: props.ref, className: cx.join(` `), ...cleanProps(props) });
+};
+export default Input;

package/dist/comps/spinner.d.ts

@@ -0,0 +1,13 @@
+import { UIProps } from "../types/interfaces";
+import { SPINNER } from "../types/enums";
+export interface SpinnerProps extends UIProps<HTMLDivElement> {
+    type?: SPINNER;
+    size?: number;
+    width?: number;
+    color?: string;
+    background?: string;
+    foreground?: string;
+    speed?: number;
+}
+declare const Spinner: (props: SpinnerProps) => import("react/jsx-runtime").JSX.Element;
+export default Spinner;

package/dist/comps/spinner.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { css, cleanProps, hexToRgba } from "../funs";
+import { SPINNER } from "../types/enums";
+const Spinner = (props) => {
+    const { as, ref, type, width, speed, size, color, background, foreground } = props;
+    const { cx } = css.Build(as);
+    const defaultColor = `#000000`;
+    const buildSimple = () => {
+        const c = hexToRgba(color || defaultColor);
+        const bg = hexToRgba(color || defaultColor, .3);
+        const pops = {
+            width: size || 50,
+            height: size || 50,
+            border: `${width || 3}px solid ${bg}`,
+            borderRadius: `50%`,
+            borderTopColor: c,
+            animationDuration: `${speed || .6}s`,
+            animationTimingFunction: `linear`
+        };
+        return pops;
+    };
+    const build = () => {
+        let _ = {};
+        switch (type || SPINNER.Simple) {
+            case SPINNER.Simple:
+                _ = buildSimple();
+                break;
+        }
+        return _;
+    };
+    const getChild = () => {
+        switch (type || SPINNER.Simple) {
+            case SPINNER.Simple:
+                break;
+        }
+        return null;
+    };
+    return _jsx("div", { ref: ref, className: `zuz-spinner${type ? `-${type.toLowerCase()}` : ``} ${cx.join(` `)}`.trim(), style: build(), ...cleanProps(props), children: getChild() });
+};
+export default Spinner;

package/dist/funs/css.d.ts

@@ -0,0 +1,268 @@
+import { dynamicObject } from "../types/index.js";
+declare class CSS {
+    unit: any;
+    PROPS: {
+        [x: string]: any;
+        alignContent: string;
+        alignItems: string;
+        alignSelf: string;
+        animation: string;
+        animationDelay: string;
+        animationDirection: string;
+        animationDuration: string;
+        animationFillMode: string;
+        animationIterationCount: string;
+        animationName: string;
+        animationPlayState: string;
+        animationTimingFunction: string;
+        background: string;
+        backgroundColor: string;
+        backgroundImage: string;
+        backgroundOrigin: string;
+        backgroundPosition: string;
+        backgroundRepeat: string;
+        backgroundSize: string;
+        backfaceVisibility: string;
+        backgroundAttachment: string;
+        backgroundBlendMode: string;
+        backgroundClip: string;
+        border: string;
+        borderBottom: string;
+        borderBottomColor: string;
+        borderBottomStyle: string;
+        borderBottomWidth: string;
+        borderCollapse: string;
+        borderColor: string;
+        borderImage: string;
+        borderImageOutset: string;
+        borderImageRepeat: string;
+        borderImageSlice: string;
+        borderImageSource: string;
+        borderImageWidth: string;
+        borderLeft: string;
+        borderLeftColor: string;
+        borderLeftStyle: string;
+        borderLeftWidth: string;
+        borderRight: string;
+        borderRightColor: string;
+        borderRightStyle: string;
+        borderRightWidth: string;
+        borderSpacing: string;
+        borderStyle: string;
+        borderTop: string;
+        borderTopColor: string;
+        borderTopStyle: string;
+        borderTopWidth: string;
+        borderWidth: string;
+        borderRadius: string;
+        borderTopLeftRadius: string;
+        borderTopRightRadius: string;
+        borderBottomLeftRadius: string;
+        borderBottomRightRadius: string;
+        bottom: string;
+        boxDecorationBreak: string;
+        boxShadow: string;
+        boxSizing: string;
+        captionSide: string;
+        caretColor: string;
+        "@charset": string;
+        clear: string;
+        clip: string;
+        clipPath: string;
+        color: string;
+        columnCount: string;
+        columnFill: string;
+        columnGap: string;
+        colGap: string;
+        columnRule: string;
+        columnRuleColor: string;
+        columnRuleStyle: string;
+        columnRuleWidth: string;
+        columnSpan: string;
+        columnWidth: string;
+        columns: string;
+        content: string;
+        counterIncrement: string;
+        counterReset: string;
+        cursor: string;
+        pointer: string;
+        direction: string;
+        display: string;
+        emptyCells: string;
+        filter: string;
+        flex: string;
+        flexBasis: string;
+        flexDirection: string;
+        flexFlow: string;
+        flexGrow: string;
+        flexShrink: string;
+        flexWrap: string;
+        float: string;
+        font: string;
+        fontFamily: string;
+        fontKerning: string;
+        fontSize: string;
+        fontSizeAdjust: string;
+        fontStretch: string;
+        fontStyle: string;
+        fontVariant: string;
+        bold: string;
+        fontWeight: string;
+        gap: string;
+        grid: string;
+        gridArea: string;
+        gridAutoColumns: string;
+        gridAutoFlow: string;
+        gridAutoRows: string;
+        gridColumn: string;
+        gridColumnEnd: string;
+        gridColumnGap: string;
+        gridColumnStart: string;
+        gridGap: string;
+        gridRow: string;
+        gridRowEnd: string;
+        gridRowGap: string;
+        gridRowStart: string;
+        gridTemplate: string;
+        gridTemplateAreas: string;
+        gridTemplateColumns: string;
+        gridTemplateRows: string;
+        hangingPunctuation: string;
+        hyphens: string;
+        isolation: string;
+        justifyContent: string;
+        left: string;
+        letterSpacing: string;
+        lineHeight: string;
+        listStyle: string;
+        listStyleImage: string;
+        listStylePosition: string;
+        listStyleType: string;
+        aspectRatio: string;
+        margin: string;
+        marginBottom: string;
+        marginLeft: string;
+        marginRight: string;
+        marginTop: string;
+        height: string;
+        minHeight: string;
+        maxHeight: string;
+        width: string;
+        minWidth: string;
+        maxWidth: string;
+        mixBlendMode: string;
+        objectFit: string;
+        objectPosition: string;
+        opacity: string;
+        order: string;
+        outline: string;
+        outlineColor: string;
+        outlineOffset: string;
+        outlineStyle: string;
+        outlineWidth: string;
+        overflow: string;
+        overflowX: string;
+        overflowY: string;
+        padding: string;
+        paddingBottom: string;
+        paddingLeft: string;
+        paddingRight: string;
+        paddingTop: string;
+        pageBreakAfter: string;
+        pageBreakBefore: string;
+        pageBreakInside: string;
+        perspective: string;
+        perspectiveOrigin: string;
+        pointerEvents: string;
+        position: string;
+        quotes: string;
+        resize: string;
+        right: string;
+        scrollBehavior: string;
+        tabSize: string;
+        tableLayout: string;
+        align: string;
+        textAlign: string;
+        textAlignLast: string;
+        textDecoration: string;
+        textDecorationColor: string;
+        textDecorationLine: string;
+        textDecorationStyle: string;
+        textIndent: string;
+        textJustify: string;
+        textOverflow: string;
+        textShadow: string;
+        textTransform: string;
+        top: string;
+        transform: string;
+        "transform(2D)": string;
+        "transformOrigin(twoValue syntax)": string;
+        transformStyle: string;
+        transition: string;
+        transitionDelay: string;
+        transitionDuration: string;
+        transitionProperty: string;
+        transitionTimingFunction: string;
+        unicodeBidi: string;
+        userSelect: string;
+        verticalAlign: string;
+        visibility: string;
+        whiteSpace: string;
+        wordBreak: string;
+        wordSpacing: string;
+        textWrap: string;
+        wordWrap: string;
+        writingMode: string;
+        zIndex: string;
+        backdropFilter: string;
+    };
+    DIRECT: {
+        [x: string]: any;
+        fill: string;
+        abc: string;
+    };
+    IGNORE: string[];
+    chars: string;
+    hashids: any;
+    cx: string[];
+    cache: {
+        [x: string]: any;
+    };
+    pseudoRegExp: RegExp;
+    pseudoList: string[];
+    baseRegex: RegExp;
+    pseudoCounter: {
+        [key: string]: number;
+    };
+    pseudoPattern: string;
+    pseudoReg: RegExp;
+    propCounter: dynamicObject;
+    keysWithoutCommaToSpace: string[];
+    constructor(options?: {
+        [x: string]: any;
+    } | undefined);
+    getStyleSheet(cache: {
+        [key: string]: any;
+    }, indentLevel?: number, pseudo?: boolean): string;
+    makeColor(): void;
+    makeUnit(k: string, v: any): any;
+    makeValue(k: string, v: any): string;
+    makeID(k: string, v: string, _out: string): string;
+    makeIDFromObject(key: string, obj: {
+        [key: string]: any;
+    }): string;
+    parseRawLine(line: string): {
+        [key: string]: {};
+    };
+    makeCSS(line: string): void;
+    cleanPseudo(cache: {
+        [key: string]: any;
+    }): {
+        [key: string]: any;
+    };
+    Build(css: string[][]): {
+        cx: string[];
+        sheet: string;
+    };
+}
+export default CSS;