refactor: replace lodash with native approaches

.changeset/warm-suits-report.md

@@ -0,0 +1,8 @@
+---
+"@nextui-org/calendar": patch
+"@nextui-org/theme": patch
+"@nextui-org/use-infinite-scroll": patch
+"@nextui-org/shared-utils": patch
+---
+
+replaced lodash with native approaches

apps/docs/app/examples/table/custom-styles/page.tsx

@@ -23,7 +23,7 @@ import {
 } from "@nextui-org/react";
 import {ChevronDownIcon, SearchIcon} from "@nextui-org/shared-icons";
 import {useCallback, useMemo, useState} from "react";
-import {capitalize} from "lodash";
+import {capitalize} from "@nextui-org/shared-utils";
 
 import {PlusLinearIcon} from "@/components/icons";
 import {VerticalDotsIcon} from "@/components/icons/vertical-dots";

apps/docs/app/examples/table/use-case/page.tsx

@@ -23,7 +23,7 @@ import {
 } from "@nextui-org/react";
 import {ChevronDownIcon, SearchIcon} from "@nextui-org/shared-icons";
 import {useCallback, useMemo, useState} from "react";
-import {capitalize} from "lodash";
+import {capitalize} from "@nextui-org/shared-utils";
 
 import {PlusLinearIcon} from "@/components/icons";
 import {VerticalDotsIcon} from "@/components/icons/vertical-dots";

apps/docs/components/cmdk.tsx

@@ -13,7 +13,8 @@ import {clsx} from "@nextui-org/shared-utils";
 import scrollIntoView from "scroll-into-view-if-needed";
 import {isAppleDevice, isWebKit} from "@react-aria/utils";
 import {create} from "zustand";
