@ulu/frontend 0.0.5 → 0.0.7

package/CHANGELOG.md

@@ -0,0 +1,19 @@
+# Change Log
+
+## Version 0.0.6
+
+### SCSS
+
+- Added utils.map-merge($map, $changes, $mode)
+  - This will allow expansion if needed and is simpler for modules to implement
+  - This is to replace utils.map-merge-or-overwrite which is deprecated now
+- Removed IE "*zoom" clearfix property as we don't support it and it causes errors in CSS minifiers since it's not standard CSS
+
+### JS
+
+- Add js docs
+- Add specific exports for JS (ie. package "exports")
+- All utils are moved to new independent module @ulu/utils and are implemented as submodules
+  - Since these can be used outside of frontend workflow
+  - Update imports to point to new module
+- Move old waypoints code to deprecated, no longer needed with intersectionObserver

package/README.md

@@ -2,7 +2,7 @@
 
 Front end development library (SCSS, JS, Vue)
 
-[Full Documentation](https://jscherbe.github.io/frontend/)
+[Documentation](https://jscherbe.github.io/frontend/)
 
 ## SCSS Library
 

package/js/deprecated/mini-collapsible.js

@@ -75,7 +75,7 @@
 //                    - Add arrow key cycler from framework collapsible module
 
 import maintain from 'ally.js/maintain/_maintain';
-import { hasRequiredProps } from "../utils/object.js";
+import { hasRequiredProps } from "@ulu/utils/object.js";
 
 const requiredProps = ['selectorContainer', 'selectorToggle', 'selectorContent'];
 const hasRequired = hasRequiredProps(requiredProps);

package/js/events/index.js

@@ -1,4 +1,7 @@
-import { debounce } from "../utils/performance";
+/**
+ * @module events
+ */
+import { debounce } from "@ulu/utils/performance";
 
 /**
  * Event object - called on dispatch

package/js/helpers/css-breakpoint.js

@@ -1,25 +1,21 @@
-// =============================================================================
-// Grabs Breakpoint from CSS
-// =============================================================================
-
-// Version:         1.0.6
-
-// Description:     Pass breakpoints from CSS to stylesheet, use this to attach 
-//                  behaviors on breakpoints
+/**
+ * @module helpers/css-breakpoint
+ */
 
-import { debounce } from "../utils/performance";
+// Pass breakpoints from CSS to stylesheet, use this to attach behaviors on breakpoints
+import { debounce } from "@ulu/utils/performance";
+import { removeArrayElement } from "@ulu/utils/array";
 import { getName } from "../events/index.js";
-import { removeArrayElement } from "../utils/array";
 import { log, logError } from "../utils/logger.js";
 
-/**
- * Resize Handler to update breakpoints for all instances (Called after resize finished)
- */
+
+// Resize Handler to update breakpoints for all instances (Called after resize finished)
 window.addEventListener(getName("pageResized"), () => {
   CssBreakpoints.instances.forEach(i => i.update());
 });
 
 /**
+ * @class
  * Class that provides method for retrieving and acting on breakpoints passed
  * from CSS (using element psuedo content prop)
  */
@@ -114,6 +110,7 @@ export class CssBreakpoints {
   }
 }
 /**
+ * @class
  * Used to handle a breakpoints direction's handler and state
  */
 class BreakpointDirection {
@@ -182,6 +179,7 @@ class BreakpointDirection {
   }
 }
 /**
+ * @class
  * Single breakpoint management
  */
 class Breakpoint {

package/js/helpers/file-save.js

@@ -1,3 +1,7 @@
+/**
+ * @module helpers/file-save
+ */
+
 // Description:     Simple script that is useful for testing. It will:
 //                  - Make a file 
 //                  - Create a URL to it

package/js/helpers/node-data-manager.js

@@ -1,3 +1,7 @@
+/**
+ * @module helpers/node-data-manager
+ */
+
 /**
  * Class that provides a method to store data based on node/element
  */

package/js/helpers/pause-youtube-video.js

@@ -1,3 +1,7 @@
+/**
+ * @module helpers/pause-youtube-video
+ */
+
 // Version:         1.0.4
 // Description:     Pauses youtube using js api (iframe post message)
 

package/js/helpers/scrollbar-width-property.js

@@ -1,10 +1,14 @@
+/**
+ * @module helpers/scrollbar-width-property
+ */
 
 /**
  * Sets a CSS custom property equal to the scrollbar width
  * @param {Node} element The element that is the child of a scrollabel container
  * @param {Node} container The container that can be scrolled
+ * @param {Stirng} propName Custom property to set
  */
-export default function addScrollbarProperty(element = document.body, container = window) {
+export default function addScrollbarProperty(element = document.body, container = window, propName = "--scrollbar-width") {
   const scrollbarWidth = container.innerWidth - element.clientWidth;
-  element.style.setProperty("--scrollbar-width", `${ scrollbarWidth }px`);
+  element.style.setProperty(propName, `${ scrollbarWidth }px`);
 }

package/js/index.js

@@ -8,8 +8,6 @@
 // - Will not include things that aren't used in every site (those would need to 
 //   imported manually
 
-import "./polyfills/element-closest.js";
-
 export { CssBreakpoints } from "./helpers/css-breakpoint.js";
 export * as events from "./events/index.js";
 export * as grid from "./ui/grid.js";

package/js/ui/flipcard.js

@@ -1,3 +1,7 @@
+/**
+ * @module ui/flipcard
+ */
+
 // =============================================================================
 // Flipcard
 // =============================================================================
@@ -6,8 +10,8 @@
 
 // Changes                    1.0.1 | Added allow selection
 
+import { trimWhitespace } from "@ulu/utils/string.js";
 import { log, logError } from "../utils/logger.js";
-import { trimWhitespace } from "../utils/string.js";
 const debugMode = false; // Global dev debug
 
 export class Flipcard {

package/js/ui/grid.js

@@ -1,3 +1,7 @@
+/**
+ * @module ui/grid
+ */
+
 import { getName } from "../events/index.js";
 
 /**

package/js/ui/modals.js

@@ -1,3 +1,6 @@
+/**
+ * @module ui/modals
+ */
 // Version:         1.0.4
 // Changes:
 //                  1.0.4 | The modal library has a bug with multiple modals and using a custom close handler
@@ -14,7 +17,7 @@
 // interface in the future we don't need to change/update markup.
 import MicroModal from 'micromodal';
 import Resizer from './resizer.js';
-import { createElementFromHtml } from '../utils/dom.js';
+import { createElementFromHtml } from '@ulu/utils/dom.js';
 import { pauseVideos, prepVideos } from '../helpers/pause-youtube-video.js';
 const classes = {
   open: 'site-modal--open',

package/js/ui/overflow-scroller-pager.js

@@ -1,3 +1,6 @@
+/**
+ * @module ui/overflow-scroller-pager
+ */
 /**
  * Function to be used in overflow scrollers "amount" option. This function will
  * determine how many items can fit in the viewport, taking into account scroll padding left, 

package/js/ui/overflow-scroller.js

@@ -1,3 +1,6 @@
+/**
+ * @module ui/overflow-scroller
+ */
 /**
  * @todo - Need to have scroll handler check scroll position
  * @todo - Determine if controls should be visible
@@ -7,8 +10,8 @@
  * @todo - Document that user could use something like [https://github.com/LachlanArthur/scroll-snap-api/tree/master/src] to have it go between items
  * 
  */
+import { hasRequiredProps } from '@ulu/utils/object.js';
 import { logError } from "../utils/logger.js";
-import { hasRequiredProps } from '../utils/object.js';
 const requiredElements = [
   "track", 
   "controls"

package/js/ui/programmatic-modal.js

@@ -1,3 +1,6 @@
+/**
+ * @module ui/programmatic-modal
+ */
 // =============================================================================
 // Grabs Breakpoint from CSS
 // =============================================================================

package/js/ui/resizer.js

@@ -1,3 +1,6 @@
+/**
+ * @module ui/resizer
+ */
 // =============================================================================
 // Element Resizer
 // =============================================================================

package/js/ui/slider.js

@@ -1,3 +1,6 @@
+/**
+ * @module ui/slider
+ */
 // =============================================================================
 // Slider
 // =============================================================================
@@ -25,10 +28,10 @@
 //                              * Will Change use
 
 import maintain from 'ally.js/maintain/_maintain';
-import { log, logError, logWarning } from "../utils/logger.js";
-import { hasRequiredProps } from '../utils/object.js';
-import { trimWhitespace } from "../utils/string.js";
-import { debounce } from "../utils/performance.js";
+import { log, logError, logWarning } from "@ulu/utils/logger.js";
+import { hasRequiredProps } from '@ulu/utils/object.js';
+import { trimWhitespace } from "@ulu/utils/string.js";
+import { debounce } from "@ulu/utils/performance.js";
 const debugMode = false; // Global dev debug
 const reduceMotion = matchMedia('(prefers-reduced-motion: reduce)').matches;
 const eventOnce = { once: true };

package/js/ui/tabs.js

@@ -1,3 +1,6 @@
+/**
+ * @module ui/tabs
+ */
 // =============================================================================
 // Tabs
 // =============================================================================

package/js/ui/tooltip.js

@@ -1,3 +1,6 @@
+/**
+ * @module ui/tooltip
+ */
 // =============================================================================
 // Tooltip
 // =============================================================================

package/js/utils/logger.js

@@ -1,3 +1,6 @@
+/**
+ * @module utils/logger
+ */
 // Goal: minimzing console conditions for nessasary production log statements
 
 /**

package/package.json

@@ -1,15 +1,21 @@
 {
   "name": "@ulu/frontend",
-  "version": "0.0.5",
-  "description": "Sass theming library",
+  "version": "0.0.7",
+  "description": "Theming library",
   "browser": "js/index.js",
   "main": "index.js",
+  "exports": {
+    ".": "./index.js",
+    "./js/*.js": "./js/*.js"
+  },
   "type": "module",
   "scripts": {
     "docs:dev": "vitepress dev docs-src",
     "docs:build": "vitepress build docs-src",
-    "docs:output": "node ./docs-src/.vitepress/sassdoc.js",
-    "docs:output:debug": "node --inspect-brk ./docs-src/.vitepress/sassdoc.js"
+    "docs:preview": "vitepress preview docs-src",
+    "docs:update:scss": "node ./docs-src/.vitepress/sassdoc.js",
+    "docs:update:scss:debug": "node --inspect-brk ./docs-src/.vitepress/sassdoc.js",
+    "docs:build:js": "node ./docs-src/.vitepress/jsdoc.js"
   },
   "repository": {
     "type": "git",
@@ -31,8 +37,13 @@
   },
   "homepage": "https://github.com/Jscherbe/frontend#readme",
   "devDependencies": {
+    "@ulu/utils": "^0.0.4",
     "@ulu/vitepress-auto-menus": "^0.0.3",
     "@ulu/vitepress-sassdoc": "^0.0.6",
+    "clean-jsdoc-theme": "^4.2.17",
+    "fs-extra": "^11.2.0",
+    "jsdoc": "^4.0.2",
+    "jsdoc-to-markdown": "^8.0.0",
     "sass": "^1.51.0",
     "vitepress": "^1.0.0-rc.27"
   }

package/scss/_breakpoint.scss

@@ -59,11 +59,10 @@ $sizes: (
 ///     "jumbo" : 100em
 ///   ));
 /// @param {Map} $changes A map to merge into the breakpoints map
-/// @param {Map} $deep [false] Deep map merge (doesn't apply here)
-/// @param {Map} $overwrite [false] Overwrite the sizes, instead of merging changes
+/// @param {Map} $merge-mode [null] Merge stradegy see, utils.map-merge options
 
-@mixin set-sizes($changes, $deep: false, $overwrite: false) {
-  $sizes: utils.map-merge-or-overwrite($sizes, $changes, $deep, $overwrite) !global;
+@mixin set-sizes($changes, $merge-mode: null) {
+  $sizes: utils.map-merge($sizes, $changes, $merge-mode) !global;
 }
 
 /// Get all breakpoint sizes (ie. $sizes) 

package/scss/_button.scss

@@ -113,11 +113,11 @@ $styles: (
   @return utils.function-fallback($name, $value, $-fallbacks);
 }
 
-@mixin set-styles($changes, $deep: false, $overwrite: false) {
-  $styles: utils.map-merge-or-overwrite($styles, $changes, $deep, $overwrite) !global;
+@mixin set-styles($changes, $merge-mode: null) {
+  $styles: utils.map-merge($styles, $changes, $merge-mode) !global;
 }
-@mixin set-sizes($changes, $deep: false, $overwrite: false) {
-  $sizes: utils.map-merge-or-overwrite($sizes, $changes, $deep, $overwrite) !global;
+@mixin set-sizes($changes, $merge-mode: null) {
+  $sizes: utils.map-merge($sizes, $changes, $merge-mode) !global;
 }
 
 @mixin reset() {

package/scss/_color.scss

@@ -115,8 +115,8 @@ $color-classes: (
 ///     )
 ///   ), false, true);
 
-@mixin set-contexts($changes, $deep: false, $overwrite: false) {
-  $contexts: utils.map-merge-or-overwrite($contexts, $changes, $deep, $overwrite) !global;
+@mixin set-contexts($changes, $merge-mode: null) {
+  $contexts: utils.map-merge($contexts, $changes, $merge-mode) !global;
 }
 
 /// Get a context by name

package/scss/_layout.scss

@@ -51,8 +51,8 @@ $containers: (
   )
 ) !default;
 
-@mixin set-containers($changes, $deep: false, $overwrite: false) {
-  $containers: utils.map-merge-or-overwrite($containers, $changes, $deep, $overwrite) !global;
+@mixin set-containers($changes, $merge-mode: null) {
+  $containers: utils.map-merge($containers, $changes, $merge-mode) !global;
 }
 
 @function get-container($name, $breakpoint: false) {
@@ -189,7 +189,6 @@ $containers: (
   &:after { 
     clear: both; 
   }
-  *zoom: 1;
 }
 
 /// Removes scrollbar with CSS

package/scss/_typography.scss

@@ -176,8 +176,8 @@ $sizes: (
 ///     "small" : 0.8rem
 ///   ));
 
-@mixin set-sizes($changes, $deep: false, $overwrite: false) {
-  $sizes: utils.map-merge-or-overwrite($sizes, $changes, $deep, $overwrite) !global;
+@mixin set-sizes($changes, $merge-mode: null) {
+  $sizes: utils.map-merge($sizes, $changes, $merge-mode) !global;
 }
 
 /// Get a size's map

package/scss/_utils.scss

@@ -132,16 +132,33 @@ $config: (
   }
 }
 
+/// Reusable merge method 
+/// @param {Map} $original Source map 
+/// @param {Map} $changes Changes to merge into source map
+/// @param {String} $mode How to merge changes (merge [defualt], deep, or overwrite)
+/// @return {Map} New map with changes
+
+@function map-merge($original, $changes, $mode: null) {
+  @if ($mode == "deep") {
+    @return map.deep-merge($original, $changes);
+  } @else if ($mode == "overwrite") {
+    @return $changes;
+  } @else {
+    @return map.merge($original, $changes);
+  }
+}
+
 /// Repeatable pattern in core
+/// @deprecated Left in for compatability, will be removed, use map-merge with mode
 
 @function map-merge-or-overwrite($original, $changes, $deep: false, $overwrite: false) {
+  $mode: null;
   @if $deep {
-    @return map.deep-merge($original, $changes);
+    $mode: "deep";
   } @else if $overwrite {
-    @return $changes;
-  } @else {
-    @return map.merge($original, $changes);
+    $mode: "overwrite";
   }
+  @return map-merge($original, $changes, $mode);
 }
 
 /// Utility for providing fallbacks, the first truthy value (non false or null) will be returned

package/scss/base/_normalize.scss

@@ -6,7 +6,7 @@
 @use "../button";
 
 
-/// Prints the normalize stylesheet. We are using modern-normalize 1.1.0
+/// Prints the normalize stylesheet. Originally based on modern-normalize 1.1.0
 /// @link https://www.npmjs.com/package/modern-normalize Modern Normalize (NPM)
 /// @example scss
 ///  @include ulu.base-normalize-styles();

package/scss/helpers/_units.scss

@@ -60,11 +60,12 @@ $config: (
     #{ $prefix }-#{ $side } {
       #{ $full-prop }: units.get(1);
     }
-    @if ($isMargin) {
-      #{ $prefix }-#{ $side }-auto {
-        #{ $full-prop }: auto;
-      }
-    }
+    // Duplicates utilities, unnessasary
+    // @if ($isMargin) {
+    //   #{ $prefix }-#{ $side }-auto {
+    //     #{ $full-prop }: auto;
+    //   }
+    // }
     @each $name, $value in units.$config {
       #{ $prefix }-#{ $side }-#{ $name } {
         #{ $full-prop }: units.get($name);

package/js/polyfills/element-closest.js

@@ -1,17 +0,0 @@
-if (!Element.prototype.matches) {
-  Element.prototype.matches =
-    Element.prototype.msMatchesSelector ||
-    Element.prototype.webkitMatchesSelector;
-}
-
-if (!Element.prototype.closest) {
-  Element.prototype.closest = function(s) {
-    var el = this;
-
-    do {
-      if (Element.prototype.matches.call(el, s)) return el;
-      el = el.parentElement || el.parentNode;
-    } while (el !== null && el.nodeType === 1);
-    return null;
-  };
-}

package/js/utils/array.js

@@ -1,28 +0,0 @@
-/**
- * Removes an array element (modifies array)
- * @param {Array} array Array to remove element from
- * @param {Element} element Array element to remove
- */
-export function removeArrayElement(array, element) {
-  var index = array.indexOf(element);
-  if (index > -1) {
-    array.splice(index, 1);
-  }
-}
-
-/**
- * Searches array for first item matching test, beginning at a start index but searching the entire array
- * @param {Array} array Array to search
- * @param {Number} start The index in the array to start the search from
- * @param {Function} callback A test function that is passed array item and index
- * - Credit: (James Waddington) https://stackoverflow.com/questions/28430348/how-to-loop-through-arrays-starting-at-different-index-while-still-looping-throu
- */
-export function offsetFindIndexOf(array, start = 0, callback) {
-  let found, offset;
-  for (var i = 0; i < array.length; i++) {
-    offset = (i + start) % array.length;
-    found = callback(array[offset], offset);
-    if (found) return offset;
-  }
-  return -1;
-}

package/js/utils/dom.js

@@ -1,122 +0,0 @@
-/**
- *   Returns an array of direct descendants
- *   @param  {Node}   element
- *   @param  {String} selector
- *   @return {Array}
- */
-export function getDirectDescandants(element, selector) {
-  return [...element.children].filter(child => child.matches(selector));
-};
-
-/**
- *   Checks if element is overflown vertically
- *   @param  {Node}  element
- *   @return {Boolean}
- */
-export function isOverflownY(element) {
-  return element.scrollHeight > element.clientHeight;
-}
-
-/**
- *   Checks if element is overflown both vertically and horizontally
- *   @param  {Node}  element
- *   @return {Boolean}
- */
-export function isOverflown(element) {
-  return element.scrollHeight > element.clientHeight || element.scrollWidth > element.clientWidth;
-}
-
-/**
- * For a given element return the first parent that has scrollable overflow
- * - Helpful for debugging position sticky
- * @param {Node} node Node to start search for first scrollable parent
- * @returns {Node}
- * @example
- *   const $navcontent = document.querySelector('.nav__content');
- *   if ($navcontent) {
- *     console.log(getScrollParent($navcontent));
- *   }
- */
-export function getScrollParent(node) {
-  if (node == null) {
-    return null;
-  }
-  if (node.scrollHeight > node.clientHeight) {
-    return node;
-  } else {
-    return getScrollParent(node.parentNode);
-  }
-}
-
-/**
- *   Returns reliable document height
- *   @return {number}
- */
-export function documentHeight() {
-  return Math.max(
-    document.body.scrollHeight, document.documentElement.scrollHeight,
-    document.body.offsetHeight, document.documentElement.offsetHeight,
-    document.body.clientHeight, document.documentElement.clientHeight
-  );
-}
-
-/**
- *   Returns reliable window height
- *   @return {number}
- */
- export function windowHeight() {
-  return Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
-}
-
-/**
- *   Returns reliable window width
- *   @return {number}
- */
- export function windowWidth() {
-  return Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
-}
-
-/**
- *   Check browser support for position: sticky
- *   - https://stackoverflow.com/questions/60214332/dynamically-detect-if-positionsticky-is-supported-by-the-browser
- *   @return {Boolean}
- */
- export function browserWithPositionSticky() {
-  var prop = 'position:';
-  var value = 'sticky';
-  var prefixes = ' -webkit- -moz- -o- -ms- '.split(' ');
-
-  var el = document.createElement('a');
-  var mStyle = el.style;
-  mStyle.cssText = prop + prefixes.join(value + ';' + prop).slice(0, - prop.length);
-  
-  return mStyle.position.indexOf(value) !== -1;
-}
-
-/**
- * Returns Node List from HTML markup string
- * @param {String} markup HTML markup to create into an element
- */
- export function createElementFromHtml(markup) {
-  const doc = new DOMParser().parseFromString(markup, 'text/html');
-  return doc.body.firstElementChild;
-}
-
-/**
- * Creates a new element with attributes and children
- * @param {Object} config Configuration object
- * @param {String} config.tag Node type (ie 'div')
- * @param {Object} config.attributes Attributes to add to the new element
- * @param {Array} config.children Array of children to append into the new element
- */
- export function composeElement(config) { // tag, attributes = {}, children
-  const { tag, attributes, children } = config;
-  const element = document.createElement(tag);
-  if (attributes) {
-    Object.entries(attributes).forEach((a, v) => element.setAttribute(a, v));
-  }
-  if (children) {
-    children.forEach(c => element.appendChild(c));
-  }
-  return element;
-}

package/js/utils/object.js

@@ -1,22 +0,0 @@
-// Version:         1.0.0 
-
-/**
- *   Checks object has required properties
- *   @param  {array.string}  required     Array of properties to check for
- *   @return {function}                   Function for user to use to test for props passed on objects
- *   @example 
- *     const testProps = hasRequiredProps(["name", "date"]);
- *     if (testProps(userConfiguration)) {
- *       // Stuff
- *     }
- */
-export function hasRequiredProps(required) {
-  /**
-   *   Function used for testing on user end
-   *   @param  {object}   testObject   Object to test on
-   *   @return {Boolean}
-   */
-  return function(object) {
-    return required.every(value => object.hasOwnProperty(value));
-  }
-}

package/js/utils/performance.js

@@ -1,43 +0,0 @@
-// Version:         1.0.0 
-
-/**
- * Returns a function, that, as long as it continues to be invoked, will not be triggered
- * @param {Function} callback Function to invoke 
- * @param {Number} wait  Amount of time after (milliseconds)
- * @param {Boolean} immediate  trigger the function on the leading edge, instead of the trailing.
- * @param {Object} valueThis  Context for function
- * @author David Walsh  
- *   - https://davidwalsh.name/javascript-debounce-function
- */
- export function debounce(callback, wait, immediate, valueThis) {
-  var timeout;
-  return function executedFunction() {
-    var context = valueThis || this;
-    var args = arguments;
-    var later = function() {
-      timeout = null;
-      if (!immediate) callback.apply(context, args);
-    };
-    var callNow = immediate && !timeout;
-    clearTimeout(timeout);
-    timeout = setTimeout(later, wait);
-    if (callNow) callback.apply(context, args);
-  };
-}
-
-/**
- * Debounces function using requestAnimationFrame()
- * @param  {Function} callback Function to invoke, cancelled if called faster than RAF
- * @param  {Object} context Optional context to bind to callback
- */
- export function debounceAnimationFrame(callback, context = null) {
-  let tid;
-  return function debounced() {
-    const args = arguments;
-    if (tid) window.cancelAnimationFrame(tid);
-    tid = window.requestAnimationFrame(() => {
-      tid = false;
-      callback.apply(context, args);
-    });
-  };
-}

package/js/utils/regex.js

@@ -1,10 +0,0 @@
-// Version:         1.0.0 
-
-/**
- * Common Regular Expression Patterns
- */
-export const patterns = {
-  linebreaks: /(\r\n|\n|\r)/gm,
-  multiSpace: /\s+/g,
-  htmlTag: /<\/?[^>]+(>|$)/g
-};

package/js/utils/string.js

@@ -1,107 +0,0 @@
-import { patterns } from "./regex.js";
-/**
- *   Will return an object with the separation details
- *   @param  {[type]} string [description]
- *   @return {object}        keys: value, original, unit
- */
- export function separateCssUnit(original) {
-  const pattern = /(px|vw|vh|%|em|rem)/i;
-  return {
-    original,
-    value:  original.replace(pattern, ""),
-    unit:   original.match(pattern)[0]
-  };
-}
-
-/**
- * Removes HTML tags from string
- * - Note you can use document.createElement and grab textContent (but this could execute code in browser)
- * - The method below will just use regex without creating Nodes
- * @param {String} html HTML string to find/replace
- */
- export function stripTags(html) {
-  return html.replace(patterns.htmlTag, "");
-}
-
-/**
- * 
- * @param {String} string String to trim
- * @returns 
- */
- export function trimDoubleSpaces(string) {
-  return string.replace(patterns.multiSpace, "");
-}
-
-/**
- * Remove line breaks
- * @param {String} string String to trim
- * @returns {String}
- */
- export function trimLineBreaks(string) {
-  return string.replace(patterns.linebreaks, "");
-}
-
-/**
- * Designed originally to flatten style definitions
- * @param {String} string String to trim
- * @returns {String}
- */
- export function trimWhitespace(string) {
-  return string.replace(patterns.linebreaks, "")
-               .replace(patterns.multiSpace, " ")
-               .trim();
-}
-
-/**
- *   Truncates string with ellipsis if over the max, note use framework function
- *   if you need to know the effects of the truncate process (returns an object 
- *   with info instead) this function only modifies the string
- *   @param  {string} string    String to possibly truncate
- *   @param  {number} max       How many characters max?
- *   @return {string}     
- */
- export function truncate(string, max, overflowChar = '…') {
-  return string.length <= max ? string : string.slice(0, max) + overflowChar;
-}
-
-/**
- * Replaces non safe characters with "-"
- * - Does not escape characters
- * - Used for id's and classnames or things that can't  have anything but normal a-z 0-9
- */
- export function urlize(string) {
-  var newString;
-  string = string.replace(/^[^-_a-zA-Z]+/, '').replace(/^-(?:[-0-9]+)/, '-');
-  newString = string && string.replace(/[^-_a-zA-Z0-9]+/g, '-');
-  return newString;
-}
-
-/**
- * Converts date to abbreviated month date ie "Mar 7, 2018"
- * @param {String|Date} str Date or date string (passed through date constructor)
- * @return {String} Pretty date string
- */
- export function prettyDate(str) {
-  const date = new Date(str);
-  const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
-  return `${ months[date.getMonth()] } ${ date.getDate() }, ${ date.getFullYear() }`;
-}
-
-/**
- * Generates a random string of defined length based on
- * a string of allowed characters.
- *
- * @param  {number} length  How many random characters will be in the returned string. Defaults to 10
- * @param  {string} allowed Which characters can be used when creating the random string. Defaults to A-Z,a-z,0-9
- * @return {string}         A string of random characters
- */
- export function randomString(
-  length = 10,
-  allowed = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'
-) {
-  let result = '';
-  for (let i = 0; i < length; i++) {
-    result += allowed.charAt(Math.floor(Math.random() * allowed.length));
-  }
-  return result;
-}