Skip to content
New issue

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

Sign up for GitHub

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

Already on GitHub? Sign in to your account

Jump to bottom

feat(react-instantsearch): add Carousel layout component #6320

Closed
wants to merge 11 commits into from
Closed

feat(react-instantsearch): add Carousel layout component #6320

wants to merge 11 commits into from

Conversation

shaejaz
Copy link
Contributor

@shaejaz shaejaz commented Aug 9, 2024

This adds the the Carousel layout component and enables the layoutComponent prop in Recommend widgets. React getting started example has been update to use Carousel as well.

image

https://algolia.atlassian.net/browse/FX-2819

TODO: fix Recommend widget prop types

@shaejaz shaejaz requested review from sarahdayan and Haroenv August 9, 2024 08:32
@codesandbox-ci CodeSandbox CI
Copy link

codesandbox-ci bot commented Aug 9, 2024 •
edited
Loading

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit cc33670:

Sandbox Source
example-instantsearch-getting-started Configuration
example-react-instantsearch-getting-started Configuration
example-react-instantsearch-next-app-dir-example Configuration
example-vue-instantsearch-getting-started Configuration

@sarahdayan
Copy link
Member

I think the typing issue you have with translations comes from the fact that you're passing the widget translations (e.g., translations for FrequentlyBoughtTogether) to Carousel, while Carousel should take its own translations.

Haroenv
Haroenv reviewed Aug 9, 2024
View reviewed changes
Copy link
Contributor

@Haroenv Haroenv left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nice!

packages/react-instantsearch/src/templates/Carousel.tsx
@@ -0,0 +1,36 @@
import {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

should this folder be components?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not sure. In instantsearch.js it's in templates although that is stated in the RFC (which is not the case for the React counterpart). Let me know if components is better for React!

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Agree with @Haroenv, we have different APIs in InstantSearch.js (templates object) and React InstantSearch (individual component props) for customizing the UI so it makes sense to have different names.

@shaejaz
Copy link
Contributor Author

shaejaz commented Aug 9, 2024

Closing in favour of #6321

@shaejaz shaejaz closed this Aug 9, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@sarahdayan sarahdayan sarahdayan left review comments

@Haroenv Haroenv Haroenv left review comments

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
3 participants
@shaejaz @sarahdayan @Haroenv