power-compass 0.0.1-alpha.1 → 0.0.1-alpha.3

package/src/menu/useCompassMenu.spec.tsx

@@ -1,173 +0,0 @@
-/* global fetchMock */
-
-import React from "react"
-import { renderHook } from "@testing-library/react-hooks"
-import { expect, describe, beforeEach, it } from "vitest"
-
-import { Compass } from "../components/context"
-
-import { useCompassMenu } from "./useCompassMenu"
-import { type MenuItem } from "./types"
-import { type FlatMenuItem } from "./transformations"
-import { createMenuItem } from "./clientMenu"
-
-const currentUserId = "123"
-
-describe("useCompassMenu", () => {
-  const artItem = {
-    label: "Art",
-    icon: "art",
-    url: "http://example.com/art",
-    gravity: 1,
-  }
-  const testItem = {
-    label: "Test",
-    icon: "test1",
-    gravity: 1,
-    items: [
-      {
-        gravity: 1,
-        label: "Test 2",
-        url: "http://example.com/test2",
-      },
-      {
-        gravity: 1,
-        label: "Test 3",
-        url: "http://example.com/test3",
-        items: [
-          {
-            gravity: 1,
-            label: "Test 4",
-            url: "http://example.com/test4",
-          },
-        ],
-      },
-    ],
-  }
-  const items: MenuItem[] = [artItem, testItem]
-
-  beforeEach(() => {
-    fetchMock.mockIf(
-      `http://example.com/compass/${currentUserId}/menu`,
-      JSON.stringify(items),
-    )
-  })
-
-  it("loads items from the given backends", async () => {
-    const options = {
-      backends: ["http://example.com/compass"],
-      contextId: currentUserId,
-    }
-    const { result, waitForNextUpdate } = renderHook(() =>
-      useCompassMenu(options),
-    )
-
-    await waitForNextUpdate()
-
-    expect(result.current.items).toEqual(items)
-  })
-
-  it("loads items from the given context backends", async () => {
-    const wrapper: React.FC = ({
-      children,
-    }: {
-      children?: React.ReactNode
-    }) => (
-      <Compass.Provider
-        value={{
-          backends: ["http://example.com/compass"],
-          contextId: currentUserId,
-        }}
-      >
-        {children}
-      </Compass.Provider>
-    )
-
-    const { result, waitForNextUpdate } = renderHook(() => useCompassMenu({}), {
-      wrapper,
-    })
-
-    await waitForNextUpdate()
-
-    expect(result.current.items).toEqual(items)
-  })
-
-  it("flattens the items when using the transformation option", async () => {
-    const options = {
-      backends: ["http://example.com/compass"],
-      contextId: currentUserId,
-      flatten: true,
-    }
-    const { result, waitForNextUpdate } = renderHook(() =>
-      useCompassMenu(options),
-    )
-
-    await waitForNextUpdate()
-
-    const flatItems: FlatMenuItem[] = [
-      {
-        label: "Art",
-        icon: "art",
-        url: "http://example.com/art",
-        parent: undefined,
-        gravity: 1,
-      },
-      {
-        label: "Test 2",
-        url: "http://example.com/test2",
-        gravity: 1,
-        parent: { label: "Test", icon: "test1", gravity: 1, parent: undefined },
-      },
-      {
-        label: "Test 4",
-        url: "http://example.com/test4",
-        gravity: 1,
-        parent: {
-          label: "Test 3",
-          url: "http://example.com/test3",
-          gravity: 1,
-          parent: {
-            label: "Test",
-            icon: "test1",
-            gravity: 1,
-            parent: undefined,
-          },
-        },
-      },
-    ]
-
-    expect(result.current.items).toEqual(flatItems)
-  })
-
-  it("sorts client and remote items together by gravity", async () => {
-    const clientFloatingItem = {
-      label: "Client Floating Item",
-      url: "http://example.com/client-floating",
-      gravity: 0,
-    }
-    const clientItem = {
-      label: "Client Item",
-      url: "http://example.com/client",
-      gravity: 1,
-    }
-    createMenuItem(clientItem)
-    createMenuItem(clientFloatingItem)
-
-    const options = {
-      backends: ["http://example.com/compass"],
-      contextId: currentUserId,
-    }
-    const { result, waitForNextUpdate } = renderHook(() =>
-      useCompassMenu(options),
-    )
-
-    await waitForNextUpdate()
-
-    expect(result.current.items).toEqual([
-      clientFloatingItem,
-      artItem,
-      clientItem,
-      testItem,
-    ])
-  })
-})

