From 8bccb3f88af0805b4222bb5b3f69b5041f938c7c Mon Sep 17 00:00:00 2001
From: Sean Barag <barag@cockroachlabs.com>
Date: Fri, 15 Sep 2023 10:12:35 -0700
Subject: [PATCH] deps: reduce lodash usage

All of lodash.js is currently included when ui-components gets bundled,
but only _.camelCase is actually necessary. Remove two unnecessary
lodash functions:

* _.get was only used to provide a fallback for a top-level property,
  and is equivalent to Foo[bar].
* _.isEmpty was only called for a string | React.Component, and is
  equivalent to str !== ""

All that remains is _.camelCase, which is now imported via
'lodash/camelCase' to avoid depending on the entire lodash.js file.
---
 packages/ui-components/src/Icon/CreditCard.tsx          | 7 +++----
 packages/ui-components/src/Icon/Flag.tsx                | 7 +++----
 packages/ui-components/src/Icon/Icon.tsx                | 5 ++---
 packages/ui-components/src/Icon/Illustration.tsx        | 7 +++----
 packages/ui-components/src/Icon/Pictogram.tsx           | 5 ++---
 packages/ui-components/src/Icon/ThirdPartyIcon.tsx      | 8 ++++----
 packages/ui-components/src/Input/TextTypeInput.tsx      | 3 +--
 packages/ui-components/src/utils/upperCamelCase.test.ts | 4 ----
 packages/ui-components/src/utils/upperCamelCase.ts      | 7 +++----
 9 files changed, 21 insertions(+), 32 deletions(-)

diff --git a/packages/ui-components/src/Icon/CreditCard.tsx b/packages/ui-components/src/Icon/CreditCard.tsx
index e78a32703..0205ca001 100644
--- a/packages/ui-components/src/Icon/CreditCard.tsx
+++ b/packages/ui-components/src/Icon/CreditCard.tsx
@@ -1,6 +1,5 @@
 import React, { useMemo, SVGProps } from "react";
 import classnames from "classnames/bind";
-import get from "lodash/get";
 
 import { Cards } from "@cockroachlabs/icons";
 import styles from "./card.module.scss";
@@ -14,7 +13,7 @@ type OwnCreditCardProps = {
   size?: CreditCardSize;
 };
 
-export type CreditCardProps = SVGProps<SVGElement> & OwnCreditCardProps;
+export type CreditCardProps = SVGProps<SVGSVGElement> & OwnCreditCardProps;
 
 const cx = classnames.bind(styles);
 
