vueless 0.0.2 → 0.0.3

package/ui.image-icon/cli.mjs

@@ -1,159 +0,0 @@
-/* eslint-disable no-console */
-
-import fs from "fs";
-import path from "path";
-import { createRequire } from "node:module";
-
-/*
-  This scrypt find icon names from the UIcon prop across the project
-  and copy SVG icons from the default UIcon icons library (@material-symbols)
-  to the "assets/images/.generated" folder.
-
-  Those icons will be used only in the build stage.
-  The script is needed to avoid all @material-symbols icons in the project assets.
- */
-
-const args = parseArgs();
-
-// generate icons for a "mono" library by default
-args["mono"] = args["mono"] || true;
-
-const DESTINATION_DIR = "./src/assets/images/.generated";
-const PACKAGE_PATH = "@material-symbols/svg-400/rounded";
-
-if (fs.existsSync(DESTINATION_DIR)) {
-  fs.rmSync(DESTINATION_DIR, { recursive: true, force: true });
-}
-
-if (args.mono) {
-  const monoFiles = getFiles(".mono", ".vue");
-
-  findAndCopyIcons(monoFiles);
-}
-
-if (args.src) {
-  const srcVueFiles = getFiles("src", ".vue");
-  const srcJsFiles = getFiles("src", ".js");
-
-  findAndCopyIcons([...srcVueFiles, ...srcJsFiles]);
-}
-
-if (args.storybook) {
-  const monoFiles = getFiles(".mono", ".stories.js");
-
-  findAndCopyIcons(monoFiles);
-}
-
-function findAndCopyIcons(files) {
-  files.forEach(async (file) => {
-    const fileContents = fs.readFileSync(file).toString();
-
-    const regexObject = /iconName:\s*"([^"]+)"/gs;
-    const matchObjectIterator = fileContents.matchAll(regexObject);
-
-    for (const match of matchObjectIterator) {
-      try {
-        copyFile(match[1]);
-      } catch (error) {
-        // console.log(error);
-      }
-    }
-
-    const regexExternalProps = /icon-name="([^"]+)"/gs;
-    const matchExternalPropsIterator = fileContents.matchAll(regexExternalProps);
-
-    for (const match of matchExternalPropsIterator) {
-      try {
-        copyFile(match[1]);
-      } catch (error) {
-        // console.log(error);
-      }
-    }
-
-    const regexProps = /<UIcon[^>]+name="([^"]+)"/gs;
-    const matchPropsIterator = fileContents.matchAll(regexProps);
-
-    for (const match of matchPropsIterator) {
-      try {
-        copyFile(match[1]);
-      } catch (error) {
-        // console.log(error);
-      }
-    }
-
-    const regexTernary = /<UIcon\s+:name="[^']*'([^']*)'\s*:\s*'([^']*)'/g;
-    const matchIteratorTernary = fileContents.matchAll(regexTernary);
-
-    for (const match of matchIteratorTernary) {
-      try {
-        copyFile(match[1]);
-        copyFile(match[2]);
-      } catch (error) {
-        // console.log(error);
-      }
-    }
-  });
-}
-
-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 if (file.endsWith(extension)) {
-      fileList.push(filePath);
-    }
-  });
-
-  return fileList;
-}
-
-function copyFile(name) {
-  name = name.toLowerCase();
-
-  const require = createRequire(import.meta.url);
-  const source = require.resolve(`${PACKAGE_PATH}/${name}.svg`);
-  const destination = `${DESTINATION_DIR}/${PACKAGE_PATH}/${name}.svg`;
-
-  if (fs.existsSync(destination)) {
-    return;
-  }
-
-  const destDir = path.dirname(destination);
-
-  fs.mkdirSync(destDir, { recursive: true });
-  fs.copyFile(source, destination, (err) => {
-    err
-      ? console.error(`Error copying icon "${name}":`, err)
-      : console.log(`Icon "${name}" copied successfully!`);
-  });
-}
-
-function parseArgs() {
-  const args = process.argv.slice(2);
-  const parsedArgs = {};
-
-  let currentKey = null;
-
-  for (let i = 0; i < args.length; i++) {
-    const arg = args[i];
-
-    if (arg.startsWith("--")) {
-      const key = arg.slice(2);
-
-      parsedArgs[key] = true;
-      currentKey = key;
-    } else if (currentKey) {
-      parsedArgs[currentKey] = arg;
-      currentKey = null;
-    }
-  }
-
-  return parsedArgs;
-}

package/ui.text-empty/services/variant.service.js

@@ -1,22 +0,0 @@
-import { cva } from "vueless/service.ui";
-
-export default class VariantService {
-  static get(ui) {
-    const { title, description } = ui;
-
-    const titleVariants = cva({
-      base: title.base,
-      variants: title.variants,
-    });
-
-    const descriptionVariants = cva({
-      base: description.base,
-      variants: description.variants,
-    });
-
-    return {
-      titleVariants,
-      descriptionVariants,
-    };
-  }
-}

