vueless 1.0.2-beta.8 → 1.1.0

package/README.md

@@ -26,6 +26,7 @@ Vueless is simple enough for everyday use and powerful enough for advanced scena
 - ♿️ Accessibility (a11y)
 - ⚙️ Server-side rendering (SSR) friendly
 - 🖼️ 1000+ built-in SVG icons
+- 🧪️ 1200+ unit tests ensuring consistent logic
 - 🛡️ Full TypeScript support with type safety
 
 ### Advanced Features

package/bin/commands/copy.js

@@ -7,8 +7,8 @@ import { cp, readFile, writeFile, rename } from "node:fs/promises";
 import { styleText } from "node:util";
 
 import { getDirFiles } from "../../utils/node/helper.js";
-import { replaceRelativeImports } from "../utils/formatUtil.js";
-import { getStorybookId, getStoryMetaKeyIndex } from "../utils/dataUtils.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";

package/bin/commands/create.js

@@ -7,8 +7,8 @@ import { readFile, writeFile, rename, mkdir, readdir, copyFile } from "node:fs/p
 import { styleText } from "node:util";
 
 import { getDirFiles } from "../../utils/node/helper.js";
-import { replaceRelativeImports } from "../utils/formatUtil.js";
-import { getStorybookId } from "../utils/dataUtils.js";
+import { replaceRelativeImports } from "../utils/format.js";
+import { getStorybookId } from "../utils/data.js";
 
 import { SRC_COMPONENTS_PATH, COMPONENTS_PATH } from "../constants.js";
 

package/bin/commands/init.js

@@ -2,15 +2,32 @@
 
 import { cwd } from "node:process";
 import path from "node:path";
-import { existsSync } from "node:fs";
-import { writeFile, rename } from "node:fs/promises";
+import { existsSync, mkdirSync } from "node:fs";
+import { writeFile, rename, readFile } from "node:fs/promises";
 import { styleText } from "node:util";
 
-import { DEFAULT_VUELESS_CONFIG_CONTENT } from "../constants.js";
-import { JAVASCRIPT_EXT, TYPESCRIPT_EXT, VUELESS_CONFIG_FILE_NAME } from "../../constants.js";
+import {
+  SUPPRESS_TS_CHECK,
+  COMPONENTS_INDEX_EXPORT,
+  COMPONENTS_INDEX_COMMENT,
+  DEFAULT_VUELESS_CONFIG_CONTENT,
+} from "../constants.js";
+
+import {
+  JAVASCRIPT_EXT,
+  TYPESCRIPT_EXT,
+  CONFIG_INDEX_FILE_NAME,
+  VUELESS_CONFIG_FILE_NAME,
+} from "../../constants.js";
 
 const vuelessInitOptions = ["--ts", "--js"];
 
