@meeovi/layer-search 1.0.3

package/README.md

@@ -0,0 +1,181 @@
+<!-- packages/search/README.md -->
+# @meeovi/search
+
+A modular, provider-agnostic search module for the Alternate Framework. It provides a unified, typed search API with pluggable adapters (Meilisearch, OpenSearch, mock adapters), a small CLI for indexing/warmup, and event hooks.
+
+## Features
+
+- Plug-and-play adapters (Meilisearch, OpenSearch, Mock)
+- Fully typed integration with `@meeovi/core`
+- Mock adapter for tests
+- Small CLI for indexing and warmup
+- Configuration validation and event hooks (`search:query`, `search:results`)
+
+## Installation
+
+Using npm:
+
+```bash
+npm install @meeovi/search
+```
+
+Using pnpm:
+
+```bash
+pnpm add @meeovi/search
+```
+
+## Quick Usage
+
+Register the module with an Alternate app:
+
+```ts
+import { createAlternateApp } from '@meeovi/core'
+import searchModule from '@meeovi/search'
+
+const app = createAlternateApp({
+  config: {
+    search: {
+      defaultProvider: 'meilisearch',
+      providers: {
+        meilisearch: {
+          host: 'http://localhost:7700',
+          index: 'products',
+          apiKey: 'masterKey'
+        }
+      }
+    }
+  },
+  modules: [searchModule]
+})
+
+await app.start()
+
+const search = app.context.getAdapter('search')
+const results = await search.search({ term: 'shoes' })
+console.log(results.items)
+```
+
+## Adapters
+
+Meilisearch adapter:
+
+```ts
+import { createMeilisearchAdapter } from '@meeovi/search'
+
+const adapter = createMeilisearchAdapter({
+  host: 'http://localhost:7700',
+  index: 'products',
+  apiKey: 'masterKey'
+})
+```
+
+OpenSearch adapter:
+
+```ts
+import { createOpenSearchAdapter } from '@meeovi/search'
+
+const adapter = createOpenSearchAdapter({
+  endpoint: 'https://my-opensearch.com',
+  index: 'products',
+  apiKey: 'secret'
+})
+```
+
+Mock adapter (for testing):
+
+```ts
+import { createMockSearchAdapter } from '@meeovi/search'
+
+const mock = createMockSearchAdapter([
+  { id: '1', title: 'Red Shoes' },
+  { id: '2', title: 'Blue Shirt' }
+])
+
+const results = await mock.search({ term: 'red' })
+```
+
+## Configuration
+
+Example `search` config in your app:
+
+```json
+{
+  "search": {
+    "defaultProvider": "opensearch",
+    "providers": {
+      "opensearch": {
+        "endpoint": "https://my-opensearch.com",
+        "index": "products"
+      }
+    }
+  }
+}
+```
+
+The module validates that `defaultProvider` and the referenced provider configuration exist, and that required fields for each adapter are present.
+
+## Events
+
+This module emits bus events that you can listen to:
+
+```ts
+bus.on('search:query', ({ term }) => {
+  console.log('User searched for:', term)
+})
+
+bus.on('search:results', ({ term, total }) => {
+  console.log(`Search for "${term}" returned ${total} results`)
+})
+```
+
+## CLI
+
+Included CLI commands:
+
+- Warmup: `meeovi-search warmup`
+- Index a JSON file: `meeovi-search index ./products.json`
+
+Environment variables supported (example for Meilisearch):
+
+- `SEARCH_PROVIDER=meilisearch`
+- `MEILI_HOST=http://localhost:7700`
+- `MEILI_INDEX=products`
+- `MEILI_KEY=masterKey`
+
+## Testing
+
+Use the mock adapter in tests to avoid external dependencies:
+
+```ts
+import { createMockSearchAdapter } from '@meeovi/search'
+
+const mock = createMockSearchAdapter([{ id: '1', title: 'Test Product' }])
+const results = await mock.search({ term: 'test' })
+```
+
+## File structure
+
+Typical layout:
+
+```
+@meeovi/search
+├─ src/
+│  ├─ index.ts
+│  ├─ module.ts
+│  ├─ adapter/
+│  │  ├─ opensearch.ts
+│  │  ├─ meilisearch.ts
+│  │  ├─ mock.ts
+│  │  └─ types.ts
+│  ├─ config/schema.ts
+│  ├─ events.ts
+│  └─ utils/normalizers.ts
+├─ cli.ts
+├─ package.json
+└─ README.md
+```
+
+## License
+
+MIT

