feat: Added input component

histoire.config.ts

@@ -2,8 +2,15 @@ import { defineConfig } from 'histoire'
 import { HstVue } from '@histoire/plugin-vue'
 
 export default defineConfig({
-  plugins: [
-    HstVue(),
-  ],
+  plugins: [HstVue()],
   setupFile: 'src/histoire-setup.ts',
+  theme: {
+    title: 'Bootsman-ui',
+    logo: {
+      square: './src/assets/logo.png',
+      light: './src/assets/logo-full.png',
+      dark: './src/assets/logo-full-dark.png'
+    },
+    logoHref: 'https://github.com/soft-stech/bootsman-ui'
+  }
 })

package.json

@@ -39,6 +39,8 @@
     "story:preview": "histoire preview"
   },
   "dependencies": {
+    "@fontsource-variable/inter": "^5.0.15",
+    "@vueuse/core": "^10.5.0",
     "tailwind-merge": "^1.14.0",
     "vue-demi": "^0.14.6"
   },

src/assets/main.css

@@ -1,3 +1,7 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+body {
+    font-family: 'Inter Variable', sans-serif;
+}

src/components/BuiButton/BuiButton.spec.ts

@@ -22,7 +22,7 @@ describe('BuiButton', () => {
     createComponent({ props: { color: 'primary' } })
 
     expect(wrapper.classes().join(' ')).toEqual(
-      'focus:ring-4 focus:ring-primary-200 font-medium rounded text-sm px-5 py-2.5 mr-2 mb-2 focus:outline-none bg-primary-500 hover:bg-primary-600 dark:bg-primary-500 dark:hover:bg-primary-600 dark:focus:ring-primary-400 text-white'
+      'focus:ring-4 focus:ring-primary-200 font-medium rounded text-sm px-5 py-2.5 mr-2 mb-2 focus:outline-none bg-primary-500 hover:bg-primary-550 dark:bg-primary-500 dark:hover:bg-primary-600 dark:focus:ring-primary-400 text-white'
     )
   })
   test('secondary button classes is correct', () => {

src/components/BuiButton/BuiButton.vue

@@ -8,7 +8,7 @@ const baseClasses =
 
 const colorClasses: Record<ButtonColor, string> = {
   primary:
-    'bg-primary-500 hover:bg-primary-600 dark:bg-primary-500 dark:hover:bg-primary-600 dark:focus:ring-primary-400 text-white',
+    'bg-primary-500 hover:bg-primary-550 dark:bg-primary-500 dark:hover:bg-primary-600 dark:focus:ring-primary-400 text-white',
   secondary:
     'bg-primary-150 hover:bg-primary-200 dark:bg-primary-650 dark:hover:bg-primary-700 dark:focus:ring-primary-300 text-primary-500',
   link: 'text-primary-500 bg-transparent hover:bg-primary-100 dark:hover:bg-primary-650 dark:hover:text-primary-400'

src/components/BuiInput/BuiInput.spec.ts

@@ -0,0 +1,43 @@
+import { shallowMount } from '@vue/test-utils'
+import BuiInput from './BuiInput.vue'
+import { describe, expect, test } from 'vitest'
+import type { TestWrapper } from '../../types/globalTypes'
+
+describe('BuiInput', () => {
+  // @ts-ignore
+  let wrapper: TestWrapper
+
+  const createComponent = (props: any) => {
+    wrapper = shallowMount(BuiInput, {
+      global: { stubs: { teleport: true } },
+      ...props
+    })
+  }
+  test('input event fired', async () => {
+    createComponent({ props: { color: 'primary' } })
+    const input = wrapper.find('input')
+
+    await input.setValue('some-text')
+
+    expect(input.element.value).toBe('some-text')
+    expect(wrapper.emitted('update:modelValue')[0][0]).toBe('some-text')
+  })
+
+  test('focus event fired', async () => {
+    createComponent({ props: { color: 'primary' } })
+    const input = wrapper.find('input')
+
+    await input.trigger('focus')
+
+    expect(wrapper.emitted()).toHaveProperty('focus')
+  })
+
+  test('blur event fired', async () => {
+    createComponent({ props: { color: 'primary' } })
+    const input = wrapper.find('input')
+
+    await input.trigger('blur')
+
+    expect(wrapper.emitted()).toHaveProperty('blur')
+  })
+})

src/components/BuiInput/BuiInput.story.vue

@@ -0,0 +1,88 @@
+<script setup lang="ts">
+import BuiInput from './BuiInput.vue'
+import { ref } from 'vue-demi'
+
+const model = ref('')
+</script>
+
+<template>
+  <Story title="BuiInput" autoPropsDisabled :layout="{ type: 'grid', width: '400px' }">
+    <Variant title="Default">
+      <div class="p-2">
+        <BuiInput label="Default" v-model="model" />
+      </div>
+    </Variant>
+    <Variant title="Placeholder">
+      <div class="p-2">
+        <BuiInput label="Default" v-model="model" placeholder="Some text" />
+      </div>
+    </Variant>
+    <Variant title="Error">
+      <div class="p-2">
+        <BuiInput label="Default" v-model="model" validation-status="error">
+          <template #validationMessage> Some error text </template>
+        </BuiInput>
+      </div>
+    </Variant>
+    <Variant title="Success">
+      <div class="p-2">
+        <BuiInput label="Default" v-model="model" validation-status="success">
+          <template #validationMessage> Some success text </template>
+        </BuiInput>
+      </div>
+    </Variant>
+    <Variant title="Helper text">
+      <div class="p-2">
+        <BuiInput label="Default" v-model="model">
+          <template #helper> Some help text </template>
+        </BuiInput>
+      </div>
+    </Variant>
+    <Variant title="Prefix slot">
+      <div class="p-2">
+        <BuiInput label="Default" v-model="model">
+          <template #prefix>
+            <svg
+              class="w-5 h-5 text-gray-800 dark:text-white"
+              aria-hidden="true"
+              xmlns="http://www.w3.org/2000/svg"
+              fill="none"
+              viewBox="0 0 21 21"
+            >
+              <path
+                stroke="currentColor"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                d="m6.072 10.072 2 2 6-4m3.586 4.314.9-.9a2 2 0 0 0 0-2.828l-.9-.9a2 2 0 0 1-.586-1.414V5.072a2 2 0 0 0-2-2H13.8a2 2 0 0 1-1.414-.586l-.9-.9a2 2 0 0 0-2.828 0l-.9.9a2 2 0 0 1-1.414.586H5.072a2 2 0 0 0-2 2v1.272a2 2 0 0 1-.586 1.414l-.9.9a2 2 0 0 0 0 2.828l.9.9a2 2 0 0 1 .586 1.414v1.272a2 2 0 0 0 2 2h1.272a2 2 0 0 1 1.414.586l.9.9a2 2 0 0 0 2.828 0l.9-.9a2 2 0 0 1 1.414-.586h1.272a2 2 0 0 0 2-2V13.8a2 2 0 0 1 .586-1.414Z"
+              />
+            </svg>
+          </template>
+        </BuiInput>
+      </div>
+    </Variant>
+    <Variant title="Suffix slot">
+      <div class="p-2">
+        <BuiInput label="Default" v-model="model">
+          <template #suffix>
+            <svg
+              class="w-5 h-5 text-gray-800 dark:text-white"
+              aria-hidden="true"
+              xmlns="http://www.w3.org/2000/svg"
+              fill="none"
+              viewBox="0 0 21 21"
+            >
+              <path
+                stroke="currentColor"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                d="m6.072 10.072 2 2 6-4m3.586 4.314.9-.9a2 2 0 0 0 0-2.828l-.9-.9a2 2 0 0 1-.586-1.414V5.072a2 2 0 0 0-2-2H13.8a2 2 0 0 1-1.414-.586l-.9-.9a2 2 0 0 0-2.828 0l-.9.9a2 2 0 0 1-1.414.586H5.072a2 2 0 0 0-2 2v1.272a2 2 0 0 1-.586 1.414l-.9.9a2 2 0 0 0 0 2.828l.9.9a2 2 0 0 1 .586 1.414v1.272a2 2 0 0 0 2 2h1.272a2 2 0 0 1 1.414.586l.9.9a2 2 0 0 0 2.828 0l.9-.9a2 2 0 0 1 1.414-.586h1.272a2 2 0 0 0 2-2V13.8a2 2 0 0 1 .586-1.414Z"
+              />
+            </svg>
+          </template>
+        </BuiInput>
+      </div>
+    </Variant>
+  </Story>
+</template>