@itcase/ui 1.1.5 → 1.1.7

package/dist/hooks/index.d.ts

@@ -0,0 +1,3 @@
+export { useDeviceTargetClass } from './useDeviceTargetClass';
+export { useMediaQueries } from './useMediaQueries';
+export { useStyles } from './useStyles';

package/dist/hooks/styleAttributes.interface.d.ts

@@ -0,0 +1,145 @@
+export interface TypeStyleAttributes {
+    /**
+     * Layout
+     */
+    alignContent?: string;
+    alignItems?: string;
+    alignSelf?: string;
+    aspectRatio?: string;
+    border?: string;
+    borderBottomWidth?: string;
+    borderEndWidth?: string;
+    borderLeftWidth?: string;
+    borderRightWidth?: string;
+    borderStartWidth?: string;
+    borderTopWidth?: string;
+    borderWidth?: string;
+    bottom?: string;
+    display?: string;
+    end?: string;
+    flex?: string;
+    flexBasis?: string;
+    flexDirection?: string;
+    flexShrink?: string;
+    flexWrap?: string;
+    gap?: string;
+    rowGap?: string;
+    columnGap?: string;
+    columnWidth?: string;
+    height?: string;
+    left?: string;
+    margin?: string;
+    marginBottom?: string;
+    marginEnd?: string;
+    marginHorizontal?: string;
+    marginLeft?: string;
+    marginRight?: string;
+    marginStart?: string;
+    marginTop?: string;
+    marginVertical?: string;
+    maxHeight?: string;
+    maxWidth?: string;
+    minHeight?: string;
+    minWidth?: string;
+    overflow?: string;
+    padding?: string;
+    paddingBottom?: string;
+    paddingEnd?: string;
+    paddingHorizontal?: string;
+    paddingLeft?: string;
+    paddingRight?: string;
+    paddingStart?: string;
+    paddingTop?: string;
+    paddingVertical?: string;
+    position?: string;
+    right?: string;
+    start?: string;
+    top?: string;
+    width?: string;
+    zIndex?: string;
+    order?: string;
+    /**
+     * Shadow
+     */
+    shadowColor?: string;
+    shadowOffset?: string;
+    shadowOpacity?: string;
+    shadowRadius?: string;
+    /**
+     * Transform
+     */
+    transform?: string;
+    /**
+     * View
+     */
+    background?: string;
+    backgroundColor?: string;
+    borderBottomColor?: string;
+    borderBottomEndRadius?: string;
+    borderBottomLeftRadius?: string;
+    borderBottomRightRadius?: string;
+    borderBottomStartRadius?: string;
+    borderColor?: string;
+    borderCurve?: string;
+    borderEndColor?: string;
+    borderLeftColor?: string;
+    borderRadius?: string;
+    borderRightColor?: string;
+    borderStartColor?: string;
+    borderStyle?: string;
+    borderTopColor?: string;
+    borderTopEndRadius?: string;
+    borderTopLeftRadius?: string;
+    borderTopRightRadius?: string;
+    borderTopStartRadius?: string;
+    opacity?: string;
+    cursor?: string;
+    /**
+     * Text
+     */
+    color?: string;
+    fontFamily?: string;
+    fontSize?: string;
+    fontStyle?: string;
+    fontVariant?: string;
+    fontWeight?: string;
+    letterSpacing?: string;
+    lineHeight?: string;
+    textAlign?: string;
+    textDecorationColor?: string;
+    textDecorationLine?: string;
+    textDecorationStyle?: string;
+    textShadowColor?: string;
+    textShadowOffset?: string;
+    textShadowRadius?: string;
+    textTransform?: string;
+    verticalAlign?: string;
+    writingMode?: string;
+    whiteSpace?: string;
+    /**
+     * Image
+     */
+    overlayColor?: string;
+    resizeMode?: string;
+    tintColor?: string;
+    objectFit?: string;
+    /**
+     * Grid
+     */
+    gridTemplateColumns?: string;
+    gridArea?: string;
+    gridAutoColumns?: string;
+    gridAutoFlow?: string;
+    gridAutoRows?: string;
+    gridTemplate?: string;
+    gridTemplateAreas?: string;
+    gridTemplateRows?: string;
+    gridColumn?: string;
+    gridColumnGap?: string;
+    gridRow?: string;
+    gridRowGap?: string;
+    /**
+     * Filter
+     */
+    backdropFilter?: string;
+}

package/dist/hooks/styleAttributes.js

