diff --git a/readme/.gitkeep b/readme/.gitkeep deleted file mode 100644 index e69de29..0000000 diff --git a/readme/limitless-ui-react.md b/readme/limitless-ui-react.md index cc16846..0cf6bfc 100644 --- a/readme/limitless-ui-react.md +++ b/readme/limitless-ui-react.md @@ -20,23 +20,26 @@ Key features: - Accessibility-focused design - Performance-optimized -This guide is intended for developers who are familiar with React and want to integrate Bloomreach -Discovery features into their applications efficiently. +## Storybook + +For a showcase of all available components, hooks, and their props, please refer to our +[Storybook documentation](https://bloomreach.github.io/limitless-ui-react/). ## Installation -Install Bloomreach Limitless UI React and its peer dependency using npm, yarn, or pnpm: +Install the Bloomreach Limitless UI React package `@bloomreach/limitless-ui-react` using npm, yarn, +or pnpm: ```bash -npm install @bloomreach/limitless-ui-react @bloomreach/discovery-web-sdk +npm install @bloomreach/limitless-ui-react ``` ```bash -yarn add @bloomreach/limitless-ui-react @bloomreach/discovery-web-sdk +yarn add @bloomreach/limitless-ui-react ``` ```bash -pnpm add @bloomreach/limitless-ui-react @bloomreach/discovery-web-sdk +pnpm add @bloomreach/limitless-ui-react ``` ## Core Concepts @@ -45,40 +48,34 @@ pnpm add @bloomreach/limitless-ui-react @bloomreach/discovery-web-sdk Bloomreach Limitless UI React offers multiple integration levels to suit different needs: +- **Web SDK Direct Usage**: Use the + [@bloomreach/discovery-web-sdk](https://github.com/bloomreach/discovery-web-sdk) directly for full + control over API calls. +- solutions. +- **Context-Aware Hooks**: Use hooks like `useSearchBox` to interact with the library's context + system. +- **Headless Components**: Implement accessible, unstyled components (e.g., ``) for a + balance of functionality and customization. +- **Styled Components**: Include an optional styling bundle for a complete out-of-the-box + experience. + ### Compound Components -Limitless UI React uses the compound component pattern for complex components like SearchBox. This pattern provides more flexibility and control over component composition. For example: +Limitless UI React uses the compound component pattern for complex components like SearchBox. This +pattern provides more flexibility and control over component composition. For example: ```jsx - - + + ``` This pattern allows you to: -- Compose components flexibly + +- Compose components with flexibility - Control exactly which subcomponents to include - Maintain a clear hierarchy of related components -1. **Web SDK Direct Usage**: Use the - [@bloomreach/discovery-web-sdk](https://github.com/bloomreach/discovery-web-sdk) directly for - full control over API calls. -2. **React Hooks**: Utilize custom React hooks (e.g., `useSearch`) for pre-built state management - solutions. -3. **Context-Aware Hooks**: Use hooks like `useSearchBox` to interact with the library's context - system. -4. **Headless Components**: Implement accessible, unstyled components (e.g., ``) for a - balance of functionality and customization. -5. **Styled Components** (Coming Soon): Include an optional styling bundle for a complete - out-of-the-box experience. - ### Components and Hooks Each major feature in Limitless UI React is represented by a component and corresponding hooks. This @@ -115,7 +112,7 @@ import { SearchBox } from '@bloomreach/limitless-ui-react'; const SearchPage = () => { return (
- { searchType="product" labels={{ placeholder: "Search products...", - submit: "Search", + submit: "Search", reset: "Clear" }} > @@ -219,7 +216,7 @@ const SearchPage = () => { // Handle query selection }} onSearchSelect={(product, event) => { - // Handle product selection + // Handle product selection }} /> @@ -228,15 +225,10 @@ const SearchPage = () => { }; ``` -### Using Components + Style bundle (WIP) - -The headless components can be combined with the optional style bundle to get a full -'out-of-the-box' experience. - -## Storybook +### Using Components + Style bundle -For more information for all available components, hooks, and their props, please -refer to our [Storybook documentation](https://bloomreach.github.io/limitless-ui-react/). +The headless components can be combined with the optional style bundle and to get a full +'out-of-the-box' experience. One can simply import `style.css` from the package.