vueless 1.2.5-beta.8 → 1.2.5-beta.9

package/bin/commands/copy.js

@@ -1,22 +1,26 @@
 /* eslint-disable no-console */
 
-import { existsSync } from "node:fs";
 import path from "node:path";
 import { cwd } from "node:process";
-import { cp, readFile, writeFile, rename } from "node:fs/promises";
+import { existsSync } from "node:fs";
 import { styleText } from "node:util";
+import { cp, readFile, writeFile, rename } from "node:fs/promises";
 
 import { getDirFiles } from "../../utils/node/helper.js";
 import { replaceRelativeImports } from "../utils/format.js";
 import { getStorybookId, getStoryMetaKeyIndex } from "../utils/data.js";
-
-import { SRC_COMPONENTS_PATH, COMPONENTS_PATH } from "../constants.js";
-import { COMPONENTS, VUELESS_PACKAGE_DIR, VUELESS_LOCAL_DIR } from "../../constants.js";
-
-function getSourcePath(componentName) {
-  return path.join(cwd(), VUELESS_PACKAGE_DIR, COMPONENTS[componentName]);
-}
-
+import { COMPONENTS, VUELESS_PACKAGE_DIR, VUELESS_USER_COMPONENTS_DIR } from "../../constants.js";
+
+/**
+ * Copies an existing Vueless component to a new location with a new name.
+ * This includes duplicating the source files and updating the component's internal references as needed.
+ *
+ * @param {Array<string>} options - An array containing two elements:
+ * – The name of the component to be copied.
+ * – The desired name for the copied component.
+ * @return {Promise<void>} A promise that resolves when the component has been successfully copied.
+ * If an error occurs, no value is returned, and the operation exits early with a logged message.
+ */
 export async function copyVuelessComponent(options) {
   const [componentName, newComponentName] = options;
 
@@ -32,73 +36,120 @@ export async function copyVuelessComponent(options) {
     return;
   }
 
-  const sourceComponentPath = getSourcePath(componentName);
+  if (newComponentName in COMPONENTS) {
+    console.log(
+      styleText("red", `Component with name '${newComponentName}' already exists in Vueless UI.`),
+    );
 
-  const isSrcDir = existsSync(path.join(cwd(), VUELESS_LOCAL_DIR));
-  const destPath = isSrcDir
-    ? path.join(SRC_COMPONENTS_PATH, newComponentName)
-    : path.join(COMPONENTS_PATH, newComponentName);
-  const absoluteDestPath = path.join(cwd(), destPath);
+    return;
+  }
+
+  if (!newComponentName.startsWith("U")) {
+    console.log(styleText("red", `Component should have 'U' prefix (ex. 'UButtonCustom').`));
+
+    return;
+  }
 
-  const isComponentExists = newComponentName in COMPONENTS || existsSync(absoluteDestPath);
+  const absoluteSourcePath = path.join(cwd(), VUELESS_PACKAGE_DIR, COMPONENTS[componentName]);
+  const absoluteDestPath = path.join(cwd(), VUELESS_USER_COMPONENTS_DIR, newComponentName);
 
-  if (isComponentExists) {
-    console.log(styleText("red", `Component with name ${newComponentName} already exists.`));
+  if (existsSync(absoluteDestPath)) {
+    console.log(styleText("red", `Component with name '${newComponentName}' already exists.`));
 
     return;
   }
 
-  await cp(sourceComponentPath, absoluteDestPath, { recursive: true });
+  await cp(absoluteSourcePath, absoluteDestPath, { recursive: true });
   await modifyCreatedComponent(absoluteDestPath, componentName, newComponentName);
 
-  const successMessage = styleText(
-    "green",
-    `The '${componentName}' was successfully copied into the '${destPath}' directory.`,
+  console.log(
+    // eslint-disable-next-line vue/max-len, prettier/prettier
+    styleText("green", `The '${componentName}' was successfully copied into the '${VUELESS_USER_COMPONENTS_DIR}/${newComponentName}' directory.`)
   );
-
-  console.log(successMessage);
 }
 
+/**
+ * Modifies the files related to a specified component by renaming the component and updating its references
+ * across various files in the specified directory.
+ *
+ * @param {string} destPath - The destination path where the component and its related files are located.
+ * @param {string} componentName - The current name of the component to be modified.
+ * @param {string} newComponentName - The new name to assign to the component and its references.
+ * @return {Promise<void>} A promise that resolves when the modification process is completed.
+ */
 async function modifyCreatedComponent(destPath, componentName, newComponentName) {
   const destFiles = await getDirFiles(destPath, "");
   const storybookId = await getStorybookId();
 
-  const componentFileName = `${componentName}.vue`;
-  const newComponentFileName = `${newComponentName}.vue`;
-
   for await (const filePath of destFiles) {
     const fileContent = await readFile(filePath, "utf-8");
-
     let updatedContent = replaceRelativeImports(newComponentName, filePath, fileContent);
-    let targetPath = filePath;
 
+    /* Renaming component name in constants */
     if (filePath.endsWith("constants.ts")) {
-      updatedContent = updatedContent.replace(componentName, newComponentName);
+      updatedContent = updatedContent.replaceAll(componentName, newComponentName);
+    }
+
+    /* Renaming component name in tests */
+    if (filePath.endsWith("test.ts")) {
+      updatedContent = updatedContent.replaceAll(componentName, newComponentName);
+    }
+
+    /* Renaming component name in types */
+    if (filePath.endsWith("types.ts")) {
+      updatedContent = updatedContent.replaceAll(componentName, newComponentName);
+    }
+
+    /* Renaming component name in components */
+    if (filePath.endsWith(".vue")) {
+      let lines = updatedContent.split("\n");
+
+      for (const [index, line] of lines.entries()) {
+        // Add some condition here in future if some edge cases appear
+        if (line.includes(componentName)) {
+          lines[index] = line.replaceAll(componentName, newComponentName);
+        }
+      }
+
+      updatedContent = lines.join("\n");
     }
 
+    /* Renaming component name in stories */
     if (filePath.endsWith("stories.ts")) {
-      const storyLines = updatedContent.split("\n");
+      let lines = updatedContent.split("\n");
 
-      const storyComponentImportIndex = storyLines.findIndex(
-        (line) => line.includes(componentName) && line.includes("import"),
-      );
+      // saving indexes
       const storyIdIndex = getStoryMetaKeyIndex(fileContent, "id");
       const storyTitleIndex = getStoryMetaKeyIndex(fileContent, "title");
+      const componentImportIndex = lines.findIndex(
+        (line) => line.includes(componentName) && line.includes("import"),
+      );
 
-      storyLines[storyIdIndex] = `  id: "${storybookId}",`;
-      storyLines[storyTitleIndex] = `  title: "Custom / ${newComponentName}",`;
-      storyLines[storyComponentImportIndex] =
-        `import ${newComponentName} from "../${newComponentFileName}"`;
+      updatedContent = lines.join("\n").replaceAll(componentName, newComponentName);
+      lines = updatedContent.split("\n");
 
-      updatedContent = storyLines.join("\n").replaceAll(componentName, newComponentName);
+      // replacing lines by indexes
+      lines[storyIdIndex] = `  id: "${storybookId}",`;
+      lines[storyTitleIndex] = `  title: "Custom / ${newComponentName}",`;
+      lines[componentImportIndex] = `import ${newComponentName} from "../${newComponentName}.vue";`;
+
+      updatedContent = lines.join("\n");
     }
 
-    if (targetPath.endsWith(componentFileName)) {
-      targetPath = targetPath.replace(componentFileName, newComponentFileName);
+    /* Renaming file */
+    let targetPath = filePath;
+    const [fileName] = filePath.split("/").reverse();
+
+    if (fileName.includes(componentName)) {
+      const [targetDir] = filePath.split(fileName);
+      const targetFileName = fileName.replace(componentName, newComponentName);
+
+      targetPath = path.join(targetDir, targetFileName);
 
       await rename(filePath, targetPath);
     }
 
+    /* Update file */
     await writeFile(targetPath, updatedContent);
   }
 }

package/bin/commands/create.js

@@ -1,18 +1,15 @@
 /* eslint-disable no-console */
 
-import { existsSync } from "node:fs";
 import path from "node:path";
 import { cwd } from "node:process";
-import { readFile, writeFile, rename, mkdir, readdir, copyFile } from "node:fs/promises";
+import { existsSync } from "node:fs";
 import { styleText } from "node:util";
+import { readFile, writeFile, rename, mkdir, readdir, copyFile } from "node:fs/promises";
 
+import { getStorybookId } from "../utils/data.js";
 import { getDirFiles } from "../../utils/node/helper.js";
 import { replaceRelativeImports } from "../utils/format.js";
-import { getStorybookId } from "../utils/data.js";
-
-import { SRC_COMPONENTS_PATH, COMPONENTS_PATH } from "../constants.js";
-
-import { COMPONENTS, VUELESS_PACKAGE_DIR, VUELESS_LOCAL_DIR } from "../../constants.js";
+import { COMPONENTS, VUELESS_PACKAGE_DIR, VUELESS_USER_COMPONENTS_DIR } from "../../constants.js";
 
 const BOILERPLATE_NAME = "UBoilerplate";
 const BOILERPLATE_PATH = path.join(cwd(), VUELESS_PACKAGE_DIR, "ui.boilerplate");
@@ -26,26 +23,34 @@ export async function createVuelessComponent(options) {
     return;
   }
 
-  const isSrcDir = existsSync(path.join(cwd(), VUELESS_LOCAL_DIR));
-  const destPath = isSrcDir
-    ? path.join(SRC_COMPONENTS_PATH, componentName)
-    : path.join(COMPONENTS_PATH, componentName);
-  const absoluteDestPath = path.join(cwd(), destPath);
+  if (componentName in COMPONENTS) {
+    console.log(
+      styleText("red", `Component with name '${componentName}' already exists in Vueless UI.`),
+    );
+
+    return;
+  }
+
+  if (!componentName.startsWith("U")) {
+    console.log(styleText("red", `Component should have 'U' prefix (ex. 'UButtonCustom').`));
+
+    return;
+  }
 
-  const isComponentExists = componentName in COMPONENTS || existsSync(absoluteDestPath);
+  const absoluteDestPath = path.join(cwd(), VUELESS_USER_COMPONENTS_DIR, componentName);
 
-  if (isComponentExists) {
-    console.log(styleText("red", `Component with name ${componentName} already exists.`));
+  if (existsSync(absoluteDestPath)) {
+    console.log(styleText("red", `Component with name '${componentName}' already exists.`));
 
     return;
   }
 
   await copyAndRenameFiles(BOILERPLATE_PATH, absoluteDestPath);
-  await modifyCreatedComponent(absoluteDestPath, componentName);
+  await modifyCreatedComponent(componentName, absoluteDestPath);
 
   console.log(
-    // eslint-disable-next-line prettier/prettier
-    styleText("green", `The '${componentName}' was successfully created in the '${destPath}' directory.`,),
+    // eslint-disable-next-line vue/max-len, prettier/prettier
+    styleText("green", `The '${componentName}' was successfully created in the '${VUELESS_USER_COMPONENTS_DIR}/${componentName}' directory.`,),
   );
 }
 
@@ -55,11 +60,7 @@ async function copyAndRenameFiles(srcDir, destDir) {
 
   for (const entry of entries) {
     const srcPath = path.join(srcDir, entry.name);
-
-    const renamed = entry.name.replace(".hidden", "");
-    const destPath = path.join(destDir, renamed);
-
-    console.log(entry.name, renamed);
+    const destPath = path.join(destDir, entry.name);
 
     entry.isDirectory()
       ? await copyAndRenameFiles(srcPath, destPath)
@@ -67,32 +68,64 @@ async function copyAndRenameFiles(srcDir, destDir) {
   }
 }
 
-async function modifyCreatedComponent(destPath, componentName) {
+async function modifyCreatedComponent(componentName, destPath) {
   const destFiles = await getDirFiles(destPath, "");
   const storybookId = await getStorybookId();
 
   for await (const filePath of destFiles) {
     const fileContent = await readFile(filePath, "utf-8");
-
     let updatedContent = replaceRelativeImports(componentName, filePath, fileContent);
-    let targetPath = filePath;
 
+    /* Renaming component name in constants */
     if (filePath.endsWith("constants.ts")) {
-      updatedContent = updatedContent.replace(BOILERPLATE_NAME, componentName);
+      updatedContent = updatedContent.replaceAll(BOILERPLATE_NAME, componentName);
+    }
+
+    /* Renaming component name in tests */
+    if (filePath.endsWith("test.ts")) {
+      updatedContent = updatedContent.replaceAll(BOILERPLATE_NAME, componentName);
+    }
+
+    /* Renaming component name in types */
+    if (filePath.endsWith("types.ts")) {
+      updatedContent = updatedContent.replaceAll(BOILERPLATE_NAME, componentName);
     }
 
+    /* Renaming component name in components */
+    if (filePath.endsWith(".vue")) {
+      let lines = updatedContent.split("\n");
+
+      for (const [index, line] of lines.entries()) {
+        // Add some condition here in future if some edge cases appear
+        if (line.includes(componentName)) {
+          lines[index] = line.replaceAll(BOILERPLATE_NAME, componentName);
+        }
+      }
+
+      updatedContent = lines.join("\n");
+    }
+
+    /* Renaming component name in stories */
     if (filePath.endsWith("stories.ts")) {
       updatedContent = updatedContent
         .replaceAll(BOILERPLATE_NAME, componentName)
         .replace("{{component_id}}", String(storybookId));
     }
 
-    if (targetPath.endsWith(`${BOILERPLATE_NAME}.vue`)) {
-      targetPath = targetPath.replace(BOILERPLATE_NAME, componentName);
+    /* Renaming file */
+    let targetPath = filePath;
+    const [fileName] = filePath.split("/").reverse();
+
+    if (fileName.includes(BOILERPLATE_NAME)) {
+      const [targetDir] = filePath.split(fileName);
+      const targetFileName = fileName.replace(BOILERPLATE_NAME, componentName);
+
+      targetPath = path.join(targetDir, targetFileName);
 
       await rename(filePath, targetPath);
     }
 
+    /* Update file */
     await writeFile(targetPath, updatedContent);
   }
 }

package/bin/constants.d.ts

@@ -1,3 +1 @@
-export const SRC_COMPONENTS_PATH: "/src/components";
-export const COMPONENTS_PATH: "/components";
 export const DEFAULT_VUELESS_CONFIG_CONTENT: "import { componentConfigs } from \"./.vueless\";\n\nexport default {\n  /**\n   * Global settings.\n   */\n  primary: \"grayscale\",\n  neutral: \"gray\",\n  text: 14,\n  outline: 2,\n  rounding: 8,\n  letterSpacing: 0,\n  disabledOpacity: 50,\n  colorMode: \"auto\",\n\n  /**\n   * Component settings.\n   */\n  components: /*tw*/ {\n    ...componentConfigs,\n  },\n\n  /**\n   * Directive settings.\n   */\n  directives: {},\n\n  /**\n   * Light theme CSS variable settings.\n   */\n  lightTheme: {\n    /* Primary colors */\n    \"--vl-primary\": \"--vl-primary-600\",\n    \"--vl-primary-lifted\": \"--vl-primary-700\",\n    \"--vl-primary-accented\": \"--vl-primary-800\",\n\n    /* Secondary colors */\n    \"--vl-secondary\": \"--vl-neutral-500\",\n    \"--vl-secondary-lifted\": \"--vl-neutral-600\",\n    \"--vl-secondary-accented\": \"--vl-neutral-700\",\n\n    /* Success colors */\n    \"--vl-success\": \"--color-green-600\",\n    \"--vl-success-lifted\": \"--color-green-700\",\n    \"--vl-success-accented\": \"--color-green-800\",\n\n    /* Info colors */\n    \"--vl-info\": \"--color-blue-600\",\n    \"--vl-info-lifted\": \"--color-blue-700\",\n    \"--vl-info-accented\": \"--color-blue-800\",\n\n    /* Notice colors */\n    \"--vl-notice\": \"--color-violet-600\",\n    \"--vl-notice-lifted\": \"--color-violet-700\",\n    \"--vl-notice-accented\": \"--color-violet-800\",\n\n    /* Warning colors */\n    \"--vl-warning\": \"--color-orange-600\",\n    \"--vl-warning-lifted\": \"--color-orange-700\",\n    \"--vl-warning-accented\": \"--color-orange-800\",\n\n    /* Error colors */\n    \"--vl-error\": \"--color-red-600\",\n    \"--vl-error-lifted\": \"--color-red-700\",\n    \"--vl-error-accented\": \"--color-red-800\",\n\n    /* Grayscale colors */\n    \"--vl-grayscale\": \"--vl-neutral-900\",\n    \"--vl-grayscale-lifted\": \"--vl-neutral-800\",\n    \"--vl-grayscale-accented\": \"--vl-neutral-700\",\n\n    /* Neutral colors */\n    \"--vl-neutral\": \"--vl-neutral-500\",\n    \"--vl-neutral-lifted\": \"--vl-neutral-600\",\n    \"--vl-neutral-accented\": \"--vl-neutral-700\",\n\n    /* Text neutral colors */\n    \"--vl-text-inverted\": \"--color-white\",\n    \"--vl-text-muted\": \"--vl-neutral-400\",\n    \"--vl-text-lifted\": \"--vl-neutral-500\",\n    \"--vl-text-accented\": \"--vl-neutral-600\",\n    \"--vl-text\": \"--vl-neutral-900\",\n\n    /* Border neutral colors */\n    \"--vl-border-muted\": \"--vl-neutral-200\",\n    \"--vl-border\": \"--vl-neutral-300\",\n    \"--vl-border-lifted\": \"--vl-neutral-400\",\n    \"--vl-border-accented\": \"--vl-neutral-600\",\n\n    /* Background neutral colors */\n    \"--vl-bg\": \"--color-white\",\n    \"--vl-bg-muted\": \"--vl-neutral-50\",\n    \"--vl-bg-lifted\": \"--vl-neutral-100\",\n    \"--vl-bg-accented\": \"--vl-neutral-200\",\n    \"--vl-bg-inverted\": \"--vl-neutral-900\",\n  },\n\n  /**\n   * Dark theme CSS variable settings.\n   */\n  darkTheme: {\n    /* Primary colors */\n    \"--vl-primary\": \"--vl-primary-400\",\n    \"--vl-primary-lifted\": \"--vl-primary-500\",\n    \"--vl-primary-accented\": \"--vl-primary-600\",\n\n    /* Secondary colors */\n    \"--vl-secondary\": \"--vl-neutral-300\",\n    \"--vl-secondary-lifted\": \"--vl-neutral-400\",\n    \"--vl-secondary-accented\": \"--vl-neutral-500\",\n\n    /* Success colors */\n    \"--vl-success\": \"--color-green-400\",\n    \"--vl-success-lifted\": \"--color-green-500\",\n    \"--vl-success-accented\": \"--color-green-600\",\n\n    /* Info colors */\n    \"--vl-info\": \"--color-blue-400\",\n    \"--vl-info-lifted\": \"--color-blue-500\",\n    \"--vl-info-accented\": \"--color-blue-600\",\n\n    /* Notice colors */\n    \"--vl-notice\": \"--color-violet-400\",\n    \"--vl-notice-lifted\": \"--color-violet-500\",\n    \"--vl-notice-accented\": \"--color-violet-600\",\n\n    /* Warning colors */\n    \"--vl-warning\": \"--color-orange-400\",\n    \"--vl-warning-lifted\": \"--color-orange-500\",\n    \"--vl-warning-accented\": \"--color-orange-600\",\n\n    /* Error colors */\n    \"--vl-error\": \"--color-red-400\",\n    \"--vl-error-lifted\": \"--color-red-500\",\n    \"--vl-error-accented\": \"--color-red-600\",\n\n    /* Grayscale colors */\n    \"--vl-grayscale\": \"--vl-neutral-100\",\n    \"--vl-grayscale-lifted\": \"--vl-neutral-200\",\n    \"--vl-grayscale-accented\": \"--vl-neutral-300\",\n\n    /* Neutral colors */\n    \"--vl-neutral\": \"--vl-neutral-300\",\n    \"--vl-neutral-lifted\": \"--vl-neutral-400\",\n    \"--vl-neutral-accented\": \"--vl-neutral-500\",\n\n    /* Text neutral colors */\n    \"--vl-text-inverted\": \"--vl-neutral-900\",\n    \"--vl-text-muted\": \"--vl-neutral-600\",\n    \"--vl-text-lifted\": \"--vl-neutral-400\",\n    \"--vl-text-accented\": \"--vl-neutral-300\",\n    \"--vl-text\": \"--vl-neutral-100\",\n\n    /* Border neutral colors */\n    \"--vl-border-muted\": \"--vl-neutral-800\",\n    \"--vl-border\": \"--vl-neutral-700\",\n    \"--vl-border-lifted\": \"--vl-neutral-600\",\n    \"--vl-border-accented\": \"--vl-neutral-400\",\n\n    /* Background neutral colors */\n    \"--vl-bg\": \"--vl-neutral-900\",\n    \"--vl-bg-muted\": \"--vl-neutral-800\",\n    \"--vl-bg-lifted\": \"--vl-neutral-800\",\n    \"--vl-bg-accented\": \"--vl-neutral-700\",\n    \"--vl-bg-inverted\": \"--vl-neutral-100\",\n  },\n};\n";

package/bin/constants.js

@@ -1,6 +1,3 @@
-export const SRC_COMPONENTS_PATH = "/src/components";
-export const COMPONENTS_PATH = "/components";
-
 export const DEFAULT_VUELESS_CONFIG_CONTENT = `import { componentConfigs } from "./.vueless";
 
 export default {

package/bin/utils/data.js

@@ -5,30 +5,26 @@ import { readFile } from "node:fs/promises";
 
 import { getDirFiles } from "../../utils/node/helper.js";
 
-import { SRC_COMPONENTS_PATH, COMPONENTS_PATH } from "../constants.js";
-import { VUELESS_PACKAGE_DIR } from "../../constants.js";
+import { VUELESS_PACKAGE_DIR, VUELESS_USER_COMPONENTS_DIR } from "../../constants.js";
 
 const storiesName = "stories.ts";
 
+/**
+ * Retrieves the next available Storybook ID by scanning story files for the highest existing ID and incrementing it.
+ *
+ * @return {Promise<number>} A promise that resolves to the next available Storybook ID.
+ */
 export async function getStorybookId() {
-  const srcComponentsDir = path.join(cwd(), SRC_COMPONENTS_PATH);
-  const componentsDir = path.join(cwd(), COMPONENTS_PATH);
   const vuelessPackagePath = path.join(cwd(), VUELESS_PACKAGE_DIR);
-  const isSrcComponentsDir = existsSync(srcComponentsDir);
-  const isComponentsDir = existsSync(componentsDir);
+  const vuelessUserComponentsPath = path.join(cwd(), VUELESS_USER_COMPONENTS_DIR);
 
   const stories = await getDirFiles(vuelessPackagePath, storiesName);
+  const hasVuelessUserComponentsDir = existsSync(vuelessUserComponentsPath);
 
-  if (isSrcComponentsDir) {
-    const srcComponentsDirStories = await getDirFiles(srcComponentsDir, storiesName);
+  if (hasVuelessUserComponentsDir) {
+    const customStories = await getDirFiles(vuelessUserComponentsPath, storiesName);
 
-    stories.push(...srcComponentsDirStories);
-  }
-
-  if (isComponentsDir) {
-    const componentsDirStories = await getDirFiles(componentsDir, storiesName);
-
-    stories.push(...componentsDirStories);
+    stories.push(...customStories);
   }
 
   let id = 200000;
@@ -51,6 +47,14 @@ export async function getStorybookId() {
   return id + 10;
 }
 
+/**
+ * Retrieves the line index within a file content where a specific key appears
+ * as a top-level property in an exported default object.
+ *
+ * @param {string} fileContent - The content of the file to search through.
+ * @param {string} key - The key to locate within the top-level export block.
+ * @return {number} The zero-based index of the line where the key is found, or -1 if the key is not found.
+ */
 export function getStoryMetaKeyIndex(fileContent, key) {
   const lines = fileContent.split("\n");
   let insideExportBlock = false;

package/bin/utils/format.js

@@ -2,6 +2,14 @@ import path from "node:path";
 
 import { VUELESS_LIBRARY } from "../../constants.js";
 
+/**
+ * Replaces relative import paths in the provided file content based on the given component name and file path.
+ *
+ * @param {string} componentName - The name of the component, used to determine if the file is at the top level.
+ * @param {string} filePath - The file path to check if the file is located at the top level of the component.
+ * @param {string} fileContent - The content of the file where the relative import paths need to be replaced.
+ * @return {string} The updated file content with the adjusted relative import paths.
+ */
 export function replaceRelativeImports(componentName, filePath, fileContent) {
   const isTopLevelFile = path.dirname(filePath).endsWith(componentName);
   const contentLines = fileContent.split("\n");
@@ -9,6 +17,13 @@ export function replaceRelativeImports(componentName, filePath, fileContent) {
   return contentLines.map((line) => replaceRelativeLineImports(line, isTopLevelFile)).join("\n");
 }
 
+/**
+ * Replaces relative import paths in a given line of code with a new base path for certain types of imports.
+ *
+ * @param {string} line - The line of code containing import statements to process.
+ * @param {boolean} isTopLevelFile - Indicates if the file is a top-level file within the project structure.
+ * @return {string} The modified line of code with adjusted import paths, or the original line if no changes are required.
+ */
 function replaceRelativeLineImports(line, isTopLevelFile) {
   const importRegex = /import\s+(?:[\w\s{},*]+)\s+from\s+(['"])(\.\.?\/.*?)(\.[tj]s)?\1(?!\?)/g;
   const multiLineImportRegExp = /from\s+(['"])(\.\.?\/.*?)(\.[tj]s)?\1(?!\?)/g; // Matches import's "from" part
@@ -23,8 +38,8 @@ function replaceRelativeLineImports(line, isTopLevelFile) {
   }
 
   if (line.startsWith("}")) {
-    return line.replace(multiLineImportRegExp, (match, quote, oldPath, ext) => {
-      return match.replace(oldPath + (ext || ""), VUELESS_LIBRARY);
+    return line.replace(multiLineImportRegExp, (match) => {
+      return match.replace(relativePathStartRegExp, `${VUELESS_LIBRARY}/`);
     });
   }
 

package/constants.d.ts

@@ -290,14 +290,21 @@ export namespace TAILWIND_MERGE_EXTENSION {
     }
 }
 export namespace DEFAULT_SVGO_CONFIG {
-    let plugins: {
+    let plugins: ({
+        name: string;
+        params: {
+            attrs: string;
+            attributes?: undefined;
+        };
+    } | {
         name: string;
         params: {
             attributes: {
                 fill: string;
             }[];
+            attrs?: undefined;
         };
-    }[];
+    })[];
 }
 export const INTERNAL_ENV: "internal";
 export const STORYBOOK_ENV: "storybook";
@@ -305,6 +312,7 @@ export const NUXT_MODULE_ENV: "nuxt-module";
 export const VUELESS_LIBRARY: "vueless";
 export const INTERNAL_ICONS_LIBRARY: "internal";
 export const STORYBOOK_ICONS_LIBRARY: "storybook";
+export const SRC_DIR: "src";
 export const CACHE_DIR: ".cache";
 export const NODE_MODULES_DIR: "node_modules";
 export const VUELESS_PACKAGE_DIR: "node_modules/vueless";
@@ -321,6 +329,8 @@ export const VUELESS_MERGED_CONFIGS_CACHED_DIR: "node_modules/.cache/vueless/mer
 export const VUELESS_CONFIG_FILE_NAME: "vueless.config";
 export const CONFIG_INDEX_FILE_NAME: "index";
 export const VUELESS_CONFIG_DIR: ".vueless";
+export const VUELESS_USER_COMPONENTS_DIR: ".vueless/components";
+export const SRC_USER_COMPONENTS_DIR: "src/components";
 export const DEFAULT_EXIT_CODE: 0;
 export const FAILURE_CODE: 1;
 export const PX_IN_REM: 16;

package/constants.js

@@ -367,6 +367,12 @@ export const TAILWIND_MERGE_EXTENSION = {
 /* SVGO config for preparing SVG icons. */
 export const DEFAULT_SVGO_CONFIG = {
   plugins: [
+    {
+      name: "removeAttrs",
+      params: {
+        attrs: "(fill)",
+      },
+    },
     {
       name: "addAttributesToSVGElement",
       params: {
@@ -385,11 +391,12 @@ export const VUELESS_LIBRARY = "vueless";
 export const INTERNAL_ICONS_LIBRARY = "internal";
 export const STORYBOOK_ICONS_LIBRARY = "storybook";
 
+export const SRC_DIR = "src";
 export const CACHE_DIR = ".cache";
 export const NODE_MODULES_DIR = "node_modules";
 export const VUELESS_PACKAGE_DIR = `${NODE_MODULES_DIR}/vueless`;
 export const VUELESS_CACHE_DIR = `${NODE_MODULES_DIR}/${CACHE_DIR}/vueless`;
-export const VUELESS_LOCAL_DIR = "src";
+export const VUELESS_LOCAL_DIR = SRC_DIR;
 export const ICONS_DIR = "icons";
 export const ICONS_VUELESS_DIR = `${VUELESS_PACKAGE_DIR}/${ICONS_DIR}`;
 export const ICONS_CACHED_DIR = `${VUELESS_CACHE_DIR}/${ICONS_DIR}`;
@@ -403,6 +410,8 @@ export const VUELESS_MERGED_CONFIGS_CACHED_DIR = `${VUELESS_CACHE_DIR}/mergedCon
 export const VUELESS_CONFIG_FILE_NAME = "vueless.config";
 export const CONFIG_INDEX_FILE_NAME = "index";
 export const VUELESS_CONFIG_DIR = ".vueless";
+export const VUELESS_USER_COMPONENTS_DIR = `${VUELESS_CONFIG_DIR}/components`;
+export const SRC_USER_COMPONENTS_DIR = `${SRC_DIR}/components`;
 
 /* System error codes */
 export const DEFAULT_EXIT_CODE = 0;

package/index.d.ts

@@ -18,7 +18,7 @@ export {
 export { isMac, isPWA, isIOS, isAndroid, isMobileApp, isWindows } from "./utils/platform";
 export { cx, cva, compose, getDefaults, setVuelessConfig, setColor, vuelessConfig } from "./utils/ui";
 export { getTheme, setTheme, resetTheme, normalizeThemeConfig, cssVar } from "./utils/theme";
-export { getArgTypes, getSlotNames, getSlotsFragment, getSource, getDocsDescription } from "./utils/storybook";
+export { getArgs, getArgTypes, getSlotNames, getSlotsFragment, getSource, getDocsDescription } from "./utils/storybook";
 /* adapters */
 export { default as defaultEnLocale } from "./adapter.locale/locales/en";
 export { createVuelessAdapter } from "./adapter.locale/vueless";
@@ -29,6 +29,8 @@ export { default as useUI } from "./composables/useUI";
 export { useDarkMode } from "./composables/useDarkMode";
 export { useLoaderProgress } from "./ui.loader-progress/useLoaderProgress";
 export { useMutationObserver } from "./composables/useMutationObserver";
+export { Direction, useAutoPosition } from "./composables/useAutoPosition";
+export { useComponentLocaleMessages } from "./composables/useComponentLocaleMassages";
 /* loaders */
 export { loaderProgressOn, loaderProgressOff } from "./ui.loader-progress/utilLoaderProgress";
 export { useLoaderOverlay } from "./ui.loader-overlay/useLoaderOverlay";

package/index.ts

@@ -24,7 +24,7 @@ export {
 export { isMac, isPWA, isIOS, isAndroid, isMobileApp, isWindows } from "./utils/platform";
 export { cx, cva, compose, getDefaults, setVuelessConfig, setColor, vuelessConfig } from "./utils/ui";
 export { getTheme, setTheme, resetTheme, normalizeThemeConfig, cssVar } from "./utils/theme";
-export { getArgTypes, getSlotNames, getSlotsFragment, getSource, getDocsDescription } from "./utils/storybook";
+export { getArgs, getArgTypes, getSlotNames, getSlotsFragment, getSource, getDocsDescription } from "./utils/storybook";
 /* adapters */
 export { default as defaultEnLocale } from "./adapter.locale/locales/en";
 export { createVuelessAdapter } from "./adapter.locale/vueless";
@@ -35,6 +35,8 @@ export { default as useUI } from "./composables/useUI";
 export { useDarkMode } from "./composables/useDarkMode";
 export { useLoaderProgress } from "./ui.loader-progress/useLoaderProgress";
 export { useMutationObserver } from "./composables/useMutationObserver";
+export { Direction, useAutoPosition } from "./composables/useAutoPosition";
+export { useComponentLocaleMessages } from "./composables/useComponentLocaleMassages";
 /* loaders */
 export { loaderProgressOn, loaderProgressOff } from "./ui.loader-progress/utilLoaderProgress";
 export { useLoaderOverlay } from "./ui.loader-overlay/useLoaderOverlay";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "1.2.5-beta.8",
+  "version": "1.2.5-beta.9",
   "description": "Vue Styleless UI Component Library, powered by Tailwind CSS.",
   "author": "Johnny Grid <hello@vueless.com> (https://vueless.com)",
   "homepage": "https://vueless.com",
@@ -56,7 +56,7 @@
     "@vue/eslint-config-typescript": "^14.6.0",
     "@vue/test-utils": "^2.4.6",
     "@vue/tsconfig": "^0.7.0",
-    "@vueless/storybook": "^1.2.2",
+    "@vueless/storybook": "^1.2.4",
     "eslint": "^9.32.0",
     "eslint-plugin-storybook": "^9.0.18",
     "eslint-plugin-vue": "^10.3.0",

package/plugin-vite.js

@@ -28,17 +28,19 @@ import {
   autoImportUserConfigs,
 } from "./utils/node/helper.js";
 import {
+  VUE_EXT,
+  JAVASCRIPT_EXT,
+  TYPESCRIPT_EXT,
   INTERNAL_ENV,
   STORYBOOK_ENV,
   NUXT_MODULE_ENV,
   VUELESS_LOCAL_DIR,
   VUELESS_PACKAGE_DIR,
+  SRC_USER_COMPONENTS_DIR,
+  VUELESS_USER_COMPONENTS_DIR,
   ICONS_VIRTUAL_MODULE_ID,
   RESOLVED_ICONS_VIRTUAL_MODULE_ID,
   DEFAULT_EXIT_CODE,
-  JAVASCRIPT_EXT,
-  TYPESCRIPT_EXT,
-  VUE_EXT,
 } from "./constants.js";
 
 /* TailwindCSS Vite plugins. */
@@ -49,6 +51,7 @@ export const TailwindCSS = (options) => {
 /* Automatically importing Vueless components on demand */
 export const UnpluginComponents = (options) =>
   UnpluginVueComponents({
+    dirs: [VUELESS_USER_COMPONENTS_DIR, SRC_USER_COMPONENTS_DIR],
     resolvers: [componentResolver, directiveResolver],
     dts: true,
     ...options,
@@ -103,6 +106,11 @@ export const Vueless = function (options = {}) {
       define: {
         "process.env": {},
       },
+      build: {
+        rollupOptions: {
+          external: ["node:fs/promises"],
+        },
+      },
       optimizeDeps: {
         include: isInternalEnv
           ? []

package/ui.boilerplate/UBoilerplate.vue

@@ -35,5 +35,5 @@ const { getDataTest, wrapperAttrs } = useUI<Config>(defaultConfig, mutatedProps)
 </script>
 
 <template>
-  <div v-bind="wrapperAttrs" :data-test="getDataTest()">Boilerplate</div>
+  <div v-bind="wrapperAttrs" :data-test="getDataTest()">UBoilerplate</div>
 </template>

package/utils/node/helper.d.ts

@@ -7,7 +7,7 @@ export function getVueDirs(): string[];
 export function getVuelessConfigDirs(): string[];
 export function getMergedComponentConfig(name: any): Promise<any>;
 export function getDefaultComponentConfig(name: any, configDir: any): Promise<{}>;
-export function cacheMergedConfigs(srcDir: any): Promise<void>;
+export function cacheMergedConfigs(basePath: any): Promise<void>;
 export function buildTSFile(entryPath: any, configOutFile: any): Promise<void>;
 export function removeFolderIfEmpty(dirPath: any): Promise<void>;
 export function detectTypeScript(): Promise<boolean>;

package/utils/node/helper.js

@@ -5,7 +5,7 @@ import { pathToFileURL } from "node:url";
 import { existsSync, statSync } from "node:fs";
 import { mkdir, readdir, rmdir, readFile, writeFile } from "node:fs/promises";
 
-import { vuelessConfig, getMergedConfig } from "./vuelessConfig.js";
+import { getMergedConfig, getVuelessConfig } from "./vuelessConfig.js";
 
 import {
   COMPONENTS,
@@ -117,11 +117,12 @@ export async function getDefaultComponentConfig(name, configDir) {
   return config;
 }
 
-export async function cacheMergedConfigs(srcDir) {
+export async function cacheMergedConfigs(basePath) {
+  const vuelessConfig = await getVuelessConfig(basePath);
   const componentNames = Object.entries(COMPONENTS);
 
   for await (const [componentName, componentDir] of componentNames) {
-    const defaultComponentConfigPath = path.join(srcDir, componentDir, "config.ts");
+    const defaultComponentConfigPath = path.join(basePath, componentDir, "config.ts");
 
     const defaultConfig = await getDefaultComponentConfig(
       componentName,

package/utils/node/vuelessConfig.js

@@ -17,14 +17,6 @@ import {
 
 export let vuelessConfig = {};
 
-/**
- * Load Vueless config from the project root.
- * IIFE is used to prevent top level await issue.
- */
-(async () => {
-  vuelessConfig = await getVuelessConfig();
-})();
-
 /**
  * Retrieves the Vueless config from the project root.
  *

package/utils/ui.ts

@@ -49,9 +49,14 @@ if (isSSR) {
   /* Load Tailwind config from the project root in IIFE (no top-level await). */
   (async () => {
     try {
+      const { readFile } = await import("node:fs/promises");
+
+      const path = `${process.cwd()}/${VUELESS_CACHE_DIR}/${VUELESS_CONFIG_FILE_NAME}.mjs`;
+      const code = await readFile(path, "utf8");
+
       vuelessConfig = (
         await import(
-          /* @vite-ignore */ `${process.cwd()}/${VUELESS_CACHE_DIR}/${VUELESS_CONFIG_FILE_NAME}.mjs`
+          /* @vite-ignore */ `data:text/javascript;base64,${Buffer.from(code).toString("base64")}`
         )
       ).default;
     } catch {