@vueless/storybook 0.0.63 → 0.0.65

package/.storybook/decorators/storyDarkModeDecorator.js

@@ -11,6 +11,12 @@ export const storyDarkModeDecorator = () => {
 
   initializeThemeState(["light", "dark"], cachedColorMode);
 
+  /* Set theme className to html tag before initialization. */
+  const sbAddonThemesConfig = localStorage.getItem("sb-addon-themes-3") || {};
+  const storybookTheme = JSON.parse(sbAddonThemesConfig).current || "light";
+
+  document.documentElement.classList.add(storybookTheme);
+
   return (story, context) => {
     const theme = pluckThemeFromContext(context);
 

package/.storybook/index.css

@@ -7,6 +7,51 @@
 /* -------------------- 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 {
+  @apply bg-gray-50 hover:bg-gray-200;
+}
+
+.light ::-webkit-scrollbar-thumb {
+  @apply bg-gray-400 hover:bg-gray-500;
+}
+
+.light * {
+  scrollbar-color: rgba(var(--vl-color-gray-400)) rgba(var(--vl-color-gray-50)); /* thumb color track color */
+}
+
+.dark ::-webkit-scrollbar-track {
+  @apply bg-gray-950 hover:bg-gray-800;
+}
+
+.dark ::-webkit-scrollbar-thumb {
+  @apply bg-gray-600 hover:bg-gray-500;
+}
+
+.dark * {
+  scrollbar-width: thin;
+  scrollbar-color: rgba(var(--vl-color-gray-600)) rgba(var(--vl-color-gray-950)); /* thumb color track color */
+}
+
+html.dark {
+  @apply bg-gray-950;
+}
+
+html.light {
+  @apply bg-gray-50;
+}
+
 body {
   font-family: Roboto, sans-serif;
 }
@@ -15,6 +60,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 +71,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 +159,6 @@ body {
   @apply bg-gray-200;
 }
 
-
-
 .dark .sb-preparing-docs,
 .dark .sb-preparing-story {
   @apply bg-gray-950;
@@ -163,6 +208,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 +226,10 @@ body {
   @apply bg-gray-900;
 }
 
+.docs-story > div > div {
+  @apply mb-px;
+}
+
 .sb-bar {
   @apply border-0;
 }

package/.storybook/preview.js

@@ -45,7 +45,7 @@ export const parameters = {
   darkMode: {
     light: themeLight,
     dark: themeDark,
-    classTarget: "body",
+    classTarget: "html",
     stylePreview: true,
   },
   options: {
@@ -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/index.js

@@ -11,7 +11,7 @@ const parsedArgs = parseArgs(args);
 
 const __dirname = path.dirname(new URL(import.meta.url).pathname);
 const source = path.join(__dirname, ".storybook");
-const target = path.join(cwd(), ".storybook-backup");
+const target = path.join(cwd(), ".storybook");
 
 copyStorybookPreset(source, target);
 
@@ -24,7 +24,7 @@ if (parsedArgs.pnpm) {
 function copyStorybookPreset(source, target) {
   if (fs.existsSync(target)) {
     const timestamp = new Date().valueOf();
-    const renamedTarget = `${target}-${timestamp}`;
+    const renamedTarget = `${target}-backup-${timestamp}`;
 
     fs.renameSync(target, renamedTarget);
     console.log(`Renamed existing ${path.basename(target)} to ${path.basename(renamedTarget)}`);

package/package.json

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