@elliemae/ds-classnames 2.3.1 → 3.0.0-alpha.3

package/cjs/convertPropsToSizeModifiers.js

@@ -1,43 +0,0 @@
-'use strict';
-
-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/web.dom-collections.iterator.js');
-
-const basicAction = _ref => {
-  let {
-    size = null,
-    extraTight = false,
-    tight = false,
-    base = false,
-    bitLoose = false,
-    loose = false,
-    extraLoose = false,
-    superLoose = false
-  } = _ref;
-  const cssModifier = [];
-  if (size) cssModifier.push("".concat(size)); // Size as Flag
-
-  if (extraTight) cssModifier.push('size-extra-tight');else if (tight) cssModifier.push('size-tight');else if (base) cssModifier.push('size-base');else if (bitLoose) cssModifier.push('size-bit-loose');else if (loose) cssModifier.push('size-loose');else if (extraLoose) cssModifier.push('size-extra-loose');else if (superLoose) cssModifier.push('size-super-loose');
-  return cssModifier;
-};
-
-const instance = [basicAction];
-
-const pipe = () => ({
-  getInstance() {
-    return instance;
-  },
-
-  add(customModifier) {
-    instance.push(customModifier);
-  },
-
-  execute(props) {
-    return instance.reduce((temp, action) => [...temp, ...action(props)], []);
-  }
-
-});
-
-module.exports = pipe;

package/cjs/convertPropsToTextModifiers.js

@@ -1,38 +0,0 @@
-'use strict';
-
-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/web.dom-collections.iterator.js');
-
-const basicAction = _ref => {
-  let {
-    textEllipsis,
-    textAlignment,
-    wordBreak
-  } = _ref;
-  const cssModifier = [];
-  if (textEllipsis) cssModifier.push('text-overflow-ellipsis');
-  if (wordBreak) cssModifier.push('text-overflow-word-break');
-  if (['left', 'right', 'center', 'justify'].indexOf(textAlignment) > -1) cssModifier.push("text-align-".concat(textAlignment));
-  return cssModifier;
-};
-
-const instance = [basicAction];
-
-const pipe = () => ({
-  getInstance() {
-    return instance;
-  },
-
-  add(customModifier) {
-    instance.push(customModifier);
-  },
-
-  execute(props) {
-    return instance.reduce((temp, action) => [...temp, ...action(props)], []);
-  }
-
-});
-
-module.exports = pipe;

package/cjs/index.js

@@ -1,12 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var classNameManager = require('./classNameManager.js');
-var aggregatedClasses = require('./aggregatedClasses.js');
-
-
-
-exports.convertPropToCssClassName = classNameManager["default"];
-exports.cssPrefix = classNameManager.cssPrefix;
-exports.aggregatedClasses = aggregatedClasses["default"];

package/esm/aggregatedClasses.js

