vueless 0.0.4 → 0.0.5

package/src/plugin.vite/services/svgLoader.service.js

@@ -0,0 +1,76 @@
+/* eslint-disable no-console */
+
+import fs from "fs";
+import { compileTemplate } from "vue/compiler-sfc";
+import { optimize as optimizeSvg } from "svgo";
+
+const DEFAULT_SVGO_CONFIG = {
+  plugins: [
+    {
+      name: "preset-default",
+      params: {
+        overrides: {
+          removeViewBox: false,
+          convertColors: {
+            currentColor: true,
+          },
+        },
+      },
+    },
+  ],
+};
+
+export async function loadSvg(id, options) {
+  const { defaultImport = "url", svgo = true, svgoConfig = DEFAULT_SVGO_CONFIG } = options;
+  const svgRegex = /\.svg(\?(raw|url|component|skipsvgo))?$/;
+
+  if (!id.match(svgRegex)) {
+    return;
+  }
+
+  let svg;
+  const [path, query] = id.split("?", 2);
+  const importType = query || defaultImport;
+
+  // use default svg loader
+  if (importType === "url" && !path.includes(".generated")) {
+    return;
+  }
+
+  try {
+    svg = await fs.promises.readFile(path, "utf-8");
+  } catch (ex) {
+    console.warn(
+      "\n",
+      `${id} couldn't be loaded by vite-plugin-vue-vueless, fallback to default loader.`,
+    );
+
+    return;
+  }
+
+  if (importType === "raw") {
+    return `export default ${JSON.stringify(svg)}`;
+  }
+
+  if (svgo !== false && query !== "skipsvgo") {
+    svg = optimizeSvg(svg, {
+      ...svgoConfig,
+      path,
+    }).data;
+  }
+
+  // prevent compileTemplate from removing the style tag
+  svg = svg.replace(/<style/g, '<component is="style"').replace(/<\/style/g, "</component");
+
+  const { code } = compileTemplate({
+    id: JSON.stringify(id),
+    source: svg,
+    filename: path,
+    transformAssetUrls: false,
+  });
+
+  return `
+    ${code}
+    export default { render: render }
+  `;
+}

package/src/plugin.vite/services/tailwindSafelist.service.js

