Merge pull request #42 from jikrana1/feat/runtime-prop-validation

feat: add runtime prop validation for SupportUsButton

Author: rahul-vyas-dev

src/components/SupportUsButton.tsx

@@ -2,7 +2,7 @@ import React, { useRef } from "react";
 import type { supportUsButtonProps } from "../types/index";
 import type { Theme } from "../types/index";
 import { useParentStyles } from "../hooks/useParentStyles";
-
+import { validateProps } from "../utils/validateProps";
 function sRgbLuminance(c: number): number {
   const norm = c / 255;
   return norm <= 0.04045 ? norm / 12.92 : Math.pow((norm + 0.055) / 1.055, 2.4);
@@ -62,28 +62,37 @@ function validateUrl(url?: string): string | undefined {
 }
 
 // Main component function that renders the support us button, taking in various props for customization and rendering different sections such as hero, organization information, sponsors, and call-to-action based on the provided data and selected theme and button variant
-function SupportUsButton({
-  Theme = "auto",
-  organizationInformation,
-  sponsors,
-  ctaSection,
-  projectInformation,
-  Logo = true,
-  className = "",
-  border = {
-    TopX1: "-1000",
-    TopX2: "1000",
-    BottomX1: "-1000",
-    BottomX2: "1000",
-    LeftY1: "-1000",
-    LeftY2: "1000",
-    RightY1: "-1000",
-    RightY2: "1000",
-  },
-}: supportUsButtonProps): React.JSX.Element {
+function SupportUsButton(
+  props: supportUsButtonProps,
+): React.JSX.Element {
+   const validatedProps = validateProps(props ?? ({} as supportUsButtonProps));
+
+ const {
+   Theme = "auto",
+   organizationInformation,
+   sponsors = [],
+   ctaSection,
+   projectInformation,
+   Logo = true,
+   className = "",
+ } = validatedProps ?? ({} as supportUsButtonProps);
+
+ const border = validatedProps.border ?? {
+   TopX1: "-1000",
+   TopX2: "1000",
+   BottomX1: "-1000",
+   BottomX2: "1000",
+   LeftY1: "-1000",
+   LeftY2: "1000",
+   RightY1: "-1000",
+   RightY2: "1000",
+ };
   const containerRef = useRef<HTMLDivElement>(null);
+
   const isAuto = Theme === "auto" || Theme === "inherit";
+
   const parentStyles = useParentStyles(containerRef, isAuto);
+
   const darkThemeActive =
     Theme === "dark" || (isAuto && isDarkColor(parentStyles.backgroundColor));