@zuzjs/ui 0.2.4 → 0.2.6

package/src/hooks/useResizeObserver.tsx

@@ -0,0 +1,84 @@
+/** 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

@@ -0,0 +1,45 @@
+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

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

package/src/hooks/useStore.tsx

@@ -0,0 +1,27 @@
+import { useContext } from 'react'
+import AppContext from '../context'
+import { STORE_KEY } from '../context/AppProvider'
+
+const useStore = (callback? : any, withFilter = true) => {
+    // if(withInititalState){
+    //     return useContext(AppContext)    
+    // }
+    let _state = useContext(AppContext)  
+    let state = withFilter ? {} : _state
+
+    if(withFilter){
+        const filters = ['defaultState', 'theme', 'dispatch', `${STORE_KEY}base`,`${STORE_KEY}forms`]   
+        Object.keys(_state).map(k => {
+            if(filters.indexOf(k) == -1){
+                state[k] = _state[k]
+            }
+        });
+    }
+    
+    if("function" == typeof callback){
+        return callback(state)
+    }
+    return state
+}
+
+export default useStore

package/src/hooks/useTheme.tsx

@@ -0,0 +1,9 @@
+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

@@ -0,0 +1,11 @@
+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

@@ -0,0 +1,33 @@
+import './scss/style.scss'
+import { Provider, createSlice } from './context'
+
+export * from './core/index';
+export * from './hooks/index';
+
+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

@@ -0,0 +1,18 @@
+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

@@ -0,0 +1,32 @@
+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

@@ -0,0 +1,21 @@
+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

@@ -0,0 +1,26 @@
+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

@@ -0,0 +1,46 @@
+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;

package/src/redux/store.js

@@ -0,0 +1,33 @@
+import { 
+    configureStore, 
+    combineReducers
+} from '@reduxjs/toolkit'
+import appReducer from './slices/app'
+import formReducer from './slices/form'
+
+const staticReducers = {
+    app: appReducer,
+    form: formReducer
+}
+
+const appstore = configureStore({
+    reducer: staticReducers,
+    middleware: getDefaultMiddleware => getDefaultMiddleware({
+        serializableCheck: false
+    })
+})
+
+appstore.asyncReducers = {}
+appstore.injectReducer = (k, asyncReducer) => {
+    appstore.asyncReducers[k] = asyncReducer;
+    appstore.replaceReducer(createReducer(appstore.asyncReducers))
+}
+
+const createReducer = asyncReducers => {
+    return combineReducers({
+        ...staticReducers,
+        ...asyncReducers
+    })
+}
+
+export default appstore;

package/src/scss/constants.scss

@@ -0,0 +1,4 @@
+:root{
+    --primary-color: #b72b2e;
+    --primary-font: 'Open Sans', sans-serif, segoe ui;    
+}

package/src/scss/mixins.scss

@@ -0,0 +1,3 @@
+@mixin anim($duration: 0.3s) {
+    transition: all $duration linear 0s;
+}

package/src/scss/props.scss

@@ -0,0 +1,60 @@
+*, *:before, *:after{
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+}
+*, html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, label, fieldset, input, p, blockquote, th, td{margin: 0;padding: 0;}
+table{border-collapse: collapse; border-spacing: 0;}
+fieldset, img {border: 0}
+address, caption, cite, code, dfn, em, strong, th, var {font-style: normal; font-weight: normal}
+ol, ul, li{list-style: none;}
+caption, th{text-align: left;}
+h1, h2, h3, h4, h5, h6{font-size: 100%; font-weight: normal;}
+div, img, button, input, textarea, select{outline: none}
+strong{font-weight: bold}
+em{font-style: italic;}
+a img{border: none;}
+
+*, .f{ font-family: var(--primary-font); }
+.fb{ font-family: var(--primary-font-bold); }
+
+button{cursor: pointer;}
+.fixed{ position: fixed; }
+.block{display: block;}
+.iblock{display: inline-block;}
+.tdn{ text-decoration: none; }
+.tdh:hover{ text-decoration: underline; }
+.cprimary, .color{ color: var(--primary-color); }
+.primary{ background-color: var(--primary-color); }
+.tdnh, .tdn{ text-decoration: none; }
+.tdnh:hover{ text-decoration: underline; }
+.flex{
+    display: flex;
+    &.ass{align-self: flex-start;}
+    &.asc{align-self: center;}
+    &.ase{align-self: flex-end;}
+    &.ais{align-items: flex-start;}
+    &.aic{align-items: center;}
+    &.aie{align-items: flex-end;}
+    &.jcs{justify-content: flex-start;}
+    &.jcc{justify-content: center;}
+    &.jce{justify-content: flex-end;}
+}
+/*
+    COLORS
+    It will generate .cfff { color: #fff; } from 'fff'
+*/
+$colors: 'fff','111','222','333','444','555','666','777','888','999';
+@each $n in $colors{
+    .c#{$n} { color: unquote("#"+#{$n}); }
+}
+
+/*
+    FONT SIZES
+    It will generate .s10 { font-size: 12px; } from '12'
+*/
+@for $i from 10 through 72 {
+    @if $i % 2 == 0 {
+        .s#{$i} { font-size: #{$i}px; }
+    }
+}