+/**
+ * Initializes Vueless in the project by creating a default config file and .vueless directory.
+ * @param {string[]} options - The function options.
+ * @param {boolean} options.includes("--ts") - If true, creates a TypeScript config file.
+ * @param {boolean} options.includes("--js") - If true, creates a JavaScript config file.
+ */
 export async function vuelessInit(options) {
   const isValidOptions = options.every((option) => vuelessInitOptions.includes(option));
 
@@ -20,13 +37,16 @@ export async function vuelessInit(options) {
     return;
   }
 
-  const fileExt = options.includes("--ts") ? TYPESCRIPT_EXT : JAVASCRIPT_EXT;
+  const hasTypeScript = await detectTypeScript();
+  const fileExt = options.includes("--ts") || hasTypeScript ? TYPESCRIPT_EXT : JAVASCRIPT_EXT;
+
   const formattedDestPath = path.format({
     dir: cwd(),
     name: VUELESS_CONFIG_FILE_NAME,
     ext: fileExt,
   });
 
+  /* Backup existing config if it exists. */
   if (existsSync(formattedDestPath)) {
     const timestamp = new Date().valueOf();
     const renamedTarget = `${VUELESS_CONFIG_FILE_NAME}-backup-${timestamp}${fileExt}`;
@@ -42,6 +62,7 @@ export async function vuelessInit(options) {
     );
   }
 
+  /* Create a default config file. */
   await writeFile(formattedDestPath, DEFAULT_VUELESS_CONFIG_CONTENT, "utf-8");
 
   console.log(
@@ -50,4 +71,42 @@ export async function vuelessInit(options) {
       `The '${formattedDestPath.split(path.sep).at(-1)}' was created in the project root directory.`,
     ),
   );
+
+  /* Create .vueless directory and index file. */
+  const vuelessDir = path.join(cwd(), ".vueless");
+  const destPath = path.join(vuelessDir, `${CONFIG_INDEX_FILE_NAME}${fileExt}`);
+
+  if (!existsSync(vuelessDir)) {
+    mkdirSync(vuelessDir);
+    console.log(
+      styleText("green", "The '.vueless' directory was created in the project root directory."),
+    );
+  }
+
+  const suppressTsCheck = fileExt === TYPESCRIPT_EXT ? `${SUPPRESS_TS_CHECK}\n` : "";
+
+  await writeFile(
+    destPath,
+    `${suppressTsCheck}${COMPONENTS_INDEX_COMMENT}\n${COMPONENTS_INDEX_EXPORT}\n`,
+    "utf-8",
+  );
+}
+
+/**
+ * Detects if TypeScript is a dependency in the project's package.json
+ * @returns {Promise<boolean>} True if TypeScript is found in dependencies or devDependencies
+ */
+async function detectTypeScript() {
+  try {
+    const packageJsonPath = path.join(cwd(), "package.json");
+    const packageJsonContent = await readFile(packageJsonPath, "utf-8");
+    const pkg = JSON.parse(packageJsonContent);
+    const deps = { ...pkg.dependencies, ...pkg.devDependencies };
+
+    return Boolean(deps.typescript);
+  } catch (error) {
+    console.error("Failed to detect TypeScript:", error);
+
+    return false;
+  }
 }

package/bin/constants.js

@@ -1,7 +1,8 @@
 export const SRC_COMPONENTS_PATH = "/src/components";
 export const COMPONENTS_PATH = "/components";
 
-export const DEFAULT_VUELESS_CONFIG_CONTENT = `
+export const DEFAULT_VUELESS_CONFIG_CONTENT = `import { componentConfigs } from "./.vueless";
+
 export default {
   /**
    * Global settings.
@@ -14,6 +15,18 @@ export default {
   disabledOpacity: 50,
   colorMode: "auto",
 
+  /**
+   * Component settings.
+   */
+  components: /*tw*/ {
+    ...componentConfigs,
+  },
+
+  /**
+   * Directive settings.
+   */
+  directives: {},
+
   /**
    * Light theme CSS variable settings.
    */
@@ -153,22 +166,19 @@ export default {
     "--vl-bg-accented": "--vl-neutral-700",
     "--vl-bg-inverted": "--vl-neutral-100",
   },
+};
+`;
 
-  /**
-   * Directive settings.
-   */
-  directives: {},
+export const SUPPRESS_TS_CHECK = `// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-nocheck`;
 
-  /**
-   * Component settings.
-   */
-  components: /*tw*/ {},
+export const COMPONENTS_INDEX_COMMENT = `/**
+ * ⚠️ This file is auto-generated — do not edit it manually.
+ * It gets updated automatically whenever the Vite server restarts.
+ *
+ * This file imports all component config files from the current directory.
+ * Only files following the naming pattern "U[Component].config.[ts|js]" will be included.
+ * Example: "UButton.config.ts"
+ */`;
 
