chore: bundle global style with react wrapper component

oramasearch · Jul 22, 2024 · 723547e · 723547e
1 parent ce6c0c5
commit 723547e
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 12 deletions.
diff --git a/apps/demo-react/index.html b/apps/demo-react/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />

diff --git a/apps/demo-react/src/App.tsx b/apps/demo-react/src/App.tsx
@@ -1,7 +1,5 @@
 import './App.css'
-import { defineCustomElements, OramaSearchBox } from 'ui-stencil-react'
-
-// import {} from 'ui-stencil-react'
+import { defineCustomElements, OramaChatBox } from 'ui-stencil-react'
 
 void defineCustomElements()
 
@@ -14,9 +12,14 @@ function App() {
         </section>
 
         <section>
-          <h2>Stencil Components</h2>
+          <h2>ChatBox</h2>
           <div className="component-row">
-            <OramaSearchBox />
+            <OramaChatBox
+              index={{
+                api_key: 'yl2JSnjLNBV6FVfUWEyadpjFr6KzPiDR',
+                endpoint: 'https://cloud.orama.run/v1/indexes/recipes-m7w9mm',
+              }}
+            />
           </div>
         </section>
       </main>

diff --git a/apps/demo-react/src/index.css b/apps/demo-react/src/index.css
@@ -116,8 +116,14 @@ section {
   margin-bottom: 1rem;
 }
 
+main {
+  width: 90%;
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
 .component-row {
-  background-color: #ddd;
-  padding: 1rem;
-  border-radius: 1rem;
+  width: 100%;
+  max-width: 800px;
+  margin: 0 auto;
 }
diff --git a/packages/ui-stencil-react/src/index.ts b/packages/ui-stencil-react/src/index.ts
@@ -1,2 +1,4 @@
-export * from "./components/stencil-generated";
-export { defineCustomElements } from "ui-stencil/loader";
+export * from './components/stencil-generated'
+export { defineCustomElements } from 'ui-stencil/loader'
+
+import 'ui-stencil/dist/orama-ui/orama-ui.css'
diff --git a/packages/ui-stencil/src/index.html b/packages/ui-stencil/src/index.html
@@ -7,7 +7,7 @@
 
     <link rel="stylesheet" href="/build/orama-ui.css" />
     <script type="module" src="/build/orama-ui.esm.js"></script>
-    <script nomodule src="/bui  ld/orama-ui.js"></script>
+    <script nomodule src="/build/orama-ui.js"></script>
   </head>
   <body>
     <search-box-toggler></search-box-toggler>