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>

Author: 3 people

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