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

package/dist/esm/aggregatedClasses.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/aggregatedClasses.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unsafe-assignment */\n/* eslint-disable prettier/prettier */\n/* eslint-disable max-params */\n/* eslint-disable react/prop-types */\nimport React from 'react';\nimport cx from 'obj-str';\nimport { convertPropToCssClassName } from './classNameManager';\nimport { dimsumConfig } from './dimsum.config';\nimport {\n  isValidNativeAttribute,\n  isNativeHTMLElement,\n} from './validateNativeProps';\n\nexport const cssPrefix = dimsumConfig.classNamePrefix;\n\ntype AggregatedClassesT<T = unknown> = (\n  type: any,\n  props?: any,\n) => (\n  block: string,\n  element?: string | null,\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  additionalModifiers?: { [key: string]: unknown } | ((arg: any) => { [key: string]: unknown }),\n  options?: { [key: string]: unknown },\n) => React.ForwardRefExoticComponent<React.RefAttributes<T>>;\n\nconst generateClassNameWithModifier = (block, element, modifier) =>\n  `${cssPrefix}-${block}${element ? `__${element}` : ''}--${modifier}`;\n\nconst appendBlockAndPrefixToObj = (obj, block, element) =>\n  obj\n    ? Object.keys(obj).reduce(\n      (acc, key) => ({\n        ...acc,\n        [`${generateClassNameWithModifier(block, element, key)}`]: obj[key],\n      }),\n      {},\n    )\n    : [];\n\nconst aggregatedClasses: AggregatedClassesT=\n  (type, props) =>\n    (block, element, additionalModifiers, options = {}) =>\n      React.forwardRef(({ innerRef, children, classProps, useComponent, className, as, ...rest }, ref) => {\n      // get the additional classNames either from a function or an object\n        let otherModifiers = appendBlockAndPrefixToObj(additionalModifiers, block, element);\n        if (typeof additionalModifiers === 'function')\n          otherModifiers = appendBlockAndPrefixToObj(\n            additionalModifiers({ ...rest, ...classProps, className }),\n            block,\n            element,\n          );\n\n        const otherModifiersStr = cx(otherModifiers);\n        const { prefix, propsToRemoveFromFinalElement = [] } = options;\n        const { cssClassName: classNames } = convertPropToCssClassName(\n          block,\n          null,\n          { ...classProps },\n          { prefix, element },\n        );\n        const cleanedPropsPassedDown = { ...props, ...rest };\n        propsToRemoveFromFinalElement.forEach((propKey) => {\n          delete cleanedPropsPassedDown[propKey];\n        });\n\n        if (isNativeHTMLElement(block)) {\n          Object.keys(cleanedPropsPassedDown).forEach((key) => {\n            if (!isValidNativeAttribute(key)) delete cleanedPropsPassedDown[key];\n          });\n        }\n\n        return React.createElement(\n          as || type,\n          {\n            ref: innerRef || ref,\n            className: [classNames, otherModifiersStr, className].join(' '),\n            ...cleanedPropsPassedDown,\n          },\n          children,\n        );\n      });\n\nexport default aggregatedClasses;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;ACIA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAKO,MAAM,YAAY,aAAa;AAatC,MAAM,gCAAgC,CAAC,OAAO,SAAS,aACrD,GAAG,aAAa,QAAQ,UAAU,KAAK,YAAY,OAAO;AAE5D,MAAM,4BAA4B,CAAC,KAAK,OAAO,YAC7C,MACI,OAAO,KAAK,KAAK,OACjB,CAAC,KAAK,QAAS,iCACV,MADU;AAAA,GAEZ,GAAG,8BAA8B,OAAO,SAAS,SAAS,IAAI;AAAA,IAEjE,MAEA;AAEN,MAAM,oBACJ,CAAC,MAAM,UACL,CAAC,OAAO,SAAS,qBAAqB,UAAU,OAC9C,OAAM,WAAW,CAAC,IAA0E,QAAQ;AAAlF,eAAE,YAAU,UAAU,YAAY,cAAc,WAAW,OAA3D,IAAkE,iBAAlE,IAAkE,CAAhE,YAAU,YAAU,cAAY,gBAAc,aAAW;AAE3E,MAAI,iBAAiB,0BAA0B,qBAAqB,OAAO;AAC3E,MAAI,OAAO,wBAAwB;AACjC,qBAAiB,0BACf,oBAAoB,gDAAK,OAAS,aAAd,EAA0B,eAC9C,OACA;AAGJ,QAAM,oBAAoB,GAAG;AAC7B,QAAM,EAAE,QAAQ,gCAAgC,OAAO;AACvD,QAAM,EAAE,cAAc,eAAe,0BACnC,OACA,MACA,mBAAK,aACL,EAAE,QAAQ;AAEZ,QAAM,yBAAyB,kCAAK,QAAU;AAC9C,gCAA8B,QAAQ,CAAC,YAAY;AACjD,WAAO,uBAAuB;AAAA;AAGhC,MAAI,oBAAoB,QAAQ;AAC9B,WAAO,KAAK,wBAAwB,QAAQ,CAAC,QAAQ;AACnD,UAAI,CAAC,uBAAuB;AAAM,eAAO,uBAAuB;AAAA;AAAA;AAIpE,SAAO,OAAM,cACX,MAAM,MACN;AAAA,IACE,KAAK,YAAY;AAAA,IACjB,WAAW,CAAC,YAAY,mBAAmB,WAAW,KAAK;AAAA,KACxD,yBAEL;AAAA;AAIV,IAAO,4BAAQ;",
+  "names": []
+}

package/dist/esm/aggregatedClasses.md

@@ -0,0 +1,323 @@
+# aggregatedClasses
+
+Utility to clean up the renders of too many classNames, internally uses the classNamePipeline and obj-str to ease the workflow.
+Follows BEM methodology (block - element - modifier)
+<br> This utility allows us to create components outside the render method with the block-element-modifiers injected in the className
+## Constructor
+
+```jsx
+const blockName = 'form-item'
+
+const Label = aggregatedClasses('div')(blockName, 'label')
+const InputController = aggregatedClasses('div')(blockName, 'controller')
+
+// generates 
+<div className='ds-em-form-item__label' /> 
+<div className='ds-em-form-item__controller' /> 
+
+// and based on the props passed through classProps is going to inject the proper modifiers
+render() {
+    return (
+        <Label
+            classProps={{ 
+                hasError: true, 
+                readOnly: true, 
+                disabled: true 
+            }}
+        />
+    )
+}
+
+// generates
+<div className='ds-em-form-item__label ds-em-form-item__label--error ds-em-form-item__label--readonly ds-em-form-item__label--disabled' /> 
+
+```
+
+This creates a component with the specified element or other component and creates the className based on the blockName, the elementName, and the props that this component is going to receive.
+
+
+### Parameters
+```js 
+export default type => (block, element, additionalClassNames, options)
+```
+
+@type - element or component to create <br>
+@block - block name <br>
+@element - element name  
+@additionalModifiers - object that appends new modifiers to the className if the value is true. <br>
+Also we can use a function that takes the props of the component created <br>
+<br>
+@options - Object to configure 'prefix'
+
+####Example
+```js
+const Wrapper = aggregatedClasses('div')(blockName, 'elementName', props => ({
+  someModifier: true, 
+  otherModifier: props.hasClass
+}))
+```
+
+
+####Example
+```js
+const Wrapper = aggregatedClasses('div')(blockName, 'elementName', {someClassName: true}, {prefix: 'DIMSUM'})
+```
+
+```jsx 
+
+
+// this translates
+const Wrapper = ({ children, ...rest }) => {
+  const { cssClassName } = convertPropToCssClassName(
+    blockName,
+    null,
+    { ...rest })
+  return (
+    <div className={cssClassName}>
+      { children }
+    </div>
+  )
+}
+
+// to this
+const WrapperClassed = aggregatedClasses('div')(blockName, null)
+```
+
+## Complete example 
+before
+```jsx
+import React, { Component } from 'react'
+import getSvgPath from 'components/basic/form/OutlinedInputField/getSvgPath'
+import { convertPropToCssClassName } from '@elliemae/ds-classnames'
+import { DSTextWrapper } from 'components/index'
+
+const blockName = 'labeled-outline'
+const pfxBlockName = `em-ds-${blockName}`
+
+class DSFloatingLabelInput extends Component {
+  constructor(props) {
+    super(props)
+    this.wrapper = React.createRef()
+    this.pathEl = React.createRef()
+    this.outlineEl = React.createRef()
+    this.outlineIdleEl = React.createRef()
+    this.labelEl = React.createRef()
+    this.state = {
+      open: props.open,
+      value: props.value,
+      focused: false,
+    }
+  }
+  componentWillUnmount() {
+    window.removeEventListener('resize', this.updatePath)
+  }
+  get sizes() {
+    return {
+      labelWidth: this.labelEl.current.offsetWidth * 0.9,
+      width: this.wrapper.current.offsetWidth,
+      height: this.wrapper.current.offsetHeight,
+      radiusStyle: window.getComputedStyle(this.outlineIdleEl.current).getPropertyValue('border-radius'),
+    }
+  }
+  updatePath() {
+    const path = getSvgPath(this.sizes)
+    this.pathEl.current.setAttribute('d', path)
+  }
+  openOutline() {
+    this.setState({ open: true })
+  }
+  closeOutline() {
+    this.setState({ open: false })
+  }
+  render() {
+    const {
+      className,
+      hasError,
+      readOnly,
+      disabled,
+      inputComponent,
+      label,
+    } = this.props
+    const InputComponent = inputComponent
+    const { open, focused, value } = this.state
+    const isOpen = open || focused || !!value
+
+    const { cssClassName: classNames } = convertPropToCssClassName(
+      blockName,
+      className, {
+        hasError,
+        readOnly,
+        disabled,
+      })
+    return (
+      <div
+        ref={this.wrapper}
+        className={`${classNames} ${isOpen ? `${pfxBlockName}--opened` : ''} ${focused ? `${pfxBlockName}--focused` : ''}`}
+        onMouseEnter={this.openOutline}
+        onMouseLeave={this.closeOutline}
+      >
+        <div
+          ref={this.outlineEl}
+          className={`${pfxBlockName}__outline`}
+        >
+          <svg>
+            <path
+              ref={this.pathEl}
+              className={`${pfxBlockName}__outline__path`}
+            />
+          </svg>
+        </div>
+        <div
+          ref={this.outlineIdleEl}
+          className={`${pfxBlockName}__idle`}
+        />
+        <div className={`${pfxBlockName}__content`}>
+          <InputComponent
+            disabled={disabled}
+            hasError={hasError}
+            onBlur={() => this.setState({ focused: false })}
+            onChange={e => this.setState({ value: e.target.value })}
+            onFocus={() => this.setState({ focused: true })}
+            readOnly={readOnly}
+            value={value}
+          />
+          <label
+            ref={this.labelEl}
+            className={`${pfxBlockName}__label ${isOpen ? `${pfxBlockName}__label--floated` : ''}`}
+          >
+            <DSTextWrapper
+              innerRef={this.labelEl}
+              maxWidth='20px'
+              text={label}
+              textEllipsis
+            />
+          </label>
+        </div>
+      </div>
+    )
+  }
+}
+
+export default DSFloatingLabelInput
+
+```
+
+after
+
+```jsx 
+import React, { Component } from 'react'
+import getSvgPath from 'components/basic/form/OutlinedInputField/getSvgPath'
+import { DSTextWrapper } from 'components/index'
+import { aggregatedClasses } from '@elliemae/ds-classnames'
+
+const blockName = 'labeled-outline'
+
+const Wrapper = aggregatedClasses('div')(blockName, null, ({ isOpen, isFocused }) => ({
+  opened: isOpen,
+  focused: isFocused,
+}))
+
+const FloatingLabel = aggregatedClasses('label')(blockName, 'label', ({ isOpen }) => ({
+  floated: isOpen,
+}))
+
+const OutlineContent = aggregatedClasses('div')(blockName, 'content')
+const OutlineIdle = aggregatedClasses('div')(blockName, 'idle')
+const Outline = aggregatedClasses('div')(blockName, 'outline')
+const OutlinePath = aggregatedClasses('path')(blockName, 'outline__path')
+
+class DSFloatingLabelInput extends Component {
+  constructor(props) {
+    super(props)
+    this.wrapper = React.createRef()
+    this.pathEl = React.createRef()
+    this.outlineEl = React.createRef()
+    this.outlineIdleEl = React.createRef()
+    this.labelEl = React.createRef()
+    this.state = {
+      open: props.open,
+      value: props.value,
+      focused: false,
+    }
+  }
+  componentDidMount() {
+    // TODO: not getting referenced elements height / width without this
+    // this is a temporary workaround
+    setTimeout(() => this.updatePath(), 1)
+    window.addEventListener('resize', this.updatePath)
+  }
+  componentWillUnmount() {
+    window.removeEventListener('resize', this.updatePath)
+  }
+  get sizes() {
+    return {
+      labelWidth: this.labelEl.current.offsetWidth * 0.9,
+      width: this.wrapper.current.offsetWidth,
+      height: this.wrapper.current.offsetHeight,
+      radiusStyle: window.getComputedStyle(this.outlineIdleEl.current).getPropertyValue('border-radius'),
+    }
+  }
+  updatePath() {
+    const path = getSvgPath(this.sizes)
+    this.pathEl.current.setAttribute('d', path)
+  }
+  openOutline() {
+    this.setState({ open: true })
+  }
+  closeOutline() {
+    this.setState({ open: false })
+  }
+  render() {
+    const {
+      hasError,
+      readOnly,
+      disabled,
+      inputComponent,
+      label,
+    } = this.props
+    const InputComponent = inputComponent
+    const { open, focused, value } = this.state
+    const isOpen = open || focused || !!value
+
+    return (
+      <Wrapper
+        classProps={{ hasError, isOpen, isFocused: focused, readOnly, disabled }}
+        innerRef={this.wrapper}
+        onMouseEnter={this.openOutline}
+        onMouseLeave={this.closeOutline}
+      >
+        <Outline innerRef={this.outlineEl}>
+          <svg>
+            <OutlinePath innerRef={this.pathEl} />
+          </svg>
+        </Outline>
+        <OutlineIdle innerRef={this.outlineIdleEl} />
+        <OutlineContent>
+          <InputComponent
+            disabled={disabled}
+            hasError={hasError}
+            onBlur={() => this.setState({ focused: false })}
+            onChange={e => this.setState({ value: e.target.value })}
+            onFocus={() => this.setState({ focused: true })}
+            readOnly={readOnly}
+            value={value}
+          />
+          <FloatingLabel
+            classProps={{ isOpen }}
+            innerRef={this.labelEl}
+          >
+            <DSTextWrapper
+              maxWidth='20px'
+              text={label}
+              textEllipsis
+            />
+          </FloatingLabel>
+        </OutlineContent>
+      </Wrapper>
+    )
+  }
+}
+
+export default DSFloatingLabelInput
+
+```

package/dist/esm/classNameManager.js

@@ -0,0 +1,54 @@
+import * as React from "react";
+import { isEmpty } from "@elliemae/ds-utilities/utils";
+import { dimsumConfig } from "./dimsum.config";
+import { pipe as formPipe } from "./converPropsToFormModifiers";
+import { pipe as layoutModifiers } from "./convertPropsToLayoutModifiers";
+import { pipe as feedBackModifiers } from "./convertPropToFeedBackModifiers";
+import { pipe as sizeModifiers } from "./convertPropsToSizeModifiers";
+import { pipe as textModifiers } from "./convertPropsToTextModifiers";
+import { pipe as colorModifiers } from "./convertPropsToColorModifiers";
+const cssPrefix = `${dimsumConfig.classNamePrefix}-`;
+const executePipelines = (props) => {
+  const form = formPipe().execute(props);
+  const layout = layoutModifiers().execute(props);
+  const feedback = feedBackModifiers().execute(props);
+  const size = sizeModifiers().execute(props);
+  const text = textModifiers().execute(props);
+  const color = colorModifiers().execute(props);
+  return [...form, ...layout, ...feedback, ...size, ...text, ...color];
+};
+const cssPipeline = (blockName = "block", cssClassNameModifier = "", props = {}, options = {}) => {
+  const { prefix, element } = options;
+  const prefixBlockName = `${prefix || cssPrefix}${blockName}${element ? `__${element}` : ""}`;
+  const pipes = !isEmpty(props) ? executePipelines(props) : [];
+  const basePipeline = [prefixBlockName, ...pipes];
+  const className = cssClassNameModifier ? [...basePipeline].join(` ${prefixBlockName}--`).concat(` ${cssClassNameModifier}`) : [...basePipeline].join(` ${prefixBlockName}--`);
+  return {
+    blockName,
+    cssPrefix,
+    prefixBlockName,
+    cssClassName: className,
+    mainModifier(modifier) {
+      return `${className}--${modifier}`;
+    },
+    classNameBlock(elementName, usePrefix = true) {
+      return `${!usePrefix ? blockName : prefixBlockName}-${elementName}`;
+    },
+    classNameBlockModifier(modifierName, elementBlockName = "") {
+      return `${prefixBlockName}-${elementBlockName}--${modifierName}`;
+    },
+    classNameElement(elementName, elementBlockName = "") {
+      return `${prefixBlockName}${elementBlockName ? `-${elementBlockName}` : ""}__${elementName}`;
+    },
+    classNameModifier(modifierName, elementName = "") {
+      return `${prefixBlockName}${elementName ? `__${elementName}` : ""}--${modifierName}`;
+    }
+  };
+};
+var classNameManager_default = cssPipeline;
+export {
+  cssPipeline as convertPropToCssClassName,
+  cssPrefix,
+  classNameManager_default as default
+};
+//# sourceMappingURL=classNameManager.js.map

package/dist/esm/classNameManager.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/classNameManager.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-explicit-any */\n/* eslint-disable max-params */\nimport { isEmpty } from '@elliemae/ds-utilities/utils';\nimport { dimsumConfig } from './dimsum.config';\nimport { pipe as formPipe } from './converPropsToFormModifiers';\nimport { pipe as layoutModifiers } from './convertPropsToLayoutModifiers';\nimport { pipe as feedBackModifiers } from './convertPropToFeedBackModifiers';\nimport { pipe as sizeModifiers } from './convertPropsToSizeModifiers';\nimport { pipe as textModifiers } from './convertPropsToTextModifiers';\nimport { pipe as colorModifiers } from './convertPropsToColorModifiers';\n\nexport const cssPrefix = `${dimsumConfig.classNamePrefix}-`;\n\nconst executePipelines = (props) => {\n  const form = formPipe().execute(props);\n  const layout = layoutModifiers().execute(props);\n  const feedback = feedBackModifiers().execute(props);\n  const size = sizeModifiers().execute(props);\n  const text = textModifiers().execute(props);\n  const color = colorModifiers().execute(props);\n  return [...form, ...layout, ...feedback, ...size, ...text, ...color];\n};\n\n/**\n * Docs: http://getbem.com/naming/\n * blockName\n * cssClassNameModifier: Main modifier\n * props { hasError, hasWarning, hasSuccess, readOnly, disabled}\n *\n * @param blockName\n * @param cssClassNameModifier\n * @param props\n * @param options\n */\nconst cssPipeline: (\n  blockName?: string,\n  cssClassNameModifier?: string,\n  props?: { [key: string]: any },\n  options?: { [key: string]: any },\n) => {\n  blockName: string;\n  cssPrefix: string;\n  prefixBlockName: string;\n  cssClassName: string;\n  mainModifier(modifier: any): string;\n  classNameBlock(elementName: any, usePrefix?: boolean): string;\n  classNameBlockModifier(modifierName: any, elementBlockName?: string): string;\n  classNameElement(elementName: any, elementBlockName?: string): string;\n  classNameModifier(modifierName: any, elementName?: string): string;\n} = (blockName = 'block', cssClassNameModifier = '', props = {}, options = {}) => {\n  const { prefix, element } = options;\n\n  const prefixBlockName = `${prefix || cssPrefix}${blockName}${element ? `__${element}` : ''}`;\n\n  // PipeLine\n  const pipes = !isEmpty(props) ? executePipelines(props) : [];\n\n  const basePipeline = [prefixBlockName, ...pipes];\n\n  // specific classname\n  const className = cssClassNameModifier\n    ? [...basePipeline].join(` ${prefixBlockName}--`).concat(` ${cssClassNameModifier}`)\n    : [...basePipeline].join(` ${prefixBlockName}--`);\n\n  return {\n    blockName,\n    cssPrefix,\n    prefixBlockName,\n    cssClassName: className,\n    mainModifier(modifier) {\n      return `${className}--${modifier}`;\n    },\n    classNameBlock(elementName, usePrefix = true) {\n      return `${!usePrefix ? blockName : prefixBlockName}-${elementName}`;\n    },\n    classNameBlockModifier(modifierName, elementBlockName = '') {\n      return `${prefixBlockName}-${elementBlockName}--${modifierName}`;\n    },\n    classNameElement(elementName, elementBlockName = '') {\n      return `${prefixBlockName}${elementBlockName ? `-${elementBlockName}` : ''}__${elementName}`;\n    },\n    classNameModifier(modifierName, elementName = '') {\n      return `${prefixBlockName}${elementName ? `__${elementName}` : ''}--${modifierName}`;\n    },\n  };\n};\n\nexport { cssPipeline as convertPropToCssClassName };\nexport default cssPipeline;\n"],
+  "mappings": "AAAA;ACEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEO,MAAM,YAAY,GAAG,aAAa;AAEzC,MAAM,mBAAmB,CAAC,UAAU;AAClC,QAAM,OAAO,WAAW,QAAQ;AAChC,QAAM,SAAS,kBAAkB,QAAQ;AACzC,QAAM,WAAW,oBAAoB,QAAQ;AAC7C,QAAM,OAAO,gBAAgB,QAAQ;AACrC,QAAM,OAAO,gBAAgB,QAAQ;AACrC,QAAM,QAAQ,iBAAiB,QAAQ;AACvC,SAAO,CAAC,GAAG,MAAM,GAAG,QAAQ,GAAG,UAAU,GAAG,MAAM,GAAG,MAAM,GAAG;AAAA;AAchE,MAAM,cAeF,CAAC,YAAY,SAAS,uBAAuB,IAAI,QAAQ,IAAI,UAAU,OAAO;AAChF,QAAM,EAAE,QAAQ,YAAY;AAE5B,QAAM,kBAAkB,GAAG,UAAU,YAAY,YAAY,UAAU,KAAK,YAAY;AAGxF,QAAM,QAAQ,CAAC,QAAQ,SAAS,iBAAiB,SAAS;AAE1D,QAAM,eAAe,CAAC,iBAAiB,GAAG;AAG1C,QAAM,YAAY,uBACd,CAAC,GAAG,cAAc,KAAK,IAAI,qBAAqB,OAAO,IAAI,0BAC3D,CAAC,GAAG,cAAc,KAAK,IAAI;AAE/B,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA,cAAc;AAAA,IACd,aAAa,UAAU;AACrB,aAAO,GAAG,cAAc;AAAA;AAAA,IAE1B,eAAe,aAAa,YAAY,MAAM;AAC5C,aAAO,GAAG,CAAC,YAAY,YAAY,mBAAmB;AAAA;AAAA,IAExD,uBAAuB,cAAc,mBAAmB,IAAI;AAC1D,aAAO,GAAG,mBAAmB,qBAAqB;AAAA;AAAA,IAEpD,iBAAiB,aAAa,mBAAmB,IAAI;AACnD,aAAO,GAAG,kBAAkB,mBAAmB,IAAI,qBAAqB,OAAO;AAAA;AAAA,IAEjF,kBAAkB,cAAc,cAAc,IAAI;AAChD,aAAO,GAAG,kBAAkB,cAAc,KAAK,gBAAgB,OAAO;AAAA;AAAA;AAAA;AAM5E,IAAO,2BAAQ;",
+  "names": []
+}

package/dist/esm/converPropsToFormModifiers.js

@@ -0,0 +1,33 @@
+import * as React from "react";
+const basicAction = ({
+  readOnly = false,
+  disabled = false,
+  checked = false
+}) => {
+  const cssModifier = [];
+  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)], []);
+  }
+});
+var converPropsToFormModifiers_default = pipe;
+export {
+  converPropsToFormModifiers_default as default,
+  pipe
+};
+//# sourceMappingURL=converPropsToFormModifiers.js.map

