Merge branch 'react-upgrade' into improve-npm-build

* react-upgrade: Wrap ComboBox in forwardRef classname for reverse spin Fix size of RefreshIcon so the right side is not cut off Update conditional tooltip content Fix className Ability to show something at the end of the menu item Ability to quickly add classname to the tooltip content Remove lodash from icons folder Fix InlineValuePopover Add tippy animation css into UI Kit itself Add 'hasSubmenu' so we can skip chevron for parents that don't have submenu Prettier Improve search result display when you are still loading but have data to show Set default type for a submit button Update icons package, package.json cleanup and version # Conflicts: # src/icons/package-lock.json # src/icons/package.json
rushi · Jan 2, 2025 · 04bf48d · 04bf48d
2 parents 96771c0 + 6935710
commit 04bf48d
Show file tree

Hide file tree

Showing 16 changed files with 129 additions and 65 deletions.
diff --git a/src/components/DatePicker/DatePicker.jsx b/src/components/DatePicker/DatePicker.jsx
@@ -188,13 +188,13 @@ export const DatePicker = ({
     const CaptionElement = useMemo(() => {
         return shouldShowYearPicker && currentMonth
             ? ({ date }) => (
-                <MonthYearSelector
-                    date={date}
-                    currentMonth={currentMonth}
-                    locale={locale ?? contextLocale}
-                    onChange={handleMonthChange}
-                />
-            )
+                  <MonthYearSelector
+                      date={date}
+                      currentMonth={currentMonth}
+                      locale={locale ?? contextLocale}
+                      onChange={handleMonthChange}
+                  />
+              )
             : undefined;
         // Adding `handleMonthChange` causes a lot of re-renders, and closes drop-down.
         // eslint-disable-next-line react-hooks/exhaustive-deps

diff --git a/src/components/DatePicker/RangeDatePicker.jsx b/src/components/DatePicker/RangeDatePicker.jsx
@@ -34,8 +34,8 @@ const RangeDatePicker = ({
     const createCaptionElement = (currentMonth, handleChange) =>
         shouldShowYearPicker && currentMonth
             ? ({ date }) => (
-                <MonthYearSelector date={date} currentMonth={currentMonth} locale={locale} onChange={handleChange} />
-            )
+                  <MonthYearSelector date={date} currentMonth={currentMonth} locale={locale} onChange={handleChange} />
+              )
             : undefined;
 
     const CaptionStartElement = createCaptionElement(startMonth, handleStartMonthChange);

diff --git a/src/components/Drawer.jsx b/src/components/Drawer.jsx
@@ -80,7 +80,9 @@ export const Drawer = forwardRef(
                                             {/* eslint-disable-next-line react/jsx-max-depth */}
                                             <Dialog.Title>{title}</Dialog.Title>
                                         </div>
-                                        <div className={cn("ui-drawer-body relative mt-3 flex-1", classNames.content)}>{content}</div>
+                                        <div className={cn("ui-drawer-body relative mt-3 flex-1", classNames.content)}>
+                                            {content}
+                                        </div>
                                     </div>
 
                                     {position === "left" ? <CloseButton onClose={onClose} /> : null}

diff --git a/src/components/Forms/ComboBox.jsx b/src/components/Forms/ComboBox.jsx
@@ -1,29 +1,30 @@
 import PropTypes from "prop-types";
-import React from "react";
+import React, { forwardRef } from "react";
 import Select from "react-select";
 import CreatableSelect from "react-select/creatable";
 import cn from "../../helpers/classnames";
 import "./ComboBox.css";
 
 // TODO: Common parameters should be defined in stories like `options` and `defaultValue`
-export const ComboBox = ({ isCreatable = false, className, isError, ...rest }) => {
+export const ComboBox = forwardRef(({ isCreatable = false, className, isError, ...rest }, ref) => {
     const SelectType = isCreatable ? CreatableSelect : Select;
     return (
         <SelectType
+            ref={ref}
             className={cn("ui-combo-box", isError && "border-danger", className)}
             classNamePrefix="ui-combo-box"
             components={
                 isCreatable
                     ? {
-                          IndicatorsContainer: () => null,
-                          Menu: () => null,
-                      }
+                        IndicatorsContainer: () => null,
+                        Menu: () => null,
+                    }
                     : null
             }
             {...rest}
         />
     );
-};
+});
 
 ComboBox.propTypes = {
     className: PropTypes.string,

diff --git a/src/components/Forms/InlineValuePopover.jsx b/src/components/Forms/InlineValuePopover.jsx
@@ -21,7 +21,7 @@ export const InlineValuePopover = ({
         setTimeout(() => {
             // This may technically belong in Seller app, but the most common use case for this component here is
             // to use inputs, so we'll provide some helpers for that
-            const popoverInput = ref?.current.querySelector("select,textarea,input");
+            const popoverInput = ref.current?.querySelector("select,textarea,input");
             if (!popoverInput) return;
 
             popoverInput.focus();

diff --git a/src/components/Search.jsx b/src/components/Search.jsx
@@ -3,8 +3,8 @@ import { debounce } from "lodash-es";
 import PropTypes from "prop-types";
 import React, { useEffect, useId, useRef, useState } from "react";
 import { useHotkeys } from "react-hotkeys-hook";
-import cn from "../helpers/classnames";
 import { isOSX } from "../helpers/browser";
+import cn from "../helpers/classnames";
 import { useIsClient } from "../hooks/useIsClient";
 import { SearchIcon } from "../icons";
 import { Key } from "./Key";
@@ -135,6 +135,7 @@ export const Search = ({
     useHotkeys("esc", () => inputReference.current.blur(), { enableOnTags: ["INPUT"] });
 
     const isVisible = open || !shouldDestroyOnClose;
+    const hasResults = itemList.some((item) => Boolean(item.id));
 
     return (
         <div suppressHydrationWarning className="ui-search relative w-full">
@@ -182,33 +183,33 @@ export const Search = ({
             >
                 {isVisible
                     ? itemList.map((item, index) => (
-                          <li key={item} {...getItemProps({ key: index, item, index, className: "ui-search-item" })}>
-                              {item === submitValueItem ? (
-                                  isLoading ? (
-                                      <div className="p-3 text-center">
-                                          <Spinner size="small" />
-                                      </div>
-                                  ) : inputValue.length < minChars ? (
-                                      <div
-                                          className={cn(
-                                              "cursor-pointer p-2",
-                                              highlightedIndex === index ? "bg-blue-light text-white" : "",
-                                          )}
-                                      >
-                                          {`Enter at least ${minChars} characters to begin search`}
-                                      </div>
-                                  ) : null
-                              ) : (
-                                  children?.(item, highlightedIndex === index)
-                              )}
-                          </li>
-                      ))
+                        <li key={item?.id ?? index} {...getItemProps({ item, index, className: "ui-search-item" })}>
+                            {item === submitValueItem ? (
+                                isLoading && !hasResults ? (
+                                    <div className="p-3 text-center">
+                                        <Spinner size="small" />
+                                    </div>
+                                ) : inputValue.length < minChars ? (
+                                    <div
+                                        className={cn(
+                                            "cursor-pointer p-2",
+                                            highlightedIndex === index ? "bg-blue-light text-white" : "",
+                                        )}
+                                    >
+                                        {`Enter at least ${minChars} characters to begin search`}
+                                    </div>
+                                ) : null
+                            ) : (
+                                children?.(item, highlightedIndex === index)
+                            )}
+                        </li>
+                    ))
                     : null}
 
                 {isVisible && noResultFound ? <li className="cursor-not-allowed p-2">No results found</li> : null}
 
-                {isVisible && itemList.length < 5 ? (
-                    <li className="search-footer pointer-events sticky bottom-0 flex space-x-5 p-2 text-sm text-gray-dark">
+                {isVisible && hasResults && (
+                    <li className="bg-white search-footer pointer-events sticky bottom-0 items-center flex space-x-5 p-2 text-sm text-gray-dark">
                         <span className="flex items-center">
                             <Key char="up" className="mr-0.5" />
                             <Key char="down" className="mr-2" /> navigate results
@@ -221,8 +222,14 @@ export const Search = ({
                         <span className="flex items-center">
                             <Key char="esc" className="mr-2" /> close search
                         </span>
+
+                        {isLoading && (
+                            <span>
+                                <Spinner size="tiny" className="mr-1" /> Fetching {hasResults ? "more data" : "data"}
+                            </span>
+                        )}
                     </li>
-                ) : null}
+                )}
             </ul>
         </div>
     );

diff --git a/src/components/Sidebar/Sidebar.Link.jsx b/src/components/Sidebar/Sidebar.Link.jsx
@@ -4,7 +4,18 @@ import cn from "../../helpers/classnames";
 import { ChevronRightIcon } from "../../icons";
 import { Dot } from "../Dot/Dot";
 
-export const SidebarLink = ({ isActive = false, icon: Icon, children, isSubMenuItem, align, classNames, ...rest }) => {
+export const SidebarLink = ({
+    isActive = false,
+    hasSubmenu = false,
+    icon: Icon,
+    info,
+    children,
+    isSubMenuItem,
+    align,
+    classNames,
+    ...rest
+}) => {
+    const showInfo = !!info ? true : hasSubmenu;
     return (
         <button
             type="button"
@@ -38,8 +49,7 @@ export const SidebarLink = ({ isActive = false, icon: Icon, children, isSubMenuI
                 {children}
             </span>
 
-            {isSubMenuItem ? null : <ChevronRightIcon className="ml-auto hidden h-3 w-3 xl:inline" />}
-
+            {showInfo && (info ?? <ChevronRightIcon className="ml-auto hidden h-3 w-3 xl:inline" />)}
         </button>
     );
 };
@@ -49,6 +59,7 @@ SidebarLink.displayName = "Sidebar.Link";
 SidebarLink.propTypes = {
     align: PropTypes.oneOf(["center", "left", "right"]),
     isActive: PropTypes.bool,
+    hasSubmenu: PropTypes.bool,
     icon: PropTypes.func,
     children: PropTypes.node.isRequired,
     isSubMenuItem: PropTypes.bool,

diff --git a/src/components/Tooltip.jsx b/src/components/Tooltip.jsx
@@ -3,11 +3,17 @@ import PropTypes from "prop-types";
 import React from "react";
 import { followCursor } from "tippy.js"; // Dont remove this even if unused. It is required for one prop
 import "tippy.js/dist/tippy.css"; // If we customize the style, the change this and import our own style
+// Do not remove these https://atomiks.github.io/tippyjs/v6/animations/
+import "tippy.js/animations/perspective.css";
+import "tippy.js/animations/scale.css";
+import "tippy.js/animations/shift-away.css";
+import "tippy.js/animations/shift-toward.css";
 
 // TODO: Implement "as='div'"
-export const Tooltip = ({ children, className, content, ...rest }) => {
+export const Tooltip = ({ children, className, contentClassName, content, ...rest }) => {
+    const tooltipContent = contentClassName ? <span className={contentClassName}>{content}</span> : content;
     return (
-        <Tippy content={content} {...rest} className="ui-tooltip text-white" plugins={[followCursor]}>
+        <Tippy content={tooltipContent} {...rest} className="ui-tooltip text-white" plugins={[followCursor]}>
             <span className={className}>{children}</span>
         </Tippy>
     );

diff --git a/src/icons/package-lock.json b/src/icons/package-lock.json
diff --git a/src/icons/package.json b/src/icons/package.json
@@ -23,7 +23,6 @@
     "dependencies": {
         "autoprefixer": "^10.4.20",
         "clsx": "^1.1.1",
-        "lodash": "^4.17.21",
         "postcss": "^8.4.49",
         "prettier": "^2.7.1",
         "prettier-plugin-tailwindcss": "^0.1.13",

diff --git a/src/icons/postcss.config.js b/src/icons/postcss.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+    plugins: {
+        tailwindcss: {},
+        autoprefixer: {},
+    },
+};
diff --git a/src/icons/src/RefreshIcon.jsx b/src/icons/src/RefreshIcon.jsx
@@ -3,7 +3,7 @@ import { createIcon } from "./helpers/icon";
 
 export const RefreshIcon = createIcon((props) => {
     return (
-        <svg viewBox="0 0 14 14" width={16} height={14} fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <svg viewBox="0 0 18 18" width={18} height={18} fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
             <path
                 d="M4.289 4.083a4.813 4.813 0 018.523 3.061v1.314M11.5 10.446a4.813 4.813 0 01-8.313-3.302v-.875"
                 stroke="currentColor"

diff --git a/src/stories/Navigation/Sidebar.stories.js b/src/stories/Navigation/Sidebar.stories.js
@@ -1,5 +1,15 @@
 import React, { useState } from "react";
-import { AnnounceIcon, CheckIcon, HelpCenterIcon, LogoutIcon, PiggyBankIcon, PolicyIcon, Sidebar, StarIcon, UserIcon } from "../..";
+import {
+    AnnounceIcon,
+    CheckIcon,
+    HelpCenterIcon,
+    LogoutIcon,
+    PiggyBankIcon,
+    PolicyIcon,
+    Sidebar,
+    StarIcon,
+    UserIcon
+} from "../..";
 
 const SidebarStories = {
     title: "Navigation/Sidebar",
@@ -76,10 +86,23 @@ export const Default = () => {
                         </div>
                     }
                 >
-                    <Sidebar.Link icon={PiggyBankIcon}>Bookings</Sidebar.Link>
+                    <Sidebar.Link hasSubmenu icon={PiggyBankIcon}>
+                        Bookings
+                    </Sidebar.Link>
                 </Sidebar.Menu>
 
-                <Sidebar.Link icon={StarIcon}>Favorites</Sidebar.Link>
+                <Sidebar.Link
+                    icon={StarIcon}
+                    info={
+                        <span className="w-full text-right">
+                            <span className="inline-flex items-center justify-center w-2.5 h-2.5 p-2.5 text-sm font-medium text-white bg-danger rounded-full">
+                                3
+                            </span>
+                        </span>
+                    }
+                >
+                    Favorites
+                </Sidebar.Link>
 
                 <Sidebar.Menu
                     content={
@@ -99,7 +122,9 @@ export const Default = () => {
                         </div>
                     }
                 >
-                    <Sidebar.Link icon={AnnounceIcon}>Marketing</Sidebar.Link>
+                    <Sidebar.Link hasSubmenu icon={AnnounceIcon}>
+                        Marketing
+                    </Sidebar.Link>
                 </Sidebar.Menu>
             </Sidebar>
         </div>

diff --git a/src/stories/Other/Search.stories.js b/src/stories/Other/Search.stories.js
@@ -14,8 +14,8 @@ const SearchStories = {
 };
 
 const fetchUsers = async (search) => {
-    const results = await fetch("https://xola.com/api/sellers", {
-        headers: { "X-API-KEY": "" }, // Some random dude's API key.
+    const results = await fetch("https://xola.com/api/sellers?limit=100", {
+        headers: { "X-API-KEY": "" }, // Put your API key here for testing
     });
 
     const response = await results.json();
@@ -53,6 +53,7 @@ export const Default = () => {
         >
             {(item, active) => (
                 <div
+                    key={item.id ?? item.email}
                     className={clsx(
                         "group flex cursor-pointer p-2",
                         active ? "bg-blue-light p-2 text-white" : "text-black",

diff --git a/src/utils/index.js b/src/utils/index.js
@@ -1,5 +1,5 @@
-export * from "./avatar.js"
-export * from "./currency.js"
-export * from "./date.js"
-export * from "./numbers.js"
-export * from "./phone.js"
+export * from "./avatar.js";
+export * from "./currency.js";
+export * from "./date.js";
+export * from "./numbers.js";
+export * from "./phone.js";
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -165,6 +165,17 @@ export default {
         },
 
         extend: {
+            animation: {
+                'reverse-spin': 'reverse-spin 1s linear infinite'
+            },
+            keyframes: {
+                'reverse-spin': {
+                    from: {
+                        transform: 'rotate(360deg)'
+                    },
+                }
+            },
+
             fontFamily: {
                 sans: [
                     "InterVariable",