feat: add pages mockup

apps/storybook/.storybook/preview.js

@@ -5,7 +5,6 @@ defineCustomElements()
 
 /** @type { import('@storybook/html').Preview } */
 const preview = {
-  tags: ['autodocs'],
   // TODO: Theme class should be a variable
   decorators: [(story) => `<div id="orama-ui" class="theme-dark">${story()}</div>`],
   parameters: {

apps/storybook/stories/orama-chat.stories.tsx

@@ -9,11 +9,16 @@ export default meta
 type Story = StoryObj
 
 const Template = (args) => {
-  return `<orama-chat ${{...args}}></orama-chat>`
+  return `
+  <div style="height: 800px; width: 360px; border: 1px solid white; display: flex; flex-direction: column;">
+    <orama-chat ${{ ...args }}></orama-chat>
+  </div>
+  
+  `
 }
 
 // More on writing stories with args: https://storybook.js.org/docs/html/writing-stories/args
-export const Primary: Story = {
+export const OramaChat: Story = {
   render: Template,
   args: {}
 }

apps/storybook/stories/orama-search.stories.tsx

@@ -0,0 +1,24 @@
+import type { StoryObj, Meta } from '@storybook/web-components'
+
+const meta: Meta = {
+  title: 'Internal/OramaSearch',
+  component: 'orama-search'
+}
+
+export default meta
+type Story = StoryObj
+
+const Template = (args) => {
+  return `
+  <div style="height: 800px; width: 360px; border: 1px solid white; display: flex; flex-direction: column;">
+    <orama-search ${{ ...args }}></orama-chat>
+  </div>
+  
+  `
+}
+
+// More on writing stories with args: https://storybook.js.org/docs/html/writing-stories/args
+export const OramaSearch: Story = {
+  render: Template,
+  args: {}
+}

apps/storybook/stories/search-box-toggler.stories.tsx

@@ -0,0 +1,14 @@
+import type { StoryObj, Meta } from '@storybook/html'
+
+const meta: Meta = {
+  title: 'Public/SearchBox',
+  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 SearchBoxToggler: Story = {
+  render: () => '<search-box-toggler></search-box-toggler>'
+}

apps/storybook/stories/search-box.stories.tsx

@@ -2,29 +2,26 @@ import type { StoryObj, Meta } from '@storybook/html'
 
 const meta: Meta = {
   title: 'Public/SearchBox',
-  component: 'search-box',
+  component: 'search-box'
 } satisfies Meta
 
 export default meta
 type Story = StoryObj
 
-const Template = (args) => {
-  return `<search-box theme-config='${JSON.stringify(args.theme)}'></search-box>`
+// 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;"> 
+    <search-box open="true"></search-box>
+  </div>`
 }
 
-// More on writing stories with args: https://storybook.js.org/docs/html/writing-stories/args
-export const Primary: Story = {
-  render: Template,
-  args: {
-    theme: {
-      colors: {
-        light: {
-          primaryColor: 'red'
-        },
-        dark: {
-          primaryColor: 'blue'
-        }
-      }
-    }
-  }
+export const SearchBoxWithToggler: Story = {
+  render: () => `
+  <div>
+    <search-box-toggler></search-box-toggler>
+    <div style="height: 800px; width: 360px; border: 1px solid white; overflow: hidden;"> 
+      <search-box></search-box>
+    </div>
+  </div>`
 }

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

@@ -28,6 +28,71 @@ export class OramaChat {
 export declare interface OramaChat extends Components.OramaChat {}
 
 
+@ProxyCmp({
+  inputs: ['message']
+})
+@Component({
+  selector: 'orama-chat-assistent-message',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: '<ng-content></ng-content>',
+  // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+  inputs: ['message'],
+})
+export class OramaChatAssistentMessage {
+  protected el: HTMLElement;
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+    c.detach();
+    this.el = r.nativeElement;
+  }
+}
+
+
+export declare interface OramaChatAssistentMessage extends Components.OramaChatAssistentMessage {}
+
+
+@ProxyCmp({
+})
+@Component({
+  selector: 'orama-chat-messages-container',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: '<ng-content></ng-content>',
+  // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+  inputs: [],
+})
+export class OramaChatMessagesContainer {
+  protected el: HTMLElement;
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+    c.detach();
+    this.el = r.nativeElement;
+  }
+}
+
+
+export declare interface OramaChatMessagesContainer extends Components.OramaChatMessagesContainer {}
+
+
+@ProxyCmp({
+  inputs: ['message']
+})
+@Component({
+  selector: 'orama-chat-user-message',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: '<ng-content></ng-content>',
+  // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+  inputs: ['message'],
+})
+export class OramaChatUserMessage {
+  protected el: HTMLElement;
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+    c.detach();
+    this.el = r.nativeElement;
+  }
+}
+
+
+export declare interface OramaChatUserMessage extends Components.OramaChatUserMessage {}
+
+
 @ProxyCmp({
   inputs: ['label', 'labelForScreenReaders', 'name', 'placeholder', 'size']
 })
@@ -51,14 +116,14 @@ export declare interface OramaInput extends Components.OramaInput {}
 
 
 @ProxyCmp({
-  inputs: ['as']
+  inputs: ['as', 'class']
 })
 @Component({
   selector: 'orama-paragraph',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['as'],
+  inputs: ['as', 'class'],
 })
 export class OramaParagraph {
   protected el: HTMLElement;
@@ -72,6 +137,27 @@ export class OramaParagraph {
 export declare interface OramaParagraph extends Components.OramaParagraph {}
 
 
+@ProxyCmp({
+})
+@Component({
+  selector: 'orama-search',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: '<ng-content></ng-content>',
+  // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+  inputs: [],
+})
+export class OramaSearch {
+  protected el: HTMLElement;
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+    c.detach();
+    this.el = r.nativeElement;
+  }
+}
+
+
+export declare interface OramaSearch extends Components.OramaSearch {}
+
+
 @ProxyCmp({
   inputs: ['as']
 })
@@ -95,14 +181,14 @@ export declare interface OramaSmall extends Components.OramaSmall {}
 
 
 @ProxyCmp({
-  inputs: ['as']
+  inputs: ['as', 'class']
 })
 @Component({
   selector: 'orama-span',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['as'],
+  inputs: ['as', 'class'],
 })
 export class OramaSpan {
   protected el: HTMLElement;
@@ -117,14 +203,14 @@ export declare interface OramaSpan extends Components.OramaSpan {}
 
 
 @ProxyCmp({
-  inputs: ['maxRows', 'minRows', 'placeholder', 'value']
+  inputs: ['autoFocus', 'maxRows', 'minRows', 'placeholder', 'value']
 })
 @Component({
   selector: 'orama-textarea',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['maxRows', 'minRows', 'placeholder', 'value'],
+  inputs: ['autoFocus', 'maxRows', 'minRows', 'placeholder', 'value'],
 })
 export class OramaTextarea {
   protected el: HTMLElement;
@@ -139,14 +225,14 @@ export declare interface OramaTextarea extends Components.OramaTextarea {}
 
 
 @ProxyCmp({
-  inputs: ['color', 'themeConfig']
+  inputs: ['color', 'open', 'themeConfig']
 })
 @Component({
   selector: 'search-box',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['color', 'themeConfig'],
+  inputs: ['color', 'open', 'themeConfig'],
 })
 export class SearchBox {
   protected el: HTMLElement;
@@ -160,3 +246,24 @@ export class SearchBox {
 export declare interface SearchBox extends Components.SearchBox {}
 
 
+@ProxyCmp({
+})
+@Component({
+  selector: 'search-box-toggler',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: '<ng-content></ng-content>',
+  // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+  inputs: [],
+})
+export class SearchBoxToggler {
+  protected el: HTMLElement;
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+    c.detach();
+    this.el = r.nativeElement;
+  }
+}
+
+
+export declare interface SearchBoxToggler extends Components.SearchBoxToggler {}
+
+

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

@@ -3,10 +3,15 @@ import * as d from './components';
 
 export const DIRECTIVES = [
   d.OramaChat,
+  d.OramaChatAssistentMessage,
+  d.OramaChatMessagesContainer,
+  d.OramaChatUserMessage,
   d.OramaInput,
   d.OramaParagraph,
+  d.OramaSearch,
   d.OramaSmall,
   d.OramaSpan,
   d.OramaTextarea,
-  d.SearchBox
+  d.SearchBox,
+  d.SearchBoxToggler
 ];

packages/ui-stencil-react/dist/types/components/stencil-generated/index.d.ts

@@ -1,2 +1,12 @@
-export declare const OramaP: import("react").ForwardRefExoticComponent<any>;
+export declare const OramaChat: import("react").ForwardRefExoticComponent<any>;
+export declare const OramaChatAssistentMessage: import("react").ForwardRefExoticComponent<any>;
+export declare const OramaChatMessagesContainer: import("react").ForwardRefExoticComponent<any>;
+export declare const OramaChatUserMessage: import("react").ForwardRefExoticComponent<any>;
+export declare const OramaInput: import("react").ForwardRefExoticComponent<any>;
+export declare const OramaParagraph: import("react").ForwardRefExoticComponent<any>;
+export declare const OramaSearch: import("react").ForwardRefExoticComponent<any>;
+export declare const OramaSmall: import("react").ForwardRefExoticComponent<any>;
+export declare const OramaSpan: import("react").ForwardRefExoticComponent<any>;
+export declare const OramaTextarea: import("react").ForwardRefExoticComponent<any>;
 export declare const SearchBox: import("react").ForwardRefExoticComponent<any>;
+export declare const SearchBoxToggler: import("react").ForwardRefExoticComponent<any>;

packages/ui-stencil-react/src/components/stencil-generated/index.ts

@@ -8,9 +8,14 @@ import type { JSX } from 'orama-ui';
 
 
 export const OramaChat = /*@__PURE__*/createReactComponent<JSX.OramaChat, HTMLOramaChatElement>('orama-chat');
+export const OramaChatAssistentMessage = /*@__PURE__*/createReactComponent<JSX.OramaChatAssistentMessage, HTMLOramaChatAssistentMessageElement>('orama-chat-assistent-message');
+export const OramaChatMessagesContainer = /*@__PURE__*/createReactComponent<JSX.OramaChatMessagesContainer, HTMLOramaChatMessagesContainerElement>('orama-chat-messages-container');
+export const OramaChatUserMessage = /*@__PURE__*/createReactComponent<JSX.OramaChatUserMessage, HTMLOramaChatUserMessageElement>('orama-chat-user-message');
 export const OramaInput = /*@__PURE__*/createReactComponent<JSX.OramaInput, HTMLOramaInputElement>('orama-input');
 export const OramaParagraph = /*@__PURE__*/createReactComponent<JSX.OramaParagraph, HTMLOramaParagraphElement>('orama-paragraph');
+export const OramaSearch = /*@__PURE__*/createReactComponent<JSX.OramaSearch, HTMLOramaSearchElement>('orama-search');
 export const OramaSmall = /*@__PURE__*/createReactComponent<JSX.OramaSmall, HTMLOramaSmallElement>('orama-small');
 export const OramaSpan = /*@__PURE__*/createReactComponent<JSX.OramaSpan, HTMLOramaSpanElement>('orama-span');
 export const OramaTextarea = /*@__PURE__*/createReactComponent<JSX.OramaTextarea, HTMLOramaTextareaElement>('orama-textarea');
 export const SearchBox = /*@__PURE__*/createReactComponent<JSX.SearchBox, HTMLSearchBoxElement>('search-box');
+export const SearchBoxToggler = /*@__PURE__*/createReactComponent<JSX.SearchBoxToggler, HTMLSearchBoxTogglerElement>('search-box-toggler');

packages/ui-stencil-vue/dist/components.d.ts

@@ -1,2 +1,12 @@
-export declare const OramaP: import("vue").DefineSetupFnComponent<any, {}, {}, any, import("vue").PublicProps>;
+export declare const OramaChat: import("vue").DefineSetupFnComponent<any, {}, {}, any, import("vue").PublicProps>;
+export declare const OramaChatAssistentMessage: import("vue").DefineSetupFnComponent<any, {}, {}, any, import("vue").PublicProps>;
+export declare const OramaChatMessagesContainer: import("vue").DefineSetupFnComponent<any, {}, {}, any, import("vue").PublicProps>;
+export declare const OramaChatUserMessage: import("vue").DefineSetupFnComponent<any, {}, {}, any, import("vue").PublicProps>;
+export declare const OramaInput: import("vue").DefineSetupFnComponent<any, {}, {}, any, import("vue").PublicProps>;
+export declare const OramaParagraph: import("vue").DefineSetupFnComponent<any, {}, {}, any, import("vue").PublicProps>;
+export declare const OramaSearch: import("vue").DefineSetupFnComponent<any, {}, {}, any, import("vue").PublicProps>;
+export declare const OramaSmall: import("vue").DefineSetupFnComponent<any, {}, {}, any, import("vue").PublicProps>;
+export declare const OramaSpan: import("vue").DefineSetupFnComponent<any, {}, {}, any, import("vue").PublicProps>;
+export declare const OramaTextarea: import("vue").DefineSetupFnComponent<any, {}, {}, any, import("vue").PublicProps>;
 export declare const SearchBox: import("vue").DefineSetupFnComponent<any, {}, {}, any, import("vue").PublicProps>;
+export declare const SearchBoxToggler: import("vue").DefineSetupFnComponent<any, {}, {}, any, import("vue").PublicProps>;