Migrate defaultProps to JS default params

This PR migrates all use of defaultProps to JS default params

Closes #30

Author: SamusElderg

src/lib/Alert/Alert.tsx

@@ -25,13 +25,13 @@ import "./Alert.scss";
  * @param id - HTML element identifier
  */
 export const Alert: React.FC<AlertProps> = ({
-  title,
+  title = "",
   message,
-  redirectLabel,
-  redirectUrl,
-  variant,
-  className,
-  id,
+  redirectLabel = "",
+  redirectUrl = "",
+  variant = AlertVariant.INFO,
+  className = "",
+  id = "",
 }) => {
   const styling = clsx({
     c4alert: true,
@@ -73,13 +73,3 @@ export const Alert: React.FC<AlertProps> = ({
     </div>
   );
 };
-
-Alert.defaultProps = {
-  title: "",
-  redirectLabel: "",
-  redirectUrl: "",
-  /* @ts-ignore value in Enum */
-  variant: "INFO",
-  className: "",
-  id: "",
-};

src/lib/Button/Button.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import clsx from "clsx";
-import { ButtonProps, ButtonSize, ButtonVariant } from "./Button.types";
+import { ButtonProps, ButtonSize, ButtonType, ButtonVariant } from "./Button.types";
 import "./Button.scss";
 
 /**
@@ -26,17 +26,17 @@ import "./Button.scss";
  */
 export const Button: React.FC<ButtonProps> = ({
   label,
-  type,
-  variant,
-  external,
-  disabled,
-  iconLeft,
-  iconRight,
-  size,
-  href,
+  type = ButtonType.BUTTON,
+  variant = ButtonVariant.PRIMARY,
+  external = false,
+  disabled = false,
+  iconLeft = "",
+  iconRight = "",
+  size = ButtonSize.NARROW,
+  href = "",
   onClick,
-  className,
-  id,
+  className = "",
+  id = "",
 }) => {
   const styling = clsx({
     c4button: true,
@@ -80,20 +80,3 @@ export const Button: React.FC<ButtonProps> = ({
     </button>
   );
 };
-
-Button.defaultProps = {
-  /* @ts-ignore value in Enum */
-  type: "button",
-  /* @ts-ignore value in Enum */
-  variant: "PRIMARY",
-  disabled: false,
-  iconLeft: "",
-  iconRight: "",
-  /* @ts-ignore value in Enum */
-  size: "NARROW",
-  href: "",
-  external: false,
-  onClick: undefined,
-  className: "",
-  id: "",
-};

src/lib/ContestStatus/ContestStatus.tsx

@@ -16,8 +16,8 @@ import "./ContestStatus.scss";
  */
 export const ContestStatus: React.FC<ContestStatusProps> = ({
   status,
-  className,
-  id,
+  className = "",
+  id = "",
 }) => {
   const styling = clsx({
     statusindicator: true,
@@ -38,8 +38,3 @@ export const ContestStatus: React.FC<ContestStatusProps> = ({
     )
   );
 };
-
-ContestStatus.defaultProps = {
-  className: "",
-  id: "",
-};

src/lib/ContestTile/ContestTile.tsx

@@ -7,10 +7,7 @@ import {
 } from "./ContestTile.types";
 import { getDates } from "../../utils/time";
 import { Status } from "../ContestStatus/ContestStatus.types";
-import {
-  formatDistanceToNow,
-  formatDistanceToNowStrict,
-} from "date-fns";
+import { formatDistanceToNow, formatDistanceToNowStrict } from "date-fns";
 import "./ContestTile.scss";
 import CompactTemplate from "./CompactTemplate";
 import DefaultTemplate from "./DefaultTemplate";
@@ -147,58 +144,53 @@ export const Countdown = ({
  * @param description - Description for the current contest.
  */
 export const ContestTile: React.FC<ContestTileProps> = ({
-  htmlId,
-  variant,
+  htmlId = "",
+  variant = ContestTileVariant.DARK,
   contestData,
   bountyData,
-  sponsorImage,
-  sponsorUrl,
+  sponsorImage = undefined,
+  sponsorUrl = undefined,
   title,
   description,
 }) => {
-  const isDefault = variant === ContestTileVariant.DARK || variant === ContestTileVariant.LIGHT;
+  const isDefault =
+    variant === ContestTileVariant.DARK || variant === ContestTileVariant.LIGHT;
 
   useEffect(() => {
     // Loads polyfill to support container queries in older browsers.
     const loadContainerQueryPolyfill = () => {
-      const supportsContainerQueries = "container" in document.documentElement.style;
+      const supportsContainerQueries =
+        "container" in document.documentElement.style;
       if (!supportsContainerQueries) {
         // @ts-ignore
         import("container-query-polyfill");
       }
-    }
+    };
 
     loadContainerQueryPolyfill();
   }, []);
 
-  return (isDefault 
-    ? <DefaultTemplate
-        variant={variant}
-        htmlId={htmlId}
-        title={title}
-        description={description}
-        sponsorImage={sponsorImage}
-        sponsorUrl={sponsorUrl}
-        contestData={contestData}
-        bountyData={bountyData}  
+  return isDefault ? (
+    <DefaultTemplate
+      variant={variant}
+      htmlId={htmlId}
+      title={title}
+      description={description}
+      sponsorImage={sponsorImage}
+      sponsorUrl={sponsorUrl}
+      contestData={contestData}
+      bountyData={bountyData}
     />
-    : <CompactTemplate
-        variant={variant}
-        htmlId={htmlId}
-        title={title}
-        description={description}
-        sponsorImage={sponsorImage}
-        sponsorUrl={sponsorUrl}
-        contestData={contestData}
-        bountyData={bountyData}  
+  ) : (
+    <CompactTemplate
+      variant={variant}
+      htmlId={htmlId}
+      title={title}
+      description={description}
+      sponsorImage={sponsorImage}
+      sponsorUrl={sponsorUrl}
+      contestData={contestData}
+      bountyData={bountyData}
     />
   );
 };
-
-ContestTile.defaultProps = {
-  htmlId: "",
-  /* @ts-ignore */
-  variant: "DARK",
-  sponsorImage: undefined,
-  sponsorUrl: undefined,
-};

src/lib/Dropdown/Dropdown.tsx

@@ -16,12 +16,12 @@ import "./Dropdown.scss";
  */
 export const Dropdown = ({
   id,
-  wrapperClass,
-  triggerButtonClass,
-  openOnHover,
+  wrapperClass = "",
+  triggerButtonClass = "",
+  openOnHover = true,
   triggerButton,
-  triggerAriaLabel,
-  hideDownArrow,
+  triggerAriaLabel = "See more options",
+  hideDownArrow = false,
   children,
 }: DropdownProps) => {
   const [isOpen, setIsOpen] = useState(false);
@@ -70,11 +70,3 @@ export const Dropdown = ({
     </div>
   );
 };
-
-Dropdown.defaultProps = {
-  wrapperClass: "",
-  triggerButtonClass: "",
-  triggerAriaLabel: "See more options",
-  openOnHover: true,
-  hideDownArrow: false,
-};

src/lib/EyebrowBar/EyebrowBar.tsx

@@ -12,11 +12,11 @@ import "./EyebrowBar.scss";
  * @param text - Main text displayed in the component.
  */
 export const EyebrowBar: React.FC<EyebrowBarProps> = ({
-  buttonLabel,
-  className,
-  external,
-  href,
-  id,
+  buttonLabel = "Learn more",
+  className = undefined,
+  external = false,
+  href = undefined,
+  id = undefined,
   text,
 }) => {
   return (
@@ -40,11 +40,3 @@ export const EyebrowBar: React.FC<EyebrowBarProps> = ({
     </div>
   );
 };
-
-EyebrowBar.defaultProps = {
-  buttonLabel: "Learn more",
-  className: undefined,
-  external: false,
-  href: undefined,
-  id: undefined,
-};

src/lib/Input/Input.tsx

@@ -76,17 +76,17 @@ const mappedTypes = (
  */
 export const Input: React.FC<InputProps> = ({
   inputId,
-  fieldType,
-  isMultiSelect,
-  variant,
-  required,
+  fieldType = "text",
+  isMultiSelect = false,
+  variant = InputVariant.FIELD,
+  required = false,
   label,
   helpText,
-  disabled,
+  disabled = false,
   maxLength,
   placeholder,
   selectValue,
-  forceValidation,
+  forceValidation = false,
   selectOptions,
   validator,
   value,
@@ -233,13 +233,3 @@ export const Input: React.FC<InputProps> = ({
     </fieldset>
   );
 };
-
-Input.defaultProps = {
-  disabled: false,
-  fieldType: "text",
-  forceValidation: false,
-  isMultiSelect: false,
-  required: false,
-  // @ts-ignore
-  variant: "FIELD",
-};

src/lib/NavBar/NavBar.tsx

@@ -166,14 +166,14 @@ const Login = ({
 export const NavBar: React.FC<NavBarProps> = ({
   id,
   className,
-  isLoggedIn,
-  userImage,
-  username,
-  hideConnectWalletDropdown,
+  isLoggedIn = false,
+  userImage = "/",
+  username = undefined,
+  hideConnectWalletDropdown = false,
   logoutHandler,
   loginHandler,
   modalHandler,
-  navLinks,
+  navLinks = [],
 }) => {
   const [mobileNavOpen, setMobileNavOpen] = useState(false);
 
@@ -273,11 +273,3 @@ export const NavBar: React.FC<NavBarProps> = ({
     </>
   );
 };
-
-NavBar.defaultProps = {
-  isLoggedIn: false,
-  hideConnectWalletDropdown: false,
-  navLinks: [],
-  username: undefined,
-  userImage: "/",
-};

src/lib/Tag/Tag.tsx

@@ -22,12 +22,12 @@ import "./Tag.scss";
  * @param id - HTML element identifier.
  */
 export const Tag: React.FC<TagProps> = ({
-  variant,
-  size,
-  iconLeft,
+  variant = TagVariant.DEFAULT,
+  size = TagSize.NARROW,
+  iconLeft = "",
   label,
-  className,
-  id,
+  className = "",
+  id = "",
 }) => {
   const styling = clsx({
     c4tag: true,
@@ -47,13 +47,3 @@ export const Tag: React.FC<TagProps> = ({
     </div>
   );
 };
-
-Tag.defaultProps = {
-  /* @ts-ignore value in Enum */
-  variant: "DEFAULT",
-  /* @ts-ignore value in Enum */
-  size: "NARROW",
-  iconLeft: "",
-  className: "",
-  id: "",
-};