@vueless/storybook 1.0.1-beta.1 → 1.0.1-beta.3

package/.storybook/decorators/vue3SourceDecorator.js

@@ -100,6 +100,14 @@ export const vue3SourceDecorator = makeDecorator({
   },
 });
 
+function getModelValue(value) {
+  if (value === undefined) return "";
+
+  return isPrimitive(value)
+    ? JSON.stringify(value)?.replaceAll('"', "")
+    : JSON.stringify(value).replaceAll('"', "'");
+}
+
 function preFormat(templateSource, args, argTypes) {
   templateSource = expandVueLoopFromTemplate(templateSource, args, argTypes);
 
@@ -137,9 +145,7 @@ function preFormat(templateSource, args, argTypes) {
     // eslint-disable-next-line vue/max-len
     `</template><template v-else-if="slot === 'default' && args['defaultSlot']">{{ args['defaultSlot'] }}</template><template v-else-if="args[slot + 'Slot']">{{ args[slot + 'Slot'] }}</template></template>`;
 
-  const modelValue = isPrimitive(args["modelValue"])
-    ? JSON.stringify(args["modelValue"])?.replaceAll('"', "")
-    : JSON.stringify(args["modelValue"])?.replaceAll('"', "'");
+  const modelValue = getModelValue(args["modelValue"]);
 
   templateSource = templateSource
     .replace(/>[\s]+</g, "><")
@@ -150,12 +156,19 @@ function preFormat(templateSource, args, argTypes) {
       new RegExp(`v-model="args\\.modelValue"`, "g"),
       args["modelValue"] ? `v-model="${modelValue}"` : "",
     )
+    .replace(/v-model:(\w+)="args\.(\w+)"/g, (_, modelKey, argKey) => {
+      const value = args[argKey];
+      const formattedVal = getModelValue(value);
+
+      return formattedVal ? `v-model:${modelKey}="${formattedVal}"` : "";
+    })
     .replace(
       /v-bind="args"/g,
       Object.keys(componentArgs)
         .map((key) => " " + propToSource(kebabCase(key), args[key], argTypes[key]))
         .join(""),
-    );
+    )
+    .replace(/:class="args\.wrapperClass"/g, `class="${args.wrapperClass}"`);
 
   return templateSource;
 }

package/.storybook/main.js

