@zuzjs/ui 0.3.2 → 0.3.4

package/src/hooks/useDevice.tsx

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

@@ -1,84 +0,0 @@
-import React, {useState} from 'react'
-import { imgPromiseFactory } from '../core'
-
-export type useImageProps = {
-    srcList: string | string[]
-    imgPromise?: (...args: any[]) => Promise<void>
-    useSuspense?: boolean
-}
-
-const removeBlankArrayElements = (a) => a.filter((x) => x)
-const stringToArray = (x) => (Array.isArray(x) ? x : [x])
-const cache = {}
-
-// sequential map.find for promises
-const promiseFind = (arr, promiseFactory) => {
-    let done = false
-    return new Promise((resolve, reject) => {
-      const queueNext = (src) => {
-        return promiseFactory(src).then(() => {
-          done = true
-          resolve(src)
-        })
-      }
-  
-      arr
-        .reduce((p, src) => {
-          // ensure we aren't done before enqueuing the next source
-          return p.catch(() => {
-            if (!done) return queueNext(src)
-          })
-        }, queueNext(arr.shift()))
-        .catch(reject)
-    })
-}
-
-const useImage = ({
-    srcList,
-    imgPromise = imgPromiseFactory({decode: true}),
-    useSuspense = true,
-} : useImageProps) : {src: string | undefined; isLoading: boolean; error: any} => {
-
-    const [, setIsSettled] = useState(false)
-    const sourceList = removeBlankArrayElements(stringToArray(srcList))
-    const sourceKey = sourceList.join('')
-
-    if (!cache[sourceKey]) {
-        // create promise to loop through sources and try to load one
-        cache[sourceKey] = {
-          promise: promiseFind(sourceList, imgPromise),
-          cache: 'pending',
-          error: null,
-        }
-    }
-
-    // when promise resolves/reject, update cache & state
-    if (cache[sourceKey].cache === 'resolved') {
-        return {src: cache[sourceKey].src, isLoading: false, error: null}
-    }
-
-    if (cache[sourceKey].cache === 'rejected') {
-        if (useSuspense) throw cache[sourceKey].error
-        return {isLoading: false, error: cache[sourceKey].error, src: undefined}
-    }
-
-    cache[sourceKey].promise
-        // if a source was found, update cache
-        // when not using suspense, update state to force a rerender
-        .then((src) => {
-            cache[sourceKey] = {...cache[sourceKey], cache: 'resolved', src}
-            if (!useSuspense) setIsSettled(sourceKey)
-        })
-        // if no source was found, or if another error occurred, update cache
-        // when not using suspense, update state to force a rerender
-        .catch((error) => {
-            cache[sourceKey] = {...cache[sourceKey], cache: 'rejected', error}
-            if (!useSuspense) setIsSettled(sourceKey)
-        })
-    // cache[sourceKey].cache === 'pending')
-    if (useSuspense) throw cache[sourceKey].promise
-    return {isLoading: true, src: undefined, error: null}
-
-}
-
-export default useImage;

package/src/hooks/useLang.tsx

@@ -1,9 +0,0 @@
-import { useContext, useEffect } from 'react'
-import AppContext from '../context'
-
-const useLang = (mod = 'en') => {
-    const state = useContext(AppContext)
-    return state['lang'] || {};
-}
-
-export default useLang

package/src/hooks/useMediaPlayer.tsx

@@ -1,27 +0,0 @@
-import { useEffect, useMemo } from "react"
-import { uuid } from "../core"
-
-const useMediaPlayer = (
-    playerID? : string
-) => {
-
-    const pid = useMemo(() => playerID || uuid(), [playerID])
-    const ID = `media-player-${pid}`
-
-    const el = (e : string) => window.document.createElement(e)
-    
-    const createRoot = () => {
-        if(!window.document.querySelector(`#${ID}`)){
-            let div = el(`div`)
-            div.id = ID
-            window.document.body.appendChild(div)
-        }
-    }
-
-    useEffect(() => {
-
-    }, [])
-
-}
-
-export default useMediaPlayer

