@elliemae/ds-system 2.3.0-alpha.7 → 2.3.0-next.1

package/cjs/arithmetic.js

@@ -0,0 +1,43 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+require('core-js/modules/web.dom-collections.iterator.js');
+
+function getNumberAndUnit(numberStrWithUnit) {
+  const [number, unit] = String(numberStrWithUnit).match(/[a-z]+|[(/^\-?\d*.\d+|\d+),?]+/gi);
+  return {
+    number,
+    unit
+  };
+}
+function op(operator, n1, n2) {
+  const {
+    number,
+    unit
+  } = getNumberAndUnit(n1);
+  const {
+    number: number2,
+    unit: unit2
+  } = getNumberAndUnit(n2);
+
+  switch (operator) {
+    case '*':
+      return Number(number) * Number(number2) + (unit || unit2);
+
+    case '+':
+      return Number(number) + Number(number2) + (unit || unit2);
+
+    case '-':
+      return Number(number) - Number(number2) + (unit || unit2);
+
+    case '/':
+      return Number(number) / Number(number2) + (unit || unit2);
+
+    default:
+      return Number(number) + Number(number2) + (unit || unit2);
+  }
+}
+
+exports.getNumberAndUnit = getNumberAndUnit;
+exports.op = op;

package/cjs/constants.js

@@ -0,0 +1,19 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const desktopBaseFont = 13;
+const mobileBaseFont = 16;
+const translateUnits = {
+  '8px': '4px',
+  '16px': '8px',
+  '32px': '16px',
+  '48px': '24px',
+  '56px': '32px',
+  '64px': '48px',
+  '72px': '64px'
+};
+
+exports.desktopBaseFont = desktopBaseFont;
+exports.mobileBaseFont = mobileBaseFont;
+exports.translateUnits = translateUnits;

package/cjs/globalStyles.js

@@ -0,0 +1,25 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _taggedTemplateLiteral = require('@babel/runtime/helpers/taggedTemplateLiteral');
+require('polished');
+require('lodash');
+require('./theme.js');
+require('core-js/modules/web.dom-collections.iterator.js');
+require('react');
+var styled_component = require('styled-components');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _taggedTemplateLiteral__default = /*#__PURE__*/_interopDefaultLegacy(_taggedTemplateLiteral);
+
+var _templateObject;
+const GlobalStyles = styled_component.createGlobalStyle(_templateObject || (_templateObject = _taggedTemplateLiteral__default["default"](["\n  :root, body {\n    overscroll-behavior-y: none;\n\n    font-size: ", ";\n\n    @media(min-width: ", ") {\n      font-size: ", ";\n    }\n\n  }\n"])), props => props.device === 'desktop' ? '13px' : '16px', _ref => {
+  let {
+    theme
+  } = _ref;
+  return theme.breakpoints.small;
+}, props => props.device === 'mobile' ? '16px' : '13px');
+
+exports.GlobalStyles = GlobalStyles;

package/cjs/index.js

