From 076faa1b9956e8d91f2d753d70e6144f9390261d Mon Sep 17 00:00:00 2001 From: Francesca Giannino Date: Thu, 11 Jul 2024 20:35:09 +0200 Subject: [PATCH 1/4] feat: review searchbox layout --- apps/storybook/.storybook/preview.js | 3 +- apps/storybook/.storybook/storybook.css | 3 + .../stories/orama-search-results.stories.tsx | 38 ++++++-- apps/storybook/stories/search-box.stories.tsx | 7 +- packages/ui-stencil-vue/lib/components.ts | 6 +- packages/ui-stencil/src/components.d.ts | 28 +++++- .../orama-chat-assistent-message.scss | 2 +- .../orama-chat-assistent-message.tsx | 1 - .../orama-chat-messages-container.scss | 4 +- .../orama-chat-messages-container.tsx | 1 - .../orama-chat-user-message.scss | 2 +- .../orama-chat-user-message.tsx | 1 - .../internal/orama-chat/orama-chat.scss | 13 +-- .../internal/orama-chat/orama-chat.tsx | 12 +-- .../internal/orama-input/orama-input.tsx | 95 +++++++++++-------- .../orama-search-results.scss | 11 ++- .../orama-search-results.tsx | 46 ++++++--- .../internal/orama-search-results/readme.md | 15 ++- .../internal/orama-search/orama-search.scss | 6 +- .../internal/orama-search/orama-search.tsx | 19 ++-- .../internal/orama-text/orama-text.scss | 15 ++- .../internal/orama-text/orama-text.tsx | 15 ++- .../components/internal/orama-text/readme.md | 3 + .../orama-textarea/orama-textarea.scss | 4 +- .../orama-textarea/orama-textarea.tsx | 1 - .../orama-toggler/orama-toggler.scss | 2 +- .../orama-toggler/orama-toggler.tsx | 1 - .../search-box-toggler/search-box-toggler.tsx | 1 - .../src/components/search-box/readme.md | 2 + .../src/components/search-box/search-box.scss | 11 ++- .../src/components/search-box/search-box.tsx | 32 ++++--- packages/ui-stencil/src/styles/_colors.scss | 7 +- packages/ui-stencil/src/styles/_mixins.scss | 13 ++- 33 files changed, 271 insertions(+), 149 deletions(-) create mode 100644 apps/storybook/.storybook/storybook.css diff --git a/apps/storybook/.storybook/preview.js b/apps/storybook/.storybook/preview.js index 3787eb03..26e2627f 100644 --- a/apps/storybook/.storybook/preview.js +++ b/apps/storybook/.storybook/preview.js @@ -1,5 +1,6 @@ import { defineCustomElements } from './../../../packages/ui-stencil/loader' import 'ui-stencil/dist/orama-ui/orama-ui.css' +import './storybook.css' defineCustomElements() @@ -11,7 +12,7 @@ const preview = { decorators: [ (story, context) => { const classTheme = context.globals?.backgrounds?.value === DARK_THEME_BG ? 'theme-dark' : 'theme-light' - return `
${story()}
` + return `
${story()}
` }, ], parameters: { diff --git a/apps/storybook/.storybook/storybook.css b/apps/storybook/.storybook/storybook.css new file mode 100644 index 00000000..9abbe54a --- /dev/null +++ b/apps/storybook/.storybook/storybook.css @@ -0,0 +1,3 @@ +.sb-show-main.sb-main-padded { + padding: 0 !important; +} \ No newline at end of file diff --git a/apps/storybook/stories/orama-search-results.stories.tsx b/apps/storybook/stories/orama-search-results.stories.tsx index eb236ee7..f0d283e9 100644 --- a/apps/storybook/stories/orama-search-results.stories.tsx +++ b/apps/storybook/stories/orama-search-results.stories.tsx @@ -1,18 +1,36 @@ -import type { StoryObj, Meta } from "@storybook/html"; +import type { StoryObj, Meta } from '@storybook/html' const meta = { - title: "Internal/Search Results", - component: "orama-search-results", -} satisfies Meta; + title: 'Internal/Search Results', + component: 'orama-search-results', +} satisfies Meta -export default meta; -type Story = StoryObj; +export default meta +type Story = StoryObj const Template = (args) => ` - -`; + +` -export const Default: Story = { +export const NoResults: Story = { render: Template, args: {}, -}; \ No newline at end of file +} + +export const WithResults: Story = { + render: Template, + args: { + items: [ + { + id: '1', + title: 'Title 1', + description: 'Description 1', + }, + { + id: '2', + title: 'Title 2', + description: 'Description 2', + }, + ], + }, +} diff --git a/apps/storybook/stories/search-box.stories.tsx b/apps/storybook/stories/search-box.stories.tsx index 1718cc99..f8c6d7d2 100644 --- a/apps/storybook/stories/search-box.stories.tsx +++ b/apps/storybook/stories/search-box.stories.tsx @@ -2,7 +2,7 @@ import type { StoryObj, Meta } from '@storybook/html' const meta: Meta = { title: 'Public/SearchBox', - component: 'search-box' + component: 'search-box', } satisfies Meta export default meta @@ -11,9 +11,8 @@ type Story = StoryObj // More on writing stories with args: https://storybook.js.org/docs/html/writing-stories/args export const SearchBox: Story = { render: () => ` -
-
` + `, } export const SearchBoxWithToggler: Story = { @@ -23,5 +22,5 @@ export const SearchBoxWithToggler: Story = {
- ` + `, } diff --git a/packages/ui-stencil-vue/lib/components.ts b/packages/ui-stencil-vue/lib/components.ts index 24f15988..c984b4b3 100644 --- a/packages/ui-stencil-vue/lib/components.ts +++ b/packages/ui-stencil-vue/lib/components.ts @@ -41,14 +41,16 @@ export const OramaSearch = /*@__PURE__*/ defineContainer('orama export const OramaSearchResults = /*@__PURE__*/ defineContainer('orama-search-results', undefined, [ 'items', - 'searchTerm' + 'searchTerm', + 'oramaItemClick' ]); export const OramaText = /*@__PURE__*/ defineContainer('orama-text', undefined, [ 'as', 'styledAs', - 'class' + 'class', + 'align' ]); diff --git a/packages/ui-stencil/src/components.d.ts b/packages/ui-stencil/src/components.d.ts index d56e7b23..8cfbdd9c 100644 --- a/packages/ui-stencil/src/components.d.ts +++ b/packages/ui-stencil/src/components.d.ts @@ -7,11 +7,11 @@ import { HTMLStencilElement, JSXBase } from "@stencil/core/internal"; import { TChatMessage } from "./context/chatContext"; import { InputProps } from "./components/internal/orama-input/orama-input"; -import { SearchResultsProps } from "./components/internal/orama-search-results/orama-search-results"; +import { SearchItem, SearchResultsProps } from "./components/internal/orama-search-results/orama-search-results"; import { TextProps } from "./components/internal/orama-text/orama-text"; export { TChatMessage } from "./context/chatContext"; export { InputProps } from "./components/internal/orama-input/orama-input"; -export { SearchResultsProps } from "./components/internal/orama-search-results/orama-search-results"; +export { SearchItem, SearchResultsProps } from "./components/internal/orama-search-results/orama-search-results"; export { TextProps } from "./components/internal/orama-text/orama-text"; export namespace Components { interface OramaChat { @@ -40,6 +40,10 @@ export namespace Components { "searchTerm": SearchResultsProps['searchTerm']; } interface OramaText { + /** + * optionally change text alignment + */ + "align"?: TextProps['align']; /** * it defines the HTML tag to be used */ @@ -75,6 +79,10 @@ export interface OramaInputCustomEvent extends CustomEvent { detail: T; target: HTMLOramaInputElement; } +export interface OramaSearchResultsCustomEvent extends CustomEvent { + detail: T; + target: HTMLOramaSearchResultsElement; +} declare global { interface HTMLOramaChatElement extends Components.OramaChat, HTMLStencilElement { } @@ -123,7 +131,18 @@ declare global { prototype: HTMLOramaSearchElement; new (): HTMLOramaSearchElement; }; + interface HTMLOramaSearchResultsElementEventMap { + "oramaItemClick": SearchItem; + } interface HTMLOramaSearchResultsElement extends Components.OramaSearchResults, HTMLStencilElement { + addEventListener(type: K, listener: (this: HTMLOramaSearchResultsElement, ev: OramaSearchResultsCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLOramaSearchResultsElement, ev: OramaSearchResultsCustomEvent) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLOramaSearchResultsElement: { prototype: HTMLOramaSearchResultsElement; @@ -199,9 +218,14 @@ declare namespace LocalJSX { } interface OramaSearchResults { "items"?: SearchResultsProps['items']; + "onOramaItemClick"?: (event: OramaSearchResultsCustomEvent) => void; "searchTerm"?: SearchResultsProps['searchTerm']; } interface OramaText { + /** + * optionally change text alignment + */ + "align"?: TextProps['align']; /** * it defines the HTML tag to be used */ diff --git a/packages/ui-stencil/src/components/internal/orama-chat-messages-container/orama-chat-assistent-message/orama-chat-assistent-message.scss b/packages/ui-stencil/src/components/internal/orama-chat-messages-container/orama-chat-assistent-message/orama-chat-assistent-message.scss index fdafbaad..2208c4da 100644 --- a/packages/ui-stencil/src/components/internal/orama-chat-messages-container/orama-chat-assistent-message/orama-chat-assistent-message.scss +++ b/packages/ui-stencil/src/components/internal/orama-chat-messages-container/orama-chat-assistent-message/orama-chat-assistent-message.scss @@ -1,4 +1,4 @@ -:host { +orama-chat-assistent-message { display: block; color: var(--text-color-secondary, text-color('secondary')); } diff --git a/packages/ui-stencil/src/components/internal/orama-chat-messages-container/orama-chat-assistent-message/orama-chat-assistent-message.tsx b/packages/ui-stencil/src/components/internal/orama-chat-messages-container/orama-chat-assistent-message/orama-chat-assistent-message.tsx index f5bd54ec..ad790a36 100644 --- a/packages/ui-stencil/src/components/internal/orama-chat-messages-container/orama-chat-assistent-message/orama-chat-assistent-message.tsx +++ b/packages/ui-stencil/src/components/internal/orama-chat-messages-container/orama-chat-assistent-message/orama-chat-assistent-message.tsx @@ -4,7 +4,6 @@ import type { TChatMessage } from '../../../../context/chatContext' @Component({ tag: 'orama-chat-assistent-message', styleUrl: 'orama-chat-assistent-message.scss', - shadow: true, }) export class OramaChatAssistentMessage { @Prop() message: TChatMessage diff --git a/packages/ui-stencil/src/components/internal/orama-chat-messages-container/orama-chat-messages-container.scss b/packages/ui-stencil/src/components/internal/orama-chat-messages-container/orama-chat-messages-container.scss index 96a37c22..8557360a 100644 --- a/packages/ui-stencil/src/components/internal/orama-chat-messages-container/orama-chat-messages-container.scss +++ b/packages/ui-stencil/src/components/internal/orama-chat-messages-container/orama-chat-messages-container.scss @@ -1,11 +1,9 @@ -:host { +orama-chat-messages-container { display: flex; flex-direction: column; flex-grow: 1; gap: var(--spacing-l, $spacing-l); overflow-y: auto; - // TODO: Should it be a variable? - background: linear-gradient(180deg, #000 0%, #251e37 50%); // Maybe move somewhere else to reuse in some somponents, but not globally &::-webkit-scrollbar { diff --git a/packages/ui-stencil/src/components/internal/orama-chat-messages-container/orama-chat-messages-container.tsx b/packages/ui-stencil/src/components/internal/orama-chat-messages-container/orama-chat-messages-container.tsx index c5a7fe62..025632c1 100644 --- a/packages/ui-stencil/src/components/internal/orama-chat-messages-container/orama-chat-messages-container.tsx +++ b/packages/ui-stencil/src/components/internal/orama-chat-messages-container/orama-chat-messages-container.tsx @@ -4,7 +4,6 @@ import { chatContext } from '../../../context/chatContext' @Component({ tag: 'orama-chat-messages-container', styleUrl: 'orama-chat-messages-container.scss', - shadow: true, }) export class OramaChatMessagesContainer { render() { diff --git a/packages/ui-stencil/src/components/internal/orama-chat-messages-container/orama-chat-user-message/orama-chat-user-message.scss b/packages/ui-stencil/src/components/internal/orama-chat-messages-container/orama-chat-user-message/orama-chat-user-message.scss index b6a743e0..426eab41 100644 --- a/packages/ui-stencil/src/components/internal/orama-chat-messages-container/orama-chat-user-message/orama-chat-user-message.scss +++ b/packages/ui-stencil/src/components/internal/orama-chat-messages-container/orama-chat-user-message/orama-chat-user-message.scss @@ -1,4 +1,4 @@ -:host { +orama-chat-user-message { display: flex; justify-content: end; color: var(--text-color-primary, text-color('primary')); diff --git a/packages/ui-stencil/src/components/internal/orama-chat-messages-container/orama-chat-user-message/orama-chat-user-message.tsx b/packages/ui-stencil/src/components/internal/orama-chat-messages-container/orama-chat-user-message/orama-chat-user-message.tsx index ed61fc9d..023f58b4 100644 --- a/packages/ui-stencil/src/components/internal/orama-chat-messages-container/orama-chat-user-message/orama-chat-user-message.tsx +++ b/packages/ui-stencil/src/components/internal/orama-chat-messages-container/orama-chat-user-message/orama-chat-user-message.tsx @@ -4,7 +4,6 @@ import type { TChatMessage } from '../../../../context/chatContext' @Component({ tag: 'orama-chat-user-message', styleUrl: 'orama-chat-user-message.scss', - shadow: true, }) export class OramaChatUserMessage { @Prop() message: TChatMessage diff --git a/packages/ui-stencil/src/components/internal/orama-chat/orama-chat.scss b/packages/ui-stencil/src/components/internal/orama-chat/orama-chat.scss index ab231c26..77212809 100644 --- a/packages/ui-stencil/src/components/internal/orama-chat/orama-chat.scss +++ b/packages/ui-stencil/src/components/internal/orama-chat/orama-chat.scss @@ -1,24 +1,25 @@ -:host { +orama-chat { display: flex; flex-direction: column; flex-grow: 1; overflow: hidden; + background: linear-gradient(180deg, var(--background-ai-gradient-one) 0%, var(--background-ai-gradient-two) 50%); } orama-textarea { width: 100%; } + .messages-container-wrapper { flex-grow: 1; display: flex; flex-direction: column; } -.footer-wrapper { - background: var(--background-color-tertiary, background-color('tertiary')); - padding: var(--spacing-m, $spacing-m) var(--spacing-l, $spacing-l) var(--spacing-s, $spacing-s) var(--spacing-l, $spacing-l); +.chat-form-wrapper { + padding: var(--spacing-m, $spacing-m) var(--spacing-l, $spacing-l); } -.spacer { - margin-top: var(--spacing-s, $spacing-s); +.chat-input { + margin-bottom: var(--spacing-s, $spacing-s); } diff --git a/packages/ui-stencil/src/components/internal/orama-chat/orama-chat.tsx b/packages/ui-stencil/src/components/internal/orama-chat/orama-chat.tsx index e701f8a1..7f927bb7 100644 --- a/packages/ui-stencil/src/components/internal/orama-chat/orama-chat.tsx +++ b/packages/ui-stencil/src/components/internal/orama-chat/orama-chat.tsx @@ -5,7 +5,6 @@ import { ChatService } from '../../../services/ChatService' @Component({ tag: 'orama-chat', styleUrl: 'orama-chat.scss', - shadow: true }) export class OramaChat { @State() inputValue = '' @@ -17,7 +16,7 @@ export class OramaChat { // 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.chatService = new ChatService(oramaClient) @@ -37,11 +36,13 @@ export class OramaChat { render() { return ( + {/* CHAT MESSAGES */} -