package/src/menu/useCompassMenu.ts

@@ -1,67 +0,0 @@
-import { useState, useContext, useEffect } from "react"
-
-import { type CompassMenuFilters, fetchMenu } from "./fetchMenu"
-import { type CompassContext, Compass } from "../components/context"
-import {
-  type TransformOptions,
-  type TransformedMenuItem,
-  applyTransformations,
-} from "./transformations"
-import { fetchPlugin } from "./clientMenu"
-
-type UseCompassMenuOptions = Partial<CompassContext> &
-  TransformOptions & {
-    filters?: CompassMenuFilters
-  }
-
-type UseCompassMenu = {
-  items: TransformedMenuItem[]
-  loading: boolean
-}
-
-function sortItems(
-  resolvedItems: TransformedMenuItem[],
-): TransformedMenuItem[] {
-  return resolvedItems.sort(
-    (a, b) =>
-      (a?.gravity || 0) - (b?.gravity || 0) || a.label.localeCompare(b.label),
-  )
-}
-
-export function useCompassMenu({
-  filters = {},
-  backends: backendsOverride,
-  contextId: contextIdOverride,
-  ...options
-}: UseCompassMenuOptions): UseCompassMenu {
-  const [items, setMenuItems] = useState<TransformedMenuItem[]>([])
-  const [loading, setLoading] = useState(false)
-  const context = useContext(Compass)
-  const backends = backendsOverride || context?.backends || []
-  const contextId = contextIdOverride || context?.contextId
-  if (!contextId) {
-    throw new Error("contextId is required")
-  }
-
-  useEffect(() => {
-    setLoading(true)
-    const updatedMenu = [
-      ...backends.map((backend) =>
-        fetchMenu(backend, contextId.toString(), filters),
-      ),
-      fetchPlugin(filters),
-    ]
-    Promise.all(updatedMenu)
-      .then((results) => {
-        const menuItems = results
-          .filter((result) => !result.error)
-          .flatMap((result) => result.items)
-        return applyTransformations(menuItems, options)
-      })
-      .then(sortItems)
-      .then(setMenuItems)
-      .finally(() => setLoading(false))
-  }, [])
-
-  return { items, loading }
-}

package/src/search/engine.ts

