diginet-core-ui 1.3.85 → 1.3.86

package/styles/general.js

@@ -1,7 +1,6 @@
-/* eslint-disable no-unused-vars */
-import { css, jsx } from '@emotion/core';
+import { css } from '@emotion/core';
 import { color } from "./colors";
-import { parseToPixel } from "./utils";
+import { getColor, parseCSSValue, parseToPixel } from "./utils";
 export const rootSpacing = 4;
 export let rootZIndex = 1500;
 export const typographyTypes = ['t1', 't2', 't3', 't4', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p1', 'p2', 'p3', 'title1', 'title2', 'title3', 'title4', 'heading1', 'heading2', 'heading3', 'heading4', 'heading5', 'heading6', 'paragraph1', 'paragraph2', 'paragraph3'];
@@ -27,7 +26,7 @@ export const getSpacing = (vl = 1) => {
   if (typeof vl === 'number') return Number(vl) * rootSpacing;else if (Array.isArray(vl)) {
     if (vl.length > 4) vl.length = 4;
     return vl.flatMap(i => isNaN(i) ? i : i * rootSpacing + 'px').join(' ');
-  }
+  } else return vl;
 };
 
 /**
@@ -38,183 +37,350 @@ export const setZIndex = number => {
   number = Number(number || 0);
   if (!isNaN(number)) rootZIndex = number;
 };
-export const flexRow = css`
-    display: flex;
-    flex-direction: row;
+
+// Common CSS
+const bgColor = cl => css`
+    background-color: ${getColor(cl)};
+`;
+const bgCurrent = css`
+    background-color: currentColor;
+`;
+const bgTransparent = css`
+    background-color: transparent;
+`;
+const border = (withVl, colorVl) => css`
+    border: ${parseToPixel(withVl)} solid ${colorVl || color.dark};
+`;
+const borderNone = css`
+    border: none;
+`;
+const borderRadius = vl => css`
+    border-radius: ${parseCSSValue(vl)};
+`;
+const borderRadius100 = css`
+    border-radius: 100%;
+`;
+const borderRadius4px = css`
+    border-radius: 4px;
+`;
+const borderRadius50 = css`
+    border-radius: 50%;
+`;
+const boxBorder = css`
+    box-sizing: border-box;
+`;
+const boxContent = css`
+    box-sizing: content-box;
+`;
+const shadowNone = css`
+    box-shadow: none;
+`;
+const breakAll = css`
+    word-break: break-all;
+`;
+const breakWord = css`
+    word-break: break-word;
+`;
+const cursorDefault = css`
+    cursor: default;
+`;
+const cursorInherit = css`
+    cursor: inherit;
+`;
+const cursorMove = css`
+    cursor: move;
+`;
+const cursorNoDrop = css`
+    cursor: no-drop !important;
+`;
+const cursorNotAllowed = css`
+    cursor: not-allowed;
+`;
+const cursorText = css`
+    cursor: text;
 `;
-export const inlineFlex = css`
+const cursorPointer = css`
+    cursor: pointer;
+`;
+const displayBlock = css`
+    display: block;
+`;
+const displayInlineBlock = css`
+    display: inline-block;
+`;
+const displayInlineFlex = css`
     display: inline-flex;
 `;
-export const flexCol = css`
+const displayFlex = css`
+    display: flex;
+`;
+const displayNone = css`
+    display: none;
+`;
+const flexCol = css`
     display: flex;
     flex-direction: column;
 `;
-export const flexColReverse = css`
+const flexColReverse = css`
     display: flex;
     flex-direction: column-reverse;
 `;
-export const flexRowReverse = css`
-    flex-direction: row-reverse;
+const flexNowrap = css`
+    flex-wrap: nowrap;
 `;
-export const flexWrap = css`
+const flexRow = css`
     display: flex;
+    flex-direction: row;
+`;
+const flexRowReverse = css`
+    flex-direction: row-reverse;
+`;
+const flexShrink = css`
+    flex-shrink: 1;
+`;
+const flexShrink0 = css`
+    flex-shrink: 0;
+`;
+const flexWrap = css`
     flex-wrap: wrap;
 `;
-export const alignStart = css`
-    align-items: flex-start;
+const flexWrapReverse = css`
+    flex-wrap: wrap-reverse;
+`;
+const floatLeft = css`
+    float: left;
+`;
+const floatNone = css`
+    float: none;
+`;
+const floatRight = css`
+    float: right;
+`;
+const gap = vl => css`
+    gap: ${getSpacing(vl)};
+`;
+const gapX = vl => css`
+    column-gap: ${getSpacing(vl)};
+`;
+const gapY = vl => css`
+    column-gap: ${getSpacing(vl)};
 `;
-export const alignCenter = css`
+const inset = vl => css`
+    inset: ${parseCSSValue(vl)};
+`;
+const insetX = vl => css`
+    right: ${parseCSSValue(vl)};
+    left: ${parseCSSValue(vl)};
+`;
+const insetY = vl => css`
+    top: ${parseCSSValue(vl)};
+    bottom: ${parseCSSValue(vl)};
+`;
+const itemsCenter = css`
     align-items: center;
 `;
-export const alignEnd = css`
+const itemsEnd = css`
     align-items: flex-end;
 `;
-export const justifyStart = css`
-    justify-content: flex-start;
+const itemsStart = css`
+    align-items: flex-start;
+`;
+const justifyAround = css`
+    justify-content: space-around;
+`;
+const justifyBetween = css`
+    justify-content: space-between;
 `;
-export const justifyCenter = css`
+const justifyCenter = css`
     justify-content: center;
 `;
-export const justifyEnd = css`
+const justifyEnd = css`
     justify-content: flex-end;
 `;
-export const justifyBetween = css`
-    justify-content: space-between;
+const justifyEvenly = css`
+    justify-content: space-evenly;
 `;
-export const displayBlock = css`
-    display: block;
+const justifyStart = css`
+    justify-content: flex-start;
 `;
-export const displayInlineBlock = css`
-    display: inline-block;
+const mg = vl => css`
+    margin: ${getSpacing(vl)};
 `;
-export const positionRelative = css`
-    position: relative;
+const mgb = vl => css`
+    margin-bottom: ${getSpacing(vl)};
 `;
-export const positionAbsolute = css`
-    position: absolute;
+const mgl = vl => css`
+    margin-left: ${getSpacing(vl)};
 `;
-export const positionFixed = css`
-    position: fixed;
+const mgr = vl => css`
+    margin-right: ${getSpacing(vl)};
 `;
-export const borderRadius4px = css`
-    border-radius: 4px;
+const mgt = vl => css`
+    margin-top: ${getSpacing(vl)};
 `;
-export const borderRadius50 = css`
-    border-radius: 50%;
+const mgx = vl => css`
+    margin-left: ${getSpacing(vl)};
+    margin-right: ${getSpacing(vl)};
 `;
-export const borderRadius100 = css`
-    border-radius: 100%;
+const mgy = vl => css`
+    margin-top: ${getSpacing(vl)};
+    margin-bottom: ${getSpacing(vl)};
 `;
-export const borderBox = css`
-    box-sizing: border-box;
+const noBorder = css`
+    border: none !important;
 `;
-export const cursorDefault = css`
-    cursor: default;
+const noBoxShadow = css`
+    box-shadow: none !important;
 `;
-export const cursorInherit = css`
-    cursor: inherit;
+const noMargin = css`
+    margin: 0 !important;
 `;
-export const cursorNotAllowed = css`
-    cursor: not-allowed;
+const noPadding = css`
+    padding: 0 !important;
 `;
-export const cursorPointer = css`
-    cursor: pointer;
+const objectContain = css`
+    object-fit: contain;
+`;
+const objectCover = css`
+    object-fit: cover;
+`;
+const objectFill = css`
+    object-fit: fill;
+`;
+const objectNone = css`
+    object-fit: none;
 `;
-export const overflowAuto = css`
+const order = vl => css`
+    order: ${vl};
+`;
+const outlineNone = css`
+    outline: none;
+`;
+const overflowAuto = css`
     overflow: auto;
 `;
-export const overflowHidden = css`
+const overflowHidden = css`
     overflow: hidden;
 `;
-export const backgroundTransparent = css`
-    background-color: transparent;
+const pd = vl => css`
+    padding: ${getSpacing(vl)};
 `;
-export const ellipsis = css`
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    overflow: hidden;
+const pdb = vl => css`
+    padding-bottom: ${getSpacing(vl)};
 `;
-export const whiteSpaceNoWrap = css`
-    white-space: nowrap;
+const pdl = vl => css`
+    padding-left: ${getSpacing(vl)};
 `;
-export const breakAll = css`
-    word-break: break-all;
+const pdr = vl => css`
+    padding-right: ${getSpacing(vl)};
 `;
-export const breakWord = css`
-    word-break: break-word;
+const pdt = vl => css`
+    padding-top: ${getSpacing(vl)};
 `;
-export const textCapitalize = css`
-    text-transform: capitalize;
+const pdx = vl => css`
+    padding-left: ${getSpacing(vl)};
+    padding-right: ${getSpacing(vl)};
 `;
-export const textUppercase = css`
-    text-transform: uppercase;
+const pdy = vl => css`
+    padding-top: ${getSpacing(vl)};
+    padding-bottom: ${getSpacing(vl)};
 `;
-export const textCenter = css`
-    text-align: center;
+const parseHeight = height => css`
+    height: ${parseCSSValue(height)};
 `;
-export const outlineNone = css`
-    outline: none;
+const parseMaxHeight = height => css`
+    max-height: ${parseCSSValue(height)};
 `;
-export const userSelectNone = css`
-    user-select: none;
+const parseMaxWidth = width => css`
+    max-width: ${parseCSSValue(width)};
 `;
-export const cursorNoDrop = css`
-    cursor: no-drop !important;
+const parseMaxWidthHeight = (width, height = width) => css`
+    max-width: ${parseCSSValue(width)};
+    max-height: ${parseCSSValue(height)};
+`;
+const parseMinHeight = height => css`
+    min-height: ${parseCSSValue(height)};
+`;
+const parseMinWidth = width => css`
+    min-width: ${parseCSSValue(width)};
+`;
+const parseMinWidthHeight = (width, height = width) => css`
+    min-width: ${parseCSSValue(width)};
+    min-height: ${parseCSSValue(height)};
+`;
+const parseWidth = width => css`
+    width: ${parseCSSValue(width)};
+`;
+const parseWidthHeight = (width, height = width) => css`
+    width: ${parseCSSValue(width)};
+    height: ${parseCSSValue(height)};
 `;
-export const pointerEventsNone = css`
+const pointerEventsAuto = css`
+    pointer-events: auto;
+`;
+const pointerEventsNone = css`
     pointer-events: none;
 `;
-export const borderNone = css`
-    border: none;
+const positionAbsolute = css`
+    position: absolute;
 `;
-export const boxShadowNone = css`
-    box-shadow: none;
+const positionFixed = css`
+    position: fixed;
 `;
-export const displayNone = css`
-    display: none;
+const positionRelative = css`
+    position: relative;
 `;
-export const noMargin = css`
-    margin: 0 !important;
+const positionSticky = css`
+    position: sticky;
 `;
-export const noPadding = css`
-    padding: 0 !important;
+const selfCenter = css`
+    align-self: center;
 `;
-export const noBorder = css`
-    border: none !important;
+const selfEnd = css`
+    align-self: flex-end;
 `;
-export const noBoxShadow = css`
-    box-shadow: none !important;
+const selfStart = css`
+    align-self: flex-start;
 `;
-export const border = (withVl, colorVl) => css`
-    border: ${parseToPixel(withVl)} solid ${colorVl || color.dark};
+const textCapitalize = css`
+    text-transform: capitalize;
 `;
-export const parseWidth = width => css`
-    width: ${isNaN(width) ? width : width + 'px'};
+const textCenter = css`
+    text-align: center;
+`;
+const textCurrent = css`
+    color: currentColor;
 `;
-export const parseHeight = height => css`
-    height: ${isNaN(height) ? height : height + 'px'};
+const textEllipsis = css`
+    text-overflow: ellipsis;
 `;
-export const parseWidthHeight = (width, height = width) => css`
-    width: ${isNaN(width) ? width : width + 'px'};
-    height: ${isNaN(height) ? height : height + 'px'};
+const textLeft = css`
+    text-align: left;
 `;
-export const parseMinWidth = width => css`
-    min-width: ${isNaN(width) ? width : width + 'px'};
+const textRight = css`
+    text-align: right;
 `;
-export const parseMinHeight = height => css`
-    min-height: ${isNaN(height) ? height : height + 'px'};
+const textUppercase = css`
+    text-transform: uppercase;
 `;
-export const parseMinWidthHeight = (width, height = width) => css`
-    min-width: ${isNaN(width) ? width : width + 'px'};
-    min-height: ${isNaN(height) ? height : height + 'px'};
+const truncate = css`
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+`;
+const userSelectNone = css`
+    user-select: none;
+`;
+const whiteSpaceBreakSpaces = css`
+    white-space: break-space;
+`;
+const whiteSpaceNoWrap = css`
+    white-space: nowrap;
 `;
-export const parseMaxWidth = width => css`
-    max-width: ${isNaN(width) ? width : width + 'px'};
+const whiteSpacePreWrap = css`
+    white-space: pre-wrap;
 `;
-export const parseMaxHeight = height => css`
-    max-height: ${isNaN(height) ? height : height + 'px'};
+const z = vl => css`
+    z-index: ${zIndex(vl)};
 `;
-export const parseMaxWidthHeight = (width, height = width) => css`
-    max-width: ${isNaN(width) ? width : width + 'px'};
-    max-height: ${isNaN(height) ? height : height + 'px'};
-`;
+export { bgColor, bgCurrent, bgTransparent, border, borderNone, borderRadius, borderRadius100, borderRadius4px, borderRadius50, boxBorder, boxContent, breakAll, breakWord, cursorDefault, cursorInherit, cursorMove, cursorNoDrop, cursorNotAllowed, cursorPointer, cursorText, displayBlock, displayFlex, displayInlineBlock, displayInlineFlex, displayNone, flexCol, flexColReverse, shadowNone, flexNowrap, flexRow, flexRowReverse, flexShrink, flexShrink0, flexWrap, flexWrapReverse, floatLeft, floatNone, floatRight, gap, gapX, gapY, inset, insetX, insetY, itemsCenter, itemsEnd, itemsStart, justifyAround, justifyBetween, justifyCenter, justifyEnd, justifyEvenly, justifyStart, mg, mgb, mgl, mgr, mgt, mgx, mgy, noBorder, noBoxShadow, noMargin, noPadding, objectContain, objectCover, objectFill, objectNone, order, outlineNone, overflowAuto, overflowHidden, pd, pdb, pdl, pdr, pdt, pdx, pdy, parseHeight, parseMaxHeight, parseMaxWidth, parseMaxWidthHeight, parseMinHeight, parseMinWidth, parseMinWidthHeight, parseWidth, parseWidthHeight, pointerEventsAuto, pointerEventsNone, positionAbsolute, positionFixed, positionRelative, positionSticky, selfCenter, selfEnd, selfStart, textCapitalize, textCenter, textCurrent, textEllipsis, textLeft, textRight, textUppercase, truncate, userSelectNone, whiteSpaceBreakSpaces, whiteSpaceNoWrap, whiteSpacePreWrap, z };

package/styles/utils.js

@@ -1,5 +1,15 @@
 import { color as colors } from "./colors";
 
+/**
+ * Parse css value
+ *
+ * @param {string | number} vl
+ * @returns {string | number}
+ */
+export const parseCSSValue = vl => {
+  return isNaN(vl) ? vl : vl + 'px';
+};
+
 /**
  * Parse to pixel
  *

package/utils/array/array.js

@@ -3,22 +3,15 @@ import { each } from "../iterator";
 import { orderEach } from "../object/object";
 
 /**
- * 
- * @param {Array} entity 
- * @returns {Boolean}
- */
-export const isEmpty = entity => Array.isArray(entity) && !entity.length;
-
-/**
- * 
- * @param {any} entity 
+ *
+ * @param {any} entity
  * @returns {Array} [entity]
  */
 export const wrapToArray = entity => Array.isArray(entity) ? entity : [entity];
 
 /**
- * 
- * @param {*} value in object 
+ *
+ * @param {*} value in object
  * @param {ArrayLike} object is a array-like object
  * @returns {Number} index of value, -1 if not found
  */
