Merge pull request #7 from askorama/feature/orm-1453

feat: add toggler
oramasearch · Jul 10, 2024 · 19f955c · 19f955c
2 parents e178a1e + 0d24457
commit 19f955c
Show file tree

Hide file tree

Showing 14 changed files with 206 additions and 49 deletions.
diff --git a/apps/storybook/.storybook/preview.js b/apps/storybook/.storybook/preview.js
@@ -6,28 +6,28 @@ defineCustomElements()
 /** @type { import('@storybook/html').Preview } */
 const preview = {
   // TODO: Theme class should be a variable
-  decorators: [(story) => `<div id="orama-ui" class="theme-dark">${story()}</div>`],
+  decorators: [(story) => `<div id="orama-ui" class="theme-ligth">${story()}</div>`],
   parameters: {
     controls: {
       matchers: {
         color: /(background|color)$/i,
-        date: /Date$/i
-      }
+        date: /Date$/i,
+      },
     },
     backgrounds: {
       default: 'dark',
       values: [
         {
           name: 'dark',
-          value: '#050505'
+          value: '#050505',
         },
         {
           name: 'light',
-          value: '#fbfbfb'
-        }
-      ]
-    }
-  }
+          value: '#fbfbfb',
+        },
+      ],
+    },
+  },
 }
 
 export default preview
diff --git a/apps/storybook/stories/orama-toggler.stories.tsx b/apps/storybook/stories/orama-toggler.stories.tsx
@@ -0,0 +1,14 @@
+import type { StoryObj, Meta } from '@storybook/html'
+
+const meta: Meta = {
+  title: 'Internal/Toggler',
+  component: 'search-box-toggler'
+} satisfies Meta
+
+export default meta
+type Story = StoryObj
+
+// More on writing stories with args: https://storybook.js.org/docs/html/writing-stories/args
+export const OramaToggler: Story = {
+  render: () => '<orama-toggler></orama-toggler>'
+}
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
@@ -4,7 +4,7 @@ import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, Even
 
 import { ProxyCmp, proxyOutputs } from './angular-component-lib/utils';
 
