@meeovi/layer-search 1.0.3

package/app/components/widgets/NoResults.vue

@@ -0,0 +1,125 @@
+<template>
+  <div v-if="state && state.results && state.results.nbHits === 0">
+    <div class="hits-empty-state">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        xmlns:xlink="http://www.w3.org/1999/xlink"
+        width="138"
+        height="138"
+        class="hits-empty-state-image"
+      >
+        <defs>
+          <linearGradient id="c" x1="50%" x2="50%" y1="100%" y2="0%">
+            <stop offset="0%" stop-color="#F5F5FA" />
+            <stop offset="100%" stop-color="#FFF" />
+          </linearGradient>
+          <path
+            id="b"
+            d="M68.71 114.25a45.54 45.54 0 1 1 0-91.08 45.54 45.54 0 0 1 0 91.08z"
+          />
+          <filter
+            id="a"
+            width="140.6%"
+            height="140.6%"
+            x="-20.3%"
+            y="-15.9%"
+            filterUnits="objectBoundingBox"
+          >
+            <feOffset dy="4" in="SourceAlpha" result="shadowOffsetOuter1" />
+            <feGaussianBlur
+              in="shadowOffsetOuter1"
+              result="shadowBlurOuter1"
+              stdDeviation="5.5"
+            />
+            <feColorMatrix
+              in="shadowBlurOuter1"
+              result="shadowMatrixOuter1"
+              values="0 0 0 0 0.145098039 0 0 0 0 0.17254902 0 0 0 0 0.380392157 0 0 0 0.15 0"
+            />
+            <feOffset dy="2" in="SourceAlpha" result="shadowOffsetOuter2" />
+            <feGaussianBlur
+              in="shadowOffsetOuter2"
+              result="shadowBlurOuter2"
+              stdDeviation="1.5"
+            />
+            <feColorMatrix
+              in="shadowBlurOuter2"
+              result="shadowMatrixOuter2"
+              values="0 0 0 0 0.364705882 0 0 0 0 0.392156863 0 0 0 0 0.580392157 0 0 0 0.2 0"
+            />
+            <feMerge>
+              <feMergeNode in="shadowMatrixOuter1" />
+              <feMergeNode in="shadowMatrixOuter2" />
+            </feMerge>
+          </filter>
+        </defs>
+        <g fill="none" fill-rule="evenodd">
+          <circle
+            cx="68.85"
+            cy="68.85"
+            r="68.85"
+            fill="#5468FF"
+            opacity=".07"
+          />
+          <circle
+            cx="68.85"
+            cy="68.85"
+            r="52.95"
+            fill="#5468FF"
+            opacity=".08"
+          />
+          <use fill="#000" filter="url(#a)" xlink:href="#b" />
+          <use fill="url(#c)" xlink:href="#b" />
+          <path
+            d="M76.01 75.44c5-5 5.03-13.06.07-18.01a12.73 12.73 0 0 0-18 .07c-5 4.99-5.03 13.05-.07 18a12.73 12.73 0 0 0 18-.06zm2.5 2.5a16.28 16.28 0 0 1-23.02.09A16.29 16.29 0 0 1 55.57 55a16.28 16.28 0 0 1 23.03-.1 16.28 16.28 0 0 1-.08 23.04zm1.08-1.08l-2.15 2.16 8.6 8.6 2.16-2.15-8.6-8.6z"
+            fill="#5369FF"
+          />
+        </g>
+      </svg>
+
+      <p class="hits-empty-state-title">
+        Sorry, we can&apos;t find any matches to your query!
+      </p>
+      <p class="hits-empty-state-description">
+        {{
+          state.results.getRefinements().length > 0
+            ? 'Try to reset your applied filters.'
+            : 'Please try another query.'
+        }}
+      </p>
+
+      <NuxtLinkis-clear-refinements>
+        <template #resetLabel>
+          <div class="clear-filters">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="11"
+              height="11"
+              viewBox="0 0 11 11"
+            >
+              <g fill="none" fill-rule="evenodd">
+                <path d="M0 0h11v11H0z" />
+                <path
+                  fill="#000"
+                  fill-rule="nonzero"
+                  d="M8.26 2.75a3.896 3.896 0 1 0 1.102 3.262l.007-.056a.49.49 0 0 1 .485-.456c.253 0 .451.206.437.457 0 0 .012-.109-.006.061a4.813 4.813 0 1 1-1.348-3.887v-.987a.458.458 0 1 1 .917.002v2.062a.459.459 0 0 1-.459.459H7.334a.458.458 0 1 1-.002-.917h.928z"
+                />
+              </g>
+            </svg>
+            Clear filters
+          </div>
+        </template>
+      </ais-clear-refinements>
+    </div>
+  </div>
+</template>
+
+<script>
+import { connectHits } from 'instantsearch.js/es/connectors';
+import { createWidgetMixin } from 'vue-instantsearch';
+
+export default {
+  name: 'AppNoResults',
+  mixins: [createWidgetMixin({ connector: connectHits })],
+};
+</script>