@@ -29,9 +22,9 @@ export const inArray = (value, object) => {
 };
 
 /**
- * 
- * @param {Array} a 
- * @param {Array} b 
+ *
+ * @param {Array} a
+ * @param {Array} b
  * @returns {Array} intersection array of a and b
  */
 export const intersection = (a, b) => {
@@ -47,16 +40,16 @@ export const intersection = (a, b) => {
 };
 
 /**
- * 
- * @param {Array} data 
+ *
+ * @param {Array} data
  * @returns {Array} array with unique values
  */
 export const uniqueValues = data => data.filter((item, position) => data.indexOf(item) === position);
 
 /**
- * 
- * @param {Array} from 
- * @param {Array} what 
+ *
+ * @param {Array} from
+ * @param {Array} what
  * @returns {Array} without duplicate
  */
 export const removeDuplicates = function (from, what) {
@@ -77,12 +70,12 @@ export const removeDuplicates = function (from, what) {
 };
 
 /**
- * 
- * @param {Array} items 
- * @param {*} indexParameterName 
- * @param {*} currentItem 
- * @param {Function} needIndexCallback 
- * @returns 
+ *
+ * @param {Array} items
+ * @param {*} indexParameterName
+ * @param {*} currentItem
+ * @param {Function} needIndexCallback
+ * @returns
  */
 export const normalizeIndexes = function (items, indexParameterName, currentItem, needIndexCallback) {
   const indexedItems = {};

package/utils/sb-template.js

@@ -2,13 +2,13 @@ import React from 'react';
 import { css } from '@emotion/core';
 import { Col, Row, Tooltip, Typography } from "../components/index";
 import { useTheme } from "../theme";
-import { flexWrap, flexRow, alignCenter, flexCol, alignStart, alignEnd } from "../styles/general";
+import { flexWrap, flexRow, itemsCenter, flexCol, itemsStart, itemsEnd } from "../styles/general";
 import ImportComp from "../components/others/import";
 import PropTypes from 'prop-types';
 const {
   spacing
 } = useTheme();
-const alignMap = new Map([['start', alignStart], ['center', alignCenter], ['end', alignEnd]]);
+const alignMap = new Map([['start', itemsStart], ['center', itemsCenter], ['end', itemsEnd]]);
 export const Template = ({
   title,
   args,

package/utils/string/string.js

@@ -57,12 +57,4 @@ export const replaceAll = (() => {
   const quote = str => (str + '').replace(/([+*?.[^\]$(){}><|=!:])/g, '\\$1'); // lgtm[js/incomplete-sanitization]
 
   return (text, searchToken, replacementToken) => text.replace(new RegExp('(' + quote(searchToken) + ')', 'gi'), replacementToken);
-})();
-export const isEmpty = (() => {
-  const SPACE_REGEXP = /\s/g;
-  return text => !text || !text.replace(SPACE_REGEXP, '');
-})();
-export const isEmail = str => {
-  const re = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
-  return re.test(String(str).toLowerCase());
-};
+})();

package/utils/validate.js

@@ -1,5 +1,4 @@
 import { getGlobal } from "../global";
-import { isEmail as isEmailHandler } from "./";
 
 /**
  * Validation the string is an valid email
@@ -8,8 +7,9 @@ import { isEmail as isEmailHandler } from "./";
  * @returns {Boolean} true if value is an email, message or default error if value is not an email
  */
 export const isEmail = (str, _, message) => {
+  const re = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
   if (!nonNullish(str) || str === '') return true;
-  return isEmailHandler(str) || (nonNullish(message) ? message : getGlobal(['validate', 'isEmail']));
+  return re.test(String(str).toLowerCase()) || (nonNullish(message) ? message : getGlobal(['validate', 'isEmail']));
 };
 
 /**