package/dist/esm/converPropsToFormModifiers.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/converPropsToFormModifiers.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "const basicAction = ({\n  readOnly = false,\n  disabled = false,\n  checked = false,\n}) => {\n  const cssModifier = [];\n  // input state modifiers\n  if (checked) cssModifier.push('checked');\n  if (readOnly) cssModifier.push('readonly');\n  if (disabled) cssModifier.push('disabled');\n  return cssModifier;\n};\n\nconst instance = [basicAction];\nconst pipe = () => ({\n  getInstance() {\n    return instance;\n  },\n  add(customModifier) {\n    instance.push(customModifier);\n  },\n  execute(props) {\n    return instance.reduce((temp, action) => [...temp, ...action(props)], []);\n  },\n});\n\nexport { pipe };\nexport default pipe;\n"],
+  "mappings": "AAAA;ACAA,MAAM,cAAc,CAAC;AAAA,EACnB,WAAW;AAAA,EACX,WAAW;AAAA,EACX,UAAU;AAAA,MACN;AACJ,QAAM,cAAc;AAEpB,MAAI;AAAS,gBAAY,KAAK;AAC9B,MAAI;AAAU,gBAAY,KAAK;AAC/B,MAAI;AAAU,gBAAY,KAAK;AAC/B,SAAO;AAAA;AAGT,MAAM,WAAW,CAAC;AAClB,MAAM,OAAO,MAAO;AAAA,EAClB,cAAc;AACZ,WAAO;AAAA;AAAA,EAET,IAAI,gBAAgB;AAClB,aAAS,KAAK;AAAA;AAAA,EAEhB,QAAQ,OAAO;AACb,WAAO,SAAS,OAAO,CAAC,MAAM,WAAW,CAAC,GAAG,MAAM,GAAG,OAAO,SAAS;AAAA;AAAA;AAK1E,IAAO,qCAAQ;",
+  "names": []
+}