package/ui.text-field/index.stories.js

@@ -1,60 +0,0 @@
-import { getArgTypes, getSlotNames } from "vueless/service.storybook";
-
-import UField from "vueless/ui.text-field";
-import URow from "vueless/ui.container-row";
-
-export default {
-  title: "Text & Content / Field",
-  component: UField,
-  args: {
-    label: "Label",
-    value: "Value",
-  },
-  argTypes: {
-    ...getArgTypes(UField.name),
-  },
-};
-
-const DefaultTemplate = (args) => ({
-  components: { UField },
-  setup() {
-    const slots = getSlotNames(UField.name);
-
-    return { args, slots };
-  },
-  template: `
-    <UField v-bind="args">
-      <template v-for="(slot, index) of slots" :key="index" v-slot:[slot]>
-        <template v-if="args[slot]">{{ args[slot] }}</template>
-      </template>
-    </UField>
-  `,
-});
-
-const SizesTemplate = (args, { argTypes }) => ({
-  components: { UField, URow },
-  setup() {
-    return {
-      args,
-      sizes: argTypes.size.options,
-    };
-  },
-  template: `
-    <URow>
-      <UField
-        v-for="(size, index) in sizes"
-        :size="size"
-        :value="size"
-        labe="Label"
-        v-bind="args"
-        :key="index"
-       />
-    </URow>
-  `,
-});
-
-export const Default = DefaultTemplate.bind({});
-Default.args = {};
-
-export const Sizes = SizesTemplate.bind({});
-Sizes.args = {};

package/ui.text-field/index.vue

@@ -1,109 +0,0 @@
-<template>
-  <div class="mono-text-field" :class="fieldClasses" :data-cy="dataCy">
-    <div class="mono-text-field-label">
-      {{ label }}
-    </div>
-
-    <!-- @slot Use it to change structure. -->
-    <slot :value="value">
-      <div class="mono-text-field-value">
-        {{ value }}
-      </div>
-    </slot>
-  </div>
-</template>
-
-<script>
-export default {
-  name: "UField",
-
-  props: {
-    /**
-     * Set label.
-     */
-    label: {
-      type: String,
-      default: "",
-    },
-
-    /**
-     * Set value.
-     */
-    value: {
-      type: String,
-      default: "–",
-    },
-
-    /**
-     * Set size
-     * @values sm, md, lg
-     */
-    size: {
-      type: String,
-      default: "md",
-    },
-
-    /**
-     * Sets data-cy attribute for automated testing.
-     */
-    dataCy: {
-      type: String,
-      default: "",
-    },
-  },
-
-  computed: {
-    fieldClasses() {
-      const size = `mono-text-field-size-${this.size}`;
-
-      return [size];
-    },
-  },
-};
-</script>
-
-<style lang="postcss" scoped>
-.mono-text-field {
-  @apply w-full;
-
-  &-label {
-    @apply font-normal text-gray-500;
-  }
-
-  &-value {
-    @apply font-normal text-gray-800;
-  }
-
-  &-size {
-    &-sm {
-      .mono-text-field-label {
-        @apply mb-0.5 text-xs;
-      }
-
-      .mono-text-field-value {
-        @apply text-sm;
-      }
-    }
-
-    &-md {
-      .mono-text-field-label {
-        @apply mb-1 text-sm;
-      }
-
-      .mono-text-field-value {
-        @apply text-base;
-      }
-    }
-
-    &-lg {
-      .mono-text-field-label {
-        @apply mb-1.5 text-base;
-      }
-
-      .mono-text-field-value {
-        @apply text-lg;
-      }
-    }
-  }
-}
-</style>

package/ui.text-tag/index.stories.js

