@zuzjs/ui 0.3.2 → 0.3.4

package/src/hooks/index.tsx

@@ -1,10 +1,2 @@
-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 useLang } from './useLang'
-export { default as useContextMenu } from './useContextMenu'
-export { default as useRender } from './useRender'
+export { default as useStore } from './useStore'
+export { default as useDispatch } from './useDispatch'

package/src/hooks/useDispatch.tsx

@@ -1,37 +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;
-}
-
+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/useStore.tsx

@@ -1,27 +1,25 @@
-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
-}
-
+import { useContext } from 'react'
+import AppContext from '../context'
+import { STORE_KEY } from '../context/AppProvider'
+
+const useStore = (callback? : any, 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
+}
+
 export default useStore

package/src/hooks.tsx

@@ -0,0 +1,8 @@
+import { Provider, createSlice } from './context'
+
+export * from './hooks/index';
+
+export { 
+    Provider,
+    createSlice
+}

package/src/scss/mixins.scss

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

package/src/scss/props.scss

@@ -1,70 +1,92 @@
-*, *: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; }
-    }
-}
-
-/*
-    BoldSize
-    It will generate .b400 { font-weight: 400; } from '400'
-*/
-$bsizes: 100,200,300,400,500,600,700,800,900;
-.bold{ font-weight: bold; }
-@each $n in $bsizes{
-    .b#{$n} { font-weight: #{$n}; }
+*, *: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;}
+
+button{cursor: pointer;}
+.grid{ display: grid; }
+.fixed{ 
+    position: fixed; 
+    &.fill{
+        top: 0px;
+        left: 0px;
+        right: 0px;
+        bottom: 0px;
+    }
+}
+.rel{ position: relative; }
+.abs{ 
+    position: absolute; 
+    &.abc{
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+    }
+    &.fill{
+        top: 0px;
+        left: 0px;
+        right: 0px;
+        bottom: 0px;
+    }
+}
+
+.sticky{ position: sticky; }
+.block{display: block;}
+.iblock{display: inline-block;}
+.tdnh, .tdn{ text-decoration: none; }
+.tdnh:hover, .tdh: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;}
+    &.col{flex-direction: column;}
+}
+
+/*
+    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; }
+    }
+}
+
+/*
+    BoldSize
+    It will generate .b400 { font-weight: 400; } from '400'
+*/
+$bsizes: 100,200,300,400,500,600,700,800,900;
+.bold{ font-weight: bold; }
+@each $n in $bsizes{
+    .b#{$n} { font-weight: #{$n}; }
 }

package/src/scss/{style.scss → styles.scss}

@@ -1,133 +1,103 @@
-@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;
-        }
-    }
-}
-
-.zuz-contextmenu{
-    width: 220px;
-    border-radius: 5px;
-    padding: 4px;
-    background: rgba(34,34,34,0.5);
-    border: 1px rgba(255,255,255,0.25) solid;
-    box-shadow: 0px 1px 3px rgba(0, 0, 0, .45);
-    backdrop-filter: blur(20px);
-    button{
-        border: 0px;
-        text-align: left;
-        padding: 4px 6px;
-        background: rgba(0, 0, 0, 0);
-        cursor: pointer;
-        color: #fff;
-        border-radius: 4px;
-        &:hover{
-            background: #5183ff;
-        }
-    }
-    .line{
-        height: 1px;
-        background: rgba(255,255,255,0.25);
-        margin: 4px 6px;
-    }
+@import './mixins.scss';
+@import './props.scss';
+
+@keyframes rotate-loop {
+    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);
+    }
+}
+
+.zuz-spinner{
+    .zuz-loader{
+        animation: rotate-loop 0.5s linear infinite;
+    }
+}
+
+.button{
+    border: 0px; 
+}
+
+.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;
+        }
+    }
+}
+
+.zuz-contextmenu{
+    width: 220px;
+    border-radius: 5px;
+    padding: 4px;
+    background: rgba(34,34,34,0.5);
+    border: 1px rgba(255,255,255,0.25) solid;
+    box-shadow: 0px 1px 3px rgba(0, 0, 0, .45);
+    backdrop-filter: blur(20px);
+    button{
+        border: 0px;
+        text-align: left;
+        padding: 4px 6px;
+        background: rgba(0, 0, 0, 0);
+        cursor: pointer;
+        color: #fff;
+        border-radius: 4px;
+        &:hover{
+            background: #5183ff;
+        }
+    }
+    .line{
+        height: 1px;
+        background: rgba(255,255,255,0.25);
+        margin: 4px 6px;
+    }
 }

package/src/ui.tsx

@@ -0,0 +1,13 @@
+import './scss/styles.scss'
+
+export * from "./core"
+
+export { default as Stylesheet } from "./comps/stylesheet"
+export { default as Box } from "./comps/box"
+export { default as Heading } from "./comps/heading"
+export { default as Input } from "./comps/input"
+export { default as Button } from "./comps/button"
+export { default as Form } from "./comps/form"
+export { default as Icon } from "./comps/icon"
+export { default as Spinner } from "./comps/spinner"
+export { default as Select } from "./comps/select"