@stoker-platform/web-app 0.5.172 → 0.5.174

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @stoker-platform/web-app
 
+## 0.5.174
+
+### Patch Changes
+
+- feat: add exact match search as default search mode
+    - @stoker-platform/node-client@0.5.71
+    - @stoker-platform/utils@0.5.62
+    - @stoker-platform/web-client@0.5.73
+
+## 0.5.173
+
+### Patch Changes
+
+- feat: add props option to custom record pages
+    - @stoker-platform/node-client@0.5.70
+    - @stoker-platform/utils@0.5.61
+    - @stoker-platform/web-client@0.5.72
+
 ## 0.5.172
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@stoker-platform/web-app",
-    "version": "0.5.172",
+    "version": "0.5.174",
     "type": "module",
     "license": "SEE LICENSE IN LICENSE.md",
     "scripts": {
@@ -51,9 +51,9 @@
         "@radix-ui/react-tooltip": "^1.2.8",
         "@react-google-maps/api": "^2.20.8",
         "@sentry/react": "^10.56.0",
-        "@stoker-platform/node-client": "0.5.69",
-        "@stoker-platform/utils": "0.5.60",
-        "@stoker-platform/web-client": "0.5.71",
+        "@stoker-platform/node-client": "0.5.71",
+        "@stoker-platform/utils": "0.5.62",
+        "@stoker-platform/web-client": "0.5.73",
         "@tanstack/react-table": "^8.21.3",
         "@types/react": "18.3.13",
         "@types/react-dom": "18.3.1",

package/src/List.tsx

@@ -693,6 +693,12 @@ export function List({
             .filter((record): record is StokerRecord => record !== undefined)
     }, [rowSelection, searchList])
 
+    const searchOptions = tryFunction(customization.admin?.searchOptions) || {
+        fuzzy: false,
+        prefix: false,
+    }
+    const exactPhrase = searchOptions.fuzzy === false && searchOptions.prefix === false
+
     const table = useReactTable<StokerRecord>({
         data: searchList,
         columns,
@@ -700,7 +706,7 @@ export function List({
         getCoreRowModel: getCoreRowModel(),
         getPaginationRowModel: getPaginationRowModel(),
         onSortingChange: (sortingUpdater) => {
-            if (isSearchRelevanceOrder) return
+            if (isSearchRelevanceOrder && !exactPhrase) return
             if (typeof sortingUpdater === "function") {
                 const newSorting = sortingUpdater(sorting)
                 const field = getField(fields, newSorting[0].id)
@@ -740,9 +746,9 @@ export function List({
         onRowSelectionChange: setRowSelection,
         pageCount,
         autoResetPageIndex: false,
-        enableSorting: !isSearchRelevanceOrder,
+        enableSorting: !isSearchRelevanceOrder || exactPhrase,
         state: {
-            sorting: isSearchRelevanceOrder ? [] : sorting,
+            sorting: isSearchRelevanceOrder && !exactPhrase ? [] : sorting,
             columnFilters,
             rowSelection,
             pagination: {

package/src/Record.tsx

@@ -311,6 +311,7 @@ export const Record = ({ collection }: { collection: CollectionSchema }) => {
                                                         }),
                                                         hooks: import.meta.glob("./hooks/*.{ts,tsx}", { eager: true }),
                                                         utils: import.meta.glob("./lib/*.{ts,tsx}", { eager: true }),
+                                                        ...page.props,
                                                     })}
                                                 </main>
                                             }

package/src/Tenant.tsx

@@ -591,7 +591,7 @@ function Tenant() {
                                     runViewTransition(() => navigate("/"))
                                 }}
                             >
-                                <img src={logo || defaultLogo} alt="Logo" className="h-8 mr-2" />
+                                <img src={logo || defaultLogo} alt="Logo" className="h-8 mr-2 object-contain" />
                             </button>
                             {links}
                         </nav>

package/src/utils/getFormattedFieldValue.tsx

@@ -163,8 +163,7 @@ export const getFormattedFieldValue = (
                         variant="outline"
                         size="sm"
                         className={cn(
-                            "w-full max-w-[200px] whitespace-normal break-words h-auto p-3 bg-blue-500 dark:bg-blue-500/50 text-primary-foreground dark:text-primary hover:bg-blue-500 dark:hover:bg-blue-500 border-transparent dark:border-input",
-                            !card && "min-w-[100px]",
+                            "w-fit min-w-[100px] md:min-w-[200px] max-w-full whitespace-normal break-words h-auto p-3 bg-transparent dark:bg-blue-500/50 text-blue-500 dark:text-primary dark:hover:bg-blue-500 dark:border-input",
                         )}
                         disabled={
                             !relationCollection ||

package/src/utils/localFullTextSearch.ts

@@ -1,32 +1,83 @@
 import { CollectionSchema, StokerRecord } from "@stoker-platform/types"
+import { getCollectionConfigModule } from "@stoker-platform/web-client"
 import MiniSearch, { Options } from "minisearch"
 
+const flattenToSearchText = (value: unknown): string => {
+    if (value == null) return ""
+    if (typeof value === "string" || typeof value === "number" || typeof value === "boolean") {
+        return String(value)
+    }
+    if (Array.isArray(value)) {
+        return value.map(flattenToSearchText).filter(Boolean).join(" ")
+    }
+    if (typeof value === "object") {
+        return Object.values(value).map(flattenToSearchText).filter(Boolean).join(" ")
+    }
+    return ""
+}
+
+const valueContainsPhrase = (value: unknown, phrase: string): boolean => {
+    if (value == null) return false
+    if (typeof value === "string" || typeof value === "number" || typeof value === "boolean") {
+        return String(value).toLowerCase().includes(phrase)
+    }
+    if (Array.isArray(value)) {
+        return value.some((item) => valueContainsPhrase(item, phrase))
+    }
+    if (typeof value === "object") {
+        return Object.values(value).some((item) => valueContainsPhrase(item, phrase))
+    }
+    return false
+}
+
+const recordMatchesPhrase = (record: StokerRecord, fields: string[], phrase: string) =>
+    // eslint-disable-next-line security/detect-object-injection
+    fields.some((field) => valueContainsPhrase(record[field], phrase))
+
 export const localFullTextSearch = (
     collection: CollectionSchema,
     query: string,
     list: StokerRecord[],
     filter?: (result: StokerRecord) => boolean,
-    tokenize?: boolean,
 ) => {
     const { recordTitleField, fullTextSearch } = collection
-    const miniSearchConfig: Options = {
-        fields: fullTextSearch || [recordTitleField],
-        storeFields: fullTextSearch || [recordTitleField],
-        searchOptions: {
-            ...(collection.searchOptions || {
-                fuzzy: 0.2,
-                prefix: true,
-            }),
-        },
+    const fields = fullTextSearch || [recordTitleField]
+    const customization = getCollectionConfigModule(collection.labels.collection)
+    const searchOptions = customization.admin?.searchOptions || {
+        fuzzy: false,
+        prefix: false,
     }
+
     if (filter) {
         list = list.filter((record) => filter(record))
     }
-    if (tokenize) {
-        miniSearchConfig.tokenize = (string) => [string]
+
+    const phrase = query.trim().toLowerCase()
+    const exactPhrase = searchOptions.fuzzy === false && searchOptions.prefix === false
+
+    if (exactPhrase) {
+        if (!phrase) return []
+        return list
+            .filter((record) => recordMatchesPhrase(record, fields, phrase))
+            .map((record) => ({
+                id: record.id,
+                score: 1,
+                terms: [phrase],
+                queryTerms: [phrase],
+                match: { [phrase]: fields },
+                // eslint-disable-next-line security/detect-object-injection
+                ...Object.fromEntries(fields.map((field) => [field, record[field]])),
+            }))
     }
+
+    const miniSearchConfig: Options = {
+        fields,
+        storeFields: fields,
+        searchOptions,
+        stringifyField: (fieldValue) => flattenToSearchText(fieldValue),
+    }
+
     const miniSearch = new MiniSearch(miniSearchConfig)
     miniSearch.addAll(list)
-    const results = miniSearch.search(query)
-    return results
+    return miniSearch.search(query)
 }