@@ -1,5 +1,3 @@
-import { resolve } from "node:path";
-
 /** @type { import('@storybook/vue3-vite').StorybookConfig } */
 export default {
   stories: [
@@ -12,7 +10,7 @@ export default {
   addons: [
     "@storybook/addon-docs",
     "@storybook/addon-links",
-    resolve(__dirname, "./addons/storybook-dark-mode/preset/manager.tsx"),
+    "@vueless/storybook-dark-mode",
     "@storybook/addon-themes",
   ],
   framework: {

package/.storybook/vite.config.js

@@ -3,19 +3,19 @@ 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";
+import { INTERNAL_ENV } from "vueless/constants.js";
 
 export default defineConfig({
-  plugins: [Vue(), TailwindCSS(), Vueless({ env: STORYBOOK_ENV })],
+  plugins: [Vue(), TailwindCSS(), Vueless({ env: INTERNAL_ENV })],
   optimizeDeps: {
     include: [
       "cva",
       "tailwind-merge",
-      "@tailwindcss/forms",
       "prettier2",
       "prettier2/parser-html",
       "@storybook/addon-docs/blocks",
       "storybook/theming/create",
+      "storybook/internal/docs-tools",
       "@storybook/addon-themes",
       "@storybook/vue3-vite",
     ],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vueless/storybook",
-  "version": "1.0.1-beta.1",
+  "version": "1.0.1-beta.3",
   "description": "Simplifies Storybook configuration for Vueless UI library.",
   "homepage": "https://vueless.com",
   "author": "Johnny Grid",
@@ -26,17 +26,17 @@
     "release:major": "release-it major --ci --npm.publish --git.tag --github.release"
   },
   "dependencies": {
-    "@storybook/addon-docs": "9.0.4",
-    "@storybook/addon-links": "9.0.4",
-    "@storybook/addon-themes": "9.0.4",
-    "@storybook/vue3-vite": "9.0.4",
-    "@vueless/storybook-dark-mode": "^9.0.2",
+    "@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",
     "chokidar": "^4.0.3",
     "esbuild": "^0.25.5",
     "globby": "^14.1.0",
     "mkdirp": "^3.0.1",
     "prettier2": "npm:prettier@2.8.8",
-    "storybook": "9.0.4",
+    "storybook": "9.0.18",
     "vue-docgen-api": "^4.79.2"
   },
   "devDependencies": {

package/.storybook/addons/storybook-dark-mode/Tool.tsx

@@ -1,270 +0,0 @@
-import * as React from "react";
-import { global } from "@storybook/global";
-import { themes, ThemeVars } from "storybook/theming";
-import { IconButton } from "storybook/internal/components";
-import { MoonIcon, SunIcon } from "@storybook/icons";
-import {
-  STORY_CHANGED,
-  SET_STORIES,
-  DOCS_RENDERED,
-} from "storybook/internal/core-events";
-import { API, useParameter } from "storybook/manager-api";
-import equal from "fast-deep-equal";
-import { DARK_MODE_EVENT_NAME, UPDATE_DARK_MODE_EVENT_NAME } from "./constants";
-
-const { document, window } = global as { document: Document; window: Window };
-const modes = ["light", "dark"] as const;
-type Mode = (typeof modes)[number];
-
-interface DarkModeStore {
-  /** The class target in the preview iframe */
-  classTarget: string;
-  /** The current mode the storybook is set to */
-  current: Mode;
-  /** The dark theme for storybook */
-  dark: ThemeVars;
-  /** The dark class name for the preview iframe */
-  darkClass: string | string[];
-  /** The light theme for storybook */
-  light: ThemeVars;
-  /** The light class name for the preview iframe */
-  lightClass: string | string[];
-  /** Apply mode to iframe */
-  stylePreview: boolean;
-  /** Persist if the user has set the theme */
-  userHasExplicitlySetTheTheme: boolean;
-}
-
-const STORAGE_KEY = "sb-addon-themes-3";
-export const prefersDark = window.matchMedia?.("(prefers-color-scheme: dark)");
-
-const defaultParams: Required<Omit<DarkModeStore, "current">> = {
-  classTarget: "body",
-  dark: themes.dark,
-  darkClass: ["dark"],
-  light: themes.light,
-  lightClass: ["light"],
-  stylePreview: false,
-  userHasExplicitlySetTheTheme: false,
-};
-
-/** Persist the dark mode settings in localStorage */
-export const updateStore = (newStore: DarkModeStore) => {
-  window.localStorage.setItem(STORAGE_KEY, JSON.stringify(newStore));
-};
-
-/** Add the light/dark class to an element */
-const toggleDarkClass = (
-  el: Element,
-  {
-    current,
-    darkClass = defaultParams.darkClass,
-    lightClass = defaultParams.lightClass,
-  }: DarkModeStore,
-) => {
-  if (current === "dark") {
-    el.classList.remove(...arrayify(lightClass));
-    el.classList.add(...arrayify(darkClass));
-  } else {
-    el.classList.remove(...arrayify(darkClass));
-    el.classList.add(...arrayify(lightClass));
-  }
-};
-
-/** Coerce a string to a single item array, or return an array as-is */
-const arrayify = (classes: string | string[]): string[] => {
-  const arr: string[] = [];
-  return arr.concat(classes).map((item) => item);
-};
-
-/** Update the preview iframe class */
-const updatePreview = (store: DarkModeStore) => {
-  const iframe = document.getElementById(
-    "storybook-preview-iframe",
-  ) as HTMLIFrameElement;
-
-  if (!iframe) {
-    return;
-  }
-
-  const iframeDocument =
-    iframe.contentDocument || iframe.contentWindow?.document;
-  const target = iframeDocument?.querySelector<HTMLElement>(store.classTarget);
-
-  if (!target) {
-    return;
-  }
-
-  toggleDarkClass(target, store);
-};
-
-/** Update the manager iframe class */
-const updateManager = (store: DarkModeStore) => {
-  const manager = document.querySelector(store.classTarget);
-
-  if (!manager) {
-    return;
-  }
-
-  toggleDarkClass(manager, store);
-};
-
-/** Update changed dark mode settings and persist to localStorage  */
-export const store = (
-  userTheme: Partial<DarkModeStore> = {},
-): DarkModeStore => {
-  const storedItem = window.localStorage.getItem(STORAGE_KEY);
-
-  if (typeof storedItem === "string") {
-    const stored = JSON.parse(storedItem) as DarkModeStore;
-
-    if (userTheme) {
-      if (userTheme.dark && !equal(stored.dark, userTheme.dark)) {
-        stored.dark = userTheme.dark;
-        updateStore(stored);
-      }
-
-      if (userTheme.light && !equal(stored.light, userTheme.light)) {
-        stored.light = userTheme.light;
-        updateStore(stored);
-      }
-    }
-
-    return stored;
-  }
-
-  return { ...defaultParams, ...userTheme } as DarkModeStore;
-};
-
-// On initial load, set the dark mode class on the manager
-// This is needed if you're using mostly CSS overrides to styles the storybook
-// Otherwise the default theme is set in src/preset/manager.tsx
-updateManager(store());
-
-interface DarkModeProps {
-  /** The storybook API */
-  api: API;
-}
-
-/** A toolbar icon to toggle between dark and light themes in storybook */
-export function DarkMode({ api }: DarkModeProps) {
-  const [isDark, setDark] = React.useState(prefersDark.matches);
-  const darkModeParams = useParameter<Partial<DarkModeStore>>("darkMode", {});
-  const { current: defaultMode, stylePreview, ...params } = darkModeParams;
-  const channel = api.getChannel();
-  // Save custom themes on init
-  const userHasExplicitlySetTheTheme = React.useMemo(
-    () => store(params).userHasExplicitlySetTheTheme,
-    [params],
-  );
-  /** Set the theme in storybook, update the local state, and emit an event */
-  const setMode = React.useCallback(
-    (mode: Mode) => {
-      const currentStore = store();
-      api.setOptions({ theme: currentStore[mode] });
-      setDark(mode === "dark");
-      api.getChannel().emit(DARK_MODE_EVENT_NAME, mode === "dark");
-      updateManager(currentStore);
-      if (stylePreview) {
-        updatePreview(currentStore);
-      }
-    },
-    [api, stylePreview],
-  );
-
-  /** Update the theme settings in localStorage, react, and storybook */
-  const updateMode = React.useCallback(
-    (mode?: Mode) => {
-      const currentStore = store();
-      const current =
-        mode || (currentStore.current === "dark" ? "light" : "dark");
-      updateStore({ ...currentStore, current });
-      setMode(current);
-    },
-    [setMode],
-  );
-
-  /** Update the theme based on the color preference */
-  function prefersDarkUpdate(event: MediaQueryListEvent) {
-    if (userHasExplicitlySetTheTheme || defaultMode) {
-      return;
-    }
-
-    updateMode(event.matches ? "dark" : "light");
-  }
-
-  /** Render the current theme */
-  const renderTheme = React.useCallback(() => {
-    const { current = "light" } = store();
-    setMode(current);
-  }, [setMode]);
-
-  /** Handle the user event and side effects */
-  const handleIconClick = () => {
-    updateMode();
-    const currentStore = store();
-    updateStore({ ...currentStore, userHasExplicitlySetTheTheme: true });
-  };
-
-  /** When storybook params change update the stored themes */
-  React.useEffect(() => {
-    const currentStore = store();
-    // Ensure we use the stores `current` value first to persist
-    // themeing between page loads and story changes.
-    updateStore({
-      ...currentStore,
-      ...darkModeParams,
-      current: currentStore.current || darkModeParams.current,
-    });
-    renderTheme();
-  }, [darkModeParams, renderTheme]);
-  React.useEffect(() => {
-    channel.on(STORY_CHANGED, renderTheme);
-    channel.on(SET_STORIES, renderTheme);
-    channel.on(DOCS_RENDERED, renderTheme);
-    prefersDark.addListener(prefersDarkUpdate);
-    return () => {
-      channel.removeListener(STORY_CHANGED, renderTheme);
-      channel.removeListener(SET_STORIES, renderTheme);
-      channel.removeListener(DOCS_RENDERED, renderTheme);
-      prefersDark.removeListener(prefersDarkUpdate);
-    };
-  });
-  React.useEffect(() => {
-    channel.on(UPDATE_DARK_MODE_EVENT_NAME, updateMode);
-    return () => {
-      channel.removeListener(UPDATE_DARK_MODE_EVENT_NAME, updateMode);
-    };
-  });
-  // Storybook's first render doesn't have the global user params loaded so we
-  // need the effect to run whenever defaultMode is updated
-  React.useEffect(() => {
-    // If a users has set the mode this is respected
-    if (userHasExplicitlySetTheTheme) {
-      return;
-    }
-
-    if (defaultMode) {
-      updateMode(defaultMode);
-    } else if (prefersDark.matches) {
-      updateMode("dark");
-    }
-  }, [defaultMode, updateMode, userHasExplicitlySetTheTheme]);
-  return (
-    <IconButton
-      key="dark-mode"
-      title={
-        isDark ? "Change theme to light mode" : "Change theme to dark mode"
-      }
-      onClick={handleIconClick}
-    >
-      {isDark ? (
-        <SunIcon aria-hidden="true" />
-      ) : (
-        <MoonIcon aria-hidden="true" />
-      )}
-    </IconButton>
-  );
-}
-
-export default DarkMode;

package/.storybook/addons/storybook-dark-mode/constants.ts

@@ -1,2 +0,0 @@
-export const DARK_MODE_EVENT_NAME = "DARK_MODE";
-export const UPDATE_DARK_MODE_EVENT_NAME = "UPDATE_DARK_MODE";

package/.storybook/addons/storybook-dark-mode/index.tsx

@@ -1,20 +0,0 @@
-import { addons, useState, useEffect } from "storybook/preview-api";
-import { DARK_MODE_EVENT_NAME } from "./constants";
-import { store } from "./Tool";
-
-/**
- * Returns the current state of storybook's dark-mode
- */
-export function useDarkMode(): boolean {
-  const [isDark, setIsDark] = useState(store().current === "dark");
-
-  useEffect(() => {
-    const chan = addons.getChannel();
-    chan.on(DARK_MODE_EVENT_NAME, setIsDark);
-    return () => chan.off(DARK_MODE_EVENT_NAME, setIsDark);
-  }, []);
-
-  return isDark;
-}
-
-export * from "./constants";

package/.storybook/addons/storybook-dark-mode/preset/manager.tsx

@@ -1,26 +0,0 @@
-import { addons } from "storybook/manager-api";
-import { Addon_TypesEnum } from "storybook/internal/types";
-import { themes } from "storybook/theming";
-import * as React from "react";
-
-import Tool, { prefersDark, store } from "../Tool";
-
-const currentStore = store();
-const currentTheme =
-  currentStore.current || (prefersDark.matches && "dark") || "light";
-
-addons.setConfig({
-  theme: {
-    ...themes[currentTheme],
-    ...currentStore[currentTheme],
-  },
-});
-
-addons.register("storybook/dark-mode", (api) => {
-  addons.add("storybook/dark-mode", {
-    title: "dark mode",
-    type: Addon_TypesEnum.TOOL,
-    match: ({ viewMode }) => viewMode === "story" || viewMode === "docs",
-    render: () => <Tool api={api} />,
-  });
-});