refactor: refactor some components with forwardRef

Author: 0l1v3rr

.vercelignore

@@ -1,6 +1,7 @@
 .github
 .husky
-docs
 node_modules
+**/.gitkeep
+docs
 scripts
-*.md
+*.md

public/.gitkeep

@@ -3,7 +3,7 @@ import { useMultistepContext } from "@/hooks/useMultistepContext";
 import { cn } from "@/lib/utils/cn";
 import { FormHTMLAttributes, ReactNode } from "react";
 import { AiOutlineSetting } from "react-icons/ai";
-import { CgEnter, CgErase } from "react-icons/cg";
+import { CgErase } from "react-icons/cg";
 
 interface Props extends FormHTMLAttributes<HTMLFormElement> {
   title: string;
@@ -50,28 +50,31 @@ const FormWrapper = ({ title, children, className, ...props }: Props) => {
       <div className="flex items-center gap-2 border-t border-gh-border px-4 py-2">
         <Button
           onClick={resetCard}
-          label="Reset"
           variant="danger"
           size="small"
           icon={<CgErase />}
-        />
+        >
+          Reset
+        </Button>
 
         <Button
           onClick={previousPage}
           disabled={isFirstPage}
-          label="Previous"
           variant="secondary"
           size="small"
           className="ml-auto"
-        />
+        >
+          Previous
+        </Button>
 
         <Button
           type="submit"
           disabled={isLastPage}
-          label="Next"
           variant="success"
           size="small"
-        />
+        >
+          Next
+        </Button>
       </div>
     </form>
   );

public/next.svg

@@ -15,11 +15,11 @@ const PageOne = () => {
         alt="Tech Stack"
       />
 
-      <p className="text-center text-gh-text">
+      <P className="text-center">
         This website allows you to easily customize and preview your README card
         in live. You can play around with the different settings so you don't
         have to write the query parameters manually.
-      </p>
+      </P>
 
       <P>
         You can find an example card above. It is in my{" "}

public/vercel.svg

@@ -57,7 +57,7 @@ const PageTwo = () => {
           select={(val) => updateCard({ theme: val.value })}
         />
 
-        <Button label="Load Colors" onClick={loadColors} />
+        <Button onClick={loadColors}>Load Colors</Button>
       </Flex>
 
       <Hr />
@@ -75,7 +75,7 @@ const PageTwo = () => {
             id="bg-color"
             value={card.backgroundColor}
             onChange={(e) => updateCard({ backgroundColor: e.target.value })}
-            setColor={(c) => updateCard({ backgroundColor: c })}
+            onColorChange={(c) => updateCard({ backgroundColor: c })}
           />
         </InputWrapper>
 
@@ -85,7 +85,7 @@ const PageTwo = () => {
             id="border-color"
             value={card.borderColor}
             onChange={(e) => updateCard({ borderColor: e.target.value })}
-            setColor={(c) => updateCard({ borderColor: c })}
+            onColorChange={(c) => updateCard({ borderColor: c })}
           />
         </InputWrapper>
       </Flex>
@@ -97,7 +97,7 @@ const PageTwo = () => {
             id="title-color"
             value={card.titleColor}
             onChange={(e) => updateCard({ titleColor: e.target.value })}
-            setColor={(c) => updateCard({ titleColor: c })}
+            onColorChange={(c) => updateCard({ titleColor: c })}
           />
         </InputWrapper>
 
@@ -107,7 +107,7 @@ const PageTwo = () => {
             id="badge-color"
             value={card.badgeColor}
             onChange={(e) => updateCard({ badgeColor: e.target.value })}
-            setColor={(c) => updateCard({ badgeColor: c })}
+            onColorChange={(c) => updateCard({ badgeColor: c })}
           />
         </InputWrapper>
       </Flex>

src/components/form/FormWrapper.tsx

@@ -1,13 +1,14 @@
 import { cn } from "@/lib/utils/cn";
-import { ReactNode } from "react";
+import { ElementType, ReactNode } from "react";
 
 type Props = {
   children: ReactNode;
   className?: string;
+  variant?: ElementType;
 };
 
-const Flex = ({ children, className }: Props) => (
-  <div className={cn("flex gap-4", className)}>{children}</div>
+const Flex = ({ children, className, variant: Tag = "div" }: Props) => (
+  <Tag className={cn("flex gap-4", className)}>{children}</Tag>
 );
 
 export default Flex;

src/components/form/PageOne.tsx

@@ -88,7 +88,7 @@ const NewBadge = ({ addBadge }: Props) => {
           disabled={file !== null}
           value={color}
           onChange={(e) => setColor(e.target.value)}
-          setColor={(c) => setColor(c)}
+          onColorChange={(c) => setColor(c)}
           placeholder={file === null ? "#58a6ff" : "auto"}
           canBeAuto={true}
         />

src/components/form/PageTwo.tsx

@@ -76,12 +76,9 @@ const Upload = ({ closePopup, uploadFile, file, clearIcon }: Props) => {
       </div>
 
       <div className="border-border flex items-stretch gap-2 border-t border-gh-border px-3 py-2">
-        <Button
-          size="small"
-          variant="secondary"
-          onClick={() => closePopup()}
-          label="Cancel"
-        />
+        <Button size="small" variant="secondary" onClick={() => closePopup()}>
+          Cancel
+        </Button>
 
         {file !== null && (
           <Button
@@ -91,8 +88,9 @@ const Upload = ({ closePopup, uploadFile, file, clearIcon }: Props) => {
               clearIcon();
               closePopup();
             }}
-            label="Remove icon"
-          />
+          >
+            Remove icon
+          </Button>
         )}
       </div>
     </>

src/components/layout/Flex.tsx

@@ -1,6 +1,6 @@
 import { cn } from "@/lib/utils/cn";
 import { VariantProps, cva } from "class-variance-authority";
-import { ButtonHTMLAttributes, FC, ReactElement } from "react";
+import { ButtonHTMLAttributes, ReactElement, forwardRef } from "react";
 
 const buttonVariants = cva(
   "leading-none rounded-md border transition-all duration-200 flex items-center gap-2 text-gh-text outline-none focus-visible:outline-2 focus-visible:outline-gh-blue-active outline-offset-0 select-none",
@@ -40,41 +40,49 @@ const buttonVariants = cva(
 interface ButtonProps
   extends ButtonHTMLAttributes<HTMLButtonElement>,
     VariantProps<typeof buttonVariants> {
-  label?: string;
+  children?: string;
   icon?: ReactElement;
   badge?: string | number;
 }
 
-const Button: FC<ButtonProps> = ({
-  label,
-  icon,
-  className,
-  size,
-  variant,
-  fontWeight,
-  width,
-  badge,
-  type = "button",
-  ...props
-}) => {
-  return (
-    <button
-      className={cn(
-        buttonVariants({ variant, size, fontWeight, width, className })
-      )}
-      type={type}
-      aria-label={label ?? props["aria-label"]}
-      {...props}
-    >
-      {icon}
-      {label}
-      {badge && (
-        <div className="rounded-full bg-gh-gray-active px-1.5 py-1 text-[.8rem] leading-none text-gh-text">
-          {badge}
-        </div>
-      )}
-    </button>
-  );
-};
+const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+  (
+    {
+      children,
+      icon,
+      className,
+      size,
+      variant,
+      fontWeight,
+      width,
+      badge,
+      type = "button",
+      ...rest
+    },
+    ref
+  ) => {
+    return (
+      <button
+        ref={ref}
+        className={cn(
+          buttonVariants({ variant, size, fontWeight, width, className })
+        )}
+        type={type}
+        aria-label={children ?? rest["aria-label"]}
+        {...rest}
+      >
+        {icon}
+        {children}
+        {badge && (
+          <div className="rounded-full bg-gh-gray-active px-1.5 py-1 text-[.8rem] leading-none text-gh-text">
+            {badge}
+          </div>
+        )}
+      </button>
+    );
+  }
+);
+
+Button.displayName = "Button";
 
 export default Button;

src/components/lines/NewBadge.tsx

@@ -10,7 +10,7 @@ import { IoMdColorFilter } from "react-icons/io";
 
 interface ColorInputProps
   extends Omit<InputHTMLAttributes<HTMLInputElement>, "type"> {
-  setColor: (color: string) => void;
+  onColorChange: (color: string) => void;
   canBeAuto?: boolean;
 }
 
@@ -21,7 +21,7 @@ const ColorInput = forwardRef<HTMLInputElement, ColorInputProps>(
       required,
       value = "",
       disabled,
-      setColor,
+      onColorChange,
       canBeAuto = false,
       ...props
     },
@@ -79,23 +79,28 @@ const ColorInput = forwardRef<HTMLInputElement, ColorInputProps>(
               : "pointer-events-none opacity-0"
           )}
         >
-          <HexColorPicker color={value} onChange={setColor} className="m-2" />
+          <HexColorPicker
+            color={value}
+            onChange={onColorChange}
+            className="m-2"
+          />
 
           <div className="flex items-center justify-center border-t border-gh-border px-4 py-1">
             <Button
               onClick={() =>
-                setColor(`#${Math.random().toString(16).slice(2, 8)}`)
+                onColorChange(`#${Math.random().toString(16).slice(2, 8)}`)
               }
               variant="secondary"
               size="small"
-              label="Random Color"
               className="text-[.8rem]"
               style={{
                 color:
                   disabled || !HEX_COLOR_REGEX.test(value) ? "#7d8590" : value,
               }}
               icon={<BsArrowRepeat className="rotate-[30deg] text-base" />}
-            />
+            >
+              Random Color
+            </Button>
           </div>
         </div>
       </div>

src/components/lines/Upload.tsx

@@ -1,16 +1,20 @@
+import { cn } from "@/lib/utils/cn";
 import { AnchorHTMLAttributes, FC, ReactNode } from "react";
 
 interface LinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
   children: ReactNode;
 }
 
-const Link: FC<LinkProps> = ({ children, ...props }) => {
+const Link: FC<LinkProps> = ({ children, className, ...props }) => {
   return (
     <a
       rel="noreferrer"
       target="_blank"
+      className={cn(
+        "text-gh-blue outline-none hover:underline focus-visible:underline",
+        className
+      )}
       {...props}
-      className="text-gh-blue outline-none hover:underline focus-visible:underline"
     >
       {children}
     </a>

src/components/ui/Button.tsx

@@ -1,11 +1,13 @@
+import { cn } from "@/lib/utils/cn";
 import { ReactNode } from "react";
 
 type Props = {
   children: ReactNode;
+  className?: string;
 };
 
-const P = ({ children }: Props) => {
-  return <p className="text-gh-text">{children}</p>;
+const P = ({ children, className }: Props) => {
+  return <p className={cn("text-gh-text", className)}>{children}</p>;
 };
 
 export default P;

src/components/ui/ColorInput.tsx

@@ -66,19 +66,22 @@ const RepositoryLink = async ({ user, repository }: Props) => {
 
         <div className="flex items-center gap-2">
           <Button
-            label="Fork"
             badge={githubStats.forks_count}
             variant="secondary"
             size="small"
             icon={<BiGitRepoForked className="text-gh-text-secondary" />}
-          />
+          >
+            Fork
+          </Button>
+
           <Button
-            label="Starred"
             badge={githubStats.stargazers_count}
             variant="secondary"
             size="small"
             icon={<FaStar className="text-gh-yellow" />}
-          />
+          >
+            Starred
+          </Button>
         </div>
       </div>