vueless 1.2.1-beta.2 → 1.2.1

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.1-beta.2",
+  "version": "1.2.1",
   "description": "Vue Styleless UI Component Library, powered by Tailwind CSS.",
   "author": "Johnny Grid <hello@vueless.com> (https://vueless.com)",
   "homepage": "https://vueless.com",
@@ -90,7 +90,6 @@
     "./constants.js": "./constants.js",
     "./plugin-vite": "./plugin-vite.js",
     "./plugin-vite.js": "./plugin-vite.js",
-    "./storybook": "./utils/node/storybook.js",
     "./tailwind.css": "./tailwind.css",
     "./types": "./types.ts",
     "./modules": {

package/plugin-vite.js

@@ -120,21 +120,21 @@ export const Vueless = function (options = {}) {
     configResolved: async (config) => {
       if (!isNuxtModuleEnv) {
         /* auto import user configs */
-        await autoImportUserConfigs(basePath);
+        await autoImportUserConfigs();
 
         /* merge and cache component configs. */
         await cacheMergedConfigs(vuelessSrcDir);
       }
 
-      await buildWebTypes({ vuelessSrcDir, basePath });
-      await setCustomPropTypes({ vuelessSrcDir, basePath });
+      await buildWebTypes(vuelessSrcDir);
+      await setCustomPropTypes(vuelessSrcDir);
 
       /* collect used in project colors for tailwind safelist */
-      await createTailwindSafelist({ env, srcDir: vuelessSrcDir, targetFiles, basePath, debug });
+      await createTailwindSafelist({ env, srcDir: vuelessSrcDir, targetFiles, debug });
 
       /* cache vueless built-in and project icons */
       await removeIconsCache(basePath);
-      await createIconsCache({ env, targetFiles, basePath, debug });
+      await createIconsCache({ env, debug, targetFiles });
 
       if (isNuxtModuleEnv) {
         await copyIconsCache(basePath);
@@ -170,7 +170,7 @@ export const Vueless = function (options = {}) {
 
       if (hasIconChanges && currentIconLines.length) {
         /* cache vueless built-in and project icons */
-        await createIconsCache({ env, targetFiles: [file], basePath, debug });
+        await createIconsCache({ env, debug, targetFiles: [file] });
 
         if (isNuxtModuleEnv) {
           await copyIconsCache(basePath);

package/utils/node/dynamicProps.d.ts

@@ -1,2 +1,2 @@
-export function setCustomPropTypes({ vuelessSrcDir, basePath }?: {}): Promise<void>;
+export function setCustomPropTypes(srcDir: any): Promise<void>;
 export function removeCustomPropTypes(srcDir: any): Promise<void>;

package/utils/node/dynamicProps.js

@@ -3,7 +3,7 @@ import { existsSync } from "node:fs";
 import path from "node:path";
 
 import { removeFolderIfEmpty } from "./helper.js";
-import { getVuelessConfig } from "./vuelessConfig.js";
+import { vuelessConfig } from "./vuelessConfig.js";
 
 import {
   CACHE_DIR,
@@ -25,9 +25,7 @@ const WORD_IN_QUOTE_REG_EXP = /"([^"]+)"/g;
 
 const DEFAULT_SAFE_COLORS = [PRIMARY_COLOR, GRAYSCALE_COLOR, INHERIT_COLOR, TEXT_COLOR];
 
-export async function setCustomPropTypes({ vuelessSrcDir, basePath } = {}) {
-  const vuelessConfig = await getVuelessConfig(basePath);
-
+export async function setCustomPropTypes(srcDir) {
   for await (const [componentName, componentDir] of Object.entries(COMPONENTS)) {
     let componentGlobalConfig = vuelessConfig.components?.[componentName];
 
@@ -80,10 +78,8 @@ export async function setCustomPropTypes({ vuelessSrcDir, basePath } = {}) {
     const isCustomProps = componentGlobalConfig && componentGlobalConfig.props;
 
     if (isCustomProps) {
-      const cachePath = path.join(vuelessSrcDir, componentDir);
-
-      await cacheComponentTypes(cachePath);
-      await modifyComponentTypes(cachePath, componentGlobalConfig.props);
+      await cacheComponentTypes(path.join(srcDir, componentDir));
+      await modifyComponentTypes(path.join(srcDir, componentDir), componentGlobalConfig.props);
     }
   }
 }

package/utils/node/loaderIcon.d.ts

@@ -1,4 +1,4 @@
-export function createIconsCache({ env, debug, targetFiles, basePath }?: string): Promise<void>;
+export function createIconsCache({ env, debug, targetFiles }?: string): Promise<void>;
 export function removeIconsCache(basePath: string, isVuelessEnv?: boolean): Promise<void>;
 export function copyIconsCache(basePath: string, isVuelessEnv?: boolean): Promise<void>;
 export function generateIconExports(): string;

package/utils/node/loaderIcon.js

@@ -11,7 +11,7 @@ import { cwd } from "node:process";
 import { rm, cp } from "node:fs/promises";
 import { createRequire } from "module";
 
-import { getVuelessConfig } from "./vuelessConfig.js";
+import { vuelessConfig } from "./vuelessConfig.js";
 import { getDirFiles, getMergedComponentConfig } from "./helper.js";
 import {
   ICONS_DIR,
@@ -34,9 +34,8 @@ let uIconDefaults = {};
  * @param {string} env
  * @param {boolean} debug
  * @param {Array} targetFiles
- * @param {string} basePath
  */
-export async function createIconsCache({ env, debug = false, targetFiles = [], basePath } = {}) {
+export async function createIconsCache({ env, debug = false, targetFiles = [] } = {}) {
   const isInternalEnv = env === INTERNAL_ENV;
   const isStorybookEnv = env === STORYBOOK_ENV;
 
@@ -56,8 +55,6 @@ export async function createIconsCache({ env, debug = false, targetFiles = [], b
     ...vuelessMergedConfigFiles,
   ];
 
-  const vuelessConfig = await getVuelessConfig(basePath);
-
   if (isInternalEnv) {
     const storybookFiles = [];
     const internalFiles = [];
@@ -68,13 +65,13 @@ export async function createIconsCache({ env, debug = false, targetFiles = [], b
         : internalFiles.push(file);
     }
 
-    await findAndCopyIcons(storybookFiles, STORYBOOK_ICONS_LIBRARY, vuelessConfig, debug);
-    await findAndCopyIcons(internalFiles, INTERNAL_ICONS_LIBRARY, vuelessConfig, debug);
+    await findAndCopyIcons(storybookFiles, STORYBOOK_ICONS_LIBRARY, debug);
+    await findAndCopyIcons(internalFiles, INTERNAL_ICONS_LIBRARY, debug);
   }
 
   if (!isInternalEnv) {
     await cachePackageIcons(isStorybookEnv);
-    await findAndCopyIcons(files, uIconDefaults.library, vuelessConfig, debug);
+    await findAndCopyIcons(files, uIconDefaults.library, debug);
   }
 }
 
@@ -183,10 +180,9 @@ async function cachePackageIcons(isStorybookEnv) {
  * Scan the project for icon names and copy found icons to the cache.
  * @param {Array} files
  * @param {string} library
- * @param {object} vuelessConfig
  * @param {boolean} debug
  */
-async function findAndCopyIcons(files, library, vuelessConfig, debug) {
+async function findAndCopyIcons(files, library, debug) {
   const safelistIcons = vuelessConfig.components?.["UIcon"]?.safelistIcons;
 
   const validIconNamesRegex = /^(?!icon$|name$)[a-z0-9_-]+$/;

package/utils/node/storybook.d.ts

@@ -1 +1,2 @@
 export function defineConfigWithVueless(config: Object): Promise<Object>;
+export function getVuelessStoriesGlob(vuelessEnv: string, basePath: string): Promise<string[]>;

package/utils/node/storybook.js

@@ -1,4 +1,5 @@
 import { getVuelessConfig } from "./vuelessConfig.js";
+import { autoImportUserConfigs } from "./helper.js";
 import {
   COMPONENTS,
   DIRECTIVES,
@@ -16,7 +17,10 @@ import {
 export function defineConfigWithVueless(config) {
   return (async () => ({
     ...config,
-    stories: [...config.stories, ...(await getVuelessStoriesGlob(config?.vuelessEnv))],
+    stories: [
+      ...config.stories,
+      ...(await getVuelessStoriesGlob(config?.vuelessEnv, config?.basePath)),
+    ],
     addons: [
       ...new Set([
         ...(config.addons || []),
@@ -26,7 +30,6 @@ export function defineConfigWithVueless(config) {
         "@storybook/addon-themes",
       ]),
     ],
-    staticDirs: ["public"],
     framework: {
       ...config.framework,
       name: "@storybook/vue3-vite",
@@ -49,9 +52,13 @@ export function defineConfigWithVueless(config) {
  * Retrieves the glob pattern for Vueless stories based on the provided Vueless environment.
  *
  * @param {string} vuelessEnv - The Vueless environment.
+ * @param {string} basePath - The Project base path.
  * @return {Promise<string[]>} A promise that resolves to an array of glob patterns for Vueless stories.
  */
-async function getVuelessStoriesGlob(vuelessEnv) {
+export async function getVuelessStoriesGlob(vuelessEnv, basePath) {
+  /* Auto import user configs. */
+  await autoImportUserConfigs(basePath);
+
   const vuelessSrcDir = vuelessEnv === INTERNAL_ENV ? VUELESS_LOCAL_DIR : VUELESS_PACKAGE_DIR;
   const vuelessConfig = await getVuelessConfig();
   const storiesGlob = [];

package/utils/node/tailwindSafelist.d.ts

@@ -1,5 +1,5 @@
 export function clearTailwindSafelist(): Promise<void>;
-export function createTailwindSafelist({ env, srcDir, targetFiles, basePath }?: {
+export function createTailwindSafelist({ env, srcDir, targetFiles }?: {
     env: string;
     srcDir: string;
     targetFiles?: string[] | undefined;

package/utils/node/tailwindSafelist.js

@@ -5,7 +5,7 @@ import { readFile, unlink, writeFile, mkdir } from "node:fs/promises";
 import { merge } from "lodash-es";
 
 import { getDefaultComponentConfig, getMergedComponentConfig, getDirFiles } from "./helper.js";
-import { getVuelessConfig } from "./vuelessConfig.js";
+import { vuelessConfig } from "./vuelessConfig.js";
 import {
   COMPONENTS,
   INTERNAL_ENV,
@@ -50,31 +50,25 @@ export async function clearTailwindSafelist() {
  * @param {string[]} [options.targetFiles=[]] - Optional array of target file paths to include in the safelist generation.
  * @return {Promise<void>} A promise that resolves when the safelist file is successfully created and written to disk.
  */
-export async function createTailwindSafelist({ env, srcDir, targetFiles, basePath } = {}) {
+export async function createTailwindSafelist({ env, srcDir, targetFiles = [] } = {}) {
   const isStorybookEnv = env === STORYBOOK_ENV;
   const isInternalEnv = env === INTERNAL_ENV;
 
-  const vuelessConfig = await getVuelessConfig(basePath);
-
   /* Safelist dynamic color classes in components. */
-  const classes = await getComponentsSafelistClasses(vuelessConfig, {
+  const classes = await getComponentsSafelistClasses({
     env: { isStorybookEnv, isInternalEnv },
     targetFiles,
     srcDir,
   });
 
   /* Safelist all color shades to allow runtime color switching feature. */
-  const runtimeColorCSSVariables = getRuntimeColorCSSVariables(
-    vuelessConfig,
-    isStorybookEnv,
-    isInternalEnv,
-  );
+  const runtimeColorCSSVariables = getRuntimeColorCSSVariables(isStorybookEnv, isInternalEnv);
 
   /* Safelist primary and neutral color variables. */
-  let brandColorCSSVariables = getBrandColorCSSVariables(vuelessConfig, isInternalEnv);
+  let brandColorCSSVariables = getBrandColorCSSVariables(isInternalEnv);
 
   /* Safelist all color variables to allow runtime color switching feature. */
-  const themeCSSVariables = getThemeCSSVariables(vuelessConfig);
+  const themeCSSVariables = getThemeCSSVariables();
 
   const safelist = [
     ...new Set([
@@ -97,12 +91,11 @@ export async function createTailwindSafelist({ env, srcDir, targetFiles, basePat
  * Generates a list of runtime CSS color variables based on the environment
  * and available configuration.
  *
- * @param {object} vuelessConfig - The Vueless config object.
  * @param {boolean} isStorybookEnv - Indicates if the method is executed in a Storybook environment.
  * @param {boolean} isInternalEnv - Indicates if the method is executed in an Internal environment.
  * @return {string[]} An array of strings, each representing CSS variable definitions for colors and shades.
  */
-function getRuntimeColorCSSVariables(vuelessConfig, isStorybookEnv, isInternalEnv) {
+function getRuntimeColorCSSVariables(isStorybookEnv, isInternalEnv) {
   if (!isStorybookEnv && !isInternalEnv && !vuelessConfig.runtimeColors) return [];
 
   const colors = vuelessConfig.runtimeColors?.length
@@ -117,11 +110,10 @@ function getRuntimeColorCSSVariables(vuelessConfig, isStorybookEnv, isInternalEn
 /**
  * Generates an array of CSS variable strings for `primary` and `neutral` colors based on environment settings.
  *
- * @param {object} vuelessConfig - The Vueless config object.
  * @param {boolean} isInternalEnv - Indicates whether the current environment is internal.
  * @return {string[]} An array of CSS variable strings representing brand colors and their shades.
  */
-function getBrandColorCSSVariables(vuelessConfig, isInternalEnv) {
+function getBrandColorCSSVariables(isInternalEnv) {
   if (isInternalEnv) return [];
 
   const colors = [
@@ -140,10 +132,9 @@ function getBrandColorCSSVariables(vuelessConfig, isInternalEnv) {
  * This method combines theme settings from default and custom configurations and
  * returns an array of variable values for each theme.
  *
- * @param {object} vuelessConfig - The Vueless config object.
  * @return {Array} An array containing CSS variable values from the light and dark themes.
  */
-function getThemeCSSVariables(vuelessConfig) {
+function getThemeCSSVariables() {
   const lightThemeConfig = merge({}, DEFAULT_LIGHT_THEME, vuelessConfig.lightTheme);
   const darkThemeConfig = merge({}, DEFAULT_DARK_THEME, vuelessConfig.darkTheme);
 
@@ -159,7 +150,6 @@ function getThemeCSSVariables(vuelessConfig) {
  * CSS classes based on component usage, environment conditions, and configured colors.
  *
  * @param {Object} params - The parameters for the function.
- * @param {object} vuelessConfig - The Vueless config object.
  * @param {Array<string>} params.targetFiles - List of file paths to check for component usage.
  * @param {Object} params.env - Environment variables for distinguishing between different environments.
  * @param {boolean} params.env.isStorybookEnv - Indicates whether the function is running in a Storybook environment.
@@ -169,7 +159,7 @@ function getThemeCSSVariables(vuelessConfig) {
  * @return {Promise<Array<string>>} A promise that resolves to an array of safelisted CSS class names
  * for all matched components and nested components.
  */
-async function getComponentsSafelistClasses(vuelessConfig, { targetFiles = [], env, srcDir }) {
+async function getComponentsSafelistClasses({ targetFiles, env, srcDir }) {
   const { isStorybookEnv, isInternalEnv } = env;
 
   let srcVueFiles = [];

package/utils/node/webTypes.d.ts

@@ -1 +1 @@
-export function buildWebTypes({ vuelessSrcDir, basePath }?: {}): Promise<void>;
+export function buildWebTypes(srcDir: any): Promise<void>;

package/utils/node/webTypes.js

@@ -1,11 +1,10 @@
-import { getVuelessConfig } from "./vuelessConfig.js";
+import { vuelessConfig } from "./vuelessConfig.js";
 
-export async function buildWebTypes({ vuelessSrcDir, basePath } = {}) {
+export async function buildWebTypes(srcDir) {
   try {
-    const vuelessConfig = await getVuelessConfig(basePath);
     const { default: build } = await import("@vueless/storybook/webTypes/index.js");
 
-    await build(vuelessConfig, vuelessSrcDir);
+    await build(vuelessConfig, srcDir);
   } catch (error) {
     if (error.code !== "ERR_MODULE_NOT_FOUND") {
       // eslint-disable-next-line no-console

package/utils/theme.ts

@@ -81,7 +81,6 @@ function toggleColorModeClass() {
 function setColorMode(mode: `${ColorMode}`, isCachedAutoMode?: boolean): string {
   const colorMode = mode || getStored(COLOR_MODE_KEY) || vuelessConfig.colorMode || ColorMode.Light;
 
-  // TODO: This always true `!!Number(getStored(AUTO_MODE_KEY))` > `!!Number(undefined) = true`
   isCachedAutoMode = isCachedAutoMode ?? !!Number(getStored(AUTO_MODE_KEY));
 
   const isAutoMode = colorMode === ColorMode.Auto;