@storybook-tiny/webcomponent 1.1.2 → 1.1.4

package/bin/storybook-tiny.js

@@ -5,7 +5,12 @@ import { fileURLToPath } from 'url'
 
 const config = {
   rootDir: fileURLToPath(new URL('..', import.meta.url)),
-  devDependencies: ['@storybook-tiny/webcomponent', 'mi-element', 'vite'],
+  devDependencies: [
+    '@storybook-tiny/webcomponent',
+    'mi-element',
+    'vite@^5',
+    'split.js@^1'
+  ],
   files: ['stories/*', 'vite.config.js'],
   post: [
     {

package/package.json

@@ -1,11 +1,12 @@
 {
   "name": "@storybook-tiny/webcomponent",
-  "version": "1.1.2",
-  "description": "A tiny storybook for webcompoments",
+  "version": "1.1.4",
+  "description": "A tiny storybook for web-components",
   "keywords": [
     "storybook",
     "storybook-tiny",
-    "webcomponent"
+    "webcomponent",
+    "web-component"
   ],
   "homepage": "https://github.com/commenthol/storybook-tiny/tree/main/packages/webcomponent#readme",
   "bugs": {
@@ -33,14 +34,15 @@
     "vite.config.js"
   ],
   "dependencies": {
-    "mi-element": "^0.1.0",
+    "mi-element": "^0.4.1",
+    "split.js": "^1.6.5",
     "@storybook-tiny/setup": "1.0.1"
   },
   "devDependencies": {
-    "@eslint/js": "^9.9.1",
-    "eslint": "^9.9.1",
-    "globals": "^15.9.0",
-    "vite": "^5.4.2"
+    "@eslint/js": "^9.32.0",
+    "eslint": "^9.32.0",
+    "globals": "^16.3.0",
+    "vite": "^7.0.6"
   },
   "engines": {
     "node": ">=20.0.0"

package/src/Storybook.js

@@ -1,17 +1,12 @@
 import styles from './Storybook.module.css'
+import split from 'split.js'
 import { MiElement, define, refsBySelector, esc, refsById } from 'mi-element'
 
 const getLocationHash = () => decodeURIComponent(location.hash.substring(1))
 
-/**
- * convert number to css unit
- * @param {numbers|string} unit 
- * @returns {string}
- */
-const cssUnit = (unit) => {
-  const n = Number(unit)
-  return isNaN(n) ? unit : `${n}px`
-}
+const STORE_ITEM = 'tiny-storybook-x'
+
+const getXperc = (px = 130) => (px * 100) / window.innerWidth
 
 const defaultStory = `
 <p class="${styles.storybookSectionP}">
@@ -41,17 +36,46 @@ class Storybook extends MiElement {
   }
 
   static template = `
+  <style>   
+  .${styles.storybook} > .gutter {
+      background-color: #eee;
+      background-repeat: no-repeat;
+      background-position: 50%;
+  }
+  .${styles.storybook} > .gutter.gutter-horizontal {
+      background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg==');
+      cursor: col-resize;
+  }
+  </style>
   <main class="${styles.storybook}">
-    <aside>
+    <aside id="split-0">
       <h4><a></a></h4>
       <nav></nav>
     </aside>
-    <section class="stories">
+    <section id="split-1" class="stories">
     </section>
   </main>
   `
 
   render() {
+    let xperc = getXperc()
+    try {
+      xperc = JSON.parse(localStorage.getItem(STORE_ITEM)) || xperc
+      if (isNaN(xperc)) {
+        xperc = getXperc()
+      }
+    } catch (_err) {
+      // noop
+    }
+    split(['#split-0', '#split-1'], {
+      sizes: [xperc, 100 - xperc],
+      minSize: 0,
+      gutterSize: 4,
+      onDragEnd: (sizes) => {
+        const [xperc] = sizes
+        localStorage.setItem(STORE_ITEM, xperc)
+      }
+    })
     this.refs = refsBySelector(this.renderRoot, {
       aside: 'main > aside',
       h4: 'main > aside h4 a',
@@ -65,7 +89,6 @@ class Storybook extends MiElement {
     const { refs } = this
     refs.h4.textContent = this.header
     refs.h4.href = this.href
-    refs.aside.style.flexBasis = cssUnit(this.width)
     refs.nav.innerHTML = ''
     for (const story of this.stories) {
       const $el = document.createElement('storybook-tiny-story')

package/src/Storybook.module.css

@@ -1,18 +1,18 @@
 .storybook {
   font-family: Arial, Helvetica, sans-serif;
   display: flex;
+  flex-direction: row;
 }
 
-.storybook>aside {
+.storybook > aside {
   border-right: 1px solid rgba(0, 0, 0, 0.1);
-  overflow-y: auto;
+  overflow-y: hidden;
   max-height: calc(100vh - 3em);
   flex-grow: 0;
   flex-shrink: 0;
-  flex-basis: 130px;
 }
 
-.storybook>aside>* {
+.storybook > aside > * {
   padding-left: 5px;
   padding-right: 5px;
 }
@@ -26,19 +26,19 @@
   font-weight: bold;
 }
 
-.storybook>aside>small {
+.storybook > aside > small {
   padding-top: 0.5em;
   padding-bottom: 0.25em;
   display: block;
 }
 
-.storybook>aside>h4 {
+.storybook > aside > h4 {
   padding-top: 5px;
   margin-top: 0;
 }
 
-.storybook>aside>h4 a,
-.storybook>aside>h4 a:visited {
+.storybook > aside > h4 a,
+.storybook > aside > h4 a:visited {
   text-decoration: none;
   color: unset;
 }
@@ -60,4 +60,4 @@
 .error {
   padding: 0 1em 1em;
   background-color: rgb(255, 0, 115, 0.1);
-}
+}