@ulu/frontend 0.0.3 → 0.0.6

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,9 @@
 
 Front end development library (SCSS, JS, Vue)
 
-[Full Documentation](https://jscherbe.github.io/frontend/)
+[SCSS Documentation](https://jscherbe.github.io/frontend/scss/)
+
+[JS Documentation](https://jscherbe.github.io/frontend/js/)
 
 ## 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,15 +1,13 @@
-// =============================================================================
-// Grabs Breakpoint from CSS
-// =============================================================================
-
-// Version:         1.0.6
+/**
+ * @module css-breakpoint
+ */
 
 // Description:     Pass breakpoints from CSS to stylesheet, use this to attach 
 //                  behaviors on breakpoints
 
-import { debounce } from "../utils/performance";
+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";
 
 /**

package/js/helpers/file-save.js

@@ -1,3 +1,7 @@
+/**
+ * @module 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 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 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 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 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 grid
+ */
+
 import { getName } from "../events/index.js";
 
 /**

package/js/ui/modals.js

@@ -1,3 +1,6 @@
+/**
+ * @module 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 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 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 programmatic-modal
+ */
 // =============================================================================
 // Grabs Breakpoint from CSS
 // =============================================================================

package/js/ui/resizer.js

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

package/js/ui/slider.js

@@ -1,3 +1,6 @@
+/**
+ * @module 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 tabs
+ */
 // =============================================================================
 // Tabs
 // =============================================================================

package/js/ui/tooltip.js

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

package/js/utils/logger.js

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

package/package.json

@@ -1,12 +1,21 @@
 {
   "name": "@ulu/frontend",
-  "version": "0.0.3",
-  "description": "Sass theming library",
+  "version": "0.0.6",
+  "description": "Theming library",
   "browser": "js/index.js",
+  "main": "index.js",
+  "exports": {
+    ".": "./index.js",
+    "./js/*.js": "./js/*.js"
+  },
+  "type": "module",
   "scripts": {
-    "docs:dev": "export NODE_OPTIONS=--openssl-legacy-provider && vuepress dev docs-src --no-clear-screen",
-    "docs:dev:debug": "export NODE_OPTIONS=--openssl-legacy-provider && vuepress dev docs-src --no-clear-screen --debug",
-    "docs:build": "export NODE_OPTIONS=--openssl-legacy-provider && vuepress build docs-src"
+    "docs:dev": "vitepress dev docs-src",
+    "docs:build": "vitepress build docs-src",
+    "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_modules/.bin/jsdoc -c jsdoc.json"
   },
   "repository": {
     "type": "git",
@@ -19,7 +28,7 @@
     "mixin"
   ],
   "authors": {
-    "name": "Joe Scherben, Informatics",
+    "name": "Joe Scherben, Informatics Studio",
     "email": "jscherbe@gmail.com"
   },
   "license": "MIT",
@@ -28,11 +37,11 @@
   },
   "homepage": "https://github.com/Jscherbe/frontend#readme",
   "devDependencies": {
-    "@ulu/vuepress-plugin-auto-nav": "^1.0.0",
-    "@ulu/vuepress-plugin-sassdoc": "^1.0.1",
-    "documentation": "^13.2.5",
-    "documentation-theme-light": "^1.1.1",
+    "@ulu/vitepress-auto-menus": "^0.0.3",
+    "@ulu/vitepress-sassdoc": "^0.0.6",
+    "clean-jsdoc-theme": "^4.2.17",
+    "jsdoc": "^4.0.2",
     "sass": "^1.51.0",
-    "vuepress": "^1.9.7"
+    "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/_grid.scss

@@ -4,7 +4,6 @@
 /// Layout grid that uses attributes instead of classes
 /// - See the core layout module for changing defaults
 
-/// @version: 1.0.7
 
 /// HTML Attribute to use for selecting
 /// @example markup

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

@@ -1,7 +1,6 @@
 ////
 /// @group typography
 /// @todo Idea: Should the maps value be processes when using the set-sizes, set? Instead of recalculated each time get-size is or get is used.
-//// @version 1.0.2
 ////
 
 @use "sass:map";
@@ -177,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

@@ -7,7 +7,7 @@
 @use "../utils";
 @use "../selector";
 
-
+ 
 /// Module Settings
 /// @type Map
 /// @prop {Number} $config.sides Sides to print for helper classes (ie. reduce output of uneeded sides)
@@ -48,11 +48,6 @@ $config: (
   #{ $prefix } {
     #{ $property } : units.get(1);
   }
-  @if ($isMargin) {
-    #{ $prefix }-auto {
-      margin: auto;
-    }
-  }
   
   @each $name, $value in units.$config {
     #{ $prefix }-#{ $name } {
@@ -65,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/scss/stylesheets/full.scss

@@ -1,10 +1,7 @@
 ////
-/// @group packages
+/// @group stylesheets
 ////
 
-/// Stylesheet includes everything user just imports it
-/// - Note: Not configurable as far as output of styles (use minimal)
-
 @forward "../";
 
 @use "../base";

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;
-}