Merge pull request #30 from askorama/feature/orm-1620

Feature/orm-1620
oramasearch · Aug 19, 2024 · 5d114c8 · 5d114c8
2 parents 2184af5 + c686226
commit 5d114c8
Show file tree

Hide file tree

Showing 30 changed files with 745 additions and 358 deletions.
diff --git a/apps/demo-react/src/App.tsx b/apps/demo-react/src/App.tsx
@@ -65,8 +65,8 @@ function App() {
         <section>
           <div className="component-row">
             <OramaSearchBox
-              id="orama-ui-something"
               open={open}
+              colorScheme="dark"
               onSearchboxClosed={() => setOpen(false)}
               index={{
                 api_key: 'LerNlbp6379jVKaPs4wt2nZT4MJZbU1J',

diff --git a/apps/storybook/package.json b/apps/storybook/package.json
@@ -12,6 +12,7 @@
   },
   "dependencies": {
     "@orama/wc-components": "workspace:*",
+    "@oramacloud/client": "1.3.10",
     "@storybook/preview-api": "^8.2.9",
     "@storybook/web-components": "^8.2.3"
   },

diff --git a/apps/storybook/stories/config.ts b/apps/storybook/stories/config.ts
@@ -1,4 +1,5 @@
 import type { Components } from '@orama/wc-components'
+import { OramaClient } from '@oramacloud/client'
 
 export type DemoIndexConfig = Record<string, Components.OramaSearchBox>
 
@@ -9,6 +10,11 @@ const demoIndexes: DemoIndexConfig = {
       api_key: 'LerNlbp6379jVKaPs4wt2nZT4MJZbU1J',
       endpoint: 'https://cloud.orama.run/v1/indexes/docs-orama-b3f5xd',
     },
+    // Uncomment this line to use the OramaClient instance and comment the index prop
+    // clientInstance: new OramaClient({
+    //   api_key: 'LerNlbp6379jVKaPs4wt2nZT4MJZbU1J',
+    //   endpoint: 'https://cloud.orama.run/v1/indexes/docs-orama-b3f5xd',
+    // }),
     placeholder: 'What do you want to learn about Orama?',
     sourceBaseUrl: 'https://docs.orama.com',
     sourcesMap: {

diff --git a/apps/storybook/stories/public/orama-chat-box.stories.tsx b/apps/storybook/stories/public/orama-chat-box.stories.tsx
@@ -67,6 +67,7 @@ const Template = ({ preset }) => {
   return html`
     <orama-chat-box
       .index=${preset?.index}
+      .instance=${preset?.instance}
       placeholder=${preset?.placeholder}
       sourceBaseUrl=${preset?.sourceBaseUrl}
       .sourcesMap=${preset?.sourcesMap}

diff --git a/apps/storybook/stories/public/orama-search-box.stories.tsx b/apps/storybook/stories/public/orama-search-box.stories.tsx
@@ -71,13 +71,13 @@ export default meta
 
 const Template = ({ preset, colorScheme }) => {
   return html`<orama-search-box
-    id='orama-ui-search-box'
     open=${preset?.open}
     .facetProperty=${preset?.facetProperty}
     .resultMap=${preset?.resultMap}
     .colorScheme=${colorScheme}
     .themeConfig=${preset.themeConfig}
     .index=${preset.index}
+    .instance=${preset.instance}
     .suggestions=${preset?.suggestions}
     .sourceBaseUrl=${preset?.sourceBaseUrl}
     .sourcesMap=${preset?.sourcesMap}

diff --git a/apps/storybook/stories/public/orama-search-button.stories.tsx b/apps/storybook/stories/public/orama-search-button.stories.tsx
@@ -26,6 +26,13 @@ const meta: Meta<
         },
       },
     },
+    size: {
+      options: ['small', 'medium', 'large'],
+      table: {
+        defaultValue: { summary: 'medium' },
+      },
+      control: { type: 'radio' },
+    },
     openSearchbox: {
       table: {
         defaultValue: { summary: 'false' },
@@ -44,7 +51,8 @@ type Story = StoryObj<Components.OramaSearchButton>
 const Template = (label: string) => (args) => {
   const [{ openSearchbox }, updateArgs] = useArgs()
 
-  window.addEventListener('searchboxClosed', () => {
+  const searchbox = document.querySelector('orama-search-box')
+  searchbox?.addEventListener('searchboxClosed', () => {
     updateArgs({ openSearchbox: false })
   })
 
@@ -53,8 +61,8 @@ const Template = (label: string) => (args) => {
       <div style="width: 240px">
       <orama-search-button
         label="${args.label}"
-        id="orama-ui-search-button"
         .colorScheme=${args.colorScheme}
+        .size=${args.size}
         .onclick=${() => {
           updateArgs({ openSearchbox: !openSearchbox })
         }}
@@ -63,7 +71,6 @@ const Template = (label: string) => (args) => {
       </orama-search-button>
       </div>
       <orama-search-box
-        id="orama-ui-search-box"
         .open=${openSearchbox}
         .colorScheme=${args.colorScheme}
         .index=${demoIndexes.orama.index}

diff --git a/packages/ui-stencil-vue/lib/components.ts b/packages/ui-stencil-vue/lib/components.ts
@@ -12,6 +12,7 @@ export const OramaButton = /*@__PURE__*/ defineContainer<JSX.OramaButton>('orama
   'as',
   'class',
   'variant',
+  'size',
   'type',
   'disabled',
   'withTooltip'
@@ -36,6 +37,7 @@ export const OramaChatAssistentMessage = /*@__PURE__*/ defineContainer<JSX.Orama
 
 export const OramaChatBox = /*@__PURE__*/ defineContainer<JSX.OramaChatBox>('orama-chat-box', undefined, [
   'index',
+  'clientInstance',
   'sourceBaseUrl',
   'placeholder',
   'sourcesMap',
@@ -134,6 +136,7 @@ export const OramaSearchBox = /*@__PURE__*/ defineContainer<JSX.OramaSearchBox>(
   'themeConfig',
   'colorScheme',
   'index',
+  'clientInstance',
   'open',
   'facetProperty',
   'resultMap',
@@ -147,6 +150,7 @@ export const OramaSearchBox = /*@__PURE__*/ defineContainer<JSX.OramaSearchBox>(
 
 
 export const OramaSearchButton = /*@__PURE__*/ defineContainer<JSX.OramaSearchButton>('orama-search-button', undefined, [
+  'size',
   'themeConfig',
   'colorScheme'
 ]);

diff --git a/packages/ui-stencil/extract-scss-vars.js b/packages/ui-stencil/extract-scss-vars.js
@@ -8,7 +8,14 @@ const scssFilePath = './src/styles/_tempColors.scss'
 function createTempColorsFile() {
   const colorsContent = fs.readFileSync('./src/styles/_colors.scss', 'utf-8')
   const primitiveColors = colorsContent.match(/(\$[a-zA-Z0-9-]+:.*;)/g).join('\n')
-  const primitiveColorsToExport = primitiveColors.replace(/\$/g, '').replace(/;/g, ';').replace(/:/g, ':')
+  const palette = colorsContent.match(/(\$palette:.*;)/g).join('\n')
+  const paletteDark = colorsContent.match(/(\$paletteDark:.*;)/g).join('\n')
+  const primitiveColorsToExport = primitiveColors
+    .replace(palette, '')
+    .replace(paletteDark, '')
+    .replace(/\$/g, '')
+    .replace(/;/g, ';')
+    .replace(/:/g, ':')
 
   const tempColorsContent = `
   @import 'colors';
@@ -33,7 +40,46 @@ function createTempColorsFile() {
 
 // Function to compile SCSS to CSS
 function compileScss(filePath) {
-  const result = sass.renderSync({ file: filePath })
+  const result = sass.compile(filePath, {
+    functions: {
+      'text-color($arg1, $arg2)': (args) => {
+        const colorKey = args[0].assertString('arg1')
+        const palette = args[1].assertMap('arg2')
+        let currentValue = ''
+        for (const [key, value] of palette.contents.entrySeq()) {
+          const currentKey = key.toString()
+          if (currentKey === 'text') {
+            currentValue = value.get(colorKey).toString()
+            return new sass.SassString(currentValue)
+          }
+        }
+      },
+      'background-color($arg1, $arg2)': (args) => {
+        const colorKey = args[0].assertString('arg1')
+        const palette = args[1].assertMap('arg2')
+        let currentValue = ''
+        for (const [key, value] of palette.contents.entrySeq()) {
+          const currentKey = key.toString()
+          if (currentKey === 'background') {
+            currentValue = value.get(colorKey).toString()
+            return new sass.SassString(currentValue)
+          }
+        }
+      },
+      'border-color($arg1, $arg2)': (args) => {
+        const colorKey = args[0].assertString('arg1')
+        const palette = args[1].assertMap('arg2')
+        let currentValue = ''
+        for (const [key, value] of palette.contents.entrySeq()) {
+          const currentKey = key.toString()
+          if (currentKey === 'border') {
+            currentValue = value.get(colorKey).toString()
+            return new sass.SassString(currentValue)
+          }
+        }
+      },
+    },
+  })
   return result.css.toString()
 }
 

diff --git a/packages/ui-stencil/src/components.d.ts b/packages/ui-stencil/src/components.d.ts
@@ -8,24 +8,24 @@ import { HTMLStencilElement, JSXBase } from "@stencil/core/internal";
 import { ButtonProps } from "./components/internal/orama-button/orama-button";
 import { CloudIndexConfig, ColorScheme, ResultMap, SearchResult, SearchResultBySection, SourcesMap } from "./types/index";
 import { TChatInteraction } from "./context/chatContext";
+import { OramaClient } from "@oramacloud/client";
 import { Facet } from "./components/internal/orama-facets/orama-facets";
 import { InputProps } from "./components/internal/orama-input/orama-input";
 import { ModalStatus } from "./components/internal/orama-modal/orama-modal";
 import { TThemeOverrides } from "./config/theme";
 import { AnyOrama, Orama, SearchParams } from "@orama/orama";
-import { OramaClient } from "@oramacloud/client";
 import { TThemeOverrides as TThemeOverrides1 } from "./components.d";
 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 { CloudIndexConfig, ColorScheme, ResultMap, SearchResult, SearchResultBySection, SourcesMap } from "./types/index";
 export { TChatInteraction } from "./context/chatContext";
+export { OramaClient } from "@oramacloud/client";
 export { Facet } from "./components/internal/orama-facets/orama-facets";
 export { InputProps } from "./components/internal/orama-input/orama-input";
 export { ModalStatus } from "./components/internal/orama-modal/orama-modal";
 export { TThemeOverrides } from "./config/theme";
 export { AnyOrama, Orama, SearchParams } from "@orama/orama";
-export { OramaClient } from "@oramacloud/client";
 export { TThemeOverrides as TThemeOverrides1 } from "./components.d";
 export { SearchResultsProps } from "./components/internal/orama-search-results/orama-search-results";
 export { TextProps } from "./components/internal/orama-text/orama-text";
@@ -34,6 +34,7 @@ export namespace Components {
         "as"?: ButtonProps['as'];
         "class"?: string;
         "disabled"?: boolean;
+        "size": 'small' | 'medium' | 'large';
         "type"?: ButtonProps['type'];
         "variant"?: ButtonProps['variant'];
         "withTooltip"?: string;
@@ -51,7 +52,8 @@ export namespace Components {
         "interaction": TChatInteraction;
     }
     interface OramaChatBox {
-        "index": CloudIndexConfig;
+        "clientInstance"?: OramaClient;
+        "index"?: CloudIndexConfig;
         "placeholder"?: string;
         "sourceBaseUrl"?: string;
         "sourcesMap"?: SourcesMap;
@@ -84,7 +86,7 @@ export namespace Components {
     }
     interface OramaFooter {
         "class"?: string;
-        "colorScheme"?: ColorScheme;
+        "colorScheme"?: Omit<ColorScheme, 'system'>;
     }
     interface OramaInput {
         "autoFocus"?: boolean;
@@ -118,9 +120,10 @@ export namespace Components {
         "suggestions"?: string[];
     }
     interface OramaSearchBox {
+        "clientInstance"?: OramaClient;
         "colorScheme"?: ColorScheme;
         "facetProperty"?: string;
-        "index": CloudIndexConfig;
+        "index"?: CloudIndexConfig;
         "open": boolean;
         "placeholder"?: string;
         "resultMap"?: Partial<ResultMap>;
@@ -132,6 +135,7 @@ export namespace Components {
     }
     interface OramaSearchButton {
         "colorScheme"?: ColorScheme;
+        "size": 'small' | 'medium' | 'large';
         "themeConfig"?: Partial<TThemeOverrides>;
     }
     interface OramaSearchResults {
@@ -424,6 +428,7 @@ declare namespace LocalJSX {
         "as"?: ButtonProps['as'];
         "class"?: string;
         "disabled"?: boolean;
+        "size"?: 'small' | 'medium' | 'large';
         "type"?: ButtonProps['type'];
         "variant"?: ButtonProps['variant'];
         "withTooltip"?: string;
@@ -441,6 +446,7 @@ declare namespace LocalJSX {
         "interaction"?: TChatInteraction;
     }
     interface OramaChatBox {
+        "clientInstance"?: OramaClient;
         "index"?: CloudIndexConfig;
         "placeholder"?: string;
         "sourceBaseUrl"?: string;
@@ -474,7 +480,7 @@ declare namespace LocalJSX {
     }
     interface OramaFooter {
         "class"?: string;
-        "colorScheme"?: ColorScheme;
+        "colorScheme"?: Omit<ColorScheme, 'system'>;
     }
     interface OramaInput {
         "autoFocus"?: boolean;
@@ -510,6 +516,7 @@ declare namespace LocalJSX {
         "suggestions"?: string[];
     }
     interface OramaSearchBox {
+        "clientInstance"?: OramaClient;
         "colorScheme"?: ColorScheme;
         "facetProperty"?: string;
         "index"?: CloudIndexConfig;
@@ -527,6 +534,7 @@ declare namespace LocalJSX {
     }
     interface OramaSearchButton {
         "colorScheme"?: ColorScheme;
+        "size"?: 'small' | 'medium' | 'large';
         "themeConfig"?: Partial<TThemeOverrides>;
     }
     interface OramaSearchResults {

diff --git a/packages/ui-stencil/src/components/internal/orama-button/orama-button.scss b/packages/ui-stencil/src/components/internal/orama-button/orama-button.scss
@@ -6,7 +6,6 @@
   align-items: center;
   border-radius: var(--radius-m, $radius-m);
   border: 0;
-  padding: var(--spacing-m, $spacing-m);
   cursor: pointer;
   font-family: var(--font-primary, font('primary'));
   transition: all 0.2s;
@@ -29,6 +28,18 @@
   }
 }
 
+.button--small {
+  padding: var(--spacing-xs, $spacing-xs);
+}
+
+.button--medium {
+  padding: var(--spacing-s, $spacing-s);
+}
+
+.button--large {
+  padding: var(--spacing-m, $spacing-m);
+}
+
 .button__label {
   display: flex;
   align-items: center;

diff --git a/packages/ui-stencil/src/components/internal/orama-button/orama-button.tsx b/packages/ui-stencil/src/components/internal/orama-button/orama-button.tsx
@@ -38,6 +38,7 @@ export class OramaButton {
   @Prop() as?: ButtonProps['as'] = 'button'
   @Prop() class?: string
   @Prop() variant?: ButtonProps['variant'] = 'primary'
+  @Prop() size: 'small' | 'medium' | 'large' = 'medium'
   @Prop() type?: ButtonProps['type']
   @Prop() disabled?: boolean
   @Prop() withTooltip?: string
@@ -47,7 +48,7 @@ export class OramaButton {
     const declaredProps = ['as', 'class', 'variant']
     const buttonProps = getNonExplicitAttributes(this.el, declaredProps)
 
-    const buttonClass = `button button--${this.variant} ${this.class}`
+    const buttonClass = `button button--${this.variant} button--${this.size} ${this.class || ''}`
 
     return (
       <Tag class={buttonClass} {...buttonProps} disabled={this.disabled}>

diff --git a/packages/ui-stencil/src/components/internal/orama-button/readme.md b/packages/ui-stencil/src/components/internal/orama-button/readme.md
@@ -12,6 +12,7 @@
 | `as`          | `as`           |             | `"a" \| "button"`                    | `'button'`  |
 | `class`       | `class`        |             | `string`                             | `undefined` |
 | `disabled`    | `disabled`     |             | `boolean`                            | `undefined` |
+| `size`        | `size`         |             | `"large" \| "medium" \| "small"`     | `'medium'`  |
 | `type`        | `type`         |             | `"button" \| "reset" \| "submit"`    | `undefined` |
 | `variant`     | `variant`      |             | `"icon" \| "primary" \| "secondary"` | `'primary'` |
 | `withTooltip` | `with-tooltip` |             | `string`                             | `undefined` |

diff --git a/...ges/ui-stencil/src/components/internal/orama-chat-suggestions/orama-chat-suggestions.scss b/...ges/ui-stencil/src/components/internal/orama-chat-suggestions/orama-chat-suggestions.scss
@@ -30,7 +30,7 @@
   cursor: pointer;
   border-radius: var(--radius-l, $radius-l);
   border: 1px solid var(--border-color-primary, border-color('primary'));
-  padding: var(--spacing-m, $spacing-m) var(--spacing-m, $spacing-m);
+  padding: var(--spacing-s, $spacing-s);
   display: flex;
   align-items: center;
   column-gap: var(--spacing-s, $spacing-s);
@@ -49,10 +49,6 @@
     outline: none;
     border: 1px solid var(--border-color-accent, border-color('accent'));
   }
-
-  @media (--md-min) {
-    padding: var(--spacing-xs, $spacing-xs) var(--spacing-m, $spacing-m);
-  }
 }
 
 .suggestions-list {

diff --git a/packages/ui-stencil/src/components/internal/orama-chat/readme.md b/packages/ui-stencil/src/components/internal/orama-chat/readme.md
@@ -14,7 +14,7 @@
 | `placeholder`   | `placeholder`     |             | `string`                                                   | `'Ask me anything'` |
 | `showClearChat` | `show-clear-chat` |             | `boolean`                                                  | `true`              |
 | `sourceBaseUrl` | `source-base-url` |             | `string`                                                   | `''`                |
-| `sourcesMap`    | --                |             | `{ title?: string; path?: string; description?: string; }` | `undefined`         |
+| `sourcesMap`    | --                |             | `{ title?: string; description?: string; path?: string; }` | `undefined`         |
 | `suggestions`   | --                |             | `string[]`                                                 | `undefined`         |