@fiscozen/input 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Fiscozen
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,3 @@
+# @fiscozen/input
+
+TODO

package/eslintrc.cjs

@@ -0,0 +1,18 @@
+/* eslint-env node */
+require('@rushstack/eslint-patch/modern-module-resolution')
+
+module.exports = {
+  root: true,
+  'extends': ['@fiscozen/eslint-config', 'plugin:storybook/recommended'],
+  overrides: [
+    {
+      files: [
+        'cypress/e2e/**/*.{cy,spec}.{js,ts,jsx,tsx}',
+        'cypress/support/**/*.{js,ts,jsx,tsx}'
+      ],
+      'extends': [
+        'plugin:cypress/recommended'
+      ]
+    }
+  ]
+}

package/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "@fiscozen/input",
+  "version": "0.1.0",
+  "description": "Design System Input component",
+  "main": "src/index.ts",
+  "type": "module",
+  "keywords": [],
+  "author": "Cristian Barraco",
+  "peerDependencies": {
+    "tailwindcss": "^3.4.1",
+    "vue": "^3.4.13",
+    "@fiscozen/icons": "^0.1.0"
+  },
+  "devDependencies": {
+    "@rushstack/eslint-patch": "^1.3.3",
+    "@types/jsdom": "^21.1.6",
+    "@types/node": "^18.19.3",
+    "@vitejs/plugin-vue": "^4.5.2",
+    "@vitest/coverage-v8": "^1.2.1",
+    "@vue/test-utils": "^2.4.3",
+    "@vue/tsconfig": "^0.5.0",
+    "eslint": "^8.49.0",
+    "jsdom": "^23.0.1",
+    "prettier": "^3.0.3",
+    "typescript": "~5.3.0",
+    "vite": "^5.0.10",
+    "vite-plugin-dts": "^3.8.3",
+    "vitest": "^1.2.0",
+    "vue-tsc": "^1.8.25",
+    "@fiscozen/tsconfig": "^0.1.0",
+    "@fiscozen/prettier-config": "^0.1.0",
+    "@fiscozen/eslint-config": "^0.1.0"
+  },
+  "license": "MIT",
+  "scripts": {
+    "coverage": "vitest run --coverage",
+    "format": "prettier --write src/",
+    "test:unit": "vitest run",
+    "build": "vue-tsc && vite build"
+  }
+}

package/prettierrc.js

@@ -0,0 +1,5 @@
+import fiscozenPrettierConfig from '@fiscozen/prettier-config';
+
+export default {
+    ...fiscozenPrettierConfig
+};

package/src/FzInput.vue

@@ -0,0 +1,95 @@
+<template>
+  <div class="w-full flex flex-col gap-8">
+    <label :class="['text-sm', computedLabelClass]" :for="uniqueId">
+      {{ label }}{{ required ? " *" : "" }}
+    </label>
+    <div
+      :class="[staticContainerClass, computedContainerClass]"
+      ref="containerRef"
+      @click="inputRef?.focus()"
+    >
+      <FzIcon
+        v-if="leftIcon"
+        :name="leftIcon"
+        :size="size"
+        :variant="leftIconVariant"
+      />
+      <input
+        :type="type"
+        :required="required ? required : false"
+        :disabled="disabled"
+        :placeholder="placeholder"
+        v-model="model"
+        :id="uniqueId"
+        ref="inputRef"
+        :class="[staticInputClass]"
+        :pattern="pattern"
+      />
+      <FzIcon
+        v-if="valid"
+        name="check"
+        :size="size"
+        class="text-semantic-success"
+      />
+      <FzIcon
+        v-if="rightIcon"
+        :name="rightIcon"
+        :size="size"
+        :variant="rightIconVariant"
+      />
+    </div>
+    <div
+      v-if="error && $slots.errorMessage"
+      class="flex gap-4"
+      :style="{ width: containerWidth }"
+    >
+      <FzIcon
+        name="triangle-exclamation"
+        class="text-semantic-error"
+        :size="size"
+      />
+      <div :class="['mt-1', computedErrorClass]">
+        <slot name="errorMessage"></slot>
+      </div>
+    </div>
+    <span
+      v-else-if="$slots.helpText"
+      :class="[computedHelpClass]"
+      :style="{ width: containerWidth }"
+    >
+      <slot name="helpText"></slot>
+    </span>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { Ref, ref } from "vue";
+import { FzInputProps } from "./types";
+import { FzIcon } from "@fiscozen/icons";
+import useInputStyle from "./useInputStyle";
+
+const props = withDefaults(defineProps<FzInputProps>(), {
+  size: "md",
+  error: false,
+  type: "text",
+});
+
+const model = defineModel();
+const containerRef: Ref<HTMLElement | null> = ref(null);
+const inputRef: Ref<HTMLInputElement | null> = ref(null);
+const uniqueId = `fz-input-${Math.random().toString(36).slice(2, 9)}`;
+
+const {
+  staticContainerClass,
+  computedContainerClass,
+  computedLabelClass,
+  staticInputClass,
+  computedHelpClass,
+  computedErrorClass,
+  containerWidth,
+} = useInputStyle(props, containerRef);
+
+const emit = defineEmits([]);
+</script>
+
+<style scoped></style>