package/src/hooks/useNavigator.tsx

@@ -1,6 +0,0 @@
-const useNavigator = () => {
-
-    
-
-    return []
-}

package/src/hooks/useRender.tsx

@@ -1,29 +0,0 @@
-import { useState, useEffect } from "react"
-
-const useRender = (isMounted: boolean, delay: number) => {
-    
-    const [canRender, setCanRender] = useState(false)
-
-    // console.log(
-    //     `isMounted:`, isMounted,
-    //     `canRender:`, canRender,
-    // )
-
-    useEffect(() => {
-        let outID : any
-        if(isMounted && !canRender){
-            setCanRender(true)
-        }else if(isMounted && canRender){
-            outID = setTimeout(
-                () => setCanRender(false), 
-                delay * 1000
-            )
-        }
-        return () => clearTimeout(outID);
-    }, [isMounted, delay])
-
-    return canRender;
-
-}
-
-export default useRender

package/src/hooks/useResizeObserver.tsx

@@ -1,84 +0,0 @@
-/** External Dependencies */
-import { useCallback, useEffect, useMemo, useRef } from 'react';
-
-const useResizeObserver = (onResized) => {
-
-  const onResize = onResized ? onResized : () => {};
-  const onResizeCallback = useRef(onResize);
-  const resizeObserver = useRef();
-
-  const observerCallback = useCallback((entries) => {
-    entries.forEach((entry) => {
-      if (entry.contentRect) {
-        const { width, height } = entry.contentRect;
-
-        onResizeCallback.current({
-          entry,
-          width,
-          height,
-        });
-      }
-    });
-  }, []);
-
-  const updateOnResizeCallback = useCallback((newOnResizeCallback) => {
-    onResizeCallback.current = newOnResizeCallback;
-  }, []);
-
-  const initObserver = useCallback(() => {
-    if (!resizeObserver.current) {
-      {/* 
-      // @ts-ignore */}
-      resizeObserver.current = new ResizeObserver(observerCallback);
-    }
-  }, []);
-
-  const observeElement = useCallback((element, newOnResizeCallback) => {
-    if (element) {
-      if (!resizeObserver.current) {
-        initObserver();
-      }
-
-      {/* 
-      // @ts-ignore */}
-      resizeObserver.current.observe(element);
-
-      if (newOnResizeCallback) {
-        onResizeCallback.current = newOnResizeCallback;
-      }
-    }
-  }, []);
-
-  const unobserveElement = useCallback((element, newOnResizeCallback) => {
-    if (resizeObserver.current && element) {
-
-      {/* 
-      // @ts-ignore */}
-      resizeObserver.current.unobserve(element);
-
-      if (newOnResizeCallback) {
-        onResizeCallback.current = newOnResizeCallback;
-      }
-    }
-  }, []);
-
-  const removeObserver = useCallback(() => {
-    if (resizeObserver.current) {
-      {/* 
-      // @ts-ignore */}
-      resizeObserver.current.disconnect();
-    }
-  }, []);
-
-  useEffect(() => {
-    initObserver();
-    return removeObserver;
-  }, []);
-
-  return useMemo(
-    () => [observeElement, unobserveElement, updateOnResizeCallback],
-    [],
-  );
-};
-
-export default useResizeObserver;

package/src/hooks/useRouter.tsx

