@constructor-io/constructorio-ui-autocomplete 1.28.2 → 1.29.0

package/README.md

@@ -1,67 +1,61 @@
-<div align="center">
-  <img src="https://constructor.com/hubfs/constructor-favicon-2024-1.svg" alt="constructor logo" title="constructor logo" width="220px" height="220px">
-  
-  <h1>Autocomplete UI</h1>
-
-  <p align="center" style="font-size: 1.2rem;">Lightweight, minimalistic, and fully customizable autocomplete component for fast, accessible, and flexible search experiences with <a href='https://constructor.com/solutions/search'>Constructor.io's autosuggest services</a>. 🚀</p>
-
-[**Read The Docs**](https://constructor-io.github.io/constructorio-ui-autocomplete/?path=/docs/autocomplete-component--docs)
-
-</div>
-
-<hr />
-<div align="center">
+# Autocomplete UI
+Lightweight, minimalistic, and fully customizable autocomplete component for fast, accessible, and flexible search experiences with [Constructor.io's autosuggest services](https://constructor.com/solutions/search)
 
 ![minzipped size](https://img.shields.io/bundlephobia/minzip/@constructor-io/constructorio-ui-autocomplete?color=green&style=flat-square)
 [![NPM Version](https://img.shields.io/npm/v/@constructor-io/constructorio-ui-autocomplete?style=flat-square)](https://www.npmjs.com/package/@constructor-io/constructorio-ui-autocomplete)
 [![MIT licensed](https://img.shields.io/badge/license-MIT-blue.svg?style=flat-square)](https://github.com/Constructor-io/constructorio-ui-autocomplete/blob/main/LICENSE)
 
-<img src="assets/autocomplete-ui-demonstration.gif" alt="Autocomplete UI demonstration" height="500">
+![Autocomplete UI Demonstration](assets/autocomplete-ui-demonstration.gif)
+
+## Documentation
+
+View the full component documentation and live examples in [Storybook](https://constructor-io.github.io/constructorio-ui-autocomplete/?path=/docs/autocomplete-component--docs)
 
-</div>
 
 <!-- START doctoc generated TOC please keep comment here to allow auto update -->
 <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
 ## 📌 Table of Contents
 
-- [Features](#features)
-- [React](#react)
-  - [⚡ Installation & Quick Start](#-installation--quick-start)
-- [Shopify](#shopify)
-  - [⚡ Installation & Quick Start](#-installation--quick-start-1)
-  - [🛍️ Shopify-Specific Defaults](#-shopify-specific-defaults)
+- [Overview](#overview)
+- [Installation & Quick Start](#installation--quick-start)
+  - [Basic Usage (React)](#basic-usage-react)
+- [Integration Modes](#integration-modes)
+  - [Shopify](#shopify)
+    - [Installation & Quick Start](#installation--quick-start-1)
+    - [🛍️ Shopify-Specific Defaults](#-shopify-specific-defaults)
 - [Bundle (Vanilla JS)](#bundle-vanilla-js)
-  - [⚡ Installation & Quick Start](#-installation--quick-start-2)
-- [💡 Code Examples](#-code-examples)
-- [🎨 Customization](#-customization)
-- [🚀 Advanced Features](#-advanced-features)
-- [🛠 Troubleshooting](#-troubleshooting)
-- [📖 API Reference](#-api-reference)
-- [🔗 Complementary Resources](#-complementary-resources)
-- [🤝 Contributing](#-contributing)
-- [📜 License](#-license)
+    - [Installation & Quick Start](#installation--quick-start-2)
+- [Customization](#customization)
+- [Troubleshooting](#troubleshooting)
+- [Complementary Resources](#complementary-resources)
+- [Contributing](#contributing)
+- [License](#license)
 
 <!-- END doctoc generated TOC please keep comment here to allow auto update -->
 
-## Features
+
+## Overview
+
+Autocomplete UI provides a lightweight and customizable autocomplete component. It enables developers to quickly implement fast, accessible search experiences with Constructor.io's autosuggest services.
 
 - 🔌 Easy Integration – Quickly integrate with your app as a plug-and-play React component
 - ⚡ Lightweight & Fast – Tiny bundle size, optimized for speed
-- 🎨 Customizable UI – With minmal styles, and supports for custom markup
-- ⌨️ Keyboard Navigation – Fully supports accessible keyboard naviagation
+- 🎨 Customizable UI – With minimal styles, and supports for custom markup
+- ⌨️ Keyboard Navigation – Fully supports accessible keyboard navigation
 - ♿ Accessible (a11y) – Built-in ARIA support for screen readers
 - 🛡 Written in TypeScript with type safety
 
+**[Explore full documentation →](https://constructor-io.github.io/constructorio-ui-autocomplete/?path=/docs/autocomplete-component--docs)**
 
-## React
+## Installation & Quick Start
 
-### ⚡ Installation & Quick Start
 Install the library
 
 ```sh
 npm i @constructor-io/constructorio-ui-autocomplete
 ```
 
+### Basic Usage (React)
 Import and use the `CioAutocomplete` component
 
 ```tsx
@@ -74,13 +68,17 @@ function YourComponent() {
       <CioAutocomplete
         apiKey="key_M57QS8SMPdLdLx4x"
         onSubmit={(e) => {console.log(e)}}
+      />
     </div>
   );
+}
 ```
 
-## Shopify
+## Integration Modes
 
-### ⚡ Installation & Quick Start
+### Shopify
+
+#### Installation & Quick Start
 
 The Constructor autocomplete component is available as part of the [Constructor.io Shopify App](https://apps.shopify.com/constructor-connect)
 
@@ -90,9 +88,9 @@ After installing the app, you can use the Constructor autocomplete component by
 
 For more in depth instructions, check out the [Shopify documentation](https://docs.constructor.com/docs/integrating-with-constructor-platform-connectors-frontend-connectors-shopify-ui).
 
-### 🛍️ Shopify-Specific Defaults
+#### 🛍️ Shopify-Specific Defaults
 
-When integrating with Shopify themes, you can use the `useShopifyDefaults` prop to enable automatic navigation handling:
+If you are using the Constructor autocomplete component inside Shopify without using the [Constructor.io Shopify App](https://apps.shopify.com/constructor-connect), you can use  the `useShopifyDefaults` prop to enable automatic navigation handling:
 
 ```tsx
 <CioAutocomplete
@@ -116,7 +114,7 @@ When integrating with Shopify themes, you can use the `useShopifyDefaults` prop
 ## Bundle (Vanilla JS)
 This is a framework agnostic method that can be used in any JavaScript project. The CioAutocomplete function provides a simple interface to inject an entire Autocomplete UI into the provided selector. In addition to Autocomplete component props, this function also accepts a selector and includeCSS.
 
-### ⚡ Installation & Quick Start
+#### Installation & Quick Start
 
 Install the library
 
@@ -138,17 +136,7 @@ CioAutocomplete({
 </script>
 ```
 
-## 💡 Code Examples
-
-Ready-to-use, copy-paste examples with explanations.
-
-- [Full Featured example](https://constructor-io.github.io/constructorio-ui-autocomplete/?path=/docs/autocomplete-component--docs#full-featured-and-styled-example)
-- [Render Search Suggestions](https://constructor-io.github.io/constructorio-ui-autocomplete/?path=/docs/autocomplete-component-sections--docs#render-search-suggestions)
-- [Render Product Suggestions](https://constructor-io.github.io/constructorio-ui-autocomplete/?path=/docs/autocomplete-component-sections--docs#render-suggested-products)
-
-🔹 For more examples check the [full examples](https://constructor-io.github.io/constructorio-ui-autocomplete/?path=/docs/autocomplete-component--docs)
-
-## 🎨 Customization
+## Customization
 
 CSS styles are not imported by default. Add this to your code to import basic styles
 
@@ -193,15 +181,7 @@ Then you can modify styles like so
 }
 ```
 
-## 🚀 Advanced Features
-
-- [Terms With Group Suggestions](https://constructor-io.github.io/constructorio-ui-autocomplete/?path=/docs/autocomplete-component-advanced-parameters--docs#terms-with-group-suggestions)
-- [Filtered Suggestions](https://constructor-io.github.io/constructorio-ui-autocomplete/?path=/docs/autocomplete-component-advanced-parameters--docs#filtered-suggestions)
-- [Terms With Images And Counts](https://constructor-io.github.io/constructorio-ui-autocomplete/?path=/docs/autocomplete-component-advanced-parameters--docs#terms-with-images-and-counts)
-
-🔹 For more advanced use cases check the [full documentation](https://constructor-io.github.io/constructorio-ui-autocomplete/?path=/docs/autocomplete-component-advanced-parameters--docs)
-
-## 🛠 Troubleshooting
+## Troubleshooting
 
 Common issues and solutions.
 
@@ -273,27 +253,22 @@ Common issues and solutions.
 
 💬 Need help? Join our [GitHub Discussions](https://github.com/Constructor-io/constructorio-ui-autocomplete/discussions)
 
-## 📖 API Reference
-
-<!-- TODO: reference the API docs from storybook -->
-- Full API docs: Click here
-
-## 🔗 Complementary Resources
+## Complementary Resources
 
 - 📖 Full Documentation: [Storybook](https://constructor-io.github.io/constructorio-ui-autocomplete/)
 - 📦 JS Client: [SDK Documentation](https://constructor-io.github.io/constructorio-client-javascript/module-autocomplete.html#~getAutocompleteResults)
 - 🛒 Shopify App: [App Store Link](https://apps.shopify.com/constructor-connect)
 - 🌐 Constructor's REST API: [Autocomplete](https://docs.constructor.com/reference/v1-autocomplete-get-autocomplete-results)
 
-## 🤝 Contributing
+## Contributing
 
 1. Fork the repo & create a new branch.
 2. Run `npm install` to install dependencies.
 3. After making the desired changes, run `npm run tests && npm run lint` locally.
 4. Submit a PR for review.
 
-## 📜 License
+## License
 
 [MIT License](./LICENSE)
 
-Copyright (c) 2022-present Constructor.io Corporation
+Copyright (c) 2022-present Constructor.io Corporation