@zuzjs/ui 0.3.1 → 0.3.3

package/rollup.config.js

@@ -0,0 +1,68 @@
+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')
+
+export default [
+    {
+        input: ["src/index.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()
+        ],
+        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"
+        ]
+    }
+    // ,
+    // {
+    //     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

@@ -17,6 +17,7 @@ const Box = forwardRef((props : { [ key: string ] : any }, ref) => {
                 {...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>}

package/src/comps/button.tsx

@@ -30,6 +30,7 @@ const Button = forwardRef((props: { [ key: string ] : any }, ref : LegacyRef<HTM
                 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]);

package/src/comps/contextmenu.tsx

@@ -3,37 +3,56 @@ import {
     LegacyRef,
     forwardRef,
     useRef,
-    SyntheticEvent,
+    useState,
+    useEffect,
 } from 'react';
 import Box from './box'
 import Button from './button'
 
 const ContextMenu = forwardRef((props : { [ key: string ] : any }, ref : LegacyRef<HTMLHeadingElement>) => {
 
-    const {
-        as,
-        size,
-        color,
-        hover,
-        pos,
-        items
-    } = props;
+    const { ID, p, items, hide } = props;
+    // const [p, setP] = useState(p)
+    const nodeRef = useRef(null);
+
+    const checkBoundaries = () => {
+
+        let x = p.x
+        let y = p.y
+
+        if (nodeRef.current) {
+          const { innerWidth, innerHeight } = window;
+          const { offsetWidth, offsetHeight } = nodeRef.current;
+    
+          if (x + offsetWidth > innerWidth) x -= x + offsetWidth - innerWidth;
+    
+          if (y + offsetHeight > innerHeight) y -= y + offsetHeight - innerHeight;
+        }
+        // setP({x: x, y: y})    
+    }
+
+    useEffect(() => {
+        // checkBoundaries();        
+    }, [])
 
     return (
         <Box 
-            hover={hover || {}}
+            bref={nodeRef}
             flex dir={`cols`}
             fixed
-            top={pos?.y || 0}
-            left={pos?.x || 0}
-            bref={ref}
-            as={`contextmenu-${as}`}
-            size={size || 24}
-            color={color || `#111111`}
-        >
-            {items && items.map((m, i) => <Button 
+            top={p.x}
+            left={p.y}
+            as={`zuz-contextmenu ${ID}`}>
+            {items && items.map((m, i) => m.id == `line` ? <Box as={`line`} key={`line-${i}-${m.id}`} /> : <button 
                 key={`cm-${i}-${m.id}`} 
-                onClick={m.on ? m.on : () => {}}>{m.label}</Button>)}
+                onClick={ev => {
+                    if(m.onClick){
+                        m.onClick(ev, m)
+                    }else{
+                        console.log(`No onClick eventFound`)
+                    }
+                    hide()
+                }}>{m.label}</button>)}
         </Box>
     )
 })

package/src/comps/input.tsx

@@ -1,9 +1,12 @@
 import {
     FC,
+    Ref,
     LegacyRef,
     forwardRef,
     useRef,
     SyntheticEvent,
+    useEffect,
+    memo,
 } from 'react';
 import { ClassNames } from '@emotion/react'
 import { nanoid } from 'nanoid';
@@ -15,7 +18,102 @@ import {
     UPDATE_FORM_FIELD
 } from '../actions'
 
-const Input = forwardRef((props : { [ key: string ] : any }, ref : LegacyRef<HTMLHeadingElement>) => {
+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,
@@ -24,6 +122,8 @@ const Input = forwardRef((props : { [ key: string ] : any }, ref : LegacyRef<HTM
         onChange,
         onKeyUp,
         onClick,
+        onBlur,
+        onFocus,
         readOnly,
         type,
         tag,
@@ -35,7 +135,10 @@ const Input = forwardRef((props : { [ key: string ] : any }, ref : LegacyRef<HTM
         value,
         defaultValue,
         fref,
-        autoComplete
+        autoComplete,
+        elastic,
+        minRows,
+        maxRows
     } = props;
 
     const dispatch = useDispatch(STORE_FORM_KEY)
@@ -47,6 +150,29 @@ const Input = forwardRef((props : { [ key: string ] : any }, ref : LegacyRef<HTM
 
     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
@@ -63,27 +189,36 @@ const Input = forwardRef((props : { [ key: string ] : any }, ref : LegacyRef<HTM
                 defaultValue={defaultValue || ``}
                 onKeyUp={(e : SyntheticEvent) => {
                     let k = e['keyCode'] || ['which'];
-                    if(El != 'textarea' && k == 13 && form && onSubmit){
+                    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;
-                    dispatch( dispatch( UPDATE_FORM_FIELD( form || 'orphan', name, val == "" ? null : val, forms ) ) );
+                    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 => touched == false && dispatch( UPDATE_FORM_FIELD( form || 'orphan', `touched`, true, forms ) ) }
+                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/mediaplayer.tsx

@@ -0,0 +1,12 @@
+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/toaster.tsx

@@ -16,12 +16,17 @@ class Toaster {
         this.#defaultTimeLeft = 4
         const rootID = config?.root || `toast-container`;
         this.#root = rootID;
-        if(window.document.querySelector(`#${rootID}`)) return;
-        var self = this;
+
+        this.addRoot();
+        
+    }
+
+    addRoot(){
+        if(window.document.querySelector(`#${this.#root}`)) return;
         var root = window.document.createElement('div');
-		root.id = rootID;
-		window.document.body.appendChild(root);
-        this.#container = window.document.querySelector(`#${rootID}`)       
+		root.id = this.#root;
+        window.document.body.appendChild(root);
+        this.#container = window.document.querySelector(`#${this.#root}`)       
     }
 
     show = (
@@ -57,6 +62,7 @@ class Toaster {
     }){
         
         var self = this;
+        self.addRoot();
         var tout = null,
         ID = 'toast-' + nanoid(),
         toast = window.document.createElement('div'),

package/src/context/store/theme.tsx

@@ -32,11 +32,11 @@ class AppTheme {
     get = () => {
         let self = this;
         if(self.#mode === "auto"){
-            window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event => {
+            typeof window !== 'undefined' && window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event => {
                 self.#mode = event.matches ? "dark" : "light";
                 self.#listen(self.#mode);
             });
-            return window.matchMedia && 
+            return typeof window !== 'undefined' && window.matchMedia && 
                 window.matchMedia('(prefers-color-scheme: dark)').matches ? 
                 self.#darkTheme : self.#lightTheme;
         }else{ 

package/src/core/index.ts

@@ -45,7 +45,7 @@ const cleanProps = (props : any) => {
             delete _props[k]
         }
     });
-    let _extras = [`as`, `hover`, `bref`]
+    let _extras = [`as`,`hover`,`bref`,`tag`]
     _extras.map(x => x in _props && delete _props[x])
     return _props
 }
@@ -105,7 +105,7 @@ const buildFormData = (data : object) : FormData => {
     return formData;
 }
 
-const grab = async (uri : string, data : object, timeout : number = 60, fd : object = null, progress? : Function, bearer : string = `__ha`) => {
+const withRest = async (uri : string, data : object, timeout : number = 60, fd : object = null, progress? : Function, bearer : string = `__ha`) => {
     var Bearer = getCookie(bearer) || `${randstr(8)}^${randstr(8)}`;
 	window['__grabToken'] = axios.CancelToken.source();
     if(fd){
@@ -228,7 +228,7 @@ const filterHTMLProps = (props : any) => {
     return filter;
 }
 
-const uuid = () => nanoid()
+const uuid = (len=21) => nanoid(len)
 
 const addScript = (src: string, callback: () => any) => {
     var s = document.createElement('script')
@@ -320,6 +320,77 @@ const getMousePosition = e => {
     return pos;
 }
 
+const copyToClipboard = (str : string, callback: Function) => {
+	const el = document.createElement('textarea');
+	let storeContentEditable = el.contentEditable;
+	let storeReadOnly = el.readOnly;
+	el.value = str;
+	el.contentEditable = `true`;
+	el.readOnly = false;
+	el.setAttribute('readonly', `false`);
+	el.setAttribute('contenteditable', `true`);
+	el.style.position = 'absolute';
+	el.style.left = '-999999999px';
+	document.body.appendChild(el);
+	const selected =
+		document.getSelection().rangeCount > 0
+			? document.getSelection().getRangeAt(0)
+			: false;
+	el.select();
+	el.setSelectionRange(0, 999999);
+	document.execCommand('copy');
+	document.body.removeChild(el);
+	if (selected) {
+		document.getSelection().removeAllRanges();
+		document.getSelection().addRange(selected);
+	}
+	el.contentEditable = storeContentEditable;
+	el.readOnly = storeReadOnly;
+	if(callback) callback()
+}
+
+/**
+ * Format bytes as human-readable text.
+ * 
+ * @param bytes Number of bytes.
+ * @param si True to use metric (SI) units, aka powers of 1000. False to use 
+ *           binary (IEC), aka powers of 1024.
+ * @param dp Number of decimal places to display.
+ * 
+ * @return Formatted string.
+ */
+const formatSize = (bytes, si=false, dp=1) => {
+    const thresh = si ? 1000 : 1024;
+  
+    if (Math.abs(bytes) < thresh) {
+      return bytes + ' B';
+    }
+  
+    const units = ['KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'] 
+    let u = -1;
+    const r = 10**dp;
+  
+    do {
+      bytes /= thresh;
+      ++u;
+    } while (Math.round(Math.abs(bytes) * r) / r >= thresh && u < units.length - 1);
+  
+  
+    return bytes.toFixed(dp) + ' ' + units[u];
+}
+
+const slugify = (...args: (string | number)[]): string => {
+    const value = args.join(' ')
+
+    return value
+        .normalize('NFD') // split an accented letter in the base letter and the acent
+        .replace(/[\u0300-\u036f]/g, '') // remove all previously split accents
+        .toLowerCase()
+        .trim()
+        .replace(/[^a-z0-9 ]/g, '') // remove all chars not letters, numbers and spaces (to be replaced)
+        .replace(/\s+/g, '-') // separator
+}
+
 export {
     addProps,
     addScript,
@@ -329,7 +400,7 @@ export {
     byName,
     byId,
     el,    
-    grab,
+    withRest,
     isEmail,
     isIPv4,
     isUrl,
@@ -352,6 +423,9 @@ export {
     getHostname,
     parseFilename,
     camelCase,
-    getMousePosition
+    getMousePosition,
+    formatSize,
+    copyToClipboard,
+    slugify
 }
 

package/src/core/styles.ts

@@ -3,6 +3,10 @@ const cssProps : { [key: string] : any } = {
     "alignContent": "align-content",
     
     "aic": "aic",
+    "ais": "ais",
+    "aie": "aie",
+    "nous": "nous",
+    "nope": "nope",
     "ai": "align-items",
     "alignItems": "align-items",
     
@@ -278,6 +282,7 @@ const cssProps : { [key: string] : any } = {
     "wordBreak": "word-break",
     "wordSpacing": "word-spacing",
     "wrap": "wrap",
+    "textWrap": "textWrap",
     "wordWrap": "word-wrap",
     "writingMode": "writing-mode",
     "zIndex": "z-index",
@@ -317,6 +322,8 @@ const cssPropsDirect : { [key : string] : any } = {
     'flex' : 'display: flex;',
     'fwrap' : 'flex-wrap: wrap;',
     'aic' : 'align-items: center;',
+    'ais' : 'align-items: flex-start;',
+    'aie' : 'align-items: flex-end;',
     'ass' : 'align-self: flex-start;',
     'asc' : 'align-self: center;',
     'ase' : 'align-self: flex-end;',
@@ -329,13 +336,17 @@ const cssPropsDirect : { [key : string] : any } = {
     'block' : 'display: block;',
     'bold' : "font-weight: bold;",
     'wrap' : "word-wrap: break-word;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;max-width: 99%;",
+    'textWrap' : "word-wrap: break-word;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;max-width: 99%;",
     'pointer' : "cursor: pointer;",
     'fb' : 'font-family: var(--primary-font-bold);',
     'ph' : 'padding-left: __VALUE__;padding-right: __VALUE__;',
     'pv' : 'padding-bottom: __VALUE__;padding-top: __VALUE__;',
     'mv' : 'margin-bottom: __VALUE__;margin-top: __VALUE__;',
     'mh' : 'margin-left: __VALUE__;margin-right: __VALUE__;',
-    'anim' : 'transition:all __VALUE__s linear 0s;'
+    'anim' : 'transition:all __VALUE__s linear 0s;',
+    'nous' : 'user-select: none;',
+    'nope' : 'pointer-events: none;',
+    'tdn' : 'text-decoration: none;',
 }
 
 const cssPropsIgnore : string[] = [

package/src/hooks/index.tsx

@@ -6,4 +6,5 @@ export { default as useResizeObserver } from './useResizeObserver'
 export { default as useDevice } from './useDevice'
 export { default as useToast } from './useToast'
 export { default as useLang } from './useLang'
-export { default as useContextMenu } from './useContextMenu'
+export { default as useContextMenu } from './useContextMenu'
+export { default as useRender } from './useRender'