@@ -0,0 +1,84 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var globalStyles = require('./globalStyles.js');
+var spaceUtilities = require('./spaceUtilities.js');
+var mobileUtilities = require('./mobileUtilities.js');
+var utils = require('./utils.js');
+var arithmetic = require('./arithmetic.js');
+var th = require('./th.js');
+var theme = require('./theme.js');
+var index = require('./styled/index.js');
+var themeProviderHOC = require('./themeProviderHOC.js');
+var styled_component = require('styled-components');
+var polished = require('polished');
+
+
+
+exports.GlobalStyles = globalStyles.GlobalStyles;
+exports.fixSpace = spaceUtilities.fixSpace;
+exports.fixSpaceGutter = spaceUtilities.fixSpaceGutter;
+exports.mapGap = spaceUtilities.mapGap;
+exports.mapGrid = spaceUtilities.mapGrid;
+exports.mapGutter = spaceUtilities.mapGutter;
+exports.mapSpace = spaceUtilities.mapSpace;
+exports.mapTemplateGrid = spaceUtilities.mapTemplateGrid;
+exports.numbersToFr = spaceUtilities.numbersToFr;
+exports.__UNSAFE_SPACE_TO_DIMSUM = mobileUtilities.__UNSAFE_SPACE_TO_DIMSUM;
+exports.isMobile = mobileUtilities.isMobile;
+exports.toMobile = mobileUtilities.toMobile;
+exports.useIsMobile = mobileUtilities.useIsMobile;
+exports.active = utils.active;
+exports.animation = utils.animation;
+exports.border = utils.border;
+exports.boxShadow = utils.boxShadow;
+exports.buttonLink = utils.buttonLink;
+exports.clearFocus = utils.clearFocus;
+exports.color = utils.color;
+exports.disabled = utils.disabled;
+exports.fakeActive = utils.fakeActive;
+exports.fakeBorder = utils.fakeBorder;
+exports.flexCenter = utils.flexCenter;
+exports.focus = utils.focus;
+exports.focusAfter = utils.focusAfter;
+exports.hover = utils.hover;
+exports.iconColor = utils.iconColor;
+exports.keyframes = utils.keyframes;
+exports.onlyFirefox = utils.onlyFirefox;
+exports.onlySafari = utils.onlySafari;
+exports.onlySafariAndFirefox = utils.onlySafariAndFirefox;
+exports.safariAndFirefoxBold = utils.safariAndFirefoxBold;
+exports.textStyle = utils.textStyle;
+exports.transition = utils.transition;
+exports.truncate = utils.truncate;
+exports.getNumberAndUnit = arithmetic.getNumberAndUnit;
+exports.op = arithmetic.op;
+exports.th = th.th;
+exports.theme = theme.theme;
+exports.styled = index.styled;
+exports.themeProviderHOC = themeProviderHOC.themeProviderHOC;
+Object.defineProperty(exports, 'createGlobalStyle', {
+	enumerable: true,
+	get: function () { return styled_component.createGlobalStyle; }
+});
+Object.defineProperty(exports, 'css', {
+	enumerable: true,
+	get: function () { return styled_component.css; }
+});
+Object.defineProperty(exports, 'kfrm', {
+	enumerable: true,
+	get: function () { return styled_component.keyframes; }
+});
+Object.defineProperty(exports, 'useTheme', {
+	enumerable: true,
+	get: function () { return styled_component.useTheme; }
+});
+Object.defineProperty(exports, 'withTheme', {
+	enumerable: true,
+	get: function () { return styled_component.withTheme; }
+});
+Object.defineProperty(exports, 'rgba', {
+	enumerable: true,
+	get: function () { return polished.rgba; }
+});

package/cjs/mobileUtilities.js

@@ -0,0 +1,41 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+require('core-js/modules/web.dom-collections.iterator.js');
+var react = require('react');
+var theme = require('./theme.js');
+var constants = require('./constants.js');
+
+function __UNSAFE_SPACE_TO_DIMSUM(unit) {
+  if (constants.translateUnits[unit]) return constants.translateUnits[unit];
+  return "".concat(parseFloat(unit) * (constants.mobileBaseFont / constants.desktopBaseFont) / 2, "px");
+}
+function toMobile(unit) {
+  if (!isMobile()) return unit;
+  return "".concat(parseFloat(unit) * (constants.desktopBaseFont / constants.mobileBaseFont), "rem");
+}
+const useIsMobile = () => {
+  const [mobile, setMobile] = react.useState(isMobile());
+  react.useEffect(() => {
+    function handleResize() {
+      setMobile(isMobile());
+    }
+
+    if (window) window.addEventListener('resize', handleResize);
+    return () => {
+      if (window) window.removeEventListener('resize', handleResize);
+    };
+  }, []);
+  if (!window) return false;
+  return mobile;
+};
+const isMobile = () => {
+  if (!window) return false;
+  return Number(theme.theme.breakpoints.medium.split('px')[0]) - window.innerWidth >= 0;
+};
+
+exports.__UNSAFE_SPACE_TO_DIMSUM = __UNSAFE_SPACE_TO_DIMSUM;
+exports.isMobile = isMobile;
+exports.toMobile = toMobile;
+exports.useIsMobile = useIsMobile;

