@vueless/storybook 1.1.3-beta.0 → 1.1.3-beta.10

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/tsconfig.app.json

@@ -0,0 +1,35 @@
+{
+  "include": [
+    "env.d.ts",
+    "**/*"
+  ],
+  "compilerOptions": {
+    /* General */
+    "module": "ESNext",
+    "target": "ESNext",
+    "esModuleInterop": true,
+    "useDefineForClassFields": true,
+    "forceConsistentCasingInFileNames": true,
+    "verbatimModuleSyntax": true, // This is important for `<script setup>`.
+    "tsBuildInfoFile": "./node_modules/.tmp/storybookTsconfig.app.tsbuildinfo",
+    "removeComments": true,
+    "skipLibCheck": true,
+    "composite": true,
+    "noEmit": true,
+
+    /* Path settings */
+    "baseUrl": ".",
+    "rootDir": "./",
+
+    /* Enables all strict type-checking options. */
+    "strict": true,
+    "noImplicitThis": true,
+
+    /* Bundlers settings */
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+
+    /* JS file support. */
+    "allowJs": true
+  }
+}

package/.storybook-ts/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "files": [],
+  "references": [
+    {
+      "path": "./tsconfig.node.json"
+    },
+    {
+      "path": "./tsconfig.app.json"
+    }
+  ]
+}

package/.storybook-ts/tsconfig.node.json

@@ -0,0 +1,13 @@
+{
+  "include": [
+    "vite.config.*"
+  ],
+  "compilerOptions": {
+    "module": "ESNext",
+    "noEmit": true,
+    "composite": true,
+    "tsBuildInfoFile": "./node_modules/.tmp/storybookTsconfig.node.tsbuildinfo",
+    "moduleResolution": "Bundler"
+  },
+
+}

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/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2024 vueless
+Copyright (c) 2025 vuelessjs
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/README.md

@@ -1,5 +1,32 @@
+![vueless-examples.png](public/images/storybook-demo.png)
+
 # Vueless Storybook preset
 
