docs: Update documentation page

bloomreach · Dec 3, 2024 · e6f876b · e6f876b
1 parent 008d780
commit e6f876b
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 40 deletions.
diff --git a/readme/.gitkeep b/readme/.gitkeep
diff --git 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., `<SearchBox />`) 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
-<SearchBox.Root
-  configuration={configuration}
-  searchOptions={searchOptions}
-  searchType="product"
->
-  <SearchBox.Suggestions 
-    configuration={configuration}
-    suggestOptions={suggestOptions}
-  />
+<SearchBox.Root configuration={configuration} searchOptions={searchOptions} searchType="product">
+  <SearchBox.Suggestions configuration={configuration} suggestOptions={suggestOptions} />
 </SearchBox.Root>
 ```
 
 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., `<SearchBox />`) 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 (
     <div>
-      <SearchBox.Root 
+      <SearchBox.Root
         configuration={configuration}
         searchOptions={searchOptions}
         searchType="product"
@@ -208,7 +205,7 @@ const SearchPage = () => {
         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
           }}
         />
       </SearchBox.Root>
@@ -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.
 
 <!-- ## Type documentation -->
 <!-- For a type reference see the TSDoc published [here](.) -->