@@ -0,0 +1,195 @@
+import fs from "fs";
+import path from "path";
+
+import vuelessConfig from "../../../vueless.config.js";
+import { brandColors } from "../../service.tailwind";
+import { components } from "./unpluginComponentsResolver.js";
+
+const COMPONENTS_WITH_COLOR_PROP = [
+  "UButton",
+  "ULink",
+  "UDropdownButton",
+  "UDropdownBadge",
+  "UDropdownLink",
+  "UCheckbox",
+  "UCheckboxGroup",
+  "UCheckboxMultiState",
+  "USwitch",
+  "URadio",
+  "URadioCard",
+  "URadioGroup",
+  "UHeader",
+  "UText",
+  "UAlert",
+  "UMoney",
+  "UBadge",
+  "UModalConfirm",
+  "UIcon",
+  "UDot",
+];
+
+export function createTailwindSafelist() {
+  const safelist = [];
+
+  const srcVueFiles = getFiles("src", ".vue");
+  const vuelessVueFiles = getFiles(".vueless", ".vue");
+  const vuelessLayoutVueFiles = getFiles(".vueless-layouts", ".vue");
+  const vuelessJsConfigFiles = getFiles(".vueless", ".config.js");
+
+  const files = [
+    ...srcVueFiles,
+    ...vuelessVueFiles,
+    ...vuelessLayoutVueFiles,
+    ...vuelessJsConfigFiles,
+  ];
+
+  /* Generate safelist */
+  COMPONENTS_WITH_COLOR_PROP.forEach((component) => {
+    const { colors, isExistsComponent } = findColors(files, component);
+
+    if (isExistsComponent && colors.length) {
+      // eslint-disable-next-line vue/max-len, prettier/prettier
+      const defaultConfigPath = vuelessJsConfigFiles.find((file) => checkDefaultConfig(file, component));
+
+      const defaultSafelist = getDefaultConfig(defaultConfigPath)?.safelist;
+      const customSafelist =
+        vuelessConfig.component && vuelessConfig.component[component]?.safelist;
+
+      const colorString = colors.join("|");
+
+      const selectedSafelist = customSafelist
+        ? customSafelist && customSafelist(colorString)
+        : defaultSafelist && defaultSafelist(colorString);
+
+      if (selectedSafelist) {
+        safelist.push(...selectedSafelist);
+      }
+    }
+  });
+
+  process.env.SAFELIST_JSON = JSON.stringify(safelist);
+}
+
+function getFiles(dirPath, extension, fileList) {
+  const files = fs.readdirSync(dirPath);
+
+  fileList = fileList || [];
+
+  files.forEach((file) => {
+    const filePath = path.join(dirPath, file);
+    const stat = fs.statSync(filePath);
+
+    if (stat.isDirectory()) {
+      fileList = getFiles(filePath, extension, fileList);
+    } else {
+      filePath.endsWith(extension) && fileList.push(filePath);
+    }
+  });
+
+  return fileList;
+}
+
+function findColors(files, component) {
+  const colors = [];
+  const brandColor = getBrandColor();
+
+  if (brandColor && brandColor !== "grayscale") {
+    colors.push(brandColor);
+  }
+
+  if (!brandColors.includes("gray")) {
+    brandColors.push("gray");
+  }
+
+  /* Add safelist colors from config */
+  getSafelistColorsFromConfig(component).forEach((color) => addColor(color, colors));
+
+  let isExistsComponent = false;
+
+  files.forEach((file) => {
+    const fileContents = fs.existsSync(file) ? fs.readFileSync(file).toString() : "";
+
+    const isDefaultConfig = checkDefaultConfig(file, component);
+
+    /* Collect color from config objects */
+    if (isDefaultConfig) {
+      const colorRegExp = /\bcolor\s*:\s*["']([^"'\s]+)["']/g;
+      const matchedColors = fileContents.match(colorRegExp);
+
+      if (matchedColors) {
+        for (const match of matchedColors) {
+          const matchedColor = colorRegExp.exec(match);
+
+          addColor(matchedColor && matchedColor[1], colors);
+
+          colorRegExp.lastIndex = 0;
+        }
+      }
+    }
+
+    /* Collect color from U[Component] */
+    const componentRegExp = new RegExp(`<${component}[^>]+>`, "g");
+    const matchedComponent = fileContents.match(componentRegExp);
+
+    if (matchedComponent) {
+      isExistsComponent = true;
+
+      /* single value prop */
+      const colorRegExp = /\bcolor\s*=\s*["']([^"'\s]+)["']/;
+
+      for (const match of matchedComponent) {
+        const matchedColor = colorRegExp.exec(match);
+
+        addColor(matchedColor && matchedColor[1], colors);
+      }
+
+      /* ternary value prop */
+      const ternaryRegExp = /\bcolor="[^']*'([^']*)'\s*:\s*'([^']*)'/;
+
+      for (const match of matchedComponent) {
+        const matchedColors = ternaryRegExp.exec(match);
+
+        addColor(matchedColors && matchedColors[1], colors);
+        addColor(matchedColors && matchedColors[2], colors);
+      }
+    }
+  });
+
+  return { colors, isExistsComponent };
+}
+
+function addColor(color, colors) {
+  if (brandColors.includes(color) && !colors.includes(color)) {
+    colors.push(color);
+  }
+}
+
+function getSafelistColorsFromConfig(component) {
+  const globalSafelistColors = vuelessConfig.safelistColors || [];
+  const componentSafelistColors =
+    (vuelessConfig.component && vuelessConfig.component[component]?.safelistColors) || [];
+
+  return [...globalSafelistColors, ...componentSafelistColors];
+}
+
+function getBrandColor(component) {
+  return vuelessConfig.component
+    ? vuelessConfig.component[component]?.defaultVariants?.color
+    : vuelessConfig.brand || "";
+}
+
+function checkDefaultConfig(filePath, component) {
+  return filePath.includes(components[component]) && filePath.endsWith("default.config.js");
+}
+
+function getDefaultConfig(path) {
+  if (fs.existsSync(path)) {
+    const defaultConfigFile = fs.readFileSync(path).toString();
+
+    const objectStartIndex = defaultConfigFile.indexOf("{");
+    const objectString = defaultConfigFile.substring(objectStartIndex).replace("};", "}");
+
+    // indirect eval
+    return (0, eval)("(" + objectString + ")"); // Converting into JS object
+  }
+}

package/src/plugin.vite/services/unpluginComponentsResolver.js