-The package simplifies Storybook configuration for `vueless` UI library.
+Zero config preset to launch a tailored Storybook instance for a [Vueless](https://github.com/vuelessjs/vueless) UI library.
+
+[Documentation](https://docs.vueless.com/installation/storybook/) | [Demo](https://ui.vueless.com/) | [About Vueless UI](http://vueless.com/)
+
+## Installation
+
+```bash
+# Install Vueless UI.
+npm install vueless
+
+# Install Vueless Storybook preset.
+npm install -D @vueless/storybook
+
+# Copy Vueless Storybook preset into your project.
+npx @vueless/storybook
+```
+
+## Contributing
+
+* We encourage you to contribute to Vueless! Please check out the
+  [contributing to Vueless](CONTRIBUTING.md) for guidelines.
+* Trying to report a possible security vulnerability in Vueless? Please
+  check out our [security policy](SECURITY.md) for guidelines.
+* Everyone interacting in Vueless and its sub-projects' codebases, issue trackers, chats, and mailing lists is expected to follow our [code of conduct](CODE_OF_CONDUCT.md) rules.
+
+## License
 
-[Documentation](https://docs.vueless.com/advanced/local-storybook-docs)
+Vueless is released under the [MIT License](https://opensource.org/licenses/MIT).

package/bin/index.js

@@ -0,0 +1,89 @@
+#!/usr/bin/env node
+/* eslint-disable no-console */
+
+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 sourceTs = path.join(__dirname, "..", ".storybook-ts");
+const sourceJs = path.join(__dirname, "..", ".storybook-js");
+const target = path.join(cwd(), ".storybook");
+
+const hasTypeScript = await detectTypeScript();
+
+hasTypeScript ? copyStorybookPreset(sourceTs, target) : copyStorybookPreset(sourceJs, target);
+
+await addStorybookCommands();
+
+/**
+ * Copy Storybook preset to target directory.
+ * @param {string} source - Source directory.
+ * @param {string} target - Target directory.
+ * @param {Object} options - Options object.
+ * @param {boolean} options.consoles - Show console messages.
+ */
+function copyStorybookPreset(source, target, { consoles = true } = {}) {
+  if (fs.existsSync(target)) {
+    const timestamp = new Date().valueOf();
+    const renamedTarget = `${target}-backup-${timestamp}`;
+
+    fs.renameSync(target, renamedTarget);
+
+    const warnMessage = styleText(
+      "yellow",
+      `Current Storybook preset backed into : '${path.basename(renamedTarget)}' folder. Remove it before commit.`,
+    );
+
+    console.log(warnMessage);
+  }
+
+  fs.mkdirSync(target, { recursive: true });
+
+  const files = fs.readdirSync(source);
+
+  files.forEach((file) => {
+    const srcFile = path.join(source, file);
+    const destFile = path.join(target, file);
+    const stat = fs.lstatSync(srcFile);
+
+    stat.isDirectory()
+      ? copyStorybookPreset(srcFile, destFile, { consoles: false })
+      : fs.copyFileSync(srcFile, destFile);
+  });
+
+  if (consoles) {
+    const successMessage = styleText(
+      "green",
+      `Storybook preset successfully saved into '${path.basename(target)}' folder.`,
+    );
+
+    console.log(successMessage);
+  }
+}
+
+/**
+ * Add Storybook commands to package.json.
+ */
+async function addStorybookCommands() {
+  try {
+    const storybookCommands = {
+      "sb:dev": "storybook dev -p 6006 --no-open",
+      "sb:dev:docs": "storybook dev -p 6006 --docs --no-open",
+      "sb:build": "storybook build --docs",
+      "sb:preview": "vite preview --host --outDir=storybook-static",
+    };
+
+    const packageJsonPath = path.resolve(cwd(), "package.json");
+    const data = await promises.readFile(packageJsonPath, "utf8");
+    const packageJson = JSON.parse(data);
+
+    packageJson.scripts = { ...packageJson.scripts, ...storybookCommands };
+
+    await promises.writeFile(packageJsonPath, JSON.stringify(packageJson, null, 2) + "\n", "utf8");
+  } catch (error) {
+    console.error("Error:", error);
+  }
+}

package/decorators/storyDarkModeDecorator.js

@@ -0,0 +1,37 @@
+import { DecoratorHelpers } from "@storybook/addon-themes";
+import { makeDecorator } from "storybook/preview-api";
+import { setTheme } from "vueless";
+
+/* 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) => {
+  const systemColorMode = event.matches ? "dark" : "light";
+
+  setTheme({ colorMode: previewColorMode || systemColorMode });
+});
+
+/* 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";
+
+    DecoratorHelpers.initializeThemeState(["light", "dark"], storybookColorMode || systemColorMode);
+
+    previewColorMode = DecoratorHelpers.pluckThemeFromContext(context);
+
+    setTheme({ colorMode: previewColorMode || systemColorMode });
+
+    return {
+      components: { storyFn },
+      setup: () => ({ theme: previewColorMode }),
+      template: `<story />`,
+    };
+  },
+});

package/index.d.ts

@@ -0,0 +1,2 @@
+export { storyDarkModeDecorator } from "./decorators/storyDarkModeDecorator";
+export { vue3SourceDecorator } from "./decorators/vue3SourceDecorator";

package/index.js

@@ -1,114 +1,2 @@
-#!/usr/bin/env node
-/* eslint-disable no-console */
-
-import fs, { promises } from "node:fs";
-import { styleText } from "node:util";
-import { cwd } from "node:process";
-import path from "node:path";
-
-// Get the command-line arguments
-const args = process.argv.slice(2);
-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");
-
-copyStorybookPreset(source, target);
-
-await addStorybookCommands();
-
-if (parsedArgs.pnpm) {
-  await createNpmrc();
-}
-
-function copyStorybookPreset(source, target, { consoles = true } = {}) {
-  if (fs.existsSync(target)) {
-    const timestamp = new Date().valueOf();
-    const renamedTarget = `${target}-backup-${timestamp}`;
-
-    fs.renameSync(target, renamedTarget);
-
-    const warnMessage = styleText(
-      "yellow",
-      `Current Storybook preset backed into : '${path.basename(renamedTarget)}' folder. Don't forget to remove it before commit.`,
-    );
-
-    console.log(warnMessage);
-  }
-
-  fs.mkdirSync(target, { recursive: true });
-
-  const files = fs.readdirSync(source);
-
-  files.forEach((file) => {
-    const srcFile = path.join(source, file);
-    const destFile = path.join(target, file);
-    const stat = fs.lstatSync(srcFile);
-
-    stat.isDirectory()
-      ? copyStorybookPreset(srcFile, destFile, { consoles: false })
-      : fs.copyFileSync(srcFile, destFile);
-  });
-
-  if (consoles) {
-    const successMessage = styleText(
-      "green",
-      `Storybook preset successfully saved into '${path.basename(target)}' folder.`,
-    );
-
-    console.log(successMessage);
-  }
-}
-
-async function addStorybookCommands() {
-  try {
-    const storybookCommands = {
-      "sb:dev": "storybook dev -p 6006 --no-open",
-      "sb:dev:docs": "storybook dev -p 6006 --docs --no-open",
-      "sb:build": "storybook build --docs",
-      "sb:preview": "vite preview --host --outDir=storybook-static",
-    };
-
-    const packageJsonPath = path.resolve(cwd(), "package.json");
-    const data = await promises.readFile(packageJsonPath, "utf8");
-    const packageJson = JSON.parse(data);
-
-    packageJson.scripts = { ...packageJson.scripts, ...storybookCommands };
-
-    await promises.writeFile(packageJsonPath, JSON.stringify(packageJson, null, 2) + "\n", "utf8");
-  } catch (error) {
-    console.error("Error:", error);
-  }
-}
-
-async function createNpmrc() {
-  const npmrcContent = [
-    "# @vueless/storybook: pnpm: disable hoisting for the package related modules.",
-    "public-hoist-pattern[] = *storybook*",
-    "public-hoist-pattern[] = prettier2",
-  ];
-
-  const npmrcPath = path.join(cwd(), ".npmrc");
-
-  try {
-    await promises.writeFile(npmrcPath, npmrcContent.join("\n"));
-  } catch (err) {
-    console.error("Error writing .npmrc file:", err);
-  }
-}
-
-function parseArgs(args) {
-  const result = {};
-
-  args.forEach((arg) => {
-    if (arg.startsWith("--")) {
-      const [key, value] = arg.split("=");
-      const normalizedKey = key.substring(2);
-
-      result[normalizedKey] = value !== undefined ? value : true;
-    }
-  });
-
-  return result;
-}
+export { storyDarkModeDecorator } from "./decorators/storyDarkModeDecorator";
+export { vue3SourceDecorator } from "./decorators/vue3SourceDecorator";

package/package.json

@@ -1,24 +1,23 @@
 {
   "name": "@vueless/storybook",
-  "version": "1.1.3-beta.0",
+  "version": "1.1.3-beta.10",
   "description": "Simplifies Storybook configuration for Vueless UI library.",
+  "author": "Johnny Grid <hello@vueless.com> (https://vueless.com)",
   "homepage": "https://vueless.com",
-  "author": "Johnny Grid",
   "license": "MIT",
-  "type": "module",
   "main": "index.js",
-  "private": false,
+  "type": "module",
   "publishConfig": {
-    "access": "public",
-    "registry": "https://registry.npmjs.org/"
+    "access": "public"
   },
   "bin": {
-    "copy": "./index.js"
+    "copy": "./bin/index.js"
   },
   "scripts": {
-    "lint": "eslint --ext .vue,.js,.ts --no-fix --ignore-path .eslintignore src/",
-    "lint:fix": "eslint --ext .vue,.js,.ts --fix --ignore-path .eslintignore src/",
-    "lint:ci": "eslint --ext .vue,.js,.ts --no-fix --ignore-path .eslintignore --max-warnings=0",
+    "ts:check": "vue-tsc --build --force",
+    "lint": "eslint --no-fix src/",
+    "lint:fix": "eslint --fix src/",
+    "lint:ci": "eslint --no-fix --max-warnings=0",
     "release:prepare": "rm -rf dist && mkdir -p dist && cp -r src/. package.json LICENSE README.md dist/",
     "release:beta": "release-it --ci --npm.publish --preRelease=beta --increment=prerelease",
     "release:patch": "release-it patch --ci --npm.publish --git.tag --github.release",
@@ -26,32 +25,38 @@
     "release:major": "release-it major --ci --npm.publish --git.tag --github.release"
   },
   "dependencies": {
-    "@storybook/addon-docs": "9.0.18",
-    "@storybook/addon-links": "9.0.18",
-    "@storybook/addon-themes": "9.0.18",
-    "@storybook/vue3-vite": "9.0.18",
-    "@vueless/storybook-dark-mode": "^9.0.6",
+    "@storybook/addon-docs": "9.1.3",
+    "@storybook/addon-links": "9.1.3",
+    "@storybook/addon-themes": "9.1.3",
+    "@storybook/vue3-vite": "9.1.3",
+    "@vueless/storybook-dark-mode": "^9.0.7",
     "chokidar": "^4.0.3",
-    "esbuild": "^0.25.5",
+    "esbuild": "^0.25.9",
     "globby": "^14.1.0",
     "mkdirp": "^3.0.1",
     "prettier2": "npm:prettier@2.8.8",
-    "storybook": "9.0.18",
+    "storybook": "9.1.3",
     "vue-docgen-api": "^4.79.2"
   },
   "devDependencies": {
     "@release-it/bumper": "^7.0.5",
-    "eslint": "^8.57.0",
-    "eslint-config-prettier": "^9.1.0",
+    "@stylistic/eslint-plugin": "^5.2.3",
+    "@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",
-    "eslint-plugin-prettier": "^5.1.3",
-    "prettier": "^3.2.5",
-    "prettier-eslint": "^16.3.0",
-    "release-it": "^19.0.2",
-    "tailwindcss": "^4.1.7",
-    "vue": "^3.5.16",
-    "vue-router": "^4.5.1",
-    "vueless": "^1.0.0"
+    "eslint-plugin-prettier": "^5.5.4",
+    "eslint-plugin-storybook": "9.1.3",
+    "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",
+    "vue-tsc": "^3.0.6",
+    "vueless": "^1.2.1-beta.2"
   },
   "overrides": {
     "vue-docgen-api": {

package/.storybook/decorators/storyDarkModeDecorator.js

@@ -1,49 +0,0 @@
-import { DecoratorHelpers } from "@storybook/addon-themes";
-import { setTheme } from "vueless";
-import { COLOR_MODE_KEY } from "vueless/constants.js";
-
-const { initializeThemeState, pluckThemeFromContext } = DecoratorHelpers;
-
-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);
-
-  // 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);
-  }
-
-  /* Initialize theme state. */
-  const colorMode = prefersColorSchemeDark.matches ? "dark" : "light";
-  const cachedColorMode = localStorage.getItem(COLOR_MODE_KEY) || colorMode;
-
-  initializeThemeState(["light", "dark"], cachedColorMode);
-
-  return (story, context) => {
-    const theme = pluckThemeFromContext(context);
-
-    setTheme({ colorMode: theme });
-
-    return {
-      components: { story },
-      setup() {
-        return { theme };
-      },
-      template: `<story />`,
-    };
-  };
-};

package/.storybook/main.js

@@ -1,28 +0,0 @@
-/** @type { import('@storybook/vue3-vite').StorybookConfig } */
-export default {
-  stories: [
-    "../node_modules/vueless/**/stories.{js,jsx,ts,tsx}",
-    "../node_modules/vueless/**/docs.mdx",
-    /* Define a path to your own component stories. */
-    // "../src/**/stories.{js,jsx,ts,tsx}",
-    // "../src/**/docs.mdx",
-  ],
-  addons: [
-    "@storybook/addon-docs",
-    "@storybook/addon-links",
-    "@vueless/storybook-dark-mode",
-    "@storybook/addon-themes",
-  ],
-  framework: {
-    name: "@storybook/vue3-vite",
-    options: {
-      builder: {
-        viteConfigPath: ".storybook/vite.config.js",
-      },
-    },
-  },
-  env: (config) => ({
-    ...config,
-    BASE_URL: "/",
-  }),
-};