feat(plugins): introduce Tags plugin

[sarahdayan]

The Autocomplete Tags Plugin allows you to apply and manage a list of tags in your autocomplete.

Tagging is a generic way of representing the concept of refinements for a wide variety of use cases. It ranges from filtering items to navigating in sections, indicating a special state, etc. Users can use them to simply indicate something visually, or derive a new state from them.

Use cases

• Applying refinements to their current search
  • Example: pick tags from a source of facet filters (e.g., languages) and derive Algolia filters from them
  • Example: pick tags from refinements outside Autocomplete (e.g., categories dropdown next to the searchbox on Amazon)
  • Example: apply InstantSearch refinements to Autocomplete directly from the uiState, and show them as tags in the Autocomplete UI
• Scoping your search
  • Example: use Autocomplete as a navigation device to browse nested hierarchies, and use tags as a way to represent the current navigation step (e.g., Pokeview)
• Indicating a state
  • Example: indicating a state or mode that makes your autocomplete behave differently (e.g., power user mode)

---

The sandbox and tests are in separate PRs:

• Sandbox
• Tests

I've also set up a session with @Shipow this week to take care of the default rendering.

[codesandbox-ci]

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 08b761d:

Sandbox	Source
@algolia/autocomplete-example-github-repositories-custom-plugin	Configuration
@algolia/autocomplete-example-instantsearch	Configuration
@algolia/autocomplete-example-playground	Configuration
@algolia/autocomplete-example-preview-panel-in-modal	Configuration
@algolia/autocomplete-example-react-renderer	Configuration
@algolia/autocomplete-example-starter-algolia	Configuration
@algolia/autocomplete-example-starter	Configuration
@algolia/autocomplete-example-reshape	Configuration
@algolia/autocomplete-example-vue	Configuration
@algolia/autocomplete-example-tags-with-hits	Configuration
@algolia/autocomplete-example-tags-in-searchbox	Configuration

[sarahdayan]

I've enabled the UMD build on prepare so we can import the CodeSandbox artifact as UMD in environments that don't support ESM in Node modules (e.g., Next.js) until the plugin is live. We can revert 2499a5c once we release.

[sarahdayan]

Reverted the UMD commit now that CodeSandbox has generated one artifact for it.

[francoischalifour]

In the plugins that extend the AutocompleteContext, we extend the type this way. We could do the same here? (not entirely related but sometimes I think this strategy doesn't work, and I'm not sure why)

[sarahdayan]

In the plugins that extend the AutocompleteContext, we extend the type this way. We could do the same here? (not entirely related but sometimes I think this strategy doesn't work, and I'm not sure why)

Yes, I tested it with one of the examples and it works 👍 See d434332
I also updated types because the generic type of Tag is optional, so there's no reason to pass them if you don't extend it.

[sarahdayan]

Globally extending the context has repercussions on the entire project because it applies globally, so an extended context in one package becomes expected in others. Possibly this would cause type issues for users who have several instances of Autocompletre with different plugins.

Let's solve this problem in another PR.