chore(examples): add recommend view to showcase with nova styles

[FabienMotte]

Summary

Adds a RecommendView to the JS showcase wiring up the four recommend widgets (FrequentlyBoughtTogether, RelatedProducts, LookingSimilar, TrendingItems, TrendingFacets) and ships the nova styles needed to render them cleanly.

Stacked on top of #7044.

FX-3779

Includes:

• New RecommendView and Widget* wrappers in the showcase.
• widgets/_trending-facets.scss partial (chip layout for TrendingFacets — nova was the only theme without any TrendingFacets styles).
• Shared title rule in _nova-common.scss covering all 5 recommend widgets, mirroring the existing MenuSelect/HitsPerPage/SortBy precedent. Stops the default <h3> rendering as browser-bold inside each card.
• .ais-TrendingFacets-list added to the existing list reset block.

No hover state on the chip — items are inert by default; consumers wrapping items in <a>/<button> style hover themselves.

Result

In the showcase nova theme, the recommend section now renders with normalized titles across all 5 widgets, and TrendingFacets shows a wrapped row of subtle outlined pills.

[codacy-production]

Up to standards ✅

🟢 Issues 0 issues

Results:
0 new issues

View in Codacy

🟢 Metrics 9 complexity

Metric	Results
Complexity	9

View in Codacy

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

[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@7045

instantsearch-ui-components

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

instantsearch.css

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

instantsearch.js

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

react-instantsearch

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

react-instantsearch-core

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

react-instantsearch-nextjs

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

react-instantsearch-router-nextjs

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

vue-instantsearch

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

commit: b21b933

[Copilot]

Pull request overview

Adds a new “Recommend” experience to the JS showcase and ships the missing Nova theme styling needed for the Recommend widgets (notably TrendingFacets) to render consistently.

Changes:

• Added a new RecommendView in the showcase and wired it into the experiences list in App.tsx.
• Introduced showcase widget wrappers for Recommend widgets (FrequentlyBoughtTogether, RelatedProducts, LookingSimilar, TrendingItems, TrendingFacets).
• Added Nova theme styles for TrendingFacets, plus shared Nova title styling for all 5 recommend widgets, and reset support for .ais-TrendingFacets-list.

Reviewed changes

Copilot reviewed 11 out of 11 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
packages/instantsearch.css/src/widgets/_trending-facets.scss	Adds Nova styling for TrendingFacets list/chip layout.
packages/instantsearch.css/src/themes/reset.scss	Resets .ais-TrendingFacets-list like other widget list elements.
packages/instantsearch.css/src/themes/nova.scss	Includes the new trending-facets widget styles in Nova build.
packages/instantsearch.css/src/shared/_nova-common.scss	Normalizes recommend widget title styling in Nova.
examples/js/showcase/src/views/RecommendView.tsx	New Recommend view that starts an InstantSearch instance and renders recommend widgets via WidgetSwitcher.
examples/js/showcase/src/components/widgets/WidgetTrendingItems.tsx	Wrapper for trendingItems using carousel templates.
examples/js/showcase/src/components/widgets/WidgetTrendingFacets.tsx	Wrapper for trendingFacets with a simple item template.
examples/js/showcase/src/components/widgets/WidgetRelatedProducts.tsx	Wrapper for relatedProducts using carousel templates.
examples/js/showcase/src/components/widgets/WidgetLookingSimilar.tsx	Wrapper for lookingSimilar using carousel templates.
examples/js/showcase/src/components/widgets/WidgetFrequentlyBoughtTogether.tsx	Wrapper for frequentlyBoughtTogether using carousel templates.
examples/js/showcase/src/App.tsx	Adds a new “Recommend” experience entry with icon + view.

---

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