vueless 0.0.10 → 0.0.12

package/service.ui/index.js

@@ -0,0 +1,193 @@
+import { merge } from "lodash-es";
+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.js";
+
+/*
+  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: classVarianceAuthority,
+  cx,
+  compose,
+} = defineConfig({
+  hooks: { onComplete: (className) => twMerge(className) },
+});
+
+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 { layout, strategy, gray, brand, component: globalComponentConfig } = vuelessConfig;
+
+export default class UIServiceDefault {
+  isMac = false;
+  isPWA = false;
+  isIOS = false;
+  isAndroid = false;
+  isMobileApp = false;
+  PX_IN_REM = 16;
+  HYPHEN_SYMBOL = "-";
+
+  constructor() {
+    this.isMac = this.checkIsMac();
+
+    this.isPWA = this.checkIsPWA();
+    this.isIOS = this.checkIsIOS();
+    this.isAndroid = this.checkIsAndroid();
+
+    this.isMobileApp = this.isPWA || this.isIOS || this.isAndroid;
+  }
+
+  checkIsPWA() {
+    return !!navigator.standalone;
+  }
+
+  checkIsMac() {
+    return this.getPlatform().toUpperCase().indexOf("MAC") >= 0;
+  }
+
+  checkIsIOS() {
+    const iOSDevices = [
+      "iPad Simulator",
+      "iPhone Simulator",
+      "iPod Simulator",
+      "iPad",
+      "iPhone",
+      "iPod",
+    ];
+    const platform = this.getPlatform();
+    const isIpodIOS13 = platform.includes("Mac") && "ontouchend" in document;
+
+    return iOSDevices.includes(platform) || isIpodIOS13;
+  }
+
+  checkIsAndroid() {
+    return this.getPlatform().toUpperCase().indexOf("ANDROID") >= 0;
+  }
+
+  getPlatform() {
+    return navigator.userAgentData?.platform || navigator.platform || "unknown";
+  }
+
+  static convertHexInRgb(hex) {
+    const color = hex.replace(/#/g, "");
+
+    let r, g, b;
+
+    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}` : "";
+  }
+
+  setBrandColor(brandColor) {
+    function getBrandColor(color, grayColor, brandColors) {
+      if (color === "grayscale") {
+        return grayColor;
+      }
+
+      return brandColors.includes(color) ? colors[color][500] : color;
+    }
+
+    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) {
+    const characters = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";
+    const charactersLength = characters.length;
+    let id = "";
+
+    while (id.length < idLength) {
+      id += characters.charAt(Math.floor(Math.random() * charactersLength));
+    }
+
+    return id;
+  }
+
+  static setTitle({ title, separator = " / ", suffix = "" }) {
+    document.title = title ? title + separator + suffix : suffix;
+  }
+
+  static setFavicon(faviconPath) {
+    if (!faviconPath) return;
+
+    const head = document.querySelector("head");
+    const faviconTag = document.createElement("link");
+
+    faviconTag.setAttribute("rel", "shortcut icon");
+    faviconTag.setAttribute("href", `${faviconPath}?${Math.random()}`);
+    head.appendChild(faviconTag);
+  }
+
+  /**
+    Get default component props value related on default and global config.
+    @param { Object } defaultConfig
+    @param { String } name
+    @returns { Object }
+  */
+  static get(defaultConfig, name) {
+    const globalVuelessColor = brand ? { color: brand } : {};
+
+    return {
+      default: merge(
+        defaultConfig.defaultVariants,
+        globalVuelessColor,
+        globalComponentConfig[name]?.defaultVariants,
+      ),
+    };
+  }
+}
+
+export const {
+  getRandomId,
+  setBrandColor,
+  convertHexInRgb,
+  setTitle,
+  setFavicon,
+  isMac,
+  isPWA,
+  isIOS,
+  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 "../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 "../../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,
+  };
+}

package/ui.button/configs/default.config.js

