feat: revert to using React.ReactElement

razorpay · Mar 23, 2023 · 9772fbe · 9772fbe
1 parent 0781b27
commit 9772fbe
Show file tree

Hide file tree

Showing 9 changed files with 33 additions and 25 deletions.
diff --git a/packages/blade/src/components/ActionList/ActionList.tsx b/packages/blade/src/components/ActionList/ActionList.tsx
@@ -60,7 +60,11 @@ type ActionListProps = {
  * ```
  *
  */
-const ActionList = ({ children, surfaceLevel = 2, testID }: ActionListProps): JSX.Element => {
+const ActionList = ({
+  children,
+  surfaceLevel = 2,
+  testID,
+}: ActionListProps): React.ReactElement => {
   const {
     setOptions,
     actionListItemRef,

diff --git a/packages/blade/src/components/ActionList/ActionListFooter.tsx b/packages/blade/src/components/ActionList/ActionListFooter.tsx
@@ -67,7 +67,7 @@ const StyledActionListFooter = styled(BaseBox)((props) => {
  * />
  * ```
  */
-const _ActionListFooter = (props: ActionListFooterProps): JSX.Element => {
+const _ActionListFooter = (props: ActionListFooterProps): React.ReactElement => {
   const footerRef = React.useRef<HTMLDivElement | null>(null);
   const {
     setShouldIgnoreBlur,
@@ -163,7 +163,7 @@ const ActionListFooter = assignWithoutSideEffects(_ActionListFooter, {
   componentId: componentIds.ActionListFooter,
 });
 
-const _ActionListFooterIcon = ({ icon }: { icon: IconComponent }): JSX.Element => {
+const _ActionListFooterIcon = ({ icon }: { icon: IconComponent }): React.ReactElement => {
   const Icon = icon;
   return <Icon color="surface.text.muted.lowContrast" size="small" />;
 };

diff --git a/packages/blade/src/components/ActionList/ActionListHeader.tsx b/packages/blade/src/components/ActionList/ActionListHeader.tsx
@@ -46,7 +46,7 @@ type ActionListHeaderProps = {
  * />
  * ```
  */
-const _ActionListHeader = (props: ActionListHeaderProps): JSX.Element => {
+const _ActionListHeader = (props: ActionListHeaderProps): React.ReactElement => {
   React.useEffect(() => {
     React.Children.map(props.leading, (child) => {
       if (!isValidAllowedChildren(child, componentIds.ActionListHeaderIcon)) {
@@ -75,7 +75,7 @@ const ActionListHeader = assignWithoutSideEffects(_ActionListHeader, {
   componentId: componentIds.ActionListHeader,
 });
 
-const _ActionListHeaderIcon = ({ icon }: { icon: IconComponent }): JSX.Element => {
+const _ActionListHeaderIcon = ({ icon }: { icon: IconComponent }): React.ReactElement => {
   const Icon = icon;
   return <Icon color="surface.text.muted.lowContrast" size="small" />;
 };

diff --git a/packages/blade/src/components/ActionList/ActionListItem.tsx b/packages/blade/src/components/ActionList/ActionListItem.tsx
@@ -72,7 +72,7 @@ const StyledSectionDivider = styled(BaseBox)((props) => ({
   margin: `${makeSize(props.theme.spacing[1])} ${makeSize(props.theme.spacing[3])}`,
 }));
 
-const ActionListSectionDivider = (): JSX.Element => (
+const ActionListSectionDivider = (): React.ReactElement => (
   <StyledSectionDivider
     {...makeAccessible({
       role: getSeparatorRole(),
@@ -102,7 +102,7 @@ const _ActionListSection = ({
   children,
   testID,
   _hideDivider,
-}: ActionListSectionProps): JSX.Element => {
+}: ActionListSectionProps): React.ReactElement => {
   return (
     <BaseBox
       {...makeAccessible({
@@ -135,7 +135,7 @@ const ActionListSection = assignWithoutSideEffects(_ActionListSection, {
   componentId: componentIds.ActionListSection,
 });
 
-const _ActionListItemIcon = ({ icon }: { icon: IconComponent }): JSX.Element => {
+const _ActionListItemIcon = ({ icon }: { icon: IconComponent }): React.ReactElement => {
   const Icon = icon;
   const { intent, isDisabled } = React.useContext(ActionListItemContext);
   return (
@@ -154,7 +154,11 @@ const ActionListItemIcon = assignWithoutSideEffects(_ActionListItemIcon, {
   componentId: componentIds.ActionListItemIcon,
 });
 
-const _ActionListItemText = ({ children }: { children: StringChildrenType }): JSX.Element => {
+const _ActionListItemText = ({
+  children,
+}: {
+  children: StringChildrenType;
+}): React.ReactElement => {
   const { isDisabled } = React.useContext(ActionListItemContext);
 
   return (
@@ -206,7 +210,7 @@ const makeActionListItemClickable = (
  * </ActionList>
  * ```
  */
-const _ActionListItem = (props: ActionListItemProps): JSX.Element => {
+const _ActionListItem = (props: ActionListItemProps): React.ReactElement => {
   const {
     activeIndex,
     dropdownBaseId,

diff --git a/packages/blade/src/components/ActionList/ActionListItemAsset.native.tsx b/packages/blade/src/components/ActionList/ActionListItemAsset.native.tsx
@@ -19,7 +19,7 @@ type ActionListItemAssetProps = {
 /**
  *
  */
-const _ActionListItemAsset = (props: ActionListItemAssetProps): JSX.Element => {
+const _ActionListItemAsset = (props: ActionListItemAssetProps): React.ReactElement => {
   const source = typeof props.src === 'string' ? { uri: props.src } : props.src;
 
   return (

diff --git a/packages/blade/src/components/ActionList/ActionListItemAsset.web.tsx b/packages/blade/src/components/ActionList/ActionListItemAsset.web.tsx
@@ -12,7 +12,7 @@ type ActionListItemAssetProps = {
    */
   alt: string;
 };
-const _ActionListItemAsset = (props: ActionListItemAssetProps): JSX.Element => {
+const _ActionListItemAsset = (props: ActionListItemAssetProps): React.ReactElement => {
   return <img src={props.src} alt={props.alt} width={size[16]} height={size[12]} />;
 };
 

diff --git a/packages/blade/src/components/Card/Card.tsx b/packages/blade/src/components/Card/Card.tsx
@@ -81,7 +81,7 @@ type CardBodyProps = {
   children: React.ReactNode;
 } & TestID;
 
-const _CardBody = ({ children, testID }: CardBodyProps): JSX.Element => {
+const _CardBody = ({ children, testID }: CardBodyProps): React.ReactElement => {
   useVerifyInsideCard('CardBody');
 
   return <BaseBox {...metaAttribute({ name: MetaConstants.CardBody, testID })}>{children}</BaseBox>;

diff --git a/packages/blade/src/components/Card/CardFooter.tsx b/packages/blade/src/components/Card/CardFooter.tsx
@@ -32,7 +32,7 @@ const useIsMobile = (): boolean => {
   return matchedDeviceType === 'mobile';
 };
 
-const _CardFooter = ({ children, testID }: CardFooterProps): JSX.Element => {
+const _CardFooter = ({ children, testID }: CardFooterProps): React.ReactElement => {
   const isMobile = useIsMobile();
   useVerifyInsideCard('CardFooter');
   useVerifyAllowedComponents(children, 'CardFooter', [
@@ -62,7 +62,7 @@ type CardFooterLeadingProps = {
   title?: string;
   subtitle?: string;
 };
-const _CardFooterLeading = ({ title, subtitle }: CardFooterLeadingProps): JSX.Element => {
+const _CardFooterLeading = ({ title, subtitle }: CardFooterLeadingProps): React.ReactElement => {
   useVerifyInsideCard('CardFooterLeading');
 
   return (
@@ -90,7 +90,7 @@ type CardFooterTrailingProps = {
     secondary?: CardFooterAction;
   };
 };
-const _CardFooterTrailing = ({ actions }: CardFooterTrailingProps): JSX.Element => {
+const _CardFooterTrailing = ({ actions }: CardFooterTrailingProps): React.ReactElement => {
   const isMobile = useIsMobile();
   useVerifyInsideCard('CardFooterTrailing');
 

diff --git a/packages/blade/src/components/Card/CardHeader.tsx b/packages/blade/src/components/Card/CardHeader.tsx
@@ -26,7 +26,7 @@ import {
 import type { TestID } from '~src/_helpers/types';
 import { assignWithoutSideEffects } from '~src/utils/assignWithoutSideEffects';
 
-const _CardHeaderIcon = ({ icon: Icon }: { icon: IconComponent }): JSX.Element => {
+const _CardHeaderIcon = ({ icon: Icon }: { icon: IconComponent }): React.ReactElement => {
   useVerifyInsideCard('CardHeaderIcon');
 
   return <Icon color="surface.text.normal.lowContrast" size="xlarge" />;
@@ -35,7 +35,7 @@ const CardHeaderIcon = assignWithoutSideEffects(_CardHeaderIcon, {
   componentId: ComponentIds.CardHeaderIcon,
 });
 
-const _CardHeaderCounter = (props: CounterProps): JSX.Element => {
+const _CardHeaderCounter = (props: CounterProps): React.ReactElement => {
   useVerifyInsideCard('CardHeaderCounter');
 
   return <Counter {...props} />;
@@ -44,7 +44,7 @@ const CardHeaderCounter = assignWithoutSideEffects(_CardHeaderCounter, {
   componentId: ComponentIds.CardHeaderCounter,
 });
 
-const _CardHeaderBadge = (props: BadgeProps): JSX.Element => {
+const _CardHeaderBadge = (props: BadgeProps): React.ReactElement => {
   useVerifyInsideCard('CardHeaderBadge');
 
   return <Badge {...props} />;
@@ -53,7 +53,7 @@ const CardHeaderBadge = assignWithoutSideEffects(_CardHeaderBadge, {
   componentId: ComponentIds.CardHeaderBadge,
 });
 
-const _CardHeaderText = (props: TextProps<{ variant: TextVariant }>): JSX.Element => {
+const _CardHeaderText = (props: TextProps<{ variant: TextVariant }>): React.ReactElement => {
   useVerifyInsideCard('CardHeaderText');
 
   return <Text {...props} />;
@@ -62,7 +62,7 @@ const CardHeaderText = assignWithoutSideEffects(_CardHeaderText, {
   componentId: ComponentIds.CardHeaderText,
 });
 
-const _CardHeaderLink = (props: LinkProps): JSX.Element => {
+const _CardHeaderLink = (props: LinkProps): React.ReactElement => {
   useVerifyInsideCard('CardHeaderLink');
 
   return <Link {...props} />;
@@ -78,7 +78,7 @@ type CardHeaderIconButtonProps = Omit<
   icon: IconComponent;
 };
 
-const _CardHeaderIconButton = (props: CardHeaderIconButtonProps): JSX.Element => {
+const _CardHeaderIconButton = (props: CardHeaderIconButtonProps): React.ReactElement => {
   useVerifyInsideCard('CardHeaderIconButton');
 
   return (
@@ -95,7 +95,7 @@ type CardHeaderProps = {
   children?: React.ReactNode;
 } & TestID;
 
-const _CardHeader = ({ children, testID }: CardHeaderProps): JSX.Element => {
+const _CardHeader = ({ children, testID }: CardHeaderProps): React.ReactElement => {
   useVerifyInsideCard('CardHeader');
   useVerifyAllowedComponents(children, 'CardHeader', [
     ComponentIds.CardHeaderLeading,
@@ -142,7 +142,7 @@ const _CardHeaderLeading = ({
   subtitle,
   prefix,
   suffix,
-}: CardHeaderLeadingProps): JSX.Element => {
+}: CardHeaderLeadingProps): React.ReactElement => {
   useVerifyInsideCard('CardHeaderLeading');
 
   if (prefix && !isValidAllowedChildren(prefix, ComponentIds.CardHeaderIcon)) {
@@ -198,7 +198,7 @@ const headerTrailingAllowedComponents = [
   ComponentIds.CardHeaderBadge,
 ];
 
-const _CardHeaderTrailing = ({ visual }: CardHeaderTrailingProps): JSX.Element => {
+const _CardHeaderTrailing = ({ visual }: CardHeaderTrailingProps): React.ReactElement => {
   useVerifyInsideCard('CardHeaderTrailing');
 
   if (visual && !headerTrailingAllowedComponents.includes(getComponentId(visual)!)) {