Merge pull request #4798 from GeekyAnts/fix/typing-custom-props

Fix/typing custom props

Author: surajahmed

example/storybook/stories/components/Wrapper.tsx

@@ -21,8 +21,47 @@ const myTheme = extendTheme({
   space: {
     mySpace: '29px',
   },
+
   components: {
+    Link: {
+      sizes: {
+        mysize: 10,
+      },
+    },
     Button: {
+      variants: {
+        myBtn: {
+          padding: 10,
+        },
+        myNewButton: ({ myPadding }: { myPadding: number }) => {
+          return {
+            padding: myPadding,
+          };
+        },
+      },
+      sizes: {
+        newsize: ({ mySize }: { mySize: number }) => {
+          return {
+            padding: mySize,
+          };
+        },
+      },
+    },
+
+    Checkbox: {
+      sizes: {
+        myBtn: {
+          padding: 10,
+        },
+        myNewButton: ({ myPadding }: { myPadding: any }) => {
+          return {
+            padding: myPadding,
+          };
+        },
+      },
+    },
+
+    Box: {
       variants: {
         myBtn: {
           padding: 10,
@@ -74,8 +113,11 @@ function MyWrapper({ children }: any) {
 export function RenderTestButton() {
   const [state, setState] = React.useState(1);
   return (
-    <Box style={{ position: 'absolute', top: 10, left: 20 }}>
-      <Button title={state.toString()} onPress={() => setState(state + 1)} />
+    <Box style={{ position: 'absolute', top: 10, left: 20 }} m={2} bg="red.100">
+      <Button
+        // title={state.toString()}
+        onPress={() => setState(state + 1)}
+      />
     </Box>
   );
 }

package.json

@@ -36,7 +36,7 @@
       "prettier --write"
     ]
   },
-  "version": "3.3.8-alpha.4",
+  "version": "3.3.8-alpha.6",
   "license": "MIT",
   "private": false,
   "main": "lib/commonjs/index",

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'>;