@@ -1,10 +1,8 @@
-'use strict';
-
 var styleAttributes = [
 /**
  * Layout
  */
-'alignContent', 'alignItems', 'alignSelf', 'aspectRatio', 'border', 'borderBottomWidth', 'borderEndWidth', 'borderLeftWidth', 'borderRightWidth', 'borderStartWidth', 'borderTopWidth', 'borderWidth', 'bottom', 'display', 'end', 'flex', 'flexBasis', 'flexDirection', 'flexGrow', 'flexShrink', 'flexWrap', 'gap', 'rowGap', 'columnGap', 'columnWidth', 'height', 'justifyContent', 'left', 'margin', 'marginBottom', 'marginEnd', 'marginHorizontal', 'marginLeft', 'marginRight', 'marginStart', 'marginTop', 'marginVertical', 'maxHeight', 'maxWidth', 'minHeight', 'minWidth', 'overflow', 'padding', 'paddingBottom', 'paddingEnd', 'paddingHorizontal', 'paddingLeft', 'paddingRight', 'paddingStart', 'paddingTop', 'paddingVertical', 'position', 'right', 'start', 'top', 'width', 'zIndex', 'order',
+'alignContent', 'alignItems', 'alignSelf', 'aspectRatio', 'border', 'borderBottomWidth', 'borderEndWidth', 'borderLeftWidth', 'borderRightWidth', 'borderStartWidth', 'borderTopWidth', 'borderWidth', 'bottom', 'display', 'flex', 'flexBasis', 'flexDirection', 'flexGrow', 'flexShrink', 'flexWrap', 'gap', 'rowGap', 'columnGap', 'columnWidth', 'height', 'justifyContent', 'left', 'margin', 'marginBottom', 'marginEnd', 'marginHorizontal', 'marginLeft', 'marginRight', 'marginStart', 'marginTop', 'marginVertical', 'maxHeight', 'maxWidth', 'minHeight', 'minWidth', 'overflow', 'padding', 'paddingBottom', 'paddingEnd', 'paddingHorizontal', 'paddingLeft', 'paddingRight', 'paddingStart', 'paddingTop', 'paddingVertical', 'position', 'right', 'top', 'width', 'zIndex', 'order',
 /**
  * Shadow
  */
@@ -28,10 +26,10 @@ var styleAttributes = [
 /**
  * Grid
  */
-'gridTemplateColumns', 'gridArea', 'gridAutoColumns', 'gridAutoFlow', 'gridAutoRows', 'gridTemplate', 'gridTemplateAreas', 'gridTemplateRows', 'gridColumnGap', 'gridRowGap',
+'gridTemplateColumns', 'gridArea', 'gridAutoColumns', 'gridAutoFlow', 'gridAutoRows', 'gridTemplate', 'gridTemplateAreas', 'gridTemplateRows', 'gridColumn', 'gridColumnGap', 'gridRow', 'gridRowGap',
 /**
-* Filter
-*/
+ * Filter
+ */
 'backdropFilter'];
 
-exports.default = styleAttributes;
+export { styleAttributes as default };

package/dist/hooks/useDeviceTargetClass.js

@@ -1,17 +1,10 @@
-'use strict';
-
-var React = require('react');
-var castArray = require('lodash/castArray');
-var camelCase = require('lodash/camelCase');
-var UIContext = require('../context/UIContext.js');
-require('prop-types');
-require('./useMediaQueries.js');
-require('react-responsive');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var castArray__default = /*#__PURE__*/_interopDefault(castArray);
-var camelCase__default = /*#__PURE__*/_interopDefault(camelCase);
+import { useMemo } from 'react';
+import castArray from 'lodash/castArray';
+import camelCase from 'lodash/camelCase';
+import { useUserDeviceContext } from '../context/UIContext.js';
+import 'prop-types';
+import './useMediaQueries.js';
+import 'react-responsive';
 
 function useDeviceTargetClass(componentProps, hookProps) {
   /** Generate a class depending on the user's device.
@@ -36,19 +29,19 @@ function useDeviceTargetClass(componentProps, hookProps) {
     isMobile,
     isTablet,
     isDesktop
-  } = UIContext.useUserDeviceContext();
-  const targetClassValue = React.useMemo(() => {
+  } = useUserDeviceContext();
+  const targetClassValue = useMemo(() => {
     // prettier-ignore
     const deviceBasePart = isMobile && 'Mobile' || isTablet && 'Tablet' || isDesktop && 'Desktop' || '';
     const valueForDevice = componentProps[`${propsKey}${deviceBasePart}`];
     const valueDefault = componentProps[propsKey];
     return valueForDevice || valueDefault;
   }, [isMobile, isTablet, isDesktop, componentProps[propsKey], componentProps[`${propsKey}Mobile`], componentProps[`${propsKey}Tablet`], componentProps[`${propsKey}Desktop`]]);
-  const targetClass = React.useMemo(() => {
+  const targetClass = useMemo(() => {
     if (targetClassValue) {
-      let cleanClassValue = camelCase__default.default(String(targetClassValue));
+      let cleanClassValue = camelCase(String(targetClassValue));
       if (replace) {
-        const replaceList = castArray__default.default(replace);
+        const replaceList = castArray(replace);
         cleanClassValue = cleanClassValue.replace(replaceList[0], replaceList[1] || '');
       }
       return `${prefix}${cleanClassValue}`.toLowerCase();
@@ -58,4 +51,4 @@ function useDeviceTargetClass(componentProps, hookProps) {
   return targetClass;
 }
 
-exports.useDeviceTargetClass = useDeviceTargetClass;
+export { useDeviceTargetClass };

package/dist/hooks/useMediaQueries.js

@@ -1,6 +1,4 @@
-'use strict';
-
-var reactResponsive = require('react-responsive');
+import { useMediaQuery } from 'react-responsive';
 
 var tablet = "48em";
 var mediaQueries = {
@@ -27,7 +25,8 @@ const isSSR = typeof window === 'undefined';
 function useMediaQueries(userDevice = {}) {
   // const isWarning = useMediaQuery({ maxWidth: mediaQueries['mobile-tiny'] })
 
-  const isMobile = reactResponsive.useMediaQuery({
+  // prettier-ignore
+  const isMobile = useMediaQuery({
     minWidth: mediaQueries['mobile-tiny'],
     maxWidth: mediaQueries['tablet']
   }) || isSSR && Boolean(userDevice.isMobile);
@@ -56,14 +55,18 @@ function useMediaQueries(userDevice = {}) {
   //   minWidth: mediaQueries['mobile-extra-large'],
   //   maxWidth: mediaQueries['mobile-super-extra-large'],
   // })
-  reactResponsive.useMediaQuery({
+
+  useMediaQuery({
     minWidth: mediaQueries['mobile-super-extra-large'],
     maxWidth: mediaQueries['tablet']
   });
-  const isTablet = reactResponsive.useMediaQuery({
+
+  // prettier-ignore
+  const isTablet = useMediaQuery({
     minWidth: mediaQueries['tablet'],
     maxWidth: mediaQueries['desktop-small']
   }) || isSSR && Boolean(userDevice.isTablet);
+
   // const isTabletSmall = useMediaQuery({
   //   minWidth: mediaQueries['tablet-small'],
   //   maxWidth: mediaQueries['tablet'],
@@ -73,10 +76,12 @@ function useMediaQueries(userDevice = {}) {
   //   maxWidth: mediaQueries['tablet-large'],
   // })
 
-  const isDesktop = reactResponsive.useMediaQuery({
+  // prettier-ignore
+  const isDesktop = useMediaQuery({
     minWidth: mediaQueries['desktop-small'],
     maxWidth: mediaQueries['desktop-super-huge']
   }) || isSSR && Boolean(userDevice.isDesktop);
+
   // const isDesktopSmall = useMediaQuery({
   //   minWidth: mediaQueries['desktop-small'],
   //   maxWidth: mediaQueries['desktop-medium'],
@@ -101,7 +106,8 @@ function useMediaQueries(userDevice = {}) {
   //   minWidth: mediaQueries['desktop-super-extra-large'],
   //   maxWidth: mediaQueries['desktop-huge'],
   // })
-  const isDesktopMega = reactResponsive.useMediaQuery({
+
+  const isDesktopMega = useMediaQuery({
     minWidth: mediaQueries['desktop-huge']
   });
   return {
@@ -124,8 +130,8 @@ function useMediaQueries(userDevice = {}) {
     // isDesktopStandart,
     // isDesktopLarge,
     // isDesktopHuge,
-    isDesktopMega
+    isDesktopMega: isDesktopMega
   };
 }
 
-exports.useMediaQueries = useMediaQueries;
+export { useMediaQueries };

package/dist/hooks/useStyles.js

@@ -1,34 +1,26 @@
-'use strict';
-
-var React = require('react');
-var camelCase = require('lodash/camelCase');
-var maxBy = require('lodash/maxBy');
-var upperFirst = require('lodash/upperFirst');
-var styleAttributes = require('./styleAttributes.js');
-var UIContext = require('../context/UIContext.js');
-require('prop-types');
-require('./useMediaQueries.js');
-require('react-responsive');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var camelCase__default = /*#__PURE__*/_interopDefault(camelCase);
-var maxBy__default = /*#__PURE__*/_interopDefault(maxBy);
-var upperFirst__default = /*#__PURE__*/_interopDefault(upperFirst);
+import { useMemo } from 'react';
+import camelCase from 'lodash/camelCase';
+import maxBy from 'lodash/maxBy';
+import upperFirst from 'lodash/upperFirst';
+import styleAttributes from './styleAttributes.js';
+import { useUserDeviceContext } from '../context/UIContext.js';
+import 'prop-types';
+import './useMediaQueries.js';
+import 'react-responsive';
 
 let DEVICE_TYPES = [];
 const removeDeviceType = originalKey => {
   // Remove "mobile"/"tablet"/"desktop"
   const withOutDeviceType = DEVICE_TYPES.reduce((cleanKey, deviceType) => {
-    if (cleanKey.endsWith(upperFirst__default.default(deviceType))) {
-      return cleanKey.replace(upperFirst__default.default(deviceType), '');
+    if (cleanKey.endsWith(upperFirst(deviceType))) {
+      return cleanKey.replace(upperFirst(deviceType), '');
     }
     return cleanKey;
   }, originalKey);
   return withOutDeviceType;
 };
 function useStyles(props) {
-  const allDevicesTypes = UIContext.useUserDeviceContext();
+  const allDevicesTypes = useUserDeviceContext();
   const {
     isMobile,
     isTablet,
@@ -37,50 +29,50 @@ function useStyles(props) {
   } = allDevicesTypes;
 
   // prettier-ignore
-  const deviceBasePart = React.useMemo(() => isMobile && 'Mobile' || isTablet && 'Tablet' || isDesktop && 'Desktop' || '', [isMobile, isTablet, isDesktop]);
+  const deviceBasePart = useMemo(() => isMobile && 'Mobile' || isTablet && 'Tablet' || isDesktop && 'Desktop' || '', [isMobile, isTablet, isDesktop]);
   /*
    * rule of prop key:
    *
-   * first is style     second is div targer  thrid is device
+   * first is style     second is div target  third is device
    * paddingHorizontal  GridInnerWrapper      MobileNormal
    *
    * paddingHorizontalGridInnerWrapperMobileNormal: "10px"
    */
 
-  const currentDevice = React.useMemo(() => {
-    const deviceTypes = Object.keys(allDevicesTypes).map(key => camelCase__default.default(key.replace('is', '')));
+  const currentDevice = useMemo(() => {
+    const deviceTypes = Object.keys(allDevicesTypes).map(key => camelCase(key.replace('is', '')));
 
     // if "fullNamedDeviceTypes.isMobileLarge": true - that our device
     let currentDevice = Object.keys(fullNamedDeviceTypes).find(key => fullNamedDeviceTypes[key]);
     if (!currentDevice) {
       currentDevice = deviceBasePart;
     }
-    currentDevice = upperFirst__default.default(camelCase__default.default(currentDevice.replace('is', '')));
+    currentDevice = upperFirst(camelCase(currentDevice.replace('is', '')));
     DEVICE_TYPES = deviceTypes;
 
     // Set non-existent "currentDevice" value, to collect default styles later
     return currentDevice || '__DEVICE_IS_NOT_FOUND__';
   }, [allDevicesTypes, deviceBasePart]);
-  const collectedStyles = React.useMemo(() => {
+  const collectedStyles = useMemo(() => {
     const resultStyles = {};
 
     // For every component props
     Object.entries(props).forEach(([propKey, propValue]) => {
       // Collect list of possible styles for propKey. e.g:
       // "borderLeftWidthWrapperInnerMobileNormal" to ["border", "borderLeftWidth"]
-      const possibleStyleAttributes = styleAttributes.default.filter(styleAttribute => {
+      const possibleStyleAttributes = styleAttributes.filter(styleAttribute => {
         return propKey.startsWith(styleAttribute);
       });
 
       // Get longest style key (e.g. "borderLeftWidth")
-      const currentStyleAttribute = maxBy__default.default(possibleStyleAttributes, 'length');
+      const currentStyleAttribute = maxBy(possibleStyleAttributes, 'length');
       if (currentStyleAttribute) {
         const isStyleForCurrentDevice = propKey.toLowerCase().endsWith(currentDevice.toLowerCase());
         let value = null;
 
         // e.g. "GridWrapperInner"
         const targetElementKey = removeDeviceType(propKey.replace(currentStyleAttribute, ''));
-        const targetElementResultKey = camelCase__default.default(targetElementKey) || 'styles';
+        const targetElementResultKey = camelCase(targetElementKey) || 'styles';
         if (!resultStyles[targetElementResultKey]) {
           resultStyles[targetElementResultKey] = {};
         }
@@ -132,4 +124,4 @@ function useStyles(props) {
   return collectedStyles;
 }
 
-exports.useStyles = useStyles;
+export { useStyles };

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+export * from './components';
+export * from './context';
+export * from './hooks';
+export * from './constants';