package/cjs/spaceUtilities.js

@@ -0,0 +1,68 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+require('core-js/modules/esnext.async-iterator.map.js');
+require('core-js/modules/esnext.iterator.map.js');
+require('core-js/modules/esnext.async-iterator.some.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.some.js');
+var lodash = require('lodash');
+var theme = require('./theme.js');
+
+function mapGap(gutter) {
+  if (!gutter) return '0rem';
+  if (String(gutter).includes('rem') || String(gutter).includes('px')) return gutter;
+  return "".concat(theme.theme.space[gutter]);
+}
+function mapGutter(gutter) {
+  if (!gutter) return '0rem';
+  return "".concat(theme.theme.space[gutter], " * 2");
+}
+function mapSpace(width) {
+  if (typeof width === 'string') return lodash.get(theme.theme, width) ? "".concat(lodash.get(theme.theme, width)) : width;
+  return "".concat(width * 100, "%");
+}
+function fixSpaceGutter(width, gutter) {
+  if (!width) return '';
+  if (Array.isArray(width)) return width.map(w => "calc(".concat(mapSpace(w), " - (").concat(mapGutter(gutter), "))"));
+  return "calc(".concat(mapSpace(width), " - (").concat(mapGutter(gutter), "))");
+}
+function fixSpace(width) {
+  if (!width) return '';
+  if (Array.isArray(width)) return width.map(w => mapSpace(w));
+  return mapSpace(width);
+}
+/**
+ * Grid
+ *
+ * @param grid
+ */
+
+function numbersToFr(grid) {
+  const den = grid.map(f => f < 1 ? Math.floor(1 / f) : f);
+  return den.map(d => "".concat(d, "fr"));
+}
+function mapGrid(width) {
+  if (lodash.get(theme.theme, width)) return "".concat(lodash.get(theme.theme, width));
+  if (typeof width === 'string') return width;
+  const den = width < 1 ? Math.floor(1 / width) : width;
+  return "".concat(den, "fr");
+}
+function mapTemplateGrid(grid) {
+  if (Array.isArray(grid)) {
+    if (grid.some(w => typeof w === 'string')) return grid.map(w => mapGrid(w));
+    return numbersToFr(grid);
+  }
+
+  return mapGrid(grid);
+}
+
+exports.fixSpace = fixSpace;
+exports.fixSpaceGutter = fixSpaceGutter;
+exports.mapGap = mapGap;
+exports.mapGrid = mapGrid;
+exports.mapGutter = mapGutter;
+exports.mapSpace = mapSpace;
+exports.mapTemplateGrid = mapTemplateGrid;
+exports.numbersToFr = numbersToFr;

package/cjs/styled/index.d.js

@@ -0,0 +1,2 @@
+'use strict';
+

package/cjs/styled/index.js

