storybook-addon-design-system-docs 1.0.1 → 1.0.2

package/dist/preset.cjs

@@ -301,10 +301,19 @@ function validateAssetConfig(configs) {
   }
 }
 function normalizeAssetGroup(config, sidebarGroup = "Assets/", configDir) {
-  let storyPath = config.path ?? sidebarGroup;
-  if (storyPath.endsWith("/")) {
-    storyPath = `${storyPath}${config.name}`;
+  const rawPath = config.path;
+  let titlePrefix;
+  if (rawPath?.startsWith("/")) {
+    titlePrefix = rawPath.slice(1);
+  } else if (rawPath) {
+    titlePrefix = sidebarGroup ? `${sidebarGroup}/${rawPath}` : rawPath;
+  } else {
+    titlePrefix = sidebarGroup;
+  }
+  if (titlePrefix && !titlePrefix.endsWith("/")) {
+    titlePrefix += "/";
   }
+  const storyPath = titlePrefix ? `${titlePrefix}${config.name}` : config.name;
   const source = path2__default.default.isAbsolute(config.source) ? config.source : configDir ? path2__default.default.resolve(configDir, config.source) : config.source;
   const variants = {
     ...DEFAULT_VARIANT_CONFIG,
@@ -550,6 +559,11 @@ function generateAssetStories(options) {
   if (!assets || !Array.isArray(assets) || assets.length === 0) {
     return [];
   }
+  const normalizedAssets = normalizeAssetConfigs(
+    assets,
+    addonOptions.sidebarGroup,
+    configDir
+  );
   const assetsDir = path2__default.default.resolve(configDir, "design-system/assets");
   if (!fs2__namespace.default.existsSync(assetsDir)) {
     fs2__namespace.default.mkdirSync(assetsDir, { recursive: true });
@@ -568,13 +582,36 @@ function generateAssetStories(options) {
     return [];
   }
   const validFiles = /* @__PURE__ */ new Set();
-  assets.forEach((group) => {
+  normalizedAssets.forEach((group) => {
     const groupName = group.name;
     const groupTitle = group.title || groupName;
     const cleanName = groupName.replace(/[^a-zA-Z0-9]/g, "");
     const filename = `${cleanName}.mdx`;
     const filePath = path2__default.default.join(assetsDir, filename);
-    const fileContent = templateContent.replace(/\{\{group\.name\}\}/g, groupName).replace(/\{\{group\.title\}\}/g, groupTitle);
+    let fileContent = templateContent.replace(
+      /^\s*<Meta\s+title="[^"]*"\s*\/>/m,
+      `<Meta title="${group.path}" />`
+    ).replace(/\{\{group\.name\}\}/g, groupName).replace(/\{\{group\.title\}\}/g, groupTitle);
+    if (!fileContent.match(/^export\s+(const|function|class)/m)) {
+      const lines = fileContent.split("\n");
+      let lastImportIndex = -1;
+      for (let i = 0; i < lines.length; i++) {
+        if (lines[i].trim().startsWith("import ")) {
+          lastImportIndex = i;
+        }
+      }
+      if (lastImportIndex !== -1) {
+        lines.splice(
+          lastImportIndex + 1,
+          0,
+          "",
+          "// Required for Storybook indexer",
+          "export const __ignore = {};",
+          ""
+        );
+        fileContent = lines.join("\n");
+      }
+    }
     try {
       fs2__namespace.default.writeFileSync(filePath, fileContent);
       validFiles.add(filename);
@@ -654,8 +691,8 @@ function normalizeAddonOptions(options) {
   };
 }
 function validateSidebarGroup(sidebarGroup) {
-  if (typeof sidebarGroup !== "string" || !sidebarGroup.trim()) {
-    throw new Error("sidebarGroup must be a non-empty string");
+  if (typeof sidebarGroup !== "string") {
+    throw new Error("sidebarGroup must be a string");
   }
 }
 function validateSections(sections) {
@@ -678,27 +715,24 @@ function isValidSectionName(name) {
   return typeof name === "string" && VALID_SECTIONS.includes(name);
 }
 function isValidSectionObject(section) {
-  return typeof section === "object" && section !== null && isValidSectionName(section.name) && (section.path === void 0 || typeof section.path === "string" && section.path.trim().length > 0);
+  return typeof section === "object" && section !== null && isValidSectionName(section.name) && (section.path === void 0 || typeof section.path === "string");
 }
 function normalizeSection(section, sidebarGroup) {
   const name = typeof section === "string" ? section : section.name;
-  let path8 = typeof section === "string" ? sidebarGroup : section.path ?? sidebarGroup;
-  if (path8 === "/") {
-    return { name, path: name };
-  }
-  if (typeof section === "object" && section.path !== void 0) {
-    if (section.path === "/") {
-      return { name, path: name };
-    }
-    if (!path8.endsWith("/")) {
-      return { name, path: `${path8}/${name}` };
-    }
-    return { name, path: `${path8}${name}` };
+  const rawPath = typeof section === "string" ? void 0 : section.path;
+  let titlePrefix;
+  if (rawPath?.startsWith("/")) {
+    titlePrefix = rawPath.slice(1);
+  } else if (rawPath) {
+    titlePrefix = sidebarGroup ? `${sidebarGroup}/${rawPath}` : rawPath;
+  } else {
+    titlePrefix = sidebarGroup;
   }
-  if (!path8.endsWith("/")) {
-    path8 = `${path8}/`;
+  if (titlePrefix && !titlePrefix.endsWith("/")) {
+    titlePrefix += "/";
   }
-  return { name, path: `${path8}${name}` };
+  const path9 = titlePrefix ? `${titlePrefix}${name}` : name;
+  return { name, path: path9 };
 }
 function normalizeSections(sections, sidebarGroup) {
   return sections.map((section) => normalizeSection(section, sidebarGroup));
@@ -1318,6 +1352,71 @@ async function loadTheme(options) {
     `Could not determine how to load Tailwind config from '${options.tailwindConfig}'. File must be either a Tailwind config file (tailwind.config.{js,cjs,mjs,ts}) or a CSS file containing @theme.`
   );
 }
+var logger3 = new Logger("SectionGenerator");
+function generateSectionStories(options) {
+  const { configDir, sections, addonOptions } = options;
+  const generatedStories = [];
+  const sectionsDir = path2__default.default.resolve(configDir, "design-system/sections");
+  if (!fs2__namespace.default.existsSync(sectionsDir)) {
+    fs2__namespace.default.mkdirSync(sectionsDir, { recursive: true });
+  }
+  const validFiles = /* @__PURE__ */ new Set();
+  sections.forEach((section) => {
+    const templatePath = resolveTemplate(section.name, addonOptions);
+    if (!templatePath || !fs2__namespace.default.existsSync(templatePath)) {
+      logger3.warn(`Could not find template for section: ${section.name}`);
+      return;
+    }
+    try {
+      const templateContent = fs2__namespace.default.readFileSync(templatePath, "utf-8");
+      let newContent = templateContent.replace(
+        /^\s*<Meta\s+title="[^"]*"\s*\/>/m,
+        `<Meta title="${section.path}" />`
+      );
+      if (!newContent.match(/^export\s+(const|function|class)/m)) {
+        const lines = newContent.split("\n");
+        let lastImportIndex = -1;
+        for (let i = 0; i < lines.length; i++) {
+          if (lines[i].trim().startsWith("import ")) {
+            lastImportIndex = i;
+          }
+        }
+        if (lastImportIndex !== -1) {
+          lines.splice(
+            lastImportIndex + 1,
+            0,
+            "",
+            "// Required for Storybook indexer",
+            "export const __ignore = {};",
+            ""
+          );
+          newContent = lines.join("\n");
+        }
+      }
+      const cleanName = section.name.replace(/[^a-zA-Z0-9]/g, "");
+      const filename = `${cleanName}.mdx`;
+      const filePath = path2__default.default.join(sectionsDir, filename);
+      fs2__namespace.default.writeFileSync(filePath, newContent);
+      validFiles.add(filename);
+      generatedStories.push(filePath);
+    } catch (error) {
+      logger3.error(`Failed to generate section MDX for ${section.name}`, error);
+    }
+  });
+  if (fs2__namespace.default.existsSync(sectionsDir)) {
+    try {
+      const files = fs2__namespace.default.readdirSync(sectionsDir);
+      files.forEach((file) => {
+        if (file.endsWith(".mdx") && !validFiles.has(file)) {
+          fs2__namespace.default.unlinkSync(path2__default.default.join(sectionsDir, file));
+        }
+      });
+    } catch (e) {
+      logger3.warn("Failed to cleanup orphaned section files", e);
+    }
+  }
+  return generatedStories;
+}
 
 // node_modules/glob/node_modules/minimatch/dist/esm/index.js
 var import_brace_expansion = __toESM(require_brace_expansion());
@@ -1990,11 +2089,11 @@ var qmarksTestNoExtDot = ([$0]) => {
   return (f) => f.length === len && f !== "." && f !== "..";
 };
 var defaultPlatform = typeof process === "object" && process ? typeof process.env === "object" && process.env && process.env.__MINIMATCH_TESTING_PLATFORM__ || process.platform : "posix";
-var path4 = {
+var path5 = {
   win32: { sep: "\\" },
   posix: { sep: "/" }
 };
-var sep = defaultPlatform === "win32" ? path4.win32.sep : path4.posix.sep;
+var sep = defaultPlatform === "win32" ? path5.win32.sep : path5.posix.sep;
 minimatch.sep = sep;
 var GLOBSTAR = Symbol("globstar **");
 minimatch.GLOBSTAR = GLOBSTAR;
@@ -5153,12 +5252,12 @@ var PathBase = class {
   /**
    * Get the Path object referenced by the string path, resolved from this Path
    */
-  resolve(path8) {
-    if (!path8) {
+  resolve(path9) {
+    if (!path9) {
       return this;
     }
-    const rootPath = this.getRootString(path8);
-    const dir = path8.substring(rootPath.length);
+    const rootPath = this.getRootString(path9);
+    const dir = path9.substring(rootPath.length);
     const dirParts = dir.split(this.splitSep);
     const result = rootPath ? this.getRoot(rootPath).#resolveParts(dirParts) : this.#resolveParts(dirParts);
     return result;
@@ -5910,8 +6009,8 @@ var PathWin32 = class _PathWin32 extends PathBase {
   /**
    * @internal
    */
-  getRootString(path8) {
-    return path2.win32.parse(path8).root;
+  getRootString(path9) {
+    return path2.win32.parse(path9).root;
   }
   /**
    * @internal
@@ -5957,8 +6056,8 @@ var PathPosix = class _PathPosix extends PathBase {
   /**
    * @internal
    */
-  getRootString(path8) {
-    return path8.startsWith("/") ? "/" : "";
+  getRootString(path9) {
+    return path9.startsWith("/") ? "/" : "";
   }
   /**
    * @internal
@@ -6007,8 +6106,8 @@ var PathScurryBase = class {
    *
    * @internal
    */
-  constructor(cwd = process.cwd(), pathImpl, sep2, { nocase, childrenCacheSize = 16 * 1024, fs: fs3 = defaultFS } = {}) {
-    this.#fs = fsFromOption(fs3);
+  constructor(cwd = process.cwd(), pathImpl, sep2, { nocase, childrenCacheSize = 16 * 1024, fs: fs4 = defaultFS } = {}) {
+    this.#fs = fsFromOption(fs4);
     if (cwd instanceof URL || cwd.startsWith("file://")) {
       cwd = url.fileURLToPath(cwd);
     }
@@ -6047,11 +6146,11 @@ var PathScurryBase = class {
   /**
    * Get the depth of a provided path, string, or the cwd
    */
-  depth(path8 = this.cwd) {
-    if (typeof path8 === "string") {
-      path8 = this.cwd.resolve(path8);
+  depth(path9 = this.cwd) {
+    if (typeof path9 === "string") {
+      path9 = this.cwd.resolve(path9);
     }
-    return path8.depth();
+    return path9.depth();
   }
   /**
    * Return the cache of child entries.  Exposed so subclasses can create
@@ -6538,9 +6637,9 @@ var PathScurryBase = class {
     process2();
     return results;
   }
-  chdir(path8 = this.cwd) {
+  chdir(path9 = this.cwd) {
     const oldCwd = this.cwd;
-    this.cwd = typeof path8 === "string" ? this.cwd.resolve(path8) : path8;
+    this.cwd = typeof path9 === "string" ? this.cwd.resolve(path9) : path9;
     this.cwd[setAsCwd](oldCwd);
   }
 };
@@ -6566,8 +6665,8 @@ var PathScurryWin32 = class extends PathScurryBase {
   /**
    * @internal
    */
-  newRoot(fs3) {
-    return new PathWin32(this.rootPath, IFDIR, void 0, this.roots, this.nocase, this.childrenCache(), { fs: fs3 });
+  newRoot(fs4) {
+    return new PathWin32(this.rootPath, IFDIR, void 0, this.roots, this.nocase, this.childrenCache(), { fs: fs4 });
   }
   /**
    * Return true if the provided path string is an absolute path
@@ -6595,8 +6694,8 @@ var PathScurryPosix = class extends PathScurryBase {
   /**
    * @internal
    */
-  newRoot(fs3) {
-    return new PathPosix(this.rootPath, IFDIR, void 0, this.roots, this.nocase, this.childrenCache(), { fs: fs3 });
+  newRoot(fs4) {
+    return new PathPosix(this.rootPath, IFDIR, void 0, this.roots, this.nocase, this.childrenCache(), { fs: fs4 });
   }
   /**
    * Return true if the provided path string is an absolute path
@@ -6896,8 +6995,8 @@ var MatchRecord = class {
   }
   // match, absolute, ifdir
   entries() {
-    return [...this.store.entries()].map(([path8, n]) => [
-      path8,
+    return [...this.store.entries()].map(([path9, n]) => [
+      path9,
       !!(n & 2),
       !!(n & 1)
     ]);
@@ -7102,9 +7201,9 @@ var GlobUtil = class {
   signal;
   maxDepth;
   includeChildMatches;
-  constructor(patterns, path8, opts) {
+  constructor(patterns, path9, opts) {
     this.patterns = patterns;
-    this.path = path8;
+    this.path = path9;
     this.opts = opts;
     this.#sep = !opts.posix && opts.platform === "win32" ? "\\" : "/";
     this.includeChildMatches = opts.includeChildMatches !== false;
@@ -7123,11 +7222,11 @@ var GlobUtil = class {
       });
     }
   }
-  #ignored(path8) {
-    return this.seen.has(path8) || !!this.#ignore?.ignored?.(path8);
+  #ignored(path9) {
+    return this.seen.has(path9) || !!this.#ignore?.ignored?.(path9);
   }
-  #childrenIgnored(path8) {
-    return !!this.#ignore?.childrenIgnored?.(path8);
+  #childrenIgnored(path9) {
+    return !!this.#ignore?.childrenIgnored?.(path9);
   }
   // backpressure mechanism
   pause() {
@@ -7342,8 +7441,8 @@ var GlobUtil = class {
 };
 var GlobWalker = class extends GlobUtil {
   matches = /* @__PURE__ */ new Set();
-  constructor(patterns, path8, opts) {
-    super(patterns, path8, opts);
+  constructor(patterns, path9, opts) {
+    super(patterns, path9, opts);
   }
   matchEmit(e) {
     this.matches.add(e);
@@ -7380,8 +7479,8 @@ var GlobWalker = class extends GlobUtil {
 };
 var GlobStream = class extends GlobUtil {
   results;
-  constructor(patterns, path8, opts) {
-    super(patterns, path8, opts);
+  constructor(patterns, path9, opts) {
+    super(patterns, path9, opts);
     this.results = new Minipass({
       signal: this.signal,
       objectMode: true
@@ -7870,9 +7969,15 @@ function createAssetManager(groups) {
 }
 
 // src/addon/unplugin.ts
-var logger3 = new Logger("unplugin");
+var logger4 = new Logger("unplugin");
 var unplugin = unplugin$1.createUnplugin((options) => {
   const assetManager = options.assetOptions?.groups && options.assetOptions.groups.length > 0 ? createAssetManager(options.assetOptions.groups) : void 0;
+  const sectionPathMap = /* @__PURE__ */ new Map();
+  if (options.addonOptions?.sections) {
+    options.addonOptions.sections.forEach((section) => {
+      sectionPathMap.set(section.name.toLowerCase(), section.path);
+    });
+  }
   return {
     name: "unplugin-design-system-docs",
     enforce: "pre",
@@ -7892,12 +7997,15 @@ var unplugin = unplugin$1.createUnplugin((options) => {
     loadInclude(id) {
       return id === DESIGN_SYSTEM_DATA_ID || id === ASSET_DATA_ID || id.startsWith(ASSET_GROUP_ID_PREFIX);
     },
+    transformInclude(id) {
+      return id.includes("/templates/") && id.endsWith(".mdx");
+    },
     async load(id) {
       try {
         if (id === DESIGN_SYSTEM_DATA_ID) {
           if (!options.configPath) {
             const errorMsg = "No Tailwind config path found. Cannot load theme data. This is likely a bug in the addon setup.";
-            logger3.error(errorMsg);
+            logger4.error(errorMsg);
             throw new Error(errorMsg);
           }
           if (this.addWatchFile && options.configPath) {
@@ -7926,24 +8034,56 @@ export const borderRadius = ${data.borderRadius ? JSON.stringify(data.borderRadi
         }
         if (id.startsWith(ASSET_GROUP_ID_PREFIX)) {
           const groupName = id.slice(ASSET_GROUP_ID_PREFIX.length);
-          logger3.info(`Loading asset group data: ${groupName}`);
+          logger4.info(`Loading asset group data: ${groupName}`);
           if (!assetManager) {
-            logger3.warn(`No asset manager available for group: ${groupName}`);
+            logger4.warn(`No asset manager available for group: ${groupName}`);
             return "export default {}";
           }
           const group = await assetManager.getGroup(groupName);
           if (!group) {
-            logger3.warn(`Asset group not found: ${groupName}`);
+            logger4.warn(`Asset group not found: ${groupName}`);
             return "export default {}";
           }
           return `export default ${JSON.stringify(group)}`;
         }
       } catch (error) {
         const errorMessage = error instanceof Error ? error.message : String(error);
-        logger3.error(`Failed to load virtual module: ${id}`, error);
+        logger4.error(`Failed to load virtual module: ${id}`, error);
         throw new Error(`[storybook-addon-design-system-docs] ${errorMessage}`);
       }
     },
+    transform(code, id) {
+      if (!id.includes("/templates/") || !id.endsWith(".mdx")) {
+        return null;
+      }
+      logger4.debug(`Transform called for template: ${id}`);
+      const match2 = id.match(/\/templates\/([^/]+)\.mdx$/);
+      if (!match2) {
+        logger4.debug(`No match found for template path pattern in: ${id}`);
+        return null;
+      }
+      const templateName = match2[1];
+      const sectionName = templateName.split("-").map((part) => part.charAt(0).toUpperCase() + part.slice(1)).join("");
+      logger4.debug(`Template: ${templateName}, Section: ${sectionName}`);
+      const configuredPath = sectionPathMap.get(sectionName.toLowerCase());
+      if (!configuredPath) {
+        logger4.debug(
+          `No configured path found for section: ${sectionName.toLowerCase()}`
+        );
+        logger4.debug(
+          `Available sections: ${Array.from(sectionPathMap.keys()).join(", ")}`
+        );
+        return null;
+      }
+      logger4.info(
+        `Replacing Meta title in ${templateName}.mdx with path: ${configuredPath}`
+      );
+      const transformedCode = code.replace(
+        /(<Meta\s+title=")[^"]*(")/,
+        `$1${configuredPath}$2`
+      );
+      return { code: transformedCode };
+    },
     vite: {
       handleHotUpdate({ file, server }) {
         if (isTwConfigPath(file) || isTwCssPath(file)) {
@@ -7956,7 +8096,7 @@ export const borderRadius = ${data.borderRadius ? JSON.stringify(data.borderRadi
           if (!assetManager) return;
           const matchingGroup = assetManager.findMatchingGroup(filePath);
           if (!matchingGroup) return;
-          logger3.info(`Asset changed in group ${matchingGroup}: ${filePath}`);
+          logger4.info(`Asset changed in group ${matchingGroup}: ${filePath}`);
           assetManager.invalidateGroup(matchingGroup);
           const groupModule = server2.moduleGraph.getModuleById(
             ASSET_GROUP_ID_PREFIX + matchingGroup
@@ -7974,10 +8114,10 @@ export const borderRadius = ${data.borderRadius ? JSON.stringify(data.borderRadi
 var { vite } = unplugin;
 
 // src/addon/preset.ts
-var logger4 = new Logger("Preset");
+var logger5 = new Logger("Preset");
 function createAddonOptions(options) {
   if (!options.tailwindConfig) {
-    logger4.error("tailwindConfig missing from options:", options);
+    logger5.error("tailwindConfig missing from options:", options);
     throw new Error(
       'tailwindConfig option is required. Please specify the path to your Tailwind config file. Example: { tailwindConfig: "../tailwind.config.js" }'
     );
@@ -8039,14 +8179,14 @@ var staticDirs = async (existingStaticDirs, options) => {
       }
     });
     if (newStaticDirs.length > 0) {
-      logger4.info("Registering asset directories as staticDirs:", {
+      logger5.debug("Registering asset directories as staticDirs:", {
         staticDirs: newStaticDirs
       });
       return [...existingStaticDirs, ...newStaticDirs];
     }
     return existingStaticDirs;
   } catch (error) {
-    logger4.error("Failed to configure static directories", error);
+    logger5.error("Failed to configure static directories", error);
     return existingStaticDirs;
   }
 };
@@ -8054,18 +8194,12 @@ var stories = async (entry = [], options) => {
   try {
     const addonOptions = createAddonOptions(options);
     const newStories = [];
-    if (addonOptions.forceSingleDoc) {
-      const templatePath = resolveTemplate(
-        addonOptions.forceSingleDoc.name,
-        addonOptions
-      );
-      newStories.push(templatePath);
-    } else {
-      addonOptions.sections.forEach((section) => {
-        const templatePath = resolveTemplate(section.name, addonOptions);
-        newStories.push(templatePath);
-      });
-    }
+    const sectionStories = generateSectionStories({
+      configDir: options.configDir,
+      sections: addonOptions.forceSingleDoc ? [addonOptions.forceSingleDoc] : addonOptions.sections,
+      addonOptions
+    });
+    newStories.push(...sectionStories);
     const assetStories = generateAssetStories({
       configDir: options.configDir,
       assets: options.assets,
@@ -8074,7 +8208,7 @@ var stories = async (entry = [], options) => {
     newStories.push(...assetStories);
     return [...entry, ...newStories];
   } catch (error) {
-    logger4.error("Failed to inject config into stories", error);
+    logger5.error("Failed to inject config into stories", error);
     return entry;
   }
 };