Merge pull request #23 from askorama/feature/orm-1499

Feature/orm-1499
oramasearch · Aug 8, 2024 · 09e93f0 · 09e93f0
2 parents 7c378c7 + 11aded3
commit 09e93f0
Show file tree

Hide file tree

Showing 57 changed files with 823 additions and 260 deletions.
diff --git a/apps/storybook/stories/config.ts b/apps/storybook/stories/config.ts
@@ -0,0 +1,104 @@
+import type { Components } from '@orama/wc-components'
+
+export type DemoIndexConfig = Record<string, Components.OramaSearchBox>
+
+const demoIndexes: DemoIndexConfig = {
+  orama: {
+    index: {
+      api_key: 'LerNlbp6379jVKaPs4wt2nZT4MJZbU1J',
+      endpoint: 'https://cloud.orama.run/v1/indexes/docs-orama-b3f5xd',
+    },
+    placeholder: 'What do you want to learn about Orama?',
+    sourceBaseUrl: 'https://docs.orama.com',
+    sourcesMap: {
+      description: 'content',
+    },
+    suggestions: [
+      'Why is Orama better than other search or AI solutions?',
+      'How does Orama ensure correct answers?',
+      'What are the steps to implement?',
+    ],
+    themeConfig: {
+      colors: {
+        light: {
+          '--text-color-primary': '',
+        },
+        dark: {
+          '--background-color-primary': '',
+          '--background-color-secondary': '',
+          '--background-color-tertiary': '',
+          '--border-color-primary': '',
+          '--backdrop-background-color-primary': '',
+        },
+      },
+    },
+    facetProperty: 'category',
+    resultMap: {
+      description: 'content',
+      section: 'category',
+    },
+  },
+  recipes: {
+    index: {
+      api_key: 'yl2JSnjLNBV6FVfUWEyadpjFr6KzPiDR',
+      endpoint: 'https://cloud.orama.run/v1/indexes/recipes-m7w9mm',
+    },
+    placeholder: 'What do you want to cook today?',
+    sourcesMap: {
+      description: 'category',
+    },
+    suggestions: [
+      'How do I make a chocolate cake?',
+      'What are the ingredients for a margarita pizza?',
+      'How do I make a vegan lasagna?',
+    ],
+    themeConfig: {
+      colors: {
+        dark: {
+          '--background-color-primary': '#231102',
+          '--background-color-secondary': '#261803',
+          '--background-color-tertiary': '#3a2a2a',
+          '--border-color-primary': '#443737',
+          '--backdrop-background-color-primary': 'rgba(20, 3, 3, 0.7)',
+        },
+      },
+    },
+    facetProperty: 'category',
+    resultMap: {
+      description: 'title',
+      section: 'category',
+    },
+  },
+  videogames: {
+    index: {
+      api_key: 'WL7pKdEqCTPf3G2412x8ecneqVbnkklr',
+      endpoint: 'https://cloud.orama.foo/v1/indexes/videogames-rk139h',
+    },
+    placeholder: 'What do you want to play today?',
+    sourcesMap: {
+      path: 'url',
+    },
+    suggestions: [
+      'What are the best games for PS5?',
+      'How do I beat the final boss in Elden Ring?',
+      'What are the best games for the Nintendo Switch',
+    ],
+    themeConfig: {
+      colors: {
+        light: {
+          '--text-color-primary': '',
+        },
+        dark: {
+          '--text-color-primary': '',
+        },
+      },
+    },
+    facetProperty: 'category',
+    resultMap: {
+      description: 'title',
+      section: 'category',
+    },
+  },
+}
+
+export default demoIndexes
diff --git a/apps/storybook/stories/public/orama-chat-box.stories.tsx b/apps/storybook/stories/public/orama-chat-box.stories.tsx
@@ -1,51 +1,85 @@
-import type { StoryObj, Meta } from '@storybook/web-components'
+import type { Meta, StoryObj } from '@storybook/web-components'
 import type { Components } from '@orama/wc-components'
+import { html } from 'lit-html'
+import demoIndexes from '../config'
+import type { DemoIndexConfig } from '../config'
 