@@ -0,0 +1,124 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+require('core-js/modules/esnext.async-iterator.map.js');
+require('core-js/modules/esnext.iterator.map.js');
+require('core-js/modules/web.dom-collections.iterator.js');
+require('core-js/modules/esnext.async-iterator.reduce.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.reduce.js');
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.filter.js');
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.for-each.js');
+var styled_component = require('styled-components');
+var styleGetters = require('./styleGetters.js');
+var utils = require('./utils.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
+var styled_component__default = /*#__PURE__*/_interopDefaultLegacy(styled_component);
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+const styledFunction = function (tag) {
+  let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
+    name: null,
+    slot: null
+  };
+  const {
+    name: componentName = null,
+    slot: componentSlot = null
+  } = options;
+
+  const func = function (styleArg) {
+    for (var _len = arguments.length, expressions = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+      expressions[_key - 1] = arguments[_key];
+    }
+
+    /*
+     * These are the internal expression written in dimsum
+     * We just coerce with the default theme in case users
+     * forget to add the ThemeProvider
+     */
+    const expressionsWithDefaultTheme = expressions ? expressions.map(stylesArg => typeof stylesArg === 'function' ? props => stylesArg(_objectSpread(_objectSpread({}, props), {}, {
+      theme: utils.coerceWithDefaultTheme(props.theme)
+    })) : stylesArg) : [];
+    let transformedStyleArg = styleArg;
+    /*
+     * Here we get the style overrides from the user
+     */
+
+    if (componentName && componentSlot) {
+      expressionsWithDefaultTheme.push(props => {
+        const theme = utils.coerceWithDefaultTheme(props.theme);
+        const styleOverrides = styleGetters.getStyleOverrides(componentName, theme);
+
+        if (styleOverrides) {
+          return [styleOverrides[componentSlot]];
+        }
+
+        return null;
+      });
+    }
+    /*
+     * Here we get the variant overrides from the user (only for the root)
+     */
+
+
+    if (componentName && componentSlot === 'root') {
+      expressionsWithDefaultTheme.push(props => {
+        const theme = utils.coerceWithDefaultTheme(props.theme);
+        return styleGetters.variantsResolver(props, styleGetters.getVariantStyles(componentName, theme), theme, componentName);
+      });
+    }
+
+    const numOfCustomFnsApplied = expressionsWithDefaultTheme.length - expressions.length;
+
+    if (Array.isArray(styleArg) && numOfCustomFnsApplied > 0) {
+      // Here we are adding placeholders for all the new functions that we are gonna call
+      const placeholders = new Array(numOfCustomFnsApplied).fill('');
+      transformedStyleArg = Object.assign([...styleArg, ...placeholders], {
+        raw: [...styleArg.raw, ...placeholders]
+      });
+    } else if (typeof styleArg === 'function') {
+      // Here we just coerce with the default theme
+      transformedStyleArg = props => styleArg(_objectSpread(_objectSpread({}, props), {}, {
+        theme: utils.coerceWithDefaultTheme(props.theme)
+      }));
+    }
+
+    let Component = /*#__PURE__*/styled_component__default["default"](tag);
+    const displayName = componentName !== null && componentSlot !== null ? "".concat(componentName, "-").concat(componentSlot) : null;
+
+    if (displayName !== null) {
+      Component = Component.attrs({
+        className: "".concat(componentName, "-").concat(componentSlot)
+      });
+    }
+
+    Component = Component(transformedStyleArg, ...expressionsWithDefaultTheme);
+
+    if (displayName !== null) {
+      Component.displayName = displayName;
+    }
+
+    return Component;
+  };
+
+  return func;
+};
+
+const styledObject = Object.keys(styled_component__default["default"]).reduce((obj, key) => {
+  const castedKey = key;
+  obj[castedKey] = styledFunction(castedKey);
+  return obj;
+}, {});
+const styled = Object.assign(styledFunction, styledObject);
+
+exports.styled = styled;

package/cjs/styled/styleGetters.js

@@ -0,0 +1,44 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+require('core-js/modules/esnext.async-iterator.reduce.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.reduce.js');
+require('core-js/modules/esnext.async-iterator.every.js');
+require('core-js/modules/esnext.iterator.every.js');
+var utils = require('./utils.js');
+
+const getStyleOverrides = (name, theme) => {
+  var _theme$components, _theme$components$nam;
+
+  return ((_theme$components = theme.components) === null || _theme$components === void 0 ? void 0 : (_theme$components$nam = _theme$components[name]) === null || _theme$components$nam === void 0 ? void 0 : _theme$components$nam.styleOverrides) || null;
+};
+const getVariantStyles = (name, theme) => {
+  var _theme$components2, _theme$components2$na;
+
+  const variants = ((_theme$components2 = theme.components) === null || _theme$components2 === void 0 ? void 0 : (_theme$components2$na = _theme$components2[name]) === null || _theme$components2$na === void 0 ? void 0 : _theme$components2$na.variants) || [];
+  return variants.reduce((styles, definition) => {
+    const key = utils.propsToClassKey(definition.props);
+    styles[key] = definition.style;
+    return styles;
+  }, {});
+};
+const variantsResolver = (props, styles, theme, name) => {
+  var _theme$components3, _theme$components3$na;
+
+  const themeVariants = (theme === null || theme === void 0 ? void 0 : (_theme$components3 = theme.components) === null || _theme$components3 === void 0 ? void 0 : (_theme$components3$na = _theme$components3[name]) === null || _theme$components3$na === void 0 ? void 0 : _theme$components3$na.variants) || [];
+  return themeVariants.reduce((variantsStyles, themeVariant) => {
+    const isMatch = Object.keys(themeVariant.props).every(key => props[key] === themeVariant.props[key]);
+
+    if (isMatch) {
+      variantsStyles.push(styles[utils.propsToClassKey(themeVariant.props)]);
+    }
+
+    return variantsStyles;
+  }, []);
+};
+
+exports.getStyleOverrides = getStyleOverrides;
+exports.getVariantStyles = getVariantStyles;
+exports.variantsResolver = variantsResolver;

