@itcase/ui 1.1.5 → 1.1.7

package/dist/cjs/context/UIContext.js

@@ -0,0 +1,56 @@
+'use strict';
+
+var React = require('react');
+var PropTypes = require('prop-types');
+var useMediaQueries = require('../hooks/useMediaQueries.js');
+require('react-responsive');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
+
+const UserDeviceContext = /*#__PURE__*/React.createContext({
+  isMobile: false,
+  isTablet: false,
+  isDesktop: false
+});
+const SiteMenuContext = /*#__PURE__*/React.createContext({
+  isSiteMenuOpen: false,
+  setIsSiteMenuOpen: () => {}
+});
+function useUserDeviceContext() {
+  return React.useContext(UserDeviceContext);
+}
+function useSiteMenuContext() {
+  return React.useContext(SiteMenuContext);
+}
+const UIProvider = /*#__PURE__*/React.memo(function UIProvider(props) {
+  const {
+    children,
+    userDeviceState = {}
+  } = props;
+  const [isSiteMenuOpen, setIsSiteMenuOpen] = React.useState(false);
+  const siteMenuContextState = React.useMemo(() => ({
+    isSiteMenuOpen,
+    setIsSiteMenuOpen
+  }), [isSiteMenuOpen]);
+  const mediaQueriesDevices = useMediaQueries.useMediaQueries(userDeviceState);
+  return /*#__PURE__*/React__default.default.createElement(UserDeviceContext.Provider, {
+    value: mediaQueriesDevices
+  }, /*#__PURE__*/React__default.default.createElement(SiteMenuContext.Provider, {
+    value: siteMenuContextState
+  }, children));
+});
+UIProvider.propTypes = {
+  children: PropTypes__default.default.any,
+  userDeviceState: PropTypes__default.default.shape({
+    isMobile: PropTypes__default.default.bool,
+    isTablet: PropTypes__default.default.bool,
+    isDesktop: PropTypes__default.default.bool
+  })
+};
+
+exports.UIProvider = UIProvider;
+exports.useSiteMenuContext = useSiteMenuContext;
+exports.useUserDeviceContext = useUserDeviceContext;

package/dist/cjs/context/index.d.ts

@@ -0,0 +1,2 @@
+export { NotificationsProvider, useNotifications, useNotificationsAPI } from './Notifications';
+export { UIProvider, useSiteMenuContext, useUserDeviceContext } from './UIContext';

package/dist/cjs/hooks/index.d.ts

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

package/dist/cjs/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/cjs/hooks/styleAttributes.js

@@ -0,0 +1,39 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styleAttributes = [
+/**
+ * Layout
+ */
+'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
+ */
+'elevation', 'shadowColor', 'shadowOffset', 'shadowOpacity', 'shadowRadius',
+/**
+ * Transform
+ */
+'transform',
+/**
+ * View
+ */
+'background', 'backgroundColor', 'borderBottomColor', 'borderBottomEndRadius', 'borderBottomLeftRadius', 'borderBottomRightRadius', 'borderBottomStartRadius', 'borderColor', 'borderCurve', 'borderEndColor', 'borderLeftColor', 'borderRadius', 'borderRightColor', 'borderStartColor', 'borderStyle', 'borderTopColor', 'borderTopEndRadius', 'borderTopLeftRadius', 'borderTopRightRadius', 'borderTopStartRadius', 'opacity', 'cursor',
+/**
+ * Text
+ */
+'color', 'fontFamily', 'fontSize', 'fontStyle', 'fontVariant', 'fontWeight', 'letterSpacing', 'lineHeight', 'textAlign', 'textDecorationColor', 'textDecorationLine', 'textDecorationStyle', 'textShadowColor', 'textShadowOffset', 'textShadowRadius', 'textTransform', 'verticalAlign', 'writingMode', 'whiteSpace',
+/**
+ * Image
+ */
+'overlayColor', 'resizeMode', 'tintColor', 'objectFit',
+/**
+ * Grid
+ */
+'gridTemplateColumns', 'gridArea', 'gridAutoColumns', 'gridAutoFlow', 'gridAutoRows', 'gridTemplate', 'gridTemplateAreas', 'gridTemplateRows', 'gridColumn', 'gridColumnGap', 'gridRow', 'gridRowGap',
+/**
+ * Filter
+ */
+'backdropFilter'];
+
+exports.default = styleAttributes;

package/dist/cjs/hooks/useDeviceTargetClass.js