@@ -1,90 +0,0 @@
-import UTag from "vueless/ui.text-tag";
-import URow from "vueless/ui.container-row";
-
-import { getArgTypes, getSlotNames } from "vueless/service.storybook";
-
-export default {
-  title: "Text & Content / Tag",
-  component: UTag,
-  args: {
-    text: "Tag",
-  },
-  argTypes: {
-    ...getArgTypes(UTag.name),
-  },
-};
-
-const DefaultTemplate = (args) => ({
-  components: { UTag },
-  setup() {
-    const slots = getSlotNames(UTag.name);
-
-    return { args, slots };
-  },
-  template: `
-    <UTag v-bind="args">
-      <template v-for="(slot, index) of slots" :key="index" v-slot:[slot]>
-        <template v-if="args[slot]">{{ args[slot] }}</template>
-      </template>
-    </UTag>
-  `,
-});
-
-const ColorsTemplate = (args, { argTypes }) => ({
-  components: { UTag, URow },
-  setup() {
-    return {
-      args,
-      colors: argTypes.color.options,
-    };
-  },
-  template: `
-    <URow>
-      <UTag
-        v-for="(color, index) in colors"
-        :color="color"
-        :text="color"
-        v-bind="args"
-        :key="index"
-      />
-    </URow>
-  `,
-});
-
-const SizesTemplate = (args, { argTypes }) => ({
-  components: { UTag, URow },
-  setup() {
-    return {
-      args,
-      sizes: argTypes.size.options,
-    };
-  },
-  template: `
-    <URow>
-      <UTag
-        v-for="(size, index) in sizes"
-        :size="size"
-        :text="getText(size)"
-        v-bind="args"
-        :key="index"
-      />
-    </URow>
-  `,
-  methods: {
-    getText(value) {
-      return `Tag ${value}`;
-    },
-  },
-});
-
-export const Default = DefaultTemplate.bind({});
-Default.args = {};
-
-export const Colors = ColorsTemplate.bind({});
-Colors.args = {};
-
-export const Sizes = SizesTemplate.bind({});
-Sizes.args = {};
-
-export const Tooltip = DefaultTemplate.bind({});
-Tooltip.args = { tooltipText: "some tooltip text" };

package/ui.text-tag/index.vue

@@ -1,178 +0,0 @@
-<template>
-  <div
-    class="mono-tag"
-    :class="[colorClass, sizeClass]"
-    tabindex="1"
-    :data-cy="dataCy"
-    @focus="onFocus"
-    @keydown="onKeydown"
-    @blur="onBlur"
-    @mousedown="onMousedown"
-  >
-    <div class="mono-tag-body">
-      <div>{{ text }}</div>
-
-      <slot name="right">
-        <UIcon
-          v-if="tooltipText"
-          :tooltip="tooltipText"
-          :data-cy="`${dataCy}-info`"
-          name="info"
-          size="xs"
-          class="icon"
-        />
-      </slot>
-    </div>
-  </div>
-</template>
-
-<script>
-import UIcon from "vueless/ui.image-icon";
-
-export default {
-  name: "UTag",
-  components: {
-    UIcon,
-  },
-
-  props: {
-    /**
-     * The color of the tag.
-     * @values gray, red, orange, yellow, green, blue, violet, fuchsia
-     */
-    color: {
-      type: String,
-      default: "blue",
-    },
-
-    /**
-     * The size of the tag.
-     * @values sm, md, lg
-     */
-    size: {
-      type: String,
-      default: "md",
-    },
-
-    /**
-     * Set tag text.
-     */
-    text: {
-      type: String,
-      required: true,
-    },
-
-    /**
-     * Set tooltip text.
-     */
-    tooltipText: {
-      type: String,
-      default: "",
-    },
-
-    /**
-     * Sets data-cy attribute for automated testing.
-     */
-    dataCy: {
-      type: String,
-      default: "",
-    },
-  },
-
-  emits: ["focus", "keydown", "blur", "mousedown"],
-
-  computed: {
-    sizeClass() {
-      return `mono-tag-size-${this.size}`;
-    },
-
-    colorClass() {
-      return `mono-tag-${this.color}`;
-    },
-  },
-
-  methods: {
-    onFocus() {
-      this.$emit("focus");
-    },
-
-    onKeydown() {
-      this.$emit("keydown");
-    },
-
-    onBlur(event) {
-      this.$emit("blur", event);
-    },
-
-    onMousedown() {
-      this.$emit("mousedown");
-    },
-  },
-};
-</script>
-
-<style lang="postcss" scoped>
-.mono-tag {
-  @apply rounded-full;
-  @apply inline-block;
-
-  &-body {
-    @apply flex items-center;
-  }
-
-  .icon {
-    @apply ml-1;
-
-    &:deep(g [fill]) {
-      @apply fill-current;
-    }
-  }
-
-  &-size-sm {
-    @apply p-0.5 px-2;
-    @apply text-2xs;
-  }
-
-  &-size-md {
-    @apply px-2 py-1;
-    @apply text-xs;
-  }
-
-  &-size-lg {
-    @apply px-3 py-1.5;
-    @apply text-sm;
-  }
-
-  &-gray {
-    @apply bg-gray-100 text-gray-900;
-  }
-
-  &-red {
-    @apply bg-red-100 text-red-800;
-  }
-
-  &-orange {
-    @apply bg-orange-100 text-orange-800;
-  }
-
-  &-yellow {
-    @apply bg-yellow-100 text-yellow-800;
-  }
-
-  &-green {
-    @apply bg-green-100 text-green-800;
-  }
-
-  &-blue {
-    @apply bg-blue-100 text-blue-800;
-  }
-
-  &-violet {
-    @apply bg-violet-100 text-violet-800;
-  }
-
-  &-fuchsia {
-    @apply bg-fuchsia-100 text-fuchsia-800;
-  }
-}
-</style>