@zuzjs/ui 0.2.4 → 0.2.6

package/src/core/styles.ts

@@ -0,0 +1,361 @@
+const cssProps : { [key: string] : any } = {
+    "ac": "align-content",
+    "alignContent": "align-content",
+    
+    "aic": "aic",
+    "ai": "align-items",
+    "alignItems": "align-items",
+    
+    "ass": "ass",
+    "asc": "asc",
+    "ase": "ase",
+    "alignSelf": "align-self",
+    "all": "all",
+    "animation": "animation",
+    "animationDelay": "animation-delay",
+    "animationDirection": "animation-direction",
+    "animationDuration": "animation-duration",
+    "animationFillMode": "animation-fill-mode",
+    "animationIterationCount": "animation-iteration-count",
+    "animationName": "animation-name",
+    "animationPlayState": "animation-play-state",
+    "animationTimingFunction": "animation-timing-function",
+    "backfaceVisibility": "backface-visibility",
+    "backgroundAttachment": "background-attachment",
+    "backgroundBlendMode": "background-blend-mode",
+    "backgroundClip": "background-clip",
+
+    "bg": "background",
+    "background": "background",
+    "bgc": "background-color",
+    "bgColor": "background-color",
+    "backgroundColor": "background-color",
+    
+    "backgroundImage": "background-image",
+    "backgroundOrigin": "background-origin",
+    "backgroundPosition": "background-position",
+    "backgroundRepeat": "background-repeat",
+    "backgroundSize": "background-size",
+    "border": "border",
+    "borderBottom": "border-bottom",
+    "borderBottomColor": "border-bottom-color",
+    "borderBottomStyle": "border-bottom-style",
+    "borderBottomWidth": "border-bottom-width",
+    "borderCollapse": "border-collapse",
+    "borderColor": "border-color",
+    "borderImage": "border-image",
+    "borderImageOutset": "border-image-outset",
+    "borderImageRepeat": "border-image-repeat",
+    "borderImageSlice": "border-image-slice",
+    "borderImageSource": "border-image-source",
+    "borderImageWidth": "border-image-width",
+    "borderLeft": "border-left",
+    "borderLeftColor": "border-left-color",
+    "borderLeftStyle": "border-left-style",
+    "borderLeftWidth": "border-left-width",
+    
+    //Radius
+    "r": "border-radius",
+    "br": "border-radius",
+    "borderRadius": "border-radius",
+    "brtl": "border-top-left-radius",
+    "borderTopLeftRadius": "border-top-left-radius",
+    "brtr": "border-top-right-radius",
+    "borderTopRightRadius": "border-top-right-radius",
+    "brbl": "border-bottom-left-radius",
+    "borderBottomLeftRadius": "border-bottom-left-radius",
+    "brbr": "border-bottom-right-radius",
+    "borderBottomRightRadius": "border-bottom-right-radius",
+
+    "borderRight": "border-right",
+    "borderRightColor": "border-right-color",
+    "borderRightStyle": "border-right-style",
+    "borderRightWidth": "border-right-width",
+    "borderSpacing": "border-spacing",
+    "borderStyle": "border-style",
+    "borderTop": "border-top",
+    "borderTopColor": "border-top-color",
+    
+    "borderTopStyle": "border-top-style",
+    "borderTopWidth": "border-top-width",
+    "borderWidth": "border-width",
+    "bottom": "bottom",
+    "boxDecorationBreak": "box-decoration-break",
+    "boxShadow": "box-shadow",
+    "boxSizing": "box-sizing",
+    "captionSide": "caption-side",
+    "caretColor": "caret-color",
+    "@charset": "@charset",
+    "clear": "clear",
+    "clip": "clip",
+    "clipPath": "clip-path",
+    "color": "color",
+    "columnCount": "column-count",
+    "columnFill": "column-fill",
+    "columnGap": "column-gap",
+    "colGap": "column-gap",
+    "columnRule": "column-rule",
+    "columnRuleColor": "column-rule-color",
+    "columnRuleStyle": "column-rule-style",
+    "columnRuleWidth": "column-rule-width",
+    "columnSpan": "column-span",
+    "columnWidth": "column-width",
+    "colW": "column-width",
+    "columns": "columns",
+    "content": "content",
+    "counterIncrement": "counter-increment",
+    "counterReset": "counter-reset",
+    "cursor": "cursor",
+    "pointer": "pointer",
+    "direction": "direction",
+    "display": "display",
+    "emptyCells": "empty-cells",
+    "filter": "filter",
+    "flex": "flex",
+    "flexBasis": "flex-basis",
+    "dir": "flex-direction",
+    "flexDirection": "flex-direction",
+    "flexFlow": "flex-flow",
+    "flexGrow": "flex-grow",
+    "flexShrink": "flex-shrink",
+    "flexWrap": "flex-wrap",
+    "float": "float",
+    "font": "font",
+    "fontFamily": "font-family",
+    "fontKerning": "font-kerning",
+    "size": "font-size",
+    "fontSize": "font-size",
+    "fontSizeAdjust": "font-size-adjust",
+    "fontStretch": "font-stretch",
+    "fontStyle": "font-style",
+    "fontVariant": "font-variant",
+    "bold": "bold",
+    "fontWeight": "font-weight",
+    "gap" : "gap",
+    "grid": "grid",
+    "gridArea": "grid-area",
+    "gridAutoColumns": "grid-auto-columns",
+    "gridAutoFlow": "grid-auto-flow",
+    "gridAutoRows": "grid-auto-rows",
+    "gridColumn": "grid-column",
+    "gridColumnEnd": "grid-column-end",
+    "gridColumnGap": "grid-column-gap",
+    "gridColumnStart": "grid-column-start",
+    "gridGap": "grid-gap",
+    "gridRow": "grid-row",
+    "gridRowEnd": "grid-row-end",
+    "gridRowGap": "grid-row-gap",
+    "gridRowStart": "grid-row-start",
+    "gridTemplate": "grid-template",
+    "gridTemplateAreas": "grid-template-areas",
+    "gridTemplateColumns": "grid-template-columns",
+    "gridTemplateRows": "grid-template-rows",
+    "hangingPunctuation": "hanging-punctuation",
+    "hyphens": "hyphens",
+    "isolation": "isolation",
+    "jcc": "jcc",
+    "jcs": "jcs",
+    "jce": "jce",
+    "jc": "justify-content",
+    "justifyContent": "justify-content",
+    "left": "left",
+    "letterSpacing": "letter-spacing",
+    "lineHeight": "line-height",
+    "listStyle": "list-style",
+    "listStyleImage": "list-style-image",
+    "listStylePosition": "list-style-position",
+    "listStyleType": "list-style-type",
+    
+    //Margin
+    "m": "margin",
+    "margin": "margin",
+    "mb": "margin-bottom",
+    "marginBottom": "margin-bottom",
+    "ml": "margin-left",
+    "marginLeft": "margin-left",
+    "mr": "margin-right",
+    "marginRight": "margin-right",
+    "mt": "margin-top",
+    "marginTop": "margin-top",
+    
+    
+    //Height
+    "h": "height",
+    "height": "height",
+    "minH": "min-height",
+    "minHeight": "min-height",
+    "maxH": "max-height",
+    "maxHeight": "max-height",
+    
+    //Width
+    "w": "width",
+    "width": "width",
+    "minW": "min-width",
+    "minWidth": "min-width",
+    "maxW": "max-width",
+    "maxWidth": "max-width",
+    
+    "mixBlendMode": "mix-blend-mode",
+    "objectFit": "object-fit",
+    "objectPosition": "object-position",
+    "opacity": "opacity",
+    "order": "order",
+    "outline": "outline",
+    "outlineColor": "outline-color",
+    "outlineOffset": "outline-offset",
+    "outlineStyle": "outline-style",
+    "outlineWidth": "outline-width",
+    "overflow": "overflow",
+    "overflowX": "overflow-x",
+    "overflowY": "overflow-y",
+    
+
+    "p": "padding",
+    "padding": "padding",
+    "pb": "padding-bottom",
+    "paddingBottom": "padding-bottom",
+    "pl": "padding-left",
+    "paddingLeft": "padding-left",
+    "pr": "padding-right",
+    "paddingRight": "padding-right",
+    "pt": "padding-top",
+    "paddingTop": "padding-top",
+    
+    "pageBreakAfter": "page-break-after",
+    "pageBreakBefore": "page-break-before",
+    "pageBreakInside": "page-break-inside",
+    "perspective": "perspective",
+    "perspectiveOrigin": "perspective-origin",
+    "pointerEvents": "pointer-events",
+    
+    "rel":"rel",
+    "abs":"abs",
+    "fixed":"fixed",
+    "sticky":"sticky",
+    "pos": "position",
+    "position": "position",
+    
+    "quotes": "quotes",
+    "resize": "resize",
+    "right": "right",
+    "scrollBehavior": "scroll-behavior",
+    "tabSize": "tab-size",
+    "tableLayout": "table-layout",
+    
+    "align" : "text-align",
+    "textAlign": "text-align",
+    "textAlignLast": "text-align-last",
+    
+    "tdh": "tdh", //text-decoration: underline on hover
+    "td": "text-decoration",
+    "textDecoration": "text-decoration",
+    "textDecorationColor": "text-decoration-color",
+    "textDecorationLine": "text-decoration-line",
+    "textDecorationStyle": "text-decoration-style",
+    "textIndent": "text-indent",
+    "textJustify": "text-justify",
+    "textOverflow": "text-overflow",
+    "textShadow": "text-shadow",
+    "textTransform": "text-transform",
+    "top": "top",
+    
+    "transform": "transform",
+    "transform(2D)": "transform(2D)",
+    "transformOrigin(twoValue syntax)": "transform-origin(two-value syntax)",
+    "transformStyle": "transform-style",
+    "transition": "transition",
+    "transitionDelay": "transition-delay",
+    "transitionDuration": "transition-duration",
+    "transitionProperty": "transition-property",
+    "transitionTimingFunction": "transition-timing-function",
+    "unicodeBidi": "unicode-bidi",
+    "userSelect": "user-select",
+    "verticalAlign": "vertical-align",
+    "visibility": "visibility",
+    "weight" : "flex",
+    "whiteSpace": "white-space",
+    "ws": "white-space",
+    "wordBreak": "word-break",
+    "wordSpacing": "word-spacing",
+    "wrap": "wrap",
+    "wordWrap": "word-wrap",
+    "writingMode": "writing-mode",
+    "zIndex": "z-index",
+    "backdropFilter": "backdrop-filter",
+    "bgFilter": "backdrop-filter",
+
+    //Custom
+    "anim" : "anim",
+    "fill" : "fill",
+    "abc" : "abc",
+    "fb" : "fb",
+    "ph" : "ph",
+    "pv" : "pv",
+    "mv" : "mv",
+    "mh" : "mh"
+}
+
+const cssPropsVals : { [key: string] : any } = {
+    //Colors
+    "primary" : 'var(--primary-color)',
+    "c" : "center",
+    //Flex Directions
+    "cols" : "column",
+    "colsr" : "column-reverse",
+    "rows" : "row",
+    "rowsr" : "row-reverse",
+    //Positions
+    "rel" : "relative",
+    "abs" : "absolute",
+}
+
+const cssPropsDirect : { [key : string] : any } = {
+    'rel' : 'position: relative;',
+    'fixed' : 'position: fixed;',
+    'abs' : 'position: absolute;',
+    'sticky' : 'position: sticky;',
+    'flex' : 'display: flex;',
+    'fwrap' : 'flex-wrap: wrap;',
+    'aic' : 'align-items: center;',
+    'ass' : 'align-self: flex-start;',
+    'asc' : 'align-self: center;',
+    'ase' : 'align-self: flex-end;',
+    'jcc' : 'justify-content: center;',
+    'jcs' : 'justify-content: flex-start;',
+    'jce' : 'justify-content: flex-end;',
+    'grid' : 'display: grid;',
+    'fill' : 'top: 0px;left: 0px;right: 0px;bottom: 0px;',
+    'abc' : 'top: 50%;left: 50%;transform: translate(-50%, -50%);',
+    'block' : 'display: block;',
+    'bold' : "font-weight: bold;",
+    'wrap' : "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;'
+}
+
+const cssPropsIgnore : string[] = [
+    'weight', `opacity`
+]
+
+const _cssColors : string[] = [ `white`, `black`, `gray`, `red`, `orange`, `yellow`, `green`, `teal`, `blue`, `cyan`, `purple`, `pink`, `linkedin`, `facebook`, `messenger`, `whatsapp`, `twitter`, `telegram`  ]
+const _cssColorsRange : string[] = [ `50`, `100`, `200`, `300`, `400`, `500`, `600`, `700`, `800`, `900`  ]
+let cssColors : string[] = []
+
+if(cssColors.length == 0){
+    _cssColors.map(c => {
+        _cssColorsRange.map(r => cssColors.push(`${c}.${r}`));
+    });
+}
+
+export { 
+    cssPropsDirect,
+    cssProps,
+    cssPropsVals,
+    cssPropsIgnore,
+    cssColors
+}

