Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

embed layout improvements #45

Merged
merged 19 commits into from
Oct 11, 2024
Merged

embed layout improvements #45

Show file tree
Hide file tree
Changes from 16 commits
Commits
Show all changes
19 commits
Select commit Hold shift + click to select a range
3afcd25
fix: postcss-import dep
faustoq Oct 10, 2024
537c0e2
feat: export defaultConfig
faustoq Oct 10, 2024
b2b5dde
feat: hide the back button on mobile embed view
faustoq Oct 10, 2024
3291407
feat: use anchors in search results and new configurable props linksT…
faustoq Oct 10, 2024
6872149
fix: revert postcss-import dep
faustoq Oct 10, 2024
17d0263
fix: remove target prop
faustoq Oct 10, 2024
18d646a
refactor: remove unused context variables
faustoq Oct 10, 2024
b97bcba
chore: convert scss to js before build
faustoq Oct 10, 2024
27061f7
feat: modal layout
faustoq Oct 10, 2024
7c9a5cf
fix: innerModalRef
faustoq Oct 10, 2024
6a653af
feat: footer link with utm source and medium
faustoq Oct 10, 2024
db88c7f
refactor: search box arrow up/down navigation
faustoq Oct 10, 2024
be59847
feat: orama-embed component
faustoq Oct 11, 2024
bd1e0f7
fix: wrapperRef
faustoq Oct 11, 2024
5cbe4db
fix: remove unused type
faustoq Oct 11, 2024
34bf689
fix: remove unused state and element
faustoq Oct 11, 2024
61b9fa6
fix: remove embed layout
faustoq Oct 11, 2024
0b8e7bd
fix: remove console log
faustoq Oct 11, 2024
ba4f5cc
refactor: clean up search-box component
faustoq Oct 11, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
52 changes: 39 additions & 13 deletions apps/storybook/stories/public/orama-search-box.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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: {
Expand Down Expand Up @@ -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}
Expand All @@ -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 }>
Expand All @@ -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,
Expand Down
14 changes: 7 additions & 7 deletions apps/storybook/stories/public/orama-search-button.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
1 change: 1 addition & 0 deletions packages/ui-stencil-react/src/components/stencil-generated/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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');
Expand Down
19 changes: 18 additions & 1 deletion packages/ui-stencil-vue/lib/components.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand All @@ -39,6 +41,8 @@ export const OramaChatBox = /*@__PURE__*/ defineContainer<JSX.OramaChatBox>('ora
'index',
'clientInstance',
'sourceBaseUrl',
'linksTarget',
'linksRel',
'placeholder',
'sourcesMap',
'suggestions'
Expand Down Expand Up @@ -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',
Expand Down Expand Up @@ -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'
]);

Expand All @@ -130,6 +138,8 @@ export const OramaSearch = /*@__PURE__*/ defineContainer<JSX.OramaSearch>('orama
'focusInput',
'suggestions',
'sourceBaseUrl',
'linksTarget',
'linksRel',
'disableChat'
]);

Expand All @@ -143,6 +153,8 @@ export const OramaSearchBox = /*@__PURE__*/ defineContainer<JSX.OramaSearchBox>(
'facetProperty',
'resultMap',
'sourceBaseUrl',
'linksTarget',
'linksRel',
'sourcesMap',
'disableChat',
'layout',
Expand All @@ -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',
Expand All @@ -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'
]);


Expand Down
Loading
Loading