[CI-4303] Update Code Example - CioPlp

src/stories/components/CioPlp/CioPlpProps.md

@@ -1,21 +1,19 @@
 ### `Formatters`
 
+---
+
 Formatters will be used to modify how certain fields are rendered
 
 | property    | type                        | description           |
 | ----------- | --------------------------- | --------------------- |
 | formatPrice | `(price: number) => string` | Format price funciton |
 
-### `ItemFieldGetters`
-
-ItemFieldGetters maps the fields sent in the catalog feeds to the fields the libary expects for rendering
-
-| property | type                     | description        |
-| -------- | ------------------------ | ------------------ |
-| getPrice | `(item: Item) => number` | Get price funciton |
+<br>
 
 ### `Callbacks`
 
+---
+
 Callbacks will be composed with the library's internal tracking calls for a given event
 
 | property           | type                                                       | description                            |
@@ -25,24 +23,41 @@ Callbacks will be composed with the library's internal tracking calls for a give
 | onSwatchClick      | `(e: React.MouseEvent, clickedSwatch: SwatchItem) => void` | Product swatch click callback function |
 | onRedirect         | `(url: string) => void`                                    | Redirect callback function             |
 
+<br>
+
+### `ItemFieldGetters`
+
+---
+
+ItemFieldGetters maps the fields sent in the catalog feeds to the fields the libary expects for rendering
+
+| property | type                     | description        |
+| -------- | ------------------------ | ------------------ |
+| getPrice | `(item: Item) => number` | Get price funciton |
+
+<br>
+
 ### `UrlHelpers`
 
-Url Helpers are used for managing the url and request state
+---
+
+Url Helpers are used for managing the url and request state. These functions define how this Library modifies and parses the URL.
 
-| property              | type                                                                    | description                                                                                                                               |
-| --------------------- | ----------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------- |
-| getUrl                | `() => string \| undefined`                                             | This function will be used to get the current url for a page instead of using the current href.                                           |
-| setUrl                | `(newEncodedUrlState: string) => void`                                  | This function will be called when any request state changes result in url changes. By default the window href will be set to the new url. |
-| getStateFromUrl       | `(urlString: string) => RequestConfigs`                                 | This function will be called when parsing the current url string to a request state.                                                      |
-| getUrlFromState       | `(state: RequestConfigs, options: QueryParamEncodingOptions) => string` | This function will be called when converting the request state to a url string.                                                           |
-| defaultQueryStringMap | `DefaultQueryStringMap`                                                 | Used to provide a mapping for what strings constructor api query parameters should use in url                                             |
+| property              | type                                                                    | description                                                     |
+| --------------------- | ----------------------------------------------------------------------- | --------------------------------------------------------------- |
+| getUrl                | `() => string \| undefined`                                             | Get the current url for a page (Default: getting current href)  |
+| setUrl                | `(newEncodedUrlState: string) => void`                                  | Set the window href using the provided url                      |
+| getStateFromUrl       | `(urlString: string) => RequestConfigs`                                 | Parses the given url string to a request configuration state.   |
+| getUrlFromState       | `(state: RequestConfigs, options: QueryParamEncodingOptions) => string` | Convert the request configuration state to a url string.        |
+| defaultQueryStringMap | `DefaultQueryStringMap`                                                 | Provides a mapping for the query parameters that is used in URL |
 
 > #### `getUrl`
 
 - Default Implementation
+- type: () => string \| undefined
 
   ```javascript
-  function getUrl(): string | undefined {
+  function getUrl() {
     if (typeof window === 'undefined') return undefined;
     return window.location.href;
   }
@@ -51,9 +66,10 @@ Url Helpers are used for managing the url and request state
 > #### `setUrl`
 
 - Default Implementation
+- type: (newEncodedUrlState: string) => void
 
   ```javascript