@@ -0,0 +1,172 @@
+/**
+ Custom vueless UI library resolver for "unplugin-vue-components" plugin.
+
+ When new components are added, please add related to them data into an object below with a format:
+ - key = component name;
+ - value = component folder;
+
+ Docs:
+ https://github.com/unplugin/unplugin-vue-components?tab=readme-ov-file#importing-from-ui-libraries
+ */
+
+export const components = {
+  /* Buttons & Links */
+  UButton: "ui.button",
+  ULink: "ui.button-link",
+  UToggle: "ui.button-toggle",
+  UToggleItem: "ui.button-toggle-item",
+
+  /* Dropdowns */
+  UDropdownButton: "ui.dropdown-button",
+  UDropdownBadge: "ui.dropdown-badge",
+  UDropdownLink: "ui.dropdown-link",
+  UDropdownItem: "ui.dropdown-item",
+
+  /* Form Inputs & Controls */
+  UInput: "ui.form-input",
+  UInputFile: "ui.form-input-file",
+  UInputMoney: "ui.form-input-money",
+  UInputSearch: "ui.form-input-search",
+  UInputNumber: "ui.form-input-number",
+  UInputRating: "ui.form-input-rating",
+  UTextarea: "ui.form-textarea",
+  USelect: "ui.form-select",
+  UMultiselect: "ui.form-select-multi",
+  UCheckbox: "ui.form-checkbox",
+  UCheckboxGroup: "ui.form-checkbox-group",
+  UCheckboxMultiState: "ui.form-checkbox-multi-state",
+  USwitch: "ui.form-switch",
+  URadio: "ui.form-radio",
+  URadioCard: "ui.form-radio-card",
+  URadioGroup: "ui.form-radio-group",
+  UCalendar: "ui.form-calendar",
+  UDatePicker: "ui.form-date-picker",
+  UDatePickerRange: "ui.form-date-picker-range",
+  ULabel: "ui.form-label",
+
+  /* Text & Content */
+  UHeader: "ui.text-header",
+  UText: "ui.text-block",
+  UAlert: "ui.text-alert",
+  UMoney: "ui.text-money",
+  UFile: "ui.text-file",
+  UFiles: "ui.text-files",
+  UEmpty: "ui.text-empty",
+  UBadge: "ui.text-badge",
+
+  /* Containers */
+  UDivider: "ui.container-divider",
+  URow: "ui.container-row",
+  UGroup: "ui.container-group",
+  UGroups: "ui.container-groups",
+  UAccordion: "ui.container-accordion",
+  UCard: "ui.container-card",
+  UModal: "ui.container-modal",
+  UModalConfirm: "ui.container-modal-confirm",
+  UPage: "ui.container-page",
+
+  /* Images and Icons */
+  UIcon: "ui.image-icon",
+  ULogo: "ui.image-logo",
+  UAvatar: "ui.image-avatar",
+
+  /* Data */
+  UTable: "ui.data-table",
+  UTableCell: "ui.data-table-cell",
+  UDataList: "ui.data-list",
+
+  /* Navigation */
+  UTab: "ui.navigation-tab",
+  UTabs: "ui.navigation-tabs",
+  UStepper: "ui.navigation-stepper",
+  UPagination: "ui.navigation-pagination",
+
+  /* Other */
+  UDot: "ui.other-dot",
+  ULoader: "ui.other-loader",
+};
+
+export default function (componentName) {
+  const components = {
+    /* Buttons & Links */
+    UButton: "ui.button",
+    ULink: "ui.button-link",
+    UToggle: "ui.button-toggle",
+    UToggleItem: "ui.button-toggle-item",
+
+    /* Dropdowns */
+    UDropdownButton: "ui.dropdown-button",
+    UDropdownBadge: "ui.dropdown-badge",
+    UDropdownLink: "ui.dropdown-link",
+    UDropdownItem: "ui.dropdown-item",
+    UDropdownList: "ui.dropdown-list",
+
+    /* Form Inputs & Controls */
+    UInput: "ui.form-input",
+    UInputFile: "ui.form-input-file",
+    UInputMoney: "ui.form-input-money",
+    UInputSearch: "ui.form-input-search",
+    UInputNumber: "ui.form-input-number",
+    UInputRating: "ui.form-input-rating",
+    UTextarea: "ui.form-textarea",
+    USelect: "ui.form-select",
+    UCheckbox: "ui.form-checkbox",
+    UCheckboxGroup: "ui.form-checkbox-group",
+    UCheckboxMultiState: "ui.form-checkbox-multi-state",
+    USwitch: "ui.form-switch",
+    URadio: "ui.form-radio",
+    URadioCard: "ui.form-radio-card",
+    URadioGroup: "ui.form-radio-group",
+    UCalendar: "ui.form-calendar",
+    UDatePicker: "ui.form-date-picker",
+    UDatePickerRange: "ui.form-date-picker-range",
+    ULabel: "ui.form-label",
+
+    /* Text & Content */
+    UHeader: "ui.text-header",
+    UText: "ui.text-block",
+    UAlert: "ui.text-alert",
+    UMoney: "ui.text-money",
+    UFile: "ui.text-file",
+    UFiles: "ui.text-files",
+    UEmpty: "ui.text-empty",
+    UBadge: "ui.text-badge",
+
+    /* Containers */
+    UDivider: "ui.container-divider",
+    URow: "ui.container-row",
+    UGroup: "ui.container-group",
+    UGroups: "ui.container-groups",
+    UAccordion: "ui.container-accordion",
+    UCard: "ui.container-card",
+    UModal: "ui.container-modal",
+    UModalConfirm: "ui.container-modal-confirm",
+    UPage: "ui.container-page",
+
+    /* Images and Icons */
+    UIcon: "ui.image-icon",
+    ULogo: "ui.image-logo",
+    UAvatar: "ui.image-avatar",
+
+    /* Data */
+    UTable: "ui.data-table",
+    UTableCell: "ui.data-table-cell",
+    UDataList: "ui.data-list",
+
+    /* Navigation */
+    UTab: "ui.navigation-tab",
+    UTabs: "ui.navigation-tabs",
+    UStepper: "ui.navigation-stepper",
+    UPagination: "ui.navigation-pagination",
+
+    /* Other */
+    UDot: "ui.other-dot",
+    ULoader: "ui.other-loader",
+  };
+
+  const componentFolder = components[componentName];
+
+  if (componentFolder) {
+    return { from: `/.vueless/${componentFolder}` };
+  }
+}