package/dist/esm/convertPropToFeedBackModifiers.js

@@ -0,0 +1,36 @@
+import * as React from "react";
+const basicAction = ({
+  hasError = false,
+  hasWarning = false,
+  hasSuccess = false,
+  modalType
+}) => {
+  const cssModifier = [];
+  if (hasError)
+    cssModifier.push("error");
+  else if (hasWarning)
+    cssModifier.push("warning");
+  else if (hasSuccess)
+    cssModifier.push("success");
+  if (modalType)
+    cssModifier.push(`modal-type-${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)], []);
+  }
+});
+var convertPropToFeedBackModifiers_default = pipe;
+export {
+  convertPropToFeedBackModifiers_default as default,
+  pipe
+};
+//# sourceMappingURL=convertPropToFeedBackModifiers.js.map

package/dist/esm/convertPropToFeedBackModifiers.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/convertPropToFeedBackModifiers.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "const basicAction = ({\n  hasError = false,\n  hasWarning = false,\n  hasSuccess = false,\n  modalType,\n}) => {\n  const cssModifier = [];\n  // valid state modifier\n  if (hasError) cssModifier.push('error');\n  else if (hasWarning) cssModifier.push('warning');\n  else if (hasSuccess) cssModifier.push('success');\n  if (modalType) cssModifier.push(`modal-type-${modalType}`);\n  return cssModifier;\n};\n\nconst instance = [basicAction];\nconst pipe = () => ({\n  getInstance() {\n    return instance;\n  },\n  add(customModifier) {\n    instance.push(customModifier);\n  },\n  execute(props) {\n    return instance.reduce((temp, action) => [...temp, ...action(props)], []);\n  },\n});\n\nexport { pipe };\nexport default pipe;\n"],
+  "mappings": "AAAA;ACAA,MAAM,cAAc,CAAC;AAAA,EACnB,WAAW;AAAA,EACX,aAAa;AAAA,EACb,aAAa;AAAA,EACb;AAAA,MACI;AACJ,QAAM,cAAc;AAEpB,MAAI;AAAU,gBAAY,KAAK;AAAA,WACtB;AAAY,gBAAY,KAAK;AAAA,WAC7B;AAAY,gBAAY,KAAK;AACtC,MAAI;AAAW,gBAAY,KAAK,cAAc;AAC9C,SAAO;AAAA;AAGT,MAAM,WAAW,CAAC;AAClB,MAAM,OAAO,MAAO;AAAA,EAClB,cAAc;AACZ,WAAO;AAAA;AAAA,EAET,IAAI,gBAAgB;AAClB,aAAS,KAAK;AAAA;AAAA,EAEhB,QAAQ,OAAO;AACb,WAAO,SAAS,OAAO,CAAC,MAAM,WAAW,CAAC,GAAG,MAAM,GAAG,OAAO,SAAS;AAAA;AAAA;AAK1E,IAAO,yCAAQ;",
+  "names": []
+}

package/dist/esm/convertPropsToColorModifiers.js

@@ -0,0 +1,29 @@
+import * as React from "react";
+const basicAction = ({ color = null }) => {
+  const cssModifier = [];
+  if (color && color[0]) {
+    if (color[1] !== null)
+      cssModifier.push(`color-${color[0]}-${color[1]}`);
+    else
+      cssModifier.push(`color-${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)], []);
+  }
+});
+var convertPropsToColorModifiers_default = pipe;
+export {
+  convertPropsToColorModifiers_default as default,
+  pipe
+};
+//# sourceMappingURL=convertPropsToColorModifiers.js.map

