@vueless/storybook 0.0.75-beta.7 → 0.0.75-beta.8

package/.storybook/decorators/vue3SourceDecorator.js

@@ -1,4 +1,4 @@
-import { addons, useArgs, makeDecorator } from "@storybook/preview-api";
+import { addons, makeDecorator, useArgs } from "@storybook/preview-api";
 import { h, onMounted, watch } from "vue";
 
 const params = new URLSearchParams(window.location.search);
@@ -27,7 +27,7 @@ export const vue3SourceDecorator = makeDecorator({
     previousStoryId = context.id;
 
     // this returns a new component that computes the source code when mounted
-    // and emits an events that is handled by addons-docs
+    // and emits an event that is handled by addons-docs
     // watch args and re-emit on change
     return {
       components: { story },
@@ -38,16 +38,20 @@ export const vue3SourceDecorator = makeDecorator({
           await setSourceCode();
         });
 
-        watch(context.args, async () => {
-          // it allows changing args dynamically
-          updateArgs({ ...context.args });
-          await setSourceCode();
-        });
+        watch(
+          context.args,
+          async () => {
+            updateArgs({ ...context.args });
+            await setSourceCode();
+          },
+          { deep: true },
+        );
 
         async function setSourceCode() {
           try {
             const src = context.originalStoryFn(context.args, context.argTypes).template;
-            const code = templateSourceCode(src, context.args, context.argTypes);
+            const code = preFormat(src, context.args, context.argTypes);
+
             const channel = addons.getChannel();
 
             const emitFormattedTemplate = async () => {
@@ -64,7 +68,7 @@ export const vue3SourceDecorator = makeDecorator({
               channel.emit("storybook/docs/snippet-rendered", {
                 id: context.id,
                 args: context.args,
-                source: formattedCode,
+                source: postFormat(formattedCode),
               });
             };
 
@@ -83,22 +87,32 @@ export const vue3SourceDecorator = makeDecorator({
   },
 });
 
-function templateSourceCode(templateSource, args, argTypes) {
-  const MODEL_VALUE_KEY = "modelValue";
-  const componentArgs = {};
+function preFormat(templateSource, args, argTypes) {
+  templateSource = expandVueLoopFromTemplate(templateSource, args, argTypes);
+
+  if (args?.outerEnum) {
+    templateSource = expandOuterVueLoopFromTemplate(templateSource, args, argTypes);
+  }
+
+  const componentArgs = {
+    ...(args.class && { class: args.class }),
+  };
+
+  const enumKeys = Object.entries(args)
+    .filter(([, value]) => JSON.stringify(value)?.includes("{enumValue}"))
+    .map(([key]) => key);
 
   for (const [key, val] of Object.entries(argTypes)) {
-    if (key === MODEL_VALUE_KEY) continue;
+    if (key === "modelValue") continue;
 
-    const value = args[key];
+    const isUndefined = typeof val !== "undefined";
+    const isProps = val?.table?.category === "props";
+    const isValueDefault = args[key] === val.defaultValue;
 
-    if (
-      typeof val !== "undefined" &&
-      val.table &&
-      val.table.category === "props" &&
-      value !== val.defaultValue
-    ) {
-      componentArgs[key] = val;
+    if (isUndefined && isProps && !isValueDefault) {
+      if (!(args.enum && enumKeys.includes(key)) && key !== args.outerEnum) {
+        componentArgs[key] = val;
+      }
     }
   }
 
@@ -110,29 +124,158 @@ function templateSourceCode(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>`;
 
-  return templateSource
+  const modelValue = JSON.stringify(args["modelValue"])?.replaceAll('"', "'");
+
+  templateSource = templateSource
     .replace(/>[\s]+</g, "><")
     .trim()
     .replace(slotTemplateCodeBefore, "")
     .replace(slotTemplateCodeAfter, "")
     .replace(
-      `v-model="args.${MODEL_VALUE_KEY}"`,
-      args[MODEL_VALUE_KEY] ? `v-model="${args[MODEL_VALUE_KEY]}"` : "",
+      new RegExp(`v-model="args\\.modelValue"`, "g"),
+      args["modelValue"] ? `v-model="${modelValue}"` : "",
     )
     .replace(
-      'v-bind="args"',
+      /v-bind="args"/g,
       Object.keys(componentArgs)
-        .map((key) => " " + propToSource(kebabCase(key), args[key]))
+        .map((key) => " " + propToSource(kebabCase(key), args[key], argTypes[key]))
         .join(""),
     );
+
+  return templateSource;
+}
+
+function postFormat(code) {
+  return (
+    code
+      /* Add self-closing tag if there is no content inside */
+      .replace(/<(\w+)([^>]*)><\/\1>/g, (_, tag, attrs) => {
+        const hasText = attrs.trim().includes("\n") ? false : attrs.trim().length > 0;
+        const space = hasText ? " " : "";
+
+        return `<${tag}${attrs}${space}/>`;
+      })
+      /* Format objects in props */
+      .replace(/^(\s*):([\w-]+)="\[(\{.*?\})\]"/gm, (_, indent, propName, content) => {
+        const formatted = content
+          .split(/\},\s*\{/)
+          .map((obj, i, arr) => {
+            if (i === 0) obj += "}";
+            else if (i === arr.length - 1) obj = "{" + obj;
+            else obj = "{" + obj + "}";
+
+            return `${indent}  ${obj}`;
+          })
+          .join(",\n");
+
+        return `${indent}:${propName}="[\n${formatted}\n${indent}]"`;
+      })
+      /* Added a new line between nested elements with closing tags */
+      .replace(/(<\/[\w-]+>)\n(\s*)(<[\w-][^>]*?>)/g, (match, closeTag, indent, openTag) => {
+        return `${closeTag}\n\n${indent}${openTag}`;
+      })
+      /* Added a new line between nested elements with self-closing tags */
+      .replace(/(\/>\n)(?=\s*<\w[\s\S]*?\n\s*\/>)/g, "$1\n")
+  );
+}
+
+function expandOuterVueLoopFromTemplate(template, args, argTypes) {
+  const loopRegex = /<(\w+)[^>]*v-for[^>]*>([\s\S]*?)<\/\1>/;
+  const loopMatch = template.match(loopRegex);
+
+  if (!loopMatch) return;
+
+  const [, containerTag, innerContent] = loopMatch;
+
+  const elementRegex = /<(\w+)([^>]*)>(.*?)<\/\1>/g;
+  const elements = [...innerContent.matchAll(elementRegex)];
+
+  if (!elements.length) return;
+
+  const newRows = argTypes[args.outerEnum]?.options
+    .map((variant) => {
+      const rows = elements
+        .map(([, tag, props, children]) => {
+          return `<${tag}${props} ${args.outerEnum}="${variant}">${children}</${tag}>`;
+        })
+        .join("\n    ");
+
+      return `  <${containerTag}>\n    ${rows}\n  </${containerTag}>`;
+    })
+    .join("\n");
+
+  return template.replace(loopRegex, newRows);
+}
+
+function expandVueLoopFromTemplate(template, args, argTypes) {
+  return template.replace(
+    // eslint-disable-next-line vue/max-len
+    /<(\w+)([^>]*)\s+v-for="option\s+in\s+argTypes\?\.\[args\.enum]\?\.options"([^>]*?)>([\s\S]*?)<\/\1\s*>|<(\w+)([^>]*)\s+v-for="option\s+in\s+argTypes\?\.\[args\.enum]\?\.options"([^>]*)\/?>/g,
+    (
+      match,
+      name1,
+      pre1,
+      post1,
+      content, // For full component
+      name2,
+      pre2,
+      post2, // For self-closing component
+    ) => {
+      const componentName = name1 || name2;
+      const beforeAttrs = pre1 || pre2 || "";
+      const afterAttrs = post1 || post2 || "";
+      const slotContent = content || "";
+
+      const restProps = (beforeAttrs + " " + afterAttrs)
+        .replace(/\n/g, " ") // remove newlines
+        .replace(/\//g, "") // remove forward slashes
+        .replace(/\sv-bind="[^"]*"/g, ' v-bind="args"') // replace v-bind with args
+        .replace(/\s:key="[^"]*"/g, "") // remove :key
+        .replace(/\sv-model="[^"]*"/g, "") // remove v-model
+        .replace(/\s+/g, " ") // collapse multiple spaces
+        .trim();
+
+      return (
+        argTypes?.[args.enum]?.options
+          ?.map(
+            (option) =>
+              // eslint-disable-next-line vue/max-len
+              `<${componentName} ${generateEnumAttributes(args, option)} ${restProps}>${slotContent}</${componentName}>`,
+          )
+          ?.join("\n") || ""
+      );
+    },
+  );
+}
+
+function generateEnumAttributes(args, option) {
+  const enumKeys = Object.entries(args)
+    .filter(([, value]) => JSON.stringify(value)?.includes("{enumValue}"))
+    .map(([key]) => key);
+
+  if (args.enum) {
+    enumKeys.unshift(args.enum);
+  }
+
+  return enumKeys
+    .map((key) => {
+      const isNotPrimitive =
+        Object.keys(args[key] || {}).length || (Array.isArray(args[key]) && args[key].length);
+
+      return key in args && isNotPrimitive
+        ? `${key}="${JSON.stringify(args[key]).replaceAll('"', "'").replaceAll("{enumValue}", option)}"`
+        : `${key}="${option}"`;
+    })
+    .join(" ");
 }
 
-function propToSource(key, val) {
+function propToSource(key, val, argType) {
+  const defaultValue = argType.table?.defaultValue?.summary;
   const type = typeof val;
 
   switch (type) {
     case "boolean":
-      return val ? key : "";
+      return val || defaultValue === "false" ? key : `:${key}="${val}"`;
     case "string":
       return `${key}="${val}"`;
     case "object":

package/.storybook/index.css

@@ -104,7 +104,7 @@ body {
 .dark .sbdocs .sbdocs-content > h3,
 .dark .sbdocs .sbdocs-content > .sb-anchor > h3,
 .dark .sbdocs .sbdocs-content > .sb-anchor > p,
-.dark .sbdocs .sbdocs-content > :not(.sb-anchor) ul > li,
+.dark .sbdocs .sbdocs-content > ul > li,
 .dark .sbdocs .sbdocs-content > p,
 .dark .sbdocs .sbdocs-content > table th,
 .dark .sbdocs .sbdocs-content > table td {
@@ -579,6 +579,20 @@ body {
   border-top-left-radius: 0;    /* rounded-tl-none */
 }
 
+.dark a.sbdocs.sbdocs-a {
+  color: #6b7280; /* text-gray-500 */
+}
+
+.light a.sbdocs.sbdocs-a {
+  color: #6b7280; /* text-gray-500 */
+}
+
+.light a.sbdocs.sbdocs-a:hover,
+.dark a.sbdocs.sbdocs-a:hover{
+  text-decoration: underline dashed #6b7280; /* text-gray-500 */
+  text-underline-offset: 3px;
+}
+
 /* -------------------- Storybook story preview -------------------- */
 
 .vl-dark {

package/.storybook/main.js

@@ -1,12 +1,11 @@
 /** @type { import('@storybook/vue3-vite').StorybookConfig } */
 export default {
   stories: [
-    "../node_modules/vueless/**/stories.@(js|jsx|ts|tsx)",
-    "../node_modules/vueless/**/docs.@(mdx)",
+    "../node_modules/vueless/**/stories.{js,jsx,ts,tsx}",
+    "../node_modules/vueless/**/docs.mdx",
     /* Define a path to your own component stories. */
-    // "../.vueless/**/stories.@(js|jsx|ts|tsx)",
-    // "../.vueless/**/docs.@(mdx)",
-  ],
+    // "../src/**/stories.{js,jsx,ts,tsx}",
+    // "../src/**/docs.mdx"],
   addons: [
     "@storybook/addon-links",
     "@storybook/addon-essentials",

package/.storybook/manager-head.html

@@ -121,8 +121,6 @@ Custom dark mode related vueless loader.
       background: #1f2937 !important;
   }
 
-
-
   .search-field,
   .search-result-item {
       border-radius: 8px !important;
@@ -137,12 +135,14 @@ Custom dark mode related vueless loader.
   .light .search-result-item svg[type="component"],
   .dark .search-result-item mark {
       color: #10b981;
+      font-weight: 600;
   }
 
   .dark .sidebar-item svg[type="component"],
   .dark .search-result-item svg[type="component"],
   .light .search-result-item mark {
       color: #059669;
+      font-weight: 600;
   }
 
   .light .sidebar-item svg[type="document"],
@@ -159,6 +159,14 @@ Custom dark mode related vueless loader.
       color: #4b5563;
   }
 
+  .light .search-result-item--label {
+      color: #6b7280; /* text-gray-600 */
+  }
+
+  .dark .search-result-item--label {
+    color: #a8abb0; /* text-gray-400 */
+  }
+
   #sidebar-bottom-wrapper {
       display: none;
   }

package/.storybook/preview.js

@@ -5,6 +5,7 @@ import { getRandomId } from "vueless";
 import themeLight from "./themes/themeLight.js";
 import themeDark from "./themes/themeDark.js";
 import themeLightDocs from "./themes/themeLightDocs.js";
+
 import { storyDarkModeDecorator } from "./decorators/storyDarkModeDecorator.js";
 import { vue3SourceDecorator } from "./decorators/vue3SourceDecorator.js";
 
@@ -58,7 +59,7 @@ export const parameters = {
   },
 };
 
-/* Reload the page on error "Failed to fetch dynamically imported module..." */
+/* Reload the page on the error "Failed to fetch dynamically imported module..." */
 window.addEventListener("error", (ev) => onFailedToFetchModule(ev.message));
 window.addEventListener("unhandledrejection", (ev) => onFailedToFetchModule(ev?.reason?.message));
 

package/.storybook/vite.config.js

@@ -3,9 +3,10 @@ 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({ mode: "storybook", debug: false })],
+  plugins: [Vue(), TailwindCSS(), Vueless({ env: STORYBOOK_ENV, debug: false })],
   optimizeDeps: {
     include: [
       "cva",

package/package.json

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