Feature/ORM-1581

apps/storybook/stories/docs/frameworks/Vue.mdx

@@ -4,11 +4,11 @@ import { Meta } from '@storybook/blocks';
 
 # Vue
 
-We offer an Angular version of every public component so you can use them in your Angular projects.
+We offer a Vue version of every public component so you can use them in your Angular projects.
 
 ## Installation
 
-To add the Orama UI Kit to your Angulat project, run:
+To add the Orama UI Kit to your Vue project, run:
 
 ```bash
 npm install @orama/vue-components
@@ -17,34 +17,23 @@ You can use pnpm or yarn if you prefer.
 
 ## Usage
 
-In your `app.module.ts` file, import the component definition:
+In your `main.ts` file, import the component definition:
 
 ```tsx
-import { ComponentLibraryModule } from '@orama/angular-components/dist/component-library'
-
-@NgModule({
-  declarations: [AppComponent],
-  imports: [BrowserModule, AppRoutingModule, ComponentLibraryModule],
-  providers: [],
-  bootstrap: [AppComponent],
-  schemas: []
-})
-```
-
-We have to make sure that the global styles are referenced in the Angular project. 
-You can do this by importing the styles in your Angular project's styles.css or styles.scss
+import { createApp } from 'vue'
+import { ComponentLibrary } from '@orama/vue-components'
+import App from './App.vue'
 
-```css
-@import '@orama/wc-components/dist/orama-ui/orama-ui.css';
+createApp(App).use(ComponentLibrary).mount('#app')
 ```
 
 You can then use the components you need in your project:
 
 ```html
 <orama-chat-box
-  [index]="{
-    api_key: 'your index api key',
-    endpoint: 'your index endpoint',  
+  :index="{
+    api_key: 'yl2JSnjLNBV6FVfUWEyadpjFr6KzPiDR',
+    endpoint: 'https://cloud.orama.run/v1/indexes/recipes-m7w9mm',
   }"
