vueless 0.0.2 → 0.0.3

package/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/service.storybook/index.js

@@ -1,19 +1,14 @@
-import { renderToStaticMarkup } from "react-dom/server";
-import { decode } from "html-entities";
-import prettier2 from "prettier2";
-import HTMLParser from "prettier2/parser-html";
+import { contributions } from "/web-types.json";
 
 const getComponentData = (componentName) => {
-  return require("/web-types.json").default.contributions.html.tags.find(
-    (item) => item.name === componentName,
-  );
+  return contributions.html.tags.find((item) => item.name === componentName);
 };
 
-export const getSlotNames = (componentName) => {
+export function getSlotNames(componentName) {
   return getComponentData(componentName)?.slots?.map((item) => item.name);
-};
+}
 
-export const getArgTypes = (componentName) => {
+export function getArgTypes(componentName) {
   const component = getComponentData(componentName);
 
   if (!component) return;
@@ -25,20 +20,59 @@ export const getArgTypes = (componentName) => {
   });
 
   component.attributes?.forEach((attribute) => {
-    const options = attribute.value.type.replace(/['|]/g, "").split(/\s+/);
+    const type = attribute.value.type;
 
-    if (options.length > 1) {
+    if (type === "string") {
       types[attribute.name] = {
-        options,
-        control: "select",
+        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.VITE_STORYBOOK_FULL) {
+  if (import.meta.env.STORYBOOK_FULL) {
     component.events?.forEach((event) => {
       const eventName = "on" + event.name.charAt(0).toUpperCase() + event.name.slice(1);
 
@@ -50,69 +84,8 @@ export const getArgTypes = (componentName) => {
   }
 
   return types;
-};
-
-export const renderToHTML = (templateSource, { args, argTypes }) => {
-  const componentArgs = {};
-
-  for (const [key, val] of Object.entries(argTypes)) {
-    const value = args[key];
-
-    if (
-      typeof val !== "undefined" &&
-      val.table &&
-      val.table.category === "props" &&
-      value !== val.defaultValue
-    ) {
-      componentArgs[key] = val;
-    }
-  }
-
-  const slotTemplateCode =
-    // eslint-disable-next-line vue/max-len
-    '<template v-for="(slot, index) of slots" :key="index" v-slot:[slot]><template v-if="args[slot]">{{args[slot]}}</template></template>';
-  const templateWrapperRegEx = /<template>([\s\S]*)<\/template>/i;
-  const vBindRegEx = /v-bind="\{([\s\S]*?)}"/g;
-
-  const propsString = Object.keys(componentArgs)
-    .map((key) => " " + propToSource(kebabCase(key), args[key]))
-    .join("");
+}
 
-  const source = templateSource
-    .replace(slotTemplateCode, "")
-    .replace(templateWrapperRegEx, "$1")
-    .replace(vBindRegEx, propsString);
-
-  const markup = renderToStaticMarkup(source);
-
-  return prettier2.format(decode(markup), {
-    parser: "html",
-    plugins: [HTMLParser],
-    htmlWhitespaceSensitivity: "ignore",
-    tabWidth: 2,
-  });
-
-  function propToSource(key, val) {
-    const type = typeof val;
-
-    switch (type) {
-      case "boolean":
-        return val ? key : "";
-      case "string":
-        return `${key}="${val}"`;
-      default:
-        return `:${key}="${val}"`;
-    }
-  }
-
-  function kebabCase(str) {
-    return str
-      .split("")
-      .map((letter, idx) => {
-        return letter.toUpperCase() === letter
-          ? `${idx !== 0 ? "-" : ""}${letter.toLowerCase()}`
-          : letter;
-      })
-      .join("");
-  }
-};
+export function getSource(defaultCnfig) {
+  return defaultCnfig.replace("export default /*tw*/ ", "").replace(";", "");
+}

package/service.tailwind/index.js

@@ -0,0 +1,112 @@
+import colors from "tailwindcss/colors";
+import forms from "@tailwindcss/forms";
+import vuelessConfig from "../../vueless.config";
+
+export const grayColors = ["slate", "gray", "zinc", "neutral", "stone"];
+export const brandColors = [
+  "brand",
+  "red",
+  "orange",
+  "amber",
+  "yellow",
+  "lime",
+  "green",
+  "emerald",
+  "teal",
+  "cyan",
+  "sky",
+  "blue",
+  "indigo",
+  "violet",
+  "purple",
+  "fuchsia",
+  "pink",
+  "rose",
+];
+
+export default class TailwindServiceDefault {
+  constructor() {
+    this.vuelessPreset = this.get();
+  }
+
+  /**
+   * Transform CSS variable with RGB numbers into CSS color.
+   * @returns {Function}
+   */
+  static twColorWithOpacity(variableName) {
+    return ({ opacityValue }) => {
+      return opacityValue !== undefined
+        ? `rgba(var(${variableName}), ${opacityValue})`
+        : `rgb(var(${variableName}))`;
+    };
+  }
+
+  /**
+   * Convert sting patterns to RegExp.
+   * @returns {Array} - TailwindCSS safelist.
+   */
+  static getSafelist() {
+    return JSON.parse(process.env.SAFELIST_JSON || "[]").map((rule) => ({
+      ...rule,
+      pattern: new RegExp(rule.pattern),
+    }));
+  }
+
+  /**
+   * Generates preset for TailwindCSS base on Vueless config.
+   * @returns {Object}
+   */
+  get() {
+    const isProd = process.env.NODE_ENV === "production";
+    const brandColor = TailwindServiceDefault.twColorWithOpacity("--color-brand");
+    const { brand, gray } = vuelessConfig;
+
+    let brandPalette = brandColors.includes(brand) ? colors[brand] : colors.green;
+    let grayPalette = grayColors.includes(gray) ? colors[gray] : colors.zinc;
+
+    if (brand === "grayscale") {
+      brandPalette = grayPalette;
+    }
+
+    const prodSafelist = TailwindServiceDefault.getSafelist();
+    const devSafelist = [
+      {
+        pattern: /(border|bg|text|ring)-(.*)-((50|[1-9]00|950)?)$/,
+        variants: ["hover", "focus", "focus-within", "active"],
+      },
+    ];
+
+    return {
+      content: [
+        "./index.html",
+        "./src/**/*.{js,ts,jsx,tsx,vue}",
+        "./vueless.config.{js,ts}",
+        "./.vueless/**/*.{js,ts,vue}",
+        "./.vueless-layouts/**/*.{js,ts,vue}",
+        "./.vueless-services/**/*.{js,ts,vue}",
+      ],
+      safelist: isProd ? prodSafelist : devSafelist,
+      theme: {
+        extend: {
+          colors: {
+            brand: { ...brandPalette, DEFAULT: brandColor },
+            gray: grayPalette,
+          },
+          spacing: {
+            "safe-top": "env(safe-area-inset-top)",
+            "safe-bottom": "env(safe-area-inset-bottom)",
+            "safe-left": "env(safe-area-inset-left)",
+            "safe-right": "env(safe-area-inset-right)",
+            "mobile-menu-height": "3.5rem",
+          },
+          fontSize: {
+            "2xs": ["0.625rem", "0.875rem"], //  10px
+          },
+        },
+      },
+      plugins: [forms],
+    };
+  }
+}
+
+export const { vuelessPreset } = new TailwindServiceDefault();

package/service.ui/index.js

@@ -1,35 +1,36 @@
 import merge from "lodash.merge";
 import { defineConfig } from "cva";
 import { twMerge } from "tailwind-merge";
+import colors from "tailwindcss/colors";
+import { brandColors, grayColors } from "../service.tailwind";
+import vuelessConfig from "/vueless.config";
 
 /*
   Export cva (class variance authority) methods extended with tailwind-merge.
   It helps to make class variation switchers and removes class duplications.
   https://beta.cva.style
 */
-export const { cva, cx, compose } = defineConfig({
+export const {
+  cva: classVarianceAuthority,
+  cx,
+  compose,
+} = defineConfig({
   hooks: { onComplete: (className) => twMerge(className) },
 });
 
-/*
-  Export TailwindCSS config.
-  https://tailwindcss.com
-*/
-export const { default: tailwindConfig } = require("/tailwind.config");
+export const cva = ({ base = "", variants = {}, compoundVariants = [], defaultVariants = {} }) =>
+  classVarianceAuthority({
+    base,
+    variants,
+    compoundVariants,
+    defaultVariants,
+  });
 
 /*
   Export global config settings for the current library.
   Did as a separate variables for more comfortable usage.
 */
-export const {
-  default: {
-    fallbackLocale,
-    backgroundsPath,
-    layout,
-    strategyOverwrite,
-    component: globalComponentConfig,
-  },
-} = require("/Users/ivan.hridniev/PhpstormProjects/vuelessjs/vueless/vueless.config");
+export const { layout, strategy, gray, brand, component: globalComponentConfig } = vuelessConfig;
 
 export default class UIServiceDefault {
   isMac = false;
@@ -38,6 +39,7 @@ export default class UIServiceDefault {
   isAndroid = false;
   isMobileApp = false;
   PX_IN_REM = 16;
+  HYPHEN_SYMBOL = "-";
 
   constructor() {
     this.isMac = this.checkIsMac();
@@ -80,20 +82,53 @@ export default class UIServiceDefault {
     return navigator.userAgentData?.platform || navigator.platform || "unknown";
   }
 
-  getBasePath() {
-    const basePath = import.meta.env.VITE_BASE_PATH;
+  static convertHexInRgb(hex) {
+    const color = hex.replace(/#/g, "");
+
+    let r, g, b;
 
-    return !basePath || basePath === "/" ? "/" : `/${basePath}`;
+    if (color.length === 6) {
+      r = parseInt(color.substring(0, 2), 16);
+      g = parseInt(color.substring(2, 4), 16);
+      b = parseInt(color.substring(4, 6), 16);
+    }
+
+    if (color.length === 3) {
+      r = parseInt(color.substring(0, 1).repeat(2), 16);
+      g = parseInt(color.substring(1, 2).repeat(2), 16);
+      b = parseInt(color.substring(2, 3).repeat(2), 16);
+    }
+
+    return color.length === 6 || color.length === 3 ? `${r}, ${g}, ${b}` : "";
   }
 
-  convertHexInRgb(hex) {
-    const color = hex.replace(/#/g, "");
+  setBrandColor(brandColor) {
+    function getBrandColor(color, grayColor, brandColors) {
+      if (color === "grayscale") {
+        return grayColor;
+      }
 
-    const r = parseInt(color.substring(0, 2), 16);
-    const g = parseInt(color.substring(2, 4), 16);
-    const b = parseInt(color.substring(4, 6), 16);
+      return brandColors.includes(color) ? colors[color][500] : color;
+    }
 
-    return `${r}, ${g}, ${b}`;
+    function getGrayColor(color, grayColors) {
+      return grayColors.includes(color) ? colors[color][900] : colors.zinc[900];
+    }
+
+    const grayColor = getGrayColor(gray, grayColors);
+    const localBrandColor = getBrandColor(brandColor, grayColor, brandColors);
+    const globalBrandColor = getBrandColor(brand, grayColor, brandColors);
+
+    const style = document.createElement("style");
+    const rgb = UIServiceDefault.convertHexInRgb(localBrandColor || globalBrandColor || grayColor);
+
+    style.innerHTML = `
+      :root {
+        --color-brand: ${rgb};
+      }
+    `;
+
+    document.head.appendChild(style);
   }
 
   getRandomId(idLength = 15) {
@@ -108,28 +143,6 @@ export default class UIServiceDefault {
     return id;
   }
 
-  removeOutlineFocus() {
-    const styleTag = document.createElement("style");
-    let focusRing = true;
-
-    document.head.appendChild(styleTag).innerHTML = `
-      "body.hide-focus-ring *:focus {
-        outline: none !important;
-      }`;
-
-    document.addEventListener("mousedown", () => {
-      if (focusRing) document.body.classList.add("hide-focus-ring");
-
-      focusRing = false;
-    });
-
-    document.addEventListener("keydown", () => {
-      if (!focusRing) document.body.classList.remove("hide-focus-ring");
-
-      focusRing = true;
-    });
-  }
-
   static setTitle({ title, separator = " / ", suffix = "" }) {
     document.title = title ? title + separator + suffix : suffix;
   }
@@ -149,19 +162,24 @@ export default class UIServiceDefault {
     Get default component props value related on default and global config.
     @param { Object } defaultConfig
     @param { String } name
-    @returns string
+    @returns { Object }
   */
   static get(defaultConfig, name) {
+    const globalVuelessColor = brand ? { color: brand } : {};
+
     return {
-      default: merge(defaultConfig.defaultVariants, globalComponentConfig[name]?.defaultVariants),
+      default: merge(
+        defaultConfig.defaultVariants,
+        globalVuelessColor,
+        globalComponentConfig[name]?.defaultVariants,
+      ),
     };
   }
 }
 
 export const {
-  getBasePath,
   getRandomId,
-  removeOutlineFocus,
+  setBrandColor,
   convertHexInRgb,
   setTitle,
   setFavicon,
@@ -171,4 +189,5 @@ export const {
   isAndroid,
   isMobileApp,
   PX_IN_REM,
+  HYPHEN_SYMBOL,
 } = new UIServiceDefault();

package/ui.button/Docs.mdx

@@ -0,0 +1,16 @@
+import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Source } from "@storybook/blocks";
+import { getSource } from "vueless/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/ui.button/composables/attrs.composable.js

@@ -0,0 +1,41 @@
+import { computed } from "vue";
+import useUI from "vueless/composable.ui";
+import { cva } from "vueless/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,
+  };
+}