package/dist/esm/convertPropsToColorModifiers.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/convertPropsToColorModifiers.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "const basicAction = ({ color = null }) => {\n  const cssModifier = [];\n  if (color && color[0]) {\n    if (color[1] !== null) cssModifier.push(`color-${color[0]}-${color[1]}`);\n    else cssModifier.push(`color-${color[0]}`);\n  }\n  return cssModifier;\n};\n\nconst instance = [basicAction];\nconst pipe = () => ({\n  getInstance() {\n    return instance;\n  },\n  add(customModifier) {\n    instance.push(customModifier);\n  },\n  execute(props) {\n    return instance.reduce((temp, action) => [...temp, ...action(props)], []);\n  },\n});\n\nexport { pipe };\nexport default pipe;\n"],
+  "mappings": "AAAA;ACAA,MAAM,cAAc,CAAC,EAAE,QAAQ,WAAW;AACxC,QAAM,cAAc;AACpB,MAAI,SAAS,MAAM,IAAI;AACrB,QAAI,MAAM,OAAO;AAAM,kBAAY,KAAK,SAAS,MAAM,MAAM,MAAM;AAAA;AAC9D,kBAAY,KAAK,SAAS,MAAM;AAAA;AAEvC,SAAO;AAAA;AAGT,MAAM,WAAW,CAAC;AAClB,MAAM,OAAO,MAAO;AAAA,EAClB,cAAc;AACZ,WAAO;AAAA;AAAA,EAET,IAAI,gBAAgB;AAClB,aAAS,KAAK;AAAA;AAAA,EAEhB,QAAQ,OAAO;AACb,WAAO,SAAS,OAAO,CAAC,MAAM,WAAW,CAAC,GAAG,MAAM,GAAG,OAAO,SAAS;AAAA;AAAA;AAK1E,IAAO,uCAAQ;",
+  "names": []
+}

