├── .archbee.yaml ├── .dockerignore ├── .editorconfig ├── .github └── workflows │ ├── codeql-analysis.yml │ ├── deploydemo.yml │ ├── deploydemo_qa.yml │ ├── deployqa-demo-components.yml │ ├── node.js.yml │ ├── push-ui-to-cdn.yml │ ├── release-core.yml │ ├── release-ui.yml │ ├── storybook-release.yml │ └── update-ui-releases-doc.yml ├── .gitignore ├── .prettierrc ├── .vscode ├── extensions.json ├── launch.json └── settings.json ├── LICENSE ├── README.md ├── examples ├── nextjs │ ├── .eslintrc.json │ ├── .gitignore │ ├── README.md │ ├── app │ │ ├── clientKlevuConfig.ts │ │ ├── favicon.ico │ │ ├── globals.css │ │ ├── layout.tsx │ │ ├── page.tsx │ │ └── search │ │ │ ├── common.ts │ │ │ ├── grid.tsx │ │ │ ├── page.tsx │ │ │ └── product.tsx │ ├── next.config.js │ ├── package-lock.json │ ├── package.json │ ├── postcss.config.js │ ├── tailwind.config.js │ └── tsconfig.json ├── nuxt3 │ ├── .gitignore │ ├── README.md │ ├── app.vue │ ├── assets │ │ ├── cart.svg │ │ ├── man-svgrepo-com.svg │ │ ├── shoe-svgrepo-com.svg │ │ └── woman-svgrepo-com.svg │ ├── auto-imports.d.ts │ ├── backup │ │ └── [handle].client.vuek │ ├── components.d.ts │ ├── components │ │ ├── Breadcrumb.vue │ │ ├── Footer.vue │ │ ├── Menu.vue │ │ ├── NavCart.vue │ │ ├── Option.vue │ │ ├── Overlay.vue │ │ ├── Product.vue │ │ ├── QuickSearch.vue │ │ ├── QuickSearchLastSearches.vue │ │ ├── QuickSearchProducts.vue │ │ ├── QuickSearchResults.vue │ │ ├── QuickSearchSuggestions.vue │ │ ├── QuickSearchTrendingProducts.vue │ │ ├── Recommendations.vue │ │ ├── SearchMeta.vue │ │ ├── SlideoutCart.vue │ │ ├── SlideoutFilters.vue │ │ ├── Slider.vue │ │ ├── Snackbar.vue │ │ └── icons │ │ │ ├── Cart.vue │ │ │ ├── Filter.vue │ │ │ ├── Home.vue │ │ │ ├── Man.vue │ │ │ ├── ManShoe.vue │ │ │ └── Woman.vue │ ├── layouts │ │ ├── default.vue │ │ └── searchResults.vue │ ├── nuxt.config.js │ ├── package-lock.json │ ├── package.json │ ├── pages │ │ ├── [...slug].vue │ │ ├── collections │ │ │ └── [handle].vue │ │ ├── index.vue │ │ ├── products │ │ │ └── [id].vue │ │ └── search.vue │ ├── plugins │ │ ├── klevu.js │ │ └── validate-images.js │ ├── public │ │ ├── No-Image-Placeholder.svg │ │ ├── cropped-klevu-icon-32x32.png │ │ └── logo-green.png │ ├── stores │ │ ├── cartStore.js │ │ ├── filtersStore.js │ │ ├── quickSearchStore.js │ │ └── searchStore.js │ ├── styles │ │ └── main.css │ ├── tailwind.config.js │ └── tsconfig.json ├── react-klevu-ui-v2 │ ├── .eslintignore │ ├── .eslintrc │ ├── .gitignore │ ├── .prettier.json │ ├── README.md │ ├── index.html │ ├── package-lock.json │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── klevu.svg │ │ └── purple.jpg │ ├── src │ │ ├── App.tsx │ │ ├── CategoryPage.tsx │ │ ├── CheckoutPage.tsx │ │ ├── HomePage.tsx │ │ ├── ProductPage.tsx │ │ ├── ProductsPage.tsx │ │ ├── SearchResultPage.tsx │ │ ├── assets │ │ │ └── react.svg │ │ ├── cartContext.tsx │ │ ├── constants.tsx │ │ ├── index.css │ │ ├── main.tsx │ │ └── vite-env.d.ts │ ├── tsconfig.json │ ├── tsconfig.node.json │ └── vite.config.ts ├── react-klevu-ui │ ├── Dockerfile │ ├── assets │ │ └── logo-green.png │ ├── entrypoint.sh │ ├── index.html │ ├── package-lock.json │ ├── package.json │ ├── src │ │ ├── app.tsx │ │ ├── cartContext.tsx │ │ ├── index.tsx │ │ ├── routes │ │ │ ├── CategoryPage.tsx │ │ │ ├── CheckoutPage.tsx │ │ │ ├── CustomCategoryPage.tsx │ │ │ ├── HomePage.tsx │ │ │ ├── ProductPage.tsx │ │ │ ├── ProductsPage.tsx │ │ │ └── SearchResultPage.tsx │ │ └── style.css │ └── tsconfig.json ├── react │ ├── .dockerignore │ ├── .gitignore │ ├── Dockerfile │ ├── README.md │ ├── entrypoint.sh │ ├── exports.ts │ ├── index.html │ ├── package-lock.json │ ├── package.json │ ├── public │ │ ├── cropped-klevu-icon-192x192.png │ │ ├── cropped-klevu-icon-32x32.png │ │ └── logo-green.png │ ├── src │ │ ├── app.tsx │ │ ├── cartContext.tsx │ │ ├── components │ │ │ ├── appbar.tsx │ │ │ ├── cartbutton.tsx │ │ │ ├── category.tsx │ │ │ ├── configdrawer.tsx │ │ │ ├── filterdrawer.tsx │ │ │ ├── footer.tsx │ │ │ ├── inspireMe.tsx │ │ │ ├── lastVisited.tsx │ │ │ ├── loadingIndicator.tsx │ │ │ ├── product.tsx │ │ │ ├── quicksearch.tsx │ │ │ └── recommendationBanner.tsx │ │ ├── config.ts │ │ ├── globalVariablesContext.tsx │ │ ├── index.d.ts │ │ ├── index.tsx │ │ ├── routes │ │ │ ├── CategoryPage.tsx │ │ │ ├── CheckoutPage.tsx │ │ │ ├── HomePage.tsx │ │ │ ├── ProductPage.tsx │ │ │ ├── ProductsPage.tsx │ │ │ └── SearchResultPage.tsx │ │ ├── scrollTop.tsx │ │ ├── useCopyToClipboard.ts │ │ └── utils.ts │ ├── tsconfig.json │ ├── tsconfig.lib.json │ └── vite.config.js ├── remix │ ├── .eslintrc.js │ ├── .gitignore │ ├── README.md │ ├── app │ │ ├── components │ │ │ └── product │ │ │ │ ├── product.css │ │ │ │ └── product.tsx │ │ ├── entry.client.tsx │ │ ├── entry.server.tsx │ │ ├── root.tsx │ │ └── routes │ │ │ ├── category.tsx │ │ │ ├── category │ │ │ └── index.tsx │ │ │ └── index.tsx │ ├── package-lock.json │ ├── package.json │ ├── public │ │ └── favicon.ico │ ├── remix.config.js │ ├── remix.env.d.ts │ ├── styles │ │ └── index.css │ └── tsconfig.json ├── vanillajs-klevu-ui-cdn │ ├── custom.js │ └── index.html ├── vanillajs-klevu-ui │ ├── .vscode │ │ └── settings.json │ ├── assets │ │ ├── check.svg │ │ ├── chevron_left.svg │ │ ├── chevron_right.svg │ │ ├── close.svg │ │ ├── expand_more.svg │ │ ├── image_not_supported.svg │ │ ├── info.svg │ │ ├── menu.svg │ │ ├── navigate_before.svg │ │ ├── navigate_next.svg │ │ ├── photo_camera.svg │ │ ├── search.svg │ │ ├── thumb_down.svg │ │ ├── thumb_up.svg │ │ └── upload.svg │ ├── config.ts │ ├── custom.html │ ├── index.html │ ├── package-lock.json │ ├── package.json │ ├── readme.md │ ├── style.css │ └── vite.config.js ├── vanillajs │ ├── README.md │ ├── index.html │ ├── init.ts │ ├── merchandising.html │ ├── merchandising.ts │ ├── package-lock.json │ ├── package.json │ ├── quicksearch.html │ ├── quicksearch.ts │ ├── quicksearch_klaviyo.html │ ├── quicksearch_klaviyo.ts │ ├── recommendations.html │ ├── recommendations.ts │ ├── recommendationskmc.html │ ├── recommendationskmc.ts │ └── utils.ts ├── vue-klevu-ui │ ├── .eslintrc.cjs │ ├── .gitignore │ ├── .prettierrc.json │ ├── .vscode │ │ └── extensions.json │ ├── README.md │ ├── env.d.ts │ ├── index.html │ ├── package-lock.json │ ├── package.json │ ├── public │ │ └── favicon.ico │ ├── src │ │ ├── App.vue │ │ ├── assets │ │ │ ├── base.css │ │ │ └── main.css │ │ └── main.ts │ ├── tsconfig.config.json │ ├── tsconfig.json │ └── vite.config.ts └── vue │ ├── .gitignore │ ├── .vscode │ └── extensions.json │ ├── README.md │ ├── index.html │ ├── package-lock.json │ ├── package.json │ ├── postcss.config.js │ ├── public │ ├── cropped-klevu-icon-192x192.png │ └── cropped-klevu-icon-32x32.png │ ├── src │ ├── App.vue │ ├── assets │ │ └── logo.png │ ├── components │ │ ├── CartIcon.vue │ │ ├── FacetToggle.vue │ │ ├── Option.vue │ │ ├── Product.vue │ │ ├── QuickSearchLastSearches.vue │ │ ├── QuickSearchProducts.vue │ │ ├── QuickSearchSuggestions.vue │ │ ├── QuickSearchTrendingProducts.vue │ │ ├── Recommendations.vue │ │ ├── Search.vue │ │ ├── SlideoutCart.vue │ │ └── Slider.vue │ ├── main.css │ ├── main.js │ ├── router │ │ └── index.js │ ├── state │ │ ├── cartStore.js │ │ ├── quickSearchStore.js │ │ └── searchStore.js │ └── views │ │ ├── Collection.vue │ │ ├── Home.vue │ │ ├── Product.vue │ │ └── Search.vue │ ├── tailwind.config.js │ └── vite.config.js ├── images └── klevu_header.jpg ├── package-lock.json ├── package.json ├── packages ├── klevu-core │ ├── .eslintignore │ ├── .eslintrc.cjs │ ├── .npmignore │ ├── LICENSE │ ├── README.md │ ├── docs │ │ ├── .nojekyll │ │ ├── classes │ │ │ ├── FilterManager.md │ │ │ ├── KlevuConfig.md │ │ │ ├── KlevuEvents.md │ │ │ ├── KlevuResponseObject.md │ │ │ ├── KlevuResponseQueryObject.md │ │ │ └── MoiSession.md │ │ ├── enums │ │ │ ├── AdvancedSortingDiretion.md │ │ │ ├── KMCRecommendationLogic.md │ │ │ ├── KlevuDomEvents.md │ │ │ ├── KlevuFilterOrder.md │ │ │ ├── KlevuFilterType.md │ │ │ ├── KlevuSearchPreference.md │ │ │ ├── KlevuSearchSorting.md │ │ │ ├── KlevuTypeOfRecord.md │ │ │ ├── KlevuTypeOfRequest.md │ │ │ └── KlevuTypeOfSearch.md │ │ ├── interfaces │ │ │ ├── KMCBannerRootObject.md │ │ │ ├── KMCMapsRootObject.md │ │ │ ├── KMCRootObject.md │ │ │ ├── KlevuBanner.md │ │ │ └── KlevuKeywordUrlMap.md │ │ ├── modules.md │ │ └── modules │ │ │ ├── abtest.md │ │ │ ├── advancedfiltering.md │ │ │ ├── advancedsorting.md │ │ │ ├── alsoviewed.md │ │ │ ├── applyfilter.md │ │ │ ├── applyfilters.md │ │ │ ├── applyfilterwithmanager.md │ │ │ ├── boostwithfiltermanager.md │ │ │ ├── boostwithfilters.md │ │ │ ├── boostwithkeywords.md │ │ │ ├── boostwithrecords.md │ │ │ ├── boughttogether.md │ │ │ ├── categorymerchandising.md │ │ │ ├── debug.md │ │ │ ├── exclude.md │ │ │ ├── fallback.md │ │ │ ├── filtermanagerfilters.md │ │ │ ├── include.md │ │ │ ├── injectfilterresult.md │ │ │ ├── klaviyo.md │ │ │ ├── klevuallrecordqueries.md │ │ │ ├── klevualsoboughtquery.md │ │ │ ├── klevualsoviewedquery.md │ │ │ ├── klevuannotations.md │ │ │ ├── klevuanytypeofrecord.md │ │ │ ├── klevuapirawresponse.md │ │ │ ├── klevuapplyfilter.md │ │ │ ├── klevubasequery.md │ │ │ ├── klevubasequerysettings.md │ │ │ ├── klevubasequerysettingsquery.md │ │ │ ├── klevufallbackqueryoptions.md │ │ │ ├── klevufetch.md │ │ │ ├── klevufetchcache.md │ │ │ ├── klevufetchfunctionparams.md │ │ │ ├── klevufetchfunctionreturnvalue.md │ │ │ ├── klevufetchqueries.md │ │ │ ├── klevufetchqueryresult.md │ │ │ ├── klevufetchresponse.md │ │ │ ├── klevufilterresultoptions.md │ │ │ ├── klevufilterresultrating.md │ │ │ ├── klevufilterresultslider.md │ │ │ ├── klevugetbannersbytype.md │ │ │ ├── klevuhydratepackedfetchresult.md │ │ │ ├── klevukmcrecommendationoptions.md │ │ │ ├── klevukmcrecommendations.md │ │ │ ├── klevukmcsettings.md │ │ │ ├── klevulastclickedproducts.md │ │ │ ├── klevulastsearch.md │ │ │ ├── klevulastsearches.md │ │ │ ├── klevulistendomevent.md │ │ │ ├── klevulistfilter.md │ │ │ ├── klevulistfilterstoreturn.md │ │ │ ├── klevumerchandisingoptions.md │ │ │ ├── klevunextfunc.md │ │ │ ├── klevupackfetchresult.md │ │ │ ├── klevupayload.md │ │ │ ├── klevuqueryresult.md │ │ │ ├── klevurangefiltersettings.md │ │ │ ├── klevurecord.md │ │ │ ├── klevurecordfields.md │ │ │ ├── klevuresultevent.md │ │ │ ├── klevuresulteventonresult.md │ │ │ ├── klevusearchoptions.md │ │ │ ├── klevusimilarproductsquery.md │ │ │ ├── klevusuggestionquery.md │ │ │ ├── klevusuggestionresult.md │ │ │ ├── klevutrendingproductsquery.md │ │ │ ├── kmcrecommendation.md │ │ │ ├── listfilters.md │ │ │ ├── moiactionsmessage.md │ │ │ ├── moichatmodes.md │ │ │ ├── moicontext.md │ │ │ ├── moilocalmessage.md │ │ │ ├── moimenuoptions.md │ │ │ ├── moimessages.md │ │ │ ├── moiproduct.md │ │ │ ├── moiproducts.md │ │ │ ├── moirequest.md │ │ │ ├── moiresponse.md │ │ │ ├── moiresponsecontext.md │ │ │ ├── moiresponsefilter.md │ │ │ ├── moiresponsegenericoptions.md │ │ │ ├── moiresponseobjects.md │ │ │ ├── moiresponsetext.md │ │ │ ├── moisavedfeedback.md │ │ │ ├── moistartoptions.md │ │ │ ├── newarrivals.md │ │ │ ├── overridesettings.md │ │ │ ├── personalisation.md │ │ │ ├── products.md │ │ │ ├── raw.md │ │ │ ├── recentlyviewed.md │ │ │ ├── recommendationvieweventmetadata.md │ │ │ ├── removelistfilters.md │ │ │ ├── search.md │ │ │ ├── searchcategory.md │ │ │ ├── searchcms.md │ │ │ ├── sendmerchandisingviewevent.md │ │ │ ├── sendrecommendationviewevent.md │ │ │ ├── sendsearchevent.md │ │ │ ├── similarproducts.md │ │ │ ├── startmoi.md │ │ │ ├── suggestions.md │ │ │ ├── top.md │ │ │ ├── trendingcategoryproducts.md │ │ │ ├── trendingproducts.md │ │ │ └── visuallysimilar.md │ ├── fixup │ ├── jest.config.cjs │ ├── package-lock.json │ ├── package.json │ ├── publishing.md │ ├── split_docs.js │ ├── src │ │ ├── config.ts │ │ ├── connection │ │ │ ├── fetch.ts │ │ │ ├── hydration.ts │ │ │ ├── klevuFetch.test.ts │ │ │ ├── klevuFetch.ts │ │ │ ├── kmc.test.ts │ │ │ ├── kmc.ts │ │ │ ├── moi │ │ │ │ └── moi.ts │ │ │ ├── responseObject.ts │ │ │ ├── responseQueryObject.ts │ │ │ ├── resultHelpers │ │ │ │ ├── FetchResultEvents.test.ts │ │ │ │ ├── fetchNextPage.test.ts │ │ │ │ ├── getAnnotationsForProduct.test.ts │ │ │ │ ├── getAnnotationsForProduct.ts │ │ │ │ ├── getBanners.test.ts │ │ │ │ ├── getBanners.ts │ │ │ │ ├── getRedirects.test.ts │ │ │ │ └── getRedirects.ts │ │ │ ├── ssr.test.ts │ │ │ └── ssr.ts │ │ ├── connectors │ │ │ └── klaviyo.ts │ │ ├── events │ │ │ ├── KlevuDomEvents.ts │ │ │ ├── KlevuEvents.ts │ │ │ ├── eventRequests.ts │ │ │ └── index.ts │ │ ├── index.ts │ │ ├── models │ │ │ ├── KMCBanner.ts │ │ │ ├── KMCMaps.ts │ │ │ ├── KMCRoot.ts │ │ │ ├── KlevuAllRecordQueries.ts │ │ │ ├── KlevuAlsoBoughtQuery.ts │ │ │ ├── KlevuAlsoViewedQuery.ts │ │ │ ├── KlevuApiRawResponse.ts │ │ │ ├── KlevuApplyFilter.ts │ │ │ ├── KlevuBaseQuery.ts │ │ │ ├── KlevuBaseQuerySettings.ts │ │ │ ├── KlevuBaseQuerySettingsQuery.ts │ │ │ ├── KlevuFetchQueries.ts │ │ │ ├── KlevuFetchResponse.ts │ │ │ ├── KlevuFilterOrder.ts │ │ │ ├── KlevuGroupConditions.ts │ │ │ ├── KlevuListFilter.ts │ │ │ ├── KlevuPayload.ts │ │ │ ├── KlevuRangeFilterSettings.ts │ │ │ ├── KlevuRecord.ts │ │ │ ├── KlevuRecordFields.ts │ │ │ ├── KlevuResultEvent.ts │ │ │ ├── KlevuSearchPreference.ts │ │ │ ├── KlevuSearchSorting.ts │ │ │ ├── KlevuSimilarProductsQuery.ts │ │ │ ├── KlevuSuggestionQuery.ts │ │ │ ├── KlevuSuggestionResult.ts │ │ │ ├── KlevuTrendingProductsQuery.ts │ │ │ ├── KlevuTypeOfRecord.ts │ │ │ ├── KlevuTypeOfRequest.ts │ │ │ ├── KlevuTypeOfSearch.ts │ │ │ └── index.ts │ │ ├── modifiers │ │ │ ├── abTest │ │ │ │ └── abTest.ts │ │ │ ├── advancedFiltering │ │ │ │ ├── advancedFiltering.test.ts │ │ │ │ └── advancedFiltering.ts │ │ │ ├── advancedSorting │ │ │ │ ├── advancedSorting.test.ts │ │ │ │ └── advancedSorting.ts │ │ │ ├── applyFilter │ │ │ │ ├── applyFilter.test.ts │ │ │ │ └── applyFilter.ts │ │ │ ├── applyFilterWithManager │ │ │ │ ├── applyFilterWithManager.test.ts │ │ │ │ └── applyFilterWithManager.ts │ │ │ ├── boostWithFilterManager │ │ │ │ ├── boostWithFilterManager.test.ts │ │ │ │ └── boostWithFilterManager.ts │ │ │ ├── boostWithFilters │ │ │ │ ├── boostWithFilters.test.ts │ │ │ │ └── boostWithFilters.ts │ │ │ ├── boostWithKeywords │ │ │ │ ├── boostWithKeywords.test.ts │ │ │ │ └── boostWithKeywords.ts │ │ │ ├── boostWithRecords │ │ │ │ ├── boostWithRecords.test.ts │ │ │ │ └── boostWithRecords.ts │ │ │ ├── debug │ │ │ │ └── debug.ts │ │ │ ├── exclude │ │ │ │ ├── exclude.test.ts │ │ │ │ └── exclude.ts │ │ │ ├── fallback │ │ │ │ ├── fallback.test.ts │ │ │ │ └── fallback.ts │ │ │ ├── include │ │ │ │ ├── include.test.ts │ │ │ │ └── include.ts │ │ │ ├── index.ts │ │ │ ├── injectFilterResult │ │ │ │ └── injectFilterResult.ts │ │ │ ├── klaviyo │ │ │ │ ├── klaviyo.test.ts │ │ │ │ └── klaviyo.ts │ │ │ ├── listFilters │ │ │ │ ├── listFilters.test.ts │ │ │ │ └── listFilters.ts │ │ │ ├── overrideSettings │ │ │ │ ├── overrideSettings.test.ts │ │ │ │ └── overrideSettings.ts │ │ │ ├── personalisation │ │ │ │ ├── personalisation.test.ts │ │ │ │ └── personalisation.ts │ │ │ ├── sendMerchandisingViewEvent │ │ │ │ ├── sendMerchandisingViewEvent.test.ts │ │ │ │ └── sendMerchandisingViewEvent.ts │ │ │ ├── sendRecommendationViewEvent │ │ │ │ ├── sendRecommendationViewEvent.test.ts │ │ │ │ └── sendRecommendationViewEvent.ts │ │ │ ├── sendSearchEvent │ │ │ │ ├── sendSearchEvent.ts │ │ │ │ └── sendSearchEvents.test.ts │ │ │ └── top │ │ │ │ ├── top.test.ts │ │ │ │ └── top.ts │ │ ├── queries │ │ │ ├── alsoViewed │ │ │ │ └── alsoViewed.ts │ │ │ ├── boughtTogether │ │ │ │ └── boughtTogether.ts │ │ │ ├── categoryMerchandising │ │ │ │ ├── categoryMerchandising.test.ts │ │ │ │ └── categoryMerchandising.ts │ │ │ ├── index.ts │ │ │ ├── kmcRecommendation │ │ │ │ ├── kmcRecommendation.test.ts │ │ │ │ └── kmcRecommendation.ts │ │ │ ├── newarrivals │ │ │ │ └── newarrivals.ts │ │ │ ├── products │ │ │ │ ├── products.test.ts │ │ │ │ └── products.ts │ │ │ ├── raw │ │ │ │ ├── raw.test.ts │ │ │ │ └── raw.ts │ │ │ ├── recentlyViewedProducts │ │ │ │ ├── recentlyViewedProducts.test.ts │ │ │ │ └── recentlyViewedProducts.ts │ │ │ ├── search │ │ │ │ ├── search.test.ts │ │ │ │ └── search.ts │ │ │ ├── searchCategory │ │ │ │ ├── searchCategory.test.ts │ │ │ │ └── searchCategory.ts │ │ │ ├── searchCms │ │ │ │ ├── searchCms.test.ts │ │ │ │ └── searchCms.ts │ │ │ ├── similarProducts │ │ │ │ └── similarProducts.ts │ │ │ ├── suggestions │ │ │ │ ├── suggestions.test.ts │ │ │ │ └── suggestions.ts │ │ │ ├── trendingCategoryProducts │ │ │ │ ├── trendingCategoryProducts.test.ts │ │ │ │ └── trendingCategoryProducts.ts │ │ │ ├── trendingProducts │ │ │ │ └── trendingProducts.ts │ │ │ └── visuallySimilar │ │ │ │ └── visuallySimilar.ts │ │ ├── resolvers │ │ │ ├── ipresolver.ts │ │ │ └── usersession.ts │ │ ├── store │ │ │ ├── filterManager.test.ts │ │ │ ├── filterManager.ts │ │ │ ├── index.ts │ │ │ ├── klevuFetchCache.test.ts │ │ │ ├── klevuFetchCache.ts │ │ │ ├── lastClickedProducts.test.ts │ │ │ ├── lastClickedProducts.ts │ │ │ ├── lastSearches.test.ts │ │ │ └── lastSearches.ts │ │ └── utils │ │ │ ├── cleanSearchQuery.ts │ │ │ ├── extractActiveFilters.ts │ │ │ ├── getBannersByType.ts │ │ │ ├── index.ts │ │ │ ├── isBrowser.ts │ │ │ ├── literalUnion.ts │ │ │ ├── notEmpty.ts │ │ │ ├── objectToQueryParamaters.ts │ │ │ ├── partialK.ts │ │ │ ├── storage.test.ts │ │ │ ├── storage.ts │ │ │ └── valuOf.ts │ ├── tsconfig-base.json │ ├── tsconfig-cjs.json │ ├── tsconfig-tests.json │ ├── tsconfig.json │ └── typedoc.json ├── klevu-ui-react │ ├── .gitignore │ ├── .npmignore │ ├── LICENSE │ ├── README.md │ ├── package-lock.json │ ├── package.json │ ├── rollup.config.js │ ├── src │ │ ├── components │ │ │ ├── index.ts │ │ │ └── stencil-generated │ │ │ │ ├── index.ts │ │ │ │ └── react-component-lib │ │ │ │ ├── createComponent.tsx │ │ │ │ ├── createOverlayComponent.tsx │ │ │ │ ├── index.ts │ │ │ │ ├── interfaces.ts │ │ │ │ └── utils │ │ │ │ ├── attachProps.ts │ │ │ │ ├── case.ts │ │ │ │ ├── dev.ts │ │ │ │ └── index.tsx │ │ └── index.ts │ └── tsconfig.json ├── klevu-ui-vue │ ├── .npmignore │ ├── README.md │ ├── package-lock.json │ ├── package.json │ ├── rollup.config.js │ ├── src │ │ ├── components.ts │ │ ├── index.ts │ │ ├── plugin.ts │ │ └── vue-component-lib │ │ │ └── utils.ts │ └── tsconfig.json └── klevu-ui │ ├── .babelrc.json │ ├── .editorconfig │ ├── .gitignore │ ├── .prettierrc.json │ ├── .storybook │ ├── blocks │ │ ├── KlevuAllEvents.jsx │ │ ├── KlevuAutoDocs.jsx │ │ └── KlevuCSSEditor.jsx │ ├── klevuTheme.ts │ ├── main.js │ ├── manager-head.html │ ├── manager.ts │ ├── preview-head.html │ └── preview.ts │ ├── LICENSE │ ├── downloadIcons.js │ ├── generateParts.js │ ├── package-lock.json │ ├── package.json │ ├── perftest │ └── index.html │ ├── readme.md │ ├── src │ ├── components.d.ts │ ├── components │ │ ├── klevu-accordion │ │ │ ├── klevu-accordion.css │ │ │ ├── klevu-accordion.mdx │ │ │ ├── klevu-accordion.stories.ts │ │ │ ├── klevu-accordion.tsx │ │ │ ├── styled-accordion.mdx │ │ │ └── test │ │ │ │ └── klevu-accordion.e2e.ts │ │ ├── klevu-badge │ │ │ ├── accent-badge.mdx │ │ │ ├── klevu-badge.css │ │ │ ├── klevu-badge.mdx │ │ │ ├── klevu-badge.stories.ts │ │ │ ├── klevu-badge.tsx │ │ │ ├── neutral-badge.mdx │ │ │ └── styled-badge.mdx │ │ ├── klevu-banner │ │ │ ├── klevu-banner.css │ │ │ ├── klevu-banner.tsx │ │ │ └── test │ │ │ │ ├── klevu-banner.e2e.ts │ │ │ │ └── klevu-banner.spec.tsx │ │ ├── klevu-button │ │ │ ├── klevu-button.css │ │ │ ├── klevu-button.mdx │ │ │ ├── klevu-button.stories.ts │ │ │ ├── klevu-button.tsx │ │ │ └── test │ │ │ │ └── klevu-button.e2e.ts │ │ ├── klevu-chat-bubble │ │ │ ├── klevu-chat-bubble.css │ │ │ ├── klevu-chat-bubble.mdx │ │ │ ├── klevu-chat-bubble.stories.ts │ │ │ ├── klevu-chat-bubble.tsx │ │ │ └── styled-chat-bubble.mdx │ │ ├── klevu-chat-layout │ │ │ ├── klevu-chat-layout.css │ │ │ ├── klevu-chat-layout.mdx │ │ │ ├── klevu-chat-layout.stories.ts │ │ │ ├── klevu-chat-layout.tsx │ │ │ └── test │ │ │ │ └── klevu-chat-layout.e2e.ts │ │ ├── klevu-chat-messages │ │ │ ├── klevu-chat-messages.css │ │ │ ├── klevu-chat-messages.mdx │ │ │ ├── klevu-chat-messages.stories.ts │ │ │ └── klevu-chat-messages.tsx │ │ ├── klevu-checkbox │ │ │ ├── klevu-checkbox.css │ │ │ ├── klevu-checkbox.mdx │ │ │ ├── klevu-checkbox.stories.ts │ │ │ ├── klevu-checkbox.tsx │ │ │ ├── styled-checkbox.mdx │ │ │ └── test │ │ │ │ └── klevu-checkbox.e2e.ts │ │ ├── klevu-chip │ │ │ ├── klevu-chip.css │ │ │ ├── klevu-chip.mdx │ │ │ ├── klevu-chip.stories.ts │ │ │ ├── klevu-chip.tsx │ │ │ └── styled-chip.mdx │ │ ├── klevu-cms-list │ │ │ ├── klevu-cms-list.css │ │ │ ├── klevu-cms-list.mdx │ │ │ ├── klevu-cms-list.stories.ts │ │ │ ├── klevu-cms-list.tsx │ │ │ └── test │ │ │ │ └── klevu-cms-list.e2e.ts │ │ ├── klevu-color-swatch │ │ │ ├── klevu-color-swatch.css │ │ │ ├── klevu-color-swatch.mdx │ │ │ ├── klevu-color-swatch.stories.ts │ │ │ ├── klevu-color-swatch.tsx │ │ │ └── test │ │ │ │ └── klevu-color-swatch.spec.tsx │ │ ├── klevu-drawer │ │ │ ├── klevu-drawer.css │ │ │ ├── klevu-drawer.mdx │ │ │ ├── klevu-drawer.stories.ts │ │ │ ├── klevu-drawer.tsx │ │ │ ├── styled-drawer.mdx │ │ │ └── test │ │ │ │ └── klevu-drawer.e2e.ts │ │ ├── klevu-dropdown │ │ │ ├── klevu-dropdown.css │ │ │ ├── klevu-dropdown.mdx │ │ │ ├── klevu-dropdown.stories.ts │ │ │ ├── klevu-dropdown.tsx │ │ │ ├── styled-dropdown.mdx │ │ │ └── test │ │ │ │ └── klevu-dropdown.e2e.ts │ │ ├── klevu-facet-list │ │ │ ├── color-swatches-facet-list.mdx │ │ │ ├── klevu-facet-list.css │ │ │ ├── klevu-facet-list.mdx │ │ │ ├── klevu-facet-list.stories.ts │ │ │ ├── klevu-facet-list.tsx │ │ │ ├── styled-facet-list.mdx │ │ │ └── test │ │ │ │ └── klevu-facet-list.e2e.ts │ │ ├── klevu-facet │ │ │ ├── custom-order-facet.mdx │ │ │ ├── klevu-facet.css │ │ │ ├── klevu-facet.mdx │ │ │ ├── klevu-facet.stories.ts │ │ │ ├── klevu-facet.tsx │ │ │ ├── slider-facet.mdx │ │ │ ├── styled-facet.mdx │ │ │ ├── swatches-facet.mdx │ │ │ └── test │ │ │ │ └── klevu-facet.e2e.ts │ │ ├── klevu-icon │ │ │ ├── assets │ │ │ │ ├── check.svg │ │ │ │ ├── chevron_left.svg │ │ │ │ ├── chevron_right.svg │ │ │ │ ├── close.svg │ │ │ │ ├── expand_more.svg │ │ │ │ ├── image_not_supported.svg │ │ │ │ ├── info.svg │ │ │ │ ├── menu.svg │ │ │ │ ├── navigate_before.svg │ │ │ │ ├── navigate_next.svg │ │ │ │ ├── photo_camera.svg │ │ │ │ ├── search.svg │ │ │ │ ├── thumb_down.svg │ │ │ │ ├── thumb_up.svg │ │ │ │ └── upload.svg │ │ │ ├── klevu-icon.css │ │ │ ├── klevu-icon.mdx │ │ │ ├── klevu-icon.stories.ts │ │ │ ├── klevu-icon.tsx │ │ │ └── preloaded-icons.json │ │ ├── klevu-init │ │ │ ├── klevu-init.css │ │ │ └── klevu-init.tsx │ │ ├── klevu-latest-searches │ │ │ ├── klevu-latest-searches.css │ │ │ ├── klevu-latest-searches.mdx │ │ │ ├── klevu-latest-searches.stories.ts │ │ │ ├── klevu-latest-searches.tsx │ │ │ └── test │ │ │ │ └── klevu-latest-searches.e2e.ts │ │ ├── klevu-layout-results │ │ │ ├── klevu-layout-results.css │ │ │ ├── klevu-layout-results.mdx │ │ │ ├── klevu-layout-results.stories.ts │ │ │ └── klevu-layout-results.tsx │ │ ├── klevu-list │ │ │ ├── default-styling-list.mdx │ │ │ ├── icon-list.mdx │ │ │ ├── images-list.mdx │ │ │ ├── klevu-list.css │ │ │ ├── klevu-list.mdx │ │ │ ├── klevu-list.stories.ts │ │ │ ├── klevu-list.tsx │ │ │ ├── links-list.mdx │ │ │ ├── primary-text-list.mdx │ │ │ ├── secondary-text-list.mdx │ │ │ └── styled-list.mdx │ │ ├── klevu-loading-indicator │ │ │ ├── klevu-loading-indicator.css │ │ │ ├── klevu-loading-indicator.mdx │ │ │ ├── klevu-loading-indicator.stories.ts │ │ │ ├── klevu-loading-indicator.tsx │ │ │ └── styled-loading-indicator.mdx │ │ ├── klevu-merchandising │ │ │ ├── CustomContent.mdx │ │ │ ├── Stylished.mdx │ │ │ ├── WithInfiniteScroll.mdx │ │ │ ├── WithPagination.mdx │ │ │ ├── klevu-merchandising.css │ │ │ ├── klevu-merchandising.mdx │ │ │ ├── klevu-merchandising.stories.ts │ │ │ ├── klevu-merchandising.tsx │ │ │ └── test │ │ │ │ └── klevu-merchandising.e2e.ts │ │ ├── klevu-modal │ │ │ ├── klevu-modal.css │ │ │ ├── klevu-modal.mdx │ │ │ ├── klevu-modal.stories.ts │ │ │ ├── klevu-modal.tsx │ │ │ └── styled-modal.mdx │ │ ├── klevu-moi │ │ │ ├── klevu-moi.css │ │ │ ├── klevu-moi.mdx │ │ │ ├── klevu-moi.stories.ts │ │ │ └── klevu-moi.tsx │ │ ├── klevu-pagination │ │ │ ├── klevu-pagination.css │ │ │ ├── klevu-pagination.mdx │ │ │ ├── klevu-pagination.stories.ts │ │ │ ├── klevu-pagination.tsx │ │ │ ├── pagination-from-results.mdx │ │ │ ├── styled-pagination.mdx │ │ │ └── test │ │ │ │ └── klevu-pagination.e2e.ts │ │ ├── klevu-popular-searches │ │ │ ├── klevu-popular-searches.css │ │ │ ├── klevu-popular-searches.mdx │ │ │ ├── klevu-popular-searches.stories.ts │ │ │ ├── klevu-popular-searches.tsx │ │ │ ├── styled-popular-searches.mdx │ │ │ └── test │ │ │ │ └── klevu-popular-searches.e2e.ts │ │ ├── klevu-popup │ │ │ ├── klevu-popup.css │ │ │ ├── klevu-popup.mdx │ │ │ ├── klevu-popup.stories.ts │ │ │ ├── klevu-popup.tsx │ │ │ ├── popup-button-source.mdx │ │ │ ├── popup-external-source.mdx │ │ │ └── test │ │ │ │ └── klevu-popup.e2e.ts │ │ ├── klevu-product-grid │ │ │ ├── custom-rows-product-grid.mdx │ │ │ ├── klevu-product-grid.css │ │ │ ├── klevu-product-grid.mdx │ │ │ ├── klevu-product-grid.stories.ts │ │ │ └── klevu-product-grid.tsx │ │ ├── klevu-product-query-popup │ │ │ ├── klevu-product-query-popup.css │ │ │ └── klevu-product-query-popup.tsx │ │ ├── klevu-product-query │ │ │ ├── Heavity modified version.mdx │ │ │ ├── klevu-product-query.css │ │ │ ├── klevu-product-query.mdx │ │ │ ├── klevu-product-query.stories.ts │ │ │ └── klevu-product-query.tsx │ │ ├── klevu-product │ │ │ ├── fallback-image-product.mdx │ │ │ ├── klevu-product.css │ │ │ ├── klevu-product.mdx │ │ │ ├── klevu-product.stories.ts │ │ │ ├── klevu-product.tsx │ │ │ ├── styled-product.mdx │ │ │ └── test │ │ │ │ └── klevu-product.e2e.ts │ │ ├── klevu-query │ │ │ ├── Custom search.mdx │ │ │ ├── klevu-query.css │ │ │ ├── klevu-query.mdx │ │ │ ├── klevu-query.stories.ts │ │ │ ├── klevu-query.tsx │ │ │ └── test │ │ │ │ └── klevu-query.e2e.ts │ │ ├── klevu-quicksearch │ │ │ ├── Customized.mdx │ │ │ ├── Stylished.mdx │ │ │ ├── klevu-quicksearch.css │ │ │ ├── klevu-quicksearch.mdx │ │ │ ├── klevu-quicksearch.stories.ts │ │ │ ├── klevu-quicksearch.tsx │ │ │ └── test │ │ │ │ └── klevu-quicksearch.e2e.ts │ │ ├── klevu-rating │ │ │ ├── klevu-rating.css │ │ │ ├── klevu-rating.mdx │ │ │ ├── klevu-rating.stories.ts │ │ │ ├── klevu-rating.tsx │ │ │ ├── styled-rating.mdx │ │ │ └── test │ │ │ │ └── klevu-rating.spec.tsx │ │ ├── klevu-recommendations │ │ │ ├── Custom Recommendation.mdx │ │ │ ├── Stylished.mdx │ │ │ ├── klevu-recommendations.css │ │ │ ├── klevu-recommendations.mdx │ │ │ ├── klevu-recommendations.stories.ts │ │ │ ├── klevu-recommendations.tsx │ │ │ └── test │ │ │ │ └── klevu-recommendations.e2e.ts │ │ ├── klevu-search-field │ │ │ ├── klevu-search-field.css │ │ │ ├── klevu-search-field.mdx │ │ │ ├── klevu-search-field.stories.ts │ │ │ └── klevu-search-field.tsx │ │ ├── klevu-search-landing-page │ │ │ ├── Stylished.mdx │ │ │ ├── klevu-search-landing-page.css │ │ │ ├── klevu-search-landing-page.mdx │ │ │ ├── klevu-search-landing-page.stories.ts │ │ │ ├── klevu-search-landing-page.tsx │ │ │ └── test │ │ │ │ └── klevu-search-landing-page.e2e.ts │ │ ├── klevu-slider │ │ │ ├── klevu-slider.css │ │ │ ├── klevu-slider.mdx │ │ │ ├── klevu-slider.stories.ts │ │ │ ├── klevu-slider.tsx │ │ │ ├── slider-with-tooltips.mdx │ │ │ └── test │ │ │ │ └── klevu-slider.e2e.ts │ │ ├── klevu-slides │ │ │ ├── klevu-slides.css │ │ │ ├── klevu-slides.mdx │ │ │ ├── klevu-slides.stories.ts │ │ │ ├── klevu-slides.tsx │ │ │ ├── styled-slides.mdx │ │ │ └── test │ │ │ │ └── klevu-slides.e2e.ts │ │ ├── klevu-sort │ │ │ ├── klevu-sort.css │ │ │ ├── klevu-sort.mdx │ │ │ ├── klevu-sort.stories.ts │ │ │ ├── klevu-sort.tsx │ │ │ └── test │ │ │ │ └── klevu-sort.e2e.ts │ │ ├── klevu-suggestions-list │ │ │ ├── klevu-suggestions-list.css │ │ │ ├── klevu-suggestions-list.mdx │ │ │ ├── klevu-suggestions-list.stories.ts │ │ │ ├── klevu-suggestions-list.tsx │ │ │ └── test │ │ │ │ └── klevu-suggestions-list.e2e.ts │ │ ├── klevu-tab │ │ │ ├── klevu-tab.css │ │ │ ├── klevu-tab.mdx │ │ │ ├── klevu-tab.stories.ts │ │ │ ├── klevu-tab.tsx │ │ │ └── styled-tab.mdx │ │ ├── klevu-textfield │ │ │ ├── form-fields.mdx │ │ │ ├── klevu-textfield.css │ │ │ ├── klevu-textfield.mdx │ │ │ ├── klevu-textfield.stories.ts │ │ │ ├── klevu-textfield.tsx │ │ │ ├── styled-textfield.mdx │ │ │ └── test │ │ │ │ └── klevu-textfield.e2e.ts │ │ ├── klevu-typography │ │ │ ├── klevu-typography.css │ │ │ ├── klevu-typography.mdx │ │ │ ├── klevu-typography.stories.ts │ │ │ ├── klevu-typography.tsx │ │ │ └── test │ │ │ │ └── klevu-typography.e2e.ts │ │ ├── klevu-util-dom-events │ │ │ ├── klevu-util-dom-events.mdx │ │ │ ├── klevu-util-dom-events.stories.ts │ │ │ └── klevu-util-dom-events.tsx │ │ ├── klevu-util-infinite-scroll │ │ │ ├── klevu-util-infinite-scroll.mdx │ │ │ ├── klevu-util-infinite-scroll.stories.ts │ │ │ ├── klevu-util-infinite-scroll.tsx │ │ │ └── test │ │ │ │ └── klevu-util-infinite-scroll.spec.tsx │ │ ├── klevu-util-portal │ │ │ ├── klevu-util-portal.css │ │ │ ├── klevu-util-portal.mdx │ │ │ ├── klevu-util-portal.stories.ts │ │ │ └── klevu-util-portal.tsx │ │ ├── klevu-util-scrollbars │ │ │ ├── klevu-util-scrollbars.css │ │ │ ├── klevu-util-scrollbars.mdx │ │ │ ├── klevu-util-scrollbars.stories.ts │ │ │ └── klevu-util-scrollbars.tsx │ │ ├── klevu-util-ssr-provider │ │ │ ├── klevu-util-ssr-provider.mdx │ │ │ ├── klevu-util-ssr-provider.stories.ts │ │ │ └── klevu-util-ssr-provider.tsx │ │ └── klevu-util-viewport │ │ │ └── klevu-util-viewport.tsx │ ├── global │ │ ├── global.css │ │ └── pqa │ │ │ ├── pqa.css │ │ │ ├── pqa_full.css │ │ │ ├── thumbs-down.svg │ │ │ └── thumbs-up.svg │ ├── globals.d.ts │ ├── index.html │ ├── index.ts │ ├── stories │ │ ├── about_apps.mdx │ │ ├── about_atoms.mdx │ │ ├── about_components.mdx │ │ ├── creating-category-page-react.mdx │ │ ├── creating-category-page-vanillajs.mdx │ │ ├── creating-search-results-react.mdx │ │ ├── creating-search-results-vanillajs.mdx │ │ ├── events.mdx │ │ ├── hydration.mdx │ │ ├── i18n.mdx │ │ ├── icons.mdx │ │ ├── installation.mdx │ │ ├── releases.mdx │ │ ├── styles.mdx │ │ ├── typings.mdx │ │ ├── usage.mdx │ │ └── welcome.mdx │ ├── storybookUtils.ts │ ├── translations │ │ ├── en.json │ │ └── fi.json │ └── utils │ │ ├── getKMCSettings.ts │ │ ├── getTranslation.ts │ │ ├── parts.ts │ │ ├── partsExports.ts │ │ ├── stringConcat.ts │ │ └── utils.ts │ ├── stencil.config.ts │ ├── storybookAddons │ ├── constants.ts │ ├── klevuSettings.tsx │ ├── preview.ts │ └── register.ts │ ├── storybookAssets │ ├── basic-category-page-vanillajs.png │ ├── basic-category-page.png │ ├── basic-search-results-vanillajs.png │ ├── basic-search-results.png │ ├── checkbox_args_example.jpg │ ├── css-styled-category-page-vanillajs.png │ ├── css-styled-category-page.png │ ├── css-styled-search-results-vanillajs.png │ ├── css-styled-search-results.png │ ├── custom-brand-attribute-category-page-vanillajs.png │ ├── custom-brand-attribute-category-page.png │ ├── custom-brand-attribute-search-results-vanillajs.png │ ├── custom-brand-attribute-search-results.png │ ├── klevu-color.svg │ ├── slot-customized-category-page-vanillajs.png │ ├── slot-customized-category-page.png │ ├── slot-customized-search-results-vanillajs.png │ ├── slot-customized-search-results.png │ └── web-components.png │ ├── tsconfig.build.json │ └── tsconfig.json └── utils ├── package-lock.json ├── package.json ├── release-klevu-core.js └── update-klevu-ui.js /.archbee.yaml: -------------------------------------------------------------------------------- 1 | root: ./packages/klevu-core/docs 2 | structure: 3 | readme: ./../README.md 4 | reference: modules.md 5 | assets: ./../../../images 6 | -------------------------------------------------------------------------------- /.dockerignore: -------------------------------------------------------------------------------- 1 | **/node_modules -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # Editor configuration, see http://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | charset = utf-8 6 | indent_style = space 7 | indent_size = 2 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | 11 | [*.json] 12 | indent_size = 2 13 | 14 | [*.yml] 15 | indent_size = 2 16 | 17 | [*.md] 18 | max_line_length = off -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | dist 3 | dist-transpiled 4 | .swc 5 | coverage 6 | .DS_Store 7 | .npmrc 8 | :Zone.Identifier 9 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "semi": false 3 | } -------------------------------------------------------------------------------- /.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": ["dbaeumer.vscode-eslint", "esbenp.prettier-vscode"] 3 | } 4 | -------------------------------------------------------------------------------- /.vscode/launch.json: -------------------------------------------------------------------------------- 1 | { 2 | "version": "1.0.0", 3 | "configurations": [ 4 | { 5 | "type": "node", 6 | "request": "launch", 7 | "name": "@klevu/core - Jest: current file", 8 | "cwd": "${workspaceFolder}/packages/klevu-core", 9 | "env": { 10 | "NODE_OPTIONS": "--experimental-vm-modules", 11 | "NODE_NO_WARNINGS": "1" 12 | }, 13 | "program": "./node_modules/.bin/jest", 14 | "args": [ 15 | "${fileBasenameNoExtension}", 16 | "--config", 17 | "./jest.config.cjs", 18 | "--testTimeout", 19 | "100000000" 20 | ], 21 | "console": "integratedTerminal" 22 | } 23 | ] 24 | } 25 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "editor.defaultFormatter": "esbenp.prettier-vscode", 3 | "editor.formatOnSave": true, 4 | "html.customData": ["./packages/klevu-ui/dist/docs/vscode-data.json"], 5 | "editor.codeActionsOnSave": { 6 | "source.fixAll.eslint": "explicit" 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /examples/nextjs/.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "next/core-web-vitals" 3 | } 4 | -------------------------------------------------------------------------------- /examples/nextjs/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # next.js 12 | /.next/ 13 | /out/ 14 | 15 | # production 16 | /build 17 | 18 | # misc 19 | .DS_Store 20 | *.pem 21 | 22 | # debug 23 | npm-debug.log* 24 | yarn-debug.log* 25 | yarn-error.log* 26 | 27 | # local env files 28 | .env*.local 29 | 30 | # vercel 31 | .vercel 32 | 33 | # typescript 34 | *.tsbuildinfo 35 | next-env.d.ts 36 | -------------------------------------------------------------------------------- /examples/nextjs/app/clientKlevuConfig.ts: -------------------------------------------------------------------------------- 1 | "use client" 2 | 3 | import { KlevuConfig } from "@klevu/core" 4 | import { useEffect } from "react" 5 | 6 | /** 7 | * Set the KlevuConfig on the client 8 | * 9 | * @returns 10 | */ 11 | export function ClientKlevuConfig() { 12 | useEffect(() => { 13 | if (typeof window !== undefined) { 14 | KlevuConfig.init({ 15 | url: "https://eucs29v2.ksearchnet.com/cs/v2/search", 16 | apiKey: "klevu-164651914788114877", 17 | }) 18 | } 19 | }, []) 20 | 21 | return null 22 | } 23 | -------------------------------------------------------------------------------- /examples/nextjs/app/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/klevultd/frontend-sdk/ea15c0290d2a3e86d6e6dab40bd3f406bc1c111f/examples/nextjs/app/favicon.ico -------------------------------------------------------------------------------- /examples/nextjs/app/globals.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | 5 | :root { 6 | --foreground-rgb: 0, 0, 0; 7 | --background-start-rgb: 214, 219, 220; 8 | --background-end-rgb: 255, 255, 255; 9 | } 10 | 11 | @media (prefers-color-scheme: dark) { 12 | :root { 13 | --foreground-rgb: 255, 255, 255; 14 | --background-start-rgb: 0, 0, 0; 15 | --background-end-rgb: 0, 0, 0; 16 | } 17 | } 18 | 19 | body { 20 | color: rgb(var(--foreground-rgb)); 21 | background: linear-gradient( 22 | to bottom, 23 | transparent, 24 | rgb(var(--background-end-rgb)) 25 | ) 26 | rgb(var(--background-start-rgb)); 27 | } 28 | -------------------------------------------------------------------------------- /examples/nextjs/app/search/page.tsx: -------------------------------------------------------------------------------- 1 | import { KlevuFetch, KlevuPackFetchResult } from "@klevu/core" 2 | import { Fragment } from "react" 3 | import { klevuQuery } from "./common" 4 | import { ProductGrid } from "./grid" 5 | 6 | async function getData(term: string) { 7 | const fetch = await KlevuFetch(...klevuQuery(term, true)) 8 | return KlevuPackFetchResult(fetch as any) 9 | } 10 | 11 | export default async function Search(params: any) { 12 | const result = await getData(params.searchParams.term) 13 | 14 | return ( 15 | 16 | 17 | 18 | ) 19 | } 20 | -------------------------------------------------------------------------------- /examples/nextjs/next.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('next').NextConfig} */ 2 | const nextConfig = {} 3 | 4 | module.exports = nextConfig 5 | -------------------------------------------------------------------------------- /examples/nextjs/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "nextjs", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "dev": "next dev", 7 | "build": "next build", 8 | "start": "next start", 9 | "lint": "next lint" 10 | }, 11 | "dependencies": { 12 | "@klevu/core": "^3.6.0", 13 | "@types/node": "20.8.3", 14 | "@types/react": "18.2.25", 15 | "@types/react-dom": "18.2.11", 16 | "autoprefixer": "10.4.16", 17 | "eslint": "8.51.0", 18 | "eslint-config-next": "13.5.4", 19 | "next": "14.2.21", 20 | "postcss": "8.4.31", 21 | "react": "18.2.0", 22 | "react-dom": "18.2.0", 23 | "tailwindcss": "3.3.3", 24 | "typescript": "5.2.2" 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /examples/nextjs/postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | } 7 | -------------------------------------------------------------------------------- /examples/nextjs/tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | module.exports = { 3 | content: [ 4 | './pages/**/*.{js,ts,jsx,tsx,mdx}', 5 | './components/**/*.{js,ts,jsx,tsx,mdx}', 6 | './app/**/*.{js,ts,jsx,tsx,mdx}', 7 | ], 8 | theme: { 9 | extend: { 10 | backgroundImage: { 11 | 'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))', 12 | 'gradient-conic': 13 | 'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))', 14 | }, 15 | }, 16 | }, 17 | plugins: [], 18 | } 19 | -------------------------------------------------------------------------------- /examples/nuxt3/.gitignore: -------------------------------------------------------------------------------- 1 | package-lock.json 2 | yarn.lock 3 | pnpm-lock.yaml 4 | 5 | node_modules 6 | *.log* 7 | .nuxt 8 | .nitro 9 | .cache 10 | .output 11 | .env 12 | dist -------------------------------------------------------------------------------- /examples/nuxt3/README.md: -------------------------------------------------------------------------------- 1 | # Nuxt 3 Minimal Starter 2 | 3 | Look at the [nuxt 3 documentation](https://v3.nuxtjs.org) to learn more. 4 | 5 | ## Setup 6 | 7 | Make sure to install the dependencies: 8 | 9 | ```bash 10 | # npm 11 | npm install 12 | ``` 13 | 14 | ## Development Server 15 | 16 | Start the development server on http://localhost:3000 17 | 18 | ```bash 19 | npm run dev 20 | ``` 21 | 22 | ## Production 23 | 24 | Build the application for production: 25 | 26 | ```bash 27 | npm run build 28 | ``` 29 | 30 | Locally preview production build: 31 | 32 | ```bash 33 | npm run preview 34 | ``` 35 | 36 | Checkout the [deployment documentation](https://v3.nuxtjs.org/docs/deployment) for more information. 37 | -------------------------------------------------------------------------------- /examples/nuxt3/assets/cart.svg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/klevultd/frontend-sdk/ea15c0290d2a3e86d6e6dab40bd3f406bc1c111f/examples/nuxt3/assets/cart.svg -------------------------------------------------------------------------------- /examples/nuxt3/auto-imports.d.ts: -------------------------------------------------------------------------------- 1 | // Generated by 'unplugin-auto-import' 2 | // We suggest you to commit this file into source control 3 | declare global { 4 | 5 | } 6 | export {} 7 | -------------------------------------------------------------------------------- /examples/nuxt3/components.d.ts: -------------------------------------------------------------------------------- 1 | // generated by unplugin-vue-components 2 | // We suggest you to commit this file into source control 3 | // Read more: https://github.com/vuejs/vue-next/pull/3399 4 | import '@vue/runtime-core' 5 | 6 | declare module '@vue/runtime-core' { 7 | export interface GlobalComponents { 8 | NButton: typeof import('naive-ui')['NButton'] 9 | NLoadingBarProvider: typeof import('naive-ui')['NLoadingBarProvider'] 10 | RouterLink: typeof import('vue-router')['RouterLink'] 11 | RouterView: typeof import('vue-router')['RouterView'] 12 | } 13 | } 14 | 15 | export {} 16 | -------------------------------------------------------------------------------- /examples/nuxt3/components/NavCart.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 20 | 21 | 26 | -------------------------------------------------------------------------------- /examples/nuxt3/components/Overlay.vue: -------------------------------------------------------------------------------- 1 | 2 | 3 | 8 | -------------------------------------------------------------------------------- /examples/nuxt3/components/QuickSearchSuggestions.vue: -------------------------------------------------------------------------------- 1 | 15 | 16 | 20 | -------------------------------------------------------------------------------- /examples/nuxt3/components/icons/Man.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 8 | -------------------------------------------------------------------------------- /examples/nuxt3/components/icons/ManShoe.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 8 | -------------------------------------------------------------------------------- /examples/nuxt3/components/icons/Woman.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 8 | -------------------------------------------------------------------------------- /examples/nuxt3/layouts/default.vue: -------------------------------------------------------------------------------- 1 | 12 | -------------------------------------------------------------------------------- /examples/nuxt3/layouts/searchResults.vue: -------------------------------------------------------------------------------- 1 | 15 | -------------------------------------------------------------------------------- /examples/nuxt3/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "private": true, 3 | "scripts": { 4 | "build": "nuxt build", 5 | "dev": "nuxt dev --trace-warnings", 6 | "generate": "nuxt generate", 7 | "preview": "nuxt preview" 8 | }, 9 | "devDependencies": { 10 | "@nuxtjs/tailwindcss": "^6.1.3", 11 | "@pinia/nuxt": "^0.4.3", 12 | "@vueuse/nuxt": "^9.4.0", 13 | "daisyui": "^2.15.0", 14 | "naive-ui": "^2.29.0", 15 | "nuxt": "^3.15.4", 16 | "pinia": "^2.0.23" 17 | }, 18 | "dependencies": { 19 | "@klevu/core": "file:../../packages/klevu-core", 20 | "@tailwindcss/forms": "^0.5.2", 21 | "multi-range-slider-vue": "^1.1.4", 22 | "vue3-carousel": "^0.1.40" 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /examples/nuxt3/pages/[...slug].vue: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /examples/nuxt3/public/cropped-klevu-icon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/klevultd/frontend-sdk/ea15c0290d2a3e86d6e6dab40bd3f406bc1c111f/examples/nuxt3/public/cropped-klevu-icon-32x32.png -------------------------------------------------------------------------------- /examples/nuxt3/public/logo-green.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/klevultd/frontend-sdk/ea15c0290d2a3e86d6e6dab40bd3f406bc1c111f/examples/nuxt3/public/logo-green.png -------------------------------------------------------------------------------- /examples/nuxt3/stores/filtersStore.js: -------------------------------------------------------------------------------- 1 | import { defineStore } from "pinia" 2 | import { KlevuEvents } from "@klevu/core" 3 | 4 | const useCart = defineStore("filters-store", { 5 | state: () => { 6 | return { 7 | filters: [], 8 | open: false, 9 | } 10 | }, 11 | actions: {}, 12 | }) 13 | 14 | export default useCart 15 | -------------------------------------------------------------------------------- /examples/nuxt3/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | // https://v3.nuxtjs.org/concepts/typescript 3 | "extends": "./.nuxt/tsconfig.json", 4 | "compilerOptions": { 5 | "types": ["@vueuse/nuxt", "naive-ui/volar"], 6 | "strict": true 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /examples/react-klevu-ui-v2/.eslintignore: -------------------------------------------------------------------------------- 1 | .eslintrc 2 | node_modules 3 | **/*/tests/* 4 | jest.config.* 5 | build* 6 | .husky 7 | .vscode 8 | .editorconfig 9 | .gitignore 10 | .prettierrc 11 | package*.json 12 | README.md 13 | dist -------------------------------------------------------------------------------- /examples/react-klevu-ui-v2/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /examples/react-klevu-ui-v2/.prettier.json: -------------------------------------------------------------------------------- 1 | { 2 | "tabWidth": 2, 3 | "semi": true, 4 | "singleQuote": true, 5 | "arrowParens": "avoid" 6 | } 7 | -------------------------------------------------------------------------------- /examples/react-klevu-ui-v2/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/klevultd/frontend-sdk/ea15c0290d2a3e86d6e6dab40bd3f406bc1c111f/examples/react-klevu-ui-v2/public/favicon.ico -------------------------------------------------------------------------------- /examples/react-klevu-ui-v2/public/purple.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/klevultd/frontend-sdk/ea15c0290d2a3e86d6e6dab40bd3f406bc1c111f/examples/react-klevu-ui-v2/public/purple.jpg -------------------------------------------------------------------------------- /examples/react-klevu-ui-v2/src/CategoryPage.tsx: -------------------------------------------------------------------------------- 1 | import React, { Fragment, useCallback } from "react" 2 | import { createRoot } from "react-dom/client" 3 | import { useParams } from "react-router-dom" 4 | import { KlevuButton, KlevuMerchandising } from "@klevu/ui-react" 5 | import { KlevuRecord } from "@klevu/core" 6 | import { useCart } from "./cartContext" 7 | 8 | export function CategoryPage() { 9 | const params = useParams() 10 | const cart = useCart() 11 | 12 | return ( 13 | 14 | 19 | 20 | ) 21 | } 22 | -------------------------------------------------------------------------------- /examples/react-klevu-ui-v2/src/ProductsPage.tsx: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import { Outlet } from "react-router-dom" 3 | 4 | export function ProductsPage() { 5 | return 6 | } 7 | -------------------------------------------------------------------------------- /examples/react-klevu-ui-v2/src/SearchResultPage.tsx: -------------------------------------------------------------------------------- 1 | import { KlevuSearchLandingPage } from "@klevu/ui-react" 2 | import React from "react" 3 | import { useLocation } from "react-router-dom" 4 | 5 | function useQuery() { 6 | const { search } = useLocation() 7 | 8 | return React.useMemo(() => new URLSearchParams(search), [search]) 9 | } 10 | 11 | export function SearchResultPage() { 12 | const query = useQuery() 13 | return ( 14 | 18 | ) 19 | } 20 | -------------------------------------------------------------------------------- /examples/react-klevu-ui-v2/src/constants.tsx: -------------------------------------------------------------------------------- 1 | export const SEARCH_URL = "eucs29v2.ksearchnet.com" 2 | export const SEARCH_API_KEY = "klevu-164651914788114877" 3 | export const BANNER_ID = "k-b1c018f7-ee85-45c0-b65f-b9556f7dc15d" 4 | export const CATEGORY_ID = "women" 5 | -------------------------------------------------------------------------------- /examples/react-klevu-ui-v2/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /examples/react-klevu-ui-v2/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "lib": ["ES2017", "DOM"], 4 | "jsx": "react-jsx", 5 | "esModuleInterop": true 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /examples/react-klevu-ui-v2/tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "composite": true, 4 | "skipLibCheck": true, 5 | "module": "ESNext", 6 | "moduleResolution": "bundler", 7 | "allowSyntheticDefaultImports": true 8 | }, 9 | "include": ["vite.config.ts"] 10 | } 11 | -------------------------------------------------------------------------------- /examples/react-klevu-ui-v2/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from "vite" 2 | import react from "@vitejs/plugin-react" 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | server: { 8 | open: true, 9 | port: 3333, 10 | }, 11 | }) 12 | -------------------------------------------------------------------------------- /examples/react-klevu-ui/assets/logo-green.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/klevultd/frontend-sdk/ea15c0290d2a3e86d6e6dab40bd3f406bc1c111f/examples/react-klevu-ui/assets/logo-green.png -------------------------------------------------------------------------------- /examples/react-klevu-ui/entrypoint.sh: -------------------------------------------------------------------------------- 1 | #!/bin/sh 2 | 3 | npm rebuild esbuild 4 | 5 | exec "$@" -------------------------------------------------------------------------------- /examples/react-klevu-ui/src/routes/ProductsPage.tsx: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import { Outlet } from "react-router-dom" 3 | 4 | export function ProductsPage() { 5 | return 6 | } 7 | -------------------------------------------------------------------------------- /examples/react-klevu-ui/src/routes/SearchResultPage.tsx: -------------------------------------------------------------------------------- 1 | import { KlevuSearchLandingPage } from "@klevu/ui-react" 2 | import React from "react" 3 | import { useLocation } from "react-router-dom" 4 | 5 | function useQuery() { 6 | const { search } = useLocation() 7 | 8 | return React.useMemo(() => new URLSearchParams(search), [search]) 9 | } 10 | 11 | export function SearchResultPage() { 12 | const query = useQuery() 13 | return 14 | } 15 | -------------------------------------------------------------------------------- /examples/react-klevu-ui/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "lib": ["ES2017", "DOM"], 4 | "jsx": "react-jsx", 5 | "esModuleInterop": true 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /examples/react/.dockerignore: -------------------------------------------------------------------------------- 1 | **/node_modules -------------------------------------------------------------------------------- /examples/react/.gitignore: -------------------------------------------------------------------------------- 1 | *.js 2 | *.map 3 | libdist -------------------------------------------------------------------------------- /examples/react/Dockerfile: -------------------------------------------------------------------------------- 1 | FROM node:17-alpine 2 | 3 | ENV NODE_ENV "development" 4 | 5 | WORKDIR /app 6 | 7 | COPY examples/react/entrypoint.sh /entrypoint.sh 8 | RUN chmod +x /entrypoint.sh 9 | 10 | ADD examples/react examples/react 11 | ADD packages/klevu-core packages/klevu-core 12 | 13 | WORKDIR /app/packages/klevu-core 14 | RUN npm install 15 | RUN npm run build 16 | 17 | WORKDIR /app/examples/react 18 | RUN npm install 19 | RUN npm run build 20 | 21 | ENTRYPOINT ["/entrypoint.sh"] 22 | 23 | EXPOSE 3001 24 | CMD ["npm", "run", "serve"] -------------------------------------------------------------------------------- /examples/react/entrypoint.sh: -------------------------------------------------------------------------------- 1 | #!/bin/sh 2 | 3 | npm rebuild esbuild 4 | 5 | exec "$@" -------------------------------------------------------------------------------- /examples/react/exports.ts: -------------------------------------------------------------------------------- 1 | // exports some of the components so that hydrogen app can use the same ones 2 | 3 | export * from "./src/components/quicksearch" 4 | export * from "./src/components/product" 5 | export * from "./src/components/loadingIndicator" 6 | export * from "./src/components/recommendationBanner" 7 | export * from "./src/components/filterdrawer" 8 | -------------------------------------------------------------------------------- /examples/react/public/cropped-klevu-icon-192x192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/klevultd/frontend-sdk/ea15c0290d2a3e86d6e6dab40bd3f406bc1c111f/examples/react/public/cropped-klevu-icon-192x192.png -------------------------------------------------------------------------------- /examples/react/public/cropped-klevu-icon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/klevultd/frontend-sdk/ea15c0290d2a3e86d6e6dab40bd3f406bc1c111f/examples/react/public/cropped-klevu-icon-32x32.png -------------------------------------------------------------------------------- /examples/react/public/logo-green.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/klevultd/frontend-sdk/ea15c0290d2a3e86d6e6dab40bd3f406bc1c111f/examples/react/public/logo-green.png -------------------------------------------------------------------------------- /examples/react/src/components/loadingIndicator.tsx: -------------------------------------------------------------------------------- 1 | import { CircularProgress } from "@mui/material" 2 | 3 | export function LoadingIndicator() { 4 | return ( 5 |
12 | 13 |
14 | ) 15 | } 16 | -------------------------------------------------------------------------------- /examples/react/src/index.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /examples/react/src/routes/ProductsPage.tsx: -------------------------------------------------------------------------------- 1 | import { Outlet } from "react-router-dom" 2 | 3 | export function ProductsPage() { 4 | return 5 | } 6 | -------------------------------------------------------------------------------- /examples/react/src/scrollTop.tsx: -------------------------------------------------------------------------------- 1 | import { useEffect } from "react" 2 | import { useLocation } from "react-router-dom" 3 | 4 | export default function ScrollToTop() { 5 | const { pathname } = useLocation() 6 | 7 | useEffect(() => { 8 | window.scrollTo(0, 0) 9 | }, [pathname]) 10 | 11 | return null 12 | } 13 | -------------------------------------------------------------------------------- /examples/react/src/useCopyToClipboard.ts: -------------------------------------------------------------------------------- 1 | type CopyFn = (text: string) => Promise; // Return success 2 | 3 | function useCopyToClipboard(): CopyFn { 4 | const copy: CopyFn = async (text) => { 5 | if (!navigator?.clipboard) { 6 | console.warn('Clipboard not supported'); 7 | return false; 8 | } 9 | 10 | // Try to save to clipboard then save it in the state if worked 11 | try { 12 | await navigator.clipboard.writeText(text); 13 | return true; 14 | } catch (error) { 15 | console.warn('Copy failed', error); 16 | return false; 17 | } 18 | }; 19 | 20 | return copy; 21 | } 22 | 23 | export default useCopyToClipboard; 24 | -------------------------------------------------------------------------------- /examples/react/src/utils.ts: -------------------------------------------------------------------------------- 1 | import { capitalize } from "@mui/material" 2 | 3 | export const getCategoryLabel = (category: string) => { 4 | return category 5 | .split(";") 6 | .map((r) => capitalize(r)) 7 | .join(" > ") 8 | } 9 | -------------------------------------------------------------------------------- /examples/react/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "jsx": "react-jsx", 4 | "jsxImportSource": "@emotion/react", 5 | "esModuleInterop": true, 6 | "lib": ["es2015", "dom"] 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /examples/react/tsconfig.lib.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "jsx": "react-jsx", 4 | "jsxImportSource": "@emotion/react", 5 | "esModuleInterop": true, 6 | "outDir": "./libdist/", 7 | "target": "ES2019", 8 | "lib": ["ES2019", "DOM"], 9 | "moduleResolution": "node", 10 | "declaration": true 11 | }, 12 | "include": ["exports.ts"], 13 | "exclude": ["node_modules", "libdist"] 14 | } 15 | -------------------------------------------------------------------------------- /examples/react/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from "vite" 2 | import react from "@vitejs/plugin-react" 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [ 7 | react({ 8 | jsxImportSource: "@emotion/react", 9 | babel: { 10 | plugins: ["@emotion/babel-plugin"], 11 | }, 12 | }), 13 | ], 14 | }) 15 | -------------------------------------------------------------------------------- /examples/remix/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | extends: ["@remix-run/eslint-config"], 3 | }; 4 | -------------------------------------------------------------------------------- /examples/remix/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | 3 | /.cache 4 | /build 5 | /public/build 6 | .env 7 | -------------------------------------------------------------------------------- /examples/remix/README.md: -------------------------------------------------------------------------------- 1 | # Welcome to Remix! 2 | 3 | - [Remix Docs](https://remix.run/docs) 4 | 5 | ## Development 6 | 7 | From your terminal: 8 | 9 | ```sh 10 | npm run dev 11 | ``` 12 | 13 | This starts your app in development mode, rebuilding assets on file changes. 14 | 15 | ## Deployment 16 | 17 | First, build your app for production: 18 | 19 | ```sh 20 | npm run build 21 | ``` 22 | 23 | Then run the app in production mode: 24 | 25 | ```sh 26 | npm start 27 | ``` 28 | 29 | Now you'll need to pick a host to deploy it to. 30 | -------------------------------------------------------------------------------- /examples/remix/app/components/product/product.css: -------------------------------------------------------------------------------- 1 | .product { 2 | width: 240px; 3 | border: 1px solid #cacaca; 4 | padding: 12px; 5 | margin: 12px; 6 | } 7 | 8 | .product img { 9 | width: 100%; 10 | } 11 | -------------------------------------------------------------------------------- /examples/remix/app/components/product/product.tsx: -------------------------------------------------------------------------------- 1 | import { KlevuRecord } from "@klevu/core" 2 | import styles from "./product.css" 3 | 4 | export const links = () => [{ rel: "stylesheet", href: styles }] 5 | 6 | type Props = { 7 | product: KlevuRecord 8 | } 9 | 10 | export function Product(props: Props) { 11 | return ( 12 |
13 | 14 |