-></orama-chat-box>
+/>
 ```

apps/storybook/stories/internal/orama-modal.stories.tsx

@@ -0,0 +1,31 @@
+import type { StoryObj, Meta } from '@storybook/web-components'
+import type { Components } from '@orama/wc-components'
+import { spread } from '@open-wc/lit-helpers'
+import { html } from 'lit-html'
+
+const meta: Meta<Components.OramaText> = {
+  title: 'Components/Internal/Modal',
+  tags: ['autodocs'],
+} satisfies Meta
+
+export default meta
+type Story = StoryObj<Components.OramaModal>
+
+const Template = (content: string) => (args) =>
+  html`
+  <orama-modal ${spread(args)}>
+    <div style="padding: 20px;">
+      <orama-text as='h2' styled-as='p' bold>Modal Title</orama-text>
+      <orama-text>${content}</orama-text>
+    </div>
+  </orama-modal>
+`
+
+export const Modal: Story = {
+  render: Template(
+    'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec purus nec elit lacinia tincidunt. Nullam nec purus nec elit lacinia tincidunt.',
+  ),
+  args: {
+    open: true,
+  },
+}

apps/storybook/stories/internal/orama-sliding-panel.stories.tsx

@@ -0,0 +1,31 @@
+import type { StoryObj, Meta } from '@storybook/web-components'
+import type { Components } from '@orama/wc-components'
+import { spread } from '@open-wc/lit-helpers'
+import { html } from 'lit-html'
+
+const meta: Meta<Components.OramaText> = {
+  title: 'Components/Internal/Sliding Panel',
+  tags: ['autodocs'],
+} satisfies Meta
+
+export default meta
+type Story = StoryObj<Components.OramaSlidingPanel>
+
+const Template = (content: string) => (args) =>
+  html`
+  <orama-sliding-panel ${spread(args)}>
+    <div style="padding: 20px;">
+      <orama-text as='h2' styled-as='p' bold>Sliding Panel Title</orama-text>
+      <orama-text>${content}</orama-text>
+    </div>
+  </orama-sliding-panel>
+`
+
+export const Panel: Story = {
+  render: Template(
+    'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec purus nec elit lacinia tincidunt. Nullam nec purus nec elit lacinia tincidunt.',
+  ),
+  args: {
+    open: true,
+  },
+}

apps/storybook/stories/public/orama-chat-box.stories.tsx

@@ -17,9 +17,8 @@ const demoIndexes = {
 }
 
 const meta: Meta = {
-  title: 'Components/Public/ChatBox',
+  title: 'Components/ChatBox',
   component: 'orama-chat-box',
-  tags: ['autodocs'],
   argTypes: {
     index: {
       options: Object.keys(demoIndexes),

apps/storybook/stories/public/orama-search-box.stories.tsx

@@ -3,9 +3,8 @@ import type { Components } from '@orama/wc-components'
 type Story = StoryObj<Components.OramaSearchBox>
 
 const meta: Meta<Components.OramaSearchBox> = {
-  title: 'Components/Public/SearchBox',
+  title: 'Components/SearchBox',
   component: 'orama-search-box',
-  tags: ['autodocs'],
   argTypes: {
     colorScheme: {
       options: ['light', 'dark', 'system'],
@@ -36,6 +35,7 @@ export const SearchBox: Story = {
     resultMap: {
       description: 'title',
     },
+    colorScheme: 'dark',
     themeConfig: {
       colors: {
         light: {

apps/storybook/stories/public/orama-search-button.stories.tsx

@@ -2,9 +2,8 @@ import type { StoryObj, Meta } from '@storybook/web-components'
 import type { Components } from '@orama/wc-components'
 
 const meta: Meta<Components.OramaSearchButton> = {
-  title: 'Components/Public/SearchButton',
+  title: 'Components/SearchButton',
   component: 'orama-search-button',
-  tags: ['autodocs'],
 } satisfies Meta
 
 export default meta

packages/ui-stencil-react/src/components/stencil-generated/index.ts

@@ -11,19 +11,23 @@ export const OramaButton = /*@__PURE__*/createReactComponent<JSX.OramaButton, HT
 export const OramaChat = /*@__PURE__*/createReactComponent<JSX.OramaChat, HTMLOramaChatElement>('orama-chat');
 export const OramaChatAssistentMessage = /*@__PURE__*/createReactComponent<JSX.OramaChatAssistentMessage, HTMLOramaChatAssistentMessageElement>('orama-chat-assistent-message');
 export const OramaChatBox = /*@__PURE__*/createReactComponent<JSX.OramaChatBox, HTMLOramaChatBoxElement>('orama-chat-box');
+export const OramaChatButton = /*@__PURE__*/createReactComponent<JSX.OramaChatButton, HTMLOramaChatButtonElement>('orama-chat-button');
 export const OramaChatMessagesContainer = /*@__PURE__*/createReactComponent<JSX.OramaChatMessagesContainer, HTMLOramaChatMessagesContainerElement>('orama-chat-messages-container');
 export const OramaChatSuggestions = /*@__PURE__*/createReactComponent<JSX.OramaChatSuggestions, HTMLOramaChatSuggestionsElement>('orama-chat-suggestions');
 export const OramaChatUserMessage = /*@__PURE__*/createReactComponent<JSX.OramaChatUserMessage, HTMLOramaChatUserMessageElement>('orama-chat-user-message');
 export const OramaDotsLoader = /*@__PURE__*/createReactComponent<JSX.OramaDotsLoader, HTMLOramaDotsLoaderElement>('orama-dots-loader');
 export const OramaFacets = /*@__PURE__*/createReactComponent<JSX.OramaFacets, HTMLOramaFacetsElement>('orama-facets');
+export const OramaFooter = /*@__PURE__*/createReactComponent<JSX.OramaFooter, HTMLOramaFooterElement>('orama-footer');
 export const OramaInput = /*@__PURE__*/createReactComponent<JSX.OramaInput, HTMLOramaInputElement>('orama-input');
 export const OramaLogoIcon = /*@__PURE__*/createReactComponent<JSX.OramaLogoIcon, HTMLOramaLogoIconElement>('orama-logo-icon');
 export const OramaMarkdown = /*@__PURE__*/createReactComponent<JSX.OramaMarkdown, HTMLOramaMarkdownElement>('orama-markdown');
+export const OramaModal = /*@__PURE__*/createReactComponent<JSX.OramaModal, HTMLOramaModalElement>('orama-modal');
 export const OramaNavigationBar = /*@__PURE__*/createReactComponent<JSX.OramaNavigationBar, HTMLOramaNavigationBarElement>('orama-navigation-bar');
 export const OramaSearch = /*@__PURE__*/createReactComponent<JSX.OramaSearch, HTMLOramaSearchElement>('orama-search');
 export const OramaSearchBox = /*@__PURE__*/createReactComponent<JSX.OramaSearchBox, HTMLOramaSearchBoxElement>('orama-search-box');
 export const OramaSearchButton = /*@__PURE__*/createReactComponent<JSX.OramaSearchButton, HTMLOramaSearchButtonElement>('orama-search-button');
 export const OramaSearchResults = /*@__PURE__*/createReactComponent<JSX.OramaSearchResults, HTMLOramaSearchResultsElement>('orama-search-results');
+export const OramaSlidingPanel = /*@__PURE__*/createReactComponent<JSX.OramaSlidingPanel, HTMLOramaSlidingPanelElement>('orama-sliding-panel');
 export const OramaText = /*@__PURE__*/createReactComponent<JSX.OramaText, HTMLOramaTextElement>('orama-text');
 export const OramaTextarea = /*@__PURE__*/createReactComponent<JSX.OramaTextarea, HTMLOramaTextareaElement>('orama-textarea');
 export const OramaToggler = /*@__PURE__*/createReactComponent<JSX.OramaToggler, HTMLOramaTogglerElement>('orama-toggler');

packages/ui-stencil-vue/lib/components.ts

@@ -22,7 +22,9 @@ export const OramaChat = /*@__PURE__*/ defineContainer<JSX.OramaChat>('orama-cha
   'placeholder',
   'sourceBaseUrl',
   'sourcesMap',
-  'showClearChat'
+  'showClearChat',
+  'defaultTerm',
+  'focusInput'
 ]);
 
 
@@ -39,6 +41,14 @@ export const OramaChatBox = /*@__PURE__*/ defineContainer<JSX.OramaChatBox>('ora
 ]);
 
 
+export const OramaChatButton = /*@__PURE__*/ defineContainer<JSX.OramaChatButton>('orama-chat-button', undefined, [
+  'label',
+  'active',
+  'highlight',
+  'class'
+]);
+
+
 export const OramaChatMessagesContainer = /*@__PURE__*/ defineContainer<JSX.OramaChatMessagesContainer>('orama-chat-messages-container', undefined, [
   'interactions'
 ]);
@@ -65,6 +75,12 @@ export const OramaFacets = /*@__PURE__*/ defineContainer<JSX.OramaFacets>('orama
 ]);
 
 
+export const OramaFooter = /*@__PURE__*/ defineContainer<JSX.OramaFooter>('orama-footer', undefined, [
+  'class',
+  'colorScheme'
+]);
+
+
 export const OramaInput = /*@__PURE__*/ defineContainer<JSX.OramaInput>('orama-input', undefined, [
   'name',
   'size',
@@ -87,6 +103,12 @@ export const OramaMarkdown = /*@__PURE__*/ defineContainer<JSX.OramaMarkdown>('o
 ]);
 
 
+export const OramaModal = /*@__PURE__*/ defineContainer<JSX.OramaModal>('orama-modal', undefined, [
+  'open',
+  'mainTitle'
+]);
+
+
 export const OramaNavigationBar = /*@__PURE__*/ defineContainer<JSX.OramaNavigationBar>('orama-navigation-bar', undefined);
 
 
@@ -115,9 +137,16 @@ export const OramaSearchResults = /*@__PURE__*/ defineContainer<JSX.OramaSearchR
 ]);
 
 
+export const OramaSlidingPanel = /*@__PURE__*/ defineContainer<JSX.OramaSlidingPanel>('orama-sliding-panel', undefined, [
+  'open',
+  'closed'
+]);
+
+
 export const OramaText = /*@__PURE__*/ defineContainer<JSX.OramaText>('orama-text', undefined, [
   'as',
   'styledAs',
+  'bold',
   'class',
   'align',
   'inactive'

packages/ui-stencil/extract-scss-vars.js

@@ -3,8 +3,33 @@ const sass = require('sass')
 const postcss = require('postcss')
 const postcssScss = require('postcss-scss')
 
-// Path to your SCSS file
-const scssFilePath = './src/styles/_colors.scss'
+const scssFilePath = './src/styles/_tempColors.scss'
+
+function createTempColorsFile() {
+  const colorsContent = fs.readFileSync('./src/styles/_colors.scss', 'utf-8')
+  const primitiveColors = colorsContent.match(/(\$[a-zA-Z0-9-]+:.*;)/g).join('\n')
+  const primitiveColorsToExport = primitiveColors.replace(/\$/g, '').replace(/;/g, ';').replace(/:/g, ':')
+
+  const tempColorsContent = `
+  @import 'colors';
+
+  :export {
+    ${primitiveColorsToExport}
+    @each $key, $value in $palette {
+      @each $subkey, $subvalue in $value {
+        --#{$key}-color-#{$subkey}-light: #{$subvalue};
+      }
+    }
+
+    @each $key, $value in $paletteDark {
+      @each $subkey, $subvalue in $value {
+        --#{$key}-color-#{$subkey}-dark: #{$subvalue};
+      }
+    }
+  }
+  `
+  fs.writeFileSync('./src/styles/_tempColors.scss', tempColorsContent, 'utf-8')
+}
 
 // Function to compile SCSS to CSS
 function compileScss(filePath) {
@@ -58,6 +83,7 @@ async function extractExportVariables(css) {
 // Main function
 ;(async () => {
   try {
+    createTempColorsFile()
     const css = compileScss(scssFilePath)
     const variables = await extractExportVariables(css)
 
@@ -69,6 +95,8 @@ async function extractExportVariables(css) {
 
     // Write the JavaScript file
     fs.writeFileSync('./src/config/colors.ts', `${comment}\n${jsContent}`, 'utf-8')
+    // remove the temporary file
+    fs.unlinkSync(scssFilePath)
     console.log('SCSS :export variables have been extracted to _colors.js')
   } catch (error) {
     console.error('Error extracting SCSS :export variables:', error)