-const demoIndexes = {
-  orama: {
-    api_key: 'LerNlbp6379jVKaPs4wt2nZT4MJZbU1J',
-    endpoint: 'https://cloud.orama.run/v1/indexes/docs-orama-b3f5xd',
-  },
-  recipes: {
-    api_key: 'yl2JSnjLNBV6FVfUWEyadpjFr6KzPiDR',
-    endpoint: 'https://cloud.orama.run/v1/indexes/recipes-m7w9mm',
-  },
-  videogames: {
-    api_key: 'WL7pKdEqCTPf3G2412x8ecneqVbnkklr',
-    endpoint: 'https://cloud.orama.foo/v1/indexes/videogames-rk139h',
-  },
-}
-
-const meta: Meta = {
+const meta: Meta<
+  Components.OramaChatBox & {
+    preset: keyof DemoIndexConfig
+  }
+> = {
   title: 'Components/ChatBox',
   component: 'orama-chat-box',
   argTypes: {
-    index: {
+    preset: {
       options: Object.keys(demoIndexes),
       mapping: demoIndexes,
       control: { type: 'select' },
     },
+    index: {
+      control: { type: 'object' },
+      table: {
+        type: {
+          summary: 'CloudIndexConfig',
+          detail: `{
+  api_key: string
+  endpoint: string
+}`,
+        },
+      },
+    },
+    sourceBaseUrl: {
+      table: {
+        type: {
+          summary: 'string',
+        },
+      },
+    },
+    sourcesMap: {
+      table: {
+        type: {
+          summary: 'SourcesMap',
+          detail: `{
+  title?: string
+  description?: string
+  path?: string
+}`,
+        },
+      },
+    },
+    suggestions: {
+      table: {
+        type: {
+          summary: 'string[]',
+        },
+      },
+    },
   },
   parameters: {
     layout: 'set-height',
   },
 } satisfies Meta
 
 export default meta
-type Story = StoryObj<Components.OramaChatBox>
+
+const Template = ({ preset }) => {
+  return html`
+    <orama-chat-box
+      .index=${preset?.index}
+      placeholder=${preset?.placeholder}
+      sourceBaseUrl=${preset?.sourceBaseUrl}
+      .sourcesMap=${preset?.sourcesMap}
+      .suggestions=${preset?.suggestions}
+    ></orama-chat-box>
+  `
+}
+
+type Story = StoryObj<Components.OramaChatBox & { preset: keyof DemoIndexConfig }>
 
 export const ChatBox: Story = {
+  render: Template,
   args: {
-    placeholder: 'What do you want to learn about Orama?',
-    sourceBaseUrl: 'https://docs.orama.com',
-    index: {
-      api_key: demoIndexes.orama.api_key,
-      endpoint: demoIndexes.orama.endpoint,
-    },
-    sourcesMap: {
-      title: 'title',
-      description: 'description',
-      path: 'path',
-    },
+    preset: 'orama',
   },
 }
diff --git a/apps/storybook/stories/public/orama-search-box.stories.tsx b/apps/storybook/stories/public/orama-search-box.stories.tsx
@@ -1,54 +1,93 @@
-import type { StoryObj, Meta } from '@storybook/web-components'
+import type { Meta, StoryObj } from '@storybook/web-components'
 import type { Components } from '@orama/wc-components'
-type Story = StoryObj<Components.OramaSearchBox>
+import demoIndexes from '../config'
+import { html } from 'lit-html'
+import type { DemoIndexConfig } from '../config'
 
-const meta: Meta<Components.OramaSearchBox> = {
+const meta: Meta<Components.OramaSearchBox & { preset: keyof DemoIndexConfig }> = {
   title: 'Components/SearchBox',
   component: 'orama-search-box',
   argTypes: {
+    preset: {
+      options: Object.keys(demoIndexes),
+      mapping: demoIndexes,
+      control: { type: 'select' },
+    },
+    index: {
+      control: { type: 'object' },
+      table: {
+        type: {
+          summary: 'CloudIndexConfig',
+          detail: `{
+  api_key: string
+  endpoint: string
+}`,
+        },
+      },
+    },
+    sourceBaseUrl: {
+      table: {
+        type: {
+          summary: 'string',
+        },
+      },
+    },
+    sourcesMap: {
+      table: {
+        type: {
+          summary: 'SourcesMap',
+          detail: `{
+  title?: string
+  description?: string
+  path?: string
+}`,
+        },
+      },
+    },
+    suggestions: {
+      table: {
+        type: {
+          summary: 'string[]',
+        },
+      },
+    },
     colorScheme: {
       options: ['light', 'dark', 'system'],
       table: {
         defaultValue: { summary: 'light' },
       },
       control: { type: 'radio' },
     },
+    themeConfig: {
+      table: {
+        type: {
+          summary: 'Partial<TThemeOverrides>',
+        },
+      },
+    },
   },
 }
 export default meta
 
-// const Template = ({ colorScheme, ...args }, context) => {
-//   // todo: I'd like to programatically update parameters background value of colorScheme changes and vice versa
-//   console.log('colorScheme', colorScheme)
-//   console.log('args', args.themeConfig)
+const Template = ({ preset, colorScheme }) => {
+  return html`<orama-search-box
+    open=${preset?.open}
+    .facetProperty=${preset?.facetProperty}
+    .resultMap=${preset?.resultMap}
+    .colorScheme=${colorScheme}
+    .themeConfig=${preset.themeConfig}
+    .index=${preset.index}
+    .suggestions=${preset?.suggestions}
+    .sourceBaseUrl=${preset?.sourceBaseUrl}
+    .sourcesMap=${preset?.sourcesMap}
+  ></orama-search-box>`
+}
 
-//   return html`
-//   <search-box ${spread(args)} color-scheme=${colorScheme}></search-box>
-// `
-// }
+type Story = StoryObj<Components.OramaSearchBox & { preset: keyof DemoIndexConfig }>
 
 export const SearchBox: Story = {
-  // render: Template,
+  render: Template,
   args: {
-    open: true,
-    facetProperty: 'category',
-    resultMap: {
-      description: 'title',
-    },
-    colorScheme: 'dark',
-    themeConfig: {
-      colors: {
-        light: {
-          '--text-color-primary': '',
-        },
-        dark: {
-          '--text-color-primary': '',
-        },
-      },
-    },
-    index: {
-      api_key: 'yl2JSnjLNBV6FVfUWEyadpjFr6KzPiDR',
-      endpoint: 'https://cloud.orama.run/v1/indexes/recipes-m7w9mm',
-    },
+    preset: 'orama',
   },
 }