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

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-js/themes/preview.css

@@ -1,5 +1,5 @@
 @import "tailwindcss";
-@import "vueless";
+@import "vueless/tailwind.css";
 
 /* -------------------- Storybook Preview UI -------------------- */
 /* -------------------- General -------------------- */

package/.storybook-js/vite.config.js

@@ -2,7 +2,7 @@ import { defineConfig } from "vite";
 
 // Plugins
 import Vue from "@vitejs/plugin-vue";
-import { Vueless, TailwindCSS } from "vueless/plugin-vite";
+import { Vueless, TailwindCSS } from "vueless/plugin-vite.js";
 import { STORYBOOK_ENV } from "vueless/constants.js";
 
 export default defineConfig({

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/themes/preview.css

@@ -1,5 +1,5 @@
 @import "tailwindcss";
-@import "vueless";
+@import "vueless/tailwind.css";
 
 /* -------------------- Storybook Preview UI -------------------- */
 /* -------------------- General -------------------- */

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/.storybook-ts/vite.config.ts

@@ -2,7 +2,7 @@ import { defineConfig } from "vite";
 
 // Plugins
 import Vue from "@vitejs/plugin-vue";
-import { Vueless, TailwindCSS } from "vueless/plugin-vite";
+import { Vueless, TailwindCSS } from "vueless/plugin-vite.js";
 import { STORYBOOK_ENV } from "vueless/constants.js";
 
 export default defineConfig({

package/README.md

@@ -16,7 +16,7 @@ npm install vueless
 npm install -D @vueless/storybook
 
 # Copy Vueless Storybook preset into your project.
-npx @vueless/storybook
+npx @vueless/storybook init
 ```
 
 ## Contributing

package/index.browser.js

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

package/index.d.ts

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

package/index.js

@@ -1,2 +1,88 @@
-export { storyDarkModeDecorator } from "./decorators/storyDarkModeDecorator";
-export { vue3SourceDecorator } from "./decorators/vue3SourceDecorator";
+export { buildWebTypes } from "./webTypes/index.js";
+
+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,12 +1,10 @@
 {
   "name": "@vueless/storybook",
-  "version": "1.2.1-beta.3",
+  "version": "1.2.1-beta.5",
   "description": "Simplifies Storybook configuration for Vueless UI library.",
   "author": "Johnny Grid <hello@vueless.com> (https://vueless.com)",
   "homepage": "https://vueless.com",
   "license": "MIT",
-  "main": "index.js",
-  "type": "module",
   "publishConfig": {
     "access": "public"
   },
@@ -58,6 +56,16 @@
     "vue-tsc": "^3.0.6",
     "vueless": "^1.2.2"
   },
+  "type": "module",
+  "main": "index.js",
+  "types": "./index.d.ts",
+  "exports": {
+    ".": {
+      "node": "./index.js",
+      "types": "./index.d.ts",
+      "browser": "./index.browser.js"
+    }
+  },
   "overrides": {
     "vue-docgen-api": {
       "vue": "latest",

package/webTypes/index.js

@@ -2,7 +2,7 @@
 import { extractConfig } from "./lib/config.js";
 import build from "./lib/build.js";
 
-export default async function buildWebTypes(vuelessConfig, srcDir) {
+export async function buildWebTypes(vuelessConfig, srcDir) {
   const config = await extractConfig();
 
   build(config, vuelessConfig, srcDir);

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"
-  },
-
-}