vueless 0.0.674 → 0.0.676

package/bin/commands/create.js

@@ -0,0 +1,77 @@
+/* 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 { styleText } from "node:util";
+
+import { getDirFiles } from "../../utils/node/helper.js";
+import { replaceRelativeImports } from "../utils/formatUtil.js";
+import { getLastStorybookId } from "../utils/dataUtils.js";
+
+import { SRC_COMPONENTS_PATH, COMPONENTS_PATH } from "../constants.js";
+
+import { COMPONENTS, VUELESS_DIR, VUELESS_LOCAL_DIR } from "../../constants.js";
+
+const boilerplateName = "UBoilerplate";
+const boilerplatePath = path.join(cwd(), VUELESS_DIR, "ui.boilerplate");
+
+export async function createVuelessComponent(options) {
+  const [componentName] = options;
+
+  if (!componentName) {
+    throw new Error("Component name is required");
+  }
+
+  const isSrcDir = existsSync(path.join(cwd(), VUELESS_LOCAL_DIR));
+  const destPath = isSrcDir
+    ? path.join(cwd(), SRC_COMPONENTS_PATH, componentName)
+    : path.join(cwd(), COMPONENTS_PATH, componentName);
+
+  const isComponentExists = componentName in COMPONENTS || existsSync(destPath);
+
+  if (isComponentExists) {
+    throw new Error(`Component with name ${componentName} alrady exists`);
+  }
+
+  await cp(boilerplatePath, destPath, { recursive: true });
+
+  await modifyCreatedComponent(destPath, componentName);
+
+  const successMessage = styleText(
+    "green",
+    `Success: ${componentName} was created in ${destPath} directory`,
+  );
+
+  console.log(successMessage);
+}
+
+async function modifyCreatedComponent(destPath, componentName) {
+  const destFiles = await getDirFiles(destPath, "");
+  const lastStorybookId = await getLastStorybookId();
+
+  for await (const filePath of destFiles) {
+    const fileContent = await readFile(filePath, "utf-8");
+
+    let updatedContent = replaceRelativeImports(componentName, filePath, fileContent);
+    let targetPath = filePath;
+
+    if (filePath.endsWith("constants.ts")) {
+      updatedContent = updatedContent.replace(boilerplateName, componentName);
+    }
+
+    if (filePath.endsWith("stories.ts")) {
+      updatedContent = updatedContent
+        .replaceAll(boilerplateName, componentName)
+        .replace("{{component_id}}", String(lastStorybookId + 10));
+    }
+
+    if (targetPath.endsWith(`${boilerplateName}.vue`)) {
+      targetPath = targetPath.replace(boilerplateName, componentName);
+
+      await rename(filePath, targetPath);
+    }
+
+    await writeFile(targetPath, updatedContent);
+  }
+}

package/bin/commands/index.js

@@ -1,5 +1,7 @@
 import { vuelssInit } from "./init.js";
+import { createVuelessComponent } from "./create.js";
 
 export const commands = {
   init: vuelssInit,
+  create: createVuelessComponent,
 };

package/bin/commands/init.js

@@ -5,14 +5,10 @@ import path from "node:path";
 import { writeFile } from "node:fs/promises";
 import { styleText } from "node:util";
 
-import {
-  DEFAULT_VUELESS_CONFIG_NAME,
-  DEFAULT_VUELESS_CONFIG_CONTNET,
-  TYPESCRIPT_EXT,
-  JAVASCRIPT_EXT,
-} from "../constants.js";
-
-const destPath = path.join(cwd(), DEFAULT_VUELESS_CONFIG_NAME);
+import { DEFAULT_VUELESS_CONFIG_CONTNET } from "../constants.js";
+import { JAVASCRIPT_EXT, TYPESCRIPT_EXT, VUELESS_CONFIG_FILE_NAME } from "../../constants.js";
+
+const destPath = path.join(cwd(), VUELESS_CONFIG_FILE_NAME);
 
 const vuelessInitOptions = ["--ts", "--js"];
 

package/bin/constants.js

@@ -1,8 +1,5 @@
-export const DEFAULT_VUELESS_CONFIG_NAME = "vueless.config.js";
-export const DEFAULT_EXIT_CODE = 0;
-export const FAILURE_CODE = 1;
-export const TYPESCRIPT_EXT = ".ts";
-export const JAVASCRIPT_EXT = ".js";
+export const SRC_COMPONENTS_PATH = "/src/components";
+export const COMPONENTS_PATH = "/components";
 export const DEFAULT_VUELESS_CONFIG_CONTNET = `
 export default {
   /**

package/bin/index.js

@@ -4,7 +4,7 @@
 
 import { commands } from "./commands/index.js";
 
-import { DEFAULT_EXIT_CODE, FAILURE_CODE } from "./constants.js";
+import { DEFAULT_EXIT_CODE, FAILURE_CODE } from "../constants.js";
 
 const [command, ...options] = process.argv.slice(2);
 

package/bin/utils/dataUtils.js

@@ -0,0 +1,53 @@
+import { existsSync } from "node:fs";
+import { cwd } from "node:process";
+import path from "node:path";
+import { readFile } from "node:fs/promises";
+
+import { getDirFiles } from "../../utils/node/helper.js";
+
+import { SRC_COMPONENTS_PATH, COMPONENTS_PATH } from "../constants.js";
+import { VUELESS_DIR } from "../../constants.js";
+
+const storiesName = "stories.ts";
+
+export async function getLastStorybookId() {
+  const srcComponentsDir = path.join(cwd(), SRC_COMPONENTS_PATH);
+  const componentsDir = path.join(cwd(), COMPONENTS_PATH);
+  const vuelessPackagePath = path.join(cwd(), VUELESS_DIR);
+  const isSrcComponentsDir = existsSync(srcComponentsDir);
+  const isComponentsDir = existsSync(componentsDir);
+
+  const stories = await getDirFiles(vuelessPackagePath, storiesName);
+
+  if (isSrcComponentsDir) {
+    const srcComponentsDirStories = await getDirFiles(srcComponentsDir, storiesName);
+
+    stories.push(...srcComponentsDirStories);
+  }
+
+  if (isComponentsDir) {
+    const componentsDirStories = await getDirFiles(componentsDir, storiesName);
+
+    stories.push(...componentsDirStories);
+  }
+
+  let id = 200000;
+
+  for await (const storyPath of stories) {
+    const storyContent = await readFile(storyPath, "utf-8");
+
+    const storyIdLine = storyContent.split("\n").find((line, idx, array) => {
+      return line.includes("id:") && idx && array[idx - 1].includes("export default");
+    });
+
+    if (!storyIdLine) continue;
+
+    const currentId = parseInt(storyIdLine.split(" ").at(-1).replaceAll('"', ""));
+
+    if (currentId > id && !Number.isNaN(currentId)) {
+      id = currentId;
+    }
+  }
+
+  return id;
+}

package/bin/utils/formatUtil.js

@@ -0,0 +1,48 @@
+import path from "node:path";
+
+export function replaceRelativeImports(componentName, filePath, fileContent) {
+  const isTopLevelFile = path.dirname(filePath).endsWith(componentName);
+  const contentLines = fileContent.split("\n");
+
+  return contentLines.map((line) => replaceRelativeLineImports(line, isTopLevelFile)).join("\n");
+}
+
+function replaceRelativeLineImports(line, isTopLevelFile) {
+  const importRegex = /import\s+(?:[\w\s{},*]+)\s+from\s+(['"])(\.\.?\/.*?)(\.[tj]s)?\1(?!\?)/g;
+
+  const isTopLevelLocalImport = isTopLevelFile && !line.includes("../");
+  const isInnerLocalImport =
+    !isTopLevelFile && (line.includes("../") || line.includes("./")) && !line.includes("../../");
+
+  if (isTopLevelLocalImport || isInnerLocalImport) {
+    return line;
+  }
+
+  return line.replace(importRegex, (match, quote, oldPath, ext) => {
+    const isDefaultImport = match.includes("{");
+
+    if (!isDefaultImport) {
+      match = defaultToNamedImport(match);
+    }
+
+    return match.replace(oldPath + (ext || ""), "vueless");
+  });
+}
+
+function defaultToNamedImport(importString) {
+  const splittedImport = importString.split(" ");
+
+  return splittedImport
+    .map((importStringToken) => {
+      if (importStringToken.includes("import")) {
+        return `${importStringToken} { `;
+      }
+
+      if (importStringToken.includes("from")) {
+        return ` } ${importStringToken} `;
+      }
+
+      return importStringToken;
+    })
+    .join("");
+}

package/composables/useUI.ts

@@ -241,7 +241,18 @@ export default function useUI<T>(
     return vuelessAttrs;
   }
 
-  return { config, getKeysAttrs, ...getKeysAttrs(mutatedProps) } as UseUI<T>;
+  /**
+   * Get data test attribute value if exist.
+   */
+  function getDataTest(suffix?: string) {
+    if (!props.dataTest) {
+      return null;
+    }
+
+    return suffix ? `${props.dataTest}-${suffix}` : props.dataTest;
+  }
+
+  return { config, getDataTest, ...getKeysAttrs(mutatedProps) } as UseUI<T>;
 }
 
 /**

package/constants.js

@@ -221,6 +221,10 @@ export const VUELESS_ICONS_LOCAL_DIR = `src/${ICONS_DIR}`;
 export const VUELESS_ICONS_CACHED_DIR = `${VUELESS_CACHE_DIR}/${ICONS_DIR}`;
 export const VUELESS_CONFIGS_CACHED_DIR = `${VUELESS_CACHE_DIR}/configs`;
 
+/* System error codes */
+export const DEFAULT_EXIT_CODE = 0;
+export const FAILURE_CODE = 1;
+
 /* Other */
 export const PX_IN_REM = 16;
 export const NESTED_COMPONENT_PATTERN_REG_EXP = /\{(U[^}]*)}/;