package/app/components/README.md

@@ -0,0 +1,3 @@
+## Search Directory
+
+For all search visual features are found within this directory.

package/app/components/atoms/BaseButton.vue

@@ -0,0 +1,36 @@
+<script lang="ts" setup>
+interface Props {
+  color: 'dodger-blue' | 'hot-pink'
+  secondary?: boolean
+  size?: 'default' | 'small' | 'large'
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  color: 'hot-pink',
+  secondary: false,
+  size: 'default'
+})
+
+const { color, secondary, size } = toRefs(props)
+
+const buttonColorClass = computed(() => `btn-${color.value}`)
+const buttonSecondaryClass = computed(() => secondary.value ? 'btn-secondary' : '')
+const buttonSizeClass = computed(() => {
+  if (size.value === 'default') { return '' }
+  return size.value === 'large'
+    ? 'btn-lg'
+    : 'btn-sm'
+})
+</script>
+
+<template>
+  <button
+    class="btn"
+    :class="[buttonColorClass, buttonSecondaryClass, buttonSizeClass]"
+    type="button"
+  >
+    <slot name="default" />
+  </button>
+</template>
+
+<style src="~/assets/css/button.css"></style>

package/app/components/atoms/BaseCard.vue

@@ -0,0 +1,13 @@
+<template>
+  <div class="card shadow-m">
+    <slot name="default" />
+  </div>
+</template>
+
+<style scoped>
+.card {
+  background-color: var(--white);
+  border-radius: 0.5rem;
+  overflow: hidden;
+}
+</style>

package/app/components/atoms/BaseCheckbox.vue

