diff --git a/packages/ui-stencil-angular/projects/component-library/src/lib/stencil-generated/components.ts b/packages/ui-stencil-angular/projects/component-library/src/lib/stencil-generated/components.ts index 2a54326d..894a73a7 100644 --- a/packages/ui-stencil-angular/projects/component-library/src/lib/stencil-generated/components.ts +++ b/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: '', // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property - inputs: ['items'], + inputs: ['items', 'searchTerm'], }) export class OramaSearchResults { protected el: HTMLElement; diff --git a/packages/ui-stencil-vue/lib/components.ts b/packages/ui-stencil-vue/lib/components.ts index 4edbaaa4..30ccf5ab 100644 --- a/packages/ui-stencil-vue/lib/components.ts +++ b/packages/ui-stencil-vue/lib/components.ts @@ -40,7 +40,8 @@ export const OramaSearch = /*@__PURE__*/ defineContainer('orama export const OramaSearchResults = /*@__PURE__*/ defineContainer('orama-search-results', undefined, [ - 'items' + 'items', + 'searchTerm' ]); diff --git a/packages/ui-stencil/src/components.d.ts b/packages/ui-stencil/src/components.d.ts index f1887480..7df50743 100644 --- a/packages/ui-stencil/src/components.d.ts +++ b/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 { /** 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 index 3f261f56..888d172b 100644 --- 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 @@ -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; } 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 index cb9b14f6..528da0b2 100644 --- 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,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 ( +
+ + {`No results found ${this.searchTerm ? `for "${this.searchTerm}"` : ''}`} + +
+ ) } return (
    {this.items.map((item) => ( -
  • +
  • - {item.title} - + + {item.title} + +
    • ))}
- ); + ) } } 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 index 8827169e..ab8e5f60 100644 --- a/packages/ui-stencil/src/components/internal/orama-search-results/readme.md +++ b/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 diff --git a/packages/ui-stencil/src/components/internal/orama-search/orama-search.tsx b/packages/ui-stencil/src/components/internal/orama-search/orama-search.tsx index 5c41e923..a9f1f1af 100644 --- a/packages/ui-stencil/src/components/internal/orama-search/orama-search.tsx +++ b/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 {
diff --git a/packages/ui-stencil/src/styles/_colors.scss b/packages/ui-stencil/src/styles/_colors.scss index c6c60d0e..6b424faf 100644 --- a/packages/ui-stencil/src/styles/_colors.scss +++ b/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,11 +65,12 @@ $paletteDark: ( primary: $gray950, secondary: $gray900, tertiary: $gray800, - fourth: $purple700, + fourth: $gray700, ), border: ( primary: $gray700, secondary: $gray900, + tertiary: $gray400, inactive: $gray400, ), icon: ( @@ -72,7 +78,8 @@ $paletteDark: ( 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), ); diff --git a/packages/ui-stencil/stencil.config.ts b/packages/ui-stencil/stencil.config.ts index 47e2b674..b43d824b 100644 --- a/packages/ui-stencil/stencil.config.ts +++ b/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, - } + }, }), - ] - }) - ] + ], + }), + ], }