package/src/hooks/index.tsx

@@ -0,0 +1,8 @@
+export { default as useTheme } from './useTheme'
+export { default as useImage } from './useImage'
+export { default as useStore } from './useStore'
+export { default as useDispatch } from './useDispatch'
+export { default as useResizeObserver } from './useResizeObserver'
+export { default as useDevice } from './useDevice'
+export { default as useToast } from './useToast'
+// export { default as useRouter } from './useRouter'

package/src/hooks/useAppReducer.tsx

@@ -0,0 +1,40 @@
+import { useReducer } from 'react'
+import { UNDO, REDO, RESET } from '../actions'
+
+const useAppReducer = (reducer, inititalState : Object, passedConfig = {}) => {
+
+    const initialStateWithUndoRedo = {
+        ...inititalState,
+        pastDesignStates: [],
+        futureDesignStates: [],
+        hasRedo: false,
+        hasUndo: false,
+    }
+
+    const undoRedoResetReducer = (state, action) => {
+        
+        const newPresetState = reducer(state, action) || initialStateWithUndoRedo
+
+        if([UNDO,REDO,RESET].includes(action.type)){
+            return newPresetState;
+        }
+
+        if(newPresetState.isDesignState){
+
+            const newState = {
+                
+            }
+
+            return newState;
+
+        }
+
+        return newPresetState;
+
+    }
+
+    return useReducer(undoRedoResetReducer, initialStateWithUndoRedo)
+
+}
+
+export default useAppReducer;