package/src/__tests__/FzInput.spec.ts

@@ -0,0 +1,153 @@
+import { describe, it } from "vitest";
+import { mount } from "@vue/test-utils";
+import { FzInput } from "..";
+
+const NUMBER_OF_INPUTS = 1000;
+
+describe.concurrent("FzInput", () => {
+  it("renders label", async ({ expect }) => {
+    const wrapper = mount(FzInput, {
+      props: {
+        label: "Label",
+      },
+      slots: {},
+    });
+
+    expect(wrapper.text()).toContain("Label");
+  });
+
+  it("renders leftIcon", async ({ expect }) => {
+    const wrapper = mount(FzInput, {
+      props: {
+        label: "Label",
+        leftIcon: "calendar-lines",
+      },
+      slots: {},
+    });
+
+    expect(wrapper.find(".fa-calendar-lines")).toBeTruthy();
+  });
+
+  it("renders rightIcon", async ({ expect }) => {
+    const wrapper = mount(FzInput, {
+      props: {
+        label: "Label",
+        rightIcon: "credit-card",
+      },
+      slots: {},
+    });
+
+    expect(wrapper.find(".fa-credit-card")).toBeTruthy();
+  });
+
+  it("renders helpText", async ({ expect }) => {
+    const wrapper = mount(FzInput, {
+      props: {
+        label: "Label",
+      },
+      slots: {
+        helpText: "This is a helper text",
+      },
+    });
+
+    await wrapper.vm.$nextTick();
+    expect(wrapper.text()).toContain("This is a helper text");
+  });
+
+  it("renders errorMessage", async ({ expect }) => {
+    const wrapper = mount(FzInput, {
+      props: {
+        label: "Label",
+        error: true,
+      },
+      slots: {
+        errorMessage: "This is an error message",
+      },
+    });
+
+    await wrapper.vm.$nextTick();
+    expect(wrapper.text()).toContain("This is an error message");
+  });
+
+  it("renders disabled", async ({ expect }) => {
+    const wrapper = mount(FzInput, {
+      props: {
+        label: "Label",
+        disabled: true,
+      },
+      slots: {},
+    });
+
+    expect(wrapper.find("input").attributes("disabled")).toBe("");
+  });
+
+  it("renders required", async ({ expect }) => {
+    const wrapper = mount(FzInput, {
+      props: {
+        label: "Label",
+        required: true,
+      },
+      slots: {},
+    });
+
+    await wrapper.vm.$nextTick();
+
+    expect(wrapper.find("input").attributes("required")).toBe("");
+    expect(wrapper.text()).toContain("*");
+  });
+
+  it("renders email type", async ({ expect }) => {
+    const wrapper = mount(FzInput, {
+      props: {
+        label: "Label",
+        type: "email",
+      },
+      slots: {},
+    });
+
+    expect(wrapper.find("input").attributes("type")).toBe("email");
+  });
+
+  it("renders tel type", async ({ expect }) => {
+    const wrapper = mount(FzInput, {
+      props: {
+        label: "Label",
+        type: "tel",
+      },
+      slots: {},
+    });
+
+    expect(wrapper.find("input").attributes("type")).toBe("tel");
+  });
+
+  it("renders password type", async ({ expect }) => {
+    const wrapper = mount(FzInput, {
+      props: {
+        label: "Label",
+        type: "password",
+      },
+      slots: {},
+    });
+
+    expect(wrapper.find("input").attributes("type")).toBe("password");
+  });
+
+  it(`renders ${NUMBER_OF_INPUTS} input with different ids`, async ({
+    expect,
+  }) => {
+    const wrapperList = Array.from({ length: NUMBER_OF_INPUTS }).map((_, i) =>
+      mount(FzInput, {
+        props: {
+          label: `Label ${i}`,
+        },
+        slots: {},
+      }),
+    );
+
+    await Promise.all(wrapperList.map((w) => w.vm.$nextTick()));
+
+    const ids = wrapperList.map((w) => w.find("input").attributes("id"));
+
+    expect(new Set(ids).size).toBe(NUMBER_OF_INPUTS);
+  });
+});

package/src/index.ts

@@ -0,0 +1,2 @@
+export { default as FzInput } from "./FzInput.vue";
+export type * from "./types";

package/src/types.ts