@@ -1,78 +0,0 @@
-import 'core-js/modules/esnext.async-iterator.filter.js';
-import 'core-js/modules/esnext.iterator.filter.js';
-import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
-import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
-import 'core-js/modules/esnext.async-iterator.reduce.js';
-import 'core-js/modules/esnext.iterator.constructor.js';
-import 'core-js/modules/esnext.iterator.reduce.js';
-import 'core-js/modules/esnext.async-iterator.for-each.js';
-import 'core-js/modules/esnext.iterator.for-each.js';
-import React from 'react';
-import cx from 'obj-str';
-import DimsumConfig from '@elliemae/ds-shared/dimsum.config';
-import cssPipeline from './classNameManager.js';
-import { isNativeHTMLElement, isValidNativeAttribute } from './validateNativeProps.js';
-
-const _excluded = ["innerRef", "children", "classProps", "useComponent", "className", "as"];
-
-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(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 cssPrefix = DimsumConfig.classNamePrefix;
-
-const generateClassNameWithModifier = (block, element, modifier) => "".concat(cssPrefix, "-").concat(block).concat(element ? "__".concat(element) : '', "--").concat(modifier);
-
-const appendBlockAndPrefixToObj = (obj, block, element) => obj ? Object.keys(obj).reduce((acc, key) => _objectSpread(_objectSpread({}, acc), {}, {
-  ["".concat(generateClassNameWithModifier(block, element, key))]: obj[key]
-}), {}) : [];
-
-const aggregatedClasses = (type, props) => function (block, element, additionalModifiers) {
-  let options = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
-  return /*#__PURE__*/React.forwardRef((_ref, ref) => {
-    let {
-      innerRef,
-      children,
-      classProps,
-      useComponent,
-      className,
-      as
-    } = _ref,
-        rest = _objectWithoutProperties(_ref, _excluded);
-
-    // get the additional classNames either from a function or an object
-    let otherModifiers = appendBlockAndPrefixToObj(additionalModifiers, block, element);
-    if (typeof additionalModifiers === 'function') otherModifiers = appendBlockAndPrefixToObj(additionalModifiers(_objectSpread(_objectSpread(_objectSpread({}, rest), classProps), {}, {
-      className
-    })), block, element);
-    const otherModifiersStr = cx(otherModifiers);
-    const {
-      prefix,
-      propsToRemoveFromFinalElement = []
-    } = options;
-    const {
-      cssClassName: classNames
-    } = cssPipeline(block, null, _objectSpread({}, classProps), {
-      prefix,
-      element
-    });
-
-    const cleanedPropsPassedDown = _objectSpread(_objectSpread({}, props), rest);
-
-    propsToRemoveFromFinalElement.forEach(propKey => {
-      delete cleanedPropsPassedDown[propKey];
-    });
-
-    if (isNativeHTMLElement(block)) {
-      Object.keys(cleanedPropsPassedDown).forEach(key => {
-        if (!isValidNativeAttribute(key)) delete cleanedPropsPassedDown[key];
-      });
-    }
-
-    return /*#__PURE__*/React.createElement(as || type, _objectSpread({
-      ref: innerRef || ref,
-      className: [classNames, otherModifiersStr, className].join(' ')
-    }, cleanedPropsPassedDown), children);
-  });
-};
-
-export { cssPrefix, aggregatedClasses as default };

package/esm/classNameManager.js

@@ -1,83 +0,0 @@
-import 'core-js/modules/web.dom-collections.iterator.js';
-import { isEmpty } from '@elliemae/ds-utilities/utils';
-import DimsumConfig from '@elliemae/ds-shared/dimsum.config';
-import pipe from './converPropsToFormModifiers.js';
-import pipe$1 from './convertPropsToLayoutModifiers.js';
-import pipe$2 from './convertPropToFeedBackModifiers.js';
-import pipe$3 from './convertPropsToSizeModifiers.js';
-import pipe$4 from './convertPropsToTextModifiers.js';
-import pipe$5 from './convertPropsToColorModifiers.js';
-
-const cssPrefix = "".concat(DimsumConfig.classNamePrefix, "-");
-
-const executePipelines = props => {
-  const form = pipe().execute(props);
-  const layout = pipe$1().execute(props);
-  const feedback = pipe$2().execute(props);
-  const size = pipe$3().execute(props);
-  const text = pipe$4().execute(props);
-  const color = pipe$5().execute(props);
-  return [...form, ...layout, ...feedback, ...size, ...text, ...color];
-};
-/**
- * Docs: http://getbem.com/naming/
- * blockName
- * cssClassNameModifier: Main modifier
- * props { hasError, hasWarning, hasSuccess, readOnly, disabled}
- *
- * @param blockName
- * @param cssClassNameModifier
- * @param props
- * @param options
- */
-
-
-const cssPipeline = function () {
-  let blockName = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'block';
-  let cssClassNameModifier = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
-  let props = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
-  let options = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
-  const {
-    prefix,
-    element
-  } = options;
-  const prefixBlockName = "".concat(prefix || cssPrefix).concat(blockName).concat(element ? "__".concat(element) : ''); // PipeLine
-
-  const pipes = !isEmpty(props) ? executePipelines(props) : [];
-  const basePipeline = [prefixBlockName, ...pipes]; // specific classname
-
-  const className = cssClassNameModifier ? [...basePipeline].join(" ".concat(prefixBlockName, "--")).concat(" ".concat(cssClassNameModifier)) : [...basePipeline].join(" ".concat(prefixBlockName, "--"));
-  return {
-    blockName,
-    cssPrefix,
-    prefixBlockName,
-    cssClassName: className,
-
-    mainModifier(modifier) {
-      return "".concat(className, "--").concat(modifier);
-    },
-
-    classNameBlock(elementName) {
-      let usePrefix = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
-      return "".concat(!usePrefix ? blockName : prefixBlockName, "-").concat(elementName);
-    },
-
-    classNameBlockModifier(modifierName) {
-      let elementBlockName = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
-      return "".concat(prefixBlockName, "-").concat(elementBlockName, "--").concat(modifierName);
-    },
-
-    classNameElement(elementName) {
-      let elementBlockName = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
-      return "".concat(prefixBlockName).concat(elementBlockName ? "-".concat(elementBlockName) : '', "__").concat(elementName);
-    },
-
-    classNameModifier(modifierName) {
-      let elementName = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
-      return "".concat(prefixBlockName).concat(elementName ? "__".concat(elementName) : '', "--").concat(modifierName);
-    }
-
-  };
-};
-
-export { cssPrefix, cssPipeline as default };

package/esm/converPropsToFormModifiers.js

@@ -1,37 +0,0 @@
-import 'core-js/modules/esnext.async-iterator.reduce.js';
-import 'core-js/modules/esnext.iterator.constructor.js';
-import 'core-js/modules/esnext.iterator.reduce.js';
-import 'core-js/modules/web.dom-collections.iterator.js';
-
-const basicAction = _ref => {
-  let {
-    readOnly = false,
-    disabled = false,
-    checked = false
-  } = _ref;
-  const cssModifier = []; // input state modifiers
-
-  if (checked) cssModifier.push('checked');
-  if (readOnly) cssModifier.push('readonly');
-  if (disabled) cssModifier.push('disabled');
-  return cssModifier;
-};
-
-const instance = [basicAction];
-
-const pipe = () => ({
-  getInstance() {
-    return instance;
-  },
-
-  add(customModifier) {
-    instance.push(customModifier);
-  },
-
-  execute(props) {
-    return instance.reduce((temp, action) => [...temp, ...action(props)], []);
-  }
-
-});
-
-export { pipe as default };

package/esm/convertPropToFeedBackModifiers.js

@@ -1,37 +0,0 @@
-import 'core-js/modules/esnext.async-iterator.reduce.js';
-import 'core-js/modules/esnext.iterator.constructor.js';
-import 'core-js/modules/esnext.iterator.reduce.js';
-import 'core-js/modules/web.dom-collections.iterator.js';
-
-const basicAction = _ref => {
-  let {
-    hasError = false,
-    hasWarning = false,
-    hasSuccess = false,
-    modalType
-  } = _ref;
-  const cssModifier = []; // valid state modifier
-
-  if (hasError) cssModifier.push('error');else if (hasWarning) cssModifier.push('warning');else if (hasSuccess) cssModifier.push('success');
-  if (modalType) cssModifier.push("modal-type-".concat(modalType));
-  return cssModifier;
-};
-
-const instance = [basicAction];
-
-const pipe = () => ({
-  getInstance() {
-    return instance;
-  },
-
-  add(customModifier) {
-    instance.push(customModifier);
-  },
-
-  execute(props) {
-    return instance.reduce((temp, action) => [...temp, ...action(props)], []);
-  }
-
-});
-
-export { pipe as default };

package/esm/convertPropsToColorModifiers.js

@@ -1,36 +0,0 @@
-import 'core-js/modules/esnext.async-iterator.reduce.js';
-import 'core-js/modules/esnext.iterator.constructor.js';
-import 'core-js/modules/esnext.iterator.reduce.js';
-import 'core-js/modules/web.dom-collections.iterator.js';
-
-const basicAction = _ref => {
-  let {
-    color = null
-  } = _ref;
-  const cssModifier = [];
-
-  if (color && color[0]) {
-    if (color[1] !== null) cssModifier.push("color-".concat(color[0], "-").concat(color[1]));else cssModifier.push("color-".concat(color[0]));
-  }
-
-  return cssModifier;
-};
-
-const instance = [basicAction];
-
-const pipe = () => ({
-  getInstance() {
-    return instance;
-  },
-
-  add(customModifier) {
-    instance.push(customModifier);
-  },
-
-  execute(props) {
-    return instance.reduce((temp, action) => [...temp, ...action(props)], []);
-  }
-
-});
-
-export { pipe as default };

package/esm/convertPropsToLayoutModifiers.js

@@ -1,39 +0,0 @@
-import 'core-js/modules/esnext.async-iterator.reduce.js';
-import 'core-js/modules/esnext.iterator.constructor.js';
-import 'core-js/modules/esnext.iterator.reduce.js';
-import 'core-js/modules/web.dom-collections.iterator.js';
-
-const basicAction = _ref => {
-  let {
-    id,
-    buttonType = 'default',
-    fluidWidth = false,
-    fluidHeight = false
-  } = _ref;
-  const cssModifier = []; // buttons types
-
-  if (id) cssModifier.push("id-".concat(id));
-  if (buttonType) cssModifier.push(buttonType);
-  if (fluidWidth) cssModifier.push('fluid-width');
-  if (fluidHeight) cssModifier.push('fluid-height');
-  return cssModifier;
-};
-
-const instance = [basicAction];
-
-const pipe = () => ({
-  getInstance() {
-    return instance;
-  },
-
-  add(customModifier) {
-    instance.push(customModifier);
-  },
-
-  execute(props) {
-    return instance.reduce((temp, action) => [...temp, ...action(props)], []);
-  }
-
-});
-
-export { pipe as default };

package/esm/convertPropsToSizeModifiers.js

@@ -1,41 +0,0 @@
-import 'core-js/modules/esnext.async-iterator.reduce.js';
-import 'core-js/modules/esnext.iterator.constructor.js';
-import 'core-js/modules/esnext.iterator.reduce.js';
-import 'core-js/modules/web.dom-collections.iterator.js';
-
-const basicAction = _ref => {
-  let {
-    size = null,
-    extraTight = false,
-    tight = false,
-    base = false,
-    bitLoose = false,
-    loose = false,
-    extraLoose = false,
-    superLoose = false
-  } = _ref;
-  const cssModifier = [];
-  if (size) cssModifier.push("".concat(size)); // Size as Flag
-
-  if (extraTight) cssModifier.push('size-extra-tight');else if (tight) cssModifier.push('size-tight');else if (base) cssModifier.push('size-base');else if (bitLoose) cssModifier.push('size-bit-loose');else if (loose) cssModifier.push('size-loose');else if (extraLoose) cssModifier.push('size-extra-loose');else if (superLoose) cssModifier.push('size-super-loose');
-  return cssModifier;
-};
-
-const instance = [basicAction];
-
-const pipe = () => ({
-  getInstance() {
-    return instance;
-  },
-
-  add(customModifier) {
-    instance.push(customModifier);
-  },
-
-  execute(props) {
-    return instance.reduce((temp, action) => [...temp, ...action(props)], []);
-  }
-
-});
-
-export { pipe as default };

package/esm/convertPropsToTextModifiers.js

@@ -1,36 +0,0 @@
-import 'core-js/modules/esnext.async-iterator.reduce.js';
-import 'core-js/modules/esnext.iterator.constructor.js';
-import 'core-js/modules/esnext.iterator.reduce.js';
-import 'core-js/modules/web.dom-collections.iterator.js';
-
-const basicAction = _ref => {
-  let {
-    textEllipsis,
-    textAlignment,
-    wordBreak
-  } = _ref;
-  const cssModifier = [];
-  if (textEllipsis) cssModifier.push('text-overflow-ellipsis');
-  if (wordBreak) cssModifier.push('text-overflow-word-break');
-  if (['left', 'right', 'center', 'justify'].indexOf(textAlignment) > -1) cssModifier.push("text-align-".concat(textAlignment));
-  return cssModifier;
-};
-
-const instance = [basicAction];
-
-const pipe = () => ({
-  getInstance() {
-    return instance;
-  },
-
-  add(customModifier) {
-    instance.push(customModifier);
-  },
-
-  execute(props) {
-    return instance.reduce((temp, action) => [...temp, ...action(props)], []);
-  }
-
-});
-
-export { pipe as default };

package/esm/index.js

@@ -1,2 +0,0 @@
-export { default as convertPropToCssClassName, cssPrefix } from './classNameManager.js';
-export { default as aggregatedClasses } from './aggregatedClasses.js';

package/types/aggregatedClasses.d.ts

@@ -1,11 +0,0 @@
-import React from 'react';
-export declare const cssPrefix: any;
-declare type AggregatedClassesT<T = unknown> = (type: any, props?: any) => (block: string, element?: string | null, additionalModifiers?: {
-    [key: string]: unknown;
-} | ((arg: any) => {
-    [key: string]: unknown;
-}), options?: {
-    [key: string]: unknown;
-}) => React.ForwardRefExoticComponent<React.RefAttributes<T>>;
-declare const aggregatedClasses: AggregatedClassesT;
-export default aggregatedClasses;

package/types/classNameManager.d.ts

@@ -1,28 +0,0 @@
-export declare const cssPrefix: string;
-/**
- * Docs: http://getbem.com/naming/
- * blockName
- * cssClassNameModifier: Main modifier
- * props { hasError, hasWarning, hasSuccess, readOnly, disabled}
- *
- * @param blockName
- * @param cssClassNameModifier
- * @param props
- * @param options
- */
-declare const cssPipeline: (blockName?: string, cssClassNameModifier?: string, props?: {
-    [key: string]: any;
-}, options?: {
-    [key: string]: any;
-}) => {
-    blockName: string;
-    cssPrefix: string;
-    prefixBlockName: string;
-    cssClassName: string;
-    mainModifier(modifier: any): string;
-    classNameBlock(elementName: any, usePrefix?: boolean): string;
-    classNameBlockModifier(modifierName: any, elementBlockName?: string): string;
-    classNameElement(elementName: any, elementBlockName?: string): string;
-    classNameModifier(modifierName: any, elementName?: string): string;
-};
-export default cssPipeline;

package/types/converPropsToFormModifiers.d.ts

@@ -1,14 +0,0 @@
-declare const pipe: () => {
-    getInstance(): (({ readOnly, disabled, checked, }: {
-        readOnly?: boolean | undefined;
-        disabled?: boolean | undefined;
-        checked?: boolean | undefined;
-    }) => string[])[];
-    add(customModifier: any): void;
-    execute(props: any): ({ readOnly, disabled, checked, }: {
-        readOnly?: boolean | undefined;
-        disabled?: boolean | undefined;
-        checked?: boolean | undefined;
-    }) => string[];
-};
-export default pipe;

package/types/convertPropToFeedBackModifiers.d.ts

@@ -1,16 +0,0 @@
-declare const pipe: () => {
-    getInstance(): (({ hasError, hasWarning, hasSuccess, modalType, }: {
-        hasError?: boolean | undefined;
-        hasWarning?: boolean | undefined;
-        hasSuccess?: boolean | undefined;
-        modalType: any;
-    }) => string[])[];
-    add(customModifier: any): void;
-    execute(props: any): ({ hasError, hasWarning, hasSuccess, modalType, }: {
-        hasError?: boolean | undefined;
-        hasWarning?: boolean | undefined;
-        hasSuccess?: boolean | undefined;
-        modalType: any;
-    }) => string[];
-};
-export default pipe;

package/types/convertPropsToColorModifiers.d.ts

@@ -1,10 +0,0 @@
-declare const pipe: () => {
-    getInstance(): (({ color }: {
-        color?: null | undefined;
-    }) => string[])[];
-    add(customModifier: any): void;
-    execute(props: any): ({ color }: {
-        color?: null | undefined;
-    }) => string[];
-};
-export default pipe;

package/types/convertPropsToLayoutModifiers.d.ts

@@ -1,16 +0,0 @@
-declare const pipe: () => {
-    getInstance(): (({ id, buttonType, fluidWidth, fluidHeight, }: {
-        id: any;
-        buttonType?: string | undefined;
-        fluidWidth?: boolean | undefined;
-        fluidHeight?: boolean | undefined;
-    }) => string[])[];
-    add(customModifier: any): void;
-    execute(props: any): ({ id, buttonType, fluidWidth, fluidHeight, }: {
-        id: any;
-        buttonType?: string | undefined;
-        fluidWidth?: boolean | undefined;
-        fluidHeight?: boolean | undefined;
-    }) => string[];
-};
-export default pipe;

package/types/convertPropsToSizeModifiers.d.ts

@@ -1,24 +0,0 @@
-declare const pipe: () => {
-    getInstance(): (({ size, extraTight, tight, base, bitLoose, loose, extraLoose, superLoose, }: {
-        size?: null | undefined;
-        extraTight?: boolean | undefined;
-        tight?: boolean | undefined;
-        base?: boolean | undefined;
-        bitLoose?: boolean | undefined;
-        loose?: boolean | undefined;
-        extraLoose?: boolean | undefined;
-        superLoose?: boolean | undefined;
-    }) => string[])[];
-    add(customModifier: any): void;
-    execute(props: any): ({ size, extraTight, tight, base, bitLoose, loose, extraLoose, superLoose, }: {
-        size?: null | undefined;
-        extraTight?: boolean | undefined;
-        tight?: boolean | undefined;
-        base?: boolean | undefined;
-        bitLoose?: boolean | undefined;
-        loose?: boolean | undefined;
-        extraLoose?: boolean | undefined;
-        superLoose?: boolean | undefined;
-    }) => string[];
-};
-export default pipe;

package/types/convertPropsToTextModifiers.d.ts

@@ -1,14 +0,0 @@
-declare const pipe: () => {
-    getInstance(): (({ textEllipsis, textAlignment, wordBreak }: {
-        textEllipsis: any;
-        textAlignment: any;
-        wordBreak: any;
-    }) => string[])[];
-    add(customModifier: any): void;
-    execute(props: any): ({ textEllipsis, textAlignment, wordBreak }: {
-        textEllipsis: any;
-        textAlignment: any;
-        wordBreak: any;
-    }) => string[];
-};
-export default pipe;

package/types/index.d.ts

@@ -1,2 +0,0 @@
-export { default as convertPropToCssClassName, cssPrefix } from './classNameManager';
-export { default as aggregatedClasses } from './aggregatedClasses';