@@ -0,0 +1,165 @@
+export default /*tw*/ {
+  button: {
+    base: `
+      flex items-center justify-center
+      text-base font-medium rounded-lg outline-none
+      transition duration-100 ease-in-out
+      focus:ring-4 focus:ring-opacity-10 focus:outline-none
+    `,
+    variants: {
+      size: {
+        xs: "px-2 py-1.5 text-xs leading-tight",
+        sm: "px-3 py-2.5 text-sm leading-tight",
+        md: "px-4 py-3.5 text-base leading-tight",
+        lg: "px-5 py-[1.125rem] text-lg leading-tight",
+      },
+      variant: {
+        primary: `
+          border border-solid border-{color}-500 bg-{color}-500 text-white
+          focus:border-opacity-0 focus:bg-opacity-80 focus:border-{color}-500 focus:bg-{color}-500
+          focus:ring-{color}-500
+          hover:border-{color}-500 hover:bg-{color}-500
+          hover:border-opacity-0 hover:bg-opacity-80
+          active:border-{color}-500 active:bg-{color}-500
+          active:border-opacity-0 active:bg-opacity-70`,
+        secondary: `
+          border border-solid bg-transparent
+          border-{color}-500 text-{color}-500
+          focus:text-{color}-500 focus:border-{color}-500 focus:ring-{color}-500
+          focus:text-opacity-80 focus:border-opacity-80
+          hover:border-{color}-500 hover:text-{color}-500
+          hover:text-opacity-80 hover:border-opacity-80
+          active:border-{color}-500 active:text-{color}-500
+          active:border-opacity-70 active:text-opacity-70`,
+        thirdary: `
+          border border-transparent bg-transparent text-{color}-500
+          focus:text-{color}-500 focus:bg-{color}-500 focus:ring-{color}-500
+          focus:text-opacity-70 focus:bg-opacity-5
+          hover:text-{color}-500 hover:bg-{color}-500
+          hover:text-opacity-70 hover:bg-opacity-10
+          active:text-{color}-500 active:bg-{color}-500
+          active:text-opacity-60 active:bg-opacity-15`,
+      },
+      loading: {
+        true: "pointer-events-none",
+      },
+      pill: {
+        true: "rounded-full",
+      },
+      block: {
+        true: "w-full",
+      },
+    },
+    compoundVariants: [
+      {
+        disabled: true,
+        variant: "primary",
+        class: `
+          border-opacity-0 bg-opacity-40 cursor-no-drop text-white
+          hover:bg-opacity-40
+          focus:bg-opacity-40 focus:ring-0
+          active:bg-opacity-40 active:ring-0
+        `,
+      },
+      {
+        disabled: true,
+        variant: "secondary",
+        class: `
+          text-opacity-40 border-opacity-40 cursor-no-drop
+          hover:text-opacity-40 hover:border-opacity-40
+          focus:text-opacity-40 focus:border-opacity-40 focus:ring-0
+          active:text-opacity-40 active:border-opacity-40 active:ring-0
+        `,
+      },
+      {
+        disabled: true,
+        variant: "thirdary",
+        class: `
+          bg-opacity-5 text-opacity-40 ring-opacity-0 cursor-no-drop
+          hover:bg-opacity-5 hover:text-opacity-40
+          focus:ring-0 focus:bg-opacity-5 focus:text-opacity-40
+          active:bg-opacity-5 active:ring-0 active:text-opacity-40
+        `,
+      },
+      {
+        color: "grayscale",
+        variant: "primary",
+        class: `
+          border-gray-900 bg-gray-900
+          hover:border-gray-900 hover:bg-gray-900
+          focus:border-gray-900  focus:ring-gray-900/20
+          active:border-gray-900 active:bg-gray-900`,
+      },
+      {
+        color: "grayscale",
+        variant: "secondary",
+        class: `
+          text-gray-900 border-gray-900
+          hover:border-gray-900 hover:text-gray-900
+          focus:border-gray-900 focus:text-gray-900 focus:ring-gray-900/20
+          active:border-gray-900 active:text-gray-900`,
+      },
+      {
+        color: "grayscale",
+        variant: "thirdary",
+        class: `
+          text-gray-900
+          focus:text-gray-800 focus:bg-gray-800 focus:ring-gray-800
+          hover:text-gray-800 hover:bg-gray-800
+          active:text-gray-800 active:bg-gray-800`,
+      },
+      {
+        color: "white",
+        variant: "primary",
+        class: `
+          border-white bg-white text-gray-500
+          focus:ring-white focus:border-white focus:bg-white
+          hover:border-white hover:bg-white
+          active:border-white active:bg-white`,
+      },
+      {
+        color: "white",
+        variant: "secondary",
+        class: `
+          border-white bg-transparent text-white
+          focus:border-white focus:ring-white
+          hover:border-white
+          active:border-white`,
+      },
+      {
+        color: "white",
+        variant: "thirdary",
+        class: `
+          border-transparent bg-transparent text-white
+          focus:bg-white focus:ring-white
+          hover:bg-white
+          active:bg-white`,
+      },
+      { filled: true, variant: "thirdary", class: "bg-{color}-500 bg-opacity-5" },
+      { filled: true, variant: "thirdary", color: "white", class: "bg-white" },
+      { filled: true, variant: "thirdary", color: "grayscale", class: "bg-gray-900" },
+      { square: true, size: "xs", class: "p-1" },
+      { square: true, size: "sm", class: "p-2" },
+      { square: true, size: "md", class: "p-3" },
+      { square: true, size: "lg", class: "py-4" },
+    ],
+  },
+  text: "whitespace-nowrap px-1.5",
+  defaultVariants: {
+    color: "brand",
+    variant: "primary",
+    size: "md",
+    pill: false,
+    block: false,
+    square: false,
+    filled: false,
+    loading: false,
+    disabled: false,
+  },
+  safelist: (colors) => [
+    { pattern: `border-(${colors})-500` /* , variants: ["hover", "focus", "active"] */ },
+    { pattern: `text-(${colors})-500` /* , variants: ["hover", "focus", "active"] */ },
+    { pattern: `ring-(${colors})-500`, variants: ["focus"] },
+    { pattern: `bg-(${colors})-500` /* , variants: ["hover", "focus", "active"] */ },
+  ],
+};

