Typescript Updates

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@code4rena/components-library",
-  "version": "4.0.1",
+  "version": "4.0.2",
   "description": "Code4rena's official components library ",
   "types": "./dist/lib.d.ts",
   "exports": {

src/lib/Alert/Alert.tsx

@@ -23,15 +23,15 @@ import { Icon } from "../Icon";
  * @param className - String of custom classes to extend the default styling of the component.
  * @param id - HTML element identifier
  */
-export const Alert: React.FC<AlertProps> = ({
+export const Alert = ({
   title = "",
   message,
   redirectLabel = "",
   redirectUrl = "",
   variant = AlertVariant.INFO,
   className = "",
   id = "",
-}) => {
+}: AlertProps) => {
   const styling = clsx({
     c4alert: true,
     "alert--info": variant === AlertVariant.INFO,

src/lib/Avatar/Avatar.tsx

@@ -59,12 +59,12 @@ const generateColor = (str: string) => {
  * @param size - The size of the avatar in pixels.
  * @param round - The border-radius of the avatar in pixels. Use this to make the avatar round.
  */
-export const Avatar: React.FC<AvatarProps> = ({
+export const Avatar = ({
   imgElement,
   name,
   size,
   round,
-}) => {
+}: AvatarProps) => {
   const clonedImgElement = imgElement
     ? cloneElement(imgElement, {
         className: "avatar__image",

src/lib/Button/Button.tsx

@@ -24,7 +24,7 @@ import "./Button.scss";
  * @param className - String of custom classes to extend the default styling of the component.
  * @param id - HTML element identifier.
  */
-export const Button: React.FC<ButtonProps> = ({
+export const Button = ({
   label,
   type = ButtonType.BUTTON,
   variant = ButtonVariant.PRIMARY,
@@ -37,7 +37,7 @@ export const Button: React.FC<ButtonProps> = ({
   onClick,
   className = "",
   id = "",
-}) => {
+}: ButtonProps) => {
   const styling = clsx({
     c4button: true,
     "button--primary": variant === ButtonVariant.PRIMARY,

src/lib/Card/Card.tsx

@@ -26,7 +26,7 @@ import "./Card.scss";
  * @param title - The title to be rendered at the top of the card body. Can be string or react node.
  * @param cta - A call to action button rendered in the top right corner. Includes text and an onClick handler.
  */
-export const Card: React.FC<CardProps> = ({
+export const Card = ({
   children,
   className,
   variants,
@@ -37,7 +37,7 @@ export const Card: React.FC<CardProps> = ({
   imageBorderRadius = CardImageBorderRadius.CIRCLE,
   title,
   cta,
-}) => {
+}: CardProps) => {
   return (
     <div
       className={clsx(

src/lib/ContestStatus/ContestStatus.tsx

@@ -14,11 +14,11 @@ import "./ContestStatus.scss";
  * @param className - String of custom classes to extend the default styling of the component.
  * @param id - HTML element identifier.
  */
-export const ContestStatus: React.FC<ContestStatusProps> = ({
+export const ContestStatus = ({
   status,
   className = "",
   id = "",
-}) => {
+}: ContestStatusProps) => {
   const styling = clsx({
     statusindicator: true,
     upcoming: status === Status.UPCOMING,

src/lib/ContestTile/ContestTile.tsx

@@ -143,7 +143,7 @@ export const Countdown = ({
  * @param title - Title for the current contest.
  * @param description - Description for the current contest.
  */
-export const ContestTile: React.FC<ContestTileProps> = ({
+export const ContestTile = ({
   htmlId = "",
   variant = ContestTileVariant.DARK,
   contestData,
@@ -153,7 +153,7 @@ export const ContestTile: React.FC<ContestTileProps> = ({
   title,
   description,
   hideDropdown = false,
-}) => {
+}: ContestTileProps) => {
   const isDefault =
     variant === ContestTileVariant.DARK || variant === ContestTileVariant.LIGHT;
 

src/lib/EyebrowBar/EyebrowBar.tsx

@@ -11,14 +11,14 @@ import "./EyebrowBar.scss";
  * @param id - HTML element identifier.
  * @param text - Main text displayed in the component.
  */
-export const EyebrowBar: React.FC<EyebrowBarProps> = ({
+export const EyebrowBar = ({
   buttonLabel = "Learn more",
   className = undefined,
   external = false,
   href = undefined,
   id = undefined,
   text,
-}) => {
+}: EyebrowBarProps) => {
   return (
     <div id={id} className={`eyebrowbar ${className ?? ""}`}>
       <p className="eyebrowbar--content">

src/lib/Icon/Icon.tsx

@@ -17,12 +17,12 @@ const getIcon = (name: string, size: string, color: string, className?: string)
  * @param color - Color value to decorate the icon with.
  * @param className - Custom classes to be attached to the icon.
  */
-export const Icon: React.FC<IconProps> = ({
+export const Icon = ({
     name,
     size = "medium",
     color = "black",
     className
-}) => {
+}: IconProps) => {
     let sizeInPx = "24px";
 
     switch (size) {

src/lib/Input/Input.tsx

@@ -74,7 +74,7 @@ const mappedTypes = (
  * @param validator - A custom function for running additional validation on an input value. Should return an array of error messages (if any).
  * @param value - Current value of input field as tracked by state. This does not apply to the SELECT field variant (please see the `selectValue` parameter).
  */
-export const Input: React.FC<InputProps> = ({
+export const Input = ({
   inputId,
   fieldType = "text",
   isMultiSelect = false,
@@ -91,7 +91,7 @@ export const Input: React.FC<InputProps> = ({
   validator,
   value,
   onChange,
-}) => {
+}: InputProps) => {
   const fieldTypeClassName = clsx({
     c4input: true,
     "c4input--field": variant === InputVariant.FIELD,

src/lib/Input/Input.types.ts

@@ -31,7 +31,7 @@ export type InputArgs = {
 export type CustomArgs = {
   isMulti?: boolean;
   selectOptions: SelectOption[];
-  selectValue?: string | number;
+  selectValue?: string | number | MultiValue<SelectOption>;
   handleChange: (
     option:
       | SingleValue<string | number | SelectOption>
@@ -76,11 +76,11 @@ export interface InputProps {
   /** (SELECT variant only) An array of options to be displayed in the select field dropdown. Option should be of the form `{ label: string, value: string }`. */
   selectOptions?: SelectOption[];
   /** (SELECT variant only) - Current value of select field tracked by state. */
-  selectValue?: string | number;
+  selectValue?: string | number | MultiValue<SelectOption>;
   /** Value determining the type of input field to be rendered. */
   variant: InputVariant;
   /** A custom function for running additional validation on an input value. Should return an array of error messages (if any). */
-  validator?: (value: string | number | undefined) => (string | ReactNode)[];
+  validator?: (value: string | number | MultiValue<SelectOption> | undefined) => (string | ReactNode)[];
   /** Current value of input field as tracked by state. This does not apply to the SELECT field variant (please see the `selectValue` parameter). */
   value?: string;
 }

src/lib/NavBar/NavBar.tsx

@@ -156,7 +156,7 @@ const Login = ({
  * @param hideConnectWalletDropdown - Boolean determining whether the login/logout dropdown should be visible/hidden.
  * @param navLinks - List of links to be rendered in the navigation bar. Array of object type `NavigationLink` which accepts the properties `label: string`, `href: string`, `external: boolean`.
  */
-export const NavBar: React.FC<NavBarProps> = ({
+export const NavBar = ({
   id,
   className,
   isLoggedIn = false,
@@ -167,7 +167,7 @@ export const NavBar: React.FC<NavBarProps> = ({
   loginHandler,
   modalHandler,
   navLinks = [],
-}) => {
+}: NavBarProps) => {
   const [mobileNavOpen, setMobileNavOpen] = useState(false);
 
   const hideMobileNav = () => {

src/lib/Tag/Tag.tsx

@@ -21,14 +21,14 @@ import "./Tag.scss";
  * @param className - String of custom classes to extend the default styling of the component.
  * @param id - HTML element identifier.
  */
-export const Tag: React.FC<TagProps> = ({
+export const Tag = ({
   variant = TagVariant.DEFAULT,
   size = TagSize.NARROW,
   iconLeft = undefined,
   label,
   className = "",
   id = "",
-}) => {
+}: TagProps) => {
   const styling = clsx({
     c4tag: true,
     "tag--white": variant === TagVariant.WHITE,