@@ -1,109 +0,0 @@
-import chain from "lodash/chain"
-import sortBy from "lodash/sortBy"
-import Fuse from "fuse.js"
-
-import type { ResultEntry, SearchResult, SourceDefinition } from "./types"
-
-const DefaultEntriesPerSource = 10
-const RequiredOptions = {
-  includeScore: true,
-  shouldSort: true,
-}
-const DefaultOptions = {
-  keys: [
-    { name: "label", weight: 0.6 },
-    { name: "category", weight: 0.3 },
-    { name: "tag", weight: 1 },
-  ],
-  matchAllTokens: true,
-  maxPatternLength: 16,
-  minMatchCharLength: 3,
-  threshold: 0.4,
-  tokenize: true,
-}
-
-/**
- * Scores and sorts matches.
- */
-function scoreEntries<T>(
-  query: string,
-  entries: T[],
-  source: SourceDefinition<T>,
-): ResultEntry<T>[] {
-  const fuse = new Fuse(entries, {
-    ...DefaultOptions,
-    ...source.searchOptions,
-    ...RequiredOptions,
-  })
-  return chain(fuse.search(query))
-    .map(({ item, score }: ResultEntry<T>) => ({ item, score, source: source }))
-    .take(source.maxEntries || DefaultEntriesPerSource)
-    .value() as ResultEntry<T>[]
-}
-
-/**
- * Sorts sources by best match's score.
- *
- * @returns {[SearchResult, SearchResult]} sources without `insertSourceAtIndex` and sources with `insertSourceAtIndex`.
- */
-function partitionGroups<T>(
-  data: SearchResult<T>[],
-): [SearchResult<T>[], SearchResult<T>[]] {
-  return chain(data)
-    .sortBy("entries[0].score")
-    .partition(({ source }) => source.insertSourceAtIndex === undefined)
-    .value()
-}
-
-/**
- * Sorts matches by score.
- * Sorts sources by best match's score and move them as per specified by their `insertSourceAtIndex` key.
- *
- * @param {*} sources all sources added to Spotnitro. See `app/javascript/packs/spotnitro.ts`
- * @param {*} data GraphQL data
- * @param {*} search user's input
- * @see source-scores-spec.js
- */
-export function sortSearchResults<T>(
-  results: SearchResult<T>[],
-): SearchResult<T>[] {
-  const [sortedGroups, groupsToInsertAtIndex] = partitionGroups(results)
-
-  return sortBy(groupsToInsertAtIndex, "source.insertSourceAtIndex").reduce(
-    (groups, group) => [
-      ...groups.slice(0, group.source.insertSourceAtIndex),
-      group,
-      ...groups.slice(group.source.insertSourceAtIndex),
-    ],
-    sortedGroups,
-  ) as SearchResult<T>[]
-}
-
-type OnResultCallback = (result: SearchResult<unknown>) => void
-
-export function search(
-  value: string,
-  sources: SourceDefinition<unknown>[],
-  abortController?: AbortController,
-  onResult?: OnResultCallback,
-): Promise<SearchResult<unknown>[]> {
-  const promises = sources.map(
-    (source: SourceDefinition<unknown>): Promise<SearchResult<unknown>> =>
-      source.fetch(value, abortController).then(
-        (entries: unknown[]) => {
-          const result = {
-            source,
-            entries: scoreEntries(value, entries, source),
-          }
-          onResult?.call(null, result)
-          return result
-        },
-        (error) => {
-          console.debug(`Failed to search on source: ${source.label}`, error)
-          return { source, entries: [] as ResultEntry<unknown>[] }
-        },
-      ),
-  )
-
-  return Promise.all(promises)
-}

package/src/search/index.ts

@@ -1 +0,0 @@
-export * from "./useSearch"

package/src/search/sources.ts

