UIKit Nav Cleanup (#1102)

* feat: upgrade to Preact v10

* refactor: break apart Nav into smaller more maintainable pieces; significantly reduce UI logic required under the hood

* refactor: minor tweaks to Pattern State UI

* fix: fix the drag offset of the drawer resizer

* chore: update yarn.lock

* refactor: rename root Nav component files

* #1102 After merge fixes

* fix: yarn lock after merge

* fix: review findings in css and js

* fix: remove unused code and reimplement utility func

Co-authored-by: Brian Muenzenmeyer <brian.muenzenmeyer@gmail.com>
Co-authored-by: Josef Bredreck <slime.games@outlook.de>
Co-authored-by: Josef Bredreck <13408112+JosefBredereck@users.noreply.github.com>

packages/docs/src/_data/global.js

@@ -1,6 +1,7 @@
 module.exports = {
 	random() {
 		const segment = () => {
+			// eslint-disable-next-line no-bitwise
 			return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
 		};
 		return `${segment()}-${segment()}-${segment()}`;

packages/docs/src/filters/date-filter.js

@@ -1,7 +1,7 @@
 // Stolen from https://stackoverflow.com/a/31615643
 const appendSuffix = (n) => {
-	var s = ['th', 'st', 'nd', 'rd'],
-		v = n % 100;
+	const s = ['th', 'st', 'nd', 'rd'];
+	const v = n % 100;
 	return n + (s[(v - 20) % 10] || s[v] || s[0]);
 };
 

packages/docs/src/js/components/theme-toggle.js

@@ -26,7 +26,7 @@ class ThemeToggle extends HTMLElement {
 	}
 
 	applySetting(passedSetting) {
-		let currentSetting = passedSetting || localStorage.getItem(this.STORAGE_KEY);
+		const currentSetting = passedSetting || localStorage.getItem(this.STORAGE_KEY);
 
 		if (currentSetting) {
 			document.documentElement.setAttribute('data-user-color-scheme', currentSetting);

packages/docs/src/transforms/html-min-transform.js

@@ -2,7 +2,7 @@ const htmlmin = require('html-minifier');
 
 module.exports = function htmlMinTransform(value, outputPath) {
 	if (outputPath.indexOf('.html') > -1) {
-		let minified = htmlmin.minify(value, {
+		const minified = htmlmin.minify(value, {
 			useShortDoctype: true,
 			removeComments: true,
 			collapseWhitespace: true,

packages/uikit-workshop/package.json

@@ -74,10 +74,8 @@
     "mousetrap": "^1.6.5",
     "portfinder": "^1.0.28",
     "postcss-loader": "^3.0.0",
-    "preact": "8.3.1",
-    "preact-compat": "3.18.4",
-    "preact-context": "1.1.2",
-    "preact-render-to-string": "^4.1.0",
+    "preact-render-to-string": "^5.1.1",
+    "preact": "^10.0.5",
     "preload-webpack-plugin": "^3.0.0-beta.3",
     "pretty": "^2.0.0",
     "prismjs": "^1.25.0",

packages/uikit-workshop/src/sass/pattern-lab.scss

@@ -43,7 +43,7 @@
 /*------------------------------------*\
     #COMPONENTS
 \*------------------------------------*/
-@import '../scripts/components/pl-nav/pl-nav.scss';
+@import '../scripts/components/pl-nav/index.scss';
 @import '../scripts/components/pl-search/pl-search.scss';
 @import 'scss/04-components/annotations';
 @import 'scss/04-components/annotations-inside-modal';

packages/uikit-workshop/src/sass/scss/04-components/_pattern-states.scss

@@ -9,9 +9,9 @@
 .pl-c-pattern-state {
   width: 0.5em;
   height: 0.5em;
-  margin-bottom: 0.25em;
   margin-left: 0.5em;
   border-radius: 50%;
+  display: inline-block;
   background-color: $pl-color-state-info;
 
   &--complete {

packages/uikit-workshop/src/sass/scss/05-themes/_sidebar-theme.scss

@@ -22,6 +22,7 @@
       flex-direction: column; /* 3 */
       border-bottom: 0; /* 4 */
       justify-content: space-between;
+      --nav-item-height: 2.5rem;
     }
 
     /**

packages/uikit-workshop/src/scripts/components/base-skate-preact-element.js

@@ -16,36 +16,7 @@ import { SkateElement } from './base-skate-element';
 
 /** @jsx h */
 
-import preact, { h, render } from 'preact';
-
-// TODO make this a Symbol() when it's supported.
-const preactNodeName = '__preactNodeName';
-
-let oldVnode;
-
-function newVnode(vnode) {
-  const fn = vnode.nodeName;
-  if (fn && fn.prototype instanceof HTMLElement) {
-    if (!fn[preactNodeName]) {
-      const prefix = fn.name;
-      customElements.define(
-        (fn[preactNodeName] = name(prefix)),
-        class extends fn {}
-      );
-    }
-    vnode.nodeName = fn[preactNodeName];
-  }
-  return vnode;
-}
-
-function setupPreact() {
-  oldVnode = preact.options.vnode;
-  preact.options.vnode = newVnode;
-}
-
-function teardownPreact() {
-  preact.options.vnode = oldVnode;
-}
+import { h, render } from 'preact';
 
 export class SkatePreactElement extends SkateElement {
   get props() {
@@ -55,23 +26,16 @@ export class SkatePreactElement extends SkateElement {
   }
 
   renderer(root, call) {
-    setupPreact();
     this._renderRoot = root;
-    this._preactDom = render(
-      call(),
-      root,
-      this._preactDom || root.childNodes[0]
-    );
-    teardownPreact();
+    render(call(), root);
   }
 
   disconnectedCallback() {
     this.disconnecting && this.disconnecting();
     super.disconnectedCallback && super.disconnectedCallback();
     this.disconnected && this.disconnected();
     // Render null to unmount. See https://github.com/skatejs/skatejs/pull/1432#discussion_r183381359
-    this._preactDom = render(null, this._renderRoot, this._preactDom);
-    this._renderRoot = null;
+    render(null, this._renderRoot);
 
     this.__storeUnsubscribe && this.__storeUnsubscribe();
 

packages/uikit-workshop/src/scripts/components/pl-nav/index.scss

@@ -0,0 +1,9 @@
+/*------------------------------------*\
+    #NAVIGATION
+\*------------------------------------*/
+
+@import './nav.scss';
+@import './nav-link.scss';
+@import './nav-list.scss';
+@import './nav-dropdown.scss';
+@import './nav-accordion.scss';

packages/uikit-workshop/src/scripts/components/pl-nav/nav-accordion.scss

@@ -0,0 +1,27 @@
+@import '../../../sass/scss/core.scss';
+
+.pl-c-nav__accordion {
+  background-color: inherit; // allows the nav's children inherit from the parent header
+  @include listReset();
+  @include accordionPanel();
+  display: flex;
+  flex-flow: row wrap;
+  opacity: 0;
+  visibility: hidden;
+}
+
+.is-open ~ .pl-c-nav__accordion {
+  visibility: visible;
+  max-height: none;
+  transform: translateY(0);
+  opacity: 1;
+
+  .pl-c-body--theme-horizontal & {
+    overflow: auto;
+  }
+
+  @media all and (min-width: $pl-bp-med) {
+    height: auto;
+    max-height: calc(100vh - #{$offset-top} - 2rem); /* 1 */
+  }
+}

packages/uikit-workshop/src/scripts/components/pl-nav/nav-dropdown.scss

@@ -0,0 +1,42 @@
+@import '../../../sass/scss/core.scss';
+
+/**
+ * Nav Dropdown
+ * 1) On larger screens, display as dropdowns that
+ *    hangs over the header
+ */
+.pl-c-nav__dropdown {
+  @media all and (min-width: $pl-bp-med) {
+    position: absolute;
+    top: 100%; /* 1 */
+    left: 0;
+    min-width: 14rem;
+    border-radius: $pl-border-radius-med;
+    border-style: solid;
+    border-width: 1px;
+    box-shadow: 0 2px 5px rgba($pl-color-black, 0.1);
+    transition: all 0.2s ease;
+    transform: translateY(-12px);
+    z-index: 1;
+    transition: all $pl-animate-quick ease-out;
+
+    .pl-c-body--theme-sidebar & {
+      position: relative;
+    }
+  }
+
+  .pl-c-body--theme-light & {
+    border-color: rgba($pl-color-black, 0.2);
+  }
+
+  .pl-c-body--theme-dark & {
+    border-color: rgba($pl-color-white, 0.2);
+  }
+
+  .pl-c-body--theme-sidebar & {
+    border-width: 0;
+    transform: none;
+    box-shadow: none;
+    border-radius: 0;
+  }
+}

packages/uikit-workshop/src/scripts/components/pl-nav/nav-link.js

@@ -0,0 +1,47 @@
+// this line is required for rendering even if it is note used in the code
+import { h, Fragment } from 'preact';
+const classNames = require('classnames');
+
+export const NavLink = (props) => {
+  const classes = classNames('pl-c-nav__link', {
+    [`pl-c-nav__link--level-${props.level}`]: props.level !== undefined,
+    'pl-c-nav__link--icon-only': props.iconOnly,
+    'pl-c-nav__link--title': props.isTitle,
+  });
+
+  const Tag = props.href ? 'a' : 'button';
+
+  return (
+    <Tag className={`${classes}`} role="tab" {...props}>
+      {props.iconPos === 'before' && props.iconName && (
+        <span
+          class="pl-c-nav__link-icon"
+          dangerouslySetInnerHTML={{
+            __html: `<pl-icon name="${props.iconName}"></pl-icon>`,
+          }}
+        />
+      )}
+      <span
+        className={`pl-c-nav__link-text ${
+          props.iconOnly ? 'is-vishidden' : ''
+        }`}
+      >
+        {props.children}
+        {props.status && (
+          <span
+            class={`pl-c-pattern-state pl-c-pattern-state--${props.status}`}
+            title={props.status}
+          />
+        )}
+      </span>
+      {props.iconPos !== 'before' && props.iconName && (
+        <span
+          class="pl-c-nav__link-icon"
+          dangerouslySetInnerHTML={{
+            __html: `<pl-icon name="${props.iconName}"></pl-icon>`,
+          }}
+        />
+      )}
+    </Tag>
+  );
+};