package/src/scss/style.scss

@@ -0,0 +1,106 @@
+@import './constants.scss';
+@import './mixins.scss';
+@import './props.scss';
+
+@-webkit-keyframes rotating /* Safari and Chrome */ {
+    from {
+      -webkit-transform: rotate(0deg);
+      -o-transform: rotate(0deg);
+      transform: rotate(0deg);
+    }
+    to {
+      -webkit-transform: rotate(360deg);
+      -o-transform: rotate(360deg);
+      transform: rotate(360deg);
+    }
+}
+@keyframes rotating {
+    from {
+        -ms-transform: rotate(0deg);
+        -moz-transform: rotate(0deg);
+        -webkit-transform: rotate(0deg);
+        -o-transform: rotate(0deg);
+        transform: rotate(0deg);
+    }
+    to {
+        -ms-transform: rotate(360deg);
+        -moz-transform: rotate(360deg);
+        -webkit-transform: rotate(360deg);
+        -o-transform: rotate(360deg);
+        transform: rotate(360deg);
+    }
+}
+.rotating {
+    -webkit-animation: rotating 2s linear infinite;
+    -moz-animation: rotating 2s linear infinite;
+    -ms-animation: rotating 2s linear infinite;
+    -o-animation: rotating 2s linear infinite;
+    animation: rotating 2s linear infinite;
+}
+
+.button{
+    background: var(--primary-color);
+    color: #fff;
+    border: 0px; 
+}
+
+.zuz-toast{
+    border-radius: 5px;
+    @include anim($duration: 0.15s);
+    &.hidden{
+        transform: translate(-50%, -300px) scale(0.5) !important;
+    }
+    &.showing{
+        transform: translate(-50%, -50px) scale(0.9) !important;
+    }
+    &.visible{
+        transform: translate(-50%, 0px) scale(1) !important;
+    }
+}
+
+.zuz-checkbox{
+    opacity: 0; // hides checkbox
+    position: absolute;
+    & + label {
+        position: relative;
+        display: inline-block;
+        user-select: none;
+        transition: .4s ease;
+        height: 26px;
+        width: 44px;
+        border-radius: 60px;
+        background: #eee;
+        &:before {
+            content: "";
+            position: absolute;
+            display: block;
+            transition: .2s cubic-bezier(.24, 0, .5, 1);
+            height: 26px;
+            width: 44px;
+            top: 0;
+            left: 0;
+            border-radius: 30px;
+        }
+        &:after {
+            content: "";
+            position: absolute;
+            display: block;
+            transition: .35s cubic-bezier(.54, 1.60, .5, 1);
+            background: #fff;
+            height: 22px;
+            width: 22px;
+            top: 2px;
+            left: 2px;
+            border-radius: 60px;
+        }
+    }
+    &:checked {
+        & + label:before {
+          background: green; // Active Color
+          transition: width .2s cubic-bezier(0, 0, 0, .1);
+        }
+        & + label:after {
+          left: 20px;
+        }
+    }
+}