@@ -229,3 +233,5 @@ export const DYNAMIC_COLOR_PATTERN = "{color}";
 export const TAILWIND_COLOR_OPACITY_DELIMITER = "/";
 export const TAILWIND_VARIANT_DELIMITER = ":";
 export const TAILWIND_VARIANT_DELIMITER_REG_EXP = /:(?![^[]*])/;
+export const JAVASCRIPT_EXT = ".js";
+export const TYPESCRIPT_EXT = ".ts";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "0.0.674",
+  "version": "0.0.676",
   "license": "MIT",
   "description": "Vue Styleless UI Component Library, powered by Tailwind CSS.",
   "keywords": [
@@ -33,7 +33,7 @@
     "build": "npm run pre:start && storybook build --docs",
     "preview": "vite preview --host --outDir=storybook-static",
     "ts:check": "vue-tsc --build --force",
-    "release:prepare": "npm run pre:start && rm -rf dist && mkdir -p dist && cp -r src/. package.json LICENSE README.md dist/ && cp -r bin dist/bin",
+    "release:prepare": "npm run pre:start && rm -rf dist && mkdir -p dist && cp -r src/. package.json LICENSE README.md dist/",
     "release:beta": "release-it --ci --npm.publish --preRelease=beta --increment=prerelease",
     "release:patch": "release-it patch --ci --npm.publish",
     "release:minor": "release-it minor --ci --npm.publish --git.tag --github.release",

package/plugin-vite.js

@@ -14,6 +14,8 @@ import { setCustomPropTypes, removeCustomPropTypes } from "./utils/node/dynamicP
 import { buildWebTypes } from "./utils/node/webTypes.js";
 import { hideHiddenStories, showHiddenStories } from "./utils/node/dynamicStories.js";
 
+import { DEFAULT_EXIT_CODE } from "./constants.js";
+
 /* Automatically importing Vueless components on demand */
 export const VuelessUnpluginComponents = (options) =>
   UnpluginVueComponents({
@@ -48,7 +50,7 @@ export const Vueless = function (options = {}) {
     clearTailwindSafelist(debug);
 
     /* stop command line process */
-    process.exit(0);
+    process.exit(DEFAULT_EXIT_CODE);
   });
 
   return {

package/types.ts

@@ -297,7 +297,7 @@ export type MutatedProps = ComputedRef<UnknownObject>;
 
 export type UseUI<T> = {
   config: Ref<T & ComponentConfig<T>>;
-  getKeysAttrs: (mutatedProps?: MutatedProps) => KeysAttrs<T>;
+  getDataTest: (suffix?: string) => string | null;
 } & KeysAttrs<T>;
 
 export type KeysAttrs<T> = Record<

package/ui.boilerplate/storybook/stories.ts

@@ -10,7 +10,7 @@ interface UBoilerplateArgs extends Props {
 }
 
 export default {
-  id: "110010",
+  id: "{{component_id}}",
   title: "Custom / UBoilerplate",
   component: UBoilerplate,
   args: {

package/ui.boilerplate/types.ts

@@ -14,5 +14,5 @@ export interface Props {
   /**
    * Data-test attribute for automated testing.
    */
-  dataTest?: string;
+  dataTest?: string | null;
 }

package/ui.button/UButton.vue

@@ -67,10 +67,8 @@ const mutatedProps = computed(() => ({
   label: Boolean(props.label),
 }));
 
-const { buttonAttrs, loaderAttrs, leftIconAttrs, rightIconAttrs, centerIconAttrs } = useUI<Config>(
-  defaultConfig,
-  mutatedProps,
-);
+const { getDataTest, buttonAttrs, loaderAttrs, leftIconAttrs, rightIconAttrs, centerIconAttrs } =
+  useUI<Config>(defaultConfig, mutatedProps);
 </script>
 
 <template>
@@ -82,10 +80,15 @@ const { buttonAttrs, loaderAttrs, leftIconAttrs, rightIconAttrs, centerIconAttrs
     v-bind="buttonAttrs"
     :style="buttonStyle"
     :tabindex="!loading ? tabindex : -1"
-    :data-test="dataTest"
+    :data-test="getDataTest()"
   >
     <template v-if="loading">
-      <ULoader :loading="loading" color="inherit" v-bind="loaderAttrs" />
+      <ULoader
+        :loading="loading"
+        color="inherit"
+        v-bind="loaderAttrs"
+        :data-test="getDataTest('loader')"
+      />
     </template>
 
     <template v-else>

package/ui.button/types.ts

@@ -118,5 +118,5 @@ export interface Props {
   /**
    * Data-test attribute for automated testing.
    */
-  dataTest?: string;
+  dataTest?: string | null;
 }

package/ui.button-link/ULink.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, ref, useSlots } from "vue";
+import { computed, useSlots } from "vue";
 import { RouterLink, useLink } from "vue-router";
 
 import useUI from "../composables/useUI.ts";
@@ -71,13 +71,6 @@ const useLinkOptions = {
 
 const { route, isActive, isExactActive } = useLink(useLinkOptions);
 
-const wrapperRef = ref(null);
-
-const wrapperActiveClasses = computed(() => [
-  isActive.value && props.wrapperActiveClass,
-  isExactActive.value && props.wrapperExactActiveClass,
-]);
-
 const linkActiveClasses = computed(() => [
   isActive.value && props.activeClass,
   isExactActive.value && props.exactActiveClass,
@@ -117,14 +110,6 @@ function onBlur(event: FocusEvent) {
   emit("blur", event);
 }
 
-defineExpose({
-  /**
-   * A reference to the link wrapper element for direct DOM manipulation.
-   * @property {HTMLElement}
-   */
-  wrapperRef,
-});
-
 /**
  * Get element / nested component attributes for each config token ✨
  * Applies: `class`, `config`, redefined default `props` and dev `vl-...` attributes.
@@ -134,53 +119,43 @@ const mutatedProps = computed(() => ({
   defaultSlot: hasSlotContent(slots["default"]),
 }));
 
-const { wrapperAttrs, linkAttrs } = useUI<Config>(defaultConfig, mutatedProps, "link");
+const { getDataTest, linkAttrs } = useUI<Config>(defaultConfig, mutatedProps);
 </script>
 
 <template>
-  <div v-bind="wrapperAttrs" ref="wrapperRef" :class="wrapperActiveClasses" tabindex="-1">
-    <!-- @slot Use it to add something before the label. -->
-    <slot name="left" />
-
-    <router-link
-      v-if="isPresentRoute"
-      :to="route"
-      :target="targetValue"
-      v-bind="linkAttrs"
-      :class="linkActiveClasses"
-      :data-test="dataTest"
-      tabindex="0"
-      @blur="onBlur"
-      @focus="onFocus"
-      @click="onClick"
-      @keydown="onKeydown"
-      @mouseover="onMouseover"
-    >
-      <!-- @slot Use it replace the label. -->
-      <slot>
-        {{ label }}
-      </slot>
-    </router-link>
-
-    <a
-      v-else
-      :href="prefixedHref"
-      :target="targetValue"
-      v-bind="linkAttrs"
-      :class="linkActiveClasses"
-      :data-test="dataTest"
-      tabindex="0"
-      @blur="onBlur"
-      @focus="onFocus"
-      @click="onClick"
-      @keydown="onKeydown"
-      @mouseover="onMouseover"
-    >
-      <!-- @slot Use it replace the label. -->
-      <slot>{{ label }}</slot>
-    </a>
-
-    <!-- @slot Use it to add something after the label. -->
-    <slot name="right" />
-  </div>
+  <router-link
+    v-if="isPresentRoute"
+    :to="route"
+    :target="targetValue"
+    v-bind="linkAttrs"
+    :class="linkActiveClasses"
+    :data-test="getDataTest()"
+    tabindex="0"
+    @blur="onBlur"
+    @focus="onFocus"
+    @click="onClick"
+    @keydown="onKeydown"
+    @mouseover="onMouseover"
+  >
+    <!-- @slot Use it replace the label. -->
+    <slot>{{ label }}</slot>
+  </router-link>
+
+  <a
+    v-else
+    :href="prefixedHref"
+    :target="targetValue"
+    v-bind="linkAttrs"
+    :class="linkActiveClasses"
+    :data-test="getDataTest()"
+    tabindex="0"
+    @blur="onBlur"
+    @focus="onFocus"
+    @click="onClick"
+    @keydown="onKeydown"
+    @mouseover="onMouseover"
+  >
+    <!-- @slot Use it replace the label. -->
+    <slot>{{ label }}</slot>
+  </a>
 </template>

package/ui.button-link/config.ts

@@ -1,40 +1,12 @@
 export default /*tw*/ {
-  wrapper: {
-    base: `
-      w-fit inline-flex items-center rounded transition focus-visible:outline-none
-      focus-within:ring-dynamic focus-within:ring-offset-4 focus-within:ring-{color}-700/15
-    `,
-    variants: {
-      size: {
-        sm: "gap-1",
-        md: "gap-1",
-        lg: "gap-1.5",
-      },
-      color: {
-        grayscale: "focus-within:ring-gray-700/15",
-        white: "focus-within:ring-white/15",
-      },
-      disabled: {
-        true: "!ring-0 !ring-offset-0 cursor-not-allowed",
-      },
-      defaultSlot: {
-        true: "flex items-center focus-within:ring-0 focus-within:ring-offset-0",
-      },
-      ring: {
-        false: "!ring-0 !ring-offset-0",
-      },
-      block: {
-        true: "w-full",
-      },
-    },
-  },
   link: {
     base: `
-      inline-block cursor-pointer !leading-none transition
+      inline-block cursor-pointer !leading-none rounded transition
       text-{color}-600 decoration-{color}-600 underline-offset-4
       hover:text-{color}-700 hover:decoration-{color}-700
       focus:text-{color}-700 focus:decoration-{color}-700 focus:outline-0
       active:text-{color}-800 active:decoration-{color}-800
+      focus:ring-dynamic focus:ring-offset-4 focus:ring-{color}-700/15
     `,
     variants: {
       size: {
@@ -57,10 +29,10 @@ export default /*tw*/ {
         grayscale: `
           text-gray-900 decoration-gray-900
           hover:text-gray-800 hover:decoration-gray-800
-          focus:text-gray-800 focus:decoration-gray-800
+          focus:text-gray-800 focus:decoration-gray-800 focus:ring-gray-700/15
           active:text-gray-700 active:decoration-gray-700
         `,
-        white: "decoration-white text-white",
+        white: "decoration-white text-white focus:ring-white/15",
       },
       defaultSlot: {
         true: "flex items-center no-underline hover:no-underline",
@@ -71,6 +43,9 @@ export default /*tw*/ {
       disabled: {
         true: "text-gray-400 pointer-events-none",
       },
+      ring: {
+        false: "!ring-0 !ring-offset-0",
+      },
       block: {
         true: "w-full",
       },
@@ -83,11 +58,9 @@ export default /*tw*/ {
     ariaCurrentValue: "page",
     activeClass: "",
     exactActiveClass: "",
-    wrapperActiveClass: "",
-    wrapperExactActiveClass: "",
     underlined: undefined,
     block: false,
-    ring: true,
+    ring: false,
     dashed: false,
     disabled: false,
     targetBlank: false,

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

@@ -196,25 +196,3 @@ DefaultSlot.args = {
     </template>
   `,
 };
-
-export const LeftAndRightSlots: StoryFn<ULinkArgs> = (args: ULinkArgs) => ({
-  components: { ULink, UIcon, URow },
-  setup() {
-    return { args };
-  },
-  template: `
-    <URow no-mobile>
-      <ULink label="Download">
-        <template #left>
-          <UIcon name="download" size="xs" color="green" />
-        </template>
-      </ULink>
-
-      <ULink label="Open">
-        <template #right>
-          <UIcon name="open_in_new" size="xs" color="green" />
-        </template>
-      </ULink>
-    </URow>
-  `,
-});

package/ui.button-link/types.ts

@@ -87,16 +87,6 @@ export interface Props {
    */
   exactActiveClass?: string;
 
-  /**
-   * Apply classes to the wrapper div when link route is active or when it matches any parent route.
-   */
-  wrapperActiveClass?: string;
-
-  /**
-   * Apply classes to the wrapper div when link route is active.
-   */
-  wrapperExactActiveClass?: string;
-
   /**
    * Show underline.
    */
@@ -130,5 +120,5 @@ export interface Props {
   /**
    * Data-test attribute for automated testing.
    */
-  dataTest?: string;
+  dataTest?: string | null;
 }

package/ui.button-toggle/types.ts

@@ -94,5 +94,5 @@ export interface Props {
   /**
    * Data-test attribute for automated testing.
    */
-  dataTest?: string;
+  dataTest?: string | null;
 }

package/ui.button-toggle-item/types.ts

@@ -56,5 +56,5 @@ export interface Props {
   /**
    * Data-test attribute for automated testing.
    */
-  dataTest?: string;
+  dataTest?: string | null;
 }

package/ui.container-accordion/types.ts

@@ -32,5 +32,5 @@ export interface Props {
   /**
    * Data-test attribute for automated testing.
    */
-  dataTest?: string;
+  dataTest?: string | null;
 }

package/ui.container-card/types.ts

@@ -22,5 +22,5 @@ export interface Props {
   /**
    * Data-test attribute for automated testing.
    */
-  dataTest?: string;
+  dataTest?: string | null;
 }

package/ui.container-col/types.ts

@@ -52,5 +52,5 @@ export interface Props {
   /**
    * Data-test attribute for automated testing.
    */
-  dataTest?: string;
+  dataTest?: string | null;
 }