@@ -0,0 +1,51 @@
+<script lang="ts" setup>
+const props = withDefaults(defineProps<{
+  value: boolean
+  name: string
+  label: string
+  disabled?: boolean
+}>(), {
+  disabled: false
+})
+
+defineEmits<{
+ (e: 'update:value', checked: boolean): void
+}>()
+
+const { name, label } = toRefs(props)
+</script>
+
+<template>
+  <div class="input-group" :class="{ disabled: disabled }">
+    <input
+      :id="name"
+      type="checkbox"
+      :name="name"
+      class="mr-2"
+      :checked="value"
+      :disabled="disabled"
+      @update="$emit('update:value', $event.target.checked)"
+    >
+    <label :for="name" class="body">
+      <slot name="default">
+        {{ label }}
+      </slot>
+    </label>
+  </div>
+</template>
+
+<style scoped>
+.input-group {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+ input,  label {
+  cursor: pointer;
+}
+
+ input:disabled,  input:disabled + label {
+  cursor: not-allowed;
+}
+</style>

package/app/components/atoms/BaseLogo.vue

@@ -0,0 +1,19 @@
+<template>
+  <img
+    src="../../assets/images/logo/light-background/default.svg"
+    alt="Meilisearch"
+    class="logo"
+  >
+</template>
+
+<style scoped>
+.logo {
+  height: 1.5rem;
+}
+
+@media screen and (min-width: 1024px) {
+  .logo {
+    height: 2.25rem;
+  }
+}
+</style>

package/app/components/atoms/BaseText.vue

@@ -0,0 +1,17 @@
+<script lang="ts" setup>
+const props = withDefaults(defineProps<{
+  size?: 'l' | 'm' | 's' | 'xs'
+  tag?: string
+}>(), {
+  size: 'l',
+  tag: 'p'
+})
+
+const textSizeClass = computed(() => `body-${toRef(props, 'size').value}`)
+</script>
+
+<template>
+  <component :is="tag" class="body" :class="textSizeClass">
+    <slot name="default" />
+  </component>
+</template>

package/app/components/atoms/BaseTitle.vue

@@ -0,0 +1,23 @@
+<script lang="ts" setup>
+const props = withDefaults(defineProps<{
+  size?: 's' | 'xs'
+  tag?: string
+}>(), {
+  size: 's',
+  tag: 'div'
+})
+
+const size = toRef(props, 'size')
+
+const textSizeClass = computed(() => {
+  return size.value === 's'
+    ? 'title-caps'
+    : 'title-caps-xs'
+})
+</script>
+
+<template>
+  <component :is="tag" class="title" :class="[textSizeClass]">
+    <slot name="default" />
+  </component>
+</template>

package/app/components/atoms/DiscordIcon.vue

@@ -0,0 +1,14 @@
+<template>
+  <svg
+    fill="currentColor"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    class="h-6 w-6"
+    width="50px"
+    height="50px"
+  >
+    <path
+      d="M19.952,5.672c-1.904-1.531-4.916-1.79-5.044-1.801c-0.201-0.017-0.392,0.097-0.474,0.281 c-0.006,0.012-0.072,0.163-0.145,0.398c1.259,0.212,2.806,0.64,4.206,1.509c0.224,0.139,0.293,0.434,0.154,0.659 c-0.09,0.146-0.247,0.226-0.407,0.226c-0.086,0-0.173-0.023-0.252-0.072C15.584,5.38,12.578,5.305,12,5.305S8.415,5.38,6.011,6.872 c-0.225,0.14-0.519,0.07-0.659-0.154c-0.14-0.225-0.07-0.519,0.154-0.659c1.4-0.868,2.946-1.297,4.206-1.509 c-0.074-0.236-0.14-0.386-0.145-0.398C9.484,3.968,9.294,3.852,9.092,3.872c-0.127,0.01-3.139,0.269-5.069,1.822 C3.015,6.625,1,12.073,1,16.783c0,0.083,0.022,0.165,0.063,0.237c1.391,2.443,5.185,3.083,6.05,3.111c0.005,0,0.01,0,0.015,0 c0.153,0,0.297-0.073,0.387-0.197l0.875-1.202c-2.359-0.61-3.564-1.645-3.634-1.706c-0.198-0.175-0.217-0.477-0.042-0.675 c0.175-0.198,0.476-0.217,0.674-0.043c0.029,0.026,2.248,1.909,6.612,1.909c4.372,0,6.591-1.891,6.613-1.91 c0.198-0.172,0.5-0.154,0.674,0.045c0.174,0.198,0.155,0.499-0.042,0.673c-0.07,0.062-1.275,1.096-3.634,1.706l0.875,1.202 c0.09,0.124,0.234,0.197,0.387,0.197c0.005,0,0.01,0,0.015,0c0.865-0.027,4.659-0.667,6.05-3.111 C22.978,16.947,23,16.866,23,16.783C23,12.073,20.985,6.625,19.952,5.672z M8.891,14.87c-0.924,0-1.674-0.857-1.674-1.913 s0.749-1.913,1.674-1.913s1.674,0.857,1.674,1.913S9.816,14.87,8.891,14.87z M15.109,14.87c-0.924,0-1.674-0.857-1.674-1.913 s0.749-1.913,1.674-1.913c0.924,0,1.674,0.857,1.674,1.913S16.033,14.87,15.109,14.87z"
+    />
+  </svg>
+</template>

package/app/components/atoms/GithubIcon.vue

@@ -0,0 +1,14 @@
+<template>
+  <svg
+    fill="currentColor"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    class="h-6 w-6"
+    width="50px"
+    height="50px"
+  >
+    <path
+      d="M 12 2 C 6.476563 2 2 6.476563 2 12 C 2 17.523438 6.476563 22 12 22 C 17.523438 22 22 17.523438 22 12 C 22 6.476563 17.523438 2 12 2 Z M 12 4 C 16.410156 4 20 7.589844 20 12 C 20 12.46875 19.953125 12.929688 19.875 13.375 C 19.628906 13.320313 19.265625 13.253906 18.84375 13.25 C 18.53125 13.246094 18.140625 13.296875 17.8125 13.34375 C 17.925781 12.996094 18 12.613281 18 12.21875 C 18 11.257813 17.53125 10.363281 16.78125 9.625 C 16.988281 8.855469 17.191406 7.535156 16.65625 7 C 15.074219 7 14.199219 8.128906 14.15625 8.1875 C 13.667969 8.070313 13.164063 8 12.625 8 C 11.933594 8 11.273438 8.125 10.65625 8.3125 L 10.84375 8.15625 C 10.84375 8.15625 9.964844 6.9375 8.34375 6.9375 C 7.777344 7.507813 8.035156 8.953125 8.25 9.6875 C 7.484375 10.417969 7 11.28125 7 12.21875 C 7 12.546875 7.078125 12.859375 7.15625 13.15625 C 6.878906 13.125 5.878906 13.03125 5.46875 13.03125 C 5.105469 13.03125 4.542969 13.117188 4.09375 13.21875 C 4.03125 12.820313 4 12.414063 4 12 C 4 7.589844 7.589844 4 12 4 Z M 5.46875 13.28125 C 5.863281 13.28125 7.0625 13.421875 7.21875 13.4375 C 7.238281 13.492188 7.257813 13.542969 7.28125 13.59375 C 6.851563 13.554688 6.019531 13.496094 5.46875 13.5625 C 5.101563 13.605469 4.632813 13.738281 4.21875 13.84375 C 4.1875 13.71875 4.148438 13.597656 4.125 13.46875 C 4.5625 13.375 5.136719 13.28125 5.46875 13.28125 Z M 18.84375 13.5 C 19.242188 13.503906 19.605469 13.570313 19.84375 13.625 C 19.832031 13.691406 19.796875 13.746094 19.78125 13.8125 C 19.527344 13.753906 19.109375 13.667969 18.625 13.65625 C 18.390625 13.652344 18.015625 13.664063 17.6875 13.6875 C 17.703125 13.65625 17.707031 13.625 17.71875 13.59375 C 18.058594 13.546875 18.492188 13.496094 18.84375 13.5 Z M 6.09375 13.78125 C 6.65625 13.785156 7.183594 13.824219 7.40625 13.84375 C 7.929688 14.820313 8.988281 15.542969 10.625 15.84375 C 10.222656 16.066406 9.863281 16.378906 9.59375 16.75 C 9.359375 16.769531 9.113281 16.78125 8.875 16.78125 C 8.179688 16.78125 7.746094 16.160156 7.375 15.625 C 7 15.089844 6.539063 15.03125 6.28125 15 C 6.019531 14.96875 5.929688 15.117188 6.0625 15.21875 C 6.824219 15.804688 7.097656 16.5 7.40625 17.125 C 7.683594 17.6875 8.265625 18 8.90625 18 L 9.03125 18 C 9.011719 18.109375 9 18.210938 9 18.3125 L 9 19.40625 C 6.691406 18.472656 4.933594 16.5 4.28125 14.0625 C 4.691406 13.960938 5.152344 13.855469 5.5 13.8125 C 5.660156 13.792969 5.863281 13.777344 6.09375 13.78125 Z M 18.625 13.90625 C 19.074219 13.917969 19.472656 14.003906 19.71875 14.0625 C 19.167969 16.132813 17.808594 17.855469 16 18.90625 L 16 18.3125 C 16 17.460938 15.328125 16.367188 14.375 15.84375 C 15.957031 15.554688 16.988281 14.863281 17.53125 13.9375 C 17.910156 13.910156 18.355469 13.898438 18.625 13.90625 Z M 12.5 18 C 12.773438 18 13 18.226563 13 18.5 L 13 19.9375 C 12.671875 19.980469 12.339844 20 12 20 L 12 18.5 C 12 18.226563 12.226563 18 12.5 18 Z M 10.5 19 C 10.773438 19 11 19.226563 11 19.5 L 11 19.9375 C 10.664063 19.894531 10.324219 19.832031 10 19.75 L 10 19.5 C 10 19.226563 10.226563 19 10.5 19 Z M 14.5 19 C 14.742188 19 14.953125 19.175781 15 19.40625 C 14.675781 19.539063 14.34375 19.660156 14 19.75 L 14 19.5 C 14 19.226563 14.226563 19 14.5 19 Z"
+    />
+  </svg>
+</template>

package/app/components/atoms/HalfSolidStarIcon.vue

@@ -0,0 +1,5 @@
+<template>
+  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M13.147 4.13091C12.711 3.12791 11.288 3.12791 10.853 4.13091L8.873 8.69691L3.919 9.16891C2.831 9.27191 2.391 10.6259 3.211 11.3499L6.941 14.6439L5.859 19.4999C5.621 20.5679 6.773 21.4039 7.715 20.8479L12 18.3199L16.285 20.8499C17.227 21.4059 18.378 20.5699 18.141 19.5019L17.059 14.6449L20.789 11.3509C21.609 10.6269 21.169 9.27291 20.08 9.16991L15.127 8.69791L13.147 4.13191V4.13091ZM12 15.9969L12.508 16.2969L15.813 18.2469L14.978 14.5019L14.85 13.9259L15.293 13.5359L18.169 10.9959L14.349 10.6319L13.761 10.5759L13.527 10.0339L12 6.51391V15.9969Z" fill="black" />
+  </svg>
+</template>

package/app/components/atoms/SelectArrow.vue

@@ -0,0 +1,5 @@
+<template>
+  <svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M3.75 7.23315L10.4506 13.9342L17.1517 7.23325" stroke="#492E6C" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+  </svg>
+</template>

package/app/components/atoms/SolidStarIcon.vue

@@ -0,0 +1,5 @@
+<template>
+  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M10.853 4.13091C11.288 3.12791 12.712 3.12791 13.147 4.13091L15.127 8.69691L20.081 9.16891C21.169 9.27191 21.609 10.6259 20.789 11.3499L17.059 14.6439L18.141 19.5009C18.379 20.5689 17.227 21.4049 16.285 20.8489L12 18.3199L7.715 20.8499C6.773 21.4059 5.621 20.5699 5.859 19.5019L6.941 14.6449L3.211 11.3509C2.391 10.6269 2.831 9.27291 3.92 9.16991L8.873 8.69791L10.853 4.13191V4.13091Z" fill="black" />
+  </svg>
+</template>

package/app/components/atoms/StarIcon.vue

@@ -0,0 +1,5 @@
+<template>
+  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M10.853 4.13091C11.288 3.12791 12.712 3.12791 13.147 4.13091L15.127 8.69691L20.081 9.16891C21.169 9.27191 21.609 10.6259 20.789 11.3499L17.059 14.6439L18.141 19.5009C18.379 20.5689 17.227 21.4049 16.285 20.8489L12 18.3199L7.715 20.8499C6.773 21.4059 5.621 20.5699 5.859 19.5019L6.941 14.6449L3.211 11.3509C2.391 10.6269 2.831 9.27291 3.92 9.16991L8.873 8.69791L10.853 4.13191V4.13091ZM12 6.51391L10.473 10.0339L10.239 10.5759L9.651 10.6319L5.831 10.9959L8.707 13.5359L9.15 13.9259L9.022 14.5019L8.187 18.2479L11.492 16.2969L12 15.9969L12.508 16.2969L15.813 18.2469L14.978 14.5019L14.85 13.9259L15.293 13.5359L18.169 10.9959L14.349 10.6319L13.761 10.5759L13.527 10.0339L12 6.51391Z" fill="black" />
+  </svg>
+</template>

package/app/components/atoms/TwitterIcon.vue

@@ -0,0 +1,14 @@
+<template>
+  <svg
+    fill="currentColor"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    class="h-6 w-6"
+    width="50px"
+    height="50px"
+  >
+    <path
+      d="M22,3.999c-0.78,0.463-2.345,1.094-3.265,1.276c-0.027,0.007-0.049,0.016-0.075,0.023c-0.813-0.802-1.927-1.299-3.16-1.299 c-2.485,0-4.5,2.015-4.5,4.5c0,0.131-0.011,0.372,0,0.5c-3.353,0-5.905-1.756-7.735-4c-0.199,0.5-0.286,1.29-0.286,2.032 c0,1.401,1.095,2.777,2.8,3.63c-0.314,0.081-0.66,0.139-1.02,0.139c-0.581,0-1.196-0.153-1.759-0.617c0,0.017,0,0.033,0,0.051 c0,1.958,2.078,3.291,3.926,3.662c-0.375,0.221-1.131,0.243-1.5,0.243c-0.26,0-1.18-0.119-1.426-0.165 c0.514,1.605,2.368,2.507,4.135,2.539c-1.382,1.084-2.341,1.486-5.171,1.486H2C3.788,19.145,6.065,20,8.347,20 C15.777,20,20,14.337,20,8.999c0-0.086-0.002-0.266-0.005-0.447C19.995,8.534,20,8.517,20,8.499c0-0.027-0.008-0.053-0.008-0.08 c-0.003-0.136-0.006-0.263-0.009-0.329c0.79-0.57,1.475-1.281,2.017-2.091c-0.725,0.322-1.503,0.538-2.32,0.636 C20.514,6.135,21.699,4.943,22,3.999z"
+    />
+  </svg>
+</template>

package/app/components/atoms/WebIcon.vue

@@ -0,0 +1,12 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    stroke-width="1.5"
+    stroke="currentColor"
+    class="w-6 h-6"
+  >
+    <path stroke-linecap="round" stroke-linejoin="round" d="M12 21a9.004 9.004 0 008.716-6.747M12 21a9.004 9.004 0 01-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 017.843 4.582M12 3a8.997 8.997 0 00-7.843 4.582m15.686 0A11.953 11.953 0 0112 10.5c-2.998 0-5.74-1.1-7.843-2.918m15.686 0A8.959 8.959 0 0121 12c0 .778-.099 1.533-.284 2.253m0 0A17.919 17.919 0 0112 16.5c-3.162 0-6.133-.815-8.716-2.247m0 0A9.015 9.015 0 013 12c0-1.605.42-3.113 1.157-4.418" />
+  </svg>
+</template>

package/app/components/atoms/XIcon.vue

@@ -0,0 +1,5 @@
+<template>
+  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M5.293 5.29308C5.48053 5.10561 5.73484 5.00029 6 5.00029C6.26516 5.00029 6.51947 5.10561 6.707 5.29308L12 10.5861L17.293 5.29308C17.3852 5.19757 17.4956 5.12139 17.6176 5.06898C17.7396 5.01657 17.8708 4.98898 18.0036 4.98783C18.1364 4.98668 18.2681 5.01198 18.391 5.06226C18.5138 5.11254 18.6255 5.18679 18.7194 5.28069C18.8133 5.37458 18.8875 5.48623 18.9378 5.60913C18.9881 5.73202 19.0134 5.8637 19.0123 5.99648C19.0111 6.12926 18.9835 6.26048 18.9311 6.38249C18.8787 6.50449 18.8025 6.61483 18.707 6.70708L13.414 12.0001L18.707 17.2931C18.8892 17.4817 18.99 17.7343 18.9877 17.9965C18.9854 18.2587 18.8802 18.5095 18.6948 18.6949C18.5094 18.8803 18.2586 18.9855 17.9964 18.9878C17.7342 18.99 17.4816 18.8892 17.293 18.7071L12 13.4141L6.707 18.7071C6.5184 18.8892 6.2658 18.99 6.0036 18.9878C5.7414 18.9855 5.49059 18.8803 5.30518 18.6949C5.11977 18.5095 5.0146 18.2587 5.01233 17.9965C5.01005 17.7343 5.11084 17.4817 5.293 17.2931L10.586 12.0001L5.293 6.70708C5.10553 6.51955 5.00021 6.26525 5.00021 6.00008C5.00021 5.73492 5.10553 5.48061 5.293 5.29308Z" fill="black" />
+  </svg>
+</template>

package/app/components/molecules/BaseSelect.vue

@@ -0,0 +1,53 @@
+<script lang="ts" setup>
+const props = defineProps<{
+  value?: string
+  options: Array<{
+    value: string
+    label: string
+  }>
+}>()
+
+defineEmits(['change'])
+
+const options = toRef(props, 'options')
+</script>
+
+<template>
+  <div class="select-group">
+    <select class="pr-5 input" @change="$emit('change', $event)">
+      <option
+        v-for="option in options"
+        :key="option.value"
+        :value="option.value"
+        :selected="option.value === value"
+      >
+        {{ option.label }}
+      </option>
+    </select>
+    <SelectArrow class="mr-4 select-arrow" />
+  </div>
+</template>
+
+<style src="~/assets/css/input.css"></style>
+
+<style scoped>
+.select-group {
+  position: relative;
+  display: inline-block;
+}
+
+.select-group select {
+  -moz-appearance:none; /* Firefox */
+  -webkit-appearance:none; /* Safari and Chrome */
+  appearance:none;
+  padding-right: calc(var(--size-4) + var(--size-2) + 20px);
+}
+
+.select-group .select-arrow {
+  display: inline;
+  position: absolute;
+  right: 0;
+  top: 50%;
+  transform: translate(0%, -50%);
+}
+</style>

package/app/components/molecules/PageNumber.vue

@@ -0,0 +1,54 @@
+<script lang="ts" setup>
+const props = withDefaults(defineProps<{
+  isCurrent: boolean
+  showSeparator?: boolean
+  separator?: 'before' | 'after'
+  hasGapSeparator?: boolean
+}>(), {
+  showSeparator: true,
+  separator: 'after',
+  hasGapSeparator: false
+})
+
+// eslint-disable-next-line func-call-spacing
+defineEmits<{
+ (e: 'page-click'): void
+}>()
+
+const showSeparatorBefore = computed(() => props.showSeparator && props.separator === 'before')
+const showSeparatorAfter = computed(() => props.showSeparator && props.separator === 'after')
+
+const { isCurrent, hasGapSeparator } = toRefs(props)
+</script>
+
+<template>
+  <BaseTitle tag="span">
+    <span
+      v-if="showSeparatorBefore"
+      class="text-ashes-900"
+    > &bull;<span v-if="hasGapSeparator">&bull;&bull;</span>&nbsp;</span>
+    <a
+      href="#"
+      class="link"
+      :class="{ 'active': isCurrent }"
+      @click.prevent="$emit('page-click')"
+    >
+      <slot name="default" />
+    </a>
+    <span
+      v-if="showSeparatorAfter"
+      class="text-ashes-900"
+    > &bull;<span v-if="hasGapSeparator">&bull;&bull;</span> </span>
+  </BaseTitle>
+</template>
+
+<style scoped>
+.link {
+  text-decoration: none;
+  color: var(--ashes-900);
+}
+
+.link.active {
+  color: var(--dodger-blue-500);
+}
+</style>

package/app/components/molecules/RangeSlider.vue

@@ -0,0 +1,37 @@
+<script lang="ts" setup>
+import VueSlider from 'vue-slider-component/dist-css/vue-slider-component.umd.min.js'
+import 'vue-slider-component/dist-css/vue-slider-component.css'
+import 'vue-slider-component/theme/default.css'
+
+const props = defineProps<{
+  modelValue: [number, number]
+  min: number
+  max: number
+}>()
+
+defineEmits<{
+ (e: 'update:model-value', value: [number, number]): void
+}>()
+
+const { modelValue, min, max } = toRefs(props)
+</script>
+
+<template>
+  <VueSlider
+    :model-value="modelValue"
+    :min="min"
+    :max="max"
+    :lazy="true"
+    tooltip="hover"
+    class="body"
+    :tooltip-style="{
+      background: 'var(--ashes-600)',
+      borderColor : 'var(--ashes-600)',
+      color: 'var(--valhalla-500)',
+      padding: 'var(--size-2)'
+    }"
+    :process-style="{ background: 'var(--dodger-blue-500)' }"
+    :tooltip-formatter="(value: number) => `$ ${value}`"
+    @change="$emit('update:model-value', ({ min: $event[0], max: $event[1] }))"
+  />
+</template>

package/app/components/molecules/SearchInput.vue

@@ -0,0 +1,32 @@
+<script lang="ts" setup>
+interface Props {
+  value: string
+  placeholder?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  placeholder: 'Search...',
+  value: ''
+})
+
+defineEmits(['input', 'reset'])
+
+const placeholder = toRef(props, 'placeholder')
+</script>
+
+<template>
+  <form class="search-form">
+    <input
+      type="search"
+      :placeholder="placeholder"
+      :value="value"
+      class="input search-input"
+      @input="$emit('input', $event)"
+    >
+    <button type="reset" class="search-input-reset" @click="$emit('reset')">
+      <XIcon class="x-icon" />
+    </button>
+  </form>
+</template>
+
+<style src="~/assets/css/search.css"></style>