{props.product.name}

15 |
16 | ) 17 | } 18 | -------------------------------------------------------------------------------- /examples/remix/app/entry.client.tsx: -------------------------------------------------------------------------------- 1 | import { KlevuConfig } from "@klevu/core" 2 | import { hydrate } from "react-dom" 3 | import { RemixBrowser } from "remix" 4 | 5 | KlevuConfig.init({ 6 | url: "https://eucs23v2.ksearchnet.com/cs/v2/search", 7 | apiKey: "klevu-160320037354512854", 8 | }) 9 | 10 | hydrate(, document) 11 | -------------------------------------------------------------------------------- /examples/remix/app/routes/category.tsx: -------------------------------------------------------------------------------- 1 | import { Outlet } from "remix" 2 | 3 | export default function Category() { 4 | return 5 | } 6 | -------------------------------------------------------------------------------- /examples/remix/app/routes/index.tsx: -------------------------------------------------------------------------------- 1 | export default function Index() { 2 | return ( 3 |
4 |

Welcome to Klevu Remix example

5 | 10 |
11 | ) 12 | } 13 | -------------------------------------------------------------------------------- /examples/remix/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/klevultd/frontend-sdk/ea15c0290d2a3e86d6e6dab40bd3f406bc1c111f/examples/remix/public/favicon.ico -------------------------------------------------------------------------------- /examples/remix/remix.config.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @type {import('@remix-run/dev').AppConfig} 3 | */ 4 | module.exports = { 5 | ignoredRouteFiles: [".*"], 6 | // appDirectory: "app", 7 | // assetsBuildDirectory: "public/build", 8 | // serverBuildPath: "build/index.js", 9 | // publicPath: "/build/", 10 | // devServerPort: 8002 11 | }; 12 | -------------------------------------------------------------------------------- /examples/remix/remix.env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | /// 3 | -------------------------------------------------------------------------------- /examples/remix/styles/index.css: -------------------------------------------------------------------------------- 1 | .products { 2 | display: flex; 3 | gap: 12px; 4 | flex-wrap: wrap; 5 | } 6 | -------------------------------------------------------------------------------- /examples/remix/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "include": ["remix.env.d.ts", "**/*.ts", "**/*.tsx"], 3 | "compilerOptions": { 4 | "lib": ["DOM", "DOM.Iterable", "ES2019"], 5 | "isolatedModules": true, 6 | "esModuleInterop": true, 7 | "jsx": "react-jsx", 8 | "moduleResolution": "node", 9 | "resolveJsonModule": true, 10 | "target": "ES2019", 11 | "strict": true, 12 | "baseUrl": ".", 13 | "paths": { 14 | "~/*": ["./app/*"] 15 | }, 16 | "noEmit": true, 17 | "allowJs": true, 18 | "forceConsistentCasingInFileNames": true 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /examples/vanillajs-klevu-ui/.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "html.customData": [ 3 | "./node_modules/@klevu/ui/dist/docs/vscode-data.json" 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /examples/vanillajs-klevu-ui/assets/check.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /examples/vanillajs-klevu-ui/assets/chevron_left.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /examples/vanillajs-klevu-ui/assets/chevron_right.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /examples/vanillajs-klevu-ui/assets/close.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /examples/vanillajs-klevu-ui/assets/expand_more.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /examples/vanillajs-klevu-ui/assets/image_not_supported.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /examples/vanillajs-klevu-ui/assets/menu.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /examples/vanillajs-klevu-ui/assets/navigate_before.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /examples/vanillajs-klevu-ui/assets/navigate_next.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /examples/vanillajs-klevu-ui/assets/photo_camera.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /examples/vanillajs-klevu-ui/assets/search.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /examples/vanillajs-klevu-ui/assets/thumb_down.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /examples/vanillajs-klevu-ui/assets/thumb_up.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /examples/vanillajs-klevu-ui/assets/upload.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /examples/vanillajs-klevu-ui/config.ts: -------------------------------------------------------------------------------- 1 | // simulate lazy loading config later on. This is just for demo purpose. 2 | setTimeout(() => { 3 | const init = document.querySelector("klevu-init") 4 | console.log("changing settings", init) 5 | 6 | init.settings = { 7 | onItemClick: (product, event) => { 8 | alert(product.name + " is clicked") 9 | }, 10 | generateProductUrl: (product) => { 11 | return "/product/" + product.id 12 | }, 13 | renderPrice: (amount, currency) => { 14 | // Something very custom and hardcoded. 15 | return `$${amount}` 16 | }, 17 | } 18 | // load settings after 3 seconds 19 | }, 3000) 20 | -------------------------------------------------------------------------------- /examples/vanillajs-klevu-ui/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vanillajs-klevu-ui", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "start": "vite --port 3007 --host", 8 | "initialize": "cd ../../packages/klevu-ui && npm run build" 9 | }, 10 | "author": "", 11 | "license": "ISC", 12 | "dependencies": { 13 | "@klevu/core": "file:../../packages/klevu-core", 14 | "@klevu/ui": "file:../../packages/klevu-ui" 15 | }, 16 | "devDependencies": { 17 | "vite": "^4.1.5" 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /examples/vanillajs-klevu-ui/readme.md: -------------------------------------------------------------------------------- 1 | # Vanilla JS example with Klevu UI 2 | 3 | This example imports Klevu UI from single JS file so that simple UI can be built. 4 | -------------------------------------------------------------------------------- /examples/vanillajs-klevu-ui/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from "vite" 2 | 3 | /* 4 | export default defineConfig({ 5 | optimizeDeps: { 6 | include: ["@klevu/ui"], 7 | }, 8 | build: { 9 | commonjsOptions: { 10 | include: [/@klevu/], 11 | }, 12 | }, 13 | }) 14 | */ 15 | -------------------------------------------------------------------------------- /examples/vanillajs/README.md: -------------------------------------------------------------------------------- 1 | # Vanilla JS basic example 2 | 3 | Extermely simple example of how to get data from Klevu. 4 | 5 | ## Running 6 | 7 | First install packages 8 | 9 | ```sh 10 | npm install 11 | ``` 12 | 13 | And then start it. 14 | 15 | ```sh 16 | npm start 17 | ``` 18 | 19 | Then you should have http://localhost:3005 showing the results 20 | -------------------------------------------------------------------------------- /examples/vanillajs/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Vanilla JS example 6 | 7 | 8 |

Klevu Vanilla JS examples

9 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /examples/vanillajs/init.ts: -------------------------------------------------------------------------------- 1 | import { KlevuConfig } from "@klevu/core" 2 | 3 | KlevuConfig.init({ 4 | url: "https://eucs29v2.ksearchnet.com/cs/v2/search", 5 | apiKey: "klevu-164651914788114877", 6 | }) 7 | -------------------------------------------------------------------------------- /examples/vanillajs/merchandising.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Vanilla JS merchandising example 6 | 7 | 8 |

Women bags category

9 | 

10 | 
11 |     
12 |     
13 |   
14 | 
15 | 


--------------------------------------------------------------------------------
/examples/vanillajs/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "klevu-example-vanillajs",
 3 |   "version": "1.0.0",
 4 |   "description": "",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "start": "vite --port 3005"
 8 |   },
 9 |   "author": "",