-  /**
-   * TailwindMerge settings for custom Tailwind CSS classes.
-   * All lists of rules available here:
-   * https://github.com/dcastil/tailwind-merge/blob/main/src/lib/default-config.ts
-   */
-  tailwindMerge: {},
-};
-`;
+export const COMPONENTS_INDEX_EXPORT = `export const componentConfigs = {};`;

package/composables/tests/useUI.test.ts

@@ -0,0 +1,494 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
+import { computed, nextTick } from "vue";
+import { mount } from "@vue/test-utils";
+
+// TODO: Autogenerated, need to be reviewed
+
+// Mock the ui utils
+vi.mock("../../utils/ui.ts", () => ({
+  cx: vi.fn((classes) => (Array.isArray(classes) ? classes.filter(Boolean).join(" ") : classes)),
+  cva: vi.fn((config) => {
+    // Return a spy function that can be called and tracked
+    const cvaSpy = vi.fn((props) => {
+      if (!config.variants) return config.base || "";
+
+      let classes = config.base || "";
+
+      // Apply variants
+      Object.entries(config.variants).forEach(([key, variants]) => {
+        const value = props[key];
+
+        if (value && variants[value]) {
+          classes += ` ${variants[value]}`;
+        }
+      });
+
+      return classes.trim();
+    });
+
+    return cvaSpy;
+  }),
+  setColor: vi.fn((classes, color) => classes?.replace(/{color}/g, color)),
+  vuelessConfig: { components: {}, unstyled: false },
+  getMergedConfig: vi.fn((args) => {
+    // Create a spy function that returns the expected merged config
+    const { defaultConfig, globalConfig, propsConfig } = args;
+
+    return {
+      ...defaultConfig,
+      ...globalConfig,
+      ...propsConfig,
+    };
+  }),
+}));
+
+// Mock Vue functions
+vi.mock("vue", async () => {
+  const actual = await vi.importActual("vue");
+
+  return {
+    ...actual,
+    getCurrentInstance: vi.fn(),
+    useAttrs: vi.fn(),
+  };
+});
+
+import useUI from "../useUI.ts";
+import * as uiUtils from "../../utils/ui.ts";
+import { getCurrentInstance, useAttrs } from "vue";
+
+// Test component for integration testing
+const TestComponent = {
+  template: '<div :data-test="getDataTest()" v-bind="bodyAttrs">Test</div>',
+  setup() {
+    const defaultConfig = {
+      body: {
+        base: "base-class",
+        variants: {
+          variant: {
+            primary: "primary-class",
+            secondary: "secondary-class",
+          },
+          size: {
+            sm: "small-class",
+            md: "medium-class",
+          },
+        },
+      },
+      defaults: {
+        variant: "primary",
+        size: "md",
+      },
+    };
+
+    return useUI(defaultConfig);
+  },
+};
+
+describe("useUI", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    // Reset vuelessConfig
+    uiUtils.vuelessConfig.components = {};
+    uiUtils.vuelessConfig.unstyled = false;
+
+    // Setup default mocks
+    vi.mocked(getCurrentInstance).mockReturnValue({
+      type: { __name: "TestComponent" },
+      props: { dataTest: "test", color: "primary", config: {} },
+      parent: null,
+    });
+
+    vi.mocked(useAttrs).mockReturnValue({
+      class: "",
+      style: "",
+    });
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  describe("Basic Functionality", () => {
+    it("should return config, getDataTest, and attribute objects", () => {
+      const defaultConfig = {
+        body: { base: "test-class" },
+        defaults: { variant: "primary" },
+      };
+
+      const result = useUI(defaultConfig);
+
+      expect(result).toHaveProperty("config");
+      expect(result).toHaveProperty("getDataTest");
+      expect(result).toHaveProperty("bodyAttrs");
+      expect(typeof result.getDataTest).toBe("function");
+    });
+
+    it("should merge default config with global and props config", async () => {
+      const defaultConfig = {
+        body: { base: "default-class" },
+        defaults: { variant: "primary" },
+      };
+
+      const globalConfig = {
+        body: { base: "global-class" },
+      };
+
+      const propsConfig = {
+        body: { base: "props-class" },
+      };
+
+      // Set global config
+      uiUtils.vuelessConfig.components = {
+        TestComponent: globalConfig,
+      };
+
+      // Mock getCurrentInstance to return props config
+      vi.mocked(getCurrentInstance).mockReturnValue({
+        type: { __name: "TestComponent" },
+        props: { config: propsConfig, dataTest: "test" },
+        parent: null,
+      });
+
+      // Call useUI to trigger the config merging
+      useUI(defaultConfig);
+
+      expect(uiUtils.getMergedConfig).toHaveBeenCalledWith({
+        defaultConfig,
+        globalConfig,
+        propsConfig,
+        unstyled: false,
+      });
+    });
+  });
+
+  describe("CVA Integration", () => {
+    it("should generate classes using CVA when config has variants", () => {
+      const defaultConfig = {
+        body: {
+          base: "base-class",
+          variants: {
+            variant: {
+              primary: "primary-class",
+              secondary: "secondary-class",
+            },
+          },
+        },
+      };
+
+      // Call useUI to trigger CVA usage
+      useUI(defaultConfig);
+
+      expect(uiUtils.cva).toHaveBeenCalledWith(defaultConfig.body);
+    });
+
+    it("should handle string-based config values", () => {
+      const defaultConfig = {
+        body: "simple-string-class",
+      };
+
+      const result = useUI(defaultConfig);
+      const bodyAttrs = result.bodyAttrs;
+
+      expect(bodyAttrs.value.class).toContain("simple-string-class");
+    });
+  });
+
+  describe("Color Handling", () => {
+    it("should replace {color} placeholders in classes", () => {
+      // Mock getCurrentInstance to return color prop
+      vi.mocked(getCurrentInstance).mockReturnValue({
+        type: { __name: "TestComponent" },
+        props: { color: "blue", dataTest: "test" },
+        parent: null,
+      });
+
+      // Test the setColor function directly
+      expect(uiUtils.setColor).toBeDefined();
+
+      // The setColor function should replace {color} placeholders
+      const testClasses = "text-{color} bg-{color}";
+      const coloredClasses = uiUtils.setColor(testClasses, "blue");
+
+      expect(coloredClasses).toBe("text-blue bg-blue");
+
+      // Test that useUI can be called with color-containing config
+      const defaultConfig = {
+        wrapper: {
+          base: "text-{color} bg-{color}",
+        },
+      };
+
+      const result = useUI(defaultConfig);
+
+      expect(result).toHaveProperty("config");
+      expect(result).toHaveProperty("getDataTest");
+    });
+  });
+
+  describe("getDataTest Function", () => {
+    it("should return data-test value when dataTest prop is provided", () => {
+      const result = useUI({});
+      const dataTest = result.getDataTest();
+
+      expect(dataTest).toBe("test");
+    });
+
+    it("should return data-test with suffix when suffix is provided", () => {
+      const result = useUI({});
+      const dataTest = result.getDataTest("button");
+
+      expect(dataTest).toBe("test-button");
+    });
+
+    it("should return null when dataTest prop is not provided", () => {
+      // Mock getCurrentInstance to return no dataTest
+      vi.mocked(getCurrentInstance).mockReturnValue({
+        type: { __name: "TestComponent" },
+        props: {},
+        parent: null,
+      });
+
+      const result = useUI({});
+      const dataTest = result.getDataTest();
+
+      expect(dataTest).toBeNull();
+    });
+  });
+
+  describe("Nested Component Handling", () => {
+    it("should handle nested component references like {UIcon}", () => {
+      const defaultConfig = {
+        icon: "{UIcon}",
+        button: "btn {UIcon} end",
+      };
+
+      const result = useUI(defaultConfig);
+
+      // The nested component pattern should be processed
+      expect(result).toHaveProperty("iconAttrs");
+      expect(result).toHaveProperty("buttonAttrs");
+    });
+  });
+
+  describe("Reactivity", () => {
+    it("should update config when props.config changes", async () => {
+      const component = mount(TestComponent);
+
+      // Initial state
+      expect(component.vm.config).toBeDefined();
+
+      // Change props
+      await component.setProps({
+        config: {
+          body: { base: "new-class" },
+        },
+      });
+
+      await nextTick();
+
+      // Config should be updated
+      expect(uiUtils.getMergedConfig).toHaveBeenCalled();
+    });
+  });
+
+  describe("Extends Pattern Handling", () => {
+    it("should handle extends pattern {>key} syntax", () => {
+      const defaultConfig = {
+        button: "base-class {>icon}",
+        icon: "icon-class",
+      };
+
+      const result = useUI(defaultConfig);
+
+      expect(result).toHaveProperty("buttonAttrs");
+      expect(result).toHaveProperty("iconAttrs");
+    });
+  });
+
+  describe("Mutated Props", () => {
+    it("should use mutated props for class generation", () => {
+      const defaultConfig = {
+        body: {
+          base: "base-class",
+          variants: {
+            hasIcon: {
+              true: "with-icon",
+              false: "without-icon",
+            },
+          },
+        },
+      };
+
+      const mutatedProps = computed(() => ({
+        hasIcon: true,
+      }));
+
+      const result = useUI(defaultConfig, mutatedProps);
+
+      expect(result).toHaveProperty("bodyAttrs");
+    });
+  });
+
+  describe("Component Name Detection", () => {
+    it("should detect component name from type.__name", () => {
+      vi.mocked(getCurrentInstance).mockReturnValue({
+        type: { __name: "UButton" },
+        props: { dataTest: "test" },
+        parent: null,
+      });
+
+      const result = useUI({});
+
+      expect(result).toBeDefined();
+    });
+
+    it("should detect component name from parent when internal component", () => {
+      vi.mocked(getCurrentInstance).mockReturnValue({
+        type: { internal: true },
+        props: { dataTest: "test" },
+        parent: {
+          type: { __name: "UButton" },
+        },
+      });
+
+      const result = useUI({});
+
+      expect(result).toBeDefined();
+    });
+  });
+
+  describe("Attribute Generation", () => {
+    it("should generate proper attributes for each config key", () => {
+      const defaultConfig = {
+        wrapper: { base: "wrapper-class" },
+        content: { base: "content-class" },
+        footer: "footer-class",
+      };
+
+      const result = useUI(defaultConfig);
+
+      expect(result).toHaveProperty("wrapperAttrs");
+      expect(result).toHaveProperty("contentAttrs");
+      expect(result).toHaveProperty("footerAttrs");
+    });
+
+    it("should include config in attributes for nested components", () => {
+      const defaultConfig = {
+        icon: {
+          base: "{UIcon}",
+          defaults: {
+            size: "sm",
+          },
+        },
+      };
+
+      const result = useUI(defaultConfig);
+      const iconAttrs = result.iconAttrs;
+
+      expect(iconAttrs.value).toHaveProperty("config");
+    });
+  });
+
+  describe("Edge Cases", () => {
+    it("should handle empty config", () => {
+      const result = useUI({});
+
+      expect(result.config).toBeDefined();
+      expect(result.getDataTest).toBeDefined();
+    });
+
+    it("should handle null/undefined config values", () => {
+      const defaultConfig = {
+        body: "",
+        icon: undefined,
+      };
+
+      const result = useUI(defaultConfig);
+
+      expect(result).toHaveProperty("bodyAttrs");
+      expect(result).toHaveProperty("iconAttrs");
+
+      // Should not throw errors when accessing attributes
+      expect(() => result.bodyAttrs.value).not.toThrow();
+      expect(() => result.iconAttrs.value).not.toThrow();
+    });
+
+    it("should handle unstyled mode", () => {
+      uiUtils.vuelessConfig.unstyled = true;
+
+      const defaultConfig = {
+        body: { base: "styled-class" },
+      };
+
+      useUI(defaultConfig);
+
+      expect(uiUtils.getMergedConfig).toHaveBeenCalledWith(
+        expect.objectContaining({
+          unstyled: true,
+        }),
+      );
+    });
+
+    it("should handle config with only defaults", () => {
+      const defaultConfig = {
+        defaults: {
+          variant: "primary",
+          size: "md",
+        },
+      };
+
+      const result = useUI(defaultConfig);
+
+      expect(result.config).toBeDefined();
+    });
+
+    it("should handle deep config changes", async () => {
+      const component = mount(TestComponent);
+
+      // Change nested config
+      await component.setProps({
+        config: {
+          body: {
+            base: "new-base",
+            variants: {
+              variant: {
+                custom: "custom-class",
+              },
+            },
+          },
+        },
+      });
+
+      await nextTick();
+
+      expect(uiUtils.getMergedConfig).toHaveBeenCalled();
+    });
+  });
+
+  describe("Integration Tests", () => {
+    it("should work with real component mounting", () => {
+      const component = mount(TestComponent);
+
+      expect(component.exists()).toBe(true);
+      expect(component.attributes("data-test")).toBe("test");
+    });
+
+    it("should handle prop changes in mounted component", async () => {
+      const component = mount(TestComponent);
+
+      // The component should render with the default dataTest from the mock
+      expect(component.exists()).toBe(true);
+
+      // Test that the component can handle config changes
+      await component.setProps({
+        config: {
+          body: { base: "new-config-class" },
+        },
+      });
+
+      // The component should still exist and function after prop changes
+      expect(component.exists()).toBe(true);
+    });
+  });
+});