chore: format with biome and update palette

packages/ui-stencil-angular/projects/component-library/src/lib/stencil-generated/components.ts

@@ -141,14 +141,14 @@ export declare interface OramaSearch extends Components.OramaSearch {}
 
 
 @ProxyCmp({
-  inputs: ['items']
+  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'],
+  inputs: ['items', 'searchTerm'],
 })
 export class OramaSearchResults {
   protected el: HTMLElement;

packages/ui-stencil-vue/lib/components.ts

@@ -40,7 +40,8 @@ export const OramaSearch = /*@__PURE__*/ defineContainer<JSX.OramaSearch>('orama
 
 
 export const OramaSearchResults = /*@__PURE__*/ defineContainer<JSX.OramaSearchResults>('orama-search-results', undefined, [
-  'items'
+  'items',
+  'searchTerm'
 ]);
 
 

packages/ui-stencil/src/components.d.ts

@@ -37,6 +37,7 @@ export namespace Components {
     }
     interface OramaSearchResults {
         "items": SearchResultsProps['items'];
+        "searchTerm": SearchResultsProps['searchTerm'];
     }
     interface OramaText {
         /**
@@ -188,6 +189,7 @@ declare namespace LocalJSX {
     }
     interface OramaSearchResults {
         "items"?: SearchResultsProps['items'];
+        "searchTerm"?: SearchResultsProps['searchTerm'];
     }
     interface OramaText {
         /**

packages/ui-stencil/src/components/internal/orama-search-results/orama-search-results.scss

@@ -18,5 +18,13 @@
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  direction: rtl;
+  // 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;
 }

packages/ui-stencil/src/components/internal/orama-search-results/orama-search-results.tsx

@@ -1,36 +1,48 @@
-import { Component, Host, h, Element, Prop } from '@stencil/core';
+import { Component, Host, h, Element, Prop } from '@stencil/core'
 
 export type SearchResultsProps = {
-  items: { title: string; description: string , path?: string }[];
-};
+  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;
+  @Element() el: HTMLUListElement
 
-  @Prop() items: SearchResultsProps['items'] = [];
+  @Prop() items: SearchResultsProps['items'] = []
+  @Prop() searchTerm: SearchResultsProps['searchTerm']
 
   render() {
     if (!this.items.length) {
-      return null;
+      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">
+            <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>
+                <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>
-    );
+    )
   }
 }

packages/ui-stencil/src/components/internal/orama-search-results/readme.md

@@ -7,9 +7,10 @@
 
 ## Properties
 
-| Property | Attribute | Description | Type                                                       | Default |
-| -------- | --------- | ----------- | ---------------------------------------------------------- | ------- |
-| `items`  | --        |             | `{ title: string; description: string; path?: string; }[]` | `[]`    |
+| Property     | Attribute     | Description | Type                                                                   | Default     |
+| ------------ | ------------- | ----------- | ---------------------------------------------------------------------- | ----------- |
+| `items`      | --            |             | `{ id: string; title: string; description: string; path?: string; }[]` | `[]`        |
+| `searchTerm` | `search-term` |             | `string`                                                               | `undefined` |
 
 
 ## Dependencies

packages/ui-stencil/src/components/internal/orama-search/orama-search.tsx

@@ -7,9 +7,8 @@ import type { SearchResultsProps } from '../orama-search-results/orama-search-re
 @Component({
   tag: 'orama-search',
   styleUrl: 'orama-search.scss',
-  shadow: true
+  shadow: true,
 })
-
 export class OramaSearch {
   private searchService!: SearchService
 
@@ -21,7 +20,7 @@ export class OramaSearch {
     // TODO: Should not be hardcoded
     const oramaClient = new OramaClient({
       api_key: '6kHcoevr3zkbBmC2hHqlcNQrOgejS4ds',
-      endpoint: 'https://cloud.orama.run/v1/indexes/orama-docs-pgjign'
+      endpoint: 'https://cloud.orama.run/v1/indexes/orama-docs-pgjign',
     })
 
     this.searchService = new SearchService(oramaClient)
@@ -32,14 +31,14 @@ export class OramaSearch {
     this.searchService.search(newValue)
     searchStore.onChange('hits', (hits) => {
       this.searchResults = hits.map((hit) => ({
+        id: hit.document.id,
         title: hit.document.title,
         description: hit.document.content,
-        path: hit.document.path
+        path: hit.document.path,
       }))
     })
   }
 
-
   onSearch(e: Event) {
     this.searchValue = (e.target as HTMLInputElement).value
     searchState.term = this.searchValue
@@ -50,11 +49,11 @@ export class OramaSearch {
       <Host style={{ background: 'black', color: 'white' }}>
         <div>
           <orama-input
-            autoFocus
-            type='search'
+            autofocus
+            type="search"
             onInput={this.onSearch.bind(this)}
-            labelForScreenReaders='Search...'
-            placeholder='Search...'
+            labelForScreenReaders="Search..."
+            placeholder="Search..."
           />
           <orama-search-results items={this.searchResults} />
         </div>

packages/ui-stencil/src/styles/_colors.scss

@@ -10,6 +10,9 @@ $gray700: #2e2e2e;
 $gray800: #212121;
 $gray900: #151515;
 $gray950: #050505;
+$purple100: #f7f6f9;
+$purple200: #eee9f6;
+$purple300: #ae8ff7;
 $purple500: #8152ee;
 $purple700: #432d77;
 
@@ -23,29 +26,31 @@ $purple700: #432d77;
 */
 $palette: (
   text: (
-    primary: $gray950,
-    secondary: $gray900,
-    tertiary: $gray700,
-    inactive: $gray600,
+    primary: $gray900,
+    secondary: $gray600,
+    tertiary: $gray500,
+    inactive: $gray500,
   ),
   background: (
-    primary: $gray950,
-    secondary: $gray900,
-    tertiary: $gray800,
-    fourth: $gray700,
+    primary: $gray50,
+    secondary: white,
+    tertiary: $purple200,
+    fourth: $gray100,
   ),
   border: (
-    primary: $gray700,
-    secondary: $gray900,
-    inactive: $gray400,
+    primary: $gray200,
+    secondary: $gray100,
+    tertiary: $gray900,
+    inactive: $gray900,
     accent: $purple500,
   ),
   icon: (
-    primary: $gray50,
-    secondary: $gray200,
+    primary: $gray950,
+    secondary: $gray700,
     tertiary: $gray600,
     inactive: $gray500,
     accent: $purple500,
+    reverse: white,
   ),
 );
 
@@ -60,19 +65,21 @@ $paletteDark: (
     primary: $gray950,
     secondary: $gray900,
     tertiary: $gray800,
-    fourth: $purple700,
+    fourth: $gray700,
   ),
   border: (
     primary: $gray700,
     secondary: $gray900,
+    tertiary: $gray400,
     inactive: $gray400,
   ),
   icon: (
     primary: $gray50,
     secondary: $gray200,
     tertiary: $gray600,
     inactive: $gray500,
-    accent: $purple500,
+    accent: $purple300,
+    reverse: black,
   ),
 );
 
@@ -88,12 +95,14 @@ $theme-colors-light: (
   '--background-color-fourth': background-color('fourth'),
   '--border-color-primary': border-color('primary'),
   '--border-color-secondary': border-color('secondary'),
+  '--border-color-tertiary': border-color('tertiary'),
   '--border-color-inactive': border-color('inactive'),
   '--icon-color-primary': icon-color('primary'),
   '--icon-color-secondary': icon-color('secondary'),
   '--icon-color-tertiary': icon-color('tertiary'),
   '--icon-color-inactive': icon-color('inactive'),
   '--icon-color-accent': icon-color('accent'),
+  '--icon-color-reverse': icon-color('reverse'),
 );
 
 $theme-colors-dark: (
@@ -107,10 +116,12 @@ $theme-colors-dark: (
   '--background-color-fourth': background-color('fourth', $paletteDark),
   '--border-color-primary': border-color('primary', $paletteDark),
   '--border-color-secondary': border-color('secondary', $paletteDark),
+  '--border-color-tertiary': border-color('tertiary', $paletteDark),
   '--border-color-inactive': border-color('inactive', $paletteDark),
   '--icon-color-primary': icon-color('primary', $paletteDark),
   '--icon-color-secondary': icon-color('secondary', $paletteDark),
   '--icon-color-tertiary': icon-color('tertiary', $paletteDark),
   '--icon-color-inactive': icon-color('inactive', $paletteDark),
   '--icon-color-accent': icon-color('accent', $paletteDark),
+  '--icon-color-reverse': icon-color('reverse', $paletteDark),
 );

packages/ui-stencil/stencil.config.ts

@@ -1,6 +1,6 @@
 import type { Config } from '@stencil/core'
 import { sass } from '@stencil/sass'
-import { postcss } from '@stencil-community/postcss';
+import { postcss } from '@stencil-community/postcss'
 import autoprefixer from 'autoprefixer'
 import cssnano from 'cssnano'
 import postcssPresetEnv from 'postcss-preset-env'
@@ -19,41 +19,38 @@ export const config: Config = {
   outputTargets: [
     {
       type: 'dist',
-      esmLoaderPath: '../loader'
+      esmLoaderPath: '../loader',
     },
     {
-      type: 'dist-custom-elements'
+      type: 'dist-custom-elements',
     },
     {
-      type: 'docs-readme'
+      type: 'docs-readme',
     },
     {
       type: 'www',
-      serviceWorker: null // disable service workers
+      serviceWorker: null, // disable service workers
     },
     reactOutputTarget({
       componentCorePackage,
-      proxiesFile: '../ui-stencil-react/src/components/stencil-generated/index.ts'
+      proxiesFile: '../ui-stencil-react/src/components/stencil-generated/index.ts',
     }),
     angularOutputTarget({
       componentCorePackage,
       directivesProxyFile: '../ui-stencil-angular/projects/component-library/src/lib/stencil-generated/components.ts',
-      directivesArrayFile: '../ui-stencil-angular/projects/component-library/src/lib/stencil-generated/index.ts'
+      directivesArrayFile: '../ui-stencil-angular/projects/component-library/src/lib/stencil-generated/index.ts',
     }),
     vueOutputTarget({
       componentCorePackage,
-      proxiesFile: '../ui-stencil-vue/lib/components.ts'
-    })
+      proxiesFile: '../ui-stencil-vue/lib/components.ts',
+    }),
   ],
   testing: {
-    browserHeadless: 'new'
+    browserHeadless: 'new',
   },
   plugins: [
     sass({
-      injectGlobalPaths:
-      [
-        'src/styles/abstracts.scss'
-      ]
+      injectGlobalPaths: ['src/styles/abstracts.scss'],
     }),
     postcss({
       plugins: [
@@ -62,8 +59,8 @@ export const config: Config = {
         rucksack(),
         cssfunctions({
           functions: {
-            pxToRem: (px: string) => `calc(${px}rem / var(--base-font-size, 16))`
-          }
+            pxToRem: (px: string) => `calc(${px}rem / var(--base-font-size, 16))`,
+          },
         }),
         postcssPresetEnv({
           stage: 3,
@@ -74,9 +71,9 @@ export const config: Config = {
             'custom-properties': true,
             'nested-calc': true,
             'prefers-color-scheme-query': true,
-          }
+          },
         }),
-      ]
-    })
-  ]
+      ],
+    }),
+  ],
 }