package/ui.button/constants/index.js

@@ -0,0 +1,5 @@
+/*
+  This const is needed to prevent the issue in script setup:
+ `defineProps` is referencing locally declared variables. (vue/valid-define-props)
+ */
+export const UButton = "UButton";

package/ui.button/index.stories.js

@@ -0,0 +1,166 @@
+import { getArgTypes, getSlotNames } from "../service.storybook";
+
+import UButton from "../ui.button";
+import UIcon from "../ui.image-icon";
+import URow from "../ui.container-row";
+import UGroup from "../ui.container-group";
+
+export default {
+  id: "1010",
+  title: "Buttons & Links / Button",
+  component: UButton,
+  args: {
+    label: "Button",
+  },
+  argTypes: {
+    ...getArgTypes(UButton.name),
+  },
+};
+
+const DefaultTemplate = (args) => ({
+  components: { UButton },
+  setup() {
+    const slots = getSlotNames(UButton.name);
+
+    return { args, slots };
+  },
+  template: `
+    <UButton v-bind="args">
+      <template v-for="(slot, index) of slots" :key="index" v-slot:[slot]>
+        <template v-if="args[slot]">{{ args[slot] }}</template>
+      </template>
+    </UButton>
+  `,
+});
+
+const SlotTemplate = (args) => ({
+  components: { UButton, UIcon },
+  setup() {
+    return { args };
+  },
+  template: `
+    <UButton v-bind="args">
+      ${args.slotTemplate}
+    </UButton>
+  `,
+});
+
+const VariantsTemplate = (args, { argTypes } = {}) => ({
+  components: { UButton, URow },
+  setup() {
+    return {
+      args,
+      variants: argTypes.variant.options,
+    };
+  },
+  template: `
+    <URow>
+      <UButton
+        v-for="(variant, index) in variants"
+        v-bind="args"
+        :variant="variant"
+        :label="variant"
+        :key="index"
+      />
+    </URow>
+  `,
+});
+
+const SizesTemplate = (args, { argTypes } = {}) => ({
+  components: { UButton, URow },
+  setup() {
+    return {
+      args,
+      sizes: argTypes.size.options,
+    };
+  },
+  template: `
+    <URow>
+      <UButton
+        v-for="(size, index) in sizes"
+        v-bind="args"
+        :size="size"
+        :label="size"
+        :key="index"
+      />
+    </URow>
+  `,
+});
+
+const ColorTemplate = (args, { argTypes } = {}) => ({
+  components: { UButton, URow, UGroup },
+  setup() {
+    return {
+      args,
+      variants: argTypes.variant.options,
+      colors: argTypes.color.options,
+    };
+  },
+  template: `
+    <UGroup>
+      <URow v-for="(variant, index) in variants" :key="index">
+        <UButton
+          v-for="(color, index) in colors"
+          v-bind="args"
+          :variant="variant"
+          :color="color"
+          :label="color"
+          :key="index"
+        />
+      </URow>
+    </UGroup>
+  `,
+});
+
+export const Default = DefaultTemplate.bind({});
+Default.args = {};
+
+export const variants = VariantsTemplate.bind({});
+variants.args = {};
+
+export const sizes = SizesTemplate.bind({});
+sizes.args = {};
+
+export const pilled = VariantsTemplate.bind({});
+pilled.args = { pill: true };
+
+export const disabled = VariantsTemplate.bind({});
+disabled.args = { disabled: true };
+
+export const colors = ColorTemplate.bind({});
+colors.args = {};
+
+export const slotDefault = SlotTemplate.bind({});
+slotDefault.args = {
+  slotTemplate: `
+    <template #default>
+      🤘🤘🤘
+    </template>
+  `,
+};
+
+export const slotLeft = SlotTemplate.bind({});
+slotLeft.args = {
+  slotTemplate: `
+    <template #left>
+      <UIcon
+        name="star"
+        color="gray"
+        size="md"
+       />
+    </template>
+  `,
+};
+
+export const slotRight = SlotTemplate.bind({});
+slotRight.args = {
+  slotTemplate: `
+    <template #right>
+      <UIcon
+        name="star"
+        color="gray"
+        size="md"
+       />
+    </template>
+  `,
+};