oramasearch · rjborba · Jul 10, 2024 · Jul 10, 2024 · Jul 10, 2024
diff --git a/apps/storybook/.storybook/preview.js b/apps/storybook/.storybook/preview.js
@@ -13,6 +13,19 @@ const preview = {
         color: /(background|color)$/i,
         date: /Date$/i
       }
+    },
+    backgrounds: {
+      default: 'dark',
+      values: [
+        {
+          name: 'dark',
+          value: '#050505'
+        },
+        {
+          name: 'light',
+          value: '#fbfbfb'
+        }
+      ]
     }
   }
 }

diff --git a/apps/storybook/stories/orama-chat.stories.tsx b/apps/storybook/stories/orama-chat.stories.tsx
@@ -1,7 +1,7 @@
 import type { StoryObj, Meta } from '@storybook/web-components'
 
 const meta: Meta = {
-  title: 'Internal/OramaChat',
+  title: 'Demo Preview/OramaChat',
   component: 'orama-chat'
 }
 

diff --git a/apps/storybook/stories/orama-search-results.stories.tsx b/apps/storybook/stories/orama-search-results.stories.tsx
@@ -0,0 +1,18 @@
+import type { StoryObj, Meta } from "@storybook/html";
+
+const meta = {
+  title: "Internal/Search Results",
+  component: "orama-search-results",
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj;
+
+const Template = (args) => `
+  <orama-search-results ${{ ...args }}></orama-search-results>
+`;
+
+export const Default: Story = {
+  render: Template,
+  args: {},
+};
diff --git a/apps/storybook/stories/search-box.stories.tsx b/apps/storybook/stories/search-box.stories.tsx
@@ -11,7 +11,7 @@ type Story = StoryObj
 // More on writing stories with args: https://storybook.js.org/docs/html/writing-stories/args
 export const SearchBox: Story = {
   render: () => `
-  <div style="height: 800px; width: 360px; border: 1px solid white; overflow: hidden;"> 
+  <div style="height: 800px; width: 360px; border: 1px solid white; overflow: hidden; padding: 8px;"> 
     <search-box open="true"></search-box>
   </div>`
 }
@@ -20,7 +20,7 @@ export const SearchBoxWithToggler: Story = {
   render: () => `
   <div>
     <search-box-toggler></search-box-toggler>
-    <div style="height: 800px; width: 360px; border: 1px solid white; overflow: hidden;"> 
+    <div style="height: 800px; width: 360px; overflow: hidden;"> 
       <search-box></search-box>
     </div>
   </div>`

diff --git a/...ges/ui-stencil-angular/projects/component-library/src/lib/stencil-generated/components.ts b/...ges/ui-stencil-angular/projects/component-library/src/lib/stencil-generated/components.ts
@@ -94,14 +94,14 @@ export declare interface OramaChatUserMessage extends Components.OramaChatUserMe
 
 
 @ProxyCmp({
-  inputs: ['defaultValue', 'label', 'labelForScreenReaders', 'name', 'size', 'type']
+  inputs: ['defaultValue', 'label', 'labelForScreenReaders', 'name', 'placeholder', 'size', 'type']
 })
 @Component({
   selector: 'orama-input',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['defaultValue', 'label', 'labelForScreenReaders', 'name', 'size', 'type'],
+  inputs: ['defaultValue', 'label', 'labelForScreenReaders', 'name', 'placeholder', 'size', 'type'],
 })
 export class OramaInput {
   protected el: HTMLElement;
@@ -140,6 +140,28 @@ export class OramaSearch {
 export declare interface OramaSearch extends Components.OramaSearch {}
 
 
+@ProxyCmp({
+  inputs: ['items', 'searchTerm']
+})
+@Component({
+  selector: 'orama-search-results',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: '<ng-content></ng-content>',
+  // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+  inputs: ['items', 'searchTerm'],
+})
+export class OramaSearchResults {
+  protected el: HTMLElement;
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+    c.detach();
+    this.el = r.nativeElement;
+  }
+}
+
+
+export declare interface OramaSearchResults extends Components.OramaSearchResults {}
+
+
 @ProxyCmp({
   inputs: ['as', 'class', 'styledAs']
 })

diff --git a/packages/ui-stencil-angular/projects/component-library/src/lib/stencil-generated/index.ts b/packages/ui-stencil-angular/projects/component-library/src/lib/stencil-generated/index.ts
@@ -8,6 +8,7 @@ export const DIRECTIVES = [
   d.OramaChatUserMessage,
   d.OramaInput,
   d.OramaSearch,
+  d.OramaSearchResults,
   d.OramaText,
   d.OramaTextarea,
   d.SearchBox,

diff --git a/packages/ui-stencil-react/src/components/stencil-generated/index.ts b/packages/ui-stencil-react/src/components/stencil-generated/index.ts
@@ -13,6 +13,7 @@ export const OramaChatMessagesContainer = /*@__PURE__*/createReactComponent<JSX.
 export const OramaChatUserMessage = /*@__PURE__*/createReactComponent<JSX.OramaChatUserMessage, HTMLOramaChatUserMessageElement>('orama-chat-user-message');
 export const OramaInput = /*@__PURE__*/createReactComponent<JSX.OramaInput, HTMLOramaInputElement>('orama-input');
 export const OramaSearch = /*@__PURE__*/createReactComponent<JSX.OramaSearch, HTMLOramaSearchElement>('orama-search');
+export const OramaSearchResults = /*@__PURE__*/createReactComponent<JSX.OramaSearchResults, HTMLOramaSearchResultsElement>('orama-search-results');
 export const OramaText = /*@__PURE__*/createReactComponent<JSX.OramaText, HTMLOramaTextElement>('orama-text');
 export const OramaTextarea = /*@__PURE__*/createReactComponent<JSX.OramaTextarea, HTMLOramaTextareaElement>('orama-textarea');
 export const SearchBox = /*@__PURE__*/createReactComponent<JSX.SearchBox, HTMLSearchBoxElement>('search-box');

diff --git a/packages/ui-stencil-vue/lib/components.ts b/packages/ui-stencil-vue/lib/components.ts
@@ -29,6 +29,7 @@ export const OramaInput = /*@__PURE__*/ defineContainer<JSX.OramaInput>('orama-i
   'size',
   'label',
   'type',
+  'placeholder',
   'labelForScreenReaders',
   'defaultValue',
   'oramaInputChanged'
@@ -38,6 +39,12 @@ export const OramaInput = /*@__PURE__*/ defineContainer<JSX.OramaInput>('orama-i
 export const OramaSearch = /*@__PURE__*/ defineContainer<JSX.OramaSearch>('orama-search', undefined);
 
 
+export const OramaSearchResults = /*@__PURE__*/ defineContainer<JSX.OramaSearchResults>('orama-search-results', undefined, [
+  'items',
+  'searchTerm'
+]);
+
+
 export const OramaText = /*@__PURE__*/ defineContainer<JSX.OramaText>('orama-text', undefined, [
   'as',
   'styledAs',

diff --git a/packages/ui-stencil/src/components.d.ts b/packages/ui-stencil/src/components.d.ts
@@ -7,9 +7,11 @@
 import { HTMLStencilElement, JSXBase } from "@stencil/core/internal";
 import { TChatMessage } from "./context/chatContext";
 import { InputProps } from "./components/internal/orama-input/orama-input";
+import { SearchResultsProps } from "./components/internal/orama-search-results/orama-search-results";
 import { TextProps } from "./components/internal/orama-text/orama-text";
 export { TChatMessage } from "./context/chatContext";
 export { InputProps } from "./components/internal/orama-input/orama-input";
+export { SearchResultsProps } from "./components/internal/orama-search-results/orama-search-results";
 export { TextProps } from "./components/internal/orama-text/orama-text";
 export namespace Components {
     interface OramaChat {
@@ -27,11 +29,16 @@ export namespace Components {
         "label"?: InputProps['label'];
         "labelForScreenReaders"?: InputProps['labelForScreenReaders'];
         "name": InputProps['name'];
+        "placeholder"?: InputProps['placeholder'];
         "size"?: InputProps['size'];
         "type"?: InputProps['type'];
     }
     interface OramaSearch {
     }
+    interface OramaSearchResults {
+        "items": SearchResultsProps['items'];
+        "searchTerm": SearchResultsProps['searchTerm'];
+    }
     interface OramaText {
         /**
           * it defines the HTML tag to be used
@@ -113,6 +120,12 @@ declare global {
         prototype: HTMLOramaSearchElement;
         new (): HTMLOramaSearchElement;
     };
+    interface HTMLOramaSearchResultsElement extends Components.OramaSearchResults, HTMLStencilElement {
+    }
+    var HTMLOramaSearchResultsElement: {
+        prototype: HTMLOramaSearchResultsElement;
+        new (): HTMLOramaSearchResultsElement;
+    };
     interface HTMLOramaTextElement extends Components.OramaText, HTMLStencilElement {
     }
     var HTMLOramaTextElement: {
@@ -144,6 +157,7 @@ declare global {
         "orama-chat-user-message": HTMLOramaChatUserMessageElement;
         "orama-input": HTMLOramaInputElement;
         "orama-search": HTMLOramaSearchElement;
+        "orama-search-results": HTMLOramaSearchResultsElement;
         "orama-text": HTMLOramaTextElement;
         "orama-textarea": HTMLOramaTextareaElement;
         "search-box": HTMLSearchBoxElement;
@@ -167,11 +181,16 @@ declare namespace LocalJSX {
         "labelForScreenReaders"?: InputProps['labelForScreenReaders'];
         "name"?: InputProps['name'];
         "onOramaInputChanged"?: (event: OramaInputCustomEvent<string>) => void;
+        "placeholder"?: InputProps['placeholder'];
         "size"?: InputProps['size'];
         "type"?: InputProps['type'];
     }
     interface OramaSearch {
     }
+    interface OramaSearchResults {
+        "items"?: SearchResultsProps['items'];
+        "searchTerm"?: SearchResultsProps['searchTerm'];
+    }
     interface OramaText {
         /**
           * it defines the HTML tag to be used
@@ -207,6 +226,7 @@ declare namespace LocalJSX {
         "orama-chat-user-message": OramaChatUserMessage;
         "orama-input": OramaInput;
         "orama-search": OramaSearch;
+        "orama-search-results": OramaSearchResults;
         "orama-text": OramaText;
         "orama-textarea": OramaTextarea;
         "search-box": SearchBox;
@@ -223,6 +243,7 @@ declare module "@stencil/core" {
             "orama-chat-user-message": LocalJSX.OramaChatUserMessage & JSXBase.HTMLAttributes<HTMLOramaChatUserMessageElement>;
             "orama-input": LocalJSX.OramaInput & JSXBase.HTMLAttributes<HTMLOramaInputElement>;
             "orama-search": LocalJSX.OramaSearch & JSXBase.HTMLAttributes<HTMLOramaSearchElement>;
+            "orama-search-results": LocalJSX.OramaSearchResults & JSXBase.HTMLAttributes<HTMLOramaSearchResultsElement>;
             "orama-text": LocalJSX.OramaText & JSXBase.HTMLAttributes<HTMLOramaTextElement>;
             "orama-textarea": LocalJSX.OramaTextarea & JSXBase.HTMLAttributes<HTMLOramaTextareaElement>;
             "search-box": LocalJSX.SearchBox & JSXBase.HTMLAttributes<HTMLSearchBoxElement>;

diff --git a/packages/ui-stencil/src/components/internal/orama-input/orama-input.scss b/packages/ui-stencil/src/components/internal/orama-input/orama-input.scss
@@ -92,3 +92,7 @@
     display: inline-flex;
   }
 }
+
+.sr-only {
+  @include screen-reader-only();
+}
diff --git a/packages/ui-stencil/src/components/internal/orama-input/orama-input.tsx b/packages/ui-stencil/src/components/internal/orama-input/orama-input.tsx
@@ -5,9 +5,9 @@ import { AttributeUtils } from '../../../services/AttributeUtils';
 
 type BaseInputProps = {
   name?: string;
-  placeholder?: string;
   size?: 'small' | 'medium' | 'large';
   type?: 'text' | 'password' | 'email' | 'number' | 'tel' | 'url' | 'search';
+  placeholder?: string;
   defaultValue?: string;
 };
 
@@ -34,8 +34,9 @@ export class Input {
   @Prop() size?: InputProps['size'] = 'medium';
   @Prop() label?: InputProps['label'];
   @Prop() type?: InputProps['type'] = 'text';
+  @Prop() placeholder?: InputProps['placeholder'];
   @Prop() labelForScreenReaders?: InputProps['labelForScreenReaders'];
-  @Prop({ mutable: true }) defaultValue: InputProps['defaultValue'];
+  @Prop() defaultValue: InputProps['defaultValue'];
 
   @Event({
     eventName: 'oramaInputChanged',
@@ -67,7 +68,7 @@ export class Input {
     const inputClass = `input input--${this.size}`;
     const labelClass = `label ${this.labelForScreenReaders ? 'sr-only' : ''}`;
 
-    const declaredProps = ['id', 'name', 'type', 'class', 'onInput', 'value', 'label-for-screen-readers', 'default-value'];
+    const declaredProps = ['id', 'name', 'type', 'class', 'onInput', 'value', 'label-for-screen-readers', 'default-value', 'placeholder'];
     const inputProps = AttributeUtils.getNonExplicitAttributes(this.el, declaredProps);
 
     const isSearch = this.type === 'search';
@@ -90,6 +91,7 @@ export class Input {
               type={this.type}
               value={this.value}
               onInput={event => this.handleChange(event)}
+              placeholder={this.placeholder}
               {...inputProps}
             />
             {isSearch && !!this.value && (

diff --git a/packages/ui-stencil/src/components/internal/orama-input/readme.md b/packages/ui-stencil/src/components/internal/orama-input/readme.md
@@ -11,6 +11,7 @@
 | `label`                 | `label`                    |             | `string`                                                                    | `undefined` |
 | `labelForScreenReaders` | `label-for-screen-readers` |             | `string`                                                                    | `undefined` |
 | `name`                  | `name`                     |             | `string`                                                                    | `undefined` |
+| `placeholder`           | `placeholder`              |             | `string`                                                                    | `undefined` |
 | `size`                  | `size`                     |             | `"large" \| "medium" \| "small"`                                            | `'medium'`  |
 | `type`                  | `type`                     |             | `"email" \| "number" \| "password" \| "search" \| "tel" \| "text" \| "url"` | `'text'`    |
 

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
@@ -0,0 +1,30 @@
+.list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.list-item {
+  display: flex;
+  gap: var(--spacing-m, $spacing-m);
+  align-items: center;
+  padding: var(--spacing-m, $spacing-m);
+  border-radius: var(--radius-s, $radius-s);
+  background-color: var(--background-color-secondary, background-color('secondary'));
+  margin-top: var(--spacing-s, $spacing-s);
+}
+
+.collapsed {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  // todo: should be based on available space
+  width: 300px;
+}
+
+.results-empty {
+  text-align: center;
+  width: 80%;
+  max-width: pxToRem(400);
+  margin: $spacing-2xl auto $spacing-3xl;
+}
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
@@ -0,0 +1,48 @@
+import { Component, Host, h, Element, Prop } from '@stencil/core'
+
+export type SearchResultsProps = {
+  items: { id: string; title: string; description: string; path?: string }[]
+  searchTerm?: string
+}
+
+@Component({
+  tag: 'orama-search-results',
+  styleUrl: 'orama-search-results.scss',
+})
+export class SearchResults {
+  @Element() el: HTMLUListElement
+
+  @Prop() items: SearchResultsProps['items'] = []
+  @Prop() searchTerm: SearchResultsProps['searchTerm']
+
+  render() {
+    if (!this.items.length) {
+      return (
+        <div class="results-empty">
+          <orama-text as="h3" styledAs="span">
+            {`No results found ${this.searchTerm ? `for "${this.searchTerm}"` : ''}`}
+          </orama-text>
+        </div>
+      )
+    }
+
+    return (
+      <Host>
+        <ul class="list">
+          {this.items.map((item) => (
+            <li class="list-item" key={item.id}>
+              <div>
+                <orama-text as="h3" styledAs="p">
+                  {item.title}
+                </orama-text>
+                <orama-text as="p" styledAs="span" class="collapsed">
+                  {item.description}
+                </orama-text>
+              </div>
+            </li>
+          ))}
+        </ul>
+      </Host>
+    )
+  }
+}