chore(examples): add Nova widgets showcase

[FabienMotte]

Summary

Add the Nova InstantSearch widgets showcase example app to visually demonstrate every widget styled with the new Nova theme.

• Add a new examples/js/showcase Preact app with Tailwind CSS and Vite that renders all InstantSearch.js widgets in a structured layout with a widget switcher UI
• Include two experiences: InstantSearch (full search interface with facets, hits, pagination, etc.) and GeoSearch (map-based search with Google Maps)
• Support dark mode toggle and ?flavor=js|react|vue URL parameter for contextual docs links
• Showcase 25+ widgets: searchBox, autocomplete, voiceSearch, hits, infiniteHits, pagination, refinementList, hierarchicalMenu, menu, menuSelect, numericMenu, rangeInput, rangeSlider, ratingMenu, toggleRefinement, breadcrumb, stats, sortBy, relevantSort, clearRefinements, currentRefinements, hitsPerPage, poweredBy, panel, configure, dynamicWidgets, and geoSearch
• Each widget card links to the relevant Algolia documentation, scoped to the active flavor

preview.mov

Follow-up PRs

New experiences will be added in follow-up PRs:

• Recommend (frequently bought together, related products, trending items, looking similar)
• AI widgets (chat, prompt suggestions in autocomplete, AI mode in autocomplete)

Stacked on top of #6949

FX-3520

[codacy-production]

Up to standards ✅

🟢 Issues 0 issues

Results:
0 new issues

View in Codacy

🟢 Metrics 93 complexity · 4 duplication

Metric	Results
Complexity	93
Duplication	4

View in Codacy

_{TIP This summary will be updated as you push new changes. Give us feedback}

[pkg-pr-new]

More templates

• example-instantsearch-getting-started
• example-react-instantsearch-getting-started
• example-react-instantsearch-next-app-dir-example
• example-react-instantsearch-next-routing-example
• example-vue-instantsearch-getting-started

algoliasearch-helper

npm i https://pkg.pr.new/algolia/instantsearch/algoliasearch-helper@6951

instantsearch-ui-components

npm i https://pkg.pr.new/algolia/instantsearch/instantsearch-ui-components@6951

instantsearch.css

npm i https://pkg.pr.new/algolia/instantsearch/instantsearch.css@6951

instantsearch.js

npm i https://pkg.pr.new/algolia/instantsearch/instantsearch.js@6951

react-instantsearch

npm i https://pkg.pr.new/algolia/instantsearch/react-instantsearch@6951

react-instantsearch-core

npm i https://pkg.pr.new/algolia/instantsearch/react-instantsearch-core@6951

react-instantsearch-nextjs

npm i https://pkg.pr.new/algolia/instantsearch/react-instantsearch-nextjs@6951

react-instantsearch-router-nextjs

npm i https://pkg.pr.new/algolia/instantsearch/react-instantsearch-router-nextjs@6951

vue-instantsearch

npm i https://pkg.pr.new/algolia/instantsearch/vue-instantsearch@6951

commit: aac8e49

[Haroenv]

seems like both PRs intend to introduce the nova theme, is that on purpose?

[FabienMotte]

seems like both PRs intend to introduce the nova theme, is that on purpose?

Fixed by updating the base branch

[Copilot]

Pull request overview

Adds a new InstantSearch.js widgets showcase example app (examples/js/showcase) to visually demo widgets styled with the Nova theme, including an InstantSearch experience and a GeoSearch (Google Maps) experience, plus dark mode and docs-link “flavor” support.

Changes:

• Introduce a new Preact + Vite + Tailwind example app that renders multiple widgets with a switcher UI.
• Add GeoSearch experience powered by Google Maps loader and InstantSearch GeoSearch widget.
• Update root TypeScript configs to exclude the new example from repo-wide TS builds, and update yarn.lock for the new dependencies.

Reviewed changes

Copilot reviewed 46 out of 49 changed files in this pull request and generated 7 comments.

Show a summary per file

