fix: custom prop typing fixes

Author: surajahmed

example/storybook/stories/components/Wrapper.tsx

@@ -21,7 +21,13 @@ const myTheme = extendTheme({
   space: {
     mySpace: '29px',
   },
+
   components: {
+    Link: {
+      sizes: {
+        mysize: 10,
+      },
+    },
     Button: {
       variants: {
         myBtn: {
@@ -33,7 +39,28 @@ const myTheme = extendTheme({
           };
         },
       },
+      sizes: {
+        newsize: ({ mySize }: { mySize: number }) => {
+          return {
+            padding: mySize,
+          };
+        },
+      },
+    },
+
+    Checkbox: {
+      sizes: {
+        myBtn: {
+          padding: 10,
+        },
+        myNewButton: ({ myPadding }: { myPadding: any }) => {
+          return {
+            padding: myPadding,
+          };
+        },
+      },
     },
+
     Box: {
       variants: {
         myBtn: {
@@ -88,11 +115,8 @@ export function RenderTestButton() {
   return (
     <Box style={{ position: 'absolute', top: 10, left: 20 }} m={2} bg="red.100">
       <Button
-        title={state.toString()}
+        // title={state.toString()}
         onPress={() => setState(state + 1)}
-        isCustom={true}
-        variant="myNewButton"
-        myPadding={1}
       />
     </Box>
   );

src/components/composites/Accordion/types.ts

@@ -1,6 +1,7 @@
-import type { IBoxProps, IIconProps } from '../../primitives';
+import type { IIconProps } from '../../primitives';
 import type { ICollapseProps } from '../../composites/Collapse';
 import type { MutableRefObject } from 'react';
+import type { InterfaceBoxProps } from '../../primitives/Box/types';
 
 export type IAccordionProps = ICollapseProps & {
   allowMultiple?: boolean;
@@ -9,13 +10,13 @@ export type IAccordionProps = ICollapseProps & {
   defaultIndex?: number[];
   onChange?: (index?: number[]) => void;
 };
-export type IAccordionItemProps = IBoxProps<IAccordionItemProps> & {
+export type IAccordionItemProps = InterfaceBoxProps<IAccordionItemProps> & {
   index?: number;
   defaultIsOpen?: boolean;
   isDisabled?: boolean;
   id?: number;
 };
-export type IAccordionSummaryProps = IBoxProps<IAccordionSummaryProps> & {
+export type IAccordionSummaryProps = InterfaceBoxProps<IAccordionSummaryProps> & {
   _expanded?: Omit<IAccordionSummaryProps, '_expanded'>;
   _disabled?: Omit<IAccordionSummaryProps, '_disabled'>;
   _hover?: Omit<IAccordionSummaryProps, '_hover'>;

src/components/composites/Actionsheet/types.tsx

@@ -1,8 +1,10 @@
-import type { IButtonProps } from '../../primitives/Button';
+import type { InterfaceButtonProps } from '../../primitives/Button/types';
 import type { IBoxProps } from '../../primitives/Box';
 import type { MutableRefObject } from 'react';
+import type { CustomProps } from '../../../components/types';
 
-export interface IActionsheetProps extends IBoxProps<IActionsheetProps> {
+export interface InterfaceActionsheetProps
+  extends IBoxProps<IActionsheetProps> {
   /**
    * If true, the ActionSheet will open. Useful for controllable state behaviour
    */
@@ -33,7 +35,7 @@ export interface IActionsheetFooterProps
   extends IBoxProps<IActionsheetFooterProps> {}
 export interface IActionsheetHeaderProps
   extends IBoxProps<IActionsheetHeaderProps> {}
-export interface IActionsheetItemProps extends IButtonProps {}
+export interface IActionsheetItemProps extends InterfaceButtonProps {}
 
 export type IActionsheetComponentType = ((
   props: IActionsheetProps & { ref?: MutableRefObject<any> }
@@ -59,3 +61,7 @@ export type IActionsheetComponentType = ((
     ) => JSX.Element
   >;
 };
+
+export type IActionsheetProps =
+  | InterfaceActionsheetProps
+  | CustomProps<'Actionsheet'>;

src/components/composites/Alert/types.tsx

@@ -1,8 +1,8 @@
 import type { MutableRefObject } from 'react';
 import type { IBoxProps, IIconProps } from '../../primitives';
-import type { VariantType } from '../../types';
+import type { CustomProps, VariantType } from '../../types';
 
-export interface IAlertProps extends IBoxProps<IAlertProps> {
+export interface InterfaceAlertProps extends IBoxProps<IAlertProps> {
   /** The status of the alert
    *  @default info
    */
@@ -31,3 +31,5 @@ export type IAlertComponentType = ((
     (props: IAlertIconProps & { ref?: MutableRefObject<any> }) => JSX.Element
   >;
 };
+
+export type IAlertProps = InterfaceAlertProps | CustomProps<'Alert'>;

src/components/composites/AlertDialog/types.ts

@@ -1,8 +1,9 @@
 import type { IBoxProps } from '../../primitives/Box';
 import type { IIconButtonProps } from '../IconButton';
 import type { MutableRefObject } from 'react';
+import type { CustomProps } from 'src/components/types';
 
-export interface IAlertDialogProps extends IBoxProps {
+export interface InterfaceAlertDialogProps extends IBoxProps {
   /**
    * If true, the AlertDialog will open. Useful for controllable state behaviour
    */
@@ -81,3 +82,7 @@ export type IAlertDialogComponentType = ((
     (props: IBoxProps & { ref?: MutableRefObject<any> }) => JSX.Element
   >;
 };
+
+export type IAlertDialogProps =
+  | InterfaceAlertDialogProps
+  | CustomProps<'AlertDialog'>;

src/components/composites/AppBar/types.tsx

@@ -1,13 +1,15 @@
-import type { IStackProps } from '../../primitives';
+import type { InterfaceStackProps } from '../../primitives/Stack/Stack';
 
-export type IAppBarProps = IStackProps & {
+export type IAppBarProps = InterfaceStackProps & {
   colorScheme?: string;
   statusBarHeight?: number;
   space?: number;
 };
 
 export type IAppBarComponentType = ((props: IAppBarProps) => JSX.Element) & {
-  Left: React.MemoExoticComponent<(props: IStackProps) => JSX.Element>;
-  Right: React.MemoExoticComponent<(props: IStackProps) => JSX.Element>;
-  Content: React.MemoExoticComponent<(props: IStackProps) => JSX.Element>;
+  Left: React.MemoExoticComponent<(props: InterfaceStackProps) => JSX.Element>;
+  Right: React.MemoExoticComponent<(props: InterfaceStackProps) => JSX.Element>;
+  Content: React.MemoExoticComponent<
+    (props: InterfaceStackProps) => JSX.Element
+  >;
 };

src/components/composites/AspectRatio/types.ts

@@ -1,10 +1,15 @@
 import type { IBoxProps } from '../../primitives/Box';
-import type { ResponsiveValue } from '../../../components/types';
+import type { CustomProps, ResponsiveValue } from '../../../components/types';
 
-export interface IAspectRatioProps extends IBoxProps<IAspectRatioProps> {
+export interface InterfaceAspectRatioProps
+  extends IBoxProps<IAspectRatioProps> {
   /**
    * The aspect ratio of the container. Some examples are `16/9`, `16/10`, `9/16`, `4/3`
    * @default 4/3
    */
   ratio?: ResponsiveValue<number>;
 }
+
+export type IAspectRatioProps =
+  | InterfaceAspectRatioProps
+  | CustomProps<'AspectRatio'>;

src/components/composites/Avatar/types.tsx

@@ -1,10 +1,10 @@
 import type { IBoxProps } from '../../primitives/Box';
 import type { ImageSourcePropType } from 'react-native';
 import type { MutableRefObject } from 'react';
-import type { ResponsiveValue } from '../../../components/types';
+import type { CustomProps, ResponsiveValue } from '../../../components/types';
 import type { ISizes } from '../../../theme/base/sizes';
 
-export interface IAvatarProps extends IBoxProps<IAvatarProps> {
+export interface InterfaceAvatarProps extends IBoxProps<IAvatarProps> {
   /**
    * The image source of the avatar.
    */
@@ -47,3 +47,5 @@ export type IAvatarComponentType = ((
     (props: IAvatarBadgeProps & { ref?: MutableRefObject<any> }) => JSX.Element
   >;
 };
+
+export type IAvatarProps = InterfaceAvatarProps | CustomProps<'Avatar'>;

src/components/composites/Badge/types.tsx

@@ -1,7 +1,7 @@
-import type { VariantType } from '../../types';
+import type { CustomProps, VariantType } from '../../types';
 import type { IBoxProps } from '../../primitives';
 
-export interface IBadgeProps extends IBoxProps<IBadgeProps> {
+export interface InterfaceBadgeProps extends IBoxProps<IBadgeProps> {
   /**
    * The style variant of the badge.
    * @default subtle
@@ -12,3 +12,5 @@ export interface IBadgeProps extends IBoxProps<IBadgeProps> {
    */
   colorScheme?: string;
 }
+
+export type IBadgeProps = InterfaceBadgeProps | CustomProps<'Badge'>;

src/components/composites/Breadcrumb/types.ts

@@ -1,13 +1,13 @@
 import type { IHStackProps } from '../../primitives/Stack/HStack';
 import type { ITextProps, ILinkProps, IIconProps } from '../../primitives';
 import type { MutableRefObject } from 'react';
-import type { SpaceType } from '../../types';
+import type { CustomProps, SpaceType } from '../../types';
 export interface IBreadcrumbItemContext {
   isCurrent?: boolean;
   allChildren?: boolean;
 }
 
-export interface IBreadcrumbProps extends IHStackProps {
+export interface InterfaceBreadcrumbProps extends IHStackProps {
   spacing?: SpaceType;
   separator?: string | JSX.Element | JSX.Element[] | any;
   maxItems?: number | number[];
@@ -43,3 +43,7 @@ export type IBreadcrumbComponentType = ((
     (props: IBreadcrumbTextProps & { ref?: any }) => JSX.Element
   >;
 };
+
+export type IBreadcrumbProps =
+  | InterfaceBreadcrumbProps
+  | CustomProps<'Breadcrumb'>;