@vueless/storybook 0.0.64 → 0.0.66

package/.storybook/decorators/storyDarkModeDecorator.js

@@ -5,6 +5,18 @@ import { COLOR_MODE_KEY } from "vueless/constants.js";
 const { initializeThemeState, pluckThemeFromContext } = DecoratorHelpers;
 
 export const storyDarkModeDecorator = () => {
+  /* Set theme className to html tag before initialization (fix white blink issue). */
+  const sbAddonThemesConfig = localStorage.getItem("sb-addon-themes-3") || "{}";
+  const storybookTheme = JSON.parse(sbAddonThemesConfig).current || "light";
+
+  document.body.classList.add(storybookTheme); // this fixing first load
+  document.documentElement.classList.add(storybookTheme);
+
+  setTimeout(() => {
+    document.documentElement.classList.remove("light", "dark");
+  }, 4000);
+
+  /* Initialize theme state. */
   const prefersColorSchemeDark = window.matchMedia("(prefers-color-scheme: dark)");
   const preferScheme = prefersColorSchemeDark.matches ? "dark" : "light";
   const cachedColorMode = localStorage.getItem(COLOR_MODE_KEY) || preferScheme;

package/.storybook/index.css

@@ -7,6 +7,58 @@
 /* -------------------- Storybook Preview UI -------------------- */
 /* -------------------- General -------------------- */
 
+::-webkit-scrollbar {
+  @apply w-3 h-3;
+}
+
+::-webkit-scrollbar-track {
+  @apply transition;
+}
+
+::-webkit-scrollbar-thumb {
+  @apply rounded-sm transition;
+}
+
+.light::-webkit-scrollbar-track,
+.light ::-webkit-scrollbar-track {
+  @apply bg-gray-50 hover:bg-gray-200;
+}
+
+.light::-webkit-scrollbar-thumb,
+.light ::-webkit-scrollbar-thumb {
+  @apply bg-gray-400 hover:bg-gray-500;
+}
+
+ .dark::-webkit-scrollbar-track,
+ .dark ::-webkit-scrollbar-track {
+  @apply bg-gray-950 hover:bg-gray-800;
+}
+
+.dark::-webkit-scrollbar-thumb,
+.dark ::-webkit-scrollbar-thumb  {
+  @apply bg-gray-600 hover:bg-gray-500;
+}
+
+@supports (-moz-appearance: none) {
+  .light * {
+    scrollbar-width: thin;
+    scrollbar-color: #9ca3af #f9fafb; /* thumb color track color */
+  }
+
+  .dark * {
+    scrollbar-width: thin;
+    scrollbar-color: #4b5563 #030712; /* thumb color track color */
+  }
+}
+
+html.dark {
+  @apply bg-gray-950;
+}
+
+html.light {
+  @apply bg-gray-50;
+}
+
 body {
   font-family: Roboto, sans-serif;
 }
@@ -15,6 +67,7 @@ body {
 .light .sbdocs .sbdocs-content > h2,
 .light .sbdocs .sbdocs-content > h3,
 .light .sbdocs .sbdocs-content > .sb-anchor > h3,
+.light .sbdocs .sbdocs-content > .sb-anchor > p,
 .light .sbdocs .sbdocs-content > p,
 .light .sbdocs .sbdocs-content > table th,
 .light .sbdocs .sbdocs-content > table td {
@@ -25,6 +78,7 @@ body {
 .dark .sbdocs .sbdocs-content > h2,
 .dark .sbdocs .sbdocs-content > h3,
 .dark .sbdocs .sbdocs-content > .sb-anchor > h3,
+.dark .sbdocs .sbdocs-content > .sb-anchor > p,
 .dark .sbdocs .sbdocs-content > p,
 .dark .sbdocs .sbdocs-content > table th,
 .dark .sbdocs .sbdocs-content > table td {
@@ -112,8 +166,6 @@ body {
   @apply bg-gray-200;
 }
 
-
-
 .dark .sb-preparing-docs,
 .dark .sb-preparing-story {
   @apply bg-gray-950;
@@ -163,6 +215,14 @@ body {
   @apply mt-2;
 }
 
+.dark .sb-anchor > p > a {
+  @apply text-green-400;
+}
+
+.light .sb-anchor > p > a {
+  @apply text-green-600;
+}
+
 .sb-bar,
 .docs-story {
   @apply bg-white;
@@ -173,6 +233,10 @@ body {
   @apply bg-gray-900;
 }
 
+.docs-story > div > div {
+  @apply mb-px;
+}
+
 .sb-bar {
   @apply border-0;
 }

package/.storybook/manager-head.html

@@ -25,7 +25,7 @@ Custom dark mode related vueless loader.
 <style>
   /* -------------------- Prevent showing users default storybook theme styles -------------------- */
 
-  body.dark {
+  html.dark {
     background: #111827;
   }
 
@@ -33,6 +33,11 @@ Custom dark mode related vueless loader.
     visibility: hidden;
   }
 
+
+  #sidebar-bottom-wrapper {
+    display: none;
+  }
+
   #sb-vueless-loader {
     top: 0;
     left: 0;
@@ -146,7 +151,7 @@ Custom dark mode related vueless loader.
       setTimeout(() => {
         document.getElementById("root").style.visibility = 'visible';
         document.getElementById("sb-vueless-loader").style.display = 'none';
-      }, 1000);
+      }, 1500);
     };
   })();
 </script>

package/.storybook/preview.js

@@ -57,3 +57,15 @@ export const parameters = {
     },
   },
 };
+
+/* Reload the page on error "Failed to fetch dynamically imported module..." */
+window.addEventListener("error", (ev) => onFailedToFetchModule(ev.message));
+window.addEventListener("unhandledrejection", (ev) => onFailedToFetchModule(ev?.reason?.message));
+
+function onFailedToFetchModule(message) {
+  const isProd = import.meta.env.MODE === "production";
+
+  if (isProd && message?.includes("Failed to fetch dynamically imported module")) {
+    window.location.reload();
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vueless/storybook",
-  "version": "0.0.64",
+  "version": "0.0.66",
   "description": "Simplifies Storybook configuration for Vueless UI library.",
   "homepage": "https://vueless.com",
   "author": "Johnny Grid",