Feature/orm-1438

apps/storybook/.storybook/main.js

@@ -1,33 +1,30 @@
-import { join, dirname } from "path";
+import { join, dirname } from 'path'
 
 /**
  * This function is used to resolve the absolute path of a package.
  * It is needed in projects that use Yarn PnP or are set up within a monorepo.
  */
 function getAbsolutePath(value) {
-  return dirname(require.resolve(join(value, "package.json")));
+  return dirname(require.resolve(join(value, 'package.json')))
 }
 
 /** @type { import('@storybook/html-vite').StorybookConfig } */
 const config = {
-  stories: [
-    "../stories/**/*.mdx",
-    "../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)",
-  ],
+  stories: ['../stories/**/*.mdx', '../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   addons: [
-    getAbsolutePath("@storybook/addon-links"),
-    getAbsolutePath("@storybook/addon-essentials"),
-    getAbsolutePath("@storybook/addon-interactions"),
-    getAbsolutePath("@storybook/addon-styling-webpack"),
-    getAbsolutePath("@storybook/addon-designs"),
-    getAbsolutePath("@storybook/addon-themes"),
-    getAbsolutePath("@storybook/addon-a11y"),
-    "@chromatic-com/storybook"
+    getAbsolutePath('@storybook/addon-links'),
+    getAbsolutePath('@storybook/addon-essentials'),
+    getAbsolutePath('@storybook/addon-interactions'),
+    getAbsolutePath('@storybook/addon-styling-webpack'),
+    getAbsolutePath('@storybook/addon-designs'),
+    getAbsolutePath('@storybook/addon-themes'),
+    getAbsolutePath('@storybook/addon-a11y'),
+    '@chromatic-com/storybook',
   ],
   framework: {
-    name: getAbsolutePath("@storybook/html-vite"),
+    name: getAbsolutePath('@storybook/html-vite'),
     options: {},
   },
   docs: {},
-};
-export default config;
+}
+export default config

apps/storybook/.storybook/preview.js

@@ -1,5 +1,6 @@
 import { defineCustomElements } from './../../../packages/ui-stencil/loader'
 import 'ui-stencil/dist/orama-ui/orama-ui.css'
+import './storybook.css'
 
 defineCustomElements()
 