@@ -0,0 +1,61 @@
+'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);
+
+function useDeviceTargetClass(componentProps, hookProps) {
+  /** Generate a class depending on the user's device.
+   *
+   * Usage:
+   *  const sizeClass = useDeviceTargetClass(props, {
+   *    prefix: 'some-item_size_',
+   *    propsKey: 'size',
+   *  })
+   * Return: "some-item_size_m" (or "s", or "l", or something else)
+   *
+   * "componentProps" - "props" from component
+   * "hookProps" - special props for generating class
+   **/
+
+  const {
+    prefix = '',
+    propsKey,
+    replace = [/([A-Z])/g, '-$1']
+  } = hookProps;
+  const {
+    isMobile,
+    isTablet,
+    isDesktop
+  } = UIContext.useUserDeviceContext();
+  const targetClassValue = React.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(() => {
+    if (targetClassValue) {
+      let cleanClassValue = camelCase__default.default(String(targetClassValue));
+      if (replace) {
+        const replaceList = castArray__default.default(replace);
+        cleanClassValue = cleanClassValue.replace(replaceList[0], replaceList[1] || '');
+      }
+      return `${prefix}${cleanClassValue}`.toLowerCase();
+    }
+    return null;
+  }, [targetClassValue, prefix, replace]);
+  return targetClass;
+}
+
+exports.useDeviceTargetClass = useDeviceTargetClass;

package/dist/cjs/hooks/useMediaQueries.js

@@ -0,0 +1,139 @@
+'use strict';
+
+var reactResponsive = require('react-responsive');
+
+var tablet = "48em";
+var mediaQueries = {
+	"mobile-tiny": "15em",
+	"mobile-small": "20em",
+	"mobile-medium": "23.435em",
+	"mobile-normal": "24.375em",
+	"mobile-large": "26.75em",
+	"mobile-extra-large": "30em",
+	"mobile-super-extra-large": "40em",
+	tablet: tablet,
+	"tablet-small": "40em",
+	"tablet-large": "60em",
+	"desktop-small": "60em",
+	"desktop-medium": "64em",
+	"desktop-normal": "72.5em",
+	"desktop-large": "80em",
+	"desktop-extra-large": "90em",
+	"desktop-super-extra-large": "120em",
+	"desktop-huge": "160em"
+};
+
+const isSSR = typeof window === 'undefined';
+function useMediaQueries(userDevice = {}) {
+  // const isWarning = useMediaQuery({ maxWidth: mediaQueries['mobile-tiny'] })
+
+  // prettier-ignore
+  const isMobile = reactResponsive.useMediaQuery({
+    minWidth: mediaQueries['mobile-tiny'],
+    maxWidth: mediaQueries['tablet']
+  }) || isSSR && Boolean(userDevice.isMobile);
+
+  // const isMobileTiny = useMediaQuery({
+  //   minWidth: mediaQueries['mobile-tiny'],
+  //   maxWidth: mediaQueries['mobile-small'],
+  // })
+  // const isMobileSmall = useMediaQuery({
+  //   minWidth: mediaQueries['mobile-small'],
+  //   maxWidth: mediaQueries['mobile-medium'],
+  // })
+  // const isMobileMedium = useMediaQuery({
+  //   minWidth: mediaQueries['mobile-medium'],
+  //   maxWidth: mediaQueries['mobile-normal'],
+  // })
+  // const isMobileNormal = useMediaQuery({
+  //   minWidth: mediaQueries['mobile-normal'],
+  //   maxWidth: mediaQueries['mobile-large'],
+  // })
+  // const isMobileStandart = useMediaQuery({
+  //   minWidth: mediaQueries['mobile-large'],
+  //   maxWidth: mediaQueries['mobile-extra-large'],
+  // })
+  // const isMobileLarge = useMediaQuery({
+  //   minWidth: mediaQueries['mobile-extra-large'],
+  //   maxWidth: mediaQueries['mobile-super-extra-large'],
+  // })
+
+  reactResponsive.useMediaQuery({
+    minWidth: mediaQueries['mobile-super-extra-large'],
+    maxWidth: mediaQueries['tablet']
+  });
+
+  // prettier-ignore
+  const isTablet = reactResponsive.useMediaQuery({
+    minWidth: mediaQueries['tablet'],
+    maxWidth: mediaQueries['desktop-small']
+  }) || isSSR && Boolean(userDevice.isTablet);
+
+  // const isTabletSmall = useMediaQuery({
+  //   minWidth: mediaQueries['tablet-small'],
+  //   maxWidth: mediaQueries['tablet'],
+  // })
+  // const isTabletLarge = useMediaQuery({
+  //   minWidth: mediaQueries['tablet'],
+  //   maxWidth: mediaQueries['tablet-large'],
+  // })
+
+  // prettier-ignore
+  const isDesktop = reactResponsive.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'],
+  // })
+  // const isDesktopMedium = useMediaQuery({
+  //   minWidth: mediaQueries['desktop-medium'],
+  //   maxWidth: mediaQueries['desktop-normal'],
+  // })
+  // const isDesktopNormal = useMediaQuery({
+  //   minWidth: mediaQueries['desktop-normal'],
+  //   maxWidth: mediaQueries['desktop-large'],
+  // })
+  // const isDesktopStandart = useMediaQuery({
+  //   minWidth: mediaQueries['desktop-large'],
+  //   maxWidth: mediaQueries['desktop-extra-large'],
+  // })
+  // const isDesktopLarge = useMediaQuery({
+  //   minWidth: mediaQueries['desktop-extra-large'],
+  //   maxWidth: mediaQueries['desktop-super-extra-large'],
+  // })
+  // const isDesktopHuge = useMediaQuery({
+  //   minWidth: mediaQueries['desktop-super-extra-large'],
+  //   maxWidth: mediaQueries['desktop-huge'],
+  // })
+
+  const isDesktopMega = reactResponsive.useMediaQuery({
+    minWidth: mediaQueries['desktop-huge']
+  });
+  return {
+    // isWarning,
+    isMobile: isMobile,
+    // isMobileTiny,
+    // isMobileSmall,
+    // isMobileMedium,
+    // isMobileNormal,
+    // isMobileStandart,
+    // isMobileLarge,
+    isMobileHuge: isMobile,
+    isTablet: isTablet,
+    // isTabletSmall,
+    // isTabletLarge,
+    isDesktop: isDesktop,
+    // isDesktopSmall,
+    // isDesktopMedium,
+    // isDesktopNormal,
+    // isDesktopStandart,
+    // isDesktopLarge,
+    // isDesktopHuge,
+    isDesktopMega: isDesktopMega
+  };
+}
+
+exports.useMediaQueries = useMediaQueries;

