refactor: optimisations (#3523)

* refactor: replace lodash with native approaches * refactor(deps): update framer-motion versions * feat(utilities): add @nextui-org/dom-animation * refactor(components): load domAnimation dynamically * refactor(deps): add @nextui-org/dom-animation * fix(utilities): relocate index.ts * feat(changeset): framer motion optimization * chore(deps): bump framer-motion version * fix(docs): conflict issue * refactor(hooks): remove the unnecessary this aliasing * refactor(utilities): remove the unnecessary this aliasing * chore(docs): remove {} so that it won't be true all the time * chore(dom-animation): end with new line * refactor(hooks): use debounce from `@nextui-org/shared-utils` * chore(deps): add `@nextui-org/shared-utils` * refactor: move mapKeys logic to `@nextui-org/shared-utils` * refactor: use `get` from `@nextui-org/shared-utils` * refactor(docs): use `get` from `@nextui-org/shared-utils` * refactor(shared-utils): mapKeys * chore(deps): bump framer-motion version * chore(deps): remove lodash * refactor(docs): use intersectionBy from shared-utils * feat(shared-utils): add intersectionBy * chore(dom-animation): remove extra blank line * refactor(shared-utils): revise intersectionBy * fix(modal): add willChange * refactor(shared-utils): add comments * fix: build & tests --------- Co-authored-by: Junior Garcia <jrgarciadev@gmail.com>
nextui-org · Nov 6, 2024 · d0888f6 · d0888f6
1 parent 6a2cf7d
commit d0888f6
Show file tree

Hide file tree

Showing 61 changed files with 776 additions and 390 deletions.
diff --git a/.changeset/mean-mangos-occur.md b/.changeset/mean-mangos-occur.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
diff --git a/.changeset/swift-news-complain.md b/.changeset/swift-news-complain.md
@@ -0,0 +1,15 @@
+---
+"@nextui-org/accordion": patch
+"@nextui-org/calendar": patch
+"@nextui-org/modal": patch
+"@nextui-org/navbar": patch
+"@nextui-org/popover": patch
+"@nextui-org/ripple": patch
+"@nextui-org/tooltip": patch
+"@nextui-org/theme": patch
+"@nextui-org/use-infinite-scroll": patch
+"@nextui-org/dom-animation": patch
+"@nextui-org/shared-utils": patch
+---
+
+framer motion optimization (#3340)
diff --git a/.changeset/thirty-cheetahs-guess.md b/.changeset/thirty-cheetahs-guess.md
@@ -0,0 +1,20 @@
+---
+"@nextui-org/accordion": patch
+"@nextui-org/autocomplete": patch
+"@nextui-org/button": patch
+"@nextui-org/calendar": patch
+"@nextui-org/card": patch
+"@nextui-org/dropdown": patch
+"@nextui-org/modal": patch
+"@nextui-org/navbar": patch
+"@nextui-org/popover": patch
+"@nextui-org/ripple": patch
+"@nextui-org/select": patch
+"@nextui-org/snippet": patch
+"@nextui-org/tabs": patch
+"@nextui-org/tooltip": patch
+"@nextui-org/system": patch
+"@nextui-org/framer-utils": patch
+---
+
+update `framer-motion` versions
diff --git a/apps/docs/app/examples/table/custom-styles/page.tsx b/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";

diff --git a/apps/docs/app/examples/table/use-case/page.tsx b/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";

diff --git a/apps/docs/components/cmdk.tsx b/apps/docs/components/cmdk.tsx
@@ -13,7 +13,7 @@ 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, intersectionBy} from "@nextui-org/shared-utils";
 import {writeStorage, useLocalStorage} from "@rehooks/local-storage";
 
 import {

diff --git a/apps/docs/components/demo-code-modal.tsx b/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

diff --git a/apps/docs/components/docs/components/code-demo/utils.ts b/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

diff --git a/apps/docs/components/docs/components/codeblock.tsx b/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";
 

diff --git a/apps/docs/components/docs/components/swatch-colors-set.tsx b/apps/docs/components/docs/components/swatch-colors-set.tsx
@@ -4,7 +4,7 @@ import {commonColors, semanticColors} 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 {get, isEmpty} from "@nextui-org/shared-utils";
 
 type ColorsItem = {
   color: string;
@@ -106,7 +106,7 @@ const SemanticSwatch = ({
   let value: string = "";
   const [colorName, colorScale] = color.split("-");
 
-  let currentPalette = get(semanticColors, theme ?? "", {});
+  const currentPalette = get(semanticColors, theme ?? "", {});
 
   if (!colorScale) {
     value = get(currentPalette, `${colorName}.DEFAULT`, "");

diff --git a/apps/docs/components/docs/sidebar.tsx b/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";

diff --git a/apps/docs/components/marketing/custom-themes/custom-themes.tsx b/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"

diff --git a/apps/docs/components/marketing/support.tsx b/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>

diff --git a/apps/docs/components/navbar.tsx b/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/accordion"
               onClick={() => handlePressNavbarItem("Components", "/docs/components/accordion")}
             >
@@ -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")}
             >

diff --git a/apps/docs/components/sandpack/bugreport-button.tsx b/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");

diff --git a/apps/docs/components/sandpack/use-sandpack.ts b/apps/docs/components/sandpack/use-sandpack.ts
@@ -70,7 +70,7 @@ export const useSandpack = ({
   }, {});
 
   let dependencies = {
-    "framer-motion": "11.0.22",
+    "framer-motion": "11.9.0",
     "@nextui-org/react": "latest",
   };
 
@@ -143,7 +143,7 @@ export const useSandpack = ({
 
   // const dependencies = useMemo(() => {
   //   let deps = {
-  //     "framer-motion": "11.0.22",
+  //     "framer-motion": "11.9.0",
   //   };
 
   //   if (hasComponents) {

diff --git a/apps/docs/content/components/table/custom-styles.ts b/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}) => (

diff --git a/apps/docs/content/components/table/use-case.ts b/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";

diff --git a/apps/docs/package.json b/apps/docs/package.json
@@ -55,11 +55,10 @@
     "color2k": "^2.0.2",
     "contentlayer2": "^0.5.1",
     "date-fns": "^2.30.0",
-    "framer-motion": "^11.1.7",
+    "framer-motion": "11.9.0",
     "github-slugger": "^2.0.0",
     "gray-matter": "^4.0.3",
     "hast-util-to-html": "9.0.3",
-    "lodash": "^4.17.21",
     "marked": "^5.1.0",
     "match-sorter": "^6.3.1",
     "mini-svg-data-uri": "^1.4.3",
@@ -102,7 +101,6 @@
     "@react-types/shared": "3.24.1",
     "@tailwindcss/typography": "^0.5.9",
     "@types/canvas-confetti": "^1.4.2",
-    "@types/lodash": "^4.14.194",
     "@types/marked": "^5.0.0",
     "@types/mdx": "^2.0.5",
     "@types/node": "20.2.5",

diff --git a/apps/docs/utils/get-sponsors.ts b/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";

diff --git a/packages/components/accordion/package.json b/packages/components/accordion/package.json
@@ -42,7 +42,7 @@
   "peerDependencies": {
     "react": ">=18",
     "react-dom": ">=18",
-    "framer-motion": ">=10.17.0",
+    "framer-motion": ">=11.5.6",
     "@nextui-org/theme": ">=2.1.0",
     "@nextui-org/system": ">=2.0.0"
   },
@@ -54,6 +54,7 @@
     "@nextui-org/framer-utils": "workspace:*",
     "@nextui-org/divider": "workspace:*",
     "@nextui-org/use-aria-accordion": "workspace:*",
+    "@nextui-org/dom-animation": "workspace:*",
     "@react-aria/interactions": "3.22.2",
     "@react-aria/focus": "3.18.2",
     "@react-aria/utils": "3.25.2",
@@ -69,7 +70,7 @@
     "@nextui-org/avatar": "workspace:*",
     "@nextui-org/input": "workspace:*",
     "@nextui-org/test-utils": "workspace:*",
-    "framer-motion": "^11.0.22",
+    "framer-motion": "11.9.0",
     "clean-package": "2.2.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0"

diff --git a/packages/components/accordion/src/accordion-item.tsx b/packages/components/accordion/src/accordion-item.tsx
@@ -3,13 +3,15 @@ import type {Variants} from "framer-motion";
 import {forwardRef} from "@nextui-org/system";
 import {useMemo, ReactNode} from "react";
 import {ChevronIcon} from "@nextui-org/shared-icons";
-import {AnimatePresence, LazyMotion, domAnimation, m, useWillChange} from "framer-motion";
+import {AnimatePresence, LazyMotion, m, useWillChange} from "framer-motion";
 import {TRANSITION_VARIANTS} from "@nextui-org/framer-utils";
 
 import {UseAccordionItemProps, useAccordionItem} from "./use-accordion-item";
 
 export interface AccordionItemProps extends UseAccordionItemProps {}
 
+const domAnimation = () => import("@nextui-org/dom-animation").then((res) => res.default);
+
 const AccordionItem = forwardRef<"button", AccordionItemProps>((props, ref) => {
   const {
     Component,

diff --git a/packages/components/autocomplete/package.json b/packages/components/autocomplete/package.json
@@ -36,7 +36,7 @@
   "peerDependencies": {
     "@nextui-org/system": ">=2.0.0",
     "@nextui-org/theme": ">=2.1.0",
-    "framer-motion": ">=10.17.0",
+    "framer-motion": ">=11.5.6",
     "react": ">=18",
     "react-dom": ">=18"
   },
@@ -73,7 +73,7 @@
     "@nextui-org/use-infinite-scroll": "workspace:*",
     "@react-stately/data": "3.11.6",
     "clean-package": "2.2.0",
-    "framer-motion": "^11.0.28",
+    "framer-motion": "11.9.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "react-hook-form": "^7.51.3"

diff --git a/packages/components/button/package.json b/packages/components/button/package.json
@@ -36,7 +36,7 @@
   "peerDependencies": {
     "react": ">=18",
     "react-dom": ">=18",
-    "framer-motion": ">=10.17.0",
+    "framer-motion": ">=11.5.6",
     "@nextui-org/theme": ">=2.1.0",
     "@nextui-org/system": ">=2.0.0"
   },