package/app/components/widgets/PriceSlider.css

@@ -0,0 +1,58 @@
+.vue-slider {
+  display: flex;
+  justify-content: center;
+  margin-top: 1.5rem;
+}
+
+.vue-slider-rail {
+  background-color: rgba(65, 66, 71, 0.08);
+  border-radius: 3px;
+  cursor: pointer;
+  height: 4px;
+  width: calc(100% - 10px);
+}
+
+.vue-slider-process {
+  background-color: #e2a400;
+  border-radius: 3px;
+}
+
+.vue-slider-dot-tooltip {
+  cursor: grab;
+  display: flex;
+  font-size: 0.75rem;
+  font-weight: bold;
+  margin-top: 5px;
+}
+
+.vue-slider-dot-tooltip::before {
+  color: #e2a400;
+  content: '$';
+  font-size: 0.6;
+  margin-right: 4px;
+}
+
+.vue-slider-dot-tooltip-text .vue-slider-dot-tooltip-inner {
+  cursor: -webkit-grabbing;
+  cursor: -moz-grabbing;
+  text-align: center;
+  white-space: nowrap;
+}
+
+.vue-slider-dot-handle {
+  background-image: linear-gradient(to top, #f5f5fa, #fff);
+  border-radius: 50%;
+  box-shadow: 0 4px 11px 0 rgba(37, 44, 97, 0.15),
+    0 2px 3px 0 rgba(93, 100, 148, 0.2);
+  cursor: -webkit-grabbing;
+  cursor: -moz-grabbing;
+  height: 100%;
+  width: 100%;
+}
+
+@media (max-width: 899px) {
+  .vue-slider-dot {
+    height: 24px !important;
+    width: 24px !important;
+  }
+}

package/app/composables/adapter/meilisearch.ts

@@ -0,0 +1,58 @@
+import {
+  defineAlternateAdapter,
+  type SearchAdapter,
+  type SearchAdapterConfig,
+  type SearchResult
+} from '@meeovi/core'
+
+import type { MeeoviSearchItem } from './types'
+import type { BuiltSearchQuery } from '../core/QueryBuilder'
+
+interface MeiliConfig extends SearchAdapterConfig {
+  host: string
+  apiKey?: string
+  index: string
+}
+
+export function createMeilisearchAdapter(config: MeiliConfig) {
+  const headers: Record<string, string> = {
+    'Content-Type': 'application/json'
+  }
+
+  if (config.apiKey) {
+    headers['Authorization'] = `Bearer ${config.apiKey}`
+  }
+
+  const adapter: SearchAdapter<MeeoviSearchItem> = {
+    id: 'search:meilisearch',
+    type: 'search',
+    config,
+
+    async search(query: BuiltSearchQuery): Promise<SearchResult<MeeoviSearchItem>> {
+      const params = new URLSearchParams({
+        q: query.term,
+        offset: String((query.page - 1) * query.pageSize),
+        limit: String(query.pageSize)
+      })
+
+      const res = await fetch(`${config.host}/indexes/${config.index}/search?${params}`, {
+        method: 'POST',
+        headers,
+        body: JSON.stringify({
+          filter: Object.entries(query.filters).map(([field, value]) => `${field} = ${value}`)
+        })
+      })
+
+      const json = await res.json()
+
+      return {
+        items: json.hits as MeeoviSearchItem[],
+        total: json.estimatedTotalHits ?? json.hits.length,
+        page: query.page,
+        pageSize: query.pageSize
+      }
+    }
+  }
+
+  return defineAlternateAdapter(adapter)
+}

package/app/composables/adapter/mock.ts

@@ -0,0 +1,34 @@
+import {
+  defineAlternateAdapter,
+  type SearchAdapter,
+  type SearchAdapterConfig,
+  type SearchResult
+} from '@meeovi/core'
+
+import type { MeeoviSearchItem } from './types'
+import type { BuiltSearchQuery } from '../core/QueryBuilder'
+
+export function createMockSearchAdapter(items: MeeoviSearchItem[] = []) {
+  const cfg: SearchAdapterConfig = { provider: 'mock' }
+
+  const adapter: SearchAdapter<MeeoviSearchItem> = {
+    id: 'search:mock',
+    type: 'search',
+    config: cfg,
+
+    async search(query: BuiltSearchQuery): Promise<SearchResult<MeeoviSearchItem>> {
+      const filtered = items.filter((item) =>
+        item.title.toLowerCase().includes(query.term.toLowerCase())
+      )
+
+      return {
+        items: filtered,
+        total: filtered.length,
+        page: 1,
+        pageSize: filtered.length
+      }
+    }
+  }
+
+  return defineAlternateAdapter(adapter)
+}

package/app/composables/adapter/opensearch.ts

@@ -0,0 +1,66 @@
+import {
+  defineAlternateAdapter,
+  type SearchAdapter,
+  type SearchAdapterConfig,
+  type SearchResult
+} from '@meeovi/core'
+
+import type { MeeoviSearchItem } from './types'
+import type { BuiltSearchQuery } from '../core/QueryBuilder'
+import { normalizeOpenSearchHit } from '../utils/normalizers'
+
+interface OpenSearchConfig extends SearchAdapterConfig {
+  endpoint: string
+  index: string
+  apiKey?: string
+}
+
+export function createOpenSearchAdapter(config: OpenSearchConfig) {
+  const adapter: SearchAdapter<MeeoviSearchItem> = {
+    id: 'search:opensearch',
+    type: 'search',
+    config,
+
+    async search(query: BuiltSearchQuery): Promise<SearchResult<MeeoviSearchItem>> {
+      const body: any = {
+        query: {
+          bool: {
+            must: [
+              {
+                multi_match: {
+                  query: query.term,
+                  fields: ['title^3', 'description', 'tags']
+                }
+              }
+            ],
+            filter: Object.entries(query.filters).map(([field, value]) => ({
+              term: { [field]: value }
+            }))
+          }
+        },
+        from: (query.page - 1) * query.pageSize,
+        size: query.pageSize
+      }
+
+      const res = await fetch(`${config.endpoint}/${config.index}/_search`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          ...(config.apiKey ? { Authorization: `Bearer ${config.apiKey}` } : {})
+        },
+        body: JSON.stringify(body)
+      })
+
+      const json = await res.json()
+
+      return {
+        items: json.hits.hits.map(normalizeOpenSearchHit),
+        total: json.hits.total.value,
+        page: query.page,
+        pageSize: query.pageSize
+      }
+    }
+  }
+
+  return defineAlternateAdapter(adapter)
+}