@@ -1,45 +0,0 @@
-import { Fragment, Suspense } from 'react'
-import { createBrowserRouter, Outlet, RouterProvider, useLocation } from 'react-router-dom'
-import type { ActionFunction, RouteObject, LoaderFunction } from 'react-router-dom'
-
-import { generateModalRoutes, generatePreservedRoutes, generateRegularRoutes } from '../core'
-
-type Element = () => JSX.Element
-type Module = { default: Element; Loader?: LoaderFunction; Action?: ActionFunction; Catch?: Element; Pending?: Element }
-
-const PRESERVED = import.meta.glob<Module>('/src/pages/(_app|404).{jsx,tsx}', { eager: true })
-const MODALS = import.meta.glob<Pick<Module, 'default'>>('/src/pages/**/[+]*.{jsx,tsx}', { eager: true })
-const ROUTES = import.meta.glob<Module>(['/src/pages/**/[\\w[-]*.{jsx,tsx}', '!**/(_app|404).*'], { eager: true })
-
-const preservedRoutes = generatePreservedRoutes<Omit<Module, 'Action'>>(PRESERVED)
-const modalRoutes = generateModalRoutes<Element>(MODALS)
-
-const regularRoutes = generateRegularRoutes<RouteObject, Partial<Module>>(ROUTES, (module, key) => {
-    const index = /index\.(jsx|tsx)$/.test(key) && !key.includes('pages/index') ? { index: true } : {}
-    const Element = module?.default || Fragment
-    const Page = () => (module?.Pending ? <Suspense fallback={<module.Pending />} children={<Element />} /> : <Element />)
-    return { ...index, Component: Page, ErrorBoundary: module?.Catch, loader: module?.Loader, action: module?.Action }
-})
-  
-const _app = preservedRoutes?.['_app']
-const _404 = preservedRoutes?.['404']
-
-const Element = _app?.default || Fragment
-const App = () => (_app?.Pending ? <Suspense fallback={<_app.Pending />} children={<Element />} /> : <Element />)
-
-const app = { Component: _app?.default ? App : Outlet, ErrorBoundary: _app?.Catch, loader: _app?.Loader }
-const fallback = { path: '*', Component: _404?.default || Fragment }
-
-export const routes: RouteObject[] = [{ ...app, children: [...regularRoutes, fallback] }]
-export const Routes = () => <RouterProvider router={createBrowserRouter(routes)} />
-
-export const Modals = () => {
-const Modal = modalRoutes[useLocation().state?.modal] || Fragment
-return <Modal />
-}
-
-const useRouter = (root : string) => {
-    return Routes;
-}
-
-export default useRouter;

package/src/hooks/useSelector.tsx

@@ -1,9 +0,0 @@
-import { useContext } from 'react'
-import AppContext from '../context'
-
-const useDispatch = () => {
-    const state = useContext(AppContext)
-    return state['dispatch'];
-}
-
-export default useDispatch

package/src/hooks/useTheme.tsx

@@ -1,9 +0,0 @@
-import { useContext, useEffect } from 'react'
-import AppContext from '../context'
-
-const useTheme = (mod = 'auto') => {
-    const state = useContext(AppContext)
-    return state['theme'] || {};
-}
-
-export default useTheme

package/src/hooks/useToast.tsx

@@ -1,11 +0,0 @@
-import { useMemo } from 'react'
-import Toaster from '../comps/toaster'
-
-const useToast = () => {
-
-    const toaster = useMemo(() => new Toaster(), []);
-
-    return toaster;
-}
-
-export default useToast;

package/src/index.tsx

@@ -1,35 +0,0 @@
-import './scss/style.scss'
-import { Provider, createSlice } from './context'
-
-export * from './core/index';
-export * from './hooks/index';
-
-export { Link } from "react-router-dom"
-
-export { default as App } from './comps/app'
-export { default as Box } from './comps/box'
-export { default as Button } from './comps/button'
-export { default as Block } from './comps/component'
-export { default as Checkbox } from './comps/checkbox'
-export { default as Cover } from './comps/cover'
-export { default as Form } from './comps/form'
-export { default as Heading } from './comps/heading'
-export { default as Icon } from './comps/icon'
-export { default as Input } from './comps/input'
-export { default as Image } from './comps/image'
-export { default as Masonry } from './comps/masonry'
-export { default as Placeholder } from './comps/placeholder'
-export { default as Toaster } from './comps/toaster'
-export { default as Select } from './comps/select'
-export { default as Spacer } from './comps/spacer'
-export { default as Spinner } from './comps/spinner'
-export { default as Text } from './comps/text'
-export { default as Tweet } from './comps/tweet'
-// export { default as ContextMenu } from './comps/contextmenu'
-
-export { default as Header } from './kit/Header'
-
-export { 
-    Provider,
-    createSlice
-}

