Skip to content

Commit 096e0ab

Browse files
amberkamboj77amberkamboj77
committed
refactor: refactoring react import and error naming
1 parent 86d19ae commit 096e0ab

File tree

24 files changed

+578
-417
lines changed

24 files changed

+578
-417
lines changed

‎src/App.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
1-
import React, { useEffect, Suspense } from "react";
1+
import { useEffect, Suspense, useState } from "react";
22
import { getCurrentScreen } from "@auth0/auth0-acul-js";
33
import { getScreenComponent } from "@/utils/screenLoader";
44

55
const App = () => {
6-
const [screen, setScreen] = React.useState("login-id");
6+
const [screen, setScreen] = useState("login-id");
77

88
useEffect(() => {
99
const current = getCurrentScreen();
10-
setScreen(current!);
10+
setScreen(current || "login-id");
1111
}, []);
1212

1313
const ScreenComponent = getScreenComponent(screen);

‎src/common/Alert/index.tsx‎

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import React from "react";
22
import Icon from "@/common/Icon";
33
import { ExclamationCircleIcon } from "@/assets/icons";
4+
import { cn } from "@/utils/cn";
45

56
export interface ErrorMessage {
67
message: string;
@@ -13,7 +14,7 @@ export interface AlertProps {
1314
title?: string;
1415
}
1516

16-
const Alert: React.FC<AlertProps> = ({ type, message, className, title }) => {
17+
const Alert = ({ type, message, className, title }: AlertProps) => {
1718
const baseStyles = "p-4 rounded-md my-4";
1819
let typeStyles = "";
1920
let IconComponent: React.ElementType | null = null;
@@ -39,19 +40,16 @@ const Alert: React.FC<AlertProps> = ({ type, message, className, title }) => {
3940
const messages = Array.isArray(message) ? message : [message];
4041

4142
return (
42-
<div
43-
className={`${baseStyles} ${typeStyles} ${className || ""}`}
44-
role="alert"
45-
>
43+
<div className={cn(baseStyles, typeStyles, className)} role="alert">
4644
<div className="flex">
4745
{IconComponent && (
4846
<div className="flex-shrink-0">
4947
<Icon As={IconComponent} className="h-5 w-5" title={type} />
5048
</div>
5149
)}
52-
<div className={`ml-3 flex-1 ${IconComponent ? "" : "ml-0"}`}>
50+
<div className={cn("ml-3 flex-1", !IconComponent && "ml-0")}>
5351
{title && <h3 className="text-sm font-medium">{title}</h3>}
54-
<div className={`text-sm ${title ? "mt-2" : ""}`}>
52+
<div className={cn("text-sm", title && "mt-2")}>
5553
{messages.length === 1 ? (
5654
<p>
5755
{typeof messages[0] === "string"

‎src/common/Button/index.tsx‎

Lines changed: 97 additions & 80 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React from "react";
1+
import { forwardRef } from "react";
22
import type { IconProps } from "@/common/Icon";
33

44
export interface ButtonProps
@@ -13,93 +13,110 @@ export interface ButtonProps
1313
fullWidth?: boolean;
1414
iconLeft?: React.ReactElement<IconProps>;
1515
iconRight?: React.ReactElement<IconProps>;
16+
/**
17+
* Loading text to display when isLoading is true
18+
*/
19+
loadingText?: string;
1620
}
1721

18-
const Button: React.FC<ButtonProps> = ({
19-
children,
20-
variant = "primary",
21-
size = "md",
22-
isLoading = false,
23-
fullWidth = false,
24-
iconLeft,
25-
iconRight,
26-
className,
27-
disabled,
28-
type = "button",
29-
...rest
30-
}) => {
31-
const baseStyles =
32-
"inline-flex items-center justify-center font-medium focus:outline-none transition-colors duration-150 ease-in-out";
22+
const Button = forwardRef<HTMLButtonElement, ButtonProps>(
23+
(
24+
{
25+
children,
26+
variant = "primary",
27+
size = "md",
28+
isLoading = false,
29+
fullWidth = false,
30+
iconLeft,
31+
iconRight,
32+
className,
33+
disabled,
34+
type = "button",
35+
loadingText = "Processing...",
36+
"aria-label": ariaLabel,
37+
...rest
38+
},
39+
ref,
40+
) => {
41+
const baseStyles =
42+
"inline-flex items-center justify-center font-medium focus:outline-none transition-colors duration-150 ease-in-out";
43+
44+
const cursorStyles =
45+
disabled || isLoading ? "cursor-not-allowed" : "cursor-pointer";
46+
47+
let variantStyles = "";
48+
switch (variant) {
49+
case "primary":
50+
variantStyles =
51+
"bg-primary text-white hover:bg-primary/90 focus:ring-4 focus:ring-primary/15 disabled:opacity-70 disabled:bg-primary/70 px-4 py-4 text-md rounded";
52+
break;
53+
case "secondary":
54+
variantStyles =
55+
"bg-background-widget text-text-default border border-gray-mid hover:bg-gray-100 focus:ring-4 focus:ring-primary/15 disabled:opacity-70";
56+
break;
57+
case "icon":
58+
variantStyles =
59+
"h-full flex items-center justify-center px-3 focus:outline-none hover:text-text-default disabled:opacity-50";
60+
break;
61+
default:
62+
variantStyles = "";
63+
break;
64+
}
3365

34-
let cursorStyles =
35-
disabled || isLoading ? "cursor-not-allowed" : "cursor-pointer";
66+
let sizeStyles = "";
67+
switch (size) {
68+
case "sm":
69+
sizeStyles = variant === "icon" ? "" : "py-1 text-sm rounded-sm";
70+
break;
71+
case "md":
72+
sizeStyles = variant === "icon" ? "" : "py-1 text-md rounded";
73+
break;
74+
case "lg":
75+
sizeStyles = variant === "icon" ? "" : "py-1 text-lg rounded-lg";
76+
break;
77+
}
3678

37-
let variantStyles = "";
38-
switch (variant) {
39-
case "primary":
40-
variantStyles =
41-
"bg-primary text-white hover:bg-primary/90 focus:ring-4 focus:ring-primary/15 disabled:opacity-70 disabled:bg-primary/70 px-4 py-4 text-md rounded";
42-
break;
43-
case "secondary":
44-
variantStyles =
45-
"bg-background-widget text-text-default border border-gray-mid hover:bg-gray-100 focus:ring-4 focus:ring-primary/15 disabled:opacity-70";
46-
break;
47-
case "icon":
48-
variantStyles =
49-
"h-full flex items-center justify-center px-3 focus:outline-none hover:text-text-default disabled:opacity-50";
50-
break;
51-
default:
52-
variantStyles = "";
53-
break;
54-
}
79+
const widthStyles = fullWidth ? "w-full" : "";
80+
const loadingStyles = isLoading ? "opacity-75" : "";
5581

56-
let sizeStyles = "";
57-
switch (size) {
58-
case "sm":
59-
sizeStyles = variant === "icon" ? "" : "py-1 text-sm rounded-sm";
60-
break;
61-
case "md":
62-
sizeStyles = variant === "icon" ? "" : "py-1 text-md rounded";
63-
break;
64-
case "lg":
65-
sizeStyles = variant === "icon" ? "" : "py-1 text-lg rounded-lg";
66-
break;
67-
}
82+
const combinedClassName = [
83+
baseStyles,
84+
variantStyles,
85+
sizeStyles,
86+
widthStyles,
87+
loadingStyles,
88+
cursorStyles,
89+
className,
90+
]
91+
.filter(Boolean)
92+
.join(" ");
6893

69-
const widthStyles = fullWidth ? "w-full" : "";
70-
const loadingStyles = isLoading ? "opacity-75" : "";
94+
const isDisabled = disabled || isLoading;
7195

72-
const combinedClassName = [
73-
baseStyles,
74-
variantStyles,
75-
sizeStyles,
76-
widthStyles,
77-
loadingStyles,
78-
cursorStyles,
79-
className,
80-
]
81-
.filter(Boolean)
82-
.join(" ");
96+
return (
97+
<button
98+
ref={ref}
99+
type={type}
100+
disabled={isDisabled}
101+
aria-disabled={isDisabled}
102+
aria-label={ariaLabel}
103+
className={combinedClassName}
104+
{...rest}
105+
>
106+
{isLoading && <span className="mr-2">{loadingText}</span>}
107+
{!isLoading && iconLeft && (
108+
<span className="mr-2 flex items-center">{iconLeft}</span>
109+
)}
110+
{!isLoading && children}
111+
{!isLoading && iconRight && (
112+
<span className="ml-2 flex items-center">{iconRight}</span>
113+
)}
114+
</button>
115+
);
116+
},
117+
);
83118

84-
return (
85-
<button
86-
type={type}
87-
disabled={disabled || isLoading}
88-
aria-disabled={disabled || isLoading}
89-
className={combinedClassName}
90-
{...rest}
91-
>
92-
{isLoading && <span className="mr-2">Processing...</span>}
93-
{!isLoading && iconLeft && (
94-
<span className="mr-2 flex items-center">{iconLeft}</span>
95-
)}
96-
{!isLoading && children}
97-
{!isLoading && iconRight && (
98-
<span className="ml-2 flex items-center">{iconRight}</span>
99-
)}
100-
</button>
101-
);
102-
};
119+
Button.displayName = "Button";
103120

104121
export type { IconProps as ButtonIconProps } from "@/common/Icon";
105122
export default Button;

0 commit comments

Comments
 (0)