-import { Components } from 'orama-ui';
+import { Components } from 'ui-stencil';
 
 
 @ProxyCmp({
@@ -206,6 +206,27 @@ export class OramaTextarea {
 export declare interface OramaTextarea extends Components.OramaTextarea {}
 
 
+@ProxyCmp({
+})
+@Component({
+  selector: 'orama-toggler',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: '<ng-content></ng-content>',
+  // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+  inputs: [],
+})
+export class OramaToggler {
+  protected el: HTMLElement;
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+    c.detach();
+    this.el = r.nativeElement;
+  }
+}
+
+
+export declare interface OramaToggler extends Components.OramaToggler {}
+
+
 @ProxyCmp({
   inputs: ['color', 'open', 'themeConfig']
 })

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
@@ -11,6 +11,7 @@ export const DIRECTIVES = [
   d.OramaSearchResults,
   d.OramaText,
   d.OramaTextarea,
+  d.OramaToggler,
   d.SearchBox,
   d.SearchBoxToggler
 ];
diff --git a/packages/ui-stencil-react/src/components/stencil-generated/index.ts b/packages/ui-stencil-react/src/components/stencil-generated/index.ts
@@ -3,7 +3,7 @@
 /* auto-generated react proxies */
 import { createReactComponent } from './react-component-lib';
 
-import type { JSX } from 'orama-ui';
+import type { JSX } from 'ui-stencil';
 
 
 
@@ -16,5 +16,6 @@ export const OramaSearch = /*@__PURE__*/createReactComponent<JSX.OramaSearch, HT
 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 OramaToggler = /*@__PURE__*/createReactComponent<JSX.OramaToggler, HTMLOramaTogglerElement>('orama-toggler');
 export const SearchBox = /*@__PURE__*/createReactComponent<JSX.SearchBox, HTMLSearchBoxElement>('search-box');
 export const SearchBoxToggler = /*@__PURE__*/createReactComponent<JSX.SearchBoxToggler, HTMLSearchBoxTogglerElement>('search-box-toggler');
diff --git a/packages/ui-stencil-vue/lib/components.ts b/packages/ui-stencil-vue/lib/components.ts
@@ -3,7 +3,7 @@
 /* auto-generated vue proxies */
 import { defineContainer } from './vue-component-lib/utils';
 
-import type { JSX } from 'orama-ui';
+import type { JSX } from 'ui-stencil';
 
 
 
@@ -61,6 +61,9 @@ export const OramaTextarea = /*@__PURE__*/ defineContainer<JSX.OramaTextarea>('o
 ]);
 
 
+export const OramaToggler = /*@__PURE__*/ defineContainer<JSX.OramaToggler>('orama-toggler', undefined);
+
+
 export const SearchBox = /*@__PURE__*/ defineContainer<JSX.SearchBox>('search-box', undefined, [
   'themeConfig',
   'color',

diff --git a/packages/ui-stencil/src/components.d.ts b/packages/ui-stencil/src/components.d.ts
@@ -60,6 +60,8 @@ export namespace Components {
         "placeholder": string;
         "value": string | null;
     }
+    interface OramaToggler {
+    }
     interface SearchBox {
         "color": 'dark' | 'light' | 'system';
         "open": false;
@@ -138,6 +140,12 @@ declare global {
         prototype: HTMLOramaTextareaElement;
         new (): HTMLOramaTextareaElement;
     };
+    interface HTMLOramaTogglerElement extends Components.OramaToggler, HTMLStencilElement {
+    }
+    var HTMLOramaTogglerElement: {
+        prototype: HTMLOramaTogglerElement;
+        new (): HTMLOramaTogglerElement;
+    };
     interface HTMLSearchBoxElement extends Components.SearchBox, HTMLStencilElement {
     }
     var HTMLSearchBoxElement: {
@@ -160,6 +168,7 @@ declare global {
         "orama-search-results": HTMLOramaSearchResultsElement;
         "orama-text": HTMLOramaTextElement;
         "orama-textarea": HTMLOramaTextareaElement;
+        "orama-toggler": HTMLOramaTogglerElement;
         "search-box": HTMLSearchBoxElement;
         "search-box-toggler": HTMLSearchBoxTogglerElement;
     }
@@ -212,6 +221,8 @@ declare namespace LocalJSX {
         "placeholder"?: string;
         "value"?: string | null;
     }
+    interface OramaToggler {
+    }
     interface SearchBox {
         "color"?: 'dark' | 'light' | 'system';
         "open"?: false;
@@ -229,6 +240,7 @@ declare namespace LocalJSX {
         "orama-search-results": OramaSearchResults;
         "orama-text": OramaText;
         "orama-textarea": OramaTextarea;
+        "orama-toggler": OramaToggler;
         "search-box": SearchBox;
         "search-box-toggler": SearchBoxToggler;
     }
@@ -246,6 +258,7 @@ declare module "@stencil/core" {
             "orama-search-results": LocalJSX.OramaSearchResults & JSXBase.HTMLAttributes<HTMLOramaSearchResultsElement>;
             "orama-text": LocalJSX.OramaText & JSXBase.HTMLAttributes<HTMLOramaTextElement>;
             "orama-textarea": LocalJSX.OramaTextarea & JSXBase.HTMLAttributes<HTMLOramaTextareaElement>;
+            "orama-toggler": LocalJSX.OramaToggler & JSXBase.HTMLAttributes<HTMLOramaTogglerElement>;
             "search-box": LocalJSX.SearchBox & JSXBase.HTMLAttributes<HTMLSearchBoxElement>;
             "search-box-toggler": LocalJSX.SearchBoxToggler & JSXBase.HTMLAttributes<HTMLSearchBoxTogglerElement>;
         }

diff --git a/packages/ui-stencil/src/components/internal/orama-textarea/orama-textarea.tsx b/packages/ui-stencil/src/components/internal/orama-textarea/orama-textarea.tsx
@@ -3,7 +3,7 @@ import { Component, Host, Prop, State, Watch, h, Element } from '@stencil/core'
 @Component({
   tag: 'orama-textarea',
   styleUrl: 'orama-textarea.scss',
-  shadow: true
+  shadow: true,
 })
 export class OramaTextarea {
   @Element() el: HTMLTextAreaElement
@@ -58,7 +58,7 @@ export class OramaTextarea {
     if (computedStyle.width === '0px') {
       return {
         outerHeightStyle: 0,
-        overflowing: false
+        overflowing: false,
       }
     }
 
@@ -128,7 +128,6 @@ export class OramaTextarea {
   }
 
   render() {
-    console.log(this.autoFocus)
     return (
       <Host>
         {/* TODO: We should calculate the adormnent width dinamically and apply the appding to the textarea  */}
@@ -145,7 +144,7 @@ export class OramaTextarea {
           style={{
             height: this.height ? `${this.height}px` : undefined,
             paddingLeft: this.startAdornmentWidth ? `${this.startAdornmentWidth}px` : undefined,
-            paddingRight: this.endAdornmentWidth ? `${this.endAdornmentWidth}px` : undefined
+            paddingRight: this.endAdornmentWidth ? `${this.endAdornmentWidth}px` : undefined,
           }}
           placeholder={this.placeholder}
         />
@@ -170,7 +169,7 @@ export class OramaTextarea {
             paddingTop: '0',
             paddingBottom: '0',
             paddingLeft: this.startAdornmentWidth ? `${this.startAdornmentWidth}px` : undefined,
-            paddingRight: this.endAdornmentWidth ? `${this.endAdornmentWidth}px` : undefined
+            paddingRight: this.endAdornmentWidth ? `${this.endAdornmentWidth}px` : undefined,
           }}
         />
       </Host>

diff --git a/packages/ui-stencil/src/components/orama-toggler/orama-toggler.scss b/packages/ui-stencil/src/components/orama-toggler/orama-toggler.scss
@@ -0,0 +1,62 @@
+:host {
+  display: inline-flex;
+  padding: var(--spacing-2xs, $spacing-2xs);
+  align-items: center;
+
+  border-radius: var(--radius-3xl, $radius-3xl);
+  background: var(---background-color-fourth, background-color('fourth'));
+  overflow: hidden;
+
+  button {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-xs, $spacing-xs);
+    background-color: transparent;
+    border: none;
+    padding: var(--spacing-s, $spacing-s) var(--spacing-m, $spacing-m);
+    color: var(--text-color-primary, text-color('primary'));
+    cursor: pointer;
+    position: relative;
+
+    &.selected {
+      color: var(--text-color-reverse, text-color('reverse'));
+      transition: color 0.3s ease-in-out;
+      z-index: 1;
+
+      &::after {
+        content: '';
+        position: absolute;
+        inset: 0;
+        background-color: var(--background-color-reverse, background-color('reverse'));
+        padding: var(--spacing-s, $spacing-s) var(--spacing-m, $spacing-m);
+        border-radius: var(--radius-3xl, $radius-3xl);
+        z-index: -1;
+        animation: slideToLeft 0.3s ease-in-out;
+      }
+
+      &:first-child::after {
+        animation: slideToRight 0.3s ease-in-out;
+      }
+    }
+  }
+}
+
+// TODO: This is not ideal. If sizes changes, it will make a small  glitch on the animation.
+// I'll leave it like that for now
+@keyframes slideToRight {
+  from {
+    transform: translateX(100%);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+
+@keyframes slideToLeft {
+  from {
+    transform: translateX(-100%);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
diff --git a/packages/ui-stencil/src/components/orama-toggler/orama-toggler.tsx b/packages/ui-stencil/src/components/orama-toggler/orama-toggler.tsx
@@ -0,0 +1,34 @@
+import { Component, Host, h } from '@stencil/core'
+import { globalContext } from '../../context/searchBoxContext'
+import '@phosphor-icons/webcomponents/PhMagnifyingGlass'
+import '@phosphor-icons/webcomponents/PhSparkle'
+
+@Component({
+  tag: 'orama-toggler',
+  styleUrl: 'orama-toggler.scss',
+  shadow: true,
+})
+export class OramaToggler {
+  render() {
+    return (
+      <Host>
+        <button
+          type="button"
+          class={{ selected: globalContext.selectedTab === 'search' }}
+          onClick={() => (globalContext.selectedTab = 'search')}
+        >
+          <span>Search</span>
+          <ph-magnifying-glass size={16} />
+        </button>
+        <button
+          type="button"
+          class={{ selected: globalContext.selectedTab === 'chat' }}
+          onClick={() => (globalContext.selectedTab = 'chat')}
+        >
+          <ph-sparkle size={16} />
+          <span>Ask AI</span>
+        </button>
+      </Host>
+    )
+  }
+}
diff --git a/packages/ui-stencil/src/components/orama-toggler/readme.md b/packages/ui-stencil/src/components/orama-toggler/readme.md
@@ -0,0 +1,23 @@
+# orama-toggler
+
+
+
+<!-- Auto Generated Below -->
+
+
+## Dependencies
+
+### Used by
+
+ - [search-box](../search-box)
+
+### Graph
+```mermaid
+graph TD;
+  search-box --> orama-toggler
+  style orama-toggler fill:#f9f,stroke:#333,stroke-width:4px
+```
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*
diff --git a/packages/ui-stencil/src/components/search-box/readme.md b/packages/ui-stencil/src/components/search-box/readme.md
@@ -16,12 +16,14 @@
 
 ### Depends on
 
+- [orama-toggler](../orama-toggler)
 - [orama-search](../internal/orama-search)
 - [orama-chat](../internal/orama-chat)
 
 ### Graph
 ```mermaid
 graph TD;
+  search-box --> orama-toggler
   search-box --> orama-search
   search-box --> orama-chat
   orama-search --> orama-input