package/dist/cjs/hooks/useStyles.js

@@ -0,0 +1,135 @@
+'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);
+
+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), '');
+    }
+    return cleanKey;
+  }, originalKey);
+  return withOutDeviceType;
+};
+function useStyles(props) {
+  const allDevicesTypes = UIContext.useUserDeviceContext();
+  const {
+    isMobile,
+    isTablet,
+    isDesktop,
+    ...fullNamedDeviceTypes
+  } = allDevicesTypes;
+
+  // prettier-ignore
+  const deviceBasePart = React.useMemo(() => isMobile && 'Mobile' || isTablet && 'Tablet' || isDesktop && 'Desktop' || '', [isMobile, isTablet, isDesktop]);
+  /*
+   * rule of prop key:
+   *
+   * 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', '')));
+
+    // 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', '')));
+    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 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 => {
+        return propKey.startsWith(styleAttribute);
+      });
+
+      // Get longest style key (e.g. "borderLeftWidth")
+      const currentStyleAttribute = maxBy__default.default(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';
+        if (!resultStyles[targetElementResultKey]) {
+          resultStyles[targetElementResultKey] = {};
+        }
+        if (isStyleForCurrentDevice) {
+          value = propValue;
+        } else {
+          const propKeyWithOutDeviceType = `${currentStyleAttribute}${targetElementKey}`;
+          const propKeyWithBaseDeviceType = `${propKeyWithOutDeviceType}${deviceBasePart}`;
+          const defaultValue = props[propKeyWithBaseDeviceType] || props[propKeyWithOutDeviceType];
+          let currentValue = resultStyles[targetElementResultKey][currentStyleAttribute];
+          if (propKeyWithOutDeviceType.includes('Horizontal')) {
+            const keyLeft = currentStyleAttribute.replace('Horizontal', 'Left');
+            currentValue = resultStyles[targetElementResultKey][keyLeft];
+          } else if (propKeyWithOutDeviceType.includes('Vertical')) {
+            const keyTop = currentStyleAttribute.replace('Vertical', 'Top');
+            currentValue = resultStyles[targetElementResultKey][keyTop];
+          }
+          if (!currentValue) {
+            value = defaultValue;
+          }
+        }
+        if (value) {
+          // TODO: handle 16px/9px propValues for Horizontal(Left/Right) and Vertical(Top/Bottom)
+          const HAS_UNIT = /\D/;
+          // prettier-ignore
+          const ignorePX = currentStyleAttribute.includes('zIndex') || currentStyleAttribute.includes('order');
+          if (!HAS_UNIT.test(value) && !ignorePX) {
+            value = `${value}px`;
+          }
+          if (currentStyleAttribute.includes('Horizontal')) {
+            const keyLeft = currentStyleAttribute.replace('Horizontal', 'Left');
+            const keyRight = currentStyleAttribute.replace('Horizontal', 'Right');
+            resultStyles[targetElementResultKey][keyLeft] = value;
+            resultStyles[targetElementResultKey][keyRight] = value;
+          } else if (currentStyleAttribute.includes('Vertical')) {
+            const keyTop = currentStyleAttribute.replace('Vertical', 'Top');
+            const keyBottom = currentStyleAttribute.replace('Vertical', 'Bottom');
+            resultStyles[targetElementResultKey][keyTop] = value;
+            resultStyles[targetElementResultKey][keyBottom] = value;
+          } else {
+            resultStyles[targetElementResultKey][currentStyleAttribute] = value;
+          }
+        }
+      }
+    });
+    return resultStyles;
+  }, [currentDevice, props.display]); // "props" object maybe big and frequently changing
+
+  return collectedStyles;
+}
+
+exports.useStyles = useStyles;

package/dist/cjs/index.d.ts

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