package/cjs/styled/types.js

@@ -0,0 +1,12 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styled_component = require('styled-components');
+
+
+
+Object.defineProperty(exports, 'CSSObject', {
+  enumerable: true,
+  get: function () { return styled_component.CSSObject; }
+});

package/cjs/styled/utils.js

@@ -0,0 +1,24 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+require('core-js/modules/esnext.async-iterator.reduce.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.reduce.js');
+var dsUtilities = require('@elliemae/ds-utilities');
+var theme = require('../theme.js');
+
+const systemTheme = theme.theme;
+const isEmpty = string => string.length === 0;
+const coerceWithDefaultTheme = themeInput => themeInput !== null && themeInput !== void 0 ? themeInput : systemTheme;
+const propsToClassKey = props => Object.keys(props).sort().reduce((classKey, key) => {
+  if (key === 'color') {
+    return classKey + isEmpty(String(classKey)) ? String(props[key]) : dsUtilities.capitalize(String(props[key]));
+  }
+
+  return "".concat(classKey).concat(isEmpty(String(classKey)) ? key : dsUtilities.capitalize(key)).concat(dsUtilities.capitalize(props[key].toString()));
+}, '');
+
+exports.coerceWithDefaultTheme = coerceWithDefaultTheme;
+exports.isEmpty = isEmpty;
+exports.propsToClassKey = propsToClassKey;

package/cjs/th.js

@@ -0,0 +1,43 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.for-each.js');
+
+const th = property => {
+  const thGetter = function (value) {
+    let dfault = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
+
+    const func = _ref => {
+      var _ref2;
+
+      let {
+        theme
+      } = _ref;
+      const parts = value.split('-');
+      let result = theme[property];
+      parts.forEach(part => {
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+        if (result) result = result[part];
+      });
+      return (_ref2 = result) !== null && _ref2 !== void 0 ? _ref2 : dfault;
+    };
+
+    return func;
+  };
+
+  return thGetter;
+};
+th.space = th('space');
+th.fontSize = th('fontSizes');
+th.fontWeight = th('fontWeights');
+th.lineHeight = th('lineHeights');
+th.letterSpacing = th('letterSpacings');
+th.font = th('fonts');
+th.color = th('colors');
+th.breakpoint = th('breakpoints');
+th.media = th('media');
+
+exports.th = th;

package/cjs/theme.js

@@ -0,0 +1,9 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var puiTheme = require('@elliemae/pui-theme');
+
+const theme = puiTheme.getDefaultTheme();
+
+exports.theme = theme;

package/cjs/themeProviderHOC.js

@@ -0,0 +1,29 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.filter.js');
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.for-each.js');
+var _jsx2 = require('@babel/runtime/helpers/jsx');
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+require('react');
+var styled_component = require('styled-components');
+var theme = require('./theme.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _jsx2__default = /*#__PURE__*/_interopDefaultLegacy(_jsx2);
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+const themeProviderHOC = Component => props => /*#__PURE__*/_jsx2__default["default"](styled_component.ThemeProvider, {
+  theme: theme.theme
+}, void 0, /*#__PURE__*/jsxRuntime.jsx(Component, _objectSpread({}, props)));
+
+exports.themeProviderHOC = themeProviderHOC;