@@ -1,232 +0,0 @@
-import get from "lodash/get"
-
-import { fetchMenu } from "../menu/fetchMenu"
-import { type CompassMenuResult } from "../menu/types"
-import { type SourceDefinition } from "./types"
-
-export const sources: SourceDefinition<unknown>[] = []
-
-type SourceDefinitionCreation<T> = Omit<
-  SourceDefinition<T>,
-  "open" | "display"
-> &
-  Partial<Pick<SourceDefinition<T>, "open" | "display">>
-
-export async function createCompassProviderSource(
-  contextId: string | number | undefined,
-  providerName: string,
-  search: string,
-  abortController?: AbortController,
-): Promise<SourceDefinition<unknown> | null> {
-  if (!search || search.length < 3 || !contextId || !providerName) return null
-
-  try {
-    const response = await fetch(
-      `/compass/${contextId}/search/${providerName}?q=${encodeURIComponent(search)}`,
-      { signal: abortController?.signal },
-    )
-
-    if (!response.ok) {
-      console.debug(`Failed to fetch ${providerName} search results:`, response)
-      return null
-    }
-
-    const data = await response.json()
-
-    return {
-      label: data.label || providerName,
-      searchOptions: data.search_options || { threshold: 0.2 },
-      fetch: () => Promise.resolve(data.results || []),
-      display: {
-        label: (item: any) => item.label ?? "",
-        category: (item: any) => item.category ?? "",
-        tag: (item: any) => item.tag ?? "",
-      },
-      open: (item: any) => {
-        if (item.requires_confirmation && item.data) {
-          if (!window.confirm(item.data)) {
-            return null
-          }
-        }
-        return item.url
-      },
-    }
-  } catch (error) {
-    if ((error as Error).name !== "AbortError") {
-      console.debug(`Error creating compass ${providerName} source:`, error)
-    }
-    return null
-  }
-}
-
-export async function getCompassProviders(
-  contextId: string | number,
-  abortController?: AbortController,
-): Promise<string[]> {
-  try {
-    const response = await fetch(`/compass/${contextId}/search/providers`, {
-      signal: abortController?.signal,
-    })
-
-    if (!response.ok) {
-      console.debug("Failed to fetch providers:", response.status)
-      return []
-    }
-
-    const data = await response.json()
-
-    return data.providers?.map((provider: any) => provider.name) || []
-  } catch (error) {
-    if ((error as Error).name !== "AbortError") {
-      console.debug("Error fetching available providers:", error)
-    }
-    return []
-  }
-}
-
-export async function createCompassSources(
-  contextId: string | number | undefined,
-  search: string,
-  abortController?: AbortController,
-): Promise<SourceDefinition<unknown>[]> {
-  if (!search || search.length < 3 || !contextId) return []
-
-  try {
-    const providerNames = await getCompassProviders(contextId, abortController)
-
-    if (!providerNames.length) {
-      console.debug("No providers available")
-      return []
-    }
-
-    console.debug(`Found ${providerNames.length} providers:`, providerNames)
-
-    const promises = providerNames.map((providerName) =>
-      createCompassProviderSource(
-        contextId,
-        providerName,
-        search,
-        abortController,
-      ),
-    )
-
-    const sources = await Promise.all(promises)
-
-    const validSources = sources.filter(
-      (source): source is SourceDefinition<unknown> => source !== null,
-    )
-
-    console.debug(
-      `Successfully created ${validSources.length}/${providerNames.length} sources`,
-    )
-
-    return validSources
-  } catch (error) {
-    if ((error as Error).name !== "AbortError") {
-      console.debug("Error creating compass individual sources:", error)
-    }
-    return []
-  }
-}
-
-export function createMenuSources(
-  backends: string[],
-  contextId: string,
-): SourceDefinition<unknown>[] {
-  if (!backends || !backends.length || !contextId) {
-    return []
-  }
-
-  return backends.map((backend) => {
-    return {
-      fetch: async (_search: string) => {
-        try {
-          const menuResult: CompassMenuResult = await fetchMenu(
-            backend,
-            contextId,
-          )
-          if (menuResult.error) {
-            return []
-          }
-
-          const searchableItems: Array<{
-            label: string
-            url: string
-            category: string
-            icon?: string
-          }> = []
-
-          menuResult.items.forEach((topItem: any) => {
-            const category = topItem.label
-            const icon = topItem.icon
-
-            if (topItem.url) {
-              searchableItems.push({
-                label: topItem.label,
-                url: topItem.url,
-                category: category,
-                icon: icon,
-              })
-            }
-
-            if (topItem.items && Array.isArray(topItem.items)) {
-              topItem.items.forEach((item: any) => {
-                searchableItems.push({
-                  label: item.label,
-                  url: item.url,
-                  category: category,
-                  icon: item.icon || icon,
-                })
-              })
-            }
-          })
-
-          return searchableItems
-        } catch (error) {
-          return []
-        }
-      },
-
-      display: {
-        label: (item: any) => {
-          return item.label
-        },
-        category: (item: any) => {
-          return item.category
-        },
-        tag: () => {
-          return ""
-        },
-      },
-
-      open: ({ url, label }: { url: string; label: string }) => {
-        const fullUrl = new URL(url, document.location.href)
-        fullUrl.searchParams.append("mt", label)
-        return fullUrl.toString()
-      },
-      searchOptions: { threshold: 0.2 },
-      maxEntries: 20,
-      insertSourceAtIndex: 0,
-    } as SourceDefinition<unknown>
-  })
-}
-
-export function createSource<T>(source: SourceDefinitionCreation<T>) {
-  sources.push({
-    open(obj: T) {
-      return get(obj, "url")
-    },
-    display: {
-      label(obj: T) {
-        return get(obj, "label")
-      },
-      category(obj: T) {
-        return get(obj, "category")
-      },
-      tag(obj: T) {
-        return get(obj, "tag")
-      },
-    },
-    ...source,
-  })
-}

