oramasearch · rjborba · Oct 3, 2024 · Oct 1, 2024 · Oct 3, 2024
diff --git a/README.md b/README.md
@@ -1,48 +1,38 @@
-# Orama UI Components
+<p align="center">
+  <img src="/misc/readme/orama-ui-components-readme-cover.png" />
+</p>
+<h4 align="center">
+  <a href="https://docs.orama.com/cloud/ui-components/design-system">Documentation</a> •
+  <a href="https://components.orama.com/?path=/docs/welcome--docs">Storybook</a>
+</h4>
+<br />
 
-## Table of Contents
+[![Built With Stencil](https://img.shields.io/badge/-Built%20With%20Stencil-16161d.svg?logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjIuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MTIgNTEyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI%2BCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI%2BCgkuc3Qwe2ZpbGw6I0ZGRkZGRjt9Cjwvc3R5bGU%2BCjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik00MjQuNywzNzMuOWMwLDM3LjYtNTUuMSw2OC42LTkyLjcsNjguNkgxODAuNGMtMzcuOSwwLTkyLjctMzAuNy05Mi43LTY4LjZ2LTMuNmgzMzYuOVYzNzMuOXoiLz4KPHBhdGggY2xhc3M9InN0MCIgZD0iTTQyNC43LDI5Mi4xSDE4MC40Yy0zNy42LDAtOTIuNy0zMS05Mi43LTY4LjZ2LTMuNkgzMzJjMzcuNiwwLDkyLjcsMzEsOTIuNyw2OC42VjI5Mi4xeiIvPgo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNNDI0LjcsMTQxLjdIODcuN3YtMy42YzAtMzcuNiw1NC44LTY4LjYsOTIuNy02OC42SDMzMmMzNy45LDAsOTIuNywzMC43LDkyLjcsNjguNlYxNDEuN3oiLz4KPC9zdmc%2BCg%3D%3D&colorA=16161d&style=flat-square)](https://stenciljs.com)
 
-1. [Introduction](#introduction)
-2. [Getting Started](#getting-started)
-   - [Installation](#installation)
-3. [Components](#components)
-   - [Chatbox: `Chatbox`](#chatbox)
-4. [Contributing](#contributing)
+# Orama UI Components
 
-## Introduction
+This library provides a set of ready to use UI components for easily implementing **Search** and **AI Chat** functionalities in your web applications through Orama.
 
-Welcome to the **Orama UI Components Library**! This library provides a set of reusable UI components for easily implementing search functionalities in your web applications.
+<!-- <video src="https://website-assets.oramasearch.com/docs/search-box-component.mp4" width="200"/> -->
 
-## Getting Started
+![Watch the video](/misc/readme/orama-quick-view.gif)
 
-### Installation
+## Getting Started
 
-To get started with our components, you need to install the library via npm:
+Orama Components were built with StencilJS as Web Components. They can be used in any project, no matter the framework or library you are using. But we also provide **React**, **Angular**, and **Vue** wrappers for easier integration. **Properties and Events** are the same across all wrappers, but the syntax is slightly different for each one, so please check the documentation for each wrapper for examples.
 
-```bash
-npm install @orama/ui-components
-# TODO: placeholder
-```
+- [Web Components](./packages/ui-stencil/)
+- [React Components](./packages/ui-stencil-react/)
+- [Angular Components](./packages/ui-stencil-angular/)
+- [Vue Components](./packages/ui-stencil-vue/)
 
-### Authentication
+## Authentication
 
 Since most of our components require you to have a cloud index already deployed, make sure to:
 
 1. **Sign Up**: Go to [Our Signup Page](https://cloud.oramasearch.com/auth/signup) and create an account.
 2. **Create your first index**: You can even create a Demo index to start playing around
 
-## Components
-
-### Chatbox: `Chatbox`
-
-**Description**: This component enables you to swiftly set up an entire Retrieval-Augmented Generation (RAG) system in just under 3 minutes. It leverages the answer engine to enhance content generation.
-
-**Usage**:
-
-```html
-<orama-chat-box index="value"></orama-chat-box>
-```
-
-## Contributing
+<!-- ## Storybook
 
-We welcome contributions from the community! Please read our [Contributing Guide](./contributing.md) to learn how you can help improve this project.
+You can find a Storybook at [https://components.orama.com](https://components.orama.com/?path=/docs/welcome--docs) will all available components. -->
diff --git a/apps/demo-angular/README.md b/apps/demo-angular/README.md
@@ -1,27 +1 @@
-# AppAngular
-
-This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 16.1.4.
-
-## Development server
-
-Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files.
-
-## Code scaffolding
-
-Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
-
-## Build
-
-Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory.
-
-## Running unit tests
-
-Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
-
-## Running end-to-end tests
-
-Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.
-
-## Further help
-
-To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.
+# TODO
diff --git a/apps/demo-react/README.md b/apps/demo-react/README.md
@@ -0,0 +1 @@
+# TODO
diff --git a/apps/demo-vue/README.md b/apps/demo-vue/README.md
@@ -1,18 +1 @@
-# Vue 3 + TypeScript + Vite
-
-This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
-
-## Recommended IDE Setup
-
-- [VS Code](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).
-
-## Type Support For `.vue` Imports in TS
-
-TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) to make the TypeScript language service aware of `.vue` types.
-
-If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a [Take Over Mode](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) that is more performant. You can enable it by the following steps:
-
-1. Disable the built-in TypeScript Extension
-   1. Run `Extensions: Show Built-in Extensions` from VSCode's command palette
-   2. Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)`
-2. Reload the VSCode window by running `Developer: Reload Window` from the command palette.
+# TODO
diff --git a/misc/readme/orama-quick-view.gif b/misc/readme/orama-quick-view.gif
diff --git a/misc/readme/orama-ui-components-readme-cover.png b/misc/readme/orama-ui-components-readme-cover.png
diff --git a/packages/ui-stencil-angular/README.md b/packages/ui-stencil-angular/README.md
@@ -1,27 +1 @@
-# AngularWorkspace
-
-This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 16.1.4.
-
-## Development server
-
-Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files.
-
-## Code scaffolding
-
-Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
-
-## Build
-
-Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory.
-
-## Running unit tests
-
-Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
-
-## Running end-to-end tests
-
-Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.
-
-## Further help
-
-To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.
+# TODO
diff --git a/packages/ui-stencil-react/README.md b/packages/ui-stencil-react/README.md
@@ -0,0 +1 @@
+# TODO
diff --git a/packages/ui-stencil-vue/README.md b/packages/ui-stencil-vue/README.md
@@ -0,0 +1 @@
+# TODO
diff --git a/packages/ui-stencil/README.md b/packages/ui-stencil/README.md
@@ -0,0 +1 @@
+# TODO
diff --git a/packages/ui-stencil/readme.md b/packages/ui-stencil/readme.md