package/app/composables/adapter/types.ts

@@ -0,0 +1,14 @@
+import type { SearchAdapter, SearchResult } from '@meeovi/core'
+import type { BuiltSearchQuery } from '../core/QueryBuilder'
+
+export interface MeeoviSearchItem {
+  id: string
+  title: string
+  description?: string
+  price?: number
+  [key: string]: unknown
+}
+
+export type MeeoviSearchAdapter = SearchAdapter<MeeoviSearchItem> & {
+  search(query: BuiltSearchQuery): Promise<SearchResult<MeeoviSearchItem>>
+}

package/app/composables/bridges/instantsearch.ts

@@ -0,0 +1,20 @@
+import type { SearchManager } from '../core/SearchManager'
+
+export function createInstantSearchBridge(manager: SearchManager) {
+  return {
+    searchFunction(helper: any) {
+      manager.context.setQuery(helper.state.query || '')
+      manager.context.setPage(helper.state.page || 1)
+      // map filters if needed from helper.state
+
+      return manager.search().then((result) => {
+        helper.setResults({
+          hits: result.items,
+          nbHits: result.total,
+          page: result.page - 1,
+          hitsPerPage: result.pageSize
+        })
+      })
+    }
+  }
+}

package/app/composables/bridges/react.ts

@@ -0,0 +1,40 @@
+import { useState, useCallback } from 'react'
+import { useAlternateContext } from '@meeovi/core'
+import type { SearchManager } from '../core/SearchManager'
+
+export function useReactSearch() {
+  const ctx = useAlternateContext() as any
+  const manager = ctx.searchManager as SearchManager
+
+  const [query, setQuery] = useState(manager.context.state.query)
+  const [page, setPage] = useState(manager.context.state.page)
+  const [pageSize, setPageSize] = useState(manager.context.state.pageSize)
+  const [results, setResults] = useState<any[]>([])
+  const [total, setTotal] = useState(0)
+  const [loading, setLoading] = useState(false)
+
+  const search = useCallback(async () => {
+    setLoading(true)
+    manager.context.setQuery(query)
+    manager.context.setPage(page)
+    manager.context.setPageSize(pageSize)
+
+    const res = await manager.search()
+    setResults(res.items)
+    setTotal(res.total)
+    setLoading(false)
+  }, [query, page, pageSize, manager])
+
+  return {
+    query,
+    setQuery,
+    page,
+    setPage,
+    pageSize,
+    setPageSize,
+    results,
+    total,
+    loading,
+    search
+  }
+}