package/src/search/types.ts

@@ -1,39 +0,0 @@
-import { type ComponentType } from "react"
-
-export type SourceDefinition<T> = {
-  label?: string
-  tag?: string
-  searchOptions?: Record<string, unknown>
-  newTab?: boolean
-  insertSourceAtIndex?: number
-  maxEntries?: number
-
-  display: ComponentType<ResultEntry<T>> | DisplayProps<T>
-
-  fetch: (arg0: string, options?: RequestInit) => Promise<T[]>
-  open: (arg0: T) => string | Promise<string> | void
-}
-
-export type ResultEntry<T> = {
-  item: T
-  score: number
-  source: SourceDefinition<T>
-}
-
-export type SearchResult<T> = {
-  source: SourceDefinition<T>
-  entries: ResultEntry<T>[]
-}
-
-export interface SearchItem {
-  html?: string
-  label?: string
-  tag?: string
-  url?: string
-}
-
-export type DisplayProps<T> = {
-  label: (arg0: T) => Promise<string> | string
-  category: (arg0: T) => Promise<string> | string
-  tag: (arg0: T) => Promise<string> | string
-}

package/src/search/useSearch.ts

@@ -1,84 +0,0 @@
-import {
-  useCallback,
-  useEffect,
-  useRef,
-  useState,
-  useContext,
-  useMemo,
-} from "react"
-import { sortSearchResults, search } from "./engine"
-import { type SearchResult } from "./types"
-import { Compass } from "../components/context"
-import { createMenuSources, createCompassSources } from "./sources"
-
-type UseSpotnitroReturn = [SearchResult<unknown>[], boolean, boolean]
-
-export function useSearch(value?: string): UseSpotnitroReturn {
-  const [results, setResults] = useState<SearchResult<unknown>[]>([])
-  const [loading, setLoading] = useState(false)
-  const [finished, setFinished] = useState(false)
-  const compassContext = useContext(Compass)
-  const backends = compassContext?.backends
-  const contextId = compassContext?.contextId
-  const abort = useRef<AbortController | undefined>(undefined)
-  const finish = useCallback(() => {
-    setLoading(false)
-    setFinished(true)
-  }, [])
-  const menuSources = useMemo(
-    () =>
-      contextId && backends
-        ? createMenuSources(backends, contextId.toString())
-        : [],
-    [contextId, backends],
-  )
-
-  const updateScoredResults = useCallback((result: SearchResult<unknown>) => {
-    if (result.entries.length > 0) {
-      setResults((results) => {
-        const filteredResults = results.filter(
-          (r) => r.source.label !== result.source.label,
-        )
-        return sortSearchResults([result, ...filteredResults])
-      })
-    }
-  }, [])
-
-  useEffect(() => {
-    const performSearch = async () => {
-      if (!value || value.length < 3) {
-        setResults([])
-        setLoading(false)
-        setFinished(false)
-        return
-      }
-
-      abort.current?.abort()
-      abort.current = new AbortController()
-      setFinished(false)
-      setResults([])
-      setLoading(true)
-
-      try {
-        const allIndividualSources = await createCompassSources(
-          contextId,
-          value,
-          abort.current,
-        )
-        const allSources = [...allIndividualSources, ...menuSources]
-
-        await search(value, allSources, abort.current, updateScoredResults)
-      } catch (error) {
-        if ((error as Error).name !== "AbortError") {
-          console.debug("Search failed:", error)
-        }
-      } finally {
-        finish()
-      }
-    }
-
-    performSearch()
-  }, [value, contextId, backends, menuSources, updateScoredResults, finish])
-
-  return [results, loading, finished]
-}

package/src/tasks/index.ts

@@ -1 +0,0 @@
-export * from "./useNotificationCenter"