Skip to content

Commit

Permalink
Merge pull request #28 from askorama/feature/orm-1594-2
Browse files Browse the repository at this point in the history
Feature/orm 1594-2
  • Loading branch information
g-francesca authored Aug 13, 2024
2 parents a510214 + d45a362 commit 75f3370
Show file tree
Hide file tree
Showing 33 changed files with 887 additions and 271 deletions.
68 changes: 61 additions & 7 deletions apps/demo-react/src/App.tsx
Original file line number Diff line number Diff line change
@@ -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>
Expand Down
3 changes: 0 additions & 3 deletions apps/storybook/.storybook/preview.ts
Original file line number Diff line number Diff line change
@@ -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) => {
Expand Down
5 changes: 3 additions & 2 deletions apps/storybook/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
3 changes: 3 additions & 0 deletions apps/storybook/stories/config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down Expand Up @@ -39,6 +40,7 @@ const demoIndexes: DemoIndexConfig = {
},
},
recipes: {
open: true,
index: {
api_key: 'yl2JSnjLNBV6FVfUWEyadpjFr6KzPiDR',
endpoint: 'https://cloud.orama.run/v1/indexes/recipes-m7w9mm',
Expand Down Expand Up @@ -70,6 +72,7 @@ const demoIndexes: DemoIndexConfig = {
},
},
videogames: {
open: true,
index: {
api_key: 'WL7pKdEqCTPf3G2412x8ecneqVbnkklr',
endpoint: 'https://cloud.orama.foo/v1/indexes/videogames-rk139h',
Expand Down
11 changes: 1 addition & 10 deletions apps/storybook/stories/docs/frameworks/React.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand Down
58 changes: 53 additions & 5 deletions apps/storybook/stories/public/orama-search-button.stories.tsx
Original file line number Diff line number Diff line change
@@ -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}
Expand All @@ -30,5 +79,4 @@ const Template = (label: string) => (args) => {

export const SearchButton: Story = {
render: Template('Search...'),
args: {},
}
Original file line number Diff line number Diff line change
Expand Up @@ -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');
Expand Down
9 changes: 7 additions & 2 deletions packages/ui-stencil-vue/lib/components.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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'
]);


Expand All @@ -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'
]);

Expand Down
6 changes: 5 additions & 1 deletion packages/ui-stencil/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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",
Expand Down
Loading

0 comments on commit 75f3370

Please sign in to comment.