-  function setUrl(newUrlWithEncodedState: string) {
+  function setUrl(newUrlWithEncodedState) {
     if (typeof window === 'undefined') return;
     window.location.href = newUrlWithEncodedState;
   }
@@ -62,21 +78,22 @@ Url Helpers are used for managing the url and request state
 > #### `getStateFromUrl`
 
 - Default Implementation
+- type: (urlString: string) => RequestConfig
 
   ```javascript
-  function getStateFromUrl(url: string): RequestConfigs {
+  function getStateFromUrl(url) {
     const urlObject = new URL(url);
     const urlParams = urlObject.searchParams;
     const paths = decodeURI(urlObject?.pathname)?.split('/');
-    let filterName: string | undefined;
-    let filterValue: string | undefined;
+    let filterName;
+    let filterValue;
 
     if (paths.length > 0) {
       filterName = 'group_id';
       filterValue = paths[paths.length - 1];
     }
 
-    const rawState = {} as Record<string, string>;
+    const rawState = {};
     Object.entries(defaultQueryStringMap).forEach(([key, val]) => {
       const storedVal = urlParams.get(val);
       if (storedVal != null) {
@@ -98,7 +115,7 @@ Url Helpers are used for managing the url and request state
       ...rest
     } = rawState;
 
-    const state = { ...rest } as RequestConfigs;
+    const state = { ...rest };
     if (page) state.page = Number(page);
     if (offset) state.offset = Number(offset);
     if (resultsPerPage) state.resultsPerPage = Number(resultsPerPage);
@@ -115,19 +132,32 @@ Url Helpers are used for managing the url and request state
 > #### `getUrlFromState`
 
 - Default Implementation
+- type: (state: RequestConfigs, options: QueryParamEncodingOptions) => string
 
   ```javascript
-  function getUrlFromState(state: RequestConfigs, options: QueryParamEncodingOptions = {}): string {
-    const { baseUrl: url, origin, pathname } = options;
-    const baseUrl = url || `${origin}${pathname}`;
+  function getUrlFromState(state, url) {
+    const urlObject = new URL(url);
+    let { pathname } = urlObject;
+
+    if (state.filterName && state.filterValue) {
+      if (pathname.match(/(group_id|collection_id)\/[^/]+$/)) {
+        pathname = pathname.replace(
+          /\/(group_id|collection_id)\/[^/]+$/,
+          `/${state.filterName}/${state.filterValue}`,
+        );
+      } else {
+        pathname = `/${state.filterName}/${state.filterValue}`;
+      }
+    }
 
     const params = new URLSearchParams();
+
     Object.entries(state).forEach(([key, val]) => {
-    if (defaultQueryStringMap[key] === undefined) {
-    return;
-    }
+      if (defaultQueryStringMap[key] === undefined) {
+        return;
+      }
 
-      let encodedVal: string = '';
+      let encodedVal = '';
 
       if (key === 'filters' && state.filters) {
         getFilterParamsFromState(params, state.filters);
@@ -140,19 +170,19 @@ Url Helpers are used for managing the url and request state
       if (encodedVal) {
         params.set(defaultQueryStringMap[key], encodedVal);
       }
-
     });
 
-    return `${baseUrl}?${params.toString()}`;
+    return `${urlObject.origin}${pathname}?${params.toString()}`;
   }
   ```
 
 > #### `defaultQueryStringMap`
 
 - Default Implementation
+- type: DefaultQueryStringMap
 
   ```javascript
-  const defaultQueryStringMap: Readonly<DefaultQueryStringMap> = Object.freeze({
+  const defaultQueryStringMap = Object.freeze({
     query: 'q',
     page: 'page',
     offset: 'offset',

src/stories/components/CioPlp/Code Examples.mdx

@@ -29,19 +29,18 @@ Open in full screen here:
 
 This renders the PLP displayed above.
 
+To view the examples and see this component in action
+  - **Search** - append your URL with `?q=shirt`
+  - **Browse** - append your URL with `/group_id/1035`
+
 ```jsx
-import React from 'react';
-import { CioPlp } from '@constructor-io/constructorio-ui-plp';
-import '@constructor-io/constructorio-ui-plp/styles.css';
+import { CioPlp } from "@constructor-io/constructorio-ui-plp";
+import "@constructor-io/constructorio-ui-plp/styles.css";
 
-const apiKey = 'MY_API_KEY';
+const DEMO_API_KEY = "key_M57QS8SMPdLdLx4x";
 
-function MyComponent() {
-  return (
-    <>
-      <CioPlp apiKey={apiKey} />
-    </>
-  );
+export default function MyComponent() {
+  return <CioPlp apiKey={DEMO_API_KEY} />;
 }
 ```
 
@@ -55,25 +54,31 @@ Take control of the rendering logic by using Render Props through `children`.
 The [context](..?path=/docs/components-cioplp--code-examples#cioplp-context-value) will be passed along as props to your render function.
 
 ```jsx
-import { CioPlp } from '@constructor-io/constructorio-ui-plp';
+import { CioPlp } from "@constructor-io/constructorio-ui-plp";
+import "@constructor-io/constructorio-ui-plp/styles.css";
+
+const DEMO_API_KEY = "key_M57QS8SMPdLdLx4x";
 
-function MyGrid(props) {
+function MyCustomPlp(props) {
   const {
     cioClient,
     cioClientOptions,
     setCioClientOptions,
     formatters,
     itemFieldGetters,
     urlHelpers,
+    callbacks,
   } = props;
 
   return <>{/* CUSTOM_MARKUP_HERE */}</>;
 }
 
-function MyComponent() {
+export default function MyComponent() {
   return (
-    <CioPlp apiKey={apiKey}>
-      <MyGrid />
+    <CioPlp apiKey={DEMO_API_KEY}>
+      {(props) => {
+        return <MyCustomPlp {...props} />;
+      }}
     </CioPlp>
   );
 }

src/stories/components/CioPlp/Props.mdx

@@ -8,6 +8,4 @@ import CioPlpProps from './CioPlpProps.md?raw';
 
 <ArgTypes />
 
----
-
 <Markdown>{CioPlpProps}</Markdown>

src/stories/components/CioPlp/RenderProps.md

@@ -1,8 +1,9 @@
-| property            | type                                                                        | description                                                                  |
-| ------------------- | --------------------------------------------------------------------------- | ---------------------------------------------------------------------------- |
-| cioClient           | `Nullable<ConstructorIOClient>`                                             | The [ConstructorIO](https://constructor-io.github.io/constructorio-client-javascript/ConstructorIO.html) client instance                                           |
-| cioClientOptions    | `CioClientOptions`                                                          | The [ConstructorIO](https://constructor-io.github.io/constructorio-client-javascript/ConstructorIO.html) client options                                            |
-| setCioClientOptions | `React.Dispatch<CioClientOptions>`                                          | The [ConstructorIO](https://constructor-io.github.io/constructorio-client-javascript/ConstructorIO.html) options setter                                            |
-| formatters          | [Formatters](./?path=/docs/components-cioplp--props#formatters)             | Data formatter functions for things like price, description, etc             |
-| itemFieldGetters    | [ItemFieldGetters](./?path=/docs/components-cioplp--props#itemfieldgetters) | Data getter functions for things like price, description, etc                |
-| callbacks           | [Callbacks](./?path=/docs/components-cioplp--props#callbacks)               | Callback functions to be composed with the library's internal tracking calls |
+| property            | type                                                                        | description                                                                                                              |
+| ------------------- | --------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------ |
+| cioClient           | `Nullable<ConstructorIOClient>`                                             | The [ConstructorIO](https://constructor-io.github.io/constructorio-client-javascript/ConstructorIO.html) client instance |
+| cioClientOptions    | `CioClientOptions`                                                          | The [ConstructorIO](https://constructor-io.github.io/constructorio-client-javascript/ConstructorIO.html) client options  |
+| setCioClientOptions | `React.Dispatch<CioClientOptions>`                                          | The [ConstructorIO](https://constructor-io.github.io/constructorio-client-javascript/ConstructorIO.html) options setter  |
+| formatters          | [Formatters](./?path=/docs/components-cioplp--props#formatters)             | Data formatter functions for things like price, description, etc                                                         |
+| itemFieldGetters    | [ItemFieldGetters](./?path=/docs/components-cioplp--props#itemfieldgetters) | Data getter functions for things like price, description, etc                                                            |
+| urlHelpers          | [UrlHelpers](./?path=/docs/components-cioplp--props#urlhelpers)             | Url Helpers are used for managing the url and request state                                                              |
+| callbacks           | [Callbacks](./?path=/docs/components-cioplp--props#callbacks)               | Callback functions to be composed with the library's internal tracking calls                                             |