@vueless/storybook 1.1.3-beta.5 → 1.1.3-beta.7

package/.storybook-ts/themes/themeLightPreview.ts

@@ -0,0 +1,41 @@
+import { create } from "storybook/theming/create";
+import type { ThemeVars } from "storybook/theming";
+
+export const themeLightPreview: ThemeVars = create({
+  base: "light",
+  // Typography
+  fontBase: '"Roboto", sans-serif',
+  fontCode: "monospace",
+
+  // Main colors
+  colorPrimary: "#111827", // gray-900
+  colorSecondary: "#6b7280", // gray-500
+
+  // UI
+  appBg: "#f3f4f6", // gray-100
+  appPreviewBg: "#f9fafb", // gray-50
+  appBorderColor: "#e5e7eb", // gray-200
+  appContentBg: "#f9fafb", // gray-50
+  appBorderRadius: 8,
+
+  // Text colors
+  textColor: "#111827", // gray-900
+  textInverseColor: "#f9fafb", // gray-50
+
+  // Toolbar default and active colors
+  barTextColor: "#6b7280", // gray-500
+  barHoverColor: "#4b5563", // gray-600
+  barSelectedColor: "#374151", // gray-700
+  barBg: "#ffffff", // white
+
+  // Form colors
+  inputBg: "#ffffff", // white
+  inputBorder: "#d1d5db", // gray-300
+  inputTextColor: "#111827", // gray-900
+  inputBorderRadius: 4,
+
+  buttonBg: "#f3f4f6", // gray-100
+  buttonBorder: "#e5e7eb", // gray-200
+  booleanBg: "#f9fafb", // gray-50
+  booleanSelectedBg: "#e5e7eb", // gray-200
+});

package/.storybook-ts/vite.config.ts

@@ -0,0 +1,24 @@
+import { defineConfig } from "vite";
+
+// Plugins
+import Vue from "@vitejs/plugin-vue";
+import { Vueless, TailwindCSS } from "vueless/plugin-vite";
+import { STORYBOOK_ENV } from "vueless/constants.js";
+
+export default defineConfig({
+  plugins: [Vue(), TailwindCSS(), Vueless({ env: STORYBOOK_ENV })],
+  optimizeDeps: {
+    include: [
+      "cva",
+      "tailwind-merge",
+      "prettier2",
+      "prettier2/parser-html",
+      "@storybook/addon-docs/blocks",
+      "storybook/theming/create",
+      "storybook/internal/docs-tools",
+      "@storybook/addon-themes",
+      "@storybook/vue3-vite",
+      "@vueless/storybook",
+    ],
+  },
+});

package/bin/index.js

@@ -5,12 +5,16 @@ import path from "node:path";
 import { cwd } from "node:process";
 import { styleText } from "node:util";
 import fs, { promises } from "node:fs";
+import { detectTypeScript } from "vueless/utils/node/helper.js";
 
 const __dirname = path.dirname(new URL(import.meta.url).pathname);
-const source = path.join(__dirname, ".storybook");
+const sourceTs = path.join(__dirname, "..", ".storybook-ts");
+const sourceJs = path.join(__dirname, "..", ".storybook-js");
 const target = path.join(cwd(), ".storybook");
 
-copyStorybookPreset(source, target);
+const hasTypeScript = await detectTypeScript();
+
+hasTypeScript ? copyStorybookPreset(sourceTs, target) : copyStorybookPreset(sourceJs, target);
 
 await addStorybookCommands();
 

package/decorators/storyDarkModeDecorator.js

@@ -1,49 +1,37 @@
 import { DecoratorHelpers } from "@storybook/addon-themes";
+import { makeDecorator } from "storybook/preview-api";
 import { setTheme } from "vueless";
-import { COLOR_MODE_KEY } from "vueless/constants.js";
 
-const { initializeThemeState, pluckThemeFromContext } = DecoratorHelpers;
+/* Cache preview color mode. */
+let previewColorMode = "";
 
+/* Set Storybook color mode when system color mode changed. */
 const prefersColorSchemeDark = window.matchMedia("(prefers-color-scheme: dark)");
 
 prefersColorSchemeDark.addEventListener("change", (event) => {
-  setTheme({ colorMode: event.matches ? "dark" : "light" });
-});
-
-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";
-
-  // this fixing first load
-  document.body.classList.add(storybookTheme);
+  const systemColorMode = event.matches ? "dark" : "light";
 