File	Description
yarn.lock	Adds/updates dependencies required by the new showcase app (Preact, Tailwind, Maps loader, etc.).
tsconfig.v4.json	Excludes the new showcase example from TS v4-specific config.
tsconfig.json	Excludes the new showcase example from the root TS project build.
examples/js/showcase/vite.config.mjs	Vite config for the showcase app (Preact + Tailwind plugins, CJS support).
examples/js/showcase/tsconfig.json	TypeScript config scoped to the showcase app.
examples/js/showcase/index.html	App shell and early theme application via data-theme.
examples/js/showcase/package.json	Showcase app scripts and dependencies (InstantSearch, Preact, Tailwind, Google Maps loader, etc.).
examples/js/showcase/src/main.tsx	Bootstraps the app and imports Nova theme + app styles.
examples/js/showcase/src/style.css	Tailwind entry + global styles + widget-specific CSS (noUiSlider, CurrentRefinements empty state).
examples/js/showcase/src/App.tsx	Experience switcher UI + flavor context + color mode switcher.
examples/js/showcase/src/views/InstantSearchView.tsx	InstantSearch experience wiring and widget layout/switchers.
examples/js/showcase/src/views/GeoSearchView.tsx	GeoSearch experience wiring (configure + hits + map).
examples/js/showcase/src/context/flavor.ts	Flavor context for docs link routing.
examples/js/showcase/src/context/search.ts	Search instance context for widget mounting/removal.
examples/js/showcase/src/hooks/useWidget.ts	Hook to mount/unmount InstantSearch widgets against the shared search instance.
examples/js/showcase/src/hooks/useColorMode.ts	Color mode store + persistence and theme application via data-theme.
examples/js/showcase/src/env.d.ts	Vite env typing and window typing for Google Maps.
examples/js/showcase/src/components/WidgetSwitcher.tsx	Widget-card container with widget switching + docs links.
examples/js/showcase/src/components/SegmentedControl.tsx	Reusable segmented control used by the theme switcher.
examples/js/showcase/src/components/ColorModeSwitcher.tsx	UI for selecting system/light/dark mode.
examples/js/showcase/src/components/widgets/DynamicWidgets.tsx	Groups and toggles among multiple facet widgets.
examples/js/showcase/src/components/widgets/WidgetAutocomplete.tsx	Autocomplete widget showcase configuration.
examples/js/showcase/src/components/widgets/WidgetBreadcrumb.tsx	Breadcrumb widget showcase.
examples/js/showcase/src/components/widgets/WidgetClearRefinements.tsx	ClearRefinements widget showcase.
examples/js/showcase/src/components/widgets/WidgetConfigure.tsx	Configure widget showcase + visible params.
examples/js/showcase/src/components/widgets/WidgetCurrentRefinements.tsx	CurrentRefinements widget showcase.
examples/js/showcase/src/components/widgets/WidgetHits.tsx	Hits widget showcase with custom item template.
examples/js/showcase/src/components/widgets/WidgetInfiniteHits.tsx	InfiniteHits widget showcase with custom item template.
examples/js/showcase/src/components/widgets/WidgetPagination.tsx	Pagination widget showcase.
examples/js/showcase/src/components/widgets/WidgetHitsPerPage.tsx	HitsPerPage widget showcase.
examples/js/showcase/src/components/widgets/WidgetPoweredBy.tsx	PoweredBy widget showcase.
examples/js/showcase/src/components/widgets/WidgetRelevantSort.tsx	RelevantSort widget showcase with custom templates.
examples/js/showcase/src/components/widgets/WidgetSearchBox.tsx	SearchBox widget showcase (with configurable placeholder).
examples/js/showcase/src/components/widgets/WidgetSortBy.tsx	SortBy widget showcase configuration.
examples/js/showcase/src/components/widgets/WidgetStats.tsx	Stats widget showcase with custom text template.
examples/js/showcase/src/components/widgets/WidgetVoiceSearch.tsx	VoiceSearch widget showcase.
examples/js/showcase/src/components/widgets/WidgetRefinementList.tsx	RefinementList widget showcase with label.
examples/js/showcase/src/components/widgets/WidgetHierarchicalMenu.tsx	HierarchicalMenu widget showcase with label.
examples/js/showcase/src/components/widgets/WidgetMenu.tsx	Menu widget showcase with label.
examples/js/showcase/src/components/widgets/WidgetMenuSelect.tsx	MenuSelect widget showcase with label.
examples/js/showcase/src/components/widgets/WidgetNumericMenu.tsx	NumericMenu widget showcase with label.
examples/js/showcase/src/components/widgets/WidgetRangeInput.tsx	RangeInput widget showcase with label.
examples/js/showcase/src/components/widgets/WidgetRangeSlider.tsx	Custom range slider built from connectRange + noUiSlider.
examples/js/showcase/src/components/widgets/WidgetRatingMenu.tsx	RatingMenu widget showcase.
examples/js/showcase/src/components/widgets/WidgetToggleRefinement.tsx	ToggleRefinement widget showcase with label template.
examples/js/showcase/src/components/widgets/WidgetPanel.tsx	Panel widget showcase wrapping a RefinementList.
examples/js/showcase/src/components/widgets/SearchBoxPoweredBy.tsx	Combined SearchBox + PoweredBy composition widget.
examples/js/showcase/src/components/widgets/WidgetAirportHits.tsx	Custom hits template for GeoSearch airport results.
examples/js/showcase/src/components/widgets/WidgetGeoSearch.tsx	GeoSearch widget + Google Maps loader integration + theme-aware map options.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.