vueless 1.2.3-beta.6 → 1.2.3-beta.8

package/README.md

@@ -2,7 +2,7 @@
 
 # Vueless UI
 
-Vueless is an open-source UI library and design system framework for Vue.js 3 and Nuxt.js 3, built on top of Tailwind CSS v4.
+Vueless is an open-source UI library and design system framework for Vue.js 3 and Nuxt.js 3 / 4, built on top of Tailwind CSS v4.
 
 It’s completely styleless, allowing you to extend or override default styles without modifying the components themselves — only your custom styles are included in the final build.
 
@@ -108,6 +108,14 @@ export default defineNuxtConfig({
 @import "vueless";
 ```
 
+## Ecosystem
+
+* [@vueless/storybook](https://github.com/vuelessjs/vueless-storybook) - Storybook preset for Vueless UI component library [(docs)](https://docs.vueless.com/installation/storybook).
+* [@vueless/nuxt](https://github.com/vuelessjs/vueless-module-nuxt) - Vueless UI module for Nuxt.js [(docs)](https://docs.vueless.com/installation/nuxt).
+* [create-vueless](https://github.com/vuelessjs/vueless-create) - CLI tool to quickly start a Vueless UI project from a template [(docs)](https://docs.vueless.com/installation/vue).
+  * [vueless-quickstart](https://github.com/vuelessjs/vueless-quickstart) - Vue + Vueless UI + JavaScript project template.
+  * [vueless-quickstart-ts](https://github.com/vuelessjs/vueless-quickstart-ts) - Vue + Vueless UI + TypeScript project template.
+
 ## Contributing
 
 * We encourage you to contribute to Vueless! Please check out the
@@ -120,5 +128,8 @@ check out our [security policy](SECURITY.md) for guidelines.
 
 Vueless is released under the [MIT License](https://opensource.org/licenses/MIT).
 
+---
+From Ukrainians to a Peaceful World 🇺🇦
+
 
 

package/modules.d.ts

@@ -20,12 +20,6 @@ declare module "*.svg?skipsvgo" {
   export default component;
 }
 
-declare module "vueless/storybook" {
-  import type { Config, UnknownObject } from "./types";
-  export function defineConfigWithVueless(config: Config): Promise<UnknownObject>;
-  export function getVuelessStoriesGlob(vuelessEnv: string): Promise<string[]>;
-}
-
 declare module "virtual:vueless/icons" {
   import type { UnknownArray } from "./types";
   export const cachedIcons: UnknownArray;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "1.2.3-beta.6",
+  "version": "1.2.3-beta.8",
   "description": "Vue Styleless UI Component Library, powered by Tailwind CSS.",
   "author": "Johnny Grid <hello@vueless.com> (https://vueless.com)",
   "homepage": "https://vueless.com",
@@ -9,9 +9,10 @@
     "access": "public"
   },
   "scripts": {
-    "dev:docs": "storybook dev -p 6006 --docs --no-open",
-    "dev": "storybook dev -p 6006 --no-open",
-    "build": "storybook build --docs",
+    "link:package": "rm -rf node_modules/vueless && ln -s ../src ./node_modules/vueless",
+    "dev:docs": "npm run link:package && storybook dev -p 6006 --docs --no-open",
+    "dev": "npm run link:package && storybook dev -p 6006 --no-open",
+    "build": "npm run link:package && storybook build --docs",
     "preview": "vite preview --host --outDir=storybook-static",
     "ts:check": "vue-tsc --build --force",
     "release:icons": "npx node .scripts/icons",
@@ -21,8 +22,8 @@
     "release:patch": "release-it patch --ci --npm.publish --git.tag --github.release",
     "release:minor": "release-it minor --ci --npm.publish --git.tag --github.release",
     "release:major": "release-it major --ci --npm.publish --git.tag --github.release",
-    "lint": "eslint --no-fix src/ test/ .storybook/ .vueless/",
-    "lint:fix": "eslint --fix src/ test/ .storybook/ .vueless/",
+    "lint": "eslint --no-fix src/ test/ .storybook/ .vueless/ .scripts/",
+    "lint:fix": "eslint --fix src/ test/ .storybook/ .vueless/ .scripts/",
     "lint:ci": "eslint --no-fix --max-warnings=0",
     "test": "vitest",
     "test:ci": "vitest --run"
@@ -55,7 +56,7 @@
     "@vue/eslint-config-typescript": "^14.6.0",
     "@vue/test-utils": "^2.4.6",
     "@vue/tsconfig": "^0.7.0",
-    "@vueless/storybook": "^1.1.3-beta.10",
+    "@vueless/storybook": "^1.2.1",
     "eslint": "^9.32.0",
     "eslint-plugin-storybook": "^9.0.18",
     "eslint-plugin-vue": "^10.3.0",
@@ -70,6 +71,14 @@
     "vue-router": "^4.5.1",
     "vue-tsc": "^3.0.4"
   },
+  "peerDependencies": {
+    "vue-router": "^4.5.0"
+  },
+  "peerDependenciesMeta": {
+    "vue-router": {
+      "optional": true
+    }
+  },
   "sideEffects": false,
   "style": "tailwind.css",
   "types": "index.d.ts",

package/ui.boilerplate/storybook/docs.mdx

@@ -1,7 +1,7 @@
 import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Source } from "@storybook/addon-docs/blocks";
 import { getSource } from "../../utils/storybook";
 
-import * as stories from "./stories.js";
+import * as stories from "./stories";
 import defaultConfig from "../config?raw"
 
 <Meta of={stories} />

package/ui.button-link/storybook/stories.ts

@@ -31,7 +31,10 @@ export default {
   },
   parameters: {
     docs: {
-      ...getDocsDescription(ULink.__name),
+      ...getDocsDescription(
+        ULink.__name,
+        "For Vue projects <a href='https://router.vuejs.org' target='_blank'>VueRouter</a> needs to be installed.",
+      ),
     },
   },
 } as Meta;

package/utils/node/webTypes.js

@@ -3,7 +3,7 @@ import { getVuelessConfig } from "./vuelessConfig.js";
 export async function buildWebTypes({ vuelessSrcDir, basePath } = {}) {
   try {
     const vuelessConfig = await getVuelessConfig(basePath);
-    const { default: build } = await import("@vueless/storybook/webTypes/index.js");
+    const { buildWebTypes: build } = await import("@vueless/storybook");
 
     await build(vuelessConfig, vuelessSrcDir);
   } catch (error) {

package/utils/storybook.ts

@@ -334,7 +334,7 @@ export function getSlotsFragment(defaultTemplate: string) {
 /**
  * Create story param config to show component description with a link on GitHub.
  */
-export function getDocsDescription(componentName: string | undefined) {
+export function getDocsDescription(componentName: string | undefined, afterText = "") {
   if (!componentName) {
     return {};
   }
@@ -342,7 +342,7 @@ export function getDocsDescription(componentName: string | undefined) {
   let viewOnGitHub = "";
 
   if (COMPONENTS[componentName as ComponentNames]) {
-    viewOnGitHub = `| <a href="https://github.com/vuelessjs/vueless/tree/main/src/${COMPONENTS[componentName as ComponentNames]}" target="_blank">View on GitHub</a>`;
+    viewOnGitHub = `| <a href="https://github.com/vuelessjs/vueless/tree/main/src/${COMPONENTS[componentName as ComponentNames]}" target="_blank">View on GitHub</a><br/>${afterText}`;
   }
 
   return {

package/utils/node/storybook.d.ts

@@ -1 +0,0 @@
-export function defineConfigWithVueless(config: Object): Promise<Object>;

package/utils/node/storybook.js

@@ -1,86 +0,0 @@
-import { getVuelessConfig } from "./vuelessConfig.js";
-import {
-  COMPONENTS,
-  DIRECTIVES,
-  INTERNAL_ENV,
-  VUELESS_LOCAL_DIR,
-  VUELESS_PACKAGE_DIR,
-} from "../../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;
-}