@zuzjs/ui 0.3.2 → 0.3.4

package/dist/hooks.js

@@ -0,0 +1,89 @@
+import { createContext, useEffect, useMemo, useReducer, useCallback, useContext } from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+const AppContext = createContext({});
+
+let isMounted = true;
+const STORE_KEY = `__zuzjs`;
+const STORE_FORM_KEY = `${STORE_KEY}forms`;
+const defaultState = {
+    [`${STORE_KEY}base`]: {
+        debug: true,
+        loading: false,
+        _tmp: Math.random()
+    },
+    [STORE_FORM_KEY]: {
+        forms: {}
+    }
+};
+const rootReducer = (state, action) => (Object.assign(Object.assign({}, state), action.payload));
+const AppProvider = ({ children, initialState = {} }) => {
+    useEffect(() => {
+        isMounted = true;
+        return () => {
+            isMounted = false;
+        };
+    }, []);
+    const rootState = useMemo(() => (Object.assign(Object.assign({}, defaultState), initialState)), [initialState]);
+    const [state, _dispatch] = useReducer(rootReducer, rootState);
+    const dispatch = useCallback((args) => {
+        if (isMounted) {
+            _dispatch(Object.assign({}, args));
+        }
+    }, [_dispatch]);
+    const providedValue = useMemo(() => (Object.assign(Object.assign({}, state), { dispatch })), [state]);
+    return jsx(AppContext.Provider, { value: providedValue, children: children });
+};
+
+const createSlice = ({ name, initialState, reducers }) => {
+    return {
+        name,
+        reducer: reducers,
+        actions: reducers,
+        state: initialState
+    };
+};
+
+const useStore = (callback, withFilter = true) => {
+    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;
+};
+
+const useDispatch = (key) => {
+    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 Object.assign(Object.assign({}, prevState), nextState);
+    };
+    if (key) {
+        return (payload = {}) => {
+            dispatch({
+                action: key,
+                payload: {
+                    [key]: prepareState(state[key], payload)
+                }
+            });
+        };
+    }
+    return dispatch;
+};
+
+export { AppProvider as Provider, createSlice, useDispatch, useStore };

package/dist/styles.css

@@ -1,8 +1,3 @@
-:root {
-  --primary-color: #b72b2e;
-  --primary-font: "Open Sans", sans-serif, segoe ui;
-}
-
 *, *:before, *:after {
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
@@ -57,51 +52,60 @@ a img {
   border: none;
 }
 
-*, .f {
-  font-family: var(--primary-font);
-}
-
-.fb {
-  font-family: var(--primary-font-bold);
-}
-
 button {
   cursor: pointer;
 }
 
+.grid {
+  display: grid;
+}
+
 .fixed {
   position: fixed;
 }
-
-.block {
-  display: block;
+.fixed.fill {
+  top: 0px;
+  left: 0px;
+  right: 0px;
+  bottom: 0px;
 }
 
-.iblock {
-  display: inline-block;
+.rel {
+  position: relative;
 }
 
-.tdn {
-  text-decoration: none;
+.abs {
+  position: absolute;
+}
+.abs.abc {
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+.abs.fill {
+  top: 0px;
+  left: 0px;
+  right: 0px;
+  bottom: 0px;
 }
 
-.tdh:hover {
-  text-decoration: underline;
+.sticky {
+  position: sticky;
 }
 
-.cprimary, .color {
-  color: var(--primary-color);
+.block {
+  display: block;
 }
 
-.primary {
-  background-color: var(--primary-color);
+.iblock {
+  display: inline-block;
 }
 
 .tdnh, .tdn {
   text-decoration: none;
 }
 
-.tdnh:hover {
+.tdnh:hover, .tdh:hover {
   text-decoration: underline;
 }
 
@@ -135,6 +139,9 @@ button {
 .flex.jce {
   justify-content: flex-end;
 }
+.flex.col {
+  flex-direction: column;
+}
 
 /*
     COLORS
@@ -356,19 +363,7 @@ button {
   font-weight: 900;
 }
 
-@-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 {
+@keyframes rotate-loop {
   from {
     -ms-transform: rotate(0deg);
     -moz-transform: rotate(0deg);
@@ -384,34 +379,14 @@ button {
     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;
+.zuz-spinner .zuz-loader {
+  animation: rotate-loop 0.5s linear infinite;
 }
 
 .button {
-  background: var(--primary-color);
-  color: #fff;
   border: 0px;
 }
 
-.zuz-toast {
-  border-radius: 5px;
-  transition: all 0.15s linear 0s;
-}
-.zuz-toast.hidden {
-  transform: translate(-50%, -300px) scale(0.5) !important;
-}
-.zuz-toast.showing {
-  transform: translate(-50%, -50px) scale(0.9) !important;
-}
-.zuz-toast.visible {
-  transform: translate(-50%, 0px) scale(1) !important;
-}
-
 .zuz-checkbox {
   opacity: 0;
   position: absolute;