@@ -11,7 +12,7 @@ const preview = {
   decorators: [
     (story, context) => {
       const classTheme = context.globals?.backgrounds?.value === DARK_THEME_BG ? 'theme-dark' : 'theme-light'
-      return `<div id="orama-ui" class="${classTheme}" style="padding: 20px">${story()}</div>`
+      return `<div id="orama-ui" class="${classTheme}">${story()}</div>`
     },
   ],
   parameters: {
@@ -22,7 +23,7 @@ const preview = {
       },
     },
     backgrounds: {
-      default: 'dark',
+      default: 'light',
       values: [
         {
           name: 'dark',

apps/storybook/.storybook/storybook.css

@@ -0,0 +1,3 @@
+.sb-show-main.sb-main-padded {
+  /* padding: 0 !important; */
+}

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

@@ -0,0 +1,24 @@
+import type { StoryObj, Meta } from '@storybook/html'
+
+const meta = {
+  title: 'Internal/Button',
+  component: 'orama-button',
+} satisfies Meta
+
+export default meta
+
+type Story = StoryObj
+
+const Template = (content: string) => (args) =>
+  `
+  <orama-button variant=${args.variant} class=${args.class}>${content}</orama-button>
+`
+
+export const Primary: Story = {
+  render: Template('Primary button'),
+  args: {
+    variant: 'primary',
+    class: 'my-optional-class',
+    type: 'button',
+  },
+}

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

@@ -1,8 +1,8 @@
 import type { StoryObj, Meta } from '@storybook/web-components'
 
 const meta: Meta = {
-  title: 'Demo Preview/OramaChat',
-  component: 'orama-chat'
+  title: 'Internal/OramaChat',
+  component: 'orama-chat',
 }
 
 export default meta
@@ -13,12 +13,11 @@ const Template = (args) => {
   <div style="height: 800px; width: 360px; border: 1px solid white; display: flex; flex-direction: column;">
     <orama-chat ${{ ...args }}></orama-chat>
   </div>
-
   `
 }
 
 // More on writing stories with args: https://storybook.js.org/docs/html/writing-stories/args
 export const OramaChat: Story = {
   render: Template,
-  args: {}
+  args: {},
 }

apps/storybook/stories/orama-facets.stories.tsx

@@ -0,0 +1,30 @@
+// Create a story for the OramaFacets web component
+import { h } from '@stencil/core'
+import type { StoryObj, Meta } from '@storybook/web-components'
+
+const meta: Meta = {
+  title: 'Internal/Facets',
+  component: 'orama-facets',
+}
+
+export default meta
+
+type Story = StoryObj
+
+const Template = (args) => {
+  return `
+  <div>
+    <p>Something that uses facets</p>
+    <orama-facets current-facet=${args.currentFacet} facets=${JSON.stringify(args.facets)}></orama-facets>
+  </div>
+  `
+}
+
+// More on writing stories with args: https://storybook.js.org/docs/html/writing-stories/args
+export const Facets: Story = {
+  render: Template,
+  args: {
+    facets: ['FacetOne', 'FacetTwo', 'FacetThree'],
+    currentFacet: 'Facet 2',
+  },
+}

apps/storybook/stories/orama-search-results.stories.tsx

@@ -1,18 +1,36 @@
-import type { StoryObj, Meta } from "@storybook/html";
+import type { StoryObj, Meta } from '@storybook/html'
 
 const meta = {
-  title: "Internal/Search Results",
-  component: "orama-search-results",
-} satisfies Meta;
+  title: 'Internal/Search Results',
+  component: 'orama-search-results',
+} satisfies Meta
 
-export default meta;
-type Story = StoryObj;
+export default meta
+type Story = StoryObj
 
 const Template = (args) => `
-  <orama-search-results ${{ ...args }}></orama-search-results>
-`;
+  <orama-search-results items=${args.items} search-term='test'</orama-search-results>
+`
 
-export const Default: Story = {
+export const NoResults: Story = {
   render: Template,
   args: {},
-};
+}
+
+export const WithResults: Story = {
+  render: Template,
+  args: {
+    items: [
+      {
+        id: '1',
+        title: 'Title 1',
+        description: 'Description 1',
+      },
+      {
+        id: '2',
+        title: 'Title 2',
+        description: 'Description 2',
+      },
+    ],
+  },
+}

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

@@ -2,18 +2,31 @@ import type { StoryObj, Meta } from '@storybook/html'
 
 const meta: Meta = {
   title: 'Public/SearchBox',
-  component: 'search-box'
+  component: 'search-box',
+
+  argTypes: {
+    facetProperty: {
+      control: { type: 'text' },
+    },
+  },
 } satisfies Meta
 
 export default meta
 type Story = StoryObj
 
 // More on writing stories with args: https://storybook.js.org/docs/html/writing-stories/args
+const Template = (args) => {
+  return `
+    <search-box open="true" facet-property=${args.facetProperty}></search-box>
+  `
+}
+
 export const SearchBox: Story = {
-  render: () => `
-  <div style="height: 800px; width: 360px; border: 1px solid white; overflow: hidden; padding: 8px;"> 
-    <search-box open="true"></search-box>
-  </div>`
+  render: Template,
+  args: {
+    class: 'my-optional-class',
+    facetProperty: 'category',
+  },
 }
 
 export const SearchBoxWithToggler: Story = {
@@ -23,5 +36,5 @@ export const SearchBoxWithToggler: Story = {
     <div style="height: 800px; width: 360px; overflow: hidden;"> 
       <search-box></search-box>
     </div>
-  </div>`
+  </div>`,
 }

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

@@ -7,10 +7,12 @@ import type { JSX } from 'ui-stencil';
 
 
 
+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');
 export const OramaChatMessagesContainer = /*@__PURE__*/createReactComponent<JSX.OramaChatMessagesContainer, HTMLOramaChatMessagesContainerElement>('orama-chat-messages-container');
 export const OramaChatUserMessage = /*@__PURE__*/createReactComponent<JSX.OramaChatUserMessage, HTMLOramaChatUserMessageElement>('orama-chat-user-message');
+export const OramaFacets = /*@__PURE__*/createReactComponent<JSX.OramaFacets, HTMLOramaFacetsElement>('orama-facets');
 export const OramaInput = /*@__PURE__*/createReactComponent<JSX.OramaInput, HTMLOramaInputElement>('orama-input');
 export const OramaSearch = /*@__PURE__*/createReactComponent<JSX.OramaSearch, HTMLOramaSearchElement>('orama-search');
 export const OramaSearchResults = /*@__PURE__*/createReactComponent<JSX.OramaSearchResults, HTMLOramaSearchResultsElement>('orama-search-results');

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

@@ -8,6 +8,14 @@ import type { JSX } from 'ui-stencil';
 
 
 
+export const OramaButton = /*@__PURE__*/ defineContainer<JSX.OramaButton>('orama-button', undefined, [
+  'as',
+  'class',
+  'variant',
+  'type'
+]);
+
+
 export const OramaChat = /*@__PURE__*/ defineContainer<JSX.OramaChat>('orama-chat', undefined);
 
 
@@ -24,6 +32,11 @@ export const OramaChatUserMessage = /*@__PURE__*/ defineContainer<JSX.OramaChatU
 ]);
 
 
+export const OramaFacets = /*@__PURE__*/ defineContainer<JSX.OramaFacets>('orama-facets', undefined, [
+  'facets'
+]);
+
+
 export const OramaInput = /*@__PURE__*/ defineContainer<JSX.OramaInput>('orama-input', undefined, [
   'name',
   'size',
@@ -41,14 +54,16 @@ export const OramaSearch = /*@__PURE__*/ defineContainer<JSX.OramaSearch>('orama
 
 export const OramaSearchResults = /*@__PURE__*/ defineContainer<JSX.OramaSearchResults>('orama-search-results', undefined, [
   'items',
-  'searchTerm'
+  'searchTerm',
+  'oramaItemClick'
 ]);
 
 
 export const OramaText = /*@__PURE__*/ defineContainer<JSX.OramaText>('orama-text', undefined, [
   'as',
   'styledAs',
-  'class'
+  'class',
+  'align'
 ]);
 
 
@@ -69,6 +84,7 @@ export const OramaToggler = /*@__PURE__*/ defineContainer<JSX.OramaToggler>('ora
 export const SearchBox = /*@__PURE__*/ defineContainer<JSX.SearchBox>('search-box', undefined, [
   'themeConfig',
   'color',
+  'facetProperty',
   'open'
 ]);