fix: custom prop typing fixes

Author: surajahmed

src/components/primitives/Box/types.ts

@@ -5,6 +5,7 @@ import type {
   PlatformProps,
   ResponsiveValue,
   ColorType,
+  CustomProps,
 } from '../../types';
 import type { ITextProps } from './../Text/types';
 
@@ -17,7 +18,7 @@ export interface ILinearGradientProps {
   };
 }
 
-export interface IBoxProps<T = null>
+interface BoxProps<T = null>
   extends ViewProps,
     SafeAreaProps,
     PlatformProps<T extends null ? IBoxProps<any> : T>,
@@ -44,3 +45,5 @@ export interface IBoxProps<T = null>
   >;
   // gap?: ResponsiveValue<number | string>;
 }
+
+export type IBoxProps<T = null> = BoxProps<T> | CustomProps<'Box'>;

src/components/primitives/Button/types.ts

@@ -4,12 +4,28 @@ import type { IStackProps } from '../Stack';
 import type { ResponsiveValue } from '../../types';
 import type { MutableRefObject } from 'react';
 import type { ISizes } from '../../../theme/base/sizes';
-import type { VariantType } from '../../../components/types/utils';
+import type {
+  CustomProps,
+  VariantType,
+  // VariantType,
+  // VariantTypeTest,
+} from '../../../components/types/utils';
 import type { ISpinnerProps } from '../Spinner/types';
 
+// const myFunction = ({ a, b }) => {
+//   return { a: a, b: b };
+// };
+
+// type returnType = ReturnType<typeof myFunction>;
+// type parameter = Parameters<typeof myFunction>[0];
+
+// type newparameter = keyof parameter;
+// const a: parameter =
+// type parameter = Para<typeof myFunction>;
+// type buttonVariant = VariantTypeTest<'Button'>;
 // Todo: Create underscore Props section on docs.
 // _hover?: IButtonProps;
-export interface IButtonProps extends IPressableProps<IButtonProps> {
+interface ButtonProps extends IPressableProps<IButtonProps> {
   /**
    * The color of the radio when it's checked. This should be one of the color keys in the theme (e.g."green", "red").
    * @default 'primary'
@@ -153,3 +169,5 @@ export type IButtonComponentType = ((
     (props: IButtonGroupProps & { ref?: MutableRefObject<any> }) => JSX.Element
   >;
 };
+
+export type IButtonProps = ButtonProps | CustomProps<'Button'>;

src/components/types/utils.ts

@@ -21,3 +21,39 @@ export type SizeType = ResponsiveValue<
 export type ColorType = ResponsiveValue<
   Leaves<ITheme['colors']> | (string & {})
 >;
+
+type ComponentType<T extends keyof ITheme['components']> = {
+  [Property in keyof ITheme['components'][T]]: ITheme['components'][T][Property];
+};
+
+type ParametersOf<T> = {
+  [Key in keyof T]: T[Key] extends (...args: any) => void
+    ? Parameters<T[Key]>[0] extends {}
+      ? Parameters<T[Key]>[0]
+      : never
+    : never;
+}[keyof T];
+
+// type VariantParams<T extends keyof ITheme['components']> = ParametersOf<
+//   //@ts-ignore
+//   ComponentType<T>['variants']
+// >;
+
+// type PickedVariantParams<T extends keyof ITheme['components']> = Pick<
+//   VariantParams<T>,
+//   keyof VariantParams<T>
+// >;
+type ParameterType<T, Key> = ParametersOf<
+  //@ts-ignore
+  ComponentType<T>[Key]
+>;
+type CustomPropType<T extends keyof ITheme['components'], Key> = Extract<
+  ParameterType<T, Key>,
+  Pick<ParameterType<T, Key>, keyof ParameterType<T, Key>>
+>;
+
+export type CustomProps<T extends keyof ITheme['components']> =
+  | CustomPropType<T, 'variants'>
+  | CustomPropType<T, 'baseStyle'>
+  | CustomPropType<T, 'sizes'>
+  | CustomPropType<T, 'defaultProps'>;