@quarkly/atomize/build/cjs/atomic-styles/bootstrap.js

Library for creating atomic react components

"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

exports.__esModule = true;
exports["default"] = exports.sortByBreakpointsOrder = exports.getSortedBreakpoints = exports.createChainStream = exports.replaceKey = exports.createOverriderStyles = exports.createStyleRule = exports.createMediaWrapper = exports.createEffectWrapper = exports.createCssRule = exports.ruleExists = exports.transformVar = exports.testExistPrefix = exports.trimComma = exports.getThemePrefix = exports.getTransformer = void 0;

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _camelCase2 = _interopRequireDefault(require("lodash/camelCase"));

var _sortBy2 = _interopRequireDefault(require("lodash/sortBy"));

var _memoize2 = _interopRequireDefault(require("lodash/memoize"));

var _get2 = _interopRequireDefault(require("lodash/get"));

var _merge2 = _interopRequireDefault(require("lodash/merge"));

var _flow2 = _interopRequireDefault(require("lodash/flow"));

var _dict = _interopRequireWildcard(require("../constants/dict"));

var _theme = require("../constants/theme");

var _theme2 = require("../utils/theme");

var _splitCssRule = _interopRequireDefault(require("./split-css-rule"));

var _validate = _interopRequireDefault(require("../utils/validate"));

var _transformers = _interopRequireWildcard(require("../utils/transformers"));

var _modifiers = require("../utils/modifiers");

var _searchRule = require("./search-rule");

var getTransformer = function getTransformer(name) {
  return (0, _get2["default"])(_transformers["default"], name, _transformers.defaultTransformer);
};

exports.getTransformer = getTransformer;

var getThemePrefix = function getThemePrefix(key) {
  if (key.endsWith('-color')) return 'color';
  if (_theme.themeProps.includes(key)) return (0, _camelCase2["default"])(key);
  return '';
};

exports.getThemePrefix = getThemePrefix;

var trimComma = function trimComma(value) {
  if (typeof value !== 'string') return value;
  return (0, _splitCssRule["default"])(value).filter(function (v) {
    return v;
  }).join(',');
};

exports.trimComma = trimComma;

var testExistPrefix = function testExistPrefix(name) {
  var splited = name.split('-') || [];
  if (splited.length <= 1) return false;
  return _theme.themePrefixes.includes(splited[0]);
};

exports.testExistPrefix = testExistPrefix;

