perf: remove lodash

apps/app/package.json

@@ -34,11 +34,11 @@
     "react-router-dom": "^6.20.1",
     "reactflow": "^11.10.1",
     "swr": "^2.2.4",
+    "usehooks-ts": "^2.16.0",
     "yup": "^1.3.2"
   },
   "devDependencies": {
     "@hitachivantara/uikit-uno-preset": "*",
-    "@types/lodash": "^4.14.202",
     "@types/react": "^18.2.43",
     "@types/react-dom": "^18.2.17",
     "@vitejs/plugin-react": "^4.2.1",

apps/app/src/components/components/Controls/makedata.ts

@@ -1,5 +1,4 @@
 import { HvTableColumnConfig } from "@hitachivantara/uikit-react-core";
-import range from "lodash/range";
 
 export interface NewEntry {
   id: string;
@@ -43,7 +42,7 @@ const newEntry = (i: number): NewEntry => {
   };
 };
 
-export const makeData = (len = 10) => range(len).map(newEntry);
+export const makeData = (len = 10) => [...Array(len).keys()].map(newEntry);
 
 export const getColumns = (): HvTableColumnConfig<NewEntry, string>[] => [
   { Header: "Title", accessor: "name", style: { minWidth: 220 } },

apps/app/src/generator/CodeEditor/CodeEditor.tsx

@@ -1,6 +1,6 @@
 import { Dispatch, SetStateAction, useEffect, useState } from "react";
 import { css } from "@emotion/css";
-import debounce from "lodash/debounce";
+import { useDebounceCallback } from "usehooks-ts";
 import JSON5 from "json5";
 import { HvIconButton, useTheme } from "@hitachivantara/uikit-react-core";
 import { Download, Reset, Duplicate } from "@hitachivantara/uikit-react-icons";
@@ -89,7 +89,7 @@ const CodeEditor = ({
     }
   };
 
-  const debouncedHandler = debounce(codeChangedHandler, 1000);
+  const debouncedHandler = useDebounceCallback(codeChangedHandler, 1000);
 
   return (
     <div className="relative">

apps/app/src/generator/GeneratorContext.tsx

@@ -12,8 +12,11 @@ import {
   DeepPartial,
   HvTheme,
 } from "@hitachivantara/uikit-react-core";
-import { HvBaseTheme, HvThemeStructure } from "@hitachivantara/uikit-styles";
-import merge from "lodash/merge";
+import {
+  HvBaseTheme,
+  HvThemeStructure,
+  mergeTheme,
+} from "@hitachivantara/uikit-styles";
 
 import { themeDiff } from "./utils";
 
@@ -86,14 +89,13 @@ const GeneratorProvider = ({ children }: { children: React.ReactNode }) => {
         if (!isBaseChange) {
           if (!isCodeEdit) {
             const diff = themeDiff(prev, changes);
-            return merge({}, prev, diff);
+            return mergeTheme(prev, diff);
           }
           newTheme = createTheme({
             base: changes.base as HvBaseTheme,
             name: prev.name,
           });
-          const merged = merge({}, newTheme, changes);
-          return merged;
+          return mergeTheme(newTheme, changes);
         }
 
         newTheme = createTheme({
@@ -107,9 +109,7 @@ const GeneratorProvider = ({ children }: { children: React.ReactNode }) => {
       // Update theme changes
       if (updateThemeChanges) {
         if (!isCodeEdit) {
-          setThemeChanges((prev) => {
-            return merge({}, prev, changes);
-          });
+          setThemeChanges((prev) => mergeTheme(prev, changes));
         } else {
           setThemeChanges(changes);
         }

apps/app/src/generator/Typography/Typography.tsx

@@ -10,8 +10,7 @@ import {
 } from "@hitachivantara/uikit-react-core";
 import { HvThemeTokens, HvThemeTypography } from "@hitachivantara/uikit-styles";
 
-import debounce from "lodash/debounce";
-
+import { useDebounceCallback } from "usehooks-ts";
 import { css } from "@emotion/css";
 
 import { extractFontSizeUnit } from "~/generator/utils";
@@ -257,7 +256,10 @@ const Typography = () => {
     });
   };
 
-  const debouncedColorChangedHandler = debounce(colorChangedHandler, 250);
+  const debouncedColorChangedHandler = useDebounceCallback(
+    colorChangedHandler,
+    250
+  );
 
   return (
     <div className="flex flex-col w-full">