package/src/hooks/useChooseEffect.tsx

@@ -0,0 +1,6 @@
+import { useEffect, useLayoutEffect } from 'react'
+
+const useChooseEffect =
+  typeof window === 'undefined' ? useEffect : useLayoutEffect
+
+export default useChooseEffect

package/src/hooks/useDevice.tsx

@@ -0,0 +1,164 @@
+import { useMemo, useState, useCallback, useDebugValue } from 'react'
+import useChooseEffect from './useChooseEffect'
+
+export type Config = {
+  readonly [key: string]: number
+}
+
+export type MediaQuery<C extends Config> = {
+  breakpoint: keyof C
+  maxWidth: number | null
+  minWidth: C[keyof C]
+  query: string
+}
+
+export type Breakpoint<C extends Config> = {
+  breakpoint: keyof C
+  maxWidth?: number | null
+  minWidth: C[keyof C]
+}
+
+const EMPTY_BREAKPOINT = {
+  breakpoint: undefined,
+  minWidth: undefined,
+  maxWidth: undefined,
+} as const
+
+type Return<C extends Config, D> = D extends undefined
+  ? Breakpoint<C> | typeof EMPTY_BREAKPOINT
+  : D extends keyof C
+  ? Breakpoint<C>
+  : never
+
+const useDevice = <C extends Config, D extends keyof C | undefined>(
+  config: C,
+  defaultBreakpoint?: D,
+  hydrateInitial = true
+) : Return<C, D> => {
+
+  const buildQueries = (breakpoints: Config) : MediaQuery<Config>[] => {
+    const sorted = Object.keys(breakpoints).sort(
+      (a, b) => breakpoints[b] - breakpoints[a]
+    )
+
+    return sorted.map((breakpoint, index) => {
+      let query = ''
+      const minWidth = breakpoints[breakpoint]
+      const nextBreakpoint = sorted[index - 1] as string | undefined
+      const maxWidth = nextBreakpoint ? breakpoints[nextBreakpoint] : null
+
+      if (minWidth >= 0) {
+        query = `(min-width: ${minWidth}px)`
+      }
+
+      if (maxWidth !== null) {
+        if (query) {
+          query += ' and '
+        }
+        query += `(max-width: ${maxWidth - 1}px)`
+      }
+
+      const mediaQuery: MediaQuery<Config> = {
+        breakpoint,
+        maxWidth: maxWidth ? maxWidth - 1 : null,
+        minWidth,
+        query,
+      }
+
+      return mediaQuery
+
+    })
+
+  }
+  
+  /** Memoize list of calculated media queries from config */
+  const mediaQueries = useMemo(() => buildQueries(config), [config])
+
+  /** Get initial breakpoint value */
+  const [currentBreakpoint, setCurrentBreakpoint] = useState<
+    Breakpoint<C> | typeof EMPTY_BREAKPOINT
+  >(() => {
+    /** Loop through all media queries */
+    for (const { query, ...breakpoint } of mediaQueries) {
+      /**
+       * If we're in the browser and there's no default value,
+       * try to match actual breakpoint. If the default value
+       * should not be hydrated, use the actual breakpoint.
+       */
+      if (
+        typeof window !== 'undefined' &&
+        !(defaultBreakpoint && hydrateInitial)
+      ) {
+        const mediaQuery = window.matchMedia(query)
+        if (mediaQuery.matches) {
+          return breakpoint as Breakpoint<C>
+        }
+      } else if (breakpoint.breakpoint === defaultBreakpoint) {
+        /** Otherwise, try to match default value */
+        return breakpoint as Breakpoint<C>
+      }
+    }
+
+    return EMPTY_BREAKPOINT
+  })
+
+  /** If there's a match, update the current breakpoint */
+  const updateBreakpoint = useCallback(
+    (
+      { matches }: MediaQueryList | MediaQueryListEvent,
+      breakpoint: Breakpoint<C>
+    ) => {
+      if (matches) {
+        setCurrentBreakpoint(breakpoint)
+      }
+    },
+    []
+  )
+
+  /** On changes to mediaQueries, subscribe to changes using window.matchMedia */
+  useChooseEffect(() => {
+    const unsubscribers = mediaQueries.map(({ query, ...breakpoint }) => {
+      const list = window.matchMedia(query)
+      updateBreakpoint(list, breakpoint as Breakpoint<C>)
+
+      const handleChange = (event: MediaQueryListEvent) => {
+        updateBreakpoint(event, breakpoint as Breakpoint<C>)
+      }
+
+      const supportsNewEventListeners =
+        'addEventListener' in list && 'removeEventListener' in list
+
+      if (supportsNewEventListeners) {
+        list.addEventListener('change', handleChange)
+      } else {
+        ;(list as MediaQueryList).addListener(handleChange)
+      }
+
+      /** Map the unsubscribers array to a list of unsubscriber methods */
+      return () => {
+        if (supportsNewEventListeners) {
+          list.removeEventListener('change', handleChange)
+        } else {
+          ;(list as MediaQueryList).removeListener(handleChange)
+        }
+      }
+    })
+
+    /** Return a function that when called, will call all unsubscribers */
+    return () => unsubscribers.forEach((unsubscriber) => unsubscriber())
+  }, [mediaQueries, updateBreakpoint])
+
+  /** Print a nice debug value for React Devtools */
+  useDebugValue(currentBreakpoint, (c) =>
+    typeof c.breakpoint === 'string'
+      ? `${c.breakpoint} (${c.minWidth} ≤ x${
+          c.maxWidth ? ` < ${c.maxWidth + 1}` : ''
+        })`
+      : ''
+  )
+
+  return currentBreakpoint as Return<C, D>
+  
+}
+
+export default useDevice;