10 |   "license": "ISC",
11 |   "dependencies": {
12 |     "@klevu/core": "file:../../packages/klevu-core"
13 |   },
14 |   "devDependencies": {
15 |     "vite": "^4.5.3"
16 |   }
17 | }
18 | 


--------------------------------------------------------------------------------
/examples/vanillajs/quicksearch.html:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 |   
 4 |     
 5 |     Vanilla JS quicksearch example
 6 |   
 7 |   
 8 |     
 9 |     

10 | 
11 |     
12 |     
13 |   
14 | 
15 | 


--------------------------------------------------------------------------------
/examples/vanillajs/quicksearch_klaviyo.html:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 |   
 4 |     
 5 |     Vanilla JS quicksearch example
 6 |   
 7 |   
 8 |     
Klaviyo event data generation example

 9 |     

10 |       Selects first result as "clicked" product and generates a json from that.
11 |     

12 |     
13 |     

14 | 
15 |     
16 |     
17 |   
18 | 
19 | 


--------------------------------------------------------------------------------
/examples/vanillajs/recommendations.html:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 |   
 4 |     
 5 |     Vanilla JS recommendation example
 6 |   
 7 |   
 8 |     
Trending products in womens bags

 9 |     

10 | 
11 |     
12 |     
13 |   
14 | 
15 | 


--------------------------------------------------------------------------------
/examples/vanillajs/recommendations.ts:
--------------------------------------------------------------------------------
 1 | import { KlevuFetch, trendingCategoryProducts } from "@klevu/core"
 2 | import { printToOutput } from "./utils"
 3 | 
 4 | async function load() {
 5 |   const result = await KlevuFetch(trendingCategoryProducts("women;bags"))
 6 | 
 7 |   printToOutput(result.queriesById("trendingCategoryProducts")?.records)
 8 | }
 9 | 
10 | load()
11 | 


--------------------------------------------------------------------------------
/examples/vanillajs/recommendationskmc.html:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 |   
 4 |     
 5 |     Vanilla JS KMC recommendation example
 6 |   
 7 |   
 8 |     

 9 | 
10 |     
11 |     
12 |   
13 | 
14 | 


--------------------------------------------------------------------------------
/examples/vanillajs/recommendationskmc.ts:
--------------------------------------------------------------------------------
 1 | import { KlevuFetch, kmcRecommendation } from "@klevu/core"
 2 | import { printToOutput } from "./utils"
 3 | 
 4 | async function load() {
 5 |   const result = await KlevuFetch(
 6 |     kmcRecommendation("k-b1c018f7-ee85-45c0-b65f-b9556f7dc15d")
 7 |   )
 8 | 
 9 |   const query = result.queriesById("kmcrecommendation")
10 | 
11 |   console.log(query.getQueryParameters())
12 |   printToOutput(query.records)
13 | }
14 | 
15 | load()
16 | 


--------------------------------------------------------------------------------
/examples/vanillajs/utils.ts:
--------------------------------------------------------------------------------
 1 | export const debounce = (callback, wait) => {
 2 |   let timeoutId: number | undefined
 3 |   return (...args) => {
 4 |     window.clearTimeout(timeoutId)
 5 |     timeoutId = window.setTimeout(() => {
 6 |       callback.apply(null, args)
 7 |     }, wait)
 8 |   }
 9 | }
10 | 
11 | const output = document.getElementById("output") as HTMLPreElement
12 | export const printToOutput = (data: any) => {
13 |   output.innerHTML += JSON.stringify(data, undefined, 2) + "\n"
14 | }
15 | 
16 | export const clearOutput = () => {
17 |   output.innerHTML = ""
18 | }
19 | 


--------------------------------------------------------------------------------
/examples/vue-klevu-ui/.eslintrc.cjs:
--------------------------------------------------------------------------------
 1 | /* eslint-env node */
 2 | require('@rushstack/eslint-patch/modern-module-resolution')
 3 | 
 4 | module.exports = {
 5 |   root: true,
 6 |   'extends': [
 7 |     'plugin:vue/vue3-essential',
 8 |     'eslint:recommended',
 9 |     '@vue/eslint-config-typescript',
10 |     '@vue/eslint-config-prettier'
11 |   ],
12 |   parserOptions: {
13 |     ecmaVersion: 'latest'
14 |   }
15 | }
16 | 


--------------------------------------------------------------------------------
/examples/vue-klevu-ui/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | pnpm-debug.log*
 8 | lerna-debug.log*
 9 | 
10 | node_modules
11 | .DS_Store
12 | dist
13 | dist-ssr
14 | coverage
15 | *.local
16 | 
17 | /cypress/videos/
18 | /cypress/screenshots/
19 | 
20 | # Editor directories and files
21 | .vscode/*
22 | !.vscode/extensions.json
23 | .idea
24 | *.suo
25 | *.ntvs*
26 | *.njsproj
27 | *.sln
28 | *.sw?
29 | 


--------------------------------------------------------------------------------
/examples/vue-klevu-ui/.prettierrc.json:
--------------------------------------------------------------------------------
1 | {}


--------------------------------------------------------------------------------
/examples/vue-klevu-ui/.vscode/extensions.json:
--------------------------------------------------------------------------------
1 | {
2 |   "recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin"]
3 | }
4 | 


--------------------------------------------------------------------------------
/examples/vue-klevu-ui/env.d.ts:
--------------------------------------------------------------------------------
1 | /// 
2 | 


--------------------------------------------------------------------------------
/examples/vue-klevu-ui/index.html:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 |   
 4 |     
 5 |     
 6 |     
 7 |     
11 |     Vite App
12 |   
13 |   
14 |     

15 |     
16 |   
17 | 
18 | 


--------------------------------------------------------------------------------
/examples/vue-klevu-ui/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/klevultd/frontend-sdk/ea15c0290d2a3e86d6e6dab40bd3f406bc1c111f/examples/vue-klevu-ui/public/favicon.ico


--------------------------------------------------------------------------------
/examples/vue-klevu-ui/src/assets/base.css:
--------------------------------------------------------------------------------
1 | html,
2 | body {
3 |   margin: 0;
4 |   padding: 0;
5 | }
6 | 


--------------------------------------------------------------------------------
/examples/vue-klevu-ui/src/assets/main.css:
--------------------------------------------------------------------------------
1 | @import "./base.css";
2 | 


--------------------------------------------------------------------------------
/examples/vue-klevu-ui/src/main.ts:
--------------------------------------------------------------------------------
1 | import { createApp } from "vue";
2 | import App from "./App.vue";
3 | import { KlevuComponents } from "@klevu/ui-vue";
4 | 
5 | import "./assets/main.css";
6 | 
7 | createApp(App).use(KlevuComponents).mount("#app");
8 | 


--------------------------------------------------------------------------------
/examples/vue-klevu-ui/tsconfig.config.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": "@vue/tsconfig/tsconfig.node.json",
3 |   "include": ["vite.config.*", "vitest.config.*", "cypress.config.*", "playwright.config.*"],
4 |   "compilerOptions": {
5 |     "composite": true,
6 |     "types": ["node"]
7 |   }
8 | }
9 | 


--------------------------------------------------------------------------------
/examples/vue-klevu-ui/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "@vue/tsconfig/tsconfig.web.json",
 3 |   "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
 4 |   "compilerOptions": {
 5 |     "baseUrl": ".",
 6 |     "paths": {
 7 |       "@/*": ["./src/*"]
 8 |     }
 9 |   },
10 | 
11 |   "references": [
12 |     {
13 |       "path": "./tsconfig.config.json"
14 |     }
15 |   ]
16 | }
17 | 


--------------------------------------------------------------------------------
/examples/vue-klevu-ui/vite.config.ts:
--------------------------------------------------------------------------------
 1 | import { fileURLToPath, URL } from "node:url";
 2 | 
 3 | import { defineConfig } from "vite";
 4 | import vue from "@vitejs/plugin-vue";
 5 | import vueJsx from "@vitejs/plugin-vue-jsx";
 6 | 
 7 | // https://vitejs.dev/config/
 8 | export default defineConfig({
 9 |   plugins: [
10 |     vue({
11 |       template: {
12 |         compilerOptions: {
13 |           isCustomElement: (tag) => tag.startsWith("klevu-"),
14 |         },
15 |       },
16 |     }),
17 |     vueJsx(),
18 |   ],
19 |   resolve: {
20 |     alias: {
21 |       "@": fileURLToPath(new URL("./src", import.meta.url)),
22 |     },
23 |   },
24 | });
25 | 


--------------------------------------------------------------------------------
/examples/vue/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | pnpm-debug.log*
 8 | lerna-debug.log*
 9 | 
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 | 
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 | 


--------------------------------------------------------------------------------
/examples/vue/.vscode/extensions.json:
--------------------------------------------------------------------------------
1 | {
2 |   "recommendations": ["johnsoncodehk.volar"]
3 | }
4 | 


--------------------------------------------------------------------------------
/examples/vue/index.html:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 |   
 4 |     
 5 |     
 6 |     
 7 |     
 8 |     Klevu SDK + Vue Example
 9 |   
10 |   
11 |     

12 |     
13 |   
14 | 
15 | 


--------------------------------------------------------------------------------
/examples/vue/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   plugins: {
3 |     tailwindcss: {},
4 |     autoprefixer: {},
5 |   },
6 | }
7 | 


--------------------------------------------------------------------------------
/examples/vue/public/cropped-klevu-icon-192x192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/klevultd/frontend-sdk/ea15c0290d2a3e86d6e6dab40bd3f406bc1c111f/examples/vue/public/cropped-klevu-icon-192x192.png


--------------------------------------------------------------------------------
/examples/vue/public/cropped-klevu-icon-32x32.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/klevultd/frontend-sdk/ea15c0290d2a3e86d6e6dab40bd3f406bc1c111f/examples/vue/public/cropped-klevu-icon-32x32.png


--------------------------------------------------------------------------------
/examples/vue/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/klevultd/frontend-sdk/ea15c0290d2a3e86d6e6dab40bd3f406bc1c111f/examples/vue/src/assets/logo.png


--------------------------------------------------------------------------------
/examples/vue/src/main.css:
--------------------------------------------------------------------------------
 1 | @tailwind base;
 2 | @tailwind components;
 3 | @tailwind utilities;
 4 | 
 5 | * {
 6 |   @apply focus:outline-none;
 7 | }
 8 | 
 9 | #app {
10 |   @apply relative w-full overflow-x-hidden;
11 | }
12 | 
13 | .loading-message {
14 |   @apply text-center pt-32;
15 | }
16 | 


--------------------------------------------------------------------------------
/examples/vue/src/main.js:
--------------------------------------------------------------------------------
 1 | import { createApp } from "vue"
 2 | import App from "./App.vue"
 3 | import router from "./router/index"
 4 | import { createPinia } from "pinia"
 5 | import "./main.css"
 6 | 
 7 | const pinia = createPinia()
 8 | 
 9 | createApp(App).use(router).use(pinia).mount("#app")
10 | 


--------------------------------------------------------------------------------
/examples/vue/tailwind.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   content: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],
3 |   theme: {
4 |     extend: {},
5 |   },
6 |   plugins: [require("daisyui")],
7 | }
8 | 


--------------------------------------------------------------------------------
/examples/vue/vite.config.js:
--------------------------------------------------------------------------------
 1 | import { defineConfig } from "vite"
 2 | import vue from "@vitejs/plugin-vue"
 3 | 
 4 | // https://vitejs.dev/config/
 5 | export default defineConfig({
 6 |   plugins: [vue()],
 7 |   server: {
 8 |     port: 3002,
 9 |   },
10 | })
11 | 


--------------------------------------------------------------------------------
/images/klevu_header.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/klevultd/frontend-sdk/ea15c0290d2a3e86d6e6dab40bd3f406bc1c111f/images/klevu_header.jpg


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "klevuheadless",
 3 |   "version": "0.0.1",
 4 |   "description": "Source of Klevu Headless",
 5 |   "scripts": {},
 6 |   "author": "Klevu",
 7 |   "license": "MIT",
 8 |   "type": "module",
 9 |   "repository": {
10 |     "type": "git",
11 |     "url": "https://github.com/klevultd/frontend-sdk",
12 |     "directory": "packages/klevu-core"
13 |   },
14 |   "devDependencies": {
15 |     "@types/jest": "^29.2.3"
16 |   }
17 | }
18 | 


--------------------------------------------------------------------------------
/packages/klevu-core/.eslintignore:
--------------------------------------------------------------------------------
1 | .eslintrc.cjs
2 | node_modules
3 | **/*/tests/*
4 | jest.config.*
5 | **/*.test.ts


--------------------------------------------------------------------------------
/packages/klevu-core/.npmignore:
--------------------------------------------------------------------------------
 1 | node_modules
 2 | src
 3 | typedoc.json
 4 | tsconfig.json
 5 | jest.config.cjs
 6 | coverage
 7 | docs
 8 | tsconfig*
 9 | fixup
10 | publishing.md


--------------------------------------------------------------------------------
/packages/klevu-core/docs/.nojekyll:
--------------------------------------------------------------------------------
1 | TypeDoc added this file to prevent GitHub Pages from using Jekyll. You can turn off this behavior by setting the `githubPages` option to false.


