@vueless/storybook 1.2.1-beta.3 → 1.2.1-beta.4

package/.storybook-js/main.js

@@ -1,5 +1,5 @@
 /** @type { import('@storybook/vue3-vite').StorybookConfig } */
-import { defineConfigWithVueless } from "vueless/storybook";
+import { defineConfigWithVueless } from "@vueless/storybook";
 
 export default defineConfigWithVueless({
   stories: [

package/.storybook-ts/main.ts

@@ -1,5 +1,5 @@
 /** @type { import('@storybook/vue3-vite').StorybookConfig } */
-import { defineConfigWithVueless } from "vueless/storybook";
+import { defineConfigWithVueless } from "@vueless/storybook";
 
 export default defineConfigWithVueless({
   stories: [

package/.storybook-ts/tsconfig.json

@@ -1,11 +1,38 @@
 {
-  "files": [],
-  "references": [
-    {
-      "path": "./tsconfig.node.json"
-    },
-    {
-      "path": "./tsconfig.app.json"
-    }
-  ]
+  "include": [
+    "**/*"
+  ],
+  "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": ".",
+
+    /* Enables all strict type-checking options. */
+    "strict": true,
+    "noImplicitThis": true,
+
+    /* Bundlers settings */
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+
+    /* JS file support. */
+    "allowJs": true,
+
+    "types": [
+      "vite/client",
+      "vueless/modules"
+    ]
+  }
 }

package/index.d.ts

@@ -1,2 +1,7 @@
+import { UnknownObject } from "vueless";
+
 export { storyDarkModeDecorator } from "./decorators/storyDarkModeDecorator";
 export { vue3SourceDecorator } from "./decorators/vue3SourceDecorator";
+
+export declare function defineConfigWithVueless(options?: UnknownObject): () => UnknownObject;
+export function getVuelessStoriesGlob(vuelessEnv?: string): Promise<string[]>;

package/index.js

@@ -1,2 +1,89 @@
 export { storyDarkModeDecorator } from "./decorators/storyDarkModeDecorator";
 export { vue3SourceDecorator } from "./decorators/vue3SourceDecorator";
+
+import { getVuelessConfig } from "vueless/utils/node/vuelessConfig.js";
+import {
+  COMPONENTS,
+  DIRECTIVES,
+  INTERNAL_ENV,
+  VUELESS_LOCAL_DIR,
+  VUELESS_PACKAGE_DIR,
+} from "vueless/constants.js";
+
+/**
+ * Defines the config for Storybook.
+ *
+ * @param {Object} config - The config object.
+ * @return {Promise<Object>} A promise that resolves to the modified config object.
+ */
+export function defineConfigWithVueless(config) {
+  return (async () => ({
+    ...config,
+    stories: [...config.stories, ...(await getVuelessStoriesGlob(config?.vuelessEnv))],
+    addons: [
+      ...new Set([
+        ...(config.addons || []),
+        "@storybook/addon-docs",
+        "@storybook/addon-links",
+        "@vueless/storybook-dark-mode",
+        "@storybook/addon-themes",
+      ]),
+    ],
+    staticDirs: ["public"],
+    framework: {
+      ...config.framework,
+      name: "@storybook/vue3-vite",
+      options: {
+        ...config.framework?.options,
+        builder: {
+          ...config.framework?.options?.builder,
+          viteConfigPath: ".storybook/vite.config.js",
+        },
+      },
+    },
+    env: (envConfig) => ({
+      ...envConfig,
+      BASE_URL: "/",
+    }),
+  }))();
+}
+
+/**
+ * Retrieves the glob pattern for Vueless stories based on the provided Vueless environment.
+ *
+ * @param {string} vuelessEnv - The Vueless environment.
+ * @return {Promise<string[]>} A promise that resolves to an array of glob patterns for Vueless stories.
+ */
+async function getVuelessStoriesGlob(vuelessEnv) {
+  const vuelessSrcDir = vuelessEnv === INTERNAL_ENV ? VUELESS_LOCAL_DIR : VUELESS_PACKAGE_DIR;
+  const vuelessConfig = await getVuelessConfig();
+  const storiesGlob = [];
+
+  for (const [directiveName, directiveDir] of Object.entries(DIRECTIVES)) {
+    const directiveGlobalConfig = vuelessConfig.directives?.[directiveName];
+    const isHiddenStoriesByDirective = directiveGlobalConfig === false;
+    const isHiddenStoriesByKey = directiveGlobalConfig?.storybook === false;
+
+    if (isHiddenStoriesByDirective || isHiddenStoriesByKey) {
+      continue;
+    }
+
+    storiesGlob.push(`../${vuelessSrcDir}/${directiveDir}/storybook/stories.{js,ts}`);
+    storiesGlob.push(`../${vuelessSrcDir}/${directiveDir}/storybook/docs.mdx`);
+  }
+
+  for (const [componentName, componentDir] of Object.entries(COMPONENTS)) {
+    const componentGlobalConfig = vuelessConfig.components?.[componentName];
+    const isHiddenStoriesByComponent = componentGlobalConfig === false;
+    const isHiddenStoriesByKey = componentGlobalConfig?.storybook === false;
+
+    if (isHiddenStoriesByComponent || isHiddenStoriesByKey) {
+      continue;
+    }
+
+    storiesGlob.push(`../${vuelessSrcDir}/${componentDir}/storybook/stories.{js,ts}`);
+    storiesGlob.push(`../${vuelessSrcDir}/${componentDir}/storybook/docs.mdx`);
+  }
+
+  return storiesGlob;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vueless/storybook",
-  "version": "1.2.1-beta.3",
+  "version": "1.2.1-beta.4",
   "description": "Simplifies Storybook configuration for Vueless UI library.",
   "author": "Johnny Grid <hello@vueless.com> (https://vueless.com)",
   "homepage": "https://vueless.com",

package/.storybook-ts/env.d.ts

@@ -1,10 +0,0 @@
-/// <reference lib="dom" />
-/// <reference lib="dom.iterable" />
-/// <reference types="vite/client" />
-/// <reference types="vueless/modules" />
-
-declare module "@vueless/storybook" {
-  import type { UnknownObject } from "vueless";
-  export function storyDarkModeDecorator(): Promise<UnknownObject>;
-  export function vue3SourceDecorator(): Promise<UnknownObject>;
-}

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

@@ -1,34 +0,0 @@
-{
-  "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": ".",
-
-    /* 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.node.json

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