-import {intersectionBy, isEmpty} from "lodash";
+import {isEmpty} from "@nextui-org/shared-utils";
+import intersectionBy from "lodash/intersectionBy";
 import {writeStorage, useLocalStorage} from "@rehooks/local-storage";
 
 import {

apps/docs/components/demo-code-modal.tsx

@@ -12,7 +12,6 @@ import {
   Skeleton,
 } from "@nextui-org/react";
 import Link from "next/link";
-import {toLower} from "lodash";
 
 import {CodeWindow} from "@/components/code-window";
 import {useIsMobile} from "@/hooks/use-media-query";
@@ -30,8 +29,8 @@ export const DemoCodeModal: FC<DemoCodeModalProps> = ({isOpen, code, title, subt
 
   const isMobile = useIsMobile();
 
-  const lowerTitle = toLower(title);
-  const fileName = `${toLower(lowerTitle)}.tsx`;
+  const lowerTitle = title.toLowerCase();
+  const fileName = `${lowerTitle}.tsx`;
 
   return (
     <Modal

apps/docs/components/docs/components/code-demo/utils.ts

@@ -1,17 +1,19 @@
-import {get} from "lodash";
-
 import {FileCode} from "./types";
 
 const importRegex = /^(import)\s(?!type(of\s|\s)(?!from)).*?$/gm;
 
 const exportDefaultRegex = /export\s+default\s+function\s+\w+\s*\(\s*\)\s*\{/;
 
-export const transformCode = (code: string, imports = {}, compName = "App") => {
+export const transformCode = (
+  code: string,
+  imports: {[key: string]: any} = {},
+  compName = "App",
+) => {
   let cleanedCode = code
     .replace(importRegex, (match) => {
       // get component name from the match ex. "import { Table } from '@nextui-org/react'"
       const componentName = match.match(/\w+/g)?.[1] || "";
-      const matchingImport = get(imports, componentName);
+      const matchingImport = imports[componentName] || {};
 
       if (matchingImport) {
         // remove the matching import

apps/docs/components/docs/components/codeblock.tsx

@@ -1,7 +1,7 @@
 import React, {forwardRef, useEffect} from "react";
 import {clsx, dataAttr, getUniqueID} from "@nextui-org/shared-utils";
 import BaseHighlight, {Language, PrismTheme, defaultProps} from "prism-react-renderer";
-import {debounce, omit} from "lodash";
+import {debounce, omit} from "@nextui-org/shared-utils";
 
 import defaultTheme from "@/libs/prism-theme";
 

apps/docs/components/docs/components/swatch-colors-set.tsx

@@ -1,10 +1,10 @@
 import {parseToRgba, readableColor} from "color2k";
 import {Button, Tooltip} from "@nextui-org/react";
-import {commonColors, semanticColors} from "@nextui-org/theme";
+import {commonColors, semanticColors, SemanticBaseColors, ThemeColors} from "@nextui-org/theme";
 import {useClipboard} from "@nextui-org/use-clipboard";
 import {useState} from "react";
 import {useTheme} from "next-themes";
-import {get, isEmpty} from "lodash";
+import {isEmpty} from "@nextui-org/shared-utils";
 
 type ColorsItem = {
   color: string;
@@ -106,12 +106,12 @@ const SemanticSwatch = ({
   let value: string = "";
   const [colorName, colorScale] = color.split("-");
 
-  let currentPalette = get(semanticColors, theme ?? "", {});
+  const currentPalette = semanticColors[theme as keyof SemanticBaseColors] || {};
 
   if (!colorScale) {
-    value = get(currentPalette, `${colorName}.DEFAULT`, "");
+    value = (currentPalette[colorName as keyof ThemeColors] as any)?.DEFAULT || "";
   } else {
-    value = get(currentPalette, `${colorName}.${colorScale}`, "");
+    value = (currentPalette[colorName as keyof ThemeColors] as any)?.colorScale || "";
   }
 
   const handleCopy = () => {

apps/docs/components/docs/sidebar.tsx

@@ -18,7 +18,7 @@ import {
   dataFocusVisibleClasses,
 } from "@nextui-org/react";
 import Link from "next/link";
-import {isEmpty} from "lodash";
+import {isEmpty} from "@nextui-org/shared-utils";
 import {usePathname, useRouter} from "next/navigation";
 
 import {ScrollArea} from "../scroll-area";

apps/docs/components/marketing/custom-themes/custom-themes.tsx

@@ -3,7 +3,6 @@
 /* eslint-disable react/display-name */
 import {useMemo, useState} from "react";
 import {Tabs, Tab, Card, CardBody, Image, Button, RadioGroup, Radio} from "@nextui-org/react";
-import get from "lodash/get";
 import NextLink from "next/link";
 import NextImage from "next/image";
 
@@ -238,7 +237,7 @@ export const CustomThemes = () => {
           <CodeWindow
             showWindowIcons
             className="max-h-[440px] min-h-[390px]"
-            highlightLines={get(codeHighlights, selectedTheme)}
+            highlightLines={codeHighlights[selectedTheme]}
             isScrollable={false}
             language="jsx"
             title="tailwind.config.js"

apps/docs/components/marketing/support.tsx

@@ -2,7 +2,7 @@
 
 import {FC, useMemo, useRef} from "react";
 import {Avatar, AvatarProps, Button, Spacer, Tooltip} from "@nextui-org/react";
-import {clamp, get} from "lodash";
+import {clamp} from "@nextui-org/shared-utils";
 
 import {sectionWrapper, titleWrapper, title, subtitle} from "../primitives";
 
@@ -132,9 +132,7 @@ export const Support: FC<SupportProps> = ({sponsors = []}) => {
             size={getSponsorSize(sponsor, isMobile)}
             src={sponsor.image}
             style={getSponsorAvatarStyles(index, sponsors)}
-            onClick={() =>
-              handleExternalLinkClick(get(sponsor, "website") || get(sponsor, "profile"))
-            }
+            onClick={() => handleExternalLinkClick(sponsor["website"] || sponsor["profile"])}
           />
         ))}
       </div>

apps/docs/components/navbar.tsx

@@ -24,7 +24,6 @@ import {isAppleDevice} from "@react-aria/utils";
 import {clsx} from "@nextui-org/shared-utils";
 import NextLink from "next/link";
 import {usePathname} from "next/navigation";
-import {includes} from "lodash";
 import {motion, AnimatePresence} from "framer-motion";
 import {useEffect} from "react";
 import {usePress} from "@react-aria/interactions";
@@ -197,7 +196,7 @@ export const Navbar: FC<NavbarProps> = ({children, routes, mobileRoutes = [], sl
             <NextLink
               className={navLinkClasses}
               color="foreground"
-              data-active={includes(docsPaths, pathname)}
+              data-active={docsPaths.includes(pathname)}
               href="/docs/guide/introduction"
               onClick={() => handlePressNavbarItem("Docs", "/docs/guide/introduction")}
             >
@@ -208,7 +207,7 @@ export const Navbar: FC<NavbarProps> = ({children, routes, mobileRoutes = [], sl
             <NextLink
               className={navLinkClasses}
               color="foreground"
-              data-active={includes(pathname, "components")}
+              data-active={pathname.includes("components")}
               href="/docs/components/avatar"
               onClick={() => handlePressNavbarItem("Components", "/docs/components/avatar")}
             >
@@ -219,7 +218,7 @@ export const Navbar: FC<NavbarProps> = ({children, routes, mobileRoutes = [], sl
             <NextLink
               className={navLinkClasses}
               color="foreground"
-              data-active={includes(pathname, "blog")}
+              data-active={pathname.includes("blog")}
               href="/blog"
               onClick={() => handlePressNavbarItem("Blog", "/blog")}
             >
@@ -230,7 +229,7 @@ export const Navbar: FC<NavbarProps> = ({children, routes, mobileRoutes = [], sl
             <NextLink
               className={navLinkClasses}
               color="foreground"
-              data-active={includes(pathname, "figma")}
+              data-active={pathname.includes("figma")}
               href="/figma"
               onClick={() => handlePressNavbarItem("Figma", "/figma")}
             >

apps/docs/components/sandpack/bugreport-button.tsx

@@ -1,15 +1,15 @@
 import React from "react";
 import {usePathname} from "next/navigation";
 import {Tooltip, Button} from "@nextui-org/react";
-import {capitalize, last} from "lodash";
+import {capitalize} from "@nextui-org/shared-utils";
 
 import {BugIcon} from "@/components/icons";
 import {ISSUE_REPORT_URL} from "@/libs/github/constants";
 
 export const BugReportButton = () => {
   const pathname = usePathname();
 
-  const componentTitle = capitalize(last(pathname?.split("/")));
+  const componentTitle = capitalize(pathname?.split("/")?.at(-1) ?? "");
 
   const handlePress = () => {
     window.open(`${ISSUE_REPORT_URL}${componentTitle}`, "_blank");

apps/docs/content/components/table/custom-styles.ts

@@ -220,8 +220,8 @@ const users = [
 
 export {columns, users, statusOptions};`;
 
-const utils = `export function capitalize(str) {
-  return str.charAt(0).toUpperCase() + str.slice(1);
+const utils = `export function capitalize(s) {
+  return s ? s.charAt(0).toUpperCase() + s.slice(1).toLowerCase() : "";
 }`;
 
 const PlusIcon = `export const PlusIcon = ({size = 24, width, height, ...props}) => (

apps/docs/content/components/table/use-case.ts

@@ -448,8 +448,8 @@ export type IconSvgProps = SVGProps<SVGSVGElement> & {
   size?: number;
 };`;
 
-const utils = `export function capitalize(str) {
-  return str.charAt(0).toUpperCase() + str.slice(1);
+const utils = `export function capitalize(s) {
+  return s ? s.charAt(0).toUpperCase() + s.slice(1).toLowerCase() : "";
 }`;
 
 const PlusIcon = `export const PlusIcon = ({size = 24, width, height, ...props}) => (
@@ -544,8 +544,8 @@ const ChevronDownIcon = `export const ChevronDownIcon = ({strokeWidth = 1.5, ...
   </svg>
 );`;
 
-const utilsTs = `export function capitalize(str: string) {
-  return str.charAt(0).toUpperCase() + str.slice(1);
+const utilsTs = `export function capitalize(s: string) {
+  return s ? s.charAt(0).toUpperCase() + s.slice(1).toLowerCase() : "";
 }`;
 
 const PlusIconTs = `import {IconSvgProps} from "./types";

apps/docs/package.json

@@ -104,7 +104,7 @@
     "@react-types/shared": "3.23.1",
     "@tailwindcss/typography": "^0.5.9",
     "@types/canvas-confetti": "^1.4.2",
-    "@types/lodash": "^4.14.194",
+    "@types/lodash": "^4.17.5",
     "@types/marked": "^5.0.0",
     "@types/mdx": "^2.0.5",
     "@types/node": "20.2.5",

apps/docs/utils/get-sponsors.ts

@@ -1,4 +1,4 @@
-import {uniqBy} from "lodash";
+import {uniqBy} from "@nextui-org/shared-utils";
 import fetch from "node-fetch";
 
 import {__PROD__} from "./env";

packages/components/calendar/package.json

@@ -46,7 +46,6 @@
     "@nextui-org/framer-utils": "workspace:*",
     "@nextui-org/use-aria-button": "workspace:*",
     "@nextui-org/button": "workspace:*",
-    "lodash.debounce": "^4.0.8",
     "@internationalized/date": "^3.5.4",
     "@react-aria/calendar": "3.5.8",
     "@react-aria/focus": "3.17.1",
@@ -59,8 +58,7 @@
     "@react-types/calendar": "3.4.6",
     "@react-aria/interactions": "3.21.3",
     "@react-types/shared": "3.23.1",
-    "scroll-into-view-if-needed": "3.0.10",
-    "@types/lodash.debounce": "^4.0.7"
+    "scroll-into-view-if-needed": "3.0.10"
   },
   "devDependencies": {
     "@nextui-org/system": "workspace:*",

packages/components/calendar/src/use-calendar-picker.ts

@@ -4,8 +4,8 @@ import type {PressEvent} from "@react-types/shared";
 import {useDateFormatter} from "@react-aria/i18n";
 import {HTMLNextUIProps} from "@nextui-org/system";
 import {useCallback, useRef, useEffect} from "react";
-import debounce from "lodash.debounce";
 import {areRectsIntersecting} from "@nextui-org/react-utils";
+import {debounce} from "@nextui-org/shared-utils";
 import scrollIntoView from "scroll-into-view-if-needed";
 
 import {getMonthsInYear, getYearRange} from "./utils";

packages/core/theme/__tests__/semantic-colors.test.ts

@@ -1,5 +1,4 @@
 import {getContrast} from "color2k";
-import get from "lodash.get";
 
 import {semanticColors} from "../src/colors/semantic";
 
@@ -8,10 +7,13 @@ type Guideline = keyof typeof guidelines;
 const guidelines = {decorative: 1.5, readable: 3, aa: 4.5, aaa: 7};
 const targetGuideline: Guideline = "readable";
 
-const testGoodContrast = (colorPath: string, backgroundPath: string, standard: Guideline) => {
-  const color = get(semanticColors, colorPath);
-  const background = get(semanticColors, backgroundPath);
-
+const testGoodContrast = (
+  colorPath: string,
+  color: string,
+  backgroundPath: string,
+  background: string,
+  standard: Guideline,
+) => {
   it(`${colorPath}(${color}) has enough contrast with ${backgroundPath}(${background}) to be ${standard}`, () => {
     expect(getContrast(color, background)).toBeGreaterThanOrEqual(guidelines[standard]);
   });
@@ -20,14 +22,44 @@ const testGoodContrast = (colorPath: string, backgroundPath: string, standard: G
 describe("semanticColors", () => {
   ["light", "dark"].forEach((mode) => {
     describe(mode, () => {
-      testGoodContrast(`${mode}.divider.DEFAULT`, `${mode}.background.DEFAULT`, "decorative");
-      testGoodContrast(`${mode}.foreground.DEFAULT`, `${mode}.background.DEFAULT`, targetGuideline);
+      testGoodContrast(
+        `${mode}.divider.DEFAULT`,
+        semanticColors[mode]?.divider?.DEFAULT,
+        `${mode}.background.DEFAULT`,
+        semanticColors[mode]?.background?.DEFAULT,
+        "decorative",
+      );
+      testGoodContrast(
+        `${mode}.foreground.DEFAULT`,
+        semanticColors[mode]?.foreground?.DEFAULT,
+        `${mode}.background.DEFAULT`,
+        semanticColors[mode]?.background?.DEFAULT,
+        targetGuideline,
+      );
       ["default", "content1", "content2", "content3", "content4"].forEach((name) => {
-        testGoodContrast(`${mode}.foreground.DEFAULT`, `${mode}.${name}.DEFAULT`, targetGuideline);
-        testGoodContrast(`${mode}.${name}.foreground`, `${mode}.${name}.DEFAULT`, targetGuideline);
+        testGoodContrast(
+          `${mode}.foreground.DEFAULT`,
+          semanticColors[mode]?.foreground?.DEFAULT,
+          `${mode}.${name}.DEFAULT`,
+          semanticColors[mode]?.[name]?.DEFAULT,
+          targetGuideline,
+        );
+        testGoodContrast(
+          `${mode}.${name}.foreground`,
+          semanticColors[mode]?.[name]?.foreground,
+          `${mode}.${name}.DEFAULT`,
+          semanticColors[mode]?.[name]?.DEFAULT,
+          targetGuideline,
+        );
       });
       ["primary", "secondary", "success", "warning", "danger"].forEach((name) => {
-        testGoodContrast(`${mode}.${name}.foreground`, `${mode}.${name}.DEFAULT`, targetGuideline);
+        testGoodContrast(
+          `${mode}.${name}.foreground`,
+          semanticColors[mode]?.[name]?.foreground,
+          `${mode}.${name}.DEFAULT`,
+          semanticColors[mode]?.[name]?.DEFAULT,
+          targetGuideline,
+        );
       });
     });
   });