package/src/hooks/useDispatch.tsx

@@ -0,0 +1,37 @@
+import { useContext } from 'react'
+import AppContext from '../context'
+
+const useDispatch = (key? : string) => {
+    
+    const state = useContext(AppContext)
+    const dispatch = state['dispatch'];
+
+    const prepareState = (prevState, nextState) => {
+        const nextKeys = Object.keys(nextState)
+        nextKeys.map(k => {
+            if(prevState[k] !== nextState[k]){
+                prevState[k] = nextState[k]
+            }
+        });
+        return {
+            ...prevState,
+            ...nextState
+        }
+    }
+
+    if(key){
+        return (payload = {}) => {
+
+            dispatch({
+                action: key,
+                payload: {
+                    [key] : prepareState(state[key], payload)
+                }
+            });
+        }
+    }
+
+    return dispatch;
+}
+
+export default useDispatch

package/src/hooks/useImage.tsx

@@ -0,0 +1,58 @@
+import React, { useRef, useLayoutEffect, useState } from 'react'
+
+const useImage = (url, crossOrigin, referrerpolicy) => {
+    
+    const statusRef = useRef('loading')
+    const imageRef = useRef<HTMLImageElement>();
+
+    const [_, setStateToken] = useState(0);
+
+    const oldUrl = useRef();
+    const oldCrossOrigin = useRef();
+    const oldReferrerPolicy = useRef();
+
+    if(oldUrl.current !== url || oldCrossOrigin.current !== crossOrigin || oldReferrerPolicy.current !== referrerpolicy){
+        statusRef.current = 'loading';
+        imageRef.current = undefined;
+        oldUrl.current = url;
+        oldCrossOrigin.current = crossOrigin;
+        oldReferrerPolicy.current = referrerpolicy;
+    }
+
+    useLayoutEffect(
+        function(){
+            
+            if(!url) return;
+            var img = document.createElement('img');
+
+            function onload(){
+                statusRef.current = 'loaded';
+                imageRef.current = img;
+                setStateToken(Math.random());
+            }
+
+            function onerror(){
+                statusRef.current = 'failed';
+                imageRef.current = undefined;
+                setStateToken(Math.random());
+            }
+            
+            img.addEventListener('load', onload);
+            img.addEventListener('error', onerror);
+            crossOrigin && (img.crossOrigin = crossOrigin);
+            referrerpolicy && (img.referrerPolicy = referrerpolicy);
+            img.src = url;
+
+            return function cleanup() {
+                img.removeEventListener('load', onload);
+                img.removeEventListener('error', onerror);
+            };
+
+        },
+        [url, crossOrigin, referrerpolicy]
+    );
+
+    return [imageRef.current, statusRef.current];
+}
+
+export default useImage;