task: Adopt the new Limitless UI components into the Facets code sample

examples/facets/package.json

@@ -7,7 +7,7 @@
   "main": "src/index.tsx",
   "dependencies": {
     "@bloomreach/discovery-web-sdk": "1.3.1",
-    "@bloomreach/limitless-ui-react": "0.4.0",
+    "@bloomreach/limitless-ui-react": "^0.8.0",
     "@bloomreach/react-banana-ui": "1.25.0",
     "@uiw/react-json-view": "2.0.0-alpha.16",
     "lodash": "4.17.21",

examples/facets/src/App.jsx

@@ -11,8 +11,8 @@ import {
   SearchIcon,
   LoaderIcon,
   ExternalLinkIcon,
-  Pagination,
 } from "@bloomreach/react-banana-ui";
+import { Pagination } from "@bloomreach/limitless-ui-react";
 
 import { getSearchResults } from "./api";
 import { Facet } from "./components/facet";
@@ -330,7 +330,7 @@ export default function App() {
                       </div>
                       {data.response.numFound > 0 ? (
                         <div className="my-8">
-                          <Pagination
+                          <Pagination.Root
                             count={data.response.numFound}
                             itemsPerPage={perPage}
                             itemsPerPageOptions={[12, 24, 48]}
@@ -341,7 +341,18 @@ export default function App() {
                               updateQueryParams("page", newPage)
                             }
                             page={page}
-                          />
+                          >
+                            <Pagination.Overview>
+                              <Pagination.ItemsPerPageSelector />
+                              <Pagination.Summary />
+                            </Pagination.Overview>
+                            <Pagination.Navigation>
+                              <Pagination.PreviousButton />
+                              <Pagination.Pages />
+                              <Pagination.NextButton />
+                            </Pagination.Navigation>
+                          </Pagination.Root>
+
                         </div>
                       ) : null}
                     </div>

examples/facets/src/app.css

@@ -20,13 +20,15 @@ If the tailwind play cdn javascript is not working, uncomment the block below an
   font-size: 11px;
 }
 
-.applied-facet-tag {
-  --rbui-tag-color: var(--banana-tag-input-foreground-default);
-  --rbui-tag-background-color: var(--banana-tag-input-background-default);
-  --rbui-tag-background-color-hover: var(--banana-tag-input-background-hover);
-  font-weight: 600;
-}
-
 .lui-styled {
   --lui-pc-box-shadow: 0 2px 5px 0 #0028400f, 0 9px 9px 0 #0028400d, 0 20px 12px 0 #00284008, 0 36px 15px 0 #00284003, 0 57px 16px 0 #00284000;
+  --lui-pagination__item--active-background: #00b2db;
+}
+
+.lui-styled .lui-tag button {
+  height: auto;
+}
+
+.lui-styled .lui-cg-item-checkbox {
+  padding: 0;
 }

examples/facets/src/components/applied-facet-category.jsx

@@ -1,4 +1,4 @@
-import {AssetTag} from "@bloomreach/react-banana-ui";
+import { Tag } from "@bloomreach/limitless-ui-react";
 
 export const AppliedFacetCategory = ({ facet, value, onClear }) => {
   function getCategoryName(id) {
@@ -9,14 +9,13 @@ export const AppliedFacetCategory = ({ facet, value, onClear }) => {
   return (
     <div className="flex flex-row flex-wrap gap-2">
       {value.map((val) => (
-        <AssetTag
-          className="applied-facet-tag"
-          dismissible
+        <Tag
+          className="font-semibold leading-none"
           key={val}
           onDismiss={() => onClear(val)}
         >
           {getCategoryName(val)}
-        </AssetTag>
+        </Tag>
       ))}
     </div>
   );

examples/facets/src/components/applied-facet-multi-select.jsx

@@ -1,18 +1,18 @@
 import { AssetTag } from "@bloomreach/react-banana-ui";
+import { Tag } from "@bloomreach/limitless-ui-react";
 import {capitalize} from "lodash";
 
 export const AppliedFacetMultiSelect = ({ value, onClear }) => {
   return (
     <div className="flex flex-row flex-wrap gap-2">
       {value.map((val) => (
-        <AssetTag
-          className="applied-facet-tag"
-          dismissible
+        <Tag
+          className="font-semibold leading-none"
           key={val}
           onDismiss={() => onClear(val)}
         >
           {capitalize(val)}
-        </AssetTag>
+        </Tag>
       ))}
     </div>
   );

examples/facets/src/components/applied-facet-number-range.jsx

@@ -1,17 +1,16 @@
-import {AssetTag} from "@bloomreach/react-banana-ui";
+import { Tag } from "@bloomreach/limitless-ui-react";
 
 export const AppliedFacetNumberRange = ({ value, onClear }) => {
   return (
     <div className="flex flex-col gap-2">
       {value.map((val) => (
-        <AssetTag
-          className="applied-facet-tag"
-          dismissible
+        <Tag
+          className="font-semibold leading-none"
           key={val}
           onDismiss={() => onClear(val)}
         >
           {val.slice(1, -1).split(" TO ").join(" - ")}
-        </AssetTag>
+        </Tag>
       ))}
     </div>
   );

examples/facets/src/components/applied-facets-number-stats.jsx

@@ -1,17 +1,16 @@
-import {AssetTag} from "@bloomreach/react-banana-ui";
+import { Tag } from "@bloomreach/limitless-ui-react";
 
 export const AppliedFacetNumberStats = ({ value, onClear }) => {
   const val = value[0];
   return (
     <div className="flex flex-col gap-2">
-      <AssetTag
-        className="applied-facet-tag"
-        dismissible
+      <Tag
+        className="font-semibold leading-none"
         key={val}
         onDismiss={() => onClear(val)}
       >
         {val.slice(1, -1).split(" TO ").join(" - ")}
-      </AssetTag>
+      </Tag>
     </div>
   );
 };

examples/facets/src/components/checkbox-group.jsx

@@ -1,54 +1,37 @@
 import { useEffect, useState } from "react";
-import { Button } from "@bloomreach/react-banana-ui";
+import { CheckboxGroup as CG } from "@bloomreach/limitless-ui-react";
 
 export const CheckboxGroup = ({ options, value, onChange }) => {
   const DEFAULT_DISPLAYED_OPTIONS = 5;
-  const [expanded, setExpanded] = useState(false);
   const [selected, setSelected] = useState([]);
 
   useEffect(() => {
-    setSelected(value);
+    setSelected(value || []);
   }, [value]);
 
-  const handleChange = (event) => {
-    let newSelected;
-    if (event.target.checked) {
-      newSelected = [...[], ...(selected || []), event.target.value];
-    } else {
-      newSelected = selected.filter((item) => item !== event.target.value);
-    }
-    onChange(newSelected);
-  };
-
-  const displayedOptions = expanded
-    ? options
-    : options.slice(0, DEFAULT_DISPLAYED_OPTIONS);
+  const displayedOptions = options.slice(0, DEFAULT_DISPLAYED_OPTIONS);
 
   return (
-    <div>
-      <div className="py-2 flex flex-col gap-2">
-        {displayedOptions.map((opt) => (
-          <label className="text-sm flex gap-2" key={opt.value}>
-            <input
-              type="checkbox"
-              value={opt.value}
-              onChange={handleChange}
-              checked={selected ? selected.includes(opt.value) : false}
-            />
-            <span className="grow">{opt.label}</span>
-            <span className="px-2 bg-slate-200 rounded-full">{opt.count}</span>
-          </label>
-        ))}
-      </div>
-      {!expanded && options.length > DEFAULT_DISPLAYED_OPTIONS ? (
-        <Button
-          type="secondary"
-          className="py-1 px-2 mt-2 text-xs h-auto"
-          onClick={() => setExpanded(true)}
-        >
-          + View all ({options.length})
-        </Button>
+    <CG.Root value={selected} onChange={onChange} className="py-2">
+      {displayedOptions.map((opt) => (
+        <CG.Item value={opt.value}>
+          <span className="grow">{opt.label}</span>
+          <span className="px-2 bg-slate-200 rounded-full">{opt.count}</span>
+        </CG.Item>
+      ))}
+      {options.length > DEFAULT_DISPLAYED_OPTIONS ? (
+        <CG.Overflow>
+          <CG.OverflowContent>
+            {options.slice(DEFAULT_DISPLAYED_OPTIONS).map((opt) => (
+              <CG.Item value={opt.value}>
+                <span className="grow">{opt.label}</span>
+                <span className="px-2 bg-slate-200 rounded-full">{opt.count}</span>
+              </CG.Item>
+            ))}
+          </CG.OverflowContent>
+          <CG.OverflowTrigger />
+        </CG.Overflow>
       ) : null}
-    </div>
+    </CG.Root>
   );
 };

examples/facets/src/components/facet-number-stats.jsx

@@ -1,9 +1,8 @@
 import { useState, useEffect } from "react";
-import { RangeInput } from "./range-input";
+import { Range, Currency } from "@bloomreach/limitless-ui-react";
 
 export const FacetNumberStats = ({ facet, value, onChange }) => {
-  const [min, setMin] = useState(facet.value.start);
-  const [max, setMax] = useState(facet.value.end);
+  const [rangeValue, setRangeValue] = useState([facet.value.start, facet.value.end]);
 
   useEffect(() => {
     const parsedValue = value
@@ -13,8 +12,9 @@ export const FacetNumberStats = ({ facet, value, onChange }) => {
           .map((fragment) => parseFloat(fragment))
       : [];
 
-    setMin(parsedValue[0] || facet.value.start);
-    setMax(parsedValue[1] || facet.value.end);
+    const _min = parsedValue[0] || facet.value.start;
+    const _max = parsedValue[1] || facet.value.end;
+    setRangeValue([_min, _max]);
   }, [facet, value]);
 
   const handleChange = (value) => {
@@ -25,5 +25,19 @@ export const FacetNumberStats = ({ facet, value, onChange }) => {
     }
   };
 
-  return <RangeInput value={[min, max]} onChange={handleChange} />;
+  return (
+    <div className="py-4">
+      <Range.Root autoUpdate={false} min={facet.value.start} max={facet.value.end} step={0.01} value={rangeValue} onChange={(newValue) => {handleChange(newValue)}}>
+        <Range.Slider />
+        <Range.Inputs>
+          {facet.name.includes("price") && <Currency />}
+          <Range.MinInput />
+          <Range.Separator />
+          {facet.name.includes("price") && <Currency />}
+          <Range.MaxInput />
+        </Range.Inputs>
+        <Range.UpdateButton>Update</Range.UpdateButton>
+      </Range.Root>
+    </div>
+  );
 };