UIKit Nav Cleanup (pattern-lab#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

* pattern-lab#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>

Author: 3 people

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