feat: Implement Select and Tooltip

package.json

@@ -33,7 +33,8 @@
     "gsap": "^3.12.5",
     "postcss-cli": "^11.0.0",
     "sass": "^1.77.8",
-    "vite-svg-loader": "^5.1.0"
+    "vite-svg-loader": "^5.1.0",
+    "vue-select": "^4.0.0-beta.3"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^1.6.1",
@@ -49,6 +50,7 @@
     "@tsconfig/node20": "^20.1.4",
     "@types/jsdom": "^21.1.7",
     "@types/node": "^20.14.5",
+    "@types/vue-select": "^3.16.8",
     "@vitejs/plugin-vue": "^5.0.5",
     "@vue/eslint-config-prettier": "^9.0.0",
     "@vue/eslint-config-typescript": "^13.0.0",

src/components/Footer/WFooter.ts

@@ -1,8 +1,8 @@
-export type FooterSection = {
-  title: string
-  links: FooterLink[]
-}
 export type FooterLink = {
   url: string
   label: string
 }
+export type FooterSection = {
+  title: string
+  links: FooterLink[]
+}

src/components/Footer/WFooter.vue

@@ -74,7 +74,7 @@
 <script setup lang="ts">
 import AdoIcon from '@/assets/svg/ado.svg?component'
 import WitOracleIcon from '@/assets/svg/witnet-logo-dark.svg?component'
-import { FooterSection } from './WFooter.ts'
+import { FooterSection } from './WFooter'
 import WSection from '@/components/Section/WSection.vue'
 import { PropType } from 'vue'
 

src/components/Select/WSelect.spec.ts

@@ -0,0 +1,63 @@
+import { describe, it, expect } from 'vitest'
+import { shallowMount } from '@vue/test-utils'
+import WSelect from './WSelect.vue'
+import { DropdownXPosition, DropdownYPosition } from './WSelect'
+import Icon from '@/assets/svg/navigation-cursor.svg?component'
+
+describe('WSelect', () => {
+  it('renders properly', () => {
+    const wrapper = shallowMount(WSelect, {
+      props: {
+        dropdownXPosition: DropdownXPosition.Right,
+        dropdownYPosition: DropdownYPosition.Bottom,
+        modelValue: {
+          key: 'en',
+          label: 'English',
+          icon: null
+        },
+        options: [
+          {
+            key: 'en',
+            label: 'English',
+            icon: null
+          },
+          {
+            key: 'es',
+            label: 'Español',
+            icon: null
+          }
+        ]
+      }
+    })
+
+    expect(wrapper.element).toMatchSnapshot()
+  })
+
+  it('renders properly an icon when provided', () => {
+    const wrapper = shallowMount(WSelect, {
+      props: {
+        dropdownXPosition: DropdownXPosition.Right,
+        dropdownYPosition: DropdownYPosition.Bottom,
+        modelValue: {
+          key: 'en',
+          label: 'English',
+          icon: Icon
+        },
+        options: [
+          {
+            key: 'en',
+            label: 'English',
+            icon: Icon
+          },
+          {
+            key: 'es',
+            label: 'Español',
+            icon: Icon
+          }
+        ]
+      }
+    })
+
+    expect(wrapper.element).toMatchSnapshot()
+  })
+})

src/components/Select/WSelect.stories.ts

@@ -0,0 +1,76 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import WSelect from './WSelect.vue'
+import {
+  DropdownXPosition,
+  dropdownXPositions,
+  DropdownYPosition,
+  dropdownYPositions
+} from './WSelect'
+import { ref } from 'vue'
+import 'vue-select/dist/vue-select.css'
+import Icon from '@/assets/svg/navigation-cursor.svg?component'
+
+const meta: any = {
+  title: 'Example/WSelect',
+  component: WSelect,
+  tags: ['autodocs'],
+  argTypes: {
+    dropdownYPosition: { control: 'select', options: dropdownYPositions },
+    dropdownXPosition: { control: 'select', options: dropdownXPositions }
+  },
+  args: {
+    dropdownXPosition: DropdownXPosition.Right,
+    dropdownYPosition: DropdownYPosition.Bottom,
+    options: [
+      {
+        key: 'en',
+        label: 'English',
+        icon: null
+      },
+      {
+        key: 'es',
+        label: 'Español',
+        icon: null
+      }
+    ]
+  }
+} satisfies Meta<typeof WSelect>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  render: (args: any) => ({
+    components: { WSelect },
+    setup() {
+      const model = ref({
+        key: 'en',
+        label: 'English',
+        icon: null
+      })
+
+      function update($event: any) {
+        model.value = $event
+      }
+
+      return { args, model, update }
+    },
+    template: `<div class="h-[100px] w-auto flex"><WSelect v-bind="args" v-model="model" @update:model-value="update" /></div>`,
+    args: {
+      dropdownXPosition: DropdownXPosition.Right,
+      dropdownYPosition: DropdownYPosition.Bottom,
+      options: [
+        {
+          key: 'en',
+          label: 'English',
+          icon: null
+        },
+        {
+          key: 'es',
+          label: 'Español',
+          icon: Icon
+        }
+      ]
+    }
+  })
+}

src/components/Select/WSelect.ts

@@ -0,0 +1,11 @@
+export type Option = { key: string; label: string; icon: string | null }
+export enum DropdownYPosition {
+  Top = 'top',
+  Bottom = 'bottom'
+}
+export enum DropdownXPosition {
+  Right = 'right',
+  Left = 'left'
+}
+export const dropdownYPositions = Object.values(DropdownYPosition)
+export const dropdownXPositions = Object.values(DropdownXPosition)