package/app/composables/bridges/vue.ts

@@ -0,0 +1,38 @@
+import { ref, computed } from 'vue'
+import { useAlternateContext } from '@meeovi/core'
+import type { SearchManager } from '../core/SearchManager'
+
+export function useSearch() {
+  const ctx = useAlternateContext() as any
+  const manager = ctx.searchManager as SearchManager
+
+  const query = ref(manager.context.state.query)
+  const page = ref(manager.context.state.page)
+  const pageSize = ref(manager.context.state.pageSize)
+
+  const results = ref<any[]>([])
+  const total = ref(0)
+  const loading = ref(false)
+
+  async function run() {
+    loading.value = true
+    manager.context.setQuery(query.value)
+    manager.context.setPage(page.value)
+    manager.context.setPageSize(pageSize.value)
+
+    const res = await manager.search()
+    results.value = res.items
+    total.value = res.total
+    loading.value = false
+  }
+
+  return {
+    query,
+    page,
+    pageSize,
+    results: computed(() => results.value),
+    total: computed(() => total.value),
+    loading: computed(() => loading.value),
+    search: run
+  }
+}

package/app/composables/cli.ts

@@ -0,0 +1,85 @@
+#!/usr/bin/env node
+
+import fs from 'node:fs'
+import path from 'node:path'
+import { fileURLToPath } from 'node:url'
+import { createAlternateApp } from '@meeovi/core'
+import searchModule from './module'
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url))
+
+async function run() {
+  const [,, command, arg] = process.argv
+
+  const defaultProvider = process.env.SEARCH_PROVIDER === 'meilisearch' ? 'meilisearch' : 'opensearch'
+
+  const app = createAlternateApp({
+    config: {
+      env: 'production',
+      search: {
+        defaultProvider,
+        providers: {
+          opensearch: {
+            endpoint: process.env.OPENSEARCH_ENDPOINT,
+            index: process.env.OPENSEARCH_INDEX
+          },
+          meilisearch: {
+            host: process.env.MEILI_HOST,
+            index: process.env.MEILI_INDEX,
+            apiKey: process.env.MEILI_KEY
+          }
+        }
+      }
+    },
+    modules: [searchModule]
+  })
+
+  const ctx = await app.start()
+  const search = ctx.getAdapter('search')
+
+  if (!search) {
+    console.error('No search adapter registered')
+    process.exit(1)
+  }
+
+  if (command === 'warmup') {
+    console.log('Warming up search provider...')
+    await search.search({ term: 'warmup' })
+    console.log('Warmup complete')
+    return
+  }
+
+  if (command === 'index') {
+    if (!arg) {
+      console.error('Missing file path: meeovi-search index <file.json>')
+      process.exit(1)
+    }
+
+    const filePath = path.resolve(process.cwd(), arg)
+    const data = JSON.parse(fs.readFileSync(filePath, 'utf8'))
+
+    console.log(`Indexing ${data.length} items...`)
+
+    if (search.id === 'search:opensearch') {
+      // TODO: implement bulk indexing
+    }
+
+    if (search.id === 'search:meilisearch') {
+      await fetch(`${process.env.MEILI_HOST}/indexes/${process.env.MEILI_INDEX}/documents`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          Authorization: `Bearer ${process.env.MEILI_KEY}`
+        },
+        body: JSON.stringify(data)
+      })
+    }
+
+    console.log('Indexing complete')
+    return
+  }
+
+  console.log(`Unknown command: ${command}`)
+}
+
+run()

