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

@@ -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;
   }
 

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;
   }
 

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;
   }
 

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;
   }
 

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;
   }
 

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;
   }
 

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({

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);

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));
+}