embed layout improvements (#45)

* feat: export defaultConfig * feat: hide the back button on mobile embed view * feat: use anchors in search results and new configurable props linksTarget, linksRel * fix: remove target prop * refactor: remove unused context variables * chore: convert scss to js before build * feat: footer link with utm source and medium * refactor: search box arrow up/down navigation * feat: orama-embed component * fix: wrapperRef * refactor: clean up search-box component
oramasearch · Oct 11, 2024 · f7833fd · f7833fd
1 parent 7ad5901
commit f7833fd
Show file tree

Hide file tree

Showing 38 changed files with 484 additions and 243 deletions.
diff --git a/apps/storybook/stories/public/orama-search-box.stories.tsx b/apps/storybook/stories/public/orama-search-box.stories.tsx
@@ -25,13 +25,6 @@ const meta: Meta<Components.OramaSearchBox & { preset: keyof DemoIndexConfig }>
         },
       },
     },
-    layout: {
-      options: ['embed', 'modal'],
-      control: { type: 'select' },
-      table: {
-        defaultValue: { summary: 'modal' },
-      },
-    },
     chatPlaceholder: {
       table: {
         type: {
@@ -71,9 +64,32 @@ const meta: Meta<Components.OramaSearchBox & { preset: keyof DemoIndexConfig }>
 }
 export default meta
 
-// TODO: Poor controls: https://linear.app/oramasearch/issue/ORM-1823/poor-serachbox-storybook-controls
-const Template = ({ preset, chatPlaceholder, searchPlaceholder, colorScheme, layout, disableChat }) => {
-  return html`<orama-search-box
+const Template = ({ preset, chatPlaceholder, searchPlaceholder, colorScheme, disableChat }) => {
+  return html`<div>
+      <div style="width: 240px">
+        <orama-search-button>Search...</orama-search-button>
+      </div>
+      <orama-search-box
+      .open=${preset?.open}
+      .facetProperty=${preset?.facetProperty}
+      .resultMap=${preset?.resultMap}
+      .colorScheme=${colorScheme}
+      .themeConfig=${preset.themeConfig}
+      .index=${preset.index}
+      .instance=${preset.instance}
+      .suggestions=${preset?.suggestions}
+      .sourceBaseUrl=${preset?.sourceBaseUrl}
+      .sourcesMap=${preset?.sourcesMap}
+      .disableChat=${disableChat}
+      .chatPlaceholder=${chatPlaceholder}
+      .searchPlaceholder=${searchPlaceholder}
+    ></orama-search-box></div>`
+}
+
+const TemplateAsEmbed = ({ preset, chatPlaceholder, searchPlaceholder, colorScheme, disableChat }) => {
+  return html`<div style="height: 420px">
+    <orama-search-box
+      layout="embed"
       .open=${preset?.open}
       .facetProperty=${preset?.facetProperty}
       .resultMap=${preset?.resultMap}
@@ -85,10 +101,10 @@ const Template = ({ preset, chatPlaceholder, searchPlaceholder, colorScheme, lay
       .sourceBaseUrl=${preset?.sourceBaseUrl}
       .sourcesMap=${preset?.sourcesMap}
       .disableChat=${disableChat}
-      .layout=${layout}
       .chatPlaceholder=${chatPlaceholder}
       .searchPlaceholder=${searchPlaceholder}
-    ></orama-search-box>`
+    ></orama-search-box>
+  </div>`
 }
 
 type Story = StoryObj<Components.OramaSearchBox & { preset: keyof DemoIndexConfig }>
@@ -98,7 +114,17 @@ export const SearchBox: Story = {
   args: {
     preset: 'orama',
     colorScheme: 'light',
-    layout: 'modal',
+    searchPlaceholder: 'Search...',
+    chatPlaceholder: 'Ask me anything...',
+    disableChat: false,
+  },
+}
+
+export const SearchBoxAsEmbed: Story = {
+  render: TemplateAsEmbed as any,
+  args: {
+    preset: 'orama',
+    colorScheme: 'light',
     searchPlaceholder: 'Search...',
     chatPlaceholder: 'Ask me anything...',
     disableChat: false,

diff --git a/apps/storybook/stories/public/orama-search-button.stories.tsx b/apps/storybook/stories/public/orama-search-button.stories.tsx
@@ -43,13 +43,13 @@ const Template = (label: string) => (args) => {
   return html`
     <div style="display: flex; justify-content: flex-start">
       <div style="width: 240px">
-      <orama-search-button
-        label="${args.label}"
-        .colorScheme=${args.colorScheme}
-        .size=${args.size}
-      >
-          ${label}
-      </orama-search-button>
+        <orama-search-button
+          label="${args.label}"
+          .colorScheme=${args.colorScheme}
+          .size=${args.size}
+        >
+            ${label}
+        </orama-search-button>
       </div>
       <orama-search-box
         .colorScheme=${args.colorScheme}

diff --git a/package.json b/package.json
@@ -3,7 +3,7 @@
   "name": "stencil-design-system",
   "version": "0.0.28",
   "scripts": {
-    "build": "turbo run build",
+    "build": "pnpm convert-scss-to-js && turbo run build",
     "build:storybook": "turbo run build --filter=storybook",
     "clean": "turbo run clean",
     "dev": "turbo run dev --filter=@orama/wc-components --filter=storybook",

diff --git a/packages/ui-stencil-react/src/components/stencil-generated/index.ts b/packages/ui-stencil-react/src/components/stencil-generated/index.ts
@@ -17,6 +17,7 @@ export const OramaChatMessagesContainer = /*@__PURE__*/createReactComponent<JSX.
 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 OramaEmbed = /*@__PURE__*/createReactComponent<JSX.OramaEmbed, HTMLOramaEmbedElement>('orama-embed');
 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');

diff --git a/packages/ui-stencil-vue/lib/components.ts b/packages/ui-stencil-vue/lib/components.ts
@@ -22,6 +22,8 @@ export const OramaButton = /*@__PURE__*/ defineContainer<JSX.OramaButton>('orama
 export const OramaChat = /*@__PURE__*/ defineContainer<JSX.OramaChat>('orama-chat', undefined, [
   'placeholder',
   'sourceBaseUrl',
+  'linksTarget',
+  'linksRel',
   'sourcesMap',
   'showClearChat',
   'defaultTerm',
@@ -39,6 +41,8 @@ export const OramaChatBox = /*@__PURE__*/ defineContainer<JSX.OramaChatBox>('ora
   'index',
   'clientInstance',
   'sourceBaseUrl',
+  'linksTarget',
+  'linksRel',
   'placeholder',
   'sourcesMap',
   'suggestions'
@@ -74,6 +78,9 @@ export const OramaChatUserMessage = /*@__PURE__*/ defineContainer<JSX.OramaChatU
 export const OramaDotsLoader = /*@__PURE__*/ defineContainer<JSX.OramaDotsLoader>('orama-dots-loader', undefined);
 
 
+export const OramaEmbed = /*@__PURE__*/ defineContainer<JSX.OramaEmbed>('orama-embed', undefined);
+
+
 export const OramaFacets = /*@__PURE__*/ defineContainer<JSX.OramaFacets>('orama-facets', undefined, [
   'facets',
   'selectedFacet',
@@ -121,6 +128,7 @@ export const OramaModal = /*@__PURE__*/ defineContainer<JSX.OramaModal>('orama-m
 
 export const OramaNavigationBar = /*@__PURE__*/ defineContainer<JSX.OramaNavigationBar>('orama-navigation-bar', undefined, [
   'handleClose',
+  'showBackButton',
   'showChatActions'
 ]);
 
@@ -130,6 +138,8 @@ export const OramaSearch = /*@__PURE__*/ defineContainer<JSX.OramaSearch>('orama
   'focusInput',
   'suggestions',
   'sourceBaseUrl',
+  'linksTarget',
+  'linksRel',
   'disableChat'
 ]);
 
@@ -143,6 +153,8 @@ export const OramaSearchBox = /*@__PURE__*/ defineContainer<JSX.OramaSearchBox>(
   'facetProperty',
   'resultMap',
   'sourceBaseUrl',
+  'linksTarget',
+  'linksRel',
   'sourcesMap',
   'disableChat',
   'layout',
@@ -164,6 +176,8 @@ export const OramaSearchButton = /*@__PURE__*/ defineContainer<JSX.OramaSearchBu
 
 export const OramaSearchResults = /*@__PURE__*/ defineContainer<JSX.OramaSearchResults>('orama-search-results', undefined, [
   'sourceBaseUrl',
+  'linksTarget',
+  'linksRel',
   'sections',
   'suggestions',
   'searchTerm',
@@ -184,7 +198,10 @@ export const OramaSlidingPanel = /*@__PURE__*/ defineContainer<JSX.OramaSlidingP
 export const OramaSources = /*@__PURE__*/ defineContainer<JSX.OramaSources>('orama-sources', undefined, [
   'sources',
   'sourceBaseURL',
-  'sourcesMap'
+  'linksTarget',
+  'linksRel',
+  'sourcesMap',
+  'sourceItemClick'
 ]);