package/src/kit/Builder.tsx

@@ -1,18 +0,0 @@
-import Box from '../comps/box'
-import { nanoid } from 'nanoid'
-
-const buildElement = (el) => {
-    switch(el.is){
-        case "Box":
-            return <Box key={el.key || nanoid()} {...(el.props || {})}>{el.children || null}</Box>
-            break;
-    }
-}
-
-const buildComponent = (data) => {
-    return data.map(e => buildElement(e))
-}
-
-export {
-    buildComponent
-}

package/src/kit/Component.tsx

@@ -1,32 +0,0 @@
-import {
-    forwardRef,
-    useCallback,
-    useEffect
-} from 'react';
-import { Box } from '../index'
-
-const Component = forwardRef((props : { [ key: string ] : any }, ref) => {
-
-    const data = props.data || [
-        { is: 'Box' }
-    ]
-
-    const Element = useCallback((el) => {
-        switch(el.is){
-            case "Box":
-                return <Box {...(el.props || {})}>{el.children || null}</Box>
-                break;
-        }
-    }, [])
-
-    return (
-        <>
-        {data.map(el => Element(el))}
-        </>
-        // <Box w={`100vw`} h={60} bg={`#eee`}>
-        //     {}
-        // </Box>
-    )
-})
-
-export default Component;

package/src/kit/Header.tsx

@@ -1,21 +0,0 @@
-import {
-    forwardRef,
-    useEffect
-} from 'react';
-import { Box } from '../index'
-import { buildComponent } from './Builder'
-
-const Header = forwardRef((props : { [ key: string ] : any }, ref) => {
-
-    const data = [
-        { is: `Box` }
-    ]
-
-    return (
-        <>
-        {buildComponent(data)}
-        </>
-    )
-})
-
-export default Header;

package/src/redux/slices/app.js

@@ -1,26 +0,0 @@
-import { createSlice } from '@reduxjs/toolkit'
-
-export const appSlice = createSlice({
-    name: `app`,
-    initialState: {
-        debug: true,
-        loading: true,
-        theme: null,
-        _tmp: Math.random()
-    },
-    reducers: {
-        setLoading: (state, action) => {
-            state.loading = action.payload || false;
-        },
-        setTheme: (state, action) => { state.theme = action.payload },
-        forceUpdate: (state, action) => { state._tmp = Math.random() }
-    }
-});
-
-export const {
-    setLoading,
-    setTheme,
-    forceUpdate
-} = appSlice.actions;
-
-export default appSlice.reducer;

package/src/redux/slices/form.js

@@ -1,46 +0,0 @@
-import { createSlice } from '@reduxjs/toolkit'
-
-export const formSlice = createSlice({
-    name: `form`,
-    initialState: {
-        forms: {}
-    },
-    reducers: {
-        addForm: (state, action) => {
-            state.forms[action.payload] = { touched: false, loading: false }
-        },
-        updateForm: (state, action) => {
-            // console.log(action.payload)
-            const { name, k, v } = action.payload;
-            if(state.forms[name]) state.forms[name][k] = v;
-        },
-        addFields: (state, action) => {
-            const { form, fields } = action.payload;
-            if(state.forms[form]) state.forms[form] = { ...state.forms[form], ...fields };
-        },
-        addField: (state, action) => {
-            // console.log('addField', action.payload)
-            // state.forms[action.payload.form][action.payload.name] = action.payload.value
-            // if(
-            //     state.forms[action.payload.form] &&
-            //     !state.forms[action.payload.form][action.payload.name]
-            // ){
-            //     state.forms[action.payload.form][action.payload.name] = action.payload.value
-            // }
-        },
-        updateField: (state, action) => {
-            const { form, name, value } = action.payload;
-            // console.log(`updatingField: ${form} = ${name} => ${value}`, state.forms[form])
-            state.forms[form][name] = value;
-        }
-    }
-});
-
-export const { 
-    addForm,
-    updateForm,
-    addField,
-    addFields,
-    updateField 
-} = formSlice.actions;
-export default formSlice.reducer;