var transformVar = function transformVar(key, value) {
  if (typeof value !== 'string' || value.indexOf('--') === -1) return value;
  var prefix = getThemePrefix(key);
  return value.replace(/(^|\s|,|calc\()(?:var\()?--([^,\s]*)/gi, function (res, before, name) {
    if (res.includes('var(')) return res;
    if (prefix && !testExistPrefix(name)) return before + "var(--qtheme-" + prefix + "-" + name + ")";
    return before + "var(--qtheme-" + name + ")";
  });
};

exports.transformVar = transformVar;

var ruleExists = function ruleExists(key, config) {
  if (!config) return _dict.hashPropsWithAliases[key];
  if (config.useAliases) return _dict.hashPropsWithAliases[key];
  return _dict["default"][key];
};

exports.ruleExists = ruleExists;

var createCssRule = function createCssRule(_ref) {
  var propKey = _ref.propKey,
      value = _ref.value,
      props = _ref.props,
      config = _ref.config;
  var currentKey = propKey[0],
      otherKeys = propKey.slice(1);
  if (!ruleExists(currentKey, config)) return {};
  var _hashPropsWithAliases = _dict.hashPropsWithAliases[currentKey],
      transformer = _hashPropsWithAliases.transformer,
      compose = _hashPropsWithAliases.compose;
  var transform = getTransformer(transformer);

  var createCss = function createCss(n, key) {
    var _ref2;

    var resultValue = trimComma(transformVar(key, transform(n, [])));
    var isValid = typeof resultValue === 'string' ? (0, _validate["default"])(resultValue) : true;
    if (!isValid) return null;
    return _ref2 = {}, _ref2[key] = resultValue, _ref2;
  };

  var css = compose ? compose.reduce(function (acc, composeKey) {
    var cCss = createCss(value, composeKey);
    return (0, _merge2["default"])(acc, cCss);
  }, {}) : createCss(value, _dict.hashPropsWithAliases[currentKey].name);
  return {
    propKey: otherKeys,
    value: value,
    css: css,
    props: props,
    config: config
  };
};

exports.createCssRule = createCssRule;

var createEffectWrapper = function createEffectWrapper(_ref3) {
  var _newCss;

  var propKey = _ref3.propKey,
      value = _ref3.value,
      props = _ref3.props,
      css = _ref3.css,
      config = _ref3.config;
  if (!css) return {};
  var currentKey = propKey[0],
      otherKeys = propKey.slice(1);
  var effects = config.effects;

  if (!effects) {
    return {
      propKey: propKey,
      value: value,
      css: css,
      props: props,
      config: config
    };
  }

  var effectNames = Object.keys(effects);

  if (!effectNames || !effectNames.length) {
    return {
      propKey: propKey,
      value: value,
      css: css,
      props: props,
      config: config
    };
  } // текущий ключ - не медиа выражение


  if (!effects[currentKey]) {
    return {
      propKey: propKey,
      value: value,
      css: css,
      props: props,
      config: config
    };
  }

  var effectCssKey = effects[currentKey];
  var newCss = (_newCss = {}, _newCss["&" + effectCssKey + ", &[data-quarkly-state=\"" + currentKey + "\"]"] = css, _newCss);
  return {
    propKey: otherKeys,
    value: value,
    css: newCss,
    props: props,
    config: config
  };
};

exports.createEffectWrapper = createEffectWrapper;

var createMediaWrapper = function createMediaWrapper(_ref4) {
  var _newCss2;

  var propKey = _ref4.propKey,
      value = _ref4.value,
      props = _ref4.props,
      css = _ref4.css,
      config = _ref4.config;
  if (!css) return {};
  var currentKey = propKey[0];
  var breakpoints = (0, _theme2.getBreakpoints)(props);
  if (!breakpoints[currentKey]) return {
    propKey: propKey,
    value: value,
    css: css,
    props: props,
    config: config
  };
  var mediaSelector = breakpoints[currentKey];
  var newCss = (_newCss2 = {}, _newCss2[mediaSelector] = css, _newCss2);
  return {
    propKey: currentKey,
    value: value,
    css: newCss,
    config: config
  };
};

exports.createMediaWrapper = createMediaWrapper;
var createStyleRule = (0, _flow2["default"])([createCssRule, createEffectWrapper, createMediaWrapper]);
exports.createStyleRule = createStyleRule;

var createOverriderStyles = function createOverriderStyles(overriders) {
  return function (props) {
    return overriders.reduce(function (acc, ov) {
      return (0, _merge2["default"])(acc, ov(props));
    }, {});
  };
};

exports.createOverriderStyles = createOverriderStyles;

var replaceKey = function replaceKey(key, replaced) {
  return key.replace(replaced, '').split('-').filter(function (a) {
    return a;
  }).join('-');
};

exports.replaceKey = replaceKey;

var createChunks = function createChunks(props, config) {
  return Object.entries(props).reduce(function (acc, _ref5) {
    var key = _ref5[0],
        value = _ref5[1];
    var ruleChain = (0, _searchRule.searchRuleInKey)(key);
    if (!ruleChain) return acc;
    key = replaceKey(key, ruleChain);
    var effectChain = (0, _searchRule.searchEffectInKey)(key, config.effects || {});

    if (effectChain) {
      key = replaceKey(key, effectChain);
    }

    var breakpoints = (0, _theme2.themeGet)(props, 'breakpoints', {});
    var breackpointChain = (0, _searchRule.searchBreakpointInKey)(key, breakpoints);
    acc.push({
      chains: {
        ruleChain: ruleChain,
        breackpointChain: breackpointChain,
        effectChain: effectChain
      },
      value: value
    });
    return acc;
  }, []);
};

var createChainStream = function createChainStream(chains) {
  var ruleChain = chains.ruleChain,
      effectChain = chains.effectChain,
      breackpointChain = chains.breackpointChain;
  var listChains = [ruleChain, effectChain, breackpointChain];
  return listChains.filter(function (a) {
    return a;
  });
};

exports.createChainStream = createChainStream;
var getSortedBreakpoints = (0, _memoize2["default"])(function (breakpoints) {
  return (0, _sortBy2["default"])(Object.entries(breakpoints), function (_ref6) {
    var _ref6$ = _ref6[1],
        item = _ref6$[0];
    return item.type === 'max-width' ? -1 : 1;
  }, function (_ref7) {
    var _ref7$ = _ref7[1],
        item = _ref7$[0];
    return item.value * (item.type === 'max-width' ? -1 : 1);
  });
});
exports.getSortedBreakpoints = getSortedBreakpoints;

var sortByBreakpointsOrder = function sortByBreakpointsOrder(chunks, props) {
  var sortedBreakpoints = getSortedBreakpoints((0, _theme2.themeGet)(props, 'breakpoints'));
  return (0, _sortBy2["default"])(chunks, function (_ref8) {
    var chains = _ref8.chains;
    return sortedBreakpoints.findIndex(function (_ref9) {
      var key = _ref9[0];
      return key === chains.breackpointChain;
    });
  });
};

exports.sortByBreakpointsOrder = sortByBreakpointsOrder;

var _default = function _default(config, defaultProps) {
  if (defaultProps === void 0) {
    defaultProps = {};
  }

  return function (componentProps) {
    var props = (0, _extends2["default"])((0, _extends2["default"])({}, defaultProps), componentProps);
    var deps = [];

    if (config.name) {
      deps.push((0, _modifiers.themed)(config.name));
    }

    if (config.variant) {
      deps.push((0, _modifiers.variants)(config.variant));
    }

    if (config.mixins) {
      deps.push(_modifiers.mixins);
    } // apply styles in breakpoints order


    var overrider = createOverriderStyles(deps);
    var chunks = sortByBreakpointsOrder(createChunks(props, config), props);
    var cleanedProps = (0, _extends2["default"])({}, props);
    var cssObject = chunks.reduce(function (acc, _ref10) {
      var chains = _ref10.chains,
          value = _ref10.value;
      var propKey = createChainStream(chains);

      var _createStyleRule = createStyleRule({
        propKey: propKey,
        value: value,
        props: props,
        config: config
      }),
          css = _createStyleRule.css;

      if (!css) return acc;
      delete cleanedProps[propKey.reverse().join('-')];
      return (0, _merge2["default"])(acc, css);
    }, overrider(props));
    return {
      cssObject: cssObject,
      cleanedProps: cleanedProps
    };
  };
};

exports["default"] = _default;