Merge pull request #4872 from GeekyAnts/fix/typing-composites-components

Fix/typing composites components

Author: surajahmed

src/components/composites/AlertDialog/types.ts

@@ -2,7 +2,10 @@ import type { IBoxProps } from '../../primitives/Box';
 import type { IIconButtonProps } from '../IconButton';
 import type { MutableRefObject } from 'react';
 import type { IFadeProps, ISlideProps } from '../Transitions';
-import type { CustomProps } from '../../../components/types/utils';
+import type {
+  CustomProps,
+  ThemeComponentSizeType,
+} from '../../../components/types/utils';
 
 export interface InterfaceAlertDialogProps extends IBoxProps {
   /**
@@ -20,7 +23,7 @@ export interface InterfaceAlertDialogProps extends IBoxProps {
   /**
    * The size of the AlertDialog
    */
-  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'full' | number | string;
+  size?: ThemeComponentSizeType<'AlertDialog'>; //'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'full' | number | string;
   /**
    * The ref of element that is least destructive child of the AlertDialog.
    */
@@ -65,15 +68,15 @@ export interface InterfaceAlertDialogProps extends IBoxProps {
   /**
    * Props applied on Overlay Animation.
    */
-  _backdropFade?: IFadeProps;
+  _backdropFade?: Partial<IFadeProps>;
   /**
    * Props applied on Child Fade Animation.
    */
-  _fade?: IFadeProps;
+  _fade?: Partial<IFadeProps>;
   /**
    * Props applied on Child Slide Animation.
    */
-  _slide?: ISlideProps;
+  _slide?: Partial<ISlideProps>;
   /**
    * Sets the animation type
    * @default "fade"

src/components/composites/Avatar/types.tsx

@@ -2,9 +2,8 @@ import type { InterfaceBoxProps } from '../../primitives/Box';
 import type { IImageProps } from '../../primitives/Image';
 import type { ImageSourcePropType } from 'react-native';
 import type { MutableRefObject } from 'react';
-import type { CustomProps, ResponsiveValue } from '../../../components/types';
-import type { ISizes } from '../../../theme/base/sizes';
-
+import type { CustomProps } from '../../../components/types';
+import type { ThemeComponentSizeType } from '../../../components/types/utils';
 export interface InterfaceAvatarProps extends InterfaceBoxProps<IAvatarProps> {
   /**
    * The image source of the avatar.
@@ -14,11 +13,11 @@ export interface InterfaceAvatarProps extends InterfaceBoxProps<IAvatarProps> {
    * The size of the avatar
    * @default md
    */
-  size?: ResponsiveValue<ISizes | (string & {}) | number>;
+  size?: ThemeComponentSizeType<'Avatar'>;
   /**
    * For providing props to Image component inside Avatar
    */
-  _image?: IImageProps;
+  _image?: Partial<IImageProps>;
   /**
    * ref to be attached to Avatar wrapper
    */
@@ -50,11 +49,11 @@ export interface IAvatarGroupProps extends IAvatarProps {
   /**
    * For providing props to all Avatar in that Avatar.Group
    */
-  _avatar?: IAvatarProps;
+  _avatar?: Partial<IAvatarProps>;
   /**
    * For providing props to the Avatar that shows the count of remaining Avatars that are not visible when max is applied.
    */
-  _hiddenAvatarPlaceholder?: IAvatarProps;
+  _hiddenAvatarPlaceholder?: Partial<IAvatarProps>;
 }
 
 export type IAvatarComponentType = ((

src/components/composites/FormControl/types.tsx

@@ -31,26 +31,26 @@ export interface IFormControlLabelProps extends IFormControlProps {
   /**
    * Passed props will be applied on disabled state.
    */
-  _disabled?: IBoxProps<IFormControlLabelProps>;
+  _disabled?: Partial<IBoxProps<IFormControlLabelProps>>;
   // _focus?: any;
   /**
    * Passed props will be applied on invalid state.
    */
-  _invalid?: IBoxProps<IFormControlLabelProps>;
+  _invalid?: Partial<IBoxProps<IFormControlLabelProps>>;
   /**
    * Reflects the value of the 'for' content property.
    */
   htmlFor?: string;
   /**
    * Props applied to astrick text
    */
-  _astrick?: ITextProps;
+  _astrick?: Partial<ITextProps>;
 }
 export interface IFormControlErrorMessageProps extends IFormControlProps {
   /**
    * Passed props will be applied on disabled state.
    */
-  _disabled?: IBoxProps<IFormControlLabelProps>;
+  _disabled?: Partial<IBoxProps<IFormControlLabelProps>>;
   /**
    * The right icon element to use in the FormControl.ErrorMessage.
    */
@@ -70,18 +70,18 @@ export interface IFormControlErrorMessageProps extends IFormControlProps {
   /**
    * Props to be passed to the HStack used inside of FormControl.ErrorMessage.
    */
-  _stack?: IStackProps;
+  _stack?: Partial<IStackProps>;
 }
 export interface IFormControlHelperTextProps extends IFormControlProps {
   /**
    * Passed props will be applied on disabled state.
    */
-  _disabled?: IBoxProps<IFormControlLabelProps>;
+  _disabled?: Partial<IBoxProps<IFormControlLabelProps>>;
   // _focus?: any;
   /**
    * Passed props will be applied on invalid state.
    */
-  _invalid?: IBoxProps<IFormControlLabelProps>;
+  _invalid?: Partial<IBoxProps<IFormControlLabelProps>>;
 }
 
 export type FormControlComponentType = ((

src/components/composites/IconButton/types.ts

@@ -1,8 +1,7 @@
 import type { InterfacePressableProps } from '../../primitives/Pressable/types';
 import type { IIconProps } from '../../primitives/Icon';
-import type { CustomProps, ResponsiveValue, VariantType } from '../../types';
-import type { ISizes } from '../../../theme/base/sizes';
-
+import type { CustomProps, VariantType } from '../../types';
+import type { ThemeComponentSizeType } from '../../../components/types/utils';
 export interface InterfaceIconButtonProps
   extends Omit<InterfacePressableProps, 'children' | 'color'>,
     Omit<
@@ -35,7 +34,7 @@ export interface InterfaceIconButtonProps
   /**
    * The size of the button.
    */
-  size?: ResponsiveValue<ISizes | (string & {}) | number>;
+  size?: ThemeComponentSizeType<'IconButton'>;
   /**
    * If true, the button will be disabled.
    */
@@ -47,19 +46,19 @@ export interface InterfaceIconButtonProps
   /**
    * Props to be passed to the icon used inside of IconButton.
    */
-  _icon?: IIconProps;
+  _icon?: Partial<IIconProps>;
   /**
    *
    */
-  _hover?: IIconButtonProps;
+  _hover?: Omit<Partial<IIconButtonProps>, '_hover'>;
   /**
    *
    */
-  _pressed?: IIconButtonProps;
+  _pressed?: Omit<Partial<IIconButtonProps>, '_pressed'>;
   /**
    *
    */
-  _focus?: IIconButtonProps;
+  _focus?: Omit<Partial<IIconButtonProps>, '_focus'>;
 }
 
 export type IIconButtonProps = InterfaceIconButtonProps & CustomProps<'Icon'>;

src/components/composites/Menu/types.ts

@@ -95,7 +95,7 @@ export interface IMenuItemProps extends IPressableProps {
   /**
    * Props to be passed to Text
    */
-  _text?: ITextProps;
+  _text?: Partial<ITextProps>;
   /**
    * This value will be available for the typeahead menu feature
    */

src/components/composites/Modal/types.ts

@@ -1,12 +1,10 @@
 import type { InterfaceBoxProps } from '../../primitives/Box';
 import type { IIconButtonProps } from '../../composites/IconButton';
 import type { MutableRefObject } from 'react';
-
-import type { CustomProps, ResponsiveValue } from '../../../components/types';
-import type { ISizes } from '../../../theme/base/sizes';
+import type { CustomProps } from '../../../components/types';
 import type { IScrollViewProps } from '../../basic/ScrollView';
 import type { IFadeProps, ISlideProps } from '../Transitions';
-
+import type { ThemeComponentSizeType } from '../../../components/types/utils';
 export interface InterfaceModalProps extends InterfaceBoxProps<IModalProps> {
   /**
    * If true, the modal will open. Useful for controllable state behaviour
@@ -23,7 +21,7 @@ export interface InterfaceModalProps extends InterfaceBoxProps<IModalProps> {
   /**
    * The size of the modal
    */
-  size?: ResponsiveValue<ISizes | (string & {}) | number>;
+  size?: ThemeComponentSizeType<'Modal'>;
   /**
    * The ref of element to receive focus when the modal opens.
    */
@@ -69,15 +67,15 @@ export interface InterfaceModalProps extends InterfaceBoxProps<IModalProps> {
   /**
    * Props applied on Overlay Animation.
    */
-  _backdropFade?: IFadeProps;
+  _backdropFade?: Partial<IFadeProps>;
   /**
    * Props applied on Child Fade Animation.
    */
-  _fade?: IFadeProps;
+  _fade?: Partial<IFadeProps>;
   /**
    * Props applied on Child Slide Animation.
    */
-  _slide?: ISlideProps;
+  _slide?: Partial<ISlideProps>;
 }
 
 export type IModalComponentType = ((

src/components/composites/Progress/index.tsx

@@ -3,8 +3,10 @@ import { Box } from '../../primitives';
 import type { InterfaceBoxProps } from '../../primitives/Box';
 import { usePropsResolution } from '../../../hooks/useThemeProps';
 import { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';
-import type { CustomProps, ResponsiveValue } from '../../../components/types';
-import type { ISizes } from '../../../theme/base/sizes';
+import type {
+  CustomProps,
+  ThemeComponentSizeType,
+} from '../../../components/types';
 
 export interface InterfaceProgressProps
   extends InterfaceBoxProps<IProgressProps> {
@@ -17,7 +19,7 @@ export interface InterfaceProgressProps
    * Defines height of Progress
    * @default sm
    */
-  size?: ResponsiveValue<ISizes | (string & {}) | number>;
+  size?: ThemeComponentSizeType<'Progress'>;
 
   /**
    * The color scheme of the progress. This should be one of the color keys in the theme (e.g."green", "red").

src/components/composites/Skeleton/types.tsx

@@ -61,12 +61,12 @@ export interface ISkeletonTextProps extends IStackProps {
   /**
    * Stying for each line
    */
-  _line?: ISkeletonProps;
+  _line?: Partial<ISkeletonProps>;
 
   /**
    * Props to be passed to the Stack used inside.
    */
-  _stack?: IStackProps;
+  _stack?: Partial<IStackProps>;
 }
 
 export type ISkeletonComponentType = ((