feat: sections / better facets

Refactore faces apporach Moved some global states to component scope Fix modal overlay Added close modal button Added modal background Fix search results overflow Better Facets scroll Added important TODOs
oramasearch · Jul 15, 2024 · 328b8ba · 328b8ba
1 parent cf91905
commit 328b8ba
Show file tree

Hide file tree

Showing 24 changed files with 13,112 additions and 11,016 deletions.
diff --git a/apps/storybook/stories/search-box.stories.tsx b/apps/storybook/stories/search-box.stories.tsx
@@ -16,25 +16,18 @@ type Story = StoryObj
 
 // More on writing stories with args: https://storybook.js.org/docs/html/writing-stories/args
 const Template = (args) => {
+  // TODO: We need to find a away to pass complex objects here so we can manipulate the args with the storybook controls
   return `
-    <search-box open="true" facet-property=${args.facetProperty}></search-box>
-  `
+  <div>
+    <search-box-toggler></search-box-toggler>
+    <search-box facet-property="${args.facetProperty}" open="${args.open}"></search-box>
+  </div>`
 }
 
 export const SearchBox: Story = {
   render: Template,
   args: {
-    class: 'my-optional-class',
     facetProperty: 'category',
+    open: true,
   },
 }
-
-export const SearchBoxWithToggler: Story = {
-  render: () => `
-  <div>
-    <search-box-toggler></search-box-toggler>
-    <div style="height: 800px; width: 360px; overflow: hidden;"> 
-      <search-box></search-box>
-    </div>
-  </div>`,
-}
diff --git a/packages/ui-stencil-vue/lib/components.ts b/packages/ui-stencil-vue/lib/components.ts
@@ -33,7 +33,9 @@ export const OramaChatUserMessage = /*@__PURE__*/ defineContainer<JSX.OramaChatU
 
 
 export const OramaFacets = /*@__PURE__*/ defineContainer<JSX.OramaFacets>('orama-facets', undefined, [
-  'facets'
+  'facets',
+  'facetClick',
+  'selectedFacet'
 ]);
 
 
@@ -53,7 +55,7 @@ export const OramaSearch = /*@__PURE__*/ defineContainer<JSX.OramaSearch>('orama
 
 
 export const OramaSearchResults = /*@__PURE__*/ defineContainer<JSX.OramaSearchResults>('orama-search-results', undefined, [
-  'items',
+  'sections',
   'searchTerm',
   'oramaItemClick'
 ]);
@@ -85,7 +87,8 @@ export const SearchBox = /*@__PURE__*/ defineContainer<JSX.SearchBox>('search-bo
   'themeConfig',
   'color',
   'facetProperty',
-  'open'
+  'open',
+  'resultMap'
 ]);
 
 

diff --git a/packages/ui-stencil/src/components.d.ts b/packages/ui-stencil/src/components.d.ts
@@ -7,13 +7,17 @@
 import { HTMLStencilElement, JSXBase } from "@stencil/core/internal";
 import { ButtonProps } from "./components/internal/orama-button/orama-button";
 import { TChatMessage } from "./context/chatContext";
+import { Facet } from "./components/internal/orama-facets/orama-facets";
 import { InputProps } from "./components/internal/orama-input/orama-input";
-import { SearchItem, SearchResultsProps } from "./components/internal/orama-search-results/orama-search-results";
+import { ResultMap, SearchResult, SearchResultBySection } from "./types/index";
+import { SearchResultsProps } from "./components/internal/orama-search-results/orama-search-results";
 import { TextProps } from "./components/internal/orama-text/orama-text";
 export { ButtonProps } from "./components/internal/orama-button/orama-button";
 export { TChatMessage } from "./context/chatContext";
+export { Facet } from "./components/internal/orama-facets/orama-facets";
 export { InputProps } from "./components/internal/orama-input/orama-input";
-export { SearchItem, SearchResultsProps } from "./components/internal/orama-search-results/orama-search-results";
+export { ResultMap, SearchResult, SearchResultBySection } from "./types/index";
+export { SearchResultsProps } from "./components/internal/orama-search-results/orama-search-results";
 export { TextProps } from "./components/internal/orama-text/orama-text";
 export namespace Components {
     interface OramaButton {
@@ -33,7 +37,9 @@ export namespace Components {
         "message": TChatMessage;
     }
     interface OramaFacets {
-        "facets": any[];
+        "facetClick": (facetName: string) => void;
+        "facets": Facet[];
+        "selectedFacet": string;
     }
     interface OramaInput {
         "defaultValue": InputProps['defaultValue'];
@@ -47,8 +53,8 @@ export namespace Components {
     interface OramaSearch {
     }
     interface OramaSearchResults {
-        "items": SearchResultsProps['items'];
         "searchTerm": SearchResultsProps['searchTerm'];
+        "sections": SearchResultBySection[];
     }
     interface OramaText {
         /**
@@ -81,7 +87,8 @@ export namespace Components {
     interface SearchBox {
         "color": 'dark' | 'light' | 'system';
         "facetProperty": string;
-        "open": false;
+        "open": boolean;
+        "resultMap": Partial<ResultMap>;
         "themeConfig": { colors: { light: { primaryColor: string }; dark: { primaryColor: string } } };
     }
     interface SearchBoxToggler {
@@ -156,7 +163,7 @@ declare global {
         new (): HTMLOramaSearchElement;
     };
     interface HTMLOramaSearchResultsElementEventMap {
-        "oramaItemClick": SearchItem;
+        "oramaItemClick": SearchResult;
     }
     interface HTMLOramaSearchResultsElement extends Components.OramaSearchResults, HTMLStencilElement {
         addEventListener<K extends keyof HTMLOramaSearchResultsElementEventMap>(type: K, listener: (this: HTMLOramaSearchResultsElement, ev: OramaSearchResultsCustomEvent<HTMLOramaSearchResultsElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -237,7 +244,9 @@ declare namespace LocalJSX {
         "message"?: TChatMessage;
     }
     interface OramaFacets {
-        "facets"?: any[];
+        "facetClick"?: (facetName: string) => void;
+        "facets"?: Facet[];
+        "selectedFacet"?: string;
     }
     interface OramaInput {
         "defaultValue"?: InputProps['defaultValue'];
@@ -252,9 +261,9 @@ declare namespace LocalJSX {
     interface OramaSearch {
     }
     interface OramaSearchResults {
-        "items"?: SearchResultsProps['items'];
-        "onOramaItemClick"?: (event: OramaSearchResultsCustomEvent<SearchItem>) => void;
+        "onOramaItemClick"?: (event: OramaSearchResultsCustomEvent<SearchResult>) => void;
         "searchTerm"?: SearchResultsProps['searchTerm'];
+        "sections"?: SearchResultBySection[];
     }
     interface OramaText {
         /**
@@ -287,7 +296,8 @@ declare namespace LocalJSX {
     interface SearchBox {
         "color"?: 'dark' | 'light' | 'system';
         "facetProperty"?: string;
-        "open"?: false;
+        "open"?: boolean;
+        "resultMap"?: Partial<ResultMap>;
         "themeConfig"?: { colors: { light: { primaryColor: string }; dark: { primaryColor: string } } };
     }
     interface SearchBoxToggler {

diff --git a/...ma-chat-messages-container/orama-chat-assistent-message/orama-chat-assistent-message.scss b/...ma-chat-messages-container/orama-chat-assistent-message/orama-chat-assistent-message.scss
@@ -23,6 +23,10 @@ orama-chat-assistent-message {
 
 .sources-wrapper {
   display: flex;
+
+  // TODO: Remove None display when the time comes
+  display: none;
+
   margin-top: var(--spacing-s, $spacing-s);
   padding: 0 var(--spacing-l, $spacing-l);
   gap: var(--spacing-s, $spacing-s);

diff --git a/packages/ui-stencil/src/components/internal/orama-facets/orama-facets.scss b/packages/ui-stencil/src/components/internal/orama-facets/orama-facets.scss
@@ -2,11 +2,27 @@
   display: flex;
   align-items: center;
   column-gap: var(--spacing-s, $spacing-s);
-  margin: var(--spacing-l, $spacing-l) 0;
+
   list-style: none;
-  padding: 0;
-  // todo: check scroll styles
-  overflow: scroll;
+  padding: var(--radius-l, $spacing-l);
+
+  margin: 0;
+
+  // TODO: check scroll styles
+  // Maybe move somewhere else to reuse in some somponents, but not globally
+  &::-webkit-scrollbar {
+    height: 0.3em;
+  }
+  &::-webkit-scrollbar-track {
+    background: transparent;
+  }
+  &::-webkit-scrollbar-thumb {
+    // TODO: Should it be a variable?
+    background-color: #b2b2b285;
+    border-radius: var(--border-radius-l, $radius-l);
+  }
+
+  overflow-x: auto;
 }
 
 .facet-button {

diff --git a/packages/ui-stencil/src/components/internal/orama-facets/orama-facets.tsx b/packages/ui-stencil/src/components/internal/orama-facets/orama-facets.tsx
@@ -1,5 +1,7 @@
-import { Component, h, Prop, State } from '@stencil/core'
-import { searchState } from '@/context/searchContext'
+import { Component, h, Prop } from '@stencil/core'
+
+// TODO: fix type
+export type Facet = { name: string; count: number }
 
 @Component({
   tag: 'orama-facets',
@@ -10,13 +12,12 @@ import { searchState } from '@/context/searchContext'
  * The orama-facets component renders a list of facets
  */
 export class OramaFacets {
-  @Prop() facets: any[] // TODO: fix type
-
-  @State() selected: string
+  @Prop() facets: Facet[]
+  @Prop() facetClick: (facetName: string) => void
+  @Prop() selectedFacet: string
 
-  handleClick(facet: { name: string; count: number }) {
-    this.selected = facet.name
-    searchState.currentFacet = facet
+  handleClick(facet: Facet) {
+    this.facetClick(facet.name)
   }
 
   render() {
@@ -31,12 +32,13 @@ export class OramaFacets {
             return
           }
           return (
-            <li key={facet} class="facet">
+            <li key={facet.name} class="facet">
               <button
                 type="button"
                 class={{
                   'facet-button': true,
-                  'facet-button--selected': this.selected === facet?.name || (!this.selected && facet?.name === 'All'),
+                  'facet-button--selected':
+                    this.selectedFacet === facet?.name || (!this.selectedFacet && facet?.name === 'All'),
                 }}
                 onClick={() => this.handleClick(facet)}
               >

diff --git a/packages/ui-stencil/src/components/internal/orama-facets/readme.md b/packages/ui-stencil/src/components/internal/orama-facets/readme.md
@@ -7,9 +7,11 @@
 
 ## Properties
 
-| Property | Attribute | Description | Type    | Default     |
-| -------- | --------- | ----------- | ------- | ----------- |
-| `facets` | --        |             | `any[]` | `undefined` |
+| Property        | Attribute        | Description | Type                          | Default     |
+| --------------- | ---------------- | ----------- | ----------------------------- | ----------- |
+| `facetClick`    | --               |             | `(facetName: string) => void` | `undefined` |
+| `facets`        | --               |             | `Facet[]`                     | `undefined` |
+| `selectedFacet` | `selected-facet` |             | `string`                      | `undefined` |
 
 
 ## Dependencies

diff --git a/packages/ui-stencil/src/components/internal/orama-search-results/orama-search-results.scss b/packages/ui-stencil/src/components/internal/orama-search-results/orama-search-results.scss
@@ -4,6 +4,11 @@
   margin: 0;
 }
 
+.section-title-wrapper {
+  text-transform: capitalize;
+  padding: var(--spacing-l, $spacing-l) var(--spacing-m, $spacing-m);
+}
+
 .list-item {
   margin-top: var(--spacing-s, $spacing-s);
   cursor: pointer;

diff --git a/packages/ui-stencil/src/components/internal/orama-search-results/orama-search-results.tsx b/packages/ui-stencil/src/components/internal/orama-search-results/orama-search-results.tsx
@@ -1,15 +1,8 @@
-import { Component, Host, h, Element, Prop, Event } from '@stencil/core'
-import type { EventEmitter } from '@stencil/core'
-
-export type SearchItem = {
-  id: string
-  title: string
-  description: string
-  path?: string
-}
+import { Component, Host, h, Element, Prop, Event, type EventEmitter } from '@stencil/core'
+import type { SearchResult, SearchResultBySection } from '@/types'
 
 export type SearchResultsProps = {
-  items: SearchItem[] | null
+  sections: SearchResultBySection[]
   searchTerm?: string
 }
 
@@ -20,12 +13,12 @@ export type SearchResultsProps = {
 export class SearchResults {
   @Element() el: HTMLUListElement
 
-  @Event() oramaItemClick: EventEmitter<SearchItem>
+  @Event() oramaItemClick: EventEmitter<SearchResult>
 
-  @Prop() items: SearchResultsProps['items']
+  @Prop() sections: SearchResultBySection[] = []
   @Prop() searchTerm: SearchResultsProps['searchTerm']
 
-  handleItemClick = (item: SearchItem) => {
+  handleItemClick = (item: SearchResult) => {
     if (item?.path) {
       this.oramaItemClick.emit(item)
       window.location.href = item.path
@@ -35,7 +28,7 @@ export class SearchResults {
   }
 
   render() {
-    if (!this.items?.length) {
+    if (!this.sections.length) {
       return (
         <div class="results-empty">
           <orama-text as="h3" styledAs="span">
@@ -48,19 +41,32 @@ export class SearchResults {
     return (
       <Host>
         <ul class="list">
-          {this.items.map((item) => (
-            <li class="list-item" key={item.id}>
-              <button type="button" class="list-item-button" onClick={() => this.handleItemClick(item)}>
-                <div>
-                  <orama-text as="h3" styledAs="p">
-                    {item.title}
-                  </orama-text>
-                  <orama-text as="p" styledAs="span" class="collapsed">
-                    {item.description}
+          {this.sections.map((section) => (
+            <div key={section.section}>
+              {section.section && (
+                <div class="section-title-wrapper">
+                  <orama-text as="h2" styledAs="span">
+                    {section.section}
                   </orama-text>
                 </div>
-              </button>
-            </li>
+              )}
+              <ul class="list">
+                {section.items.map((result) => (
+                  <li class="list-item" key={result.id}>
+                    <button type="button" class="list-item-button" onClick={() => this.handleItemClick(result)}>
+                      <div>
+                        <orama-text as="h3" styledAs="p">
+                          {result.title}
+                        </orama-text>
+                        <orama-text as="p" styledAs="span" class="collapsed">
+                          {result.description}
+                        </orama-text>
+                      </div>
+                    </button>
+                  </li>
+                ))}
+              </ul>
+            </div>
           ))}
         </ul>
       </Host>

diff --git a/packages/ui-stencil/src/components/internal/orama-search-results/readme.md b/packages/ui-stencil/src/components/internal/orama-search-results/readme.md
@@ -1,23 +1,21 @@
 # orama-search-results
 
-
-
 <!-- Auto Generated Below -->
 
 
 ## Properties
 
-| Property     | Attribute     | Description | Type           | Default     |
-| ------------ | ------------- | ----------- | -------------- | ----------- |
-| `items`      | --            |             | `SearchItem[]` | `undefined` |
-| `searchTerm` | `search-term` |             | `string`       | `undefined` |
+| Property     | Attribute     | Description | Type                      | Default     |
+| ------------ | ------------- | ----------- | ------------------------- | ----------- |
+| `searchTerm` | `search-term` |             | `string`                  | `undefined` |
+| `sections`   | --            |             | `SearchResultBySection[]` | `[]`        |
 
 
 ## Events
 
-| Event            | Description | Type                                                                              |
-| ---------------- | ----------- | --------------------------------------------------------------------------------- |
-| `oramaItemClick` |             | `CustomEvent<{ id: string; title: string; description: string; path?: string; }>` |
+| Event            | Description | Type                                                                             |
+| ---------------- | ----------- | -------------------------------------------------------------------------------- |
+| `oramaItemClick` |             | `CustomEvent<{ id: string; title: string; description: string; path: string; }>` |
 
 
 ## Dependencies