-  // this fixing white blink issue
-  if (window.location.toString().includes("viewMode=docs")) {
-    document.documentElement.classList.add(storybookTheme);
-
-    setTimeout(() => {
-      document.documentElement.classList.remove("light", "dark");
-    }, 4000);
-  }
+  setTheme({ colorMode: previewColorMode || systemColorMode });
+});
 
-  /* Initialize theme state. */
-  const colorMode = prefersColorSchemeDark.matches ? "dark" : "light";
-  const cachedColorMode = localStorage.getItem(COLOR_MODE_KEY) || colorMode;
+/* Define color mode decorator. */
+export const storyDarkModeDecorator = makeDecorator({
+  name: "storyDarkModeDecorator",
+  wrapper: (storyFn, context) => {
+    const sbAddonThemesConfig = localStorage.getItem("sb-addon-themes-3") || "{}";
+    const storybookColorMode = JSON.parse(sbAddonThemesConfig).current || "light";
+    const systemColorMode = prefersColorSchemeDark.matches ? "dark" : "light";
 
-  initializeThemeState(["light", "dark"], cachedColorMode);
+    DecoratorHelpers.initializeThemeState(["light", "dark"], storybookColorMode || systemColorMode);
 
-  return (story, context) => {
-    const theme = pluckThemeFromContext(context);
+    previewColorMode = DecoratorHelpers.pluckThemeFromContext(context);
 
-    setTheme({ colorMode: theme });
+    setTheme({ colorMode: previewColorMode || systemColorMode });
 
     return {
-      components: { story },
-      setup() {
-        return { theme };
-      },
+      components: { storyFn },
+      setup: () => ({ theme: previewColorMode }),
       template: `<story />`,
     };
-  };
-};
+  },
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vueless/storybook",
-  "version": "1.1.3-beta.5",
+  "version": "1.1.3-beta.7",
   "description": "Simplifies Storybook configuration for Vueless UI library.",
   "author": "Johnny Grid <hello@vueless.com> (https://vueless.com)",
   "homepage": "https://vueless.com",
@@ -14,6 +14,7 @@
     "copy": "./bin/index.js"
   },
   "scripts": {
+    "ts:check": "vue-tsc --build --force",
     "lint": "eslint --no-fix src/",
     "lint:fix": "eslint --fix src/",
     "lint:ci": "eslint --no-fix --max-warnings=0",
@@ -40,7 +41,9 @@
   "devDependencies": {
     "@release-it/bumper": "^7.0.5",
     "@stylistic/eslint-plugin": "^5.2.3",
+    "@tsconfig/node20": "^20.1.6",
     "@types/node": "^24.3.0",
+    "@vitejs/plugin-vue": "^6.0.1",
     "eslint": "^9.33.0",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-node": "^11.1.0",
@@ -49,9 +52,15 @@
     "prettier": "^3.6.2",
     "release-it": "^19.0.4",
     "tailwindcss": "^4.1.12",
+    "typescript": "^5.9.2",
+    "typescript-eslint": "^8.40.0",
     "vue": "latest",
     "vue-router": "latest",
-    "vueless": "^1.2.0"
+    "vue-tsc": "^3.0.6",
+    "vueless": "^1.2.1-beta.2"
+  },
+  "peerDependencies": {
+    "vueless": ">=1.2.0 <2.0.0"
   },
   "overrides": {
     "vue-docgen-api": {

package/.storybook/manager.js

@@ -1,21 +0,0 @@
-import { addons } from "storybook/manager-api";
-
-/* Theme styles */
-import "./themes/manager.css";
-import themeDark from "./themes/themeDark.js";
-import themeLight from "./themes/themeLight.js";
-
-const prefersColorSchemeDark = window.matchMedia("(prefers-color-scheme: dark)");
-
-function setSystemTheme(theme) {
-  addons.setConfig({
-    theme: theme ? themeDark : themeLight,
-    panelPosition: "right",
-  });
-}
-
-setSystemTheme(prefersColorSchemeDark.matches);
-
-prefersColorSchemeDark.addEventListener("change", (event) => {
-  setSystemTheme(event.matches);
-});