Merge pull request #65 from code4rena-dev/leo95oliveira/input-updates

Typescript Updates

Author: leo95oliveira

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,