--------------------------------------------------------------------------------
/packages/klevu-core/docs/interfaces/KMCBannerRootObject.md:
--------------------------------------------------------------------------------
 1 | [@klevu/core]() / [Exports](../modules.md) / KMCBannerRootObject
 2 | 
 3 | # Interface: KMCBannerRootObject
 4 | 
 5 | ## Table of contents
 6 | 
 7 | ### Properties
 8 | 
 9 | - [klevu\_banner](KMCBannerRootObject.md#klevu_banner)
10 | 
11 | ## Properties
12 | 
13 | ### klevu\_banner
14 | 
15 | • **klevu\_banner**: [`KlevuBanner`](KlevuBanner.md)[]
16 | 
17 | #### Defined in
18 | 
19 | [models/KMCBanner.ts:21](https://github.com/klevultd/frontend-sdk/blob/492d3760/packages/klevu-core/src/models/KMCBanner.ts#L21)
20 | 


--------------------------------------------------------------------------------
/packages/klevu-core/docs/interfaces/KMCMapsRootObject.md:
--------------------------------------------------------------------------------
 1 | [@klevu/core]() / [Exports](../modules.md) / KMCMapsRootObject
 2 | 
 3 | # Interface: KMCMapsRootObject
 4 | 
 5 | ## Table of contents
 6 | 
 7 | ### Properties
 8 | 
 9 | - [klevu\_keywordUrlMap](KMCMapsRootObject.md#klevu_keywordurlmap)
10 | 
11 | ## Properties
12 | 
13 | ### klevu\_keywordUrlMap
14 | 
15 | • **klevu\_keywordUrlMap**: [`KlevuKeywordUrlMap`](KlevuKeywordUrlMap.md)[]
16 | 
17 | #### Defined in
18 | 
19 | [models/KMCMaps.ts:7](https://github.com/klevultd/frontend-sdk/blob/492d3760/packages/klevu-core/src/models/KMCMaps.ts#L7)
20 | 


--------------------------------------------------------------------------------
/packages/klevu-core/docs/modules/abtest.md:
--------------------------------------------------------------------------------
 1 | # abtest
 2 |       
 3 | ▸ **abTest**(): `KlevuFetchModifer`
 4 | 
 5 | Enables AB test functionality. This will make extra request to Klevu servers and it is recommended only if you wish to use A/B testing feature.
 6 | 
 7 | Currently not supported in server side rendering.
 8 | 
 9 | #### Returns
10 | 
11 | `KlevuFetchModifer`
12 | 
13 | #### Defined in
14 | 
15 | [modifiers/abTest/abTest.ts:20](https://github.com/klevultd/frontend-sdk/blob/492d3760/packages/klevu-core/src/modifiers/abTest/abTest.ts#L20)
16 | 
17 | 


--------------------------------------------------------------------------------
/packages/klevu-core/docs/modules/applyfilter.md:
--------------------------------------------------------------------------------
 1 | # applyfilter
 2 |       
 3 | Ƭ **ApplyFilter**: `Object`
 4 | 
 5 | #### Type declaration
 6 | 
 7 | | Name | Type |
 8 | | :------ | :------ |
 9 | | `key` | `string` |
10 | | `settings?` | { `singleSelect`: `boolean`  } |
11 | | `settings.singleSelect` | `boolean` |
12 | | `values` | `string`[] \| [`number`, `number`] |
13 | 
14 | #### Defined in
15 | 
16 | [modifiers/applyFilter/applyFilter.ts:5](https://github.com/klevultd/frontend-sdk/blob/492d3760/packages/klevu-core/src/modifiers/applyFilter/applyFilter.ts#L5)
17 | 
18 | 


--------------------------------------------------------------------------------
/packages/klevu-core/docs/modules/applyfilters.md:
--------------------------------------------------------------------------------
 1 | # applyfilters
 2 |       
 3 | ▸ **applyFilters**(`filters`): `KlevuFetchModifer`
 4 | 
 5 | #### Parameters
 6 | 
 7 | | Name | Type |
 8 | | :------ | :------ |
 9 | | `filters` | [`ApplyFilter`](applyfilter.md)[] |
10 | 
11 | #### Returns
12 | 
13 | `KlevuFetchModifer`
14 | 
15 | #### Defined in
16 | 
17 | [modifiers/applyFilter/applyFilter.ts:21](https://github.com/klevultd/frontend-sdk/blob/492d3760/packages/klevu-core/src/modifiers/applyFilter/applyFilter.ts#L21)
18 | 
19 | 


--------------------------------------------------------------------------------
/packages/klevu-core/docs/modules/applyfilterwithmanager.md:
--------------------------------------------------------------------------------
 1 | # applyfilterwithmanager
 2 |       
 3 | ▸ **applyFilterWithManager**(`manager`): `KlevuFetchModifer`
 4 | 
 5 | Apply filters to query based on Filter Manager
 6 | 
 7 | #### Parameters
 8 | 
 9 | | Name | Type |
10 | | :------ | :------ |
11 | | `manager` | [`FilterManager`](classes/FilterManager.md) |
12 | 
13 | #### Returns
14 | 
15 | `KlevuFetchModifer`
16 | 
17 | #### Defined in
18 | 
19 | [modifiers/applyFilterWithManager/applyFilterWithManager.ts:12](https://github.com/klevultd/frontend-sdk/blob/492d3760/packages/klevu-core/src/modifiers/applyFilterWithManager/applyFilterWithManager.ts#L12)
20 | 
21 | 


--------------------------------------------------------------------------------
/packages/klevu-core/docs/modules/boostwithfilters.md:
--------------------------------------------------------------------------------
 1 | # boostwithfilters
 2 |       
 3 | ▸ **boostWithFilters**(`boosts`): `KlevuFetchModifer`
 4 | 
 5 | Boost products based on a filters
 6 | 
 7 | #### Parameters
 8 | 
 9 | | Name | Type |
10 | | :------ | :------ |
11 | | `boosts` | { `key`: `string` ; `values`: `string`[] ; `weight`: `number`  }[] |
12 | 
13 | #### Returns
14 | 
15 | `KlevuFetchModifer`
16 | 
17 | #### Defined in
18 | 
19 | [modifiers/boostWithFilters/boostWithFilters.ts:10](https://github.com/klevultd/frontend-sdk/blob/492d3760/packages/klevu-core/src/modifiers/boostWithFilters/boostWithFilters.ts#L10)
20 | 
21 | 


--------------------------------------------------------------------------------
/packages/klevu-core/docs/modules/debug.md:
--------------------------------------------------------------------------------
 1 | # debug
 2 |       
 3 | ▸ **debug**(): `KlevuFetchModifer`
 4 | 
 5 | Prints queries to console for easier debugging
 6 | 
 7 | #### Returns
 8 | 
 9 | `KlevuFetchModifer`
10 | 
11 | #### Defined in
12 | 
13 | [modifiers/debug/debug.ts:9](https://github.com/klevultd/frontend-sdk/blob/492d3760/packages/klevu-core/src/modifiers/debug/debug.ts#L9)
14 | 
15 | 


--------------------------------------------------------------------------------
/packages/klevu-core/docs/modules/exclude.md:
--------------------------------------------------------------------------------
 1 | # exclude
 2 |       
 3 | ▸ **exclude**(`itemGroupIds`): `KlevuFetchModifer`
 4 | 
 5 | Force exclude product ids on result
 6 | 
 7 | #### Parameters
 8 | 
 9 | | Name | Type |
10 | | :------ | :------ |
11 | | `itemGroupIds` | `string`[] |
12 | 
13 | #### Returns
14 | 
15 | `KlevuFetchModifer`
16 | 
17 | #### Defined in
18 | 
19 | [modifiers/exclude/exclude.ts:10](https://github.com/klevultd/frontend-sdk/blob/492d3760/packages/klevu-core/src/modifiers/exclude/exclude.ts#L10)
20 | 
21 | 


--------------------------------------------------------------------------------
/packages/klevu-core/docs/modules/fallback.md:
--------------------------------------------------------------------------------
 1 | # fallback
 2 |       
 3 | ▸ **fallback**(`func`, `options?`): `KlevuFetchModifer`
 4 | 
 5 | If original query doesn't return enough results then fallback query is run added to results
 6 | 
 7 | #### Parameters
 8 | 
 9 | | Name | Type |
10 | | :------ | :------ |
11 | | `func` | [`KlevuFetchFunctionReturnValue`](klevufetchfunctionreturnvalue.md) |
12 | | `options?` | [`KlevuFallbackQueryOptions`](klevufallbackqueryoptions.md) |
13 | 
14 | #### Returns
15 | 
16 | `KlevuFetchModifer`
17 | 
18 | #### Defined in
19 | 
20 | [modifiers/fallback/fallback.ts:16](https://github.com/klevultd/frontend-sdk/blob/492d3760/packages/klevu-core/src/modifiers/fallback/fallback.ts#L16)
21 | 
22 | 


--------------------------------------------------------------------------------
/packages/klevu-core/docs/modules/filtermanagerfilters.md:
--------------------------------------------------------------------------------
1 | # filtermanagerfilters
2 |       
3 | Ƭ **FilterManagerFilters**: [`KlevuFilterResultOptions`](klevufilterresultoptions.md) \| [`KlevuFilterResultSlider`](klevufilterresultslider.md) \| [`KlevuFilterResultRating`](klevufilterresultrating.md)
4 | 
5 | #### Defined in
6 | 
7 | [store/filterManager.ts:15](https://github.com/klevultd/frontend-sdk/blob/492d3760/packages/klevu-core/src/store/filterManager.ts#L15)
8 | 
9 | 


--------------------------------------------------------------------------------
/packages/klevu-core/docs/modules/include.md:
--------------------------------------------------------------------------------
 1 | # include
 2 |       
 3 | ▸ **include**(`ids`): `KlevuFetchModifer`
 4 | 
 5 | Force include product ids on result
 6 | 
 7 | #### Parameters
 8 | 
 9 | | Name | Type |
10 | | :------ | :------ |
11 | | `ids` | `string`[] |
12 | 
13 | #### Returns
14 | 
15 | `KlevuFetchModifer`
16 | 
17 | #### Defined in
18 | 
19 | [modifiers/include/include.ts:10](https://github.com/klevultd/frontend-sdk/blob/492d3760/packages/klevu-core/src/modifiers/include/include.ts#L10)
20 | 
21 | 


--------------------------------------------------------------------------------
/packages/klevu-core/docs/modules/klaviyo.md:
--------------------------------------------------------------------------------
 1 | # klaviyo
 2 |       
 3 | ▸ **klaviyo**(`params?`): `KlevuFetchModifer`
 4 | 
 5 | Automatically sends search event to Klaviyo on search, recommendations and category navigation.
 6 | 
 7 | #### Parameters
 8 | 
 9 | | Name | Type |
10 | | :------ | :------ |
11 | | `params` | `KlaviyoOptions` |
12 | 
13 | #### Returns
14 | 
15 | `KlevuFetchModifer`
16 | 
17 | #### Defined in
18 | 
19 | [modifiers/klaviyo/klaviyo.ts:22](https://github.com/klevultd/frontend-sdk/blob/492d3760/packages/klevu-core/src/modifiers/klaviyo/klaviyo.ts#L22)
20 | 
21 | 


--------------------------------------------------------------------------------
/packages/klevu-core/docs/modules/klevuallrecordqueries.md:
--------------------------------------------------------------------------------
 1 | # klevuallrecordqueries
 2 |       
 3 | Ƭ **KlevuAllRecordQueries**: [`KlevuBaseQuery`](klevubasequery.md) \| [`KlevuSimilarProductsQuery`](klevusimilarproductsquery.md) \| [`KlevuTrendingProductsQuery`](klevutrendingproductsquery.md) \| [`KlevuAlsoViewedQuery`](klevualsoviewedquery.md)
 4 | 
 5 | All possible record queries that can be used with [KlevuFetch](klevufetch.md) function
 6 | 
 7 | #### Defined in
 8 | 
 9 | [models/KlevuAllRecordQueries.ts:9](https://github.com/klevultd/frontend-sdk/blob/492d3760/packages/klevu-core/src/models/KlevuAllRecordQueries.ts#L9)
10 | 
11 | 


--------------------------------------------------------------------------------
/packages/klevu-core/docs/modules/klevualsoboughtquery.md:
--------------------------------------------------------------------------------
 1 | # klevualsoboughtquery
 2 |       
 3 | Ƭ **KlevuAlsoBoughtQuery**: [`KlevuBaseQuery`](klevubasequery.md) & [`KlevuAlsoViewedQuery`](klevualsoviewedquery.md) & { `typeOfRequest`: [`AlsoBought`](enums/KlevuTypeOfRequest.md#alsobought)  }
 4 | 
 5 | Backend API parameters relevat for Also Bought Recommendation query
 6 | 
 7 | #### Defined in
 8 | 
 9 | [models/KlevuAlsoBoughtQuery.ts:8](https://github.com/klevultd/frontend-sdk/blob/492d3760/packages/klevu-core/src/models/KlevuAlsoBoughtQuery.ts#L8)
10 | 
11 | 


--------------------------------------------------------------------------------
/packages/klevu-core/docs/modules/klevualsoviewedquery.md:
--------------------------------------------------------------------------------
 1 | # klevualsoviewedquery
 2 |       
 3 | Ƭ **KlevuAlsoViewedQuery**: [`KlevuBaseQuery`](klevubasequery.md) & { `settings?`: { `context?`: { `recentObjects`: { `records`: { `id`: `string`  }[] ; `typeOfRecord`: [`KlevuAnyTypeOfRecord`](klevuanytypeofrecord.md)  }[]  }  } ; `typeOfRequest`: [`AlsoViewed`](enums/KlevuTypeOfRequest.md#alsoviewed)  }
 4 | 
 5 | Klevu API query specific for Also Viewed recommendation
 6 | 
 7 | #### Defined in
 8 | 
 9 | [models/KlevuAlsoViewedQuery.ts:7](https://github.com/klevultd/frontend-sdk/blob/492d3760/packages/klevu-core/src/models/KlevuAlsoViewedQuery.ts#L7)
10 | 
11 | 


--------------------------------------------------------------------------------
/packages/klevu-core/docs/modules/klevuanytypeofrecord.md:
--------------------------------------------------------------------------------
1 | # klevuanytypeofrecord
2 |       
3 | Ƭ **KlevuAnyTypeOfRecord**: `LiteralUnion`<`ValueOf`, `string`\>
4 | 
5 | #### Defined in
6 | 
7 | [models/KlevuTypeOfRecord.ts:11](https://github.com/klevultd/frontend-sdk/blob/492d3760/packages/klevu-core/src/models/KlevuTypeOfRecord.ts#L11)
8 | 
9 | 


--------------------------------------------------------------------------------
/packages/klevu-core/docs/modules/klevufallbackqueryoptions.md:
--------------------------------------------------------------------------------
 1 | # klevufallbackqueryoptions
 2 |       
 3 | Ƭ **KlevuFallbackQueryOptions**: `Object`
 4 | 
 5 | #### Type declaration
 6 | 
 7 | | Name | Type |
 8 | | :------ | :------ |
 9 | | `runWhenLessThanResults` | `number` |
10 | 
11 | #### Defined in
12 | 
13 | [modifiers/fallback/fallback.ts:5](https://github.com/klevultd/frontend-sdk/blob/492d3760/packages/klevu-core/src/modifiers/fallback/fallback.ts#L5)
14 | 
15 | 


--------------------------------------------------------------------------------
/packages/klevu-core/docs/modules/klevufetchqueries.md:
--------------------------------------------------------------------------------
1 | # klevufetchqueries
2 |       
3 | Ƭ **KlevuFetchQueries**: (`Promise`<[`KlevuFetchFunctionReturnValue`](klevufetchfunctionreturnvalue.md)\> \| [`KlevuFetchFunctionReturnValue`](klevufetchfunctionreturnvalue.md))[]
4 | 
5 | #### Defined in
6 | 
7 | [models/KlevuFetchQueries.ts:3](https://github.com/klevultd/frontend-sdk/blob/492d3760/packages/klevu-core/src/models/KlevuFetchQueries.ts#L3)
8 | 
9 | 


--------------------------------------------------------------------------------
/packages/klevu-core/docs/modules/klevufilterresultoptions.md:
--------------------------------------------------------------------------------
1 | # klevufilterresultoptions
2 |       
3 | Ƭ **KlevuFilterResultOptions**: `KlevuFilterResult` & { `options`: { `count`: `number` ; `name`: `string` ; `selected`: `boolean` ; `value`: `string`  }[] ; `type`: [`Options`](enums/KlevuFilterType.md#options) \| [`Rating`](enums/KlevuFilterType.md#rating)  }
4 | 
5 | #### Defined in
6 | 
7 | [models/KlevuApiRawResponse.ts:31](https://github.com/klevultd/frontend-sdk/blob/492d3760/packages/klevu-core/src/models/KlevuApiRawResponse.ts#L31)
8 | 
9 | 


--------------------------------------------------------------------------------
/packages/klevu-core/docs/modules/klevufilterresultrating.md:
--------------------------------------------------------------------------------
 1 | # klevufilterresultrating
 2 |       
 3 | Ƭ **KlevuFilterResultRating**: `KlevuFilterResult` & { `options`: { `count`: `number` ; `name`: `string` ; `selected`: `boolean` ; `value`: `string`  }[] ; `type`: [`Rating`](enums/KlevuFilterType.md#rating)  }
 4 | 
 5 | Klevu rating filters option
 6 | 
 7 | #### Defined in
 8 | 
 9 | [models/KlevuApiRawResponse.ts:82](https://github.com/klevultd/frontend-sdk/blob/492d3760/packages/klevu-core/src/models/KlevuApiRawResponse.ts#L82)
10 | 
11 | 


--------------------------------------------------------------------------------
/packages/klevu-core/docs/modules/klevufilterresultslider.md:
--------------------------------------------------------------------------------
 1 | # klevufilterresultslider
 2 |       
 3 | Ƭ **KlevuFilterResultSlider**: `KlevuFilterResult` & { `end`: `string` \| ``null`` ; `max`: `string` ; `min`: `string` ; `start`: `string` \| ``null`` ; `type`: [`Slider`](enums/KlevuFilterType.md#slider)  }
 4 | 
 5 | Klevu slider filters
 6 | 
 7 | #### Defined in
 8 | 
 9 | [models/KlevuApiRawResponse.ts:59](https://github.com/klevultd/frontend-sdk/blob/492d3760/packages/klevu-core/src/models/KlevuApiRawResponse.ts#L59)
10 | 
11 | 


--------------------------------------------------------------------------------
/packages/klevu-core/docs/modules/klevugetbannersbytype.md:
--------------------------------------------------------------------------------
 1 | # klevugetbannersbytype
 2 |       
 3 | ▸ **KlevuGetBannersByType**(`banners`, `searchType`, `termOrCategory`): [`KlevuBanner`](interfaces/KlevuBanner.md)[]
 4 | 
 5 | #### Parameters
 6 | 
 7 | | Name | Type |
 8 | | :------ | :------ |
 9 | | `banners` | [`KlevuBanner`](interfaces/KlevuBanner.md)[] |
10 | | `searchType` | `KlevuBannerSearchType` |
11 | | `termOrCategory` | `string` |
12 | 
13 | #### Returns
14 | 
15 | [`KlevuBanner`](interfaces/KlevuBanner.md)[]
16 | 
17 | #### Defined in
18 | 
19 | [utils/getBannersByType.ts:5](https://github.com/klevultd/frontend-sdk/blob/492d3760/packages/klevu-core/src/utils/getBannersByType.ts#L5)
20 | 
21 | 


--------------------------------------------------------------------------------
/packages/klevu-core/docs/modules/klevulastclickedproducts.md:
--------------------------------------------------------------------------------
1 | # klevulastclickedproducts
2 |       
3 | • `Const` **KlevuLastClickedProducts**: `LastClickedProducts`
4 | 
5 | #### Defined in
6 | 
7 | [store/lastClickedProducts.ts:153](https://github.com/klevultd/frontend-sdk/blob/492d3760/packages/klevu-core/src/store/lastClickedProducts.ts#L153)
8 | 
9 | 


--------------------------------------------------------------------------------
/packages/klevu-core/docs/modules/klevulastsearch.md:
--------------------------------------------------------------------------------
 1 | # klevulastsearch
 2 |       
 3 | Ƭ **KlevuLastSearch**: `Object`
 4 | 
 5 | #### Type declaration
 6 | 
 7 | | Name | Type |
 8 | | :------ | :------ |
 9 | | `term` | `string` |
10 | | `timestamp` | `number` |
11 | 
12 | #### Defined in
13 | 
14 | [store/lastSearches.ts:4](https://github.com/klevultd/frontend-sdk/blob/492d3760/packages/klevu-core/src/store/lastSearches.ts#L4)
15 | 
16 | 


--------------------------------------------------------------------------------
/packages/klevu-core/docs/modules/klevulastsearches.md:
--------------------------------------------------------------------------------
 1 | # klevulastsearches
 2 |       
 3 | • `Const` **KlevuLastSearches**: `Object`
 4 | 
 5 | #### Type declaration
 6 | 
 7 | | Name | Type |
 8 | | :------ | :------ |
 9 | | `get` | () => [`KlevuLastSearch`](klevulastsearch.md)[] |
10 | | `save` | (`term`: `string`) => `void` |
11 | 
12 | #### Defined in
13 | 
14 | [store/lastSearches.ts:19](https://github.com/klevultd/frontend-sdk/blob/492d3760/packages/klevu-core/src/store/lastSearches.ts#L19)
15 | 
16 | 


--------------------------------------------------------------------------------
/packages/klevu-core/docs/modules/klevulistfilter.md:
--------------------------------------------------------------------------------
 1 | # klevulistfilter
 2 |       
 3 | Ƭ **KlevuListFilter**: `Object`
 4 | 
 5 | #### Type declaration
 6 | 
 7 | | Name | Type |
 8 | | :------ | :------ |
 9 | | `filtersToReturn?` | [`KlevuListFiltersToReturn`](klevulistfilterstoreturn.md) |
10 | 
11 | #### Defined in
12 | 
13 | [models/KlevuListFilter.ts:55](https://github.com/klevultd/frontend-sdk/blob/492d3760/packages/klevu-core/src/models/KlevuListFilter.ts#L55)
14 | 
15 | 


--------------------------------------------------------------------------------
/packages/klevu-core/docs/modules/klevumerchandisingoptions.md:
--------------------------------------------------------------------------------
1 | # klevumerchandisingoptions
2 |       
3 | Ƭ **KlevuMerchandisingOptions**: { `id`: `string` ; `searchTerm`: `string`  } & `Omit`<[`KlevuBaseQuerySettings`](klevubasequerysettings.md), ``"query"``\>
4 | 
5 | #### Defined in
6 | 
7 | [queries/categoryMerchandising/categoryMerchandising.ts:10](https://github.com/klevultd/frontend-sdk/blob/492d3760/packages/klevu-core/src/queries/categoryMerchandising/categoryMerchandising.ts#L10)
8 | 
9 | 


--------------------------------------------------------------------------------
/packages/klevu-core/docs/modules/klevupayload.md:
--------------------------------------------------------------------------------
 1 | # klevupayload
 2 |       
 3 | Ƭ **KlevuPayload**: `Object`
 4 | 
 5 | #### Type declaration
 6 | 
 7 | | Name | Type |
 8 | | :------ | :------ |
 9 | | `context` | { `apiKeys`: `string`[]  } |
10 | | `context.apiKeys` | `string`[] |
11 | | `recordQueries?` | [`KlevuAllRecordQueries`](klevuallrecordqueries.md)[] |
12 | | `suggestions?` | [`KlevuSuggestionQuery`](klevusuggestionquery.md)[] |
13 | 
14 | #### Defined in
15 | 
16 | [models/KlevuPayload.ts:4](https://github.com/klevultd/frontend-sdk/blob/492d3760/packages/klevu-core/src/models/KlevuPayload.ts#L4)
17 | 
18 | 


--------------------------------------------------------------------------------
/packages/klevu-core/docs/modules/klevurecordfields.md:
--------------------------------------------------------------------------------
1 | # klevurecordfields
2 |       
3 | Ƭ **KlevuRecordFields**: `LiteralUnion`
4 | 
5 | #### Defined in
6 | 
7 | [models/KlevuRecordFields.ts:4](https://github.com/klevultd/frontend-sdk/blob/492d3760/packages/klevu-core/src/models/KlevuRecordFields.ts#L4)
8 | 
9 | 


--------------------------------------------------------------------------------
/packages/klevu-core/docs/modules/klevusearchoptions.md:
--------------------------------------------------------------------------------
 1 | # klevusearchoptions
 2 |       
 3 | Ƭ **KlevuSearchOptions**: { `id`: `string` ; `typeOfRecords`: [`KlevuAnyTypeOfRecord`](klevuanytypeofrecord.md)[]  } & `Omit`<[`KlevuBaseQuerySettings`](klevubasequerysettings.md), ``"query"``\>
 4 | 
 5 | Search options to modify the search query.
 6 | 
 7 | #### Defined in
 8 | 
 9 | [queries/search/search.ts:15](https://github.com/klevultd/frontend-sdk/blob/492d3760/packages/klevu-core/src/queries/search/search.ts#L15)
10 | 
11 | 


--------------------------------------------------------------------------------
/packages/klevu-core/docs/modules/klevusimilarproductsquery.md:
--------------------------------------------------------------------------------
1 | # klevusimilarproductsquery
2 |       
3 | Ƭ **KlevuSimilarProductsQuery**: [`KlevuBaseQuery`](klevubasequery.md) & { `settings`: { `context`: { `recentObjects`: { `records`: { `id`: `string`  }[] ; `typeOfRecord`: [`KlevuAnyTypeOfRecord`](klevuanytypeofrecord.md)  }[]  }  } ; `typeOfRequest`: [`SimilarProducts`](enums/KlevuTypeOfRequest.md#similarproducts)  }
4 | 
5 | #### Defined in
6 | 
7 | [models/KlevuSimilarProductsQuery.ts:4](https://github.com/klevultd/frontend-sdk/blob/492d3760/packages/klevu-core/src/models/KlevuSimilarProductsQuery.ts#L4)
8 | 
9 | 


--------------------------------------------------------------------------------
/packages/klevu-core/docs/modules/klevusuggestionquery.md:
--------------------------------------------------------------------------------
1 | # klevusuggestionquery
2 |       
3 | Ƭ **KlevuSuggestionQuery**: [`KlevuBaseQuery`](klevubasequery.md) & { `hlEndElem?`: `string` ; `hlStartElem?`: `string` ; `limit?`: `number` ; `query`: `string` ; `typeOfRequest`: [`Suggestion`](enums/KlevuTypeOfRequest.md#suggestion)  }
4 | 
5 | #### Defined in
6 | 
7 | [models/KlevuSuggestionQuery.ts:4](https://github.com/klevultd/frontend-sdk/blob/492d3760/packages/klevu-core/src/models/KlevuSuggestionQuery.ts#L4)
8 | 
9 | 


--------------------------------------------------------------------------------
/packages/klevu-core/docs/modules/klevusuggestionresult.md:
--------------------------------------------------------------------------------
 1 | # klevusuggestionresult
 2 |       
 3 | Ƭ **KlevuSuggestionResult**: `Object`
 4 | 
 5 | #### Type declaration
 6 | 
 7 | | Name | Type |
 8 | | :------ | :------ |
 9 | | `id` | `string` |
10 | | `suggestions` | { `suggest`: `string`  }[] |
11 | 
12 | #### Defined in
13 | 
14 | [models/KlevuSuggestionResult.ts:1](https://github.com/klevultd/frontend-sdk/blob/492d3760/packages/klevu-core/src/models/KlevuSuggestionResult.ts#L1)
15 | 
16 | 


--------------------------------------------------------------------------------
/packages/klevu-core/docs/modules/klevutrendingproductsquery.md:
--------------------------------------------------------------------------------
1 | # klevutrendingproductsquery
2 |       
3 | Ƭ **KlevuTrendingProductsQuery**: [`KlevuBaseQuery`](klevubasequery.md) & { `settings?`: { `query?`: { `categoryPath?`: `string` ; `term`: ``"*"``  }  } ; `typeOfRequest`: [`Trending`](enums/KlevuTypeOfRequest.md#trending)  }
4 | 
5 | #### Defined in
6 | 
7 | [models/KlevuTrendingProductsQuery.ts:4](https://github.com/klevultd/frontend-sdk/blob/492d3760/packages/klevu-core/src/models/KlevuTrendingProductsQuery.ts#L4)
8 | 
9 | 


--------------------------------------------------------------------------------
/packages/klevu-core/docs/modules/listfilters.md:
--------------------------------------------------------------------------------
 1 | # listfilters
 2 |       
 3 | ▸ **listFilters**(`options?`): `KlevuFetchModifer`
 4 | 
 5 | List filters that can affect given query
 6 | 
 7 | #### Parameters
 8 | 
 9 | | Name | Type |
10 | | :------ | :------ |
11 | | `options?` | `Partial`<`Options`\> |
12 | 
13 | #### Returns
14 | 
15 | `KlevuFetchModifer`
16 | 
17 | #### Defined in
18 | 
19 | [modifiers/listFilters/listFilters.ts:33](https://github.com/klevultd/frontend-sdk/blob/492d3760/packages/klevu-core/src/modifiers/listFilters/listFilters.ts#L33)
20 | 
21 | 


--------------------------------------------------------------------------------
/packages/klevu-core/docs/modules/moichatmodes.md:
--------------------------------------------------------------------------------
1 | # moichatmodes
2 |       
3 | Ƭ **MoiChatModes**: ``"PQA"``
4 | 
5 | #### Defined in
6 | 
7 | [connection/moi/moi.ts:160](https://github.com/klevultd/frontend-sdk/blob/492d3760/packages/klevu-core/src/connection/moi/moi.ts#L160)
8 | 
9 | 


--------------------------------------------------------------------------------
/packages/klevu-core/docs/modules/moicontext.md:
--------------------------------------------------------------------------------
 1 | # moicontext
 2 |       
 3 | Ƭ **MoiContext**: `Object`
 4 | 
 5 | #### Type declaration
 6 | 
 7 | | Name | Type |
 8 | | :------ | :------ |
 9 | | `klevuApiKey` | `string` |
10 | | `mode?` | [`MoiChatModes`](moichatmodes.md) |
11 | | `pqaWidgetId?` | `string` |
12 | | `productId?` | `string` |
13 | | `sessionId?` | `string` |
14 | | `url?` | `string` |
15 | 
16 | #### Defined in
17 | 
18 | [connection/moi/moi.ts:10](https://github.com/klevultd/frontend-sdk/blob/492d3760/packages/klevu-core/src/connection/moi/moi.ts#L10)
19 | 
20 | 


--------------------------------------------------------------------------------
/packages/klevu-core/docs/modules/moilocalmessage.md:
--------------------------------------------------------------------------------
 1 | # moilocalmessage
 2 |       
 3 | Ƭ **MoiLocalMessage**: `Object`
 4 | 
 5 | #### Type declaration
 6 | 
 7 | | Name | Type |
 8 | | :------ | :------ |
 9 | | `local` | { `message`: `string`  } |
10 | | `local.message` | `string` |
11 | 
12 | #### Defined in
13 | 
14 | [connection/moi/moi.ts:142](https://github.com/klevultd/frontend-sdk/blob/492d3760/packages/klevu-core/src/connection/moi/moi.ts#L142)
15 | 
16 | 


--------------------------------------------------------------------------------
/packages/klevu-core/docs/modules/moimessages.md:
--------------------------------------------------------------------------------
1 | # moimessages
2 |       
3 | Ƭ **MoiMessages**: ([`MoiResponseText`](moiresponsetext.md) \| [`MoiResponseFilter`](moiresponsefilter.md) \| [`MoiProducts`](moiproducts.md) \| [`MoiLocalMessage`](moilocalmessage.md))[]
4 | 
5 | #### Defined in
6 | 
7 | [connection/moi/moi.ts:156](https://github.com/klevultd/frontend-sdk/blob/492d3760/packages/klevu-core/src/connection/moi/moi.ts#L156)
8 | 
9 | 


--------------------------------------------------------------------------------
/packages/klevu-core/docs/modules/moiresponse.md:
--------------------------------------------------------------------------------
 1 | # moiresponse
 2 |       
 3 | Ƭ **MoiResponse**: `Object`
 4 | 
 5 | #### Type declaration
 6 | 
 7 | | Name | Type |
 8 | | :------ | :------ |
 9 | | `data` | [[`MoiResponseContext`](moiresponsecontext.md), ...MoiResponseObjects[]] |
10 | 
11 | #### Defined in
12 | 
13 | [connection/moi/moi.ts:40](https://github.com/klevultd/frontend-sdk/blob/492d3760/packages/klevu-core/src/connection/moi/moi.ts#L40)
14 | 
15 | 


--------------------------------------------------------------------------------
/packages/klevu-core/docs/modules/moiresponsecontext.md:
--------------------------------------------------------------------------------
 1 | # moiresponsecontext
 2 |       
 3 | Ƭ **MoiResponseContext**: `Object`
 4 | 
 5 | #### Type declaration
 6 | 
 7 | | Name | Type |
 8 | | :------ | :------ |
 9 | | `context` | [`MoiContext`](moicontext.md) |
10 | 
11 | #### Defined in
12 | 
13 | [connection/moi/moi.ts:44](https://github.com/klevultd/frontend-sdk/blob/492d3760/packages/klevu-core/src/connection/moi/moi.ts#L44)
14 | 
15 | 


--------------------------------------------------------------------------------
/packages/klevu-core/docs/modules/moiresponsegenericoptions.md:
--------------------------------------------------------------------------------
 1 | # moiresponsegenericoptions
 2 |       
 3 | Ƭ **MoiResponseGenericOptions**: `Object`
 4 | 
 5 | #### Type declaration
 6 | 
 7 | | Name | Type |
 8 | | :------ | :------ |
 9 | | `genericOptions?` | { `options`: { `chat`: `string` ; `name`: `string` ; `type`: ``"message"`` \| ``"clearChat"``  }[]  } |
10 | | `genericOptions.options` | { `chat`: `string` ; `name`: `string` ; `type`: ``"message"`` \| ``"clearChat"``  }[] |
11 | 
12 | #### Defined in
13 | 
14 | [connection/moi/moi.ts:76](https://github.com/klevultd/frontend-sdk/blob/492d3760/packages/klevu-core/src/connection/moi/moi.ts#L76)
15 | 
16 | 


--------------------------------------------------------------------------------
/packages/klevu-core/docs/modules/moiresponseobjects.md:
--------------------------------------------------------------------------------
1 | # moiresponseobjects
2 |       
3 | Ƭ **MoiResponseObjects**: [`MoiResponseText`](moiresponsetext.md) \| [`MoiResponseFilter`](moiresponsefilter.md) \| [`MoiResponseGenericOptions`](moiresponsegenericoptions.md) \| [`MoiMenuOptions`](moimenuoptions.md) \| [`MoiProducts`](moiproducts.md) \| [`MoiActionsMessage`](moiactionsmessage.md)
4 | 
5 | #### Defined in
6 | 
7 | [connection/moi/moi.ts:148](https://github.com/klevultd/frontend-sdk/blob/492d3760/packages/klevu-core/src/connection/moi/moi.ts#L148)
8 | 
9 | 


--------------------------------------------------------------------------------
/packages/klevu-core/docs/modules/moiresponsetext.md:
--------------------------------------------------------------------------------
 1 | # moiresponsetext
 2 |       
 3 | Ƭ **MoiResponseText**: `Object`
 4 | 
 5 | #### Type declaration
 6 | 
 7 | | Name | Type |
 8 | | :------ | :------ |
 9 | | `message` | { `collectFeedback?`: `boolean` ; `id`: `string` ; `note`: `string` \| ``null`` ; `type`: ``"text"`` ; `value`: `string`  } |
10 | | `message.collectFeedback?` | `boolean` |
11 | | `message.id` | `string` |
12 | | `message.note` | `string` \| ``null`` |
13 | | `message.type` | ``"text"`` |
14 | | `message.value` | `string` |
15 | 
16 | #### Defined in
17 | 
18 | [connection/moi/moi.ts:48](https://github.com/klevultd/frontend-sdk/blob/492d3760/packages/klevu-core/src/connection/moi/moi.ts#L48)
19 | 
20 | 


--------------------------------------------------------------------------------
/packages/klevu-core/docs/modules/moisavedfeedback.md:
--------------------------------------------------------------------------------
 1 | # moisavedfeedback
 2 |       
 3 | Ƭ **MoiSavedFeedback**: `Object`
 4 | 
 5 | #### Type declaration
 6 | 
 7 | | Name | Type |
 8 | | :------ | :------ |
 9 | | `id` | `string` |
10 | | `reason?` | `string` |
11 | | `thumbs` | ``"up"`` \| ``"down"`` |
12 | 
13 | #### Defined in
14 | 
15 | [connection/moi/moi.ts:162](https://github.com/klevultd/frontend-sdk/blob/492d3760/packages/klevu-core/src/connection/moi/moi.ts#L162)
16 | 
17 | 


--------------------------------------------------------------------------------
/packages/klevu-core/docs/modules/products.md:
--------------------------------------------------------------------------------
 1 | # products
 2 |       
 3 | ▸ **products**(`productIds`, `...modifiers`): [`KlevuFetchFunctionReturnValue`](klevufetchfunctionreturnvalue.md)
 4 | 
 5 | Fetches list of products. All fields are fetched.
 6 | 
 7 | #### Parameters
 8 | 
 9 | | Name | Type |
10 | | :------ | :------ |
11 | | `productIds` | `string`[] |
12 | | `...modifiers` | `KlevuFetchModifer`[] |
13 | 
14 | #### Returns
15 | 
16 | [`KlevuFetchFunctionReturnValue`](klevufetchfunctionreturnvalue.md)
17 | 
18 | #### Defined in
19 | 
20 | [queries/products/products.ts:16](https://github.com/klevultd/frontend-sdk/blob/492d3760/packages/klevu-core/src/queries/products/products.ts#L16)
21 | 
22 | 


--------------------------------------------------------------------------------
/packages/klevu-core/docs/modules/raw.md:
--------------------------------------------------------------------------------
 1 | # raw
 2 |       
 3 | ▸ **raw**(`query`, `...modifiers`): [`KlevuFetchFunctionReturnValue`](klevufetchfunctionreturnvalue.md)
 4 | 
 5 | Take control and write any kind of query you wish to Klevu API. For experts only.
 6 | 
 7 | #### Parameters
 8 | 
 9 | | Name | Type |
10 | | :------ | :------ |
11 | | `query` | [`KlevuBaseQuery`](klevubasequery.md) |
12 | | `...modifiers` | `KlevuFetchModifer`[] |
13 | 
14 | #### Returns
15 | 
16 | [`KlevuFetchFunctionReturnValue`](klevufetchfunctionreturnvalue.md)
17 | 
18 | #### Defined in
19 | 
20 | [queries/raw/raw.ts:13](https://github.com/klevultd/frontend-sdk/blob/492d3760/packages/klevu-core/src/queries/raw/raw.ts#L13)
21 | 
22 | 


--------------------------------------------------------------------------------
/packages/klevu-core/docs/modules/recommendationvieweventmetadata.md:
--------------------------------------------------------------------------------
 1 | # recommendationvieweventmetadata
 2 |       
 3 | Ƭ **RecommendationViewEventMetaData**: [`KlevuKMCRecommendations`](klevukmcrecommendations.md)[``"metadata"``]
 4 | 
 5 | #### Defined in
 6 | 
 7 | [events/KlevuEvents.ts:27](https://github.com/klevultd/frontend-sdk/blob/492d3760/packages/klevu-core/src/events/KlevuEvents.ts#L27)
 8 | 
 9 | ## Variables
10 | 
11 | ### KlevuLastClickedProducts
12 | 
13 | • `Const` **KlevuLastClickedProducts**: `LastClickedProducts`
14 | 
15 | #### Defined in
16 | 
17 | [store/lastClickedProducts.ts:153](https://github.com/klevultd/frontend-sdk/blob/492d3760/packages/klevu-core/src/store/lastClickedProducts.ts#L153)
18 | 
19 | 


--------------------------------------------------------------------------------
/packages/klevu-core/docs/modules/sendsearchevent.md:
--------------------------------------------------------------------------------
 1 | # sendsearchevent
 2 |       
 3 | ▸ **sendSearchEvent**(`override?`): `KlevuFetchModifer`
 4 | 
 5 | This modifier should be used in the case when user hits enter (or presses button) to see
 6 | all results from search.
 7 | 
 8 | #### Parameters
 9 | 
10 | | Name | Type |
11 | | :------ | :------ |
12 | | `override?` | `Partial`<`V1SearchEvent`\> |
13 | 
14 | #### Returns
15 | 
16 | `KlevuFetchModifer`
17 | 
18 | #### Defined in
19 | 
20 | [modifiers/sendSearchEvent/sendSearchEvent.ts:12](https://github.com/klevultd/frontend-sdk/blob/492d3760/packages/klevu-core/src/modifiers/sendSearchEvent/sendSearchEvent.ts#L12)
21 | 
22 | 


--------------------------------------------------------------------------------
/packages/klevu-core/docs/modules/startmoi.md:
--------------------------------------------------------------------------------
 1 | # startmoi
 2 |       
 3 | ▸ **startMoi**(`options?`): `Promise`<[`MoiSession`](classes/MoiSession.md)\>
 4 | 
 5 | #### Parameters
 6 | 
 7 | | Name | Type |
 8 | | :------ | :------ |
 9 | | `options` | [`MoiStartOptions`](moistartoptions.md) |
10 | 
11 | #### Returns
12 | 
13 | `Promise`<[`MoiSession`](classes/MoiSession.md)\>
14 | 
15 | #### Defined in
16 | 
17 | [connection/moi/moi.ts:235](https://github.com/klevultd/frontend-sdk/blob/492d3760/packages/klevu-core/src/connection/moi/moi.ts#L235)
18 | 
19 | 


--------------------------------------------------------------------------------
/packages/klevu-core/docs/modules/top.md:
--------------------------------------------------------------------------------
 1 | # top
 2 |       
 3 | ▸ **top**(`ids`): `KlevuFetchModifer`
 4 | 
 5 | Add given ids as first items in results
 6 | 
 7 | #### Parameters
 8 | 
 9 | | Name | Type |
10 | | :------ | :------ |
11 | | `ids` | `string`[] |
12 | 
13 | #### Returns
14 | 
15 | `KlevuFetchModifer`
16 | 
17 | #### Defined in
18 | 
19 | [modifiers/top/top.ts:10](https://github.com/klevultd/frontend-sdk/blob/492d3760/packages/klevu-core/src/modifiers/top/top.ts#L10)
20 | 
21 | 


--------------------------------------------------------------------------------
/packages/klevu-core/fixup:
--------------------------------------------------------------------------------
 1 | cat >dist/cjs/package.json <dist/mjs/package.json < {
 5 |   KlevuConfig.init({
 6 |     url: "https://eucs29v2.ksearchnet.com/cs/v2/search",
 7 |     apiKey: "klevu-164651914788114877",
 8 |     axios,
 9 |   })
10 | })
11 | 
12 | test("Fetch all settings", async () => {
13 |   const result = await KlevuKMCSettings()
14 | 
15 |   expect(result.banner).toBeDefined()
16 |   expect(result.maps).toBeDefined()
17 |   expect(result.root).toBeDefined()
18 | })
19 | 


--------------------------------------------------------------------------------
/packages/klevu-core/src/connection/resultHelpers/getRedirects.ts:
--------------------------------------------------------------------------------
 1 | import { KlevuKMCSettings } from "../kmc.js"
 2 | import { KlevuKeywordUrlMap } from "../../models/KMCMaps.js"
 3 | 
 4 | export async function getRedirects(
 5 |   term: string
 6 | ): Promise {
 7 |   const settings = await KlevuKMCSettings()
 8 | 
 9 |   if (!settings.maps) {
10 |     return []
11 |   }
12 | 
13 |   return settings.maps.klevu_keywordUrlMap.filter((map) =>
14 |     map.keywords.some((k) => k === term)
15 |   )
16 | }
17 | 


--------------------------------------------------------------------------------
/packages/klevu-core/src/events/index.ts:
--------------------------------------------------------------------------------
1 | export * from "./KlevuEvents.js"
2 | export * from "./KlevuDomEvents.js"
3 | 


--------------------------------------------------------------------------------
/packages/klevu-core/src/index.ts:
--------------------------------------------------------------------------------
 1 | export * from "./config.js"
 2 | export * from "./connection/klevuFetch.js"
 3 | export * from "./connection/kmc.js"
 4 | export * from "./connection/hydration.js"
 5 | export * from "./connection/ssr.js"
 6 | export * from "./connection/moi/moi.js"
 7 | export * from "./connection/responseObject.js"
 8 | export * from "./connection/responseQueryObject.js"
 9 | export * from "./events/index.js"
10 | export * from "./models/index.js"
11 | export * from "./modifiers/index.js"
12 | export * from "./queries/index.js"
13 | export * from "./store/index.js"
14 | export * from "./utils/getBannersByType.js"
15 | 


--------------------------------------------------------------------------------
/packages/klevu-core/src/models/KMCBanner.ts:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * KMC banner model
 3 |  */
 4 | 
 5 | export interface KlevuBanner {
 6 |   showForTerms: string[]
 7 |   showOnLandingPage: boolean
 8 |   bannerAltTag: string
 9 |   redirectUrl: string
10 |   showOnQuickSearch: boolean
11 |   endDate: string
12 |   bannerName: string
13 |   position: string
14 |   bannerImg: string
15 |   bannerRef: number
16 |   showOnCategoryPage: boolean
17 |   startDate: string
18 | }
19 | 
20 | export interface KMCBannerRootObject {
21 |   klevu_banner: KlevuBanner[]
22 | }
23 | 


--------------------------------------------------------------------------------
/packages/klevu-core/src/models/KMCMaps.ts:
--------------------------------------------------------------------------------
1 | export interface KlevuKeywordUrlMap {
2 |   keywords: string[]
3 |   url: string
4 | }
5 | 
6 | export interface KMCMapsRootObject {
7 |   klevu_keywordUrlMap: KlevuKeywordUrlMap[]
8 | }
9 | 


--------------------------------------------------------------------------------
/packages/klevu-core/src/models/KlevuAllRecordQueries.ts:
--------------------------------------------------------------------------------
 1 | import type { KlevuBaseQuery } from "./KlevuBaseQuery.js"
 2 | import type { KlevuSimilarProductsQuery } from "./KlevuSimilarProductsQuery.js"
 3 | import type { KlevuTrendingProductsQuery } from "./KlevuTrendingProductsQuery.js"
 4 | import type { KlevuAlsoViewedQuery } from "./KlevuAlsoViewedQuery.js"
 5 | 
 6 | /**
 7 |  * All possible record queries that can be used with {@link KlevuFetch} function
 8 |  */
 9 | export type KlevuAllRecordQueries =
10 |   | KlevuBaseQuery
11 |   | KlevuSimilarProductsQuery
12 |   | KlevuTrendingProductsQuery
13 |   | KlevuAlsoViewedQuery
14 | 


--------------------------------------------------------------------------------
/packages/klevu-core/src/models/KlevuAlsoBoughtQuery.ts:
--------------------------------------------------------------------------------
 1 | import type { KlevuTypeOfRequest } from "."
 2 | import type { KlevuBaseQuery } from "./KlevuBaseQuery.js"
 3 | import type { KlevuAlsoViewedQuery } from "./KlevuAlsoViewedQuery.js"
 4 | 
 5 | /**
 6 |  * Backend API parameters relevat for Also Bought Recommendation query
 7 |  */
 8 | export type KlevuAlsoBoughtQuery = KlevuBaseQuery &
 9 |   KlevuAlsoViewedQuery & {
10 |     typeOfRequest: KlevuTypeOfRequest.AlsoBought
11 |   }
12 | 


--------------------------------------------------------------------------------
/packages/klevu-core/src/models/KlevuAlsoViewedQuery.ts:
--------------------------------------------------------------------------------
 1 | import type { KlevuAnyTypeOfRecord, KlevuTypeOfRequest } from "."
 2 | import type { KlevuBaseQuery } from "./KlevuBaseQuery.js"
 3 | 
 4 | /**
 5 |  * Klevu API query specific for Also Viewed recommendation
 6 |  */
 7 | export type KlevuAlsoViewedQuery = KlevuBaseQuery & {
 8 |   typeOfRequest: KlevuTypeOfRequest.AlsoViewed
 9 |   settings?: {
10 |     context?: {
11 |       recentObjects: Array<{
12 |         typeOfRecord: KlevuAnyTypeOfRecord
13 |         records: Array<{ id: string }>
14 |       }>
15 |     }
16 |   }
17 | }
18 | 


--------------------------------------------------------------------------------
/packages/klevu-core/src/models/KlevuApplyFilter.ts:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Apply Filter type for Klevu base query
 3 |  */
 4 | export type KlevuApplyFilter = {
 5 |   applyFilters?: {
 6 |     filters: Array<{
 7 |       key: string
 8 |       values: string[] | [number, number]
 9 |       settings?: {
10 |         singleSelect: boolean
11 |       }
12 |     }>
13 |   }
14 | }
15 | 


--------------------------------------------------------------------------------
/packages/klevu-core/src/models/KlevuFetchQueries.ts:
--------------------------------------------------------------------------------
 1 | import { KlevuFetchOption } from "../connection/klevuFetch.js"
 2 | import type { KlevuFetchFunctionReturnValue } from "../queries/index.js"
 3 | 
 4 | export type KlevuFetchQueries = Array<
 5 |   Promise | KlevuFetchFunctionReturnValue
 6 | >
 7 | 
 8 | export type KlevuFetchQueriesWithOptions = Array<
 9 |   | Promise
10 |   | KlevuFetchFunctionReturnValue
11 |   | KlevuFetchOption
12 | >
13 | 


--------------------------------------------------------------------------------
/packages/klevu-core/src/models/KlevuFilterOrder.ts:
--------------------------------------------------------------------------------
 1 | export enum KlevuFilterOrder {
 2 |   /**
 3 |    * Sort options based on the number of records each option has in the result
 4 |    * set.
 5 |    */
 6 |   Frequency = "FREQ",
 7 |   /**
 8 |    * 'INDEX' will sort the options alphabetically.
 9 |    */
10 |   Index = "INDEX",
11 | }
12 | 


--------------------------------------------------------------------------------
/packages/klevu-core/src/models/KlevuPayload.ts:
--------------------------------------------------------------------------------
 1 | import type { KlevuSuggestionQuery } from "./KlevuSuggestionQuery.js"
 2 | import type { KlevuAllRecordQueries } from "./KlevuAllRecordQueries.js"
 3 | 
 4 | export type KlevuPayload = {
 5 |   context: {
 6 |     apiKeys: string[]
 7 |   }
 8 |   recordQueries?: Array
 9 |   suggestions?: Array
10 | }
11 | 


--------------------------------------------------------------------------------
/packages/klevu-core/src/models/KlevuRangeFilterSettings.ts:
--------------------------------------------------------------------------------
 1 | export type KlevuRangeFilterSettings = {
 2 |   /**
 3 |    * This is the identifier of your numerical attribute, eg. 'klevu_price'.
 4 |    */
 5 |   key: string
 6 |   /**
 7 |    * If set to true, the Klevu Search engine calculates the minimum and maximum
 8 |    * values for this filter for use with a slider.
 9 |    */
10 |   minMax: boolean
11 |   /**
12 |    * If a positive value is provided, the Klevu Search engine will calculate
13 |    * ranges for this value. For example a value of 100 would give ranges from 0
14 |    * to 99, 100 to 299, etc.
15 |    */
16 |   rangeInterval?: number
17 | }
18 | 


--------------------------------------------------------------------------------
/packages/klevu-core/src/models/KlevuRecordFields.ts:
--------------------------------------------------------------------------------
1 | import type { LiteralUnion } from "../utils/literalUnion.js"
2 | import type { KlevuRecord } from "./KlevuRecord.js"
3 | 
4 | export type KlevuRecordFields = LiteralUnion
5 | 


--------------------------------------------------------------------------------
/packages/klevu-core/src/models/KlevuSimilarProductsQuery.ts:
--------------------------------------------------------------------------------
 1 | import type { KlevuAnyTypeOfRecord, KlevuTypeOfRequest } from "."
 2 | import type { KlevuBaseQuery } from "./KlevuBaseQuery.js"
 3 | 
 4 | export type KlevuSimilarProductsQuery = KlevuBaseQuery & {
 5 |   typeOfRequest: KlevuTypeOfRequest.SimilarProducts
 6 |   settings: {
 7 |     context: {
 8 |       recentObjects: Array<{
 9 |         typeOfRecord: KlevuAnyTypeOfRecord
10 |         records: Array<{ id: string }>
11 |       }>
12 |     }
13 |   }
14 | }
15 | 


--------------------------------------------------------------------------------
/packages/klevu-core/src/models/KlevuSuggestionResult.ts:
--------------------------------------------------------------------------------
1 | export type KlevuSuggestionResult = {
2 |   id: string
3 |   suggestions: Array<{
4 |     suggest: string
5 |   }>
6 | }
7 | 


--------------------------------------------------------------------------------
/packages/klevu-core/src/models/KlevuTrendingProductsQuery.ts:
--------------------------------------------------------------------------------
 1 | import type { KlevuTypeOfRequest } from "."
 2 | import type { KlevuBaseQuery } from "./KlevuBaseQuery.js"
 3 | 
 4 | export type KlevuTrendingProductsQuery = KlevuBaseQuery & {
 5 |   typeOfRequest: KlevuTypeOfRequest.Trending
 6 |   settings?: {
 7 |     query?: {
 8 |       term: "*"
 9 |       categoryPath?: string
10 |     }
11 |   }
12 | }
13 | 


--------------------------------------------------------------------------------
/packages/klevu-core/src/models/KlevuTypeOfRecord.ts:
--------------------------------------------------------------------------------
 1 | import type { LiteralUnion } from "../utils/literalUnion.js"
 2 | import type { ValueOf } from "../utils/valuOf.js"
 3 | 
 4 | export enum KlevuTypeOfRecord {
 5 |   Product = "KLEVU_PRODUCT",
 6 |   Cms = "KLEVU_CMS",
 7 |   Category = "KLEVU_CATEGORY",
 8 |   Image = "KLEVU_IMAGE",
 9 | }
10 | 
11 | export type KlevuAnyTypeOfRecord = LiteralUnion<
12 |   ValueOf,
13 |   string
14 | >
15 | 


--------------------------------------------------------------------------------
/packages/klevu-core/src/models/KlevuTypeOfRequest.ts:
--------------------------------------------------------------------------------
 1 | export enum KlevuTypeOfRequest {
 2 |   Search = "SEARCH",
 3 |   Suggestion = "AUTO_SUGGESTIONS",
 4 |   CategoryNavigation = "CATNAV",
 5 |   NewArrivals = "RECS_NEW_ARRIVALS",
 6 |   SimilarProducts = "RECS_SIMILAR",
 7 |   Trending = "RECS_TRENDING",
 8 |   AlsoViewed = "RECS_ALSO_VIEWED",
 9 |   AlsoBought = "RECS_ALSO_BOUGHT",
10 |   VisuallySimilar = "RECS_SIMILAR_IMAGES",
11 |   Custom = "RECS_CUSTOM",
12 |   // Special type where we skip request to Klevu services, but run everything else
13 |   Skip = "SKIP",
14 | }
15 | 


--------------------------------------------------------------------------------
/packages/klevu-core/src/modifiers/applyFilterWithManager/applyFilterWithManager.ts:
--------------------------------------------------------------------------------
 1 | import { FilterManager } from "../../store/filterManager.js"
 2 | import { applyFilters } from "../applyFilter/applyFilter.js"
 3 | 
 4 | /**
 5 |  * Apply filters to query based on Filter Manager
 6 |  *
 7 |  * @category Modifier
 8 |  * @param manager
 9 |  * @param options
10 |  * @returns
11 |  */
12 | export function applyFilterWithManager(manager: FilterManager) {
13 |   return applyFilters(manager.toApplyFilters())
14 | }
15 | 


--------------------------------------------------------------------------------
/packages/klevu-core/src/modifiers/debug/debug.ts:
--------------------------------------------------------------------------------
 1 | import { KlevuFetchModifer } from "../index.js"
 2 | 
 3 | /**
 4 |  * Prints queries to console for easier debugging
 5 |  *
 6 |  * @category Modifier
 7 |  * @returns
 8 |  */
 9 | export function debug(): KlevuFetchModifer {
10 |   return {
11 |     klevuModifierId: "debug",
12 |     modifyAfter: async (queries) => {
13 |       console.log(JSON.stringify(queries, undefined, 2))
14 |       return Array.from(queries)
15 |     },
16 |   }
17 | }
18 | 


--------------------------------------------------------------------------------
/packages/klevu-core/src/queries/categoryMerchandising/categoryMerchandising.test.ts:
--------------------------------------------------------------------------------
 1 | import { KlevuConfig, KlevuFetch } from "../../index.js"
 2 | import { categoryMerchandising } from "./categoryMerchandising.js"
 3 | import axios from "axios"
 4 | 
 5 | beforeEach(() => {
 6 |   KlevuConfig.init({
 7 |     url: "https://eucs29v2.ksearchnet.com/cs/v2/search",
 8 |     apiKey: "klevu-164651914788114877",
 9 |     axios,
10 |   })
11 | })
12 | 
13 | test("Basic search", async () => {
14 |   const result = await KlevuFetch(categoryMerchandising("Women"))
15 | 
16 |   expect(result.queriesById("categoryMerchandising")).toBeDefined()
17 | })
18 | 


--------------------------------------------------------------------------------
/packages/klevu-core/src/queries/raw/raw.ts:
--------------------------------------------------------------------------------
 1 | import { KlevuBaseQuery } from "../../models/index.js"
 2 | import { KlevuFetchModifer } from "../../modifiers/index.js"
 3 | import { KlevuFetchFunctionReturnValue } from "../index.js"
 4 | 
 5 | /**
 6 |  * Take control and write any kind of query you wish to Klevu API. For experts only.
 7 |  *
 8 |  * @category Query
 9 |  * @param query
10 |  * @param modifiers
11 |  * @returns
12 |  */
13 | export function raw(
14 |   query: KlevuBaseQuery,
15 |   ...modifiers: KlevuFetchModifer[]
16 | ): KlevuFetchFunctionReturnValue {
17 |   return {
18 |     klevuFunctionId: "raw",
19 |     queries: [query],
20 |     modifiers,
21 |   }
22 | }
23 | 


--------------------------------------------------------------------------------
/packages/klevu-core/src/queries/searchCms/searchCms.ts:
--------------------------------------------------------------------------------
 1 | import { KlevuFetchFunctionReturnValue } from "../index.js"
 2 | import { KlevuTypeOfRecord } from "../../index.js"
 3 | import { search, KlevuSearchOptions } from "../search/search.js"
 4 | 
 5 | /**
 6 |  * Search helper function that sets correct settings
 7 |  *
 8 |  * @category RecommendationQuery
 9 |  * @param term cms page to find
10 |  * @param options
11 |  * @returns
12 |  */
13 | export function searchCms(
14 |   term: string,
15 |   options?: Partial
16 | ): KlevuFetchFunctionReturnValue {
17 |   return search(term, {
18 |     typeOfRecords: [KlevuTypeOfRecord.Cms],
19 |     groupBy: "name",
20 |     ...options,
21 |   })
22 | }
23 | 


--------------------------------------------------------------------------------
/packages/klevu-core/src/store/index.ts:
--------------------------------------------------------------------------------
1 | export * from "./lastSearches.js"
2 | export * from "./filterManager.js"
3 | export * from "./lastClickedProducts.js"
4 | 


--------------------------------------------------------------------------------
/packages/klevu-core/src/utils/cleanSearchQuery.ts:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * cleans query term to improve search results
 3 |  *
 4 |  * @param term search term to be cleaned
 5 |  */
 6 | export function cleanSearchQuery(term: string): string {
 7 |   return (
 8 |     term
 9 |       // whitespace
10 |       .replace(/\s{2,}/g, " ")
11 |       // extra spaces
12 |       .replace(/\s\s+/g, " ")
13 |       // white space in end
14 |       .trim()
15 |       // to lowercase
16 |       .toLocaleLowerCase()
17 |   )
18 | }
19 | 


--------------------------------------------------------------------------------
/packages/klevu-core/src/utils/index.ts:
--------------------------------------------------------------------------------
1 | export * from "./cleanSearchQuery.js"
2 | export * from "./isBrowser.js"
3 | export * from "./objectToQueryParamaters.js"
4 | export * from "./storage.js"
5 | 


--------------------------------------------------------------------------------
/packages/klevu-core/src/utils/isBrowser.ts:
--------------------------------------------------------------------------------
1 | export const isBrowser = () =>
2 |   ![typeof window, typeof document].includes("undefined")
3 | 


--------------------------------------------------------------------------------
/packages/klevu-core/src/utils/notEmpty.ts:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Type safe version to remove nulls and undefineds from array
 3 |  *
 4 |  * usage: `myArray.filter(notEmpty)`
 5 |  *
 6 |  * @param value
 7 |  * @returns
 8 |  */
 9 | export function notEmpty(
10 |   value: TValue | null | undefined
11 | ): value is TValue {
12 |   return value !== null && value !== undefined
13 | }
14 | 


--------------------------------------------------------------------------------
/packages/klevu-core/src/utils/objectToQueryParamaters.ts:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * transform object to query parameters
 3 |  *
 4 |  * @param params
 5 |  */
 6 | export function objectToQueryParameters(params: object) {
 7 |   let urlData = "?"
 8 |   for (const [key, value] of Object.entries(params)) {
 9 |     if (value === undefined) {
10 |       continue
11 |     }
12 |     urlData += `${key}=${encodeURIComponent(value)}&`
13 |   }
14 |   return urlData
15 | }
16 | 


--------------------------------------------------------------------------------
/packages/klevu-core/src/utils/partialK.ts:
--------------------------------------------------------------------------------
1 | /** Makes some of the keys optional */
2 | export type PartialK = Partial<
3 |   Pick>
4 | > &
5 |   Omit extends infer O
6 |   ? { [P in keyof O]: O[P] }
7 |   : never
8 | 


--------------------------------------------------------------------------------
/packages/klevu-core/tsconfig-base.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "ES2019",
 4 |     "lib": ["ES2019", "DOM"],
 5 |     "module": "ES2015",
 6 |     "moduleResolution": "node",
 7 |     "declaration": true,
 8 |     "outDir": "./dist/",
 9 |     "esModuleInterop": true,
10 |     "forceConsistentCasingInFileNames": true,
11 |     "strict": true,
12 |     "skipLibCheck": true
13 |   },
14 |   "watchOptions": {
15 |     "excludeDirectories": ["**/node_modules", "dist"]
16 |   },
17 |   "exclude": ["*/**/*.test.ts", "**/node_modules", "dist"]
18 | }
19 | 


--------------------------------------------------------------------------------
/packages/klevu-core/tsconfig-cjs.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": "./tsconfig-base.json",
3 |   "compilerOptions": {
4 |     "target": "ES2015",
5 |     "module": "commonjs",
6 |     "outDir": "./dist/cjs"
7 |   }
8 | }
9 | 


--------------------------------------------------------------------------------
/packages/klevu-core/tsconfig-tests.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "ES2019",
 4 |     "lib": ["ES2019", "DOM"],
 5 |     "module": "ES2015",
 6 |     "moduleResolution": "node",
 7 |     "declaration": true,
 8 |     "outDir": "./dist/",
 9 |     "esModuleInterop": true,
10 |     "forceConsistentCasingInFileNames": true,
11 |     "strict": true,
12 |     "skipLibCheck": true
13 |   },
14 |   "watchOptions": {
15 |     "excludeDirectories": ["**/node_modules", "dist"]
16 |   }
17 | }
18 | 


--------------------------------------------------------------------------------
/packages/klevu-core/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": "./tsconfig-base.json",
3 |   "compilerOptions": {
4 |     "target": "ES2015",
5 |     "module": "ES2015",
6 |     "outDir": "./dist/mjs"
7 |   }
8 | }
9 | 


--------------------------------------------------------------------------------
/packages/klevu-core/typedoc.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "entryPoints": ["src/index.ts"],
 3 |   "out": "docs",
 4 |   "categoryOrder": [
 5 |     "KlevuFetch",
 6 |     "Queries",
 7 |     "RecommendationQuery",
 8 |     "Modifier",
 9 |     "*"
10 |   ]
11 | }
12 | 


--------------------------------------------------------------------------------
/packages/klevu-ui-react/.npmignore:
--------------------------------------------------------------------------------
1 | node_modules


--------------------------------------------------------------------------------
/packages/klevu-ui-react/rollup.config.js:
--------------------------------------------------------------------------------
 1 | import typescript from "@rollup/plugin-typescript"
 2 | 
 3 | const external = ["react", "react-dom"]
 4 | 
 5 | export default {
 6 |   input: "src/index.ts",
 7 |   output: [
 8 |     {
 9 |       dir: "dist/",
10 |       entryFileNames: "[name].esm.js",
11 |       chunkFileNames: "[name]-[hash].esm.js",
12 |       format: "es",
13 |       sourcemap: true,
14 |     },
15 |     {
16 |       dir: "dist/",
17 |       format: "commonjs",
18 |       generatedCode: {
19 |         constBinding: true,
20 |       },
21 |       sourcemap: true,
22 |     },
23 |   ],
24 |   external: (id) => external.includes(id) || id.startsWith("stencil-library"),
25 |   plugins: [typescript()],
26 | }
27 | 


--------------------------------------------------------------------------------
/packages/klevu-ui-react/src/components/index.ts:
--------------------------------------------------------------------------------
1 | export * from "./stencil-generated/index";
2 | 


--------------------------------------------------------------------------------
/packages/klevu-ui-react/src/components/stencil-generated/react-component-lib/index.ts:
--------------------------------------------------------------------------------
1 | export { createReactComponent } from './createComponent';
2 | export { createOverlayComponent } from './createOverlayComponent';
3 | 


--------------------------------------------------------------------------------
/packages/klevu-ui-react/src/components/stencil-generated/react-component-lib/utils/case.ts:
--------------------------------------------------------------------------------
1 | export const dashToPascalCase = (str: string) =>
2 |   str
3 |     .toLowerCase()
4 |     .split('-')
5 |     .map((segment) => segment.charAt(0).toUpperCase() + segment.slice(1))
6 |     .join('');
7 | export const camelToDashCase = (str: string) => str.replace(/([A-Z])/g, (m: string) => `-${m[0].toLowerCase()}`);
8 | 


--------------------------------------------------------------------------------
/packages/klevu-ui-react/src/components/stencil-generated/react-component-lib/utils/dev.ts:
--------------------------------------------------------------------------------
 1 | export const isDevMode = () => {
 2 |   return process && process.env && process.env.NODE_ENV === 'development';
 3 | };
 4 | 
 5 | const warnings: { [key: string]: boolean } = {};
 6 | 
 7 | export const deprecationWarning = (key: string, message: string) => {
 8 |   if (isDevMode()) {
 9 |     if (!warnings[key]) {
10 |       console.warn(message);
11 |       warnings[key] = true;
12 |     }
13 |   }
14 | };
15 | 


--------------------------------------------------------------------------------
/packages/klevu-ui-react/src/index.ts:
--------------------------------------------------------------------------------
1 | export * from "./components";
2 | 


--------------------------------------------------------------------------------
/packages/klevu-ui-vue/.npmignore:
--------------------------------------------------------------------------------
1 | node_modules


--------------------------------------------------------------------------------
/packages/klevu-ui-vue/rollup.config.js:
--------------------------------------------------------------------------------
 1 | import typescript from "@rollup/plugin-typescript"
 2 | 
 3 | const external = ["vue", "vue-router"]
 4 | 
 5 | export default {
 6 |   input: "src/index.ts",
 7 |   output: [
 8 |     {
 9 |       dir: "dist/",
10 |       entryFileNames: "[name].esm.js",
11 |       chunkFileNames: "[name]-[hash].esm.js",
12 |       format: "es",
13 |       sourcemap: true,
14 |     },
15 |     {
16 |       dir: "dist/",
17 |       format: "commonjs",
18 |       generatedCode: {
19 |         constBinding: true,
20 |       },
21 |       sourcemap: true,
22 |     },
23 |   ],
24 |   external: (id) => external.includes(id) || id.startsWith("stencil-library"),
25 |   plugins: [typescript()],
26 | }
27 | 


--------------------------------------------------------------------------------
/packages/klevu-ui-vue/src/index.ts:
--------------------------------------------------------------------------------
1 | export * from "./components"
2 | export * from "./plugin"
3 | 


--------------------------------------------------------------------------------
/packages/klevu-ui-vue/src/plugin.ts:
--------------------------------------------------------------------------------
 1 | import { Plugin } from "vue"
 2 | import { applyPolyfills, defineCustomElements } from "@klevu/ui/loader"
 3 | 
 4 | export const KlevuComponents: Plugin = {
 5 |   async install() {
 6 |     applyPolyfills().then(() => {
 7 |       defineCustomElements()
 8 |     })
 9 |   },
10 | }
11 | 


--------------------------------------------------------------------------------
/packages/klevu-ui-vue/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "module": "es2015",
 4 |     "declaration": true,
 5 |     "noImplicitAny": false,
 6 |     "removeComments": true,
 7 |     "noLib": false,
 8 |     "moduleResolution": "node",
 9 |     "emitDecoratorMetadata": true,
10 |     "experimentalDecorators": true,
11 |     "target": "es2015",
12 |     "sourceMap": true,
13 |     "lib": ["dom", "es2015"],
14 |     "outDir": "dist"
15 |   },
16 |   "exclude": ["node_modules", "**/*.spec.ts", "**/__tests__/**", "dist"]
17 | }
18 | 


--------------------------------------------------------------------------------
/packages/klevu-ui/.babelrc.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "sourceType": "unambiguous",
 3 |   "presets": [
 4 |     [
 5 |       "@babel/preset-env",
 6 |       {
 7 |         "targets": {
 8 |           "chrome": 100
 9 |         }
10 |       }
11 |     ],
12 |     "@babel/preset-typescript",
13 |     "@babel/preset-react"
14 |   ],
15 |   "plugins": []
16 | }
17 | 


--------------------------------------------------------------------------------
/packages/klevu-ui/.editorconfig:
--------------------------------------------------------------------------------
 1 | # http://editorconfig.org
 2 | 
 3 | root = true
 4 | 
 5 | [*]
 6 | charset = utf-8
 7 | indent_style = space
 8 | indent_size = 2
 9 | end_of_line = lf
10 | insert_final_newline = true
11 | trim_trailing_whitespace = true
12 | 
13 | [*.md]
14 | insert_final_newline = false
15 | trim_trailing_whitespace = false
16 | 


--------------------------------------------------------------------------------
/packages/klevu-ui/.gitignore:
--------------------------------------------------------------------------------
 1 | dist/
 2 | hydrate/
 3 | www/
 4 | loader/
 5 | storybook-static/
 6 | 
 7 | *~
 8 | *.sw[mnpcod]
 9 | *.log
10 | *.lock
11 | *.tmp
12 | *.tmp.*
13 | log.txt
14 | *.sublime-project
15 | *.sublime-workspace
16 | 
17 | .stencil/
18 | .idea/
19 | .vscode/
20 | .sass-cache/
21 | .versions/
22 | node_modules/
23 | $RECYCLE.BIN/
24 | 
25 | .DS_Store
26 | Thumbs.db
27 | UserInterfaceState.xcuserstate
28 | .env
29 | 


--------------------------------------------------------------------------------
/packages/klevu-ui/.prettierrc.json:
--------------------------------------------------------------------------------
1 | {
2 |   "printWidth": 120,
3 |   "semi": false
4 | }
5 | 


--------------------------------------------------------------------------------
/packages/klevu-ui/.storybook/main.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   stories: ["../src/stories/*.mdx", "../src/components/**/*.mdx", "../src/components/**/*.stories.ts"],
 3 |   addons: ["@storybook/addon-essentials", "../storybookAddons/register.ts", "@storybook/addon-styling"],
 4 |   framework: {
 5 |     name: "@storybook/web-components-vite",
 6 |     options: {},
 7 |   },
 8 |   staticDirs: ["../storybookAssets", "../dist/klevu-ui"],
 9 |   docs: {
10 |     autodocs: true,
11 |   },
12 | }
13 | 


--------------------------------------------------------------------------------
/packages/klevu-ui/.storybook/manager.ts:
--------------------------------------------------------------------------------
1 | import { addons } from "@storybook/addons"
2 | import klevuTheme from "./klevuTheme"
3 | 
4 | addons.setConfig({
5 |   theme: klevuTheme,
6 |   enableShortcuts: false,
7 | })
8 | 


--------------------------------------------------------------------------------
/packages/klevu-ui/src/components/klevu-accordion/klevu-accordion.mdx:
--------------------------------------------------------------------------------
 1 | import { Canvas, Meta, Markdown, Controls } from "@storybook/addon-docs"
 2 | import { KlevuAutoDocs } from "../../../.storybook/blocks/KlevuAutoDocs"
 3 | import { KlevuCSSEditor } from "../../../.storybook/blocks/KlevuCSSEditor"
 4 | 
 5 | import * as AccordionStories from "./klevu-accordion.stories"
 6 | 
 7 | 
 8 | 
 9 | # Klevu-accordion
10 | 
11 | {AccordionStories.description}
12 | 
13 | ## Accordion
14 | 
15 | 
16 | 
17 | 
18 | 
19 | 
20 | 


--------------------------------------------------------------------------------
/packages/klevu-ui/src/components/klevu-accordion/test/klevu-accordion.e2e.ts:
--------------------------------------------------------------------------------
 1 | import { newE2EPage } from "@stencil/core/testing"
 2 | 
 3 | describe("klevu-accordion", () => {
 4 |   it("renders", async () => {
 5 |     const page = await newE2EPage()
 6 |     await page.setContent("")
 7 | 
 8 |     const element = await page.find("klevu-accordion")
 9 |     expect(element).toHaveClass("hydrated")
10 |   })
11 | })
12 | 


--------------------------------------------------------------------------------
/packages/klevu-ui/src/components/klevu-badge/accent-badge.mdx:
--------------------------------------------------------------------------------
 1 | import { Canvas, Meta, Markdown, Controls } from "@storybook/addon-docs"
 2 | import { KlevuAutoDocs } from "../../../.storybook/blocks/KlevuAutoDocs"
 3 | import { KlevuCSSEditor } from "../../../.storybook/blocks/KlevuCSSEditor"
 4 | import * as BadgeStories from "./klevu-badge.stories"
 5 | 
 6 | 
 7 | 
 8 | ## Accent colors
 9 | 
10 | Badges can be in accent colors. Colors are set in css properties and can be changed by overriding them.
11 | 
12 | 
13 | 


--------------------------------------------------------------------------------
/packages/klevu-ui/src/components/klevu-badge/neutral-badge.mdx:
--------------------------------------------------------------------------------
 1 | import { Canvas, Meta, Markdown, Controls } from "@storybook/addon-docs"
 2 | import { KlevuAutoDocs } from "../../../.storybook/blocks/KlevuAutoDocs"
 3 | import { KlevuCSSEditor } from "../../../.storybook/blocks/KlevuCSSEditor"
 4 | import * as BadgeStories from "./klevu-badge.stories"
 5 | 
 6 | 
 7 | 
 8 | ## Neutral colors
 9 | 
10 | Badges can be in neutral colors. Colors are set in css properties and can be changed by overriding them.
11 | 
12 | 
13 | 


--------------------------------------------------------------------------------
/packages/klevu-ui/src/components/klevu-badge/styled-badge.mdx:
--------------------------------------------------------------------------------
 1 | import { Canvas, Meta, Markdown, Controls } from "@storybook/addon-docs"
 2 | import { KlevuAutoDocs } from "../../../.storybook/blocks/KlevuAutoDocs"
 3 | import { KlevuCSSEditor } from "../../../.storybook/blocks/KlevuCSSEditor"
 4 | import * as BadgeStories from "./klevu-badge.stories"
 5 | 
 6 | 
 7 | 
 8 | ## Badge styled using parts
 9 | 
10 | 
11 | 
12 | Modify example above with following:
13 | 
14 | 
15 | 
16 | 
17 | 


--------------------------------------------------------------------------------
/packages/klevu-ui/src/components/klevu-banner/klevu-banner.css:
--------------------------------------------------------------------------------
 1 | :host {
 2 |   display: block;
 3 | }
 4 | 
 5 | a {
 6 |   text-decoration: none;
 7 | }
 8 | 
 9 | img {
10 |   width: 100%;
11 | }
12 | 


--------------------------------------------------------------------------------
/packages/klevu-ui/src/components/klevu-banner/test/klevu-banner.e2e.ts:
--------------------------------------------------------------------------------
 1 | import { newE2EPage } from '@stencil/core/testing';
 2 | 
 3 | describe('klevu-banner', () => {
 4 |   it('renders', async () => {
 5 |     const page = await newE2EPage();
 6 |     await page.setContent('');
 7 | 
 8 |     const element = await page.find('klevu-banner');
 9 |     expect(element).toHaveClass('hydrated');
10 |   });
11 | });
12 | 


--------------------------------------------------------------------------------
/packages/klevu-ui/src/components/klevu-banner/test/klevu-banner.spec.tsx:
--------------------------------------------------------------------------------
 1 | import { newSpecPage } from '@stencil/core/testing';
 2 | import { KlevuBanner } from '../klevu-banner';
 3 | 
 4 | describe('klevu-banner', () => {
 5 |   it('renders', async () => {
 6 |     const page = await newSpecPage({
 7 |       components: [KlevuBanner],
 8 |       html: ``,
 9 |     });
10 |     expect(page.root).toEqualHtml(`
11 |       
12 |         
13 |           
14 |         
15 |       
16 |     `);
17 |   });
18 | });
19 | 


--------------------------------------------------------------------------------
/packages/klevu-ui/src/components/klevu-button/klevu-button.mdx:
--------------------------------------------------------------------------------
 1 | import { Controls, Canvas, Meta, Markdown } from "@storybook/addon-docs"
 2 | import * as Stories from "./klevu-button.stories"
 3 | import { KlevuAutoDocs } from "../../../.storybook/blocks/KlevuAutoDocs"
 4 | 
 5 | 
 6 | 
 7 | # Klevu-button
 8 | 
 9 | {Stories.description}
10 | 
11 | 
12 | 
13 | 
14 | 
15 | 
16 | 


--------------------------------------------------------------------------------
/packages/klevu-ui/src/components/klevu-button/test/klevu-button.e2e.ts:
--------------------------------------------------------------------------------
 1 | import { newE2EPage } from "@stencil/core/testing"
 2 | 
 3 | describe("klevu-button", () => {
 4 |   it("renders", async () => {
 5 |     const page = await newE2EPage()
 6 |     await page.setContent("")
 7 | 
 8 |     const element = await page.find("klevu-button")
 9 |     expect(element).toHaveClass("hydrated")
10 |   })
11 | })
12 | 


--------------------------------------------------------------------------------
/packages/klevu-ui/src/components/klevu-chat-bubble/klevu-chat-bubble.mdx:
--------------------------------------------------------------------------------
 1 | import { Controls, Canvas, Meta, Markdown } from "@storybook/addon-docs"
 2 | import { KlevuAutoDocs } from "../../../.storybook/blocks/KlevuAutoDocs"
 3 | import * as Stories from "./klevu-chat-bubble.stories"
 4 | 
 5 | 
 6 | 
 7 | # Klevu-chat-bubble
 8 | 
 9 | {Stories.description}
10 | 
11 | 
12 | 
13 | 
14 | 
15 | 
16 | 


--------------------------------------------------------------------------------
/packages/klevu-ui/src/components/klevu-chat-bubble/styled-chat-bubble.mdx:
--------------------------------------------------------------------------------
 1 | import { Controls, Canvas, Meta, Markdown } from "@storybook/addon-docs"
 2 | import { KlevuAutoDocs } from "../../../.storybook/blocks/KlevuAutoDocs"
 3 | import * as Stories from "./klevu-chat-bubble.stories"
 4 | import { KlevuCSSEditor } from "../../../.storybook/blocks/KlevuCSSEditor"
 5 | 
 6 | 
 7 | 
 8 | ## Styled Chat Bubble using parts
 9 | 
10 | 
11 | 
12 | Modify example above with following:
13 | 
14 | 
15 | 
16 | 
17 | 


--------------------------------------------------------------------------------
/packages/klevu-ui/src/components/klevu-chat-layout/klevu-chat-layout.mdx:
--------------------------------------------------------------------------------
 1 | import { Canvas, Meta, Markdown } from "@storybook/addon-docs"
 2 | import { KlevuAutoDocs } from "../../../.storybook/blocks/KlevuAutoDocs"
 3 | import * as Stories from "./klevu-chat-layout.stories"
 4 | 
 5 | 
 6 | 
 7 | # Klevu-chat-layout
 8 | 
 9 | {Stories.description}
10 | 
11 | 
12 | 
13 | 
14 | 


--------------------------------------------------------------------------------
/packages/klevu-ui/src/components/klevu-chat-layout/test/klevu-chat-layout.e2e.ts:
--------------------------------------------------------------------------------
 1 | import { newE2EPage } from "@stencil/core/testing"
 2 | 
 3 | describe("klevu-chat-layout", () => {
 4 |   it("renders", async () => {
 5 |     const page = await newE2EPage()
 6 |     await page.setContent("")
 7 | 
 8 |     const element = await page.find("klevu-chat-layout")
 9 | 
10 |     expect(element).toHaveClass("hydrated")
11 |   })
12 | })
13 | 


--------------------------------------------------------------------------------
/packages/klevu-ui/src/components/klevu-chat-messages/klevu-chat-messages.mdx:
--------------------------------------------------------------------------------
 1 | import { Controls, Canvas, Meta, Markdown } from "@storybook/addon-docs"
 2 | import { KlevuAutoDocs } from "../../../.storybook/blocks/KlevuAutoDocs"
 3 | import * as Stories from "./klevu-chat-messages.stories"
 4 | 
 5 | 
 6 | 
 7 | # Klevu-chat-messages
 8 | 
 9 | {Stories.description}
10 | 
11 | 
12 | 
13 | 
14 | 
15 | 
16 | 


--------------------------------------------------------------------------------
/packages/klevu-ui/src/components/klevu-checkbox/klevu-checkbox.mdx:
--------------------------------------------------------------------------------
 1 | import { Controls, Canvas, Meta, Markdown } from "@storybook/addon-docs"
 2 | import { KlevuAutoDocs } from "../../../.storybook/blocks/KlevuAutoDocs"
 3 | import * as Stories from "./klevu-checkbox.stories"
 4 | 
 5 | 
 6 | 
 7 | # Klevu-Checkbox
 8 | 
 9 | {Stories.description}
10 | 
11 | 
12 | 
13 | 
14 | 
15 | 
16 | 


--------------------------------------------------------------------------------
/packages/klevu-ui/src/components/klevu-checkbox/styled-checkbox.mdx:
--------------------------------------------------------------------------------
 1 | import { Controls, Canvas, Meta, Markdown } from "@storybook/addon-docs"
 2 | import { KlevuAutoDocs } from "../../../.storybook/blocks/KlevuAutoDocs"
 3 | import * as Stories from "./klevu-checkbox.stories"
 4 | import { KlevuCSSEditor } from "../../../.storybook/blocks/KlevuCSSEditor"
 5 | 
 6 | 
 7 | 
 8 | ## Styled Checkbox
 9 | 
10 | 
11 | 
12 | Modify example above with following:
13 | 
14 | 
15 | 
16 | 
17 | 


--------------------------------------------------------------------------------
/packages/klevu-ui/src/components/klevu-checkbox/test/klevu-checkbox.e2e.ts:
--------------------------------------------------------------------------------
 1 | import { newE2EPage } from "@stencil/core/testing"
 2 | 
 3 | describe("klevu-checkbox", () => {
 4 |   it("renders", async () => {
 5 |     const page = await newE2EPage()
 6 |     await page.setContent("")
 7 | 
 8 |     const element = await page.find("klevu-checkbox")
 9 |     expect(element).toHaveClass("hydrated")
10 |   })
11 | })
12 | 


--------------------------------------------------------------------------------
/packages/klevu-ui/src/components/klevu-chip/styled-chip.mdx:
--------------------------------------------------------------------------------
 1 | import { Controls, Canvas, Meta, Markdown } from "@storybook/addon-docs"
 2 | import { KlevuAutoDocs } from "../../../.storybook/blocks/KlevuAutoDocs"
 3 | import { KlevuCSSEditor } from "../../../.storybook/blocks/KlevuCSSEditor"
 4 | import * as Stories from "./klevu-chip.stories"
 5 | 
 6 | 
 7 | 
 8 | ## Styled Chip
 9 | 
10 | 
11 | 
12 | Modify example above with following:
13 | 
14 | 
15 | 
16 | 
17 | 


--------------------------------------------------------------------------------
/packages/klevu-ui/src/components/klevu-cms-list/klevu-cms-list.css:
--------------------------------------------------------------------------------
1 | :host {
2 |   display: block;
3 | }
4 | 
5 | klevu-typography.caption {
6 |   margin-bottom: var(--klevu-spacing-02);
7 | }
8 | 


--------------------------------------------------------------------------------
/packages/klevu-ui/src/components/klevu-cms-list/klevu-cms-list.mdx:
--------------------------------------------------------------------------------
 1 | import { Controls, Canvas, Meta, Markdown } from "@storybook/addon-docs"
 2 | import * as Stories from "./klevu-cms-list.stories"
 3 | import { KlevuAutoDocs } from "../../../.storybook/blocks/KlevuAutoDocs"
 4 | 
 5 | 
 6 | 
 7 | # Klevu-cms-list
 8 | 
 9 | {Stories.description}
10 | 
11 | 
12 | 
13 | 
14 | 
15 | 
16 | 


--------------------------------------------------------------------------------
/packages/klevu-ui/src/components/klevu-cms-list/test/klevu-cms-list.e2e.ts:
--------------------------------------------------------------------------------
 1 | import { newE2EPage } from "@stencil/core/testing"
 2 | 
 3 | describe("klevu-cms-list", () => {
 4 |   it("renders", async () => {
 5 |     const page = await newE2EPage()
 6 |     await page.setContent("")
 7 | 
 8 |     const element = await page.find("klevu-cms-list")
 9 |     expect(element).toHaveClass("hydrated")
10 |   })
11 | })
12 | 


--------------------------------------------------------------------------------
/packages/klevu-ui/src/components/klevu-color-swatch/klevu-color-swatch.mdx:
--------------------------------------------------------------------------------
 1 | import { Canvas, Meta, Markdown } from "@storybook/addon-docs"
 2 | import { KlevuAutoDocs } from "../../../.storybook/blocks/KlevuAutoDocs"
 3 | import * as Stories from "./klevu-color-swatch.stories"
 4 | 
 5 | 
 6 | 
 7 | # Klevu-color-swatch
 8 | 
 9 | {Stories.description}
10 | 
11 | 
12 | 
13 | 
14 | 


--------------------------------------------------------------------------------
/packages/klevu-ui/src/components/klevu-drawer/klevu-drawer.mdx:
--------------------------------------------------------------------------------
 1 | import { Controls, Canvas, Meta, Markdown } from "@storybook/addon-docs"
 2 | import { KlevuAutoDocs } from "../../../.storybook/blocks/KlevuAutoDocs"
 3 | import * as Stories from "./klevu-drawer.stories"
 4 | 
 5 | 
 6 | 
 7 | # Klevu-drawer
 8 | 
 9 | {Stories.description}
10 | 
11 | 
12 | 
13 | 
14 | 
15 | 
16 | 


--------------------------------------------------------------------------------
/packages/klevu-ui/src/components/klevu-drawer/styled-drawer.mdx:
--------------------------------------------------------------------------------
 1 | import { Controls, Canvas, Meta, Markdown } from "@storybook/addon-docs"
 2 | import { KlevuAutoDocs } from "../../../.storybook/blocks/KlevuAutoDocs"
 3 | import { KlevuCSSEditor } from "../../../.storybook/blocks/KlevuCSSEditor"
 4 | 
 5 | import * as Stories from "./klevu-drawer.stories"
 6 | 
 7 | 
 8 | 
 9 | ## Styled Drawer
10 | 
11 | 
12 | 
13 | Modify example above with following:
14 | 
15 | 
16 | 
17 | 
18 | 


--------------------------------------------------------------------------------
/packages/klevu-ui/src/components/klevu-drawer/test/klevu-drawer.e2e.ts:
--------------------------------------------------------------------------------
 1 | import { newE2EPage } from "@stencil/core/testing"
 2 | 
 3 | describe("klevu-drawer", () => {
 4 |   it("renders", async () => {
 5 |     const page = await newE2EPage()
 6 |     await page.setContent("")
 7 | 
 8 |     const element = await page.find("klevu-drawer")
 9 |     expect(element).toHaveClass("hydrated")
10 |   })
11 | })
12 | 


--------------------------------------------------------------------------------
/packages/klevu-ui/src/components/klevu-dropdown/klevu-dropdown.mdx:
--------------------------------------------------------------------------------
 1 | import { Controls, Canvas, Meta, Markdown } from "@storybook/addon-docs"
 2 | import { KlevuAutoDocs } from "../../../.storybook/blocks/KlevuAutoDocs"
 3 | import * as Stories from "./klevu-dropdown.stories"
 4 | 
 5 | 
 6 | 
 7 | # Klevu-dropdown
 8 | 
 9 | {Stories.description}
10 | 
11 | 
12 | 
13 | 
14 | 
15 | 
16 | 


--------------------------------------------------------------------------------
/packages/klevu-ui/src/components/klevu-dropdown/styled-dropdown.mdx:
--------------------------------------------------------------------------------
 1 | import { Controls, Canvas, Meta, Markdown } from "@storybook/addon-docs"
 2 | import { KlevuAutoDocs } from "../../../.storybook/blocks/KlevuAutoDocs"
 3 | import { KlevuCSSEditor } from "../../../.storybook/blocks/KlevuCSSEditor"
 4 | import * as Stories from "./klevu-dropdown.stories"
 5 | 
 6 | 
 7 | 
 8 | ## Styled Dropdown
 9 | 
10 | 
11 | 
12 | Modify example above with following:
13 | 
14 | 
15 | 
16 | 
17 | 


--------------------------------------------------------------------------------
/packages/klevu-ui/src/components/klevu-facet-list/color-swatches-facet-list.mdx:
--------------------------------------------------------------------------------
 1 | import { Controls, Canvas, Meta, Markdown } from "@storybook/addon-docs"
 2 | import { KlevuAutoDocs } from "../../../.storybook/blocks/KlevuAutoDocs"
 3 | import * as Stories from "./klevu-facet-list.stories"
 4 | 
 5 | 
 6 | 
 7 | ## Example with color swatches
 8 | 
 9 | 
10 | 


--------------------------------------------------------------------------------
/packages/klevu-ui/src/components/klevu-facet-list/klevu-facet-list.css:
--------------------------------------------------------------------------------
 1 | :host {
 2 |   /**
 3 |   * @prop --klevu-face-list-width 200px: Width of the facet listing
 4 |   */
 5 |   display: block;
 6 |   width: var(--klevu-facet-list-width, 200px);
 7 | }
 8 | 
 9 | .applybar {
10 |   display: flex;
11 |   justify-content: space-between;
12 |   margin: var(--klevu-spacing-04) 0;
13 |   gap: var(--klevu-spacing-05);
14 | }
15 | 
16 | .applybar .apply {
17 |   width: 100%;
18 | }
19 | 
20 | klevu-facet:first-of-type::part(heading) {
21 |   margin-top: 0;
22 | }
23 | 


--------------------------------------------------------------------------------
/packages/klevu-ui/src/components/klevu-facet-list/styled-facet-list.mdx:
--------------------------------------------------------------------------------
 1 | import { Controls, Canvas, Meta, Markdown } from "@storybook/addon-docs"
 2 | import { KlevuAutoDocs } from "../../../.storybook/blocks/KlevuAutoDocs"
 3 | import * as Stories from "./klevu-facet-list.stories"
 4 | import { KlevuCSSEditor } from "../../../.storybook/blocks/KlevuCSSEditor"
 5 | 
 6 | 
 7 | 
 8 | ## Styled Facet List
 9 | 
10 | 
11 | 
12 | 
13 | 
14 | 
15 | 


--------------------------------------------------------------------------------
/packages/klevu-ui/src/components/klevu-facet-list/test/klevu-facet-list.e2e.ts:
--------------------------------------------------------------------------------
 1 | import { newE2EPage } from "@stencil/core/testing"
 2 | 
 3 | describe("klevu-facet-list", () => {
 4 |   it("renders", async () => {
 5 |     const page = await newE2EPage()
 6 |     await page.setContent("")
 7 | 
 8 |     const element = await page.find("klevu-facet-list")
 9 |     expect(element).toHaveClass("hydrated")
10 |   })
11 | })
12 | 


--------------------------------------------------------------------------------
/packages/klevu-ui/src/components/klevu-facet/slider-facet.mdx:
--------------------------------------------------------------------------------
 1 | import { Controls, Canvas, Meta, Markdown } from "@storybook/addon-docs"
 2 | import { KlevuAutoDocs } from "../../../.storybook/blocks/KlevuAutoDocs"
 3 | import * as Stories from "./klevu-facet.stories"
 4 | 
 5 | 
 6 | 
 7 | # Slider
 8 | 
 9 | Facet can also be used to display a slider. This is useful for price or other numeric filters.
10 | 
11 | 
12 | 


--------------------------------------------------------------------------------
/packages/klevu-ui/src/components/klevu-facet/styled-facet.mdx:
--------------------------------------------------------------------------------
 1 | import { Controls, Canvas, Meta, Markdown } from "@storybook/addon-docs"
 2 | import { KlevuAutoDocs } from "../../../.storybook/blocks/KlevuAutoDocs"
 3 | import * as Stories from "./klevu-facet.stories"
 4 | import { KlevuCSSEditor } from "../../../.storybook/blocks/KlevuCSSEditor"
 5 | 
 6 | 
 7 | 
 8 | # Styled Facet
 9 | 
10 | 
11 | 
12 | 
13 | 
14 | 
15 | 


--------------------------------------------------------------------------------
/packages/klevu-ui/src/components/klevu-facet/swatches-facet.mdx:
--------------------------------------------------------------------------------
 1 | import { Controls, Canvas, Meta, Markdown } from "@storybook/addon-docs"
 2 | import { KlevuAutoDocs } from "../../../.storybook/blocks/KlevuAutoDocs"
 3 | import * as Stories from "./klevu-facet.stories"
 4 | 
 5 | 
 6 | 
 7 | # Color Swatches
 8 | 
 9 | Change the facet to show color swatches
10 | 
11 | 
12 | 


--------------------------------------------------------------------------------
/packages/klevu-ui/src/components/klevu-facet/test/klevu-facet.e2e.ts:
--------------------------------------------------------------------------------
 1 | import { newE2EPage } from "@stencil/core/testing"
 2 | 
 3 | describe("klevu-facet", () => {
 4 |   it("renders", async () => {
 5 |     const page = await newE2EPage()
 6 |     await page.setContent("")
 7 | 
 8 |     const element = await page.find("klevu-facet")
 9 |     expect(element).toHaveClass("hydrated")
10 |   })
11 | })
12 | 


--------------------------------------------------------------------------------
/packages/klevu-ui/src/components/klevu-icon/assets/check.svg:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/packages/klevu-ui/src/components/klevu-icon/assets/chevron_left.svg:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/packages/klevu-ui/src/components/klevu-icon/assets/chevron_right.svg:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/packages/klevu-ui/src/components/klevu-icon/assets/close.svg:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/packages/klevu-ui/src/components/klevu-icon/assets/expand_more.svg:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/packages/klevu-ui/src/components/klevu-icon/assets/image_not_supported.svg:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/packages/klevu-ui/src/components/klevu-icon/assets/menu.svg:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/packages/klevu-ui/src/components/klevu-icon/assets/navigate_before.svg:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/packages/klevu-ui/src/components/klevu-icon/assets/navigate_next.svg:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/packages/klevu-ui/src/components/klevu-icon/assets/photo_camera.svg:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/packages/klevu-ui/src/components/klevu-icon/assets/search.svg:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/packages/klevu-ui/src/components/klevu-icon/assets/thumb_down.svg:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/packages/klevu-ui/src/components/klevu-icon/assets/thumb_up.svg:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/packages/klevu-ui/src/components/klevu-icon/assets/upload.svg:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/packages/klevu-ui/src/components/klevu-icon/klevu-icon.css:
--------------------------------------------------------------------------------
 1 | :host {
 2 |   display: inline-block;
 3 | }
 4 | 
 5 | span {
 6 |   font-family: "Material Symbols Rounded";
 7 |   font-variation-settings: "FILL" 0, "wght" 600, "GRAD" 0, "opsz" 20;
 8 | }
 9 | 
10 | div svg {
11 |   height: 100%;
12 |   width: 100%;
13 | }
14 | 


--------------------------------------------------------------------------------
/packages/klevu-ui/src/components/klevu-icon/klevu-icon.mdx:
--------------------------------------------------------------------------------
 1 | import { Controls, Canvas, Meta, Markdown } from "@storybook/addon-docs"
 2 | import { KlevuAutoDocs } from "../../../.storybook/blocks/KlevuAutoDocs"
 3 | import * as Stories from "./klevu-icon.stories"
 4 | 
 5 | 
 6 | 
 7 | # Klevu-icon
 8 | 
 9 | {Stories.description}
10 | 
11 | 
12 | 
13 | 
14 | 
15 | 
16 | 


--------------------------------------------------------------------------------
/packages/klevu-ui/src/components/klevu-icon/preloaded-icons.json:
--------------------------------------------------------------------------------
 1 | [
 2 |   "expand_more",
 3 |   "thumb_up",
 4 |   "thumb_down",
 5 |   "check",
 6 |   "upload",
 7 |   "info",
 8 |   "menu",
 9 |   "close",
10 |   "navigate_before",
11 |   "navigate_next",
12 |   "image_not_supported",
13 |   "photo_camera",
14 |   "upload",
15 |   "search",
16 |   "chevron_left",
17 |   "chevron_right"
18 | ]
19 | 


--------------------------------------------------------------------------------
/packages/klevu-ui/src/components/klevu-latest-searches/klevu-latest-searches.css:
--------------------------------------------------------------------------------
 1 | :host {
 2 |   display: block;
 3 | }
 4 | 
 5 | klevu-typography.caption {
 6 |   display: block;
 7 |   margin-bottom: var(--klevu-spacing-02);
 8 | }
 9 | 
10 | klevu-list:hover {
11 |   cursor: pointer;
12 |   background: var(--klevu-color-neutral-2);
13 | }
14 | 


--------------------------------------------------------------------------------
/packages/klevu-ui/src/components/klevu-latest-searches/klevu-latest-searches.mdx:
--------------------------------------------------------------------------------
 1 | import { Canvas, Meta, Markdown, Controls } from "@storybook/addon-docs"
 2 | import { KlevuAutoDocs } from "../../../.storybook/blocks/KlevuAutoDocs"
 3 | import * as Stories from "./klevu-latest-searches.stories"
 4 | 
 5 | 
 6 | 
 7 | # Klevu-latest-searches
 8 | 
 9 | {Stories.description}
10 | 
11 | 
12 | 
13 | 
14 | 
15 | 


--------------------------------------------------------------------------------
/packages/klevu-ui/src/components/klevu-latest-searches/test/klevu-latest-searches.e2e.ts:
--------------------------------------------------------------------------------
 1 | import { newE2EPage } from "@stencil/core/testing"
 2 | 
 3 | describe("klevu-latest-searches", () => {
 4 |   it("renders", async () => {
 5 |     const page = await newE2EPage()
 6 |     await page.setContent("")
 7 | 
 8 |     await page.waitForChanges()
 9 |     const element = await page.find("klevu-latest-searches")
10 |     expect(element).toHaveClass("hydrated")
11 |   })
12 | })
13 | 


--------------------------------------------------------------------------------
/packages/klevu-ui/src/components/klevu-layout-results/klevu-layout-results.mdx:
--------------------------------------------------------------------------------
 1 | import { Controls, Canvas, Meta, Markdown } from "@storybook/addon-docs"
 2 | import { KlevuAutoDocs } from "../../../.storybook/blocks/KlevuAutoDocs"
 3 | import * as Stories from "./klevu-layout-results.stories"
 4 | 
 5 | 
 6 | 
 7 | # Klevu-layout-results
 8 | 
 9 | {Stories.description}
10 | 
11 | 
12 | 
13 | 
14 | 
15 | 


--------------------------------------------------------------------------------
/packages/klevu-ui/src/components/klevu-list/default-styling-list.mdx:
--------------------------------------------------------------------------------
 1 | import { Controls, Canvas, Meta, Markdown } from "@storybook/addon-docs"
 2 | import { KlevuAutoDocs } from "../../../.storybook/blocks/KlevuAutoDocs"
 3 | import * as Stories from "./klevu-list.stories"
 4 | 
 5 | 
 6 | 
 7 | ## List items with default styling
 8 | 
 9 | 
10 | 


--------------------------------------------------------------------------------
/packages/klevu-ui/src/components/klevu-list/icon-list.mdx:
--------------------------------------------------------------------------------
 1 | import { Controls, Canvas, Meta, Markdown } from "@storybook/addon-docs"
 2 | import { KlevuAutoDocs } from "../../../.storybook/blocks/KlevuAutoDocs"
 3 | import * as Stories from "./klevu-list.stories"
 4 | 
 5 | 
 6 | 
 7 | ## List items with icons
 8 | 
 9 | 
10 | 


--------------------------------------------------------------------------------
/packages/klevu-ui/src/components/klevu-list/images-list.mdx:
--------------------------------------------------------------------------------
 1 | import { Controls, Canvas, Meta, Markdown } from "@storybook/addon-docs"
 2 | import { KlevuAutoDocs } from "../../../.storybook/blocks/KlevuAutoDocs"
 3 | import * as Stories from "./klevu-list.stories"
 4 | 
 5 | 
 6 | 
 7 | ## List items with images
 8 | 
 9 | 
10 | 


--------------------------------------------------------------------------------
/packages/klevu-ui/src/components/klevu-list/klevu-list.mdx:
--------------------------------------------------------------------------------
 1 | import { Controls, Canvas, Meta, Markdown } from "@storybook/addon-docs"
 2 | import { KlevuAutoDocs } from "../../../.storybook/blocks/KlevuAutoDocs"
 3 | import * as Stories from "./klevu-list.stories"
 4 | 
 5 | 
 6 | 
 7 | # Klevu-list
 8 | 
 9 | {Stories.description}
10 | 
11 | 
12 | 
13 | 
14 | 


--------------------------------------------------------------------------------
/packages/klevu-ui/src/components/klevu-list/links-list.mdx:
--------------------------------------------------------------------------------
 1 | import { Controls, Canvas, Meta, Markdown } from "@storybook/addon-docs"
 2 | import { KlevuAutoDocs } from "../../../.storybook/blocks/KlevuAutoDocs"
 3 | import * as Stories from "./klevu-list.stories"
 4 | 
 5 | 
 6 | 
 7 | ## List item with url
 8 | 
 9 | 
10 | 


--------------------------------------------------------------------------------
/packages/klevu-ui/src/components/klevu-list/primary-text-list.mdx:
--------------------------------------------------------------------------------
 1 | import { Controls, Canvas, Meta, Markdown } from "@storybook/addon-docs"
 2 | import { KlevuAutoDocs } from "../../../.storybook/blocks/KlevuAutoDocs"
 3 | import * as Stories from "./klevu-list.stories"
 4 | 
 5 | 
 6 | 
 7 | ## List items with only primary text
 8 | 
 9 | 
10 | 


--------------------------------------------------------------------------------
/packages/klevu-ui/src/components/klevu-list/secondary-text-list.mdx:
--------------------------------------------------------------------------------
 1 | import { Controls, Canvas, Meta, Markdown } from "@storybook/addon-docs"
 2 | import { KlevuAutoDocs } from "../../../.storybook/blocks/KlevuAutoDocs"
 3 | import * as Stories from "./klevu-list.stories"
 4 | 
 5 | 
 6 | 
 7 | ## List items with secondary text
 8 | 
 9 | 
10 | 


--------------------------------------------------------------------------------
/packages/klevu-ui/src/components/klevu-list/styled-list.mdx:
--------------------------------------------------------------------------------
 1 | import { Controls, Canvas, Meta, Markdown } from "@storybook/addon-docs"
 2 | import { KlevuAutoDocs } from "../../../.storybook/blocks/KlevuAutoDocs"
 3 | import * as Stories from "./klevu-list.stories"
 4 | import { KlevuCSSEditor } from "../../../.storybook/blocks/KlevuCSSEditor"
 5 | 
 6 | 
 7 | 
 8 | ## Styled List item
 9 | 
10 | 
11 | 
12 | Modify example above with following:
13 | 
14 | 
15 | 
16 | 
17 | 


--------------------------------------------------------------------------------
/packages/klevu-ui/src/components/klevu-loading-indicator/klevu-loading-indicator.mdx:
--------------------------------------------------------------------------------
 1 | import { Controls, Canvas, Meta, Markdown } from "@storybook/addon-docs"
 2 | import { KlevuAutoDocs } from "../../../.storybook/blocks/KlevuAutoDocs"
 3 | import * as Stories from "./klevu-loading-indicator.stories"
 4 | 
 5 | 
 6 | 
 7 | # Klevu-loading-indicator
 8 | 
 9 | {Stories.description}
10 | 
11 | 
12 | 
13 | 
14 | 


--------------------------------------------------------------------------------
/packages/klevu-ui/src/components/klevu-loading-indicator/klevu-loading-indicator.tsx:
--------------------------------------------------------------------------------
 1 | import { Component, Host, h } from "@stencil/core"
 2 | 
 3 | /**
 4 |  * Simple loading indicator
 5 |  *
 6 |  * @csspart loading-indicator-base The container for the loading indicator
 7 |  */
 8 | @Component({
 9 |   tag: "klevu-loading-indicator",
10 |   styleUrl: "klevu-loading-indicator.css",
11 |   shadow: true,
12 | })
13 | export class KlevuLoadingIndicator {
14 |   render() {
15 |     return (
16 |       
17 |         

18 |       
19 |     )
20 |   }
21 | }
22 | 


--------------------------------------------------------------------------------
/packages/klevu-ui/src/components/klevu-loading-indicator/styled-loading-indicator.mdx:
--------------------------------------------------------------------------------
 1 | import { Controls, Canvas, Meta, Markdown } from "@storybook/addon-docs"
 2 | import { KlevuAutoDocs } from "../../../.storybook/blocks/KlevuAutoDocs"
 3 | import { KlevuCSSEditor } from "../../../.storybook/blocks/KlevuCSSEditor"
 4 | import * as Stories from "./klevu-loading-indicator.stories"
 5 | 
 6 | 
 7 | 
 8 | ## Styled Loading indicator
 9 | 
10 | 
11 | 
12 | Modify example above with following:
13 | 
14 | 
15 | 
16 | 
17 | 


--------------------------------------------------------------------------------
/packages/klevu-ui/src/components/klevu-merchandising/WithInfiniteScroll.mdx:
--------------------------------------------------------------------------------
 1 | import { Controls, Canvas, Meta, Markdown } from "@storybook/addon-docs"
 2 | import { KlevuAutoDocs } from "../../../.storybook/blocks/KlevuAutoDocs"
 3 | import { KlevuCSSEditor } from "../../../.storybook/blocks/KlevuCSSEditor"
 4 | import * as Stories from "./klevu-merchandising.stories"
 5 | 
 6 | 
 7 | 
 8 | # Paginated
 9 | 
10 | 
11 | 


--------------------------------------------------------------------------------
/packages/klevu-ui/src/components/klevu-merchandising/WithPagination.mdx:
--------------------------------------------------------------------------------
 1 | import { Controls, Canvas, Meta, Markdown } from "@storybook/addon-docs"
 2 | import { KlevuAutoDocs } from "../../../.storybook/blocks/KlevuAutoDocs"
 3 | import { KlevuCSSEditor } from "../../../.storybook/blocks/KlevuCSSEditor"
 4 | import * as Stories from "./klevu-merchandising.stories"
 5 | 
 6 | 
 7 | 
 8 | # Paginated
 9 | 
10 | 
11 | 


--------------------------------------------------------------------------------
/packages/klevu-ui/src/components/klevu-merchandising/klevu-merchandising.css:
--------------------------------------------------------------------------------
 1 | :host {
 2 | }
 3 | 
 4 | .header {
 5 |   display: flex;
 6 |   justify-content: space-between;
 7 |   width: 100%;
 8 | }
 9 | 
10 | .footer {
11 |   display: flex;
12 |   justify-content: center;
13 | }
14 | 
15 | .footer .klevu-pagination {
16 |   padding: var(--klevu-spacing-03) 0;
17 | }
18 | 


--------------------------------------------------------------------------------
/packages/klevu-ui/src/components/klevu-merchandising/klevu-merchandising.mdx:
--------------------------------------------------------------------------------
 1 | import { Controls, Canvas, Meta, Markdown } from "@storybook/addon-docs"
 2 | import { KlevuAutoDocs } from "../../../.storybook/blocks/KlevuAutoDocs"
 3 | import * as Stories from "./klevu-merchandising.stories"
 4 | 
 5 | 
 6 | 
 7 | # Klevu-merchandising
 8 | 
 9 | {Stories.description}
10 | 
11 | 
12 | 
13 | 
14 | 
15 | 
16 | 


--------------------------------------------------------------------------------
/packages/klevu-ui/src/components/klevu-modal/klevu-modal.css:
--------------------------------------------------------------------------------
 1 | :host {
 2 |   display: block;
 3 | }
 4 | 
 5 | dialog {
 6 |   border: none !important;
 7 |   border-radius: var(--klevu-border-radius-m);
 8 |   padding: 0;
 9 |   box-shadow: var(--klevu-elevation-1);
10 | }
11 | 
12 | main {
13 |   padding: var(--klevu-spacing-04);
14 | }
15 | 
16 | header {
17 |   padding: var(--klevu-spacing-04);
18 |   display: flex;
19 |   justify-content: space-between;
20 |   align-items: center;
21 | }
22 | 
23 | button {
24 |   border: none;
25 |   background-color: transparent;
26 |   appearance: none;
27 |   border-radius: 100%;
28 |   height: 30px;
29 |   width: 30px;
30 | }
31 | 


--------------------------------------------------------------------------------
/packages/klevu-ui/src/components/klevu-modal/klevu-modal.mdx:
--------------------------------------------------------------------------------
 1 | import { Canvas, Meta, Markdown } from "@storybook/addon-docs"
 2 | import { KlevuAutoDocs } from "../../../.storybook/blocks/KlevuAutoDocs"
 3 | import * as Stories from "./klevu-modal.stories"
 4 | 
 5 | 
 6 | 
 7 | # Klevu-modal
 8 | 
 9 | {Stories.description}
10 | 
11 | 
12 | 
13 | 
14 | 


--------------------------------------------------------------------------------
/packages/klevu-ui/src/components/klevu-modal/styled-modal.mdx:
--------------------------------------------------------------------------------
 1 | import { Canvas, Meta, Markdown } from "@storybook/addon-docs"
 2 | import { KlevuAutoDocs } from "../../../.storybook/blocks/KlevuAutoDocs"
 3 | import { KlevuCSSEditor } from "../../../.storybook/blocks/KlevuCSSEditor"
 4 | import * as Stories from "./klevu-modal.stories"
 5 | 
 6 | 
 7 | 
 8 | ## Styled Modal
 9 | 
10 | 
11 | 
12 | Modify example above with following:
13 | 
14 | 
15 | 
16 | 
17 | 


--------------------------------------------------------------------------------
/packages/klevu-ui/src/components/klevu-moi/klevu-moi.mdx:
--------------------------------------------------------------------------------
 1 | import { Canvas, Meta, Markdown } from "@storybook/addon-docs"
 2 | import { KlevuAutoDocs } from "../../../.storybook/blocks/KlevuAutoDocs"
 3 | import * as Stories from "./klevu-moi.stories"
 4 | 
 5 | 
 6 | 
 7 | # Klevu-moi
 8 | 
 9 | {Stories.description}
10 | 
11 | 
12 | 
13 | 
14 | 


--------------------------------------------------------------------------------
/packages/klevu-ui/src/components/klevu-pagination/klevu-pagination.mdx:
--------------------------------------------------------------------------------
 1 | import { Controls, Canvas, Meta, Markdown } from "@storybook/addon-docs"
 2 | import { KlevuAutoDocs } from "../../../.storybook/blocks/KlevuAutoDocs"
 3 | import * as Stories from "./klevu-pagination.stories"
 4 | 
 5 | 
 6 | 
 7 | # Klevu-pagination
 8 | 
 9 | {Stories.description}
10 | 
11 | Pagination can be build simply with just providing the min, max and current values.
12 | 
13 | 
14 | 
15 | 
16 | 
17 | 
18 | 


--------------------------------------------------------------------------------
/packages/klevu-ui/src/components/klevu-pagination/styled-pagination.mdx:
--------------------------------------------------------------------------------
 1 | import { Controls, Canvas, Meta, Markdown } from "@storybook/addon-docs"
 2 | import { KlevuAutoDocs } from "../../../.storybook/blocks/KlevuAutoDocs"
 3 | import { KlevuCSSEditor } from "../../../.storybook/blocks/KlevuCSSEditor"
 4 | import * as Stories from "./klevu-pagination.stories"
 5 | 
 6 | 
 7 | 
 8 | ## Styled Pagination
 9 | 
10 | 
11 | 
12 | Modify example above with following:
13 | 
14 | 
15 | 
16 | 
17 | 


--------------------------------------------------------------------------------
/packages/klevu-ui/src/components/klevu-pagination/test/klevu-pagination.e2e.ts:
--------------------------------------------------------------------------------
 1 | import { newE2EPage } from "@stencil/core/testing"
 2 | 
 3 | describe("klevu-pagination", () => {
 4 |   it("renders", async () => {
 5 |     const page = await newE2EPage()
 6 |     await page.setContent('')
 7 | 
 8 |     const element = await page.find("klevu-pagination")
 9 |     expect(element).toHaveClass("hydrated")
10 |   })
11 | })
12 | 


--------------------------------------------------------------------------------
/packages/klevu-ui/src/components/klevu-popular-searches/klevu-popular-searches.css:
--------------------------------------------------------------------------------
 1 | :host {
 2 |   display: block;
 3 | }
 4 | 
 5 | klevu-typography.caption {
 6 |   display: block;
 7 |   margin-bottom: var(--klevu-spacing-02);
 8 | }
 9 | 
10 | klevu-list:hover {
11 |   cursor: pointer;
12 |   background: var(--klevu-color-neutral-2);
13 | }
14 | 


--------------------------------------------------------------------------------
/packages/klevu-ui/src/components/klevu-popular-searches/klevu-popular-searches.mdx:
--------------------------------------------------------------------------------
 1 | import { Controls, Canvas, Meta, Markdown } from "@storybook/addon-docs"
 2 | import { KlevuAutoDocs } from "../../../.storybook/blocks/KlevuAutoDocs"
 3 | import * as Stories from "./klevu-popular-searches.stories"
 4 | 
 5 | 
 6 | 
 7 | # Klevu-popular searches
 8 | 
 9 | {Stories.description}
10 | 
11 | 
12 | 
13 | 
14 | 
15 | 
16 | 


--------------------------------------------------------------------------------
/packages/klevu-ui/src/components/klevu-popular-searches/styled-popular-searches.mdx:
--------------------------------------------------------------------------------
 1 | import { Controls, Canvas, Meta, Markdown } from "@storybook/addon-docs"
 2 | import { KlevuAutoDocs } from "../../../.storybook/blocks/KlevuAutoDocs"
 3 | import { KlevuCSSEditor } from "../../../.storybook/blocks/KlevuCSSEditor"
 4 | import * as Stories from "./klevu-popular-searches.stories"
 5 | 
 6 | 
 7 | 
 8 | ## Styled Popular Searches
 9 | 
10 | 
11 | 
12 | Modify example above with following:
13 | 
14 | 
15 | 
16 | 
17 | 


--------------------------------------------------------------------------------
/packages/klevu-ui/src/components/klevu-popular-searches/test/klevu-popular-searches.e2e.ts:
--------------------------------------------------------------------------------
 1 | import { newE2EPage } from "@stencil/core/testing"
 2 | 
 3 | describe("klevu-popular-searches", () => {
 4 |   it("renders", async () => {
 5 |     const page = await newE2EPage()
 6 |     await page.setContent(
 7 |       ``
12 |     )
13 |     await page.waitForChanges()
14 |     const element = await page.find("klevu-popular-searches")
15 |     expect(element).toHaveClass("hydrated")
16 |   })
17 | })
18 | 


--------------------------------------------------------------------------------
/packages/klevu-ui/src/components/klevu-popup/klevu-popup.mdx:
--------------------------------------------------------------------------------
 1 | import { Controls, Canvas, Meta, Markdown } from "@storybook/addon-docs"
 2 | import { KlevuAutoDocs } from "../../../.storybook/blocks/KlevuAutoDocs"
 3 | import * as Stories from "./klevu-popup.stories"
 4 | 
 5 | 
 6 | 
 7 | # Klevu-popup
 8 | 
 9 | {Stories.description}
10 | 
11 | ## Popup starting from search field
12 | 
13 | 
14 | 
15 | 
16 | 
17 | 
18 | 


--------------------------------------------------------------------------------
/packages/klevu-ui/src/components/klevu-popup/popup-button-source.mdx:
--------------------------------------------------------------------------------
 1 | import { Controls, Canvas, Meta, Markdown } from "@storybook/addon-docs"
 2 | import { KlevuAutoDocs } from "../../../.storybook/blocks/KlevuAutoDocs"
 3 | import * as Stories from "./klevu-popup.stories"
 4 | 
 5 | 
 6 | 
 7 | ## Popup starting from button
 8 | 
 9 | 
15 | 


--------------------------------------------------------------------------------
/packages/klevu-ui/src/components/klevu-popup/popup-external-source.mdx:
--------------------------------------------------------------------------------
 1 | import { Controls, Canvas, Meta, Markdown } from "@storybook/addon-docs"
 2 | import { KlevuAutoDocs } from "../../../.storybook/blocks/KlevuAutoDocs"
 3 | import * as Stories from "./klevu-popup.stories"
 4 | 
 5 | 
 6 | 
 7 | ## Popup starting from external HTML element
 8 | 
 9 | This example is to demonstrate ways to link external elements to trigger the popup.
10 | 
11 | 
17 | 


--------------------------------------------------------------------------------
/packages/klevu-ui/src/components/klevu-popup/test/klevu-popup.e2e.ts:
--------------------------------------------------------------------------------
 1 | import { newE2EPage } from "@stencil/core/testing"
 2 | 
 3 | describe("klevu-popup", () => {
 4 |   it("renders", async () => {
 5 |     const page = await newE2EPage()
 6 |     await page.setContent("")
 7 | 
 8 |     const element = await page.find("klevu-popup")
 9 |     expect(element).toHaveClass("hydrated")
10 |   })
11 | })
12 | 


--------------------------------------------------------------------------------
/packages/klevu-ui/src/components/klevu-product-grid/klevu-product-grid.css:
--------------------------------------------------------------------------------
 1 | :host {
 2 |   /**
 3 |   * @prop --klevu-product-grid-spacing var(--klevu-spacing-05): spacing between grid items
 4 |   * @prop --klevu-product-grid-product-width 250px: width of each product
 5 |   */
 6 |   --grid-spacing: var(--klevu-product-grid-spacing, var(--klevu-spacing-05));
 7 |   --product-width: var(--klevu-product-grid-product-width, 250px);
 8 | }
 9 | 
10 | .gridcontainer {
11 |   display: grid;
12 |   grid-gap: var(--grid-spacing);
13 |   grid-template-columns: repeat(auto-fill, minmax(var(--product-width), 1fr));
14 | }
15 | 


--------------------------------------------------------------------------------
/packages/klevu-ui/src/components/klevu-product-grid/klevu-product-grid.mdx:
--------------------------------------------------------------------------------
 1 | import { Controls, Canvas, Meta, Markdown } from "@storybook/addon-docs"
 2 | import { KlevuAutoDocs } from "../../../.storybook/blocks/KlevuAutoDocs"
 3 | import * as Stories from "./klevu-product-grid.stories"
 4 | 
 5 | 
 6 | 
 7 | # Klevu-product-grid
 8 | 
 9 | {Stories.description}
10 | 
11 | 
12 | 
13 | 
14 | 


--------------------------------------------------------------------------------
/packages/klevu-ui/src/components/klevu-product-query/klevu-product-query.css:
--------------------------------------------------------------------------------
1 | :host {
2 |   display: inline-block;
3 | }
4 | 
5 | :host([embedded]) {
6 |   width: var(--klevu-product-query-popup-width, 100%);
7 | }
8 | 


--------------------------------------------------------------------------------
/packages/klevu-ui/src/components/klevu-product/fallback-image-product.mdx:
--------------------------------------------------------------------------------
 1 | import { KlevuAutoDocs } from "../../../.storybook/blocks/KlevuAutoDocs"
 2 | import { Controls, Canvas, Meta, Story, Markdown } from "@storybook/addon-docs"
 3 | import * as Stories from "./klevu-product.stories"
 4 | import { KlevuCSSEditor } from "../../../.storybook/blocks/KlevuCSSEditor"
 5 | 
 6 | 
 7 | 
 8 | ## Styled Product
 9 | 
10 | 
11 | 


--------------------------------------------------------------------------------
/packages/klevu-ui/src/components/klevu-product/klevu-product.mdx:
--------------------------------------------------------------------------------
 1 | import { KlevuAutoDocs } from "../../../.storybook/blocks/KlevuAutoDocs"
 2 | import { Controls, Canvas, Meta, Story, Markdown } from "@storybook/addon-docs"
 3 | import * as Stories from "./klevu-product.stories"
 4 | 
 5 | 
 6 | 
 7 | # Klevu-product
 8 | 
 9 | {Stories.description}
10 | 
11 | 
12 | 
13 | 
14 | 
15 | 
16 | 


--------------------------------------------------------------------------------
/packages/klevu-ui/src/components/klevu-product/styled-product.mdx:
--------------------------------------------------------------------------------
 1 | import { KlevuAutoDocs } from "../../../.storybook/blocks/KlevuAutoDocs"
 2 | import { Controls, Canvas, Meta, Story, Markdown } from "@storybook/addon-docs"
 3 | import * as Stories from "./klevu-product.stories"
 4 | import { KlevuCSSEditor } from "../../../.storybook/blocks/KlevuCSSEditor"
 5 | 
 6 | 
 7 | 
 8 | ## Styled Product
 9 | 
10 | 
11 | 
12 | 
13 | 
14 | 
15 | 


--------------------------------------------------------------------------------
/packages/klevu-ui/src/components/klevu-product/test/klevu-product.e2e.ts:
--------------------------------------------------------------------------------
 1 | import { newE2EPage } from "@stencil/core/testing"
 2 | 
 3 | describe("klevu-product", () => {
 4 |   it("renders", async () => {
 5 |     const page = await newE2EPage()
 6 |     await page.setContent("")
 7 | 
 8 |     const element = await page.find("klevu-product")
 9 |     expect(element).toHaveClass("hydrated")
10 |   })
11 | })
12 | 


--------------------------------------------------------------------------------
/packages/klevu-ui/src/components/klevu-query/klevu-query.css:
--------------------------------------------------------------------------------
1 | :host {
2 |   display: block;
3 | }
4 | 


--------------------------------------------------------------------------------
/packages/klevu-ui/src/components/klevu-query/klevu-query.mdx:
--------------------------------------------------------------------------------
 1 | import { Controls, Canvas, Meta, Markdown } from "@storybook/addon-docs"
 2 | import { KlevuAutoDocs } from "../../../.storybook/blocks/KlevuAutoDocs"
 3 | import * as Stories from "./klevu-query.stories"
 4 | 
 5 | 
 6 | 
 7 | # Klevu-query
 8 | 
 9 | {Stories.description}
10 | 
11 | 
12 | 
13 | 
14 | 
15 | 
16 | 


--------------------------------------------------------------------------------
/packages/klevu-ui/src/components/klevu-query/test/klevu-query.e2e.ts:
--------------------------------------------------------------------------------
 1 | import { newE2EPage } from "@stencil/core/testing"
 2 | 
 3 | describe.skip("klevu-query", () => {
 4 |   it("renders", async () => {
 5 |     const page = await newE2EPage()
 6 |     await page.setContent("")
 7 | 
 8 |     const element = await page.find("klevu-query")
 9 |     expect(element).toHaveClass("hydrated")
10 |   })
11 | })
12 | 


--------------------------------------------------------------------------------
/packages/klevu-ui/src/components/klevu-quicksearch/Stylished.mdx:
--------------------------------------------------------------------------------
 1 | import { Canvas, Meta } from "@storybook/addon-docs"
 2 | import * as Stories from "./klevu-quicksearch.stories"
 3 | import { KlevuAutoDocs } from "../../../.storybook/blocks/KlevuAutoDocs"
 4 | import { KlevuCSSEditor } from "../../../.storybook/blocks/KlevuCSSEditor"
 5 | 
 6 | 
 7 | 
 8 | 
 9 | 
10 | Try editing the CSS in the editor below to see the changes in the preview above.
11 | 
12 | 
13 | 
14 | 
15 | 


--------------------------------------------------------------------------------
/packages/klevu-ui/src/components/klevu-quicksearch/klevu-quicksearch.mdx:
--------------------------------------------------------------------------------
 1 | import { KlevuAutoDocs } from "../../../.storybook/blocks/KlevuAutoDocs"
 2 | import { Controls, Canvas, Meta, Story, Markdown } from "@storybook/addon-docs"
 3 | import * as Stories from "./klevu-quicksearch.stories"
 4 | 
 5 | 
 6 | 
 7 | # Klevu-quicksearch
 8 | 
 9 | {Stories.description}
10 | 
11 | 
12 | 
13 | 
14 | 
15 | 
16 | 


--------------------------------------------------------------------------------
/packages/klevu-ui/src/components/klevu-quicksearch/test/klevu-quicksearch.e2e.ts:
--------------------------------------------------------------------------------
 1 | import { newE2EPage } from "@stencil/core/testing"
 2 | 
 3 | describe("klevu-quicksearch", () => {
 4 |   it("renders", async () => {
 5 |     const page = await newE2EPage()
 6 |     await page.setContent(
 7 |       ``
12 |     )
13 | 
14 |     const element = await page.find("klevu-quicksearch")
15 |     expect(element).toHaveClass("hydrated")
16 |   })
17 | })
18 | 


--------------------------------------------------------------------------------
/packages/klevu-ui/src/components/klevu-rating/klevu-rating.css:
--------------------------------------------------------------------------------
 1 | :host {
 2 |   display: block;
 3 | }
 4 | 
 5 | svg {
 6 |   color: transparent;
 7 |   margin: 0px var(--klevu-spacing-xsmall, 2px);
 8 | }
 9 | .filled {
10 |   fill: #ffd707;
11 | }
12 | 


--------------------------------------------------------------------------------
/packages/klevu-ui/src/components/klevu-rating/klevu-rating.mdx:
--------------------------------------------------------------------------------
 1 | import { Canvas, Meta, Markdown, Controls } from "@storybook/addon-docs"
 2 | import { KlevuAutoDocs } from "../../../.storybook/blocks/KlevuAutoDocs"
 3 | import * as Stories from "./klevu-rating.stories"
 4 | 
 5 | 
 6 | 
 7 | # Klevu-rating
 8 | 
 9 | {Stories.description}
10 | 
11 | 
12 | 
13 | 
14 | 
15 | 
16 | 


--------------------------------------------------------------------------------
/packages/klevu-ui/src/components/klevu-rating/styled-rating.mdx:
--------------------------------------------------------------------------------
 1 | import { Canvas, Meta, Markdown } from "@storybook/addon-docs"
 2 | import { KlevuAutoDocs } from "../../../.storybook/blocks/KlevuAutoDocs"
 3 | import { KlevuCSSEditor } from "../../../.storybook/blocks/KlevuCSSEditor"
 4 | import * as Stories from "./klevu-rating.stories"
 5 | 
 6 | 
 7 | 
 8 | ## Styled Rating
 9 | 
10 | 
11 | 
12 | Modify example above with following:
13 | 
14 | 
15 | 
16 | 
17 | 


--------------------------------------------------------------------------------
/packages/klevu-ui/src/components/klevu-rating/test/klevu-rating.spec.tsx:
--------------------------------------------------------------------------------
 1 | import { newSpecPage } from '@stencil/core/testing';
 2 | import { KlevuRating } from '../klevu-rating';
 3 | 
 4 | describe('klevu-rating', () => {
 5 |   it('renders with 3 stars', async () => {
 6 |     const page = await newSpecPage({
 7 |       components: [KlevuRating],
 8 |       html: ``,
 9 |     });
10 |     if(page.root?.shadowRoot) {
11 |       const divEl = page.root.shadowRoot.querySelectorAll('svg');
12 |       expect(divEl.length).toEqual(5);
13 |       const filled = page.root.shadowRoot.querySelectorAll('.filled');
14 |       expect(filled.length).toEqual(3);
15 |     }
16 |   });
17 | });
18 | 


--------------------------------------------------------------------------------
/packages/klevu-ui/src/components/klevu-recommendations/Stylished.mdx:
--------------------------------------------------------------------------------
 1 | import { Canvas, Meta, Controls } from "@storybook/addon-docs"
 2 | import * as Stories from "./klevu-recommendations.stories"
 3 | import { KlevuAutoDocs } from "../../../.storybook/blocks/KlevuAutoDocs"
 4 | import { KlevuCSSEditor } from "../../../.storybook/blocks/KlevuCSSEditor"
 5 | 
 6 | 
 7 | 
 8 | 
 9 | 
10 | Try editing the CSS in the editor below to see the changes in the preview above.
11 | 
12 | 
13 | 
14 | 
15 | 


--------------------------------------------------------------------------------
/packages/klevu-ui/src/components/klevu-recommendations/klevu-recommendations.css:
--------------------------------------------------------------------------------
 1 | :host {
 2 |   display: block;
 3 | }
 4 | 
 5 | .staticImage klevu-banner::part(banner-image) {
 6 |   max-width: 1100px;
 7 |   max-height: 265px;
 8 | }
 9 | .staticImage.isMobile klevu-banner::part(banner-image) {
10 |   max-width: 375px;
11 |   max-height: 115px;
12 | }
13 | 


--------------------------------------------------------------------------------
/packages/klevu-ui/src/components/klevu-recommendations/klevu-recommendations.mdx:
--------------------------------------------------------------------------------
 1 | import { Controls, Canvas, Meta, Markdown } from "@storybook/addon-docs"
 2 | import { KlevuAutoDocs } from "../../../.storybook/blocks/KlevuAutoDocs"
 3 | import * as Stories from "./klevu-recommendations.stories"
 4 | 
 5 | 
 6 | 
 7 | # Klevu-recommendations
 8 | 
 9 | {Stories.description}
10 | 
11 | In a default case we can fetch recommendation from Klevu Merchant Center with a ID of recommendation. There is no need to pass any other parameters in typical case.
12 | 
13 | 
14 | 
15 | 
16 | 
17 | 
18 | 


--------------------------------------------------------------------------------
/packages/klevu-ui/src/components/klevu-search-field/klevu-search-field.css:
--------------------------------------------------------------------------------
 1 | :host {
 2 |   display: flex;
 3 | }
 4 | div {
 5 |   position: relative;
 6 | }
 7 | 
 8 | klevu-textfield {
 9 |   width: 100%;
10 | }
11 | 
12 | klevu-button {
13 |   margin-left: var(--klevu-spacing-04);
14 | }
15 | 


--------------------------------------------------------------------------------
/packages/klevu-ui/src/components/klevu-search-field/klevu-search-field.mdx:
--------------------------------------------------------------------------------
 1 | import { Controls, Canvas, Meta, Markdown } from "@storybook/addon-docs"
 2 | import { KlevuAutoDocs } from "../../../.storybook/blocks/KlevuAutoDocs"
 3 | import * as Stories from "./klevu-search-field.stories"
 4 | 
 5 | 
 6 | 
 7 | # Klevu-search-field
 8 | 
 9 | {Stories.description}
10 | 
11 | 
12 | 
13 | 
14 | 
15 | 
16 | 


--------------------------------------------------------------------------------
/packages/klevu-ui/src/components/klevu-search-landing-page/klevu-search-landing-page.css:
--------------------------------------------------------------------------------
 1 | :host {
 2 |   display: block;
 3 | }
 4 | 
 5 | .header {
 6 |   width: 100%;
 7 | }
 8 | .header .info {
 9 |   display: flex;
10 |   justify-content: space-between;
11 |   width: 100%;
12 |   align-items: center;
13 | }
14 | 
15 | .footer {
16 |   display: flex;
17 |   justify-content: center;
18 | }
19 | 
20 | @media (max-width: 511px) {
21 |   .header {
22 |     display: block;
23 |   }
24 | }
25 | 
26 | .noResultsMessage {
27 |   text-align: center;
28 | }
29 | 
30 | .noResultsBannerImage {
31 |   max-width: 100%;
32 |   margin-top: var(--klevu-spacing-04);
33 | }
34 | 


--------------------------------------------------------------------------------
/packages/klevu-ui/src/components/klevu-search-landing-page/klevu-search-landing-page.mdx:
--------------------------------------------------------------------------------
 1 | import { Controls, Canvas, Meta, Markdown } from "@storybook/addon-docs"
 2 | import { KlevuAutoDocs } from "../../../.storybook/blocks/KlevuAutoDocs"
 3 | import * as Stories from "./klevu-search-landing-page.stories"
 4 | 
 5 | 
 6 | 
 7 | # Klevu-search-landing-page
 8 | 
 9 | {Stories.description}
10 | 
11 | 
12 | 
13 | 
14 | 
15 | 
16 | 


--------------------------------------------------------------------------------
/packages/klevu-ui/src/components/klevu-search-landing-page/test/klevu-search-landing-page.e2e.ts:
--------------------------------------------------------------------------------
 1 | import { newE2EPage } from "@stencil/core/testing"
 2 | 
 3 | describe("klevu-search-landing-page", () => {
 4 |   it("renders", async () => {
 5 |     const page = await newE2EPage()
 6 |     await page.setContent(
 7 |       ``
12 |     )
13 | 
14 |     const element = await page.find("klevu-search-landing-page")
15 |     expect(element).toHaveClass("hydrated")
16 |   })
17 | })
18 | 


--------------------------------------------------------------------------------
/packages/klevu-ui/src/components/klevu-slider/klevu-slider.mdx:
--------------------------------------------------------------------------------
 1 | import { Controls, Canvas, Meta, Markdown } from "@storybook/addon-docs"
 2 | import { KlevuAutoDocs } from "../../../.storybook/blocks/KlevuAutoDocs"
 3 | import * as Stories from "./klevu-slider.stories"
 4 | 
 5 | 
 6 | 
 7 | # Klevu-slider
 8 | 
 9 | {Stories.description}
10 | 
11 | 
12 | 
13 | 
14 | 
15 | 
16 | 


--------------------------------------------------------------------------------
/packages/klevu-ui/src/components/klevu-slider/test/klevu-slider.e2e.ts:
--------------------------------------------------------------------------------
 1 | import { newE2EPage } from "@stencil/core/testing"
 2 | 
 3 | describe("klevu-slider", () => {
 4 |   it("renders", async () => {
 5 |     const page = await newE2EPage()
 6 |     await page.setContent('')
 7 | 
 8 |     const element = await page.find("klevu-slider")
 9 |     expect(element).toHaveClass("hydrated")
10 |   })
11 | })
12 | 


--------------------------------------------------------------------------------
/packages/klevu-ui/src/components/klevu-slides/klevu-slides.mdx:
--------------------------------------------------------------------------------
 1 | import { Canvas, Meta, Controls, Markdown } from "@storybook/addon-docs"
 2 | import { KlevuAutoDocs } from "../../../.storybook/blocks/KlevuAutoDocs"
 3 | import * as Stories from "./klevu-slides.stories"
 4 | 
 5 | 
 6 | 
 7 | # Klevu-slides
 8 | 
 9 | {Stories.description}
10 | 
11 | 
12 | 
13 | 
14 | 
15 | 
16 | 


--------------------------------------------------------------------------------
/packages/klevu-ui/src/components/klevu-slides/styled-slides.mdx:
--------------------------------------------------------------------------------
 1 | import { Canvas, Meta, Controls, Markdown } from "@storybook/addon-docs"
 2 | import { KlevuAutoDocs } from "../../../.storybook/blocks/KlevuAutoDocs"
 3 | import { KlevuCSSEditor } from "../../../.storybook/blocks/KlevuCSSEditor"
 4 | import * as Stories from "./klevu-slides.stories"
 5 | 
 6 | 
 7 | 
 8 | ## Styled Slides
 9 | 
10 | 
11 | 
12 | 
13 | 
14 | 
15 | 


--------------------------------------------------------------------------------
/packages/klevu-ui/src/components/klevu-slides/test/klevu-slides.e2e.ts:
--------------------------------------------------------------------------------
 1 | import { newE2EPage } from "@stencil/core/testing"
 2 | 
 3 | describe("klevu-slides", () => {
 4 |   it("renders", async () => {
 5 |     const page = await newE2EPage()
 6 |     await page.setContent("")
 7 | 
 8 |     const element = await page.find("klevu-slides")
 9 |     expect(element).toHaveClass("hydrated")
10 |   })
11 | })
12 | 


--------------------------------------------------------------------------------
/packages/klevu-ui/src/components/klevu-sort/klevu-sort.css:
--------------------------------------------------------------------------------
1 | :host {
2 |   display: block;
3 | }
4 | 


--------------------------------------------------------------------------------
/packages/klevu-ui/src/components/klevu-sort/klevu-sort.mdx:
--------------------------------------------------------------------------------
 1 | import { Controls, Canvas, Meta, Markdown } from "@storybook/addon-docs"
 2 | import { KlevuAutoDocs } from "../../../.storybook/blocks/KlevuAutoDocs"
 3 | import * as Stories from "./klevu-sort.stories"
 4 | 
 5 | 
 6 | 
 7 | # Klevu-sort
 8 | 
 9 | {Stories.description}
10 | 
11 | 
12 | 
13 | 
14 | 
15 | 
16 | 


--------------------------------------------------------------------------------
/packages/klevu-ui/src/components/klevu-sort/test/klevu-sort.e2e.ts:
--------------------------------------------------------------------------------
 1 | import { newE2EPage } from "@stencil/core/testing"
 2 | 
 3 | describe("klevu-sort", () => {
 4 |   it("renders", async () => {
 5 |     const page = await newE2EPage()
 6 |     await page.setContent("")
 7 | 
 8 |     const element = await page.find("klevu-sort")
 9 |     expect(element).toHaveClass("hydrated")
10 |   })
11 | })
12 | 


--------------------------------------------------------------------------------
/packages/klevu-ui/src/components/klevu-suggestions-list/klevu-suggestions-list.css:
--------------------------------------------------------------------------------
 1 | :host {
 2 |   display: block;
 3 | }
 4 | 
 5 | klevu-typography.caption {
 6 |   display: block;
 7 |   margin-bottom: var(--klevu-spacing-04);
 8 | }
 9 | 
10 | klevu-list:hover {
11 |   cursor: pointer;
12 |   background: var(--klevu-color-neutral-2);
13 | }
14 | 


--------------------------------------------------------------------------------
/packages/klevu-ui/src/components/klevu-suggestions-list/klevu-suggestions-list.mdx:
--------------------------------------------------------------------------------
 1 | import { Controls, Canvas, Meta, Markdown } from "@storybook/addon-docs"
 2 | import { KlevuAutoDocs } from "../../../.storybook/blocks/KlevuAutoDocs"
 3 | import * as Stories from "./klevu-suggestions-list.stories"
 4 | 
 5 | 
 6 | 
 7 | # Klevu-suggestions-list
 8 | 
 9 | {Stories.description}
10 | 
11 | 
12 | 
13 | 
14 | 
15 | 
16 | 


--------------------------------------------------------------------------------
/packages/klevu-ui/src/components/klevu-suggestions-list/test/klevu-suggestions-list.e2e.ts:
--------------------------------------------------------------------------------
 1 | import { newE2EPage } from "@stencil/core/testing"
 2 | 
 3 | describe("klevu-suggestions-list", () => {
 4 |   it("renders", async () => {
 5 |     const page = await newE2EPage()
 6 |     await page.setContent("")
 7 | 
 8 |     const element = await page.find("klevu-suggestions-list")
 9 |     expect(element).toHaveClass("hydrated")
10 |   })
11 | })
12 | 


--------------------------------------------------------------------------------
/packages/klevu-ui/src/components/klevu-tab/klevu-tab.mdx:
--------------------------------------------------------------------------------
 1 | import { Controls, Canvas, Meta, Markdown } from "@storybook/addon-docs"
 2 | import { KlevuAutoDocs } from "../../../.storybook/blocks/KlevuAutoDocs"
 3 | import * as Stories from "./klevu-tab.stories"
 4 | 
 5 | 
 6 | 
 7 | # Klevu-tab
 8 | 
 9 | {Stories.description}
10 | 
11 | 
12 | 
13 | 
14 | 
15 | 
16 | 


--------------------------------------------------------------------------------
/packages/klevu-ui/src/components/klevu-tab/styled-tab.mdx:
--------------------------------------------------------------------------------
 1 | import { Controls, Canvas, Meta, Markdown } from "@storybook/addon-docs"
 2 | import { KlevuAutoDocs } from "../../../.storybook/blocks/KlevuAutoDocs"
 3 | import { KlevuCSSEditor } from "../../../.storybook/blocks/KlevuCSSEditor"
 4 | import * as Stories from "./klevu-tab.stories"
 5 | 
 6 | 
 7 | 
 8 | ## Styled Tab
 9 | 
10 | 
11 | 
12 | Modify example above with following:
13 | 
14 | 
15 | 
16 | 
17 | 


--------------------------------------------------------------------------------
/packages/klevu-ui/src/components/klevu-textfield/form-fields.mdx:
--------------------------------------------------------------------------------
 1 | import { Controls, Canvas, Meta, Markdown } from "@storybook/addon-docs"
 2 | import { KlevuAutoDocs } from "../../../.storybook/blocks/KlevuAutoDocs"
 3 | import * as Stories from "./klevu-textfield.stories"
 4 | 
 5 | 
 6 | 
 7 | ## Textfield with other elements
 8 | 
 9 | 
10 | 


--------------------------------------------------------------------------------
/packages/klevu-ui/src/components/klevu-textfield/klevu-textfield.mdx:
--------------------------------------------------------------------------------
 1 | import { Controls, Canvas, Meta, Markdown } from "@storybook/addon-docs"
 2 | import { KlevuAutoDocs } from "../../../.storybook/blocks/KlevuAutoDocs"
 3 | import * as Stories from "./klevu-textfield.stories"
 4 | 
 5 | 
 6 | 
 7 | # Klevu-textfield
 8 | 
 9 | {Stories.description}
10 | 
11 | 
12 | 
13 | 
14 | 
15 | 
16 | 


--------------------------------------------------------------------------------
/packages/klevu-ui/src/components/klevu-textfield/styled-textfield.mdx:
--------------------------------------------------------------------------------
 1 | import { Controls, Canvas, Meta, Markdown } from "@storybook/addon-docs"
 2 | import { KlevuAutoDocs } from "../../../.storybook/blocks/KlevuAutoDocs"
 3 | import { KlevuCSSEditor } from "../../../.storybook/blocks/KlevuCSSEditor"
 4 | import * as Stories from "./klevu-textfield.stories"
 5 | 
 6 | 
 7 | 
 8 | ## Styled text field
 9 | 
10 | 
11 | 
12 | Modify example above with following:
13 | 
14 | 
15 | 
16 | 
17 | 


--------------------------------------------------------------------------------
/packages/klevu-ui/src/components/klevu-textfield/test/klevu-textfield.e2e.ts:
--------------------------------------------------------------------------------
 1 | import { newE2EPage } from "@stencil/core/testing"
 2 | 
 3 | describe("klevu-textfield", () => {
 4 |   it("renders", async () => {
 5 |     const page = await newE2EPage()
 6 |     await page.setContent("")
 7 | 
 8 |     const element = await page.find("klevu-textfield")
 9 |     expect(element).toHaveClass("hydrated")
10 |   })
11 | })
12 | 


--------------------------------------------------------------------------------
/packages/klevu-ui/src/components/klevu-typography/klevu-typography.mdx:
--------------------------------------------------------------------------------
 1 | import { Controls, Canvas, Meta, Markdown } from "@storybook/addon-docs"
 2 | import { KlevuAutoDocs } from "../../../.storybook/blocks/KlevuAutoDocs"
 3 | import * as Stories from "./klevu-typography.stories"
 4 | 
 5 | 
 6 | 
 7 | # Klevu-typography
 8 | 
 9 | {Stories.description}
10 | 
11 | 
12 | 
13 | 
14 | 
15 | 
16 | 


--------------------------------------------------------------------------------
/packages/klevu-ui/src/components/klevu-typography/test/klevu-typography.e2e.ts:
--------------------------------------------------------------------------------
 1 | import { newE2EPage } from "@stencil/core/testing"
 2 | 
 3 | describe("klevu-typography", () => {
 4 |   it("renders", async () => {
 5 |     const page = await newE2EPage()
 6 |     await page.setContent("")
 7 | 
 8 |     const element = await page.find("klevu-typography")
 9 |     expect(element).toHaveClass("hydrated")
10 |   })
11 | })
12 | 


--------------------------------------------------------------------------------
/packages/klevu-ui/src/components/klevu-util-infinite-scroll/test/klevu-util-infinite-scroll.spec.tsx:
--------------------------------------------------------------------------------
 1 | import { newSpecPage } from "@stencil/core/testing"
 2 | import { KlevuUtilInfiniteScroll } from "../klevu-util-infinite-scroll"
 3 | 
 4 | describe("klevu-util-infinite-scroll", () => {
 5 |   it("renders with div", async () => {
 6 |     const page = await newSpecPage({
 7 |       components: [KlevuUtilInfiniteScroll],
 8 |       html: ``,
 9 |     })
10 |     if (page.root?.shadowRoot) {
11 |       expect(page.root.shadowRoot.innerHTML).toEqual(`
`)
12 |     }
13 |   })
14 | })
15 | 


--------------------------------------------------------------------------------
/packages/klevu-ui/src/components/klevu-util-portal/klevu-util-portal.css:
--------------------------------------------------------------------------------
1 | :host {
2 |   display: block;
3 | }
4 | 


--------------------------------------------------------------------------------
/packages/klevu-ui/src/components/klevu-util-portal/klevu-util-portal.mdx:
--------------------------------------------------------------------------------
 1 | import { Controls, Canvas, Meta, Markdown } from "@storybook/addon-docs"
 2 | import { KlevuAutoDocs } from "../../../.storybook/blocks/KlevuAutoDocs"
 3 | import * as Stories from "./klevu-util-portal.stories"
 4 | 
 5 | 
 6 | 
 7 | # Klevu-util-portal
 8 | 
 9 | {Stories.description}
10 | 
11 | 
12 | 
13 | 
14 | 
15 | 
16 | 


--------------------------------------------------------------------------------
/packages/klevu-ui/src/components/klevu-util-scrollbars/klevu-util-scrollbars.mdx:
--------------------------------------------------------------------------------
 1 | import { Controls, Canvas, Meta, Markdown } from "@storybook/addon-docs"
 2 | import { KlevuAutoDocs } from "../../../.storybook/blocks/KlevuAutoDocs"
 3 | import * as Stories from "./klevu-util-scrollbars.stories"
 4 | 
 5 | 
 6 | 
 7 | # Klevu-util-scrollbars
 8 | 
 9 | {Stories.description}
10 | 
11 | 
12 | 
13 | 
14 | 
15 | 
16 | 


--------------------------------------------------------------------------------
/packages/klevu-ui/src/components/klevu-util-ssr-provider/klevu-util-ssr-provider.mdx:
--------------------------------------------------------------------------------
 1 | import { Controls, Canvas, Meta, Markdown } from "@storybook/addon-docs"
 2 | import * as Stories from "./klevu-util-ssr-provider.stories"
 3 | 
 4 | 
 5 | 
 6 | # Klevu-util-ssr-provider
 7 | 
 8 | {Stories.description}
 9 | 
10 | SSR Provider example will transform components data to a string that set to attribute of the this utility component.
11 | 
12 | When a client side reads this provider and finds the attribute, it will transform the string to a JSON object and pass it to the components.
13 | 


--------------------------------------------------------------------------------
/packages/klevu-ui/src/globals.d.ts:
--------------------------------------------------------------------------------
1 | declare module "*.md"
2 | 


--------------------------------------------------------------------------------
/packages/klevu-ui/src/index.html:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 |   
 4 |     
 5 |     
 6 |     Stencil Component Starter
 7 | 
 8 |     
 9 |     
10 |   
11 |   
12 |     
13 |   
14 | 
15 | 


--------------------------------------------------------------------------------
/packages/klevu-ui/src/index.ts:
--------------------------------------------------------------------------------
1 | export { Components, JSX } from "./components"
2 | export type { KlevuUIGlobalSettings } from "./utils/utils"
3 | 


--------------------------------------------------------------------------------
/packages/klevu-ui/src/utils/getKMCSettings.ts:
--------------------------------------------------------------------------------
1 | export function getKMCSettings() {
2 |   return window.klevu_ui_kmc_settings
3 | }
4 | 


--------------------------------------------------------------------------------
/packages/klevu-ui/src/utils/partsExports.ts:
--------------------------------------------------------------------------------
1 | import { parts } from "./parts"
2 | 
3 | export function partsExports(tagName: keyof typeof parts) {
4 |   const subParts = Object.values(parts[tagName].exportedcomponents).flat()
5 |   return [...parts[tagName].local, ...subParts].join(",")
6 | }
7 | 


--------------------------------------------------------------------------------
/packages/klevu-ui/src/utils/stringConcat.ts:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Used to replace any amount of %s tokens with array of strings to concatenated string.
 3 |  * `hello %s %s %s` with values ['1', 'world', '2'] will lead to `hello 1 world 2`.
 4 |  *
 5 |  * If there isn't enough array values then %s will be left to string.
 6 |  *
 7 |  * @param string
 8 |  * @param values
 9 |  * @returns
10 |  */
11 | export function stringConcat(string: string, values: string[]) {
12 |   let copy = string
13 |   for (const v of values) {
14 |     copy = copy.replace("%s", v)
15 |   }
16 |   return copy
17 | }
18 | 


--------------------------------------------------------------------------------
/packages/klevu-ui/storybookAddons/constants.ts:
--------------------------------------------------------------------------------
1 | export const ADDON_ID = "klevu/settings"
2 | export const TOOL_ID = `${ADDON_ID}/tool`
3 | 
4 | export const API_KEY = "klevu-api-key"
5 | export const API_URL = "klevu-api-url"
6 | 


--------------------------------------------------------------------------------
/packages/klevu-ui/storybookAddons/register.ts:
--------------------------------------------------------------------------------
 1 | import React from "react"
 2 | import { addons, types } from "@storybook/addons"
 3 | 
 4 | import { ADDON_ID } from "./constants"
 5 | import { Tool } from "./klevuSettings"
 6 | 
 7 | addons.register(ADDON_ID, () => {
 8 |   addons.add(ADDON_ID, {
 9 |     title: "Outline",
10 |     type: types.TOOL,
11 |     match: ({ viewMode }) => !!(viewMode && viewMode.match(/^(story|docs)$/)),
12 |     render: Tool,
13 |   })
14 | })
15 | 


--------------------------------------------------------------------------------
/packages/klevu-ui/storybookAssets/basic-category-page-vanillajs.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/klevultd/frontend-sdk/ea15c0290d2a3e86d6e6dab40bd3f406bc1c111f/packages/klevu-ui/storybookAssets/basic-category-page-vanillajs.png


--------------------------------------------------------------------------------
/packages/klevu-ui/storybookAssets/basic-category-page.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/klevultd/frontend-sdk/ea15c0290d2a3e86d6e6dab40bd3f406bc1c111f/packages/klevu-ui/storybookAssets/basic-category-page.png


--------------------------------------------------------------------------------
/packages/klevu-ui/storybookAssets/basic-search-results-vanillajs.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/klevultd/frontend-sdk/ea15c0290d2a3e86d6e6dab40bd3f406bc1c111f/packages/klevu-ui/storybookAssets/basic-search-results-vanillajs.png


--------------------------------------------------------------------------------
/packages/klevu-ui/storybookAssets/basic-search-results.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/klevultd/frontend-sdk/ea15c0290d2a3e86d6e6dab40bd3f406bc1c111f/packages/klevu-ui/storybookAssets/basic-search-results.png


--------------------------------------------------------------------------------
/packages/klevu-ui/storybookAssets/checkbox_args_example.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/klevultd/frontend-sdk/ea15c0290d2a3e86d6e6dab40bd3f406bc1c111f/packages/klevu-ui/storybookAssets/checkbox_args_example.jpg


--------------------------------------------------------------------------------
/packages/klevu-ui/storybookAssets/css-styled-category-page-vanillajs.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/klevultd/frontend-sdk/ea15c0290d2a3e86d6e6dab40bd3f406bc1c111f/packages/klevu-ui/storybookAssets/css-styled-category-page-vanillajs.png


--------------------------------------------------------------------------------
/packages/klevu-ui/storybookAssets/css-styled-category-page.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/klevultd/frontend-sdk/ea15c0290d2a3e86d6e6dab40bd3f406bc1c111f/packages/klevu-ui/storybookAssets/css-styled-category-page.png


--------------------------------------------------------------------------------
/packages/klevu-ui/storybookAssets/css-styled-search-results-vanillajs.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/klevultd/frontend-sdk/ea15c0290d2a3e86d6e6dab40bd3f406bc1c111f/packages/klevu-ui/storybookAssets/css-styled-search-results-vanillajs.png


--------------------------------------------------------------------------------
/packages/klevu-ui/storybookAssets/css-styled-search-results.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/klevultd/frontend-sdk/ea15c0290d2a3e86d6e6dab40bd3f406bc1c111f/packages/klevu-ui/storybookAssets/css-styled-search-results.png


--------------------------------------------------------------------------------
/packages/klevu-ui/storybookAssets/custom-brand-attribute-category-page-vanillajs.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/klevultd/frontend-sdk/ea15c0290d2a3e86d6e6dab40bd3f406bc1c111f/packages/klevu-ui/storybookAssets/custom-brand-attribute-category-page-vanillajs.png


--------------------------------------------------------------------------------
/packages/klevu-ui/storybookAssets/custom-brand-attribute-category-page.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/klevultd/frontend-sdk/ea15c0290d2a3e86d6e6dab40bd3f406bc1c111f/packages/klevu-ui/storybookAssets/custom-brand-attribute-category-page.png


--------------------------------------------------------------------------------
/packages/klevu-ui/storybookAssets/custom-brand-attribute-search-results-vanillajs.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/klevultd/frontend-sdk/ea15c0290d2a3e86d6e6dab40bd3f406bc1c111f/packages/klevu-ui/storybookAssets/custom-brand-attribute-search-results-vanillajs.png


--------------------------------------------------------------------------------
/packages/klevu-ui/storybookAssets/custom-brand-attribute-search-results.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/klevultd/frontend-sdk/ea15c0290d2a3e86d6e6dab40bd3f406bc1c111f/packages/klevu-ui/storybookAssets/custom-brand-attribute-search-results.png


--------------------------------------------------------------------------------
/packages/klevu-ui/storybookAssets/slot-customized-category-page-vanillajs.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/klevultd/frontend-sdk/ea15c0290d2a3e86d6e6dab40bd3f406bc1c111f/packages/klevu-ui/storybookAssets/slot-customized-category-page-vanillajs.png


--------------------------------------------------------------------------------
/packages/klevu-ui/storybookAssets/slot-customized-category-page.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/klevultd/frontend-sdk/ea15c0290d2a3e86d6e6dab40bd3f406bc1c111f/packages/klevu-ui/storybookAssets/slot-customized-category-page.png


--------------------------------------------------------------------------------
/packages/klevu-ui/storybookAssets/slot-customized-search-results-vanillajs.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/klevultd/frontend-sdk/ea15c0290d2a3e86d6e6dab40bd3f406bc1c111f/packages/klevu-ui/storybookAssets/slot-customized-search-results-vanillajs.png


--------------------------------------------------------------------------------
/packages/klevu-ui/storybookAssets/slot-customized-search-results.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/klevultd/frontend-sdk/ea15c0290d2a3e86d6e6dab40bd3f406bc1c111f/packages/klevu-ui/storybookAssets/slot-customized-search-results.png


--------------------------------------------------------------------------------
/packages/klevu-ui/storybookAssets/web-components.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/klevultd/frontend-sdk/ea15c0290d2a3e86d6e6dab40bd3f406bc1c111f/packages/klevu-ui/storybookAssets/web-components.png


--------------------------------------------------------------------------------
/packages/klevu-ui/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "strict": true,
 4 |     "allowSyntheticDefaultImports": true,
 5 |     "allowUnreachableCode": false,
 6 |     "declaration": false,
 7 |     "experimentalDecorators": true,
 8 |     "lib": ["dom", "es2017"],
 9 |     "moduleResolution": "node",
10 |     "module": "esnext",
11 |     "target": "es2017",
12 |     "noUnusedLocals": false,
13 |     "noUnusedParameters": false,
14 |     "jsx": "react",
15 |     "jsxFactory": "h",
16 |     "baseUrl": ".",
17 |     "paths": {},
18 |     "resolveJsonModule": true
19 |   },
20 |   "include": ["src"]
21 | }
22 | 


--------------------------------------------------------------------------------
/utils/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "utils",
 3 |   "version": "1.0.0",
 4 |   "description": "Repository utilities",
 5 |   "type": "module",
 6 |   "author": "Klevu",
 7 |   "license": "ISC",
 8 |   "dependencies": {
 9 |     "edit-package-json": "^0.7.10",
10 |     "inquirer": "^9.1.4",
11 |     "shelljs": "^0.8.5",
12 |     "yargs": "^17.6.2"
13 |   }
14 | }
15 | 


--------------------------------------------------------------------------------