@@ -0,0 +1,58 @@
+import { IconVariant } from "@fiscozen/icons";
+
+type FzInputProps = {
+  /**
+   * The label displayed on top of the input
+   */
+  label: string;
+  /**
+   * The size of the input
+   */
+  size?: "sm" | "md" | "lg";
+  /**
+   * The placeholder displayed in the input
+   */
+  placeholder?: string;
+  /**
+   * If set to true, the input is required
+   */
+  required?: boolean;
+  /**
+   * If set to true, the input is disabled
+   */
+  disabled?: boolean;
+  /**
+   * If set to true, the input is in error state
+   */
+  error?: boolean;
+  /**
+   * Left icon name
+   */
+  leftIcon?: string;
+  /**
+   * Left icon variant
+   */
+  leftIconVariant?: IconVariant;
+  /**
+   * Right icon name
+   */
+  rightIcon?: string;
+  /**
+   * Right icon variant
+   */
+  rightIconVariant?: IconVariant;
+  /**
+   * The input type
+   */
+  type?: "text" | "password" | "email" | "number" | "tel" | "url";
+  /**
+   * If set to true, the input is valid
+   */
+  valid?: boolean;
+  /**
+   * Pattern to validate the input
+   */
+  pattern?: string;
+};
+
+export { FzInputProps };

package/src/useInputStyle.ts

@@ -0,0 +1,64 @@
+import { computed, Ref } from "vue";
+import { FzInputProps } from "./types";
+
+export default function useInputStyle(
+  props: FzInputProps,
+  container: Ref<HTMLElement | null>,
+) {
+  const containerWidth = computed(() =>
+    container.value ? `${container.value.clientWidth}px` : "auto",
+  );
+
+  const mapContainerClass = {
+    sm: "h-28 text-sm",
+    md: "h-32 text-base",
+    lg: "h-40 text-lg",
+  };
+
+  const staticContainerClass = `flex justify-between w-full items-center px-10 border-1 rounded gap-8 text-left has-[:focus]:border-blue-600`;
+
+  const computedContainerClass = computed(() => [
+    mapContainerClass[props.size!],
+    evaluateProps(),
+  ]);
+
+  const computedLabelClass = computed(() => [
+    props.disabled ? "text-grey-300" : "text-core-black",
+  ]);
+
+  const staticInputClass = `peer w-full bg-transparent border-0 focus:outline-none cursor-[inherit] focus:ring-0 truncate`;
+
+  const computedHelpClass = computed(() => [
+    props.size === "sm" ? "text-xs" : "",
+    props.size === "md" ? "text-sm" : "",
+    props.size === "lg" ? "text-base" : "",
+    props.disabled ? "text-grey-300" : "text-grey-500",
+  ]);
+  const computedErrorClass = computed(() => [
+    props.size === "sm" ? "text-xs" : "",
+    props.size === "md" ? "text-sm" : "",
+    props.size === "lg" ? "text-base" : "",
+    props.disabled ? "text-grey-300" : "text-core-black",
+  ]);
+
+  const evaluateProps = () => {
+    switch (true) {
+      case props.disabled:
+        return "bg-grey-100 border-grey-100 text-grey-300 cursor-not-allowed";
+      case props.error:
+        return "border-semantic-error bg-white text-core-black cursor-text";
+      default:
+        return "border-grey-300 bg-white text-core-black cursor-text";
+    }
+  };
+
+  return {
+    staticContainerClass,
+    computedContainerClass,
+    computedLabelClass,
+    staticInputClass,
+    computedHelpClass,
+    computedErrorClass,
+    containerWidth,
+  };
+}

package/tsconfig.json

@@ -0,0 +1,4 @@
+{
+  "extends": "@fiscozen/tsconfig",
+  "exclude": ["src/__tests__", "vite.config.ts", "vitest.config.ts"]
+}

package/vite.config.ts

@@ -0,0 +1,34 @@
+import { fileURLToPath, URL } from 'node:url'
+import { resolve } from 'node:path';
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import dts from 'vite-plugin-dts'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [
+    vue(),
+    dts({
+      insertTypesEntry: true,
+    })
+  ],
+  resolve: {
+    alias: {
+      '@': fileURLToPath(new URL('./src', import.meta.url))
+    }
+  },
+  build: {
+    lib: {
+      entry: resolve(__dirname, './src/index.ts'),
+      name: 'FzInput',
+    },
+    rollupOptions: {
+      external: ['vue'],
+      output: {
+        globals: {
+          vue: 'Vue',
+        },
+      },
+    }
+  }
+})

package/vitest.config.ts

@@ -0,0 +1,19 @@
+import { fileURLToPath } from 'node:url'
+import { mergeConfig, defineConfig, configDefaults } from 'vitest/config'
+import viteConfig from './vite.config'
+
+export default mergeConfig(
+  viteConfig,
+  defineConfig({
+    test: {
+      environment: 'jsdom',
+      exclude: [...configDefaults.exclude, 'e2e/*'],
+      root: fileURLToPath(new URL('./', import.meta.url)),
+      coverage: {
+        provider: 'v8',
+        include: ['**/src/**'],
+        exclude: ['**/index.ts']
+      }
+    }
+  })
+)