package/src/service.storybook/index.js

@@ -0,0 +1,91 @@
+import { contributions } from "/web-types.json";
+
+const getComponentData = (componentName) => {
+  return contributions.html.tags.find((item) => item.name === componentName);
+};
+
+export function getSlotNames(componentName) {
+  return getComponentData(componentName)?.slots?.map((item) => item.name);
+}
+
+export function getArgTypes(componentName) {
+  const component = getComponentData(componentName);
+
+  if (!component) return;
+
+  const types = {};
+
+  getSlotNames(componentName)?.forEach((slotName) => {
+    types[slotName] = { control: "text" };
+  });
+
+  component.attributes?.forEach((attribute) => {
+    const type = attribute.value.type;
+
+    if (type === "string") {
+      types[attribute.name] = {
+        control: "text",
+        table: {
+          defaultValue: { summary: attribute.default || "" },
+        },
+      };
+    }
+
+    if (type === "number") {
+      types[attribute.name] = {
+        control: "number",
+        table: {
+          defaultValue: { summary: attribute.default || "" },
+        },
+      };
+    }
+
+    if (type === "boolean") {
+      types[attribute.name] = {
+        control: "boolean",
+        table: {
+          defaultValue: { summary: attribute.default || "" },
+        },
+      };
+    }
+
+    if (type.includes("|")) {
+      const options = attribute.value.type.replace(/['|]/g, "").split(/\s+/);
+
+      if (options.length > 1) {
+        types[attribute.name] = {
+          options,
+          control: "select",
+          table: {
+            defaultValue: { summary: attribute.default || "" },
+          },
+        };
+      }
+    }
+
+    if (attribute.description?.includes("@ignore")) {
+      types[attribute.name] = {
+        table: {
+          disable: true,
+        },
+      };
+    }
+  });
+
+  if (import.meta.env.STORYBOOK_FULL) {
+    component.events?.forEach((event) => {
+      const eventName = "on" + event.name.charAt(0).toUpperCase() + event.name.slice(1);
+
+      types[eventName] = {
+        action: event.name,
+        table: { category: "Storybook Events" },
+      };
+    });
+  }
+
+  return types;
+}
+
+export function getSource(defaultCnfig) {
+  return defaultCnfig.replace("export default /*tw*/ ", "").replace(";", "");
+}

package/src/ui.button/Docs.mdx

@@ -0,0 +1,16 @@
+import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Source } from "@storybook/blocks";
+import { getSource } from "../service.storybook";
+
+import * as stories from "./index.stories";
+import defaultConfig from "./configs/default.config?raw"
+
+<Meta of={stories} />
+<Title of={stories} />
+<Subtitle of={stories} />
+<Description of={stories} />
+<Primary of={stories}  />
+<Controls of={stories.Default} />
+<Stories of={stories} />
+
+## **Default config**
+<Source code={getSource(defaultConfig)} language="jsx" dark />

package/src/ui.button/composables/attrs.composable.js

@@ -0,0 +1,41 @@
+import { computed } from "vue";
+import useUI from "../../composable.ui";
+import { cva } from "../../service.ui";
+
+import defaultConfig from "../configs/default.config";
+
+export function useAttrs(props) {
+  const { config, getAttrs, setColor } = useUI(defaultConfig, () => props.config);
+  const { button } = config.value;
+
+  const cvaButton = cva({
+    base: button.base,
+    variants: button.variants,
+    compoundVariants: button.compoundVariants,
+  });
+
+  const buttonClasses = computed(() =>
+    setColor(
+      cvaButton({
+        size: props.size,
+        color: props.color,
+        variant: props.variant,
+        pill: props.pill,
+        block: props.block,
+        square: props.square,
+        filled: props.filled,
+        loading: props.loading,
+        disabled: props.disabled,
+      }),
+      props.color,
+    ),
+  );
+
+  const buttonAttrs = getAttrs("button", { classes: buttonClasses });
+  const textAttrs = getAttrs("text");
+
+  return {
+    textAttrs,
+    buttonAttrs,
+  };
+}