@@ -28,9 +27,9 @@ export const CreditCard = ({
     () => cx("card", objectToClassNames({ size }), className),
     [className, size],
   );
-  const Element = get(Cards, creditCardName, null);
+  const Element = Cards[creditCardName];
 
-  if (Element === null) {
+  if (Element == null) {
     return null;
   }
 
diff --git a/packages/ui-components/src/Icon/Flag.tsx b/packages/ui-components/src/Icon/Flag.tsx
index e7a5db62a..1d0ee7cbc 100644
--- a/packages/ui-components/src/Icon/Flag.tsx
+++ b/packages/ui-components/src/Icon/Flag.tsx
@@ -1,6 +1,5 @@
 import React, { useMemo, SVGProps } from "react";
 import classnames from "classnames/bind";
-import get from "lodash/get";
 
 import { Flags } from "@cockroachlabs/icons";
 import styles from "./card.module.scss";
@@ -23,7 +22,7 @@ type OwnFlagPropsWithCountryCode = {
   countryCode: string;
 };
 
-export type FlagProps = SVGProps<SVGElement> &
+export type FlagProps = SVGProps<SVGSVGElement> &
   OwnBaseFlagProps &
   (OwnFlagPropsWithFlagName | OwnFlagPropsWithCountryCode);
 
@@ -73,9 +72,9 @@ export const Flag = ({
     [className, size],
   );
   const flagName = flagNameProp || getFlagNameFromCountryCode(countryCode);
-  const Element = get(Flags, flagName, null);
+  const Element = Flags[flagName];
 
-  if (Element === null) {
+  if (Element == null) {
     return null;
   }
 
diff --git a/packages/ui-components/src/Icon/Icon.tsx b/packages/ui-components/src/Icon/Icon.tsx
index 5b2e3ece4..07b6cecaa 100644
--- a/packages/ui-components/src/Icon/Icon.tsx
+++ b/packages/ui-components/src/Icon/Icon.tsx
@@ -1,6 +1,5 @@
 import React, { useMemo } from "react";
 import classNames from "classnames/bind";
-import get from "lodash/get";
 
 import { SystemIcons } from "@cockroachlabs/icons";
 import styles from "./Icon.module.scss";
@@ -55,9 +54,9 @@ export const Icon = ({
     () => cx("icon", objectToClassnames({ size, fill }), className),
     [className, size, fill],
   );
-  const Element = get(SystemIcons, iconName, null);
+  const Element = SystemIcons[iconName];
 
-  if (Element === null) {
+  if (Element == null) {
     return null;
   }
 
diff --git a/packages/ui-components/src/Icon/Illustration.tsx b/packages/ui-components/src/Icon/Illustration.tsx
index fa7c6f9dd..9900833cc 100644
--- a/packages/ui-components/src/Icon/Illustration.tsx
+++ b/packages/ui-components/src/Icon/Illustration.tsx
@@ -1,6 +1,5 @@
 import React, { useMemo, SVGProps } from "react";
 import classnames from "classnames/bind";
-import get from "lodash/get";
 
 import { Illustrations } from "@cockroachlabs/icons";
 import styles from "./Illustration.module.scss";
@@ -9,7 +8,7 @@ type OwnIllustrationProps = {
   illustrationName: keyof typeof Illustrations;
 };
 
-export type IllustrationProps = SVGProps<SVGAElement> & OwnIllustrationProps;
+export type IllustrationProps = SVGProps<SVGSVGElement> & OwnIllustrationProps;
 
 const cx = classnames.bind(styles);
 
@@ -20,9 +19,9 @@ export const Illustration = ({
 }: IllustrationProps) => {
   const classNames = useMemo(() => cx("illustration", className), [className]);
 
-  const Element = get(Illustrations, illustrationName, null);
+  const Element = Illustrations[illustrationName];
 
-  if (Element === null) {
+  if (Element == null) {
     return null;
   }
 
diff --git a/packages/ui-components/src/Icon/Pictogram.tsx b/packages/ui-components/src/Icon/Pictogram.tsx
index 90af66226..a72985cbf 100644
--- a/packages/ui-components/src/Icon/Pictogram.tsx
+++ b/packages/ui-components/src/Icon/Pictogram.tsx
@@ -1,6 +1,5 @@
 import React, { useMemo } from "react";
 import classnames from "classnames/bind";
-import get from "lodash/get";
 
 import { Pictograms } from "@cockroachlabs/icons";
 import styles from "./Pictogram.module.scss";
@@ -35,9 +34,9 @@ export const Pictogram = ({
     () => cx("pictogram", objectToClassNames({ size, fill }), className),
     [className, size, fill],
   );
-  const Element = get(Pictograms, pictogramName, null);
+  const Element = Pictograms[pictogramName];
 
-  if (Element === null) {
+  if (Element == null) {
     return null;
   }
 
diff --git a/packages/ui-components/src/Icon/ThirdPartyIcon.tsx b/packages/ui-components/src/Icon/ThirdPartyIcon.tsx
index 5cb8ccd43..91b711bbc 100644
--- a/packages/ui-components/src/Icon/ThirdPartyIcon.tsx
+++ b/packages/ui-components/src/Icon/ThirdPartyIcon.tsx
@@ -1,6 +1,5 @@
 import React, { useMemo, SVGProps } from "react";
 import classnames from "classnames/bind";
-import get from "lodash/get";
 
 import { ThirdParty } from "@cockroachlabs/icons";
 import styles from "./ThirdPartyIcon.module.scss";
@@ -14,7 +13,8 @@ type OwnThirdPartyIconProps = {
   size?: ThirdPartySize;
 };
 
-export type ThirdPartyIconProps = SVGProps<SVGElement> & OwnThirdPartyIconProps;
+export type ThirdPartyIconProps = SVGProps<SVGSVGElement> &
+  OwnThirdPartyIconProps;
 
 const cx = classnames.bind(styles);
 
@@ -28,9 +28,9 @@ export const ThirdPartyIcon = ({
     () => cx("icon", objectToClassNames({ size }), className),
     [className, size],
   );
-  const Element = get(ThirdParty, iconName, null);
+  const Element = ThirdParty[iconName];
 
-  if (Element === null) {
+  if (Element == null) {
     return null;
   }
 
diff --git a/packages/ui-components/src/Input/TextTypeInput.tsx b/packages/ui-components/src/Input/TextTypeInput.tsx
index 4986f5720..067fead9e 100644
--- a/packages/ui-components/src/Input/TextTypeInput.tsx
+++ b/packages/ui-components/src/Input/TextTypeInput.tsx
@@ -1,7 +1,6 @@
 import React from "react";
 import classNames from "classnames";
 import { CommonInputProps, CommonInput } from "./CommonInput";
-import { isEmpty } from "lodash";
 import "./input.module.scss";
 
 export interface TextAndNumberProps
@@ -82,7 +81,7 @@ export const BaseTextInput: React.FC<InternalTextProps> = (props) => {
 
   const labelDiv = (
     <>
-      {!isEmpty(label) && (
+      {label !== "" && (
         <label
           aria-label={name}
           className={classNames({
diff --git a/packages/ui-components/src/utils/upperCamelCase.test.ts b/packages/ui-components/src/utils/upperCamelCase.test.ts
index 593568c5f..f4d747d0d 100644
--- a/packages/ui-components/src/utils/upperCamelCase.test.ts
+++ b/packages/ui-components/src/utils/upperCamelCase.test.ts
@@ -1,10 +1,6 @@
 import upperCamelCase from "./upperCamelCase";
 
 describe("upperCamelCase", () => {
-  test("should be a function", () => {
-    expect(typeof upperCamelCase).toBe("function");
-  });
-
   test("should convert a sausage case string to an UpperCamelCase string", () => {
     const testString = "cockroach-labs-serverless-database-service";
     const result = upperCamelCase(testString);
diff --git a/packages/ui-components/src/utils/upperCamelCase.ts b/packages/ui-components/src/utils/upperCamelCase.ts
index 91bc75295..abee372fb 100644
--- a/packages/ui-components/src/utils/upperCamelCase.ts
+++ b/packages/ui-components/src/utils/upperCamelCase.ts
@@ -1,6 +1,5 @@
-import upperFirst from "lodash/upperFirst";
 import camelCase from "lodash/camelCase";
 
-const upperCamelCase = (s: string) => upperFirst(camelCase(s));
-
-export default upperCamelCase;
+export default function upperCamelCase(s: string) {
+  return s.charAt(0).toUpperCase() + camelCase(s.slice(1));
+}