Merge pull request #29 from vuelessjs/beta

Beta

Author: itsJohnnyGrid

.npmrc

@@ -1,2 +1 @@
-shamefully-hoist=true
-strict-peer-dependencies=false
+legacy-peer-deps=true

.storybook/main.ts

@@ -3,8 +3,12 @@ import { defineConfigWithVueless } from "@vueless/storybook";
 
 export default defineConfigWithVueless({
   stories: [
-    /* Define a path to your own component stories. */
-    // "../src/**/stories.{js,jsx,ts,tsx}",
+    /* Path to the project component stories. */
+    // "../src/**/stories.ts",
     // "../src/**/docs.mdx",
+    //
+    /* Path to the custom vueless component stories. */
+    // "../.vueless/components/**/stories.ts",
+    // "../.vueless/components/**/docs.mdx",
   ],
 });

.storybook/manager-head.html

@@ -2,21 +2,20 @@
 Overrides content of storybook layout HTML page.
 -->
 <link rel="shortcut icon" href="./favicons/favicon.ico">
-<link rel="icon" type="image/svg+xml" href="./favicons/favicon.svg" />
 
 <!--
-Custom dark mode related vueless loader.
+Custom color mode vueless loader.
 -->
 <div id="sb-vueless-loader">
   <img
     class="sb-vueless-loader-img-dark"
-    src="./images/vueless-logo-dark.svg"
+    src="./images/logo-dark.svg"
     alt="Vueless UI"
     width="250" />
 
   <img
     class="sb-vueless-loader-img-light"
-    src="./images/vueless-logo-light.svg"
+    src="./images/logo-light.svg"
     alt="Vueless UI"
     width="250" />
 </div>
@@ -78,12 +77,13 @@
 
 <script>
   /* This trick prevents showing users the default storybook theme. */
-  (() => {
-    window.onload = function() {
-      setTimeout(() => {
-        document.getElementById("root").style.visibility = 'visible';
-        document.getElementById("sb-vueless-loader").style.display = 'none';
-      }, 1500);
-    };
-  })();
+  window.onload = () => {
+    setTimeout(() => {
+      const rootElement = document.getElementById("root");
+      const vuelessLoader = document.getElementById("sb-vueless-loader");
+
+      if (rootElement) rootElement.style.visibility = "visible";
+      if (vuelessLoader) vuelessLoader.style.display = "none";
+    }, 1500);
+  };
 </script>

.storybook/manager.ts

@@ -1,9 +1,10 @@
 import { addons } from "storybook/manager-api";
+import { getThemeDark, getThemeLight } from "@vueless/storybook/themes";
 
 /* Theme styles */
-import "./themes/manager.css";
-import { themeDark } from "./themes/themeDark";
-import { themeLight } from "./themes/themeLight";
+import "./theme/theme.css";
+import "@vueless/storybook/manager.css";
+import { theme } from "./theme/theme";
 
 const DARK_MODE_KEY = "dark";
 const LIGHT_MODE_KEY = "light";