package/app/composables/config/schema.ts

@@ -0,0 +1,16 @@
+export interface SearchModuleConfig {
+  defaultProvider: 'opensearch' | 'meilisearch'
+  providers: Record<string, unknown>
+}
+
+export function validateSearchConfig(config: SearchModuleConfig) {
+  if (!config.defaultProvider) {
+    throw new Error('[@meeovi/search] Missing defaultProvider')
+  }
+
+  if (!config.providers[config.defaultProvider]) {
+    throw new Error(
+      `[@meeovi/search] Provider "${config.defaultProvider}" not found in config.providers`
+    )
+  }
+}

package/app/composables/config.ts

@@ -0,0 +1,20 @@
+
+export interface SearchConfig {
+  searchProvider: string
+  searchUrl?: string
+  apiKey?: string
+}
+
+let config: SearchConfig = {
+  searchProvider: 'searchkit',
+  searchUrl: '',
+  apiKey: ''
+}
+
+export function setSearchConfig(newConfig: Partial<SearchConfig>) {
+  config = { ...config, ...newConfig }
+}
+
+export function getSearchConfig(): SearchConfig {
+  return config
+}

package/app/composables/core/Facets.ts

@@ -0,0 +1,9 @@
+export const Facets = {
+  terms(field: string) {
+    return { type: 'terms', field }
+  },
+
+  range(field: string, ranges: { from?: number; to?: number }[]) {
+    return { type: 'range', field, ranges }
+  }
+}

package/app/composables/core/Filters.ts

@@ -0,0 +1,13 @@
+export const Filters = {
+  term(field: string, value: string) {
+    return { type: 'term', field, value }
+  },
+
+  range(field: string, min?: number, max?: number) {
+    return { type: 'range', field, min, max }
+  },
+
+  boolean(field: string, value: boolean) {
+    return { type: 'boolean', field, value }
+  }
+}

package/app/composables/core/Pipeline.ts

@@ -0,0 +1,20 @@
+export class SearchPipeline {
+  private before: ((q: any) => any)[] = []
+  private after: ((r: any) => any)[] = []
+
+  useBefore(fn: (query: any) => any) {
+    this.before.push(fn)
+  }
+
+  useAfter(fn: (result: any) => any) {
+    this.after.push(fn)
+  }
+
+  runBefore(query: any) {
+    return this.before.reduce((q, fn) => fn(q), query)
+  }
+
+  runAfter(result: any) {
+    return this.after.reduce((r, fn) => fn(r), result)
+  }
+}

package/app/composables/core/QueryBuilder.ts

@@ -0,0 +1,27 @@
+import { SearchContext } from './SearchContext'
+
+export interface BuiltSearchQuery {
+  term: string
+  page: number
+  pageSize: number
+  sort?: string
+  filters: Record<string, any>
+}
+
+export class QueryBuilder {
+  private context: SearchContext
+
+  constructor(context: SearchContext) {
+    this.context = context
+  }
+
+  build(): BuiltSearchQuery {
+    return {
+      term: this.context.state.query,
+      page: this.context.state.page,
+      pageSize: this.context.state.pageSize,
+      sort: this.context.state.sort,
+      filters: this.context.state.filters
+    }
+  }
+}