Merge branch 'main' of github.com:askorama/orama-ui-components

oramasearch · Aug 13, 2024 · 81e7e25 · 81e7e25
2 parents 38e0c87 + 75f3370
commit 81e7e25
Show file tree

Hide file tree

Showing 35 changed files with 891 additions and 275 deletions.
diff --git a/apps/demo-react/src/App.tsx b/apps/demo-react/src/App.tsx
@@ -1,23 +1,77 @@
+import React from 'react'
+import { OramaChatBox, OramaSearchBox, OramaButton } from '@orama/react-components'
 import './App.css'
-import { defineCustomElements, OramaChatBox } from '@orama/react-components'
-
-void defineCustomElements()
 
 function App() {
+  const [open, setOpen] = React.useState(false)
   return (
     <>
       <main>
         <section>
           <h1>App React</h1>
+          <p>
+            Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem
+            aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
+            Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni
+            dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor
+            sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore
+            magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis
+            suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in
+            ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas
+            nulla pariatur?
+          </p>
+          <section>
+            <h2>ChatBox in a section</h2>
+            <div className="component-row">
+              <OramaChatBox
+                index={{
+                  api_key: 'yl2JSnjLNBV6FVfUWEyadpjFr6KzPiDR',
+                  endpoint: 'https://cloud.orama.run/v1/indexes/recipes-m7w9mm',
+                }}
+                style={{ height: '600px' }}
+              />
+            </div>
+          </section>
+          <h2>Another section</h2>
+          <OramaButton
+            onClick={() => {
+              setOpen(true)
+            }}
+          >
+            Open searchbox
+          </OramaButton>
+          <p>
+            At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti
+            atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique
+            sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum
+            facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil
+            impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor
+            repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et
+            voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus,
+            ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.
+          </p>
+          <p>
+            At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti
+            atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique
+            sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum
+            facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil
+            impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor
+            repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et
+            voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus,
+            ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.
+          </p>
         </section>
 
         <section>
-          <h2>ChatBox</h2>
           <div className="component-row">
-            <OramaChatBox
+            <OramaSearchBox
+              open={open}
+              onSearchboxClosed={() => {
+                setOpen(false)
+              }}
               index={{
-                api_key: 'yl2JSnjLNBV6FVfUWEyadpjFr6KzPiDR',
-                endpoint: 'https://cloud.orama.run/v1/indexes/recipes-m7w9mm',
+                api_key: 'LerNlbp6379jVKaPs4wt2nZT4MJZbU1J',
+                endpoint: 'https://cloud.orama.run/v1/indexes/docs-orama-b3f5xd',
               }}
             />
           </div>

diff --git a/apps/storybook/.storybook/preview.ts b/apps/storybook/.storybook/preview.ts
@@ -1,10 +1,7 @@
-// import { defineCustomElements } from '@orama/wc-components/loader'
 import '@orama/wc-components/dist/orama-ui/orama-ui.css'
 import { html } from 'lit-html'
 import { DARK_THEME_BG, LIGTH_THEME_BG } from '../constants'
 
-// defineCustomElements()
-
 const preview = {
   decorators: [
     (story, context) => {

diff --git a/apps/storybook/package.json b/apps/storybook/package.json
@@ -11,8 +11,9 @@
     "storybook-test": "storybook build && clear && concurrently -k -s first -n 'Server,Test' -c 'magenta,blue' --hide 'Server' 'http-server ./storybook-static --port 6006 --silent' 'wait-on http-get://127.0.0.1:6006 && test-storybook --no-cache --verbose --'"
   },
   "dependencies": {
-    "@storybook/web-components": "^8.2.3",
-    "@orama/wc-components": "workspace:*"
+    "@orama/wc-components": "workspace:*",
+    "@storybook/preview-api": "^8.2.9",
+    "@storybook/web-components": "^8.2.3"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^1.6.1",

diff --git a/apps/storybook/stories/config.ts b/apps/storybook/stories/config.ts
@@ -4,6 +4,7 @@ export type DemoIndexConfig = Record<string, Components.OramaSearchBox>
 
 const demoIndexes: DemoIndexConfig = {
   orama: {
+    open: true,
     index: {
       api_key: 'LerNlbp6379jVKaPs4wt2nZT4MJZbU1J',
       endpoint: 'https://cloud.orama.run/v1/indexes/docs-orama-b3f5xd',
@@ -39,6 +40,7 @@ const demoIndexes: DemoIndexConfig = {
     },
   },
   recipes: {
+    open: true,
     index: {
       api_key: 'yl2JSnjLNBV6FVfUWEyadpjFr6KzPiDR',
       endpoint: 'https://cloud.orama.run/v1/indexes/recipes-m7w9mm',
@@ -70,6 +72,7 @@ const demoIndexes: DemoIndexConfig = {
     },
   },
   videogames: {
+    open: true,
     index: {
       api_key: 'WL7pKdEqCTPf3G2412x8ecneqVbnkklr',
       endpoint: 'https://cloud.orama.foo/v1/indexes/videogames-rk139h',

diff --git a/apps/storybook/stories/docs/frameworks/React.mdx b/apps/storybook/stories/docs/frameworks/React.mdx
@@ -16,16 +16,7 @@ npm install @orama/react-components
 You can use pnpm or yarn if you prefer.
 
 ## Usage
-
-In your `App.tsx` file, import the component definition and use it in your JSX:
-
-```tsx
-import { defineCustomElements } from '@orama/react-components'
-
-void defineCustomElements()
-```
-
-You can then import and use the components you need in your project:
+You can just import and use the components you need in your project.
 
 ```tsx
 import { OramaChatBox } from '@orama/react-components'

diff --git a/apps/storybook/stories/public/orama-search-button.stories.tsx b/apps/storybook/stories/public/orama-search-button.stories.tsx
@@ -1,22 +1,71 @@
 import type { StoryObj, Meta } from '@storybook/web-components'
 import type { Components } from '@orama/wc-components'
+import { useArgs } from '@storybook/preview-api'
 import demoIndexes from '../config'
 import { html } from 'lit-html'
 
-const meta: Meta<Components.OramaSearchButton> = {
+const meta: Meta<
+  Components.OramaSearchButton & {
+    openSearchbox: boolean
+  }
+> = {
   title: 'Components/SearchButton',
   component: 'orama-search-button',
+  argTypes: {
+    colorScheme: {
+      options: ['light', 'dark', 'system'],
+      table: {
+        defaultValue: { summary: 'dark' },
+      },
+      control: { type: 'radio' },
+    },
+    themeConfig: {
+      table: {
+        type: {
+          summary: 'Partial<TThemeOverrides>',
+        },
+      },
+    },
+    openSearchbox: {
+      table: {
+        defaultValue: { summary: 'false' },
+        type: {
+          summary: 'boolean',
+        },
+      },
+      control: { type: 'boolean' },
+    },
+  },
 } satisfies Meta
 
 export default meta
 type Story = StoryObj<Components.OramaSearchButton>
 
 const Template = (label: string) => (args) => {
+  const [{ openSearchbox }, updateArgs] = useArgs()
+
+  window.addEventListener('searchboxClosed', () => {
+    updateArgs({ openSearchbox: false })
+  })
+
   return html`
-    <div>
-      <orama-search-button label="${args.label}" id="orama-ui-search-button">${label}</orama-search-button>
+    <div style="display: flex; justify-content: flex-start">
+      <div style="width: 240px">
+      <orama-search-button
+        label="${args.label}"
+        id="orama-ui-search-button"
+        .colorScheme=${args.colorScheme}
+        .onclick=${() => {
+          updateArgs({ openSearchbox: !openSearchbox })
+        }}
+      >
+          ${label}
+      </orama-search-button>
+      </div>
       <orama-search-box
-        .open=${false}
+        id="orama-ui-search-box"
+        .open=${openSearchbox}
+        .colorScheme=${args.colorScheme}
         .index=${demoIndexes.orama.index}
         .placeholder=${demoIndexes.orama.placeholder}
         .sourceBaseUrl=${demoIndexes.orama.sourceBaseUrl}
@@ -30,5 +79,4 @@ const Template = (label: string) => (args) => {
 
 export const SearchButton: Story = {
   render: Template('Search...'),
-  args: {},
 }
diff --git a/packages/ui-stencil-react/src/components/stencil-generated/index.ts b/packages/ui-stencil-react/src/components/stencil-generated/index.ts
@@ -5,8 +5,9 @@ import { createReactComponent } from './react-component-lib';
 
 import type { JSX } from '@orama/wc-components';
 
+import { defineCustomElements } from '@orama/wc-components/loader';
 
-
+defineCustomElements();
 export const OramaButton = /*@__PURE__*/createReactComponent<JSX.OramaButton, HTMLOramaButtonElement>('orama-button');
 export const OramaChat = /*@__PURE__*/createReactComponent<JSX.OramaChat, HTMLOramaChatElement>('orama-chat');
 export const OramaChatAssistentMessage = /*@__PURE__*/createReactComponent<JSX.OramaChatAssistentMessage, HTMLOramaChatAssistentMessageElement>('orama-chat-assistent-message');

diff --git a/packages/ui-stencil-vue/lib/components.ts b/packages/ui-stencil-vue/lib/components.ts
@@ -111,7 +111,9 @@ export const OramaMarkdown = /*@__PURE__*/ defineContainer<JSX.OramaMarkdown>('o
 export const OramaModal = /*@__PURE__*/ defineContainer<JSX.OramaModal>('orama-modal', undefined, [
   'open',
   'closeOnEscape',
-  'mainTitle'
+  'closeOnOutsideClick',
+  'mainTitle',
+  'modalStatusChanged'
 ]);
 
 
@@ -138,11 +140,14 @@ export const OramaSearchBox = /*@__PURE__*/ defineContainer<JSX.OramaSearchBox>(
   'sourceBaseUrl',
   'sourcesMap',
   'placeholder',
-  'suggestions'
+  'suggestions',
+  'searchParams',
+  'searchboxClosed'
 ]);
 
 
 export const OramaSearchButton = /*@__PURE__*/ defineContainer<JSX.OramaSearchButton>('orama-search-button', undefined, [
+  'themeConfig',
   'colorScheme'
 ]);
 

diff --git a/packages/ui-stencil/package.json b/packages/ui-stencil/package.json
@@ -9,7 +9,10 @@
   },
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
-  "files": ["dist/", "loader/"],
+  "files": [
+    "dist/",
+    "loader/"
+  ],
   "scripts": {
     "build": "stencil build --docs",
     "clean": "rm -rf node_modules .turbo dist .stencil loader www",
@@ -21,6 +24,7 @@
   },
   "types": "dist/types/index.d.ts",
   "dependencies": {
+    "@orama/orama": "^2.0.23",
     "@oramacloud/client": "1.3.10",
     "@phosphor-icons/webcomponents": "^2.1.5",
     "@stencil/core": "^4.19.0",