@@ -24,11 +25,28 @@ prefersColorSchemeDark.addEventListener("change", (event) => {
 
 function setSystemTheme(colorMode: string) {
   addons.setConfig({
-    theme: colorMode === DARK_MODE_KEY ? themeDark : themeLight,
+    theme: colorMode === DARK_MODE_KEY ? getThemeDark(theme) : getThemeLight(theme),
     panelPosition: "right",
   });
 }
 
 function getSystemColorMode(isDarkMode: boolean) {
   return isDarkMode ? DARK_MODE_KEY : LIGHT_MODE_KEY;
 }
+
+/* Change the Storybook manager favicon when system color mode changed. */
+prefersColorSchemeDark.addEventListener("change", setFavicon);
+
+setFavicon();
+
+function setFavicon() {
+  const link = document.createElement("link");
+
+  link.rel = "icon";
+  link.type = "image/svg+xml";
+  link.href = prefersColorSchemeDark.matches
+    ? "/favicons/favicon-dark.svg"
+    : "/favicons/favicon-light.svg";
+
+  document.head.appendChild(link);
+}

.storybook/preview-head.html

@@ -9,3 +9,105 @@
 <link rel="preconnect" crossorigin="anonymous" href="https://fonts.googleapis.com">
 <link rel="preconnect" crossorigin="anonymous" href="https://fonts.gstatic.com">
 <link rel="stylesheet" crossorigin="anonymous" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap">
+
+<style>
+  body {
+    font-family: Roboto, sans-serif;
+  }
+
+  .sbdocs-content :is(h1, h2, h3, h4, h5, h6)[id] {
+    scroll-margin-top: 8px;
+  }
+</style>
+
+<script>
+  (function docsAnchorScroll() {
+    var ANCHOR_PREFIX = "anchor--";
+    var OBSERVE_MS = 20000;
+    var cancelled = false;
+    var observer = null;
+    var timeoutId = null;
+    var rafId = null;
+
+    function cleanup() {
+      cancelled = true;
+      if (observer) {
+        observer.disconnect();
+        observer = null;
+      }
+      if (timeoutId !== null) {
+        clearTimeout(timeoutId);
+        timeoutId = null;
+      }
+      if (rafId !== null) {
+        cancelAnimationFrame(rafId);
+        rafId = null;
+      }
+    }
+
+    function targetIdFromHash() {
+      var h = window.location.hash;
+      if (!h || h.length < 2) {
+        return null;
+      }
+      var id = decodeURIComponent(h.slice(1));
+      if (id.indexOf(ANCHOR_PREFIX) !== 0) {
+        return null;
+      }
+      return id;
+    }
+
+    function tryScroll(targetId) {
+      var el = document.getElementById(targetId);
+      if (!el) {
+        return false;
+      }
+      el.scrollIntoView({ block: "start", inline: "nearest", behavior: "auto" });
+      return true;
+    }
+
+    function scheduleScrollToHash() {
+      cleanup();
+      cancelled = false;
+
+      var targetId = targetIdFromHash();
+      if (!targetId) {
+        return;
+      }
+
+      if (tryScroll(targetId)) {
+        return;
+      }
+
+      observer = new MutationObserver(function () {
+        if (!cancelled && tryScroll(targetId)) {
+          cleanup();
+        }
+      });
+      observer.observe(document.documentElement, { childList: true, subtree: true });
+
+      timeoutId = window.setTimeout(function () {
+        cleanup();
+      }, OBSERVE_MS);
+
+      function poll() {
+        if (cancelled) {
+          return;
+        }
+        if (tryScroll(targetId)) {
+          cleanup();
+          return;
+        }
+        rafId = window.requestAnimationFrame(poll);
+      }
+      rafId = window.requestAnimationFrame(poll);
+    }
+
+    window.addEventListener("hashchange", scheduleScrollToHash);
+    if (document.readyState === "loading") {
+      document.addEventListener("DOMContentLoaded", scheduleScrollToHash);
+    } else {
+      scheduleScrollToHash();
+    }
+  })();
+</script>

.storybook/preview.ts

@@ -1,14 +1,14 @@
-import { storyDarkModeDecorator, vue3SourceDecorator } from "@vueless/storybook";
 import { getRandomId } from "vueless";
+import { vue3SourceDecorator, storyDarkModeDecorator } from "@vueless/storybook";
+import { getThemeDark, getThemeLight, getThemeLightPreview } from "@vueless/storybook/themes";
 import { setup } from "@storybook/vue3-vite";
 
 import type { Preview } from "@storybook/vue3-vite";
 
 /* Theme styles */
-import "./themes/preview.css";
-import { themeDark } from "./themes/themeDark";
-import { themeLight } from "./themes/themeLight";
-import { themeLightPreview } from "./themes/themeLightPreview";
+import "./theme/theme.css";
+import "@vueless/storybook/preview.css";
+import { theme } from "./theme/theme";
 
 /* Vue plugins */
 import { createVueless } from "vueless";
@@ -39,12 +39,12 @@ export default {
     layout: "fullscreen",
     backgrounds: { disable: true },
     docs: {
-      theme: themeLightPreview,
+      theme: getThemeLightPreview(theme),
       source: { language: "html" },
     },
     darkMode: {
-      light: themeLight,
-      dark: themeDark,
+      light: getThemeLight(theme),
+      dark: getThemeDark(theme),
       classTarget: "body",
       stylePreview: true,
     },