package/dist/esm/convertPropsToLayoutModifiers.js

@@ -0,0 +1,36 @@
+import * as React from "react";
+const basicAction = ({
+  id,
+  buttonType = "default",
+  fluidWidth = false,
+  fluidHeight = false
+}) => {
+  const cssModifier = [];
+  if (id)
+    cssModifier.push(`id-${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)], []);
+  }
+});
+var convertPropsToLayoutModifiers_default = pipe;
+export {
+  convertPropsToLayoutModifiers_default as default,
+  pipe
+};
+//# sourceMappingURL=convertPropsToLayoutModifiers.js.map

package/dist/esm/convertPropsToLayoutModifiers.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/convertPropsToLayoutModifiers.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "const basicAction = ({\n  id,\n  buttonType = 'default',\n  fluidWidth = false,\n  fluidHeight = false,\n}) => {\n  const cssModifier = [];\n  // buttons types\n  if (id) cssModifier.push(`id-${id}`);\n  if (buttonType) cssModifier.push(buttonType);\n  if (fluidWidth) cssModifier.push('fluid-width');\n  if (fluidHeight) cssModifier.push('fluid-height');\n\n  return cssModifier;\n};\n\nconst instance = [basicAction];\nconst pipe = () => ({\n  getInstance() {\n    return instance;\n  },\n  add(customModifier) {\n    instance.push(customModifier);\n  },\n  execute(props) {\n    return instance.reduce((temp, action) => [...temp, ...action(props)], []);\n  },\n});\n\nexport { pipe };\nexport default pipe;\n"],
+  "mappings": "AAAA;ACAA,MAAM,cAAc,CAAC;AAAA,EACnB;AAAA,EACA,aAAa;AAAA,EACb,aAAa;AAAA,EACb,cAAc;AAAA,MACV;AACJ,QAAM,cAAc;AAEpB,MAAI;AAAI,gBAAY,KAAK,MAAM;AAC/B,MAAI;AAAY,gBAAY,KAAK;AACjC,MAAI;AAAY,gBAAY,KAAK;AACjC,MAAI;AAAa,gBAAY,KAAK;AAElC,SAAO;AAAA;AAGT,MAAM,WAAW,CAAC;AAClB,MAAM,OAAO,MAAO;AAAA,EAClB,cAAc;AACZ,WAAO;AAAA;AAAA,EAET,IAAI,gBAAgB;AAClB,aAAS,KAAK;AAAA;AAAA,EAEhB,QAAQ,OAAO;AACb,WAAO,SAAS,OAAO,CAAC,MAAM,WAAW,CAAC,GAAG,MAAM,GAAG,OAAO,SAAS;AAAA;AAAA;AAK1E,IAAO,wCAAQ;",
+  "names": []
+}

package/dist/esm/convertPropsToSizeModifiers.js

@@ -0,0 +1,48 @@
+import * as React from "react";
+const basicAction = ({
+  size = null,
+  extraTight = false,
+  tight = false,
+  base = false,
+  bitLoose = false,
+  loose = false,
+  extraLoose = false,
+  superLoose = false
+}) => {
+  const cssModifier = [];
+  if (size)
+    cssModifier.push(`${size}`);
+  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)], []);
+  }
+});
+var convertPropsToSizeModifiers_default = pipe;
+export {
+  convertPropsToSizeModifiers_default as default,
+  pipe
+};
+//# sourceMappingURL=convertPropsToSizeModifiers.js.map

package/dist/esm/convertPropsToSizeModifiers.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/convertPropsToSizeModifiers.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "const basicAction = ({\n  size = null,\n  extraTight = false,\n  tight = false,\n  base = false,\n  bitLoose = false,\n  loose = false,\n  extraLoose = false,\n  superLoose = false,\n}) => {\n  const cssModifier = [];\n  if (size) cssModifier.push(`${size}`);\n  // Size as Flag\n  if (extraTight) cssModifier.push('size-extra-tight');\n  else if (tight) cssModifier.push('size-tight');\n  else if (base) cssModifier.push('size-base');\n  else if (bitLoose) cssModifier.push('size-bit-loose');\n  else if (loose) cssModifier.push('size-loose');\n  else if (extraLoose) cssModifier.push('size-extra-loose');\n  else if (superLoose) cssModifier.push('size-super-loose');\n  return cssModifier;\n};\n\nconst instance = [basicAction];\nconst pipe = () => ({\n  getInstance() {\n    return instance;\n  },\n  add(customModifier) {\n    instance.push(customModifier);\n  },\n  execute(props) {\n    return instance.reduce((temp, action) => [...temp, ...action(props)], []);\n  },\n});\n\nexport { pipe };\nexport default pipe;\n"],
+  "mappings": "AAAA;ACAA,MAAM,cAAc,CAAC;AAAA,EACnB,OAAO;AAAA,EACP,aAAa;AAAA,EACb,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,WAAW;AAAA,EACX,QAAQ;AAAA,EACR,aAAa;AAAA,EACb,aAAa;AAAA,MACT;AACJ,QAAM,cAAc;AACpB,MAAI;AAAM,gBAAY,KAAK,GAAG;AAE9B,MAAI;AAAY,gBAAY,KAAK;AAAA,WACxB;AAAO,gBAAY,KAAK;AAAA,WACxB;AAAM,gBAAY,KAAK;AAAA,WACvB;AAAU,gBAAY,KAAK;AAAA,WAC3B;AAAO,gBAAY,KAAK;AAAA,WACxB;AAAY,gBAAY,KAAK;AAAA,WAC7B;AAAY,gBAAY,KAAK;AACtC,SAAO;AAAA;AAGT,MAAM,WAAW,CAAC;AAClB,MAAM,OAAO,MAAO;AAAA,EAClB,cAAc;AACZ,WAAO;AAAA;AAAA,EAET,IAAI,gBAAgB;AAClB,aAAS,KAAK;AAAA;AAAA,EAEhB,QAAQ,OAAO;AACb,WAAO,SAAS,OAAO,CAAC,MAAM,WAAW,CAAC,GAAG,MAAM,GAAG,OAAO,SAAS;AAAA;AAAA;AAK1E,IAAO,sCAAQ;",
+  "names": []
+}

package/dist/esm/convertPropsToTextModifiers.js

@@ -0,0 +1,29 @@
+import * as React from "react";
+const basicAction = ({ textEllipsis, textAlignment, wordBreak }) => {
+  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-${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)], []);
+  }
+});
+var convertPropsToTextModifiers_default = pipe;
+export {
+  convertPropsToTextModifiers_default as default,
+  pipe
+};
+//# sourceMappingURL=convertPropsToTextModifiers.js.map