Merge pull request #4870 from GeekyAnts/fix/typing-primitives-components

Fix/typing primitives components

Author: surajahmed

src/components/primitives/Box/types.ts

@@ -34,7 +34,7 @@ export interface InterfaceBoxProps<T = null>
   /**
    * For providing props to Text inside Box
    */
-  _text?: ITextProps;
+  _text?: Partial<ITextProps>;
   bg?: ResponsiveValue<ColorType | (string & {}) | ILinearGradientProps>;
   background?: ResponsiveValue<
     ColorType | (string & {}) | ILinearGradientProps

src/components/primitives/Button/types.ts

@@ -104,27 +104,27 @@ export interface InterfaceButtonProps
   /**
    * Props to be passed to the button when isLoading is true.
    */
-  _loading?: Omit<IButtonProps, '_loading'>;
+  _loading?: Omit<Partial<IButtonProps>, '_loading'>;
   /**
    * Props to be passed to the button when button is disabled.
    */
-  _disabled?: Omit<IButtonProps, '_disable'>;
+  _disabled?: Omit<Partial<IButtonProps>, '_disable'>;
   /**
    * Props to be passed to the spinner when isLoading is true.
    */
-  _spinner?: ISpinnerProps;
+  _spinner?: Partial<ISpinnerProps>;
   /**
    * Props to be passed to the button when button is hovered.
    */
-  _hover?: Omit<IButtonProps, '_hover'>;
+  _hover?: Omit<Partial<IButtonProps>, '_hover'>;
   /**
    * Props to be passed to the button when button is pressed.
    */
-  _pressed?: Omit<IButtonProps, '_pressed'>;
+  _pressed?: Omit<Partial<IButtonProps>, '_pressed'>;
   /**
    * Props to be passed to the button when button is focused.
    */
-  _focus?: Omit<IButtonProps, '_focus'>;
+  _focus?: Omit<Partial<IButtonProps>, '_focus'>;
   /**
    * The right icon element to use in the button.
    */

src/components/primitives/Checkbox/types.tsx

@@ -75,9 +75,7 @@ export interface InterfaceCheckbox extends InterfaceBoxProps<ICheckboxProps> {
    * The size (width and height) of the checkbox.
    * @default 'md'
    */
-  size?:
-    | ResponsiveValue<'sm' | 'md' | 'lg'>
-    | ThemeComponentSizeType<'Checkbox'>;
+  size?: ThemeComponentSizeType<'Checkbox'>;
   /**
    * If given, will use this icon instead of the default.
    */
@@ -125,7 +123,7 @@ export interface InterfaceCheckbox extends InterfaceBoxProps<ICheckboxProps> {
   /**
    * Props to be passed to the Stack used inside.
    */
-  _stack?: IStackProps;
+  _stack?: Partial<IStackProps>;
   /**
    * Function called when the state of the checkbox changes.
    */
@@ -168,7 +166,7 @@ export interface ICheckboxGroupProps
   /**
    * Pass props will be passed to each checkbox.
    */
-  _checkbox?: ICheckboxProps;
+  _checkbox?: Partial<ICheckboxProps>;
 }
 export interface ICheckboxContext extends IFormControlContext {
   colorScheme?: string;

src/components/primitives/Heading/types.ts

@@ -1,6 +1,4 @@
 import type { ITextProps } from '../Text';
-import type { ResponsiveValue } from '../../../components/types';
-import type { ISizes } from '../../../theme/base/sizes';
 
 import type { CustomProps, ThemeComponentSizeType } from '../../types/utils';
 
@@ -9,9 +7,7 @@ export interface IterfaceHeadingProps extends ITextProps {
    * The size of the heading.
    * @default xl
    */
-  size?:
-    | ResponsiveValue<ISizes | (string & {}) | number>
-    | ThemeComponentSizeType<'Heading'>;
+  size?: ThemeComponentSizeType<'Heading'>;
 }
 
 export type IHeadingProps = IterfaceHeadingProps & CustomProps<'Heading'>;

src/components/primitives/Icon/types.ts

@@ -1,7 +1,6 @@
 import type { PlatformProps } from '../../types';
 import type { StyledProps } from '../../../theme/types';
 import type { ResponsiveValue } from '../../types/responsiveValue';
-import type { ISizes } from '../../../theme/base/sizes';
 import type { SvgProps } from 'react-native-svg';
 import type { IColors } from '../../../theme/base/colors';
 
@@ -27,9 +26,7 @@ export interface InterfaceIconProps
   /**
    * The size of the icon.
    */
-  size?:
-    | ResponsiveValue<ISizes | (string & {}) | number>
-    | ThemeComponentSizeType<'Icon'>;
+  size?: ThemeComponentSizeType<'Icon'>;
 
   /**
    * The color of the icon.

src/components/primitives/Image/types.ts

@@ -36,7 +36,7 @@ export interface InterfaceImageProps
   /**
    * Text styling for alt.
    */
-  _alt?: ITextProps;
+  _alt?: Partial<ITextProps>;
   /**
    * In event there was an error loading the src, specify a fallback JSX Element.
    */

src/components/primitives/Link/types.ts

@@ -39,7 +39,7 @@ export interface InterfaceLinkProps extends InterfaceBoxProps<ILinkProps> {
   /**
    * Hover props. Accepts all styled system props.
    */
-  _hover?: Omit<ILinkProps, '_hover'>;
+  _hover?: Omit<Partial<ILinkProps>, '_hover'>;
   /**
    * Ref to be attached to the Link wrapper
    */

src/components/primitives/List/types.ts

@@ -28,15 +28,15 @@ export interface IListProps extends IStackProps {
   /**
    * common _hover that is passed to all the children.
    */
-  _hover?: IStackProps;
+  _hover?: Partial<IStackProps>;
   /**
    * common _focus that is passed to all the children.
    */
-  _focus?: IStackProps;
+  _focus?: Partial<IStackProps>;
   /**
    * common _pressed that is passed to all the children.
    */
-  _pressed?: IStackProps;
+  _pressed?: Partial<IStackProps>;
   /**
    * Ordered List index starting value.
    * @default 0
@@ -45,7 +45,7 @@ export interface IListProps extends IStackProps {
   /**
    * Props to style the commonly all the List.Item's text.
    */
-  _text?: ITextProps;
+  _text?: Partial<ITextProps>;
 }
 
 export interface IListItemProps extends IPressableProps {
@@ -73,7 +73,7 @@ export interface IListItemProps extends IPressableProps {
   /**
    * Props to style the child text.
    */
-  _text?: Omit<ITextProps, '_text'>;
+  _text?: Partial<Omit<ITextProps, '_text'>>;
 }
 export type IListComponentType = ((
   props: IListProps & { ref?: any }

src/components/primitives/Pressable/types.ts

@@ -24,20 +24,20 @@ export interface InterfacePressableProps<T = IPressableProps>
   /**
    * Style props to be applied when hovered
    */
-  _hover?: Omit<IPressableProps, '_hover'>;
+  _hover?: Omit<Partial<IPressableProps>, '_hover'>;
   /**
    * Style props to be applied when pressed
    */
-  _pressed?: Omit<IPressableProps, '_pressed'>;
+  _pressed?: Omit<Partial<IPressableProps>, '_pressed'>;
   /**
    * Style props to be applied when focus
    */
-  _focus?: Omit<IPressableProps, '_focus'>;
+  _focus?: Omit<Partial<IPressableProps>, '_focus'>;
 
   /**
    * Style props to be applied when disabled
    */
-  _disabled?: Omit<IPressableProps, '_disabled'>;
+  _disabled?: Omit<Partial<IPressableProps>, '_disabled'>;
 
   /**
    * 	If true, the p will be disabled.
@@ -62,7 +62,7 @@ export interface InterfacePressableProps<T = IPressableProps>
   /**
    * Style props to be applied when focus visible. These styles will be only applied when user is interacting the app using a keyboard. (Web only)
    */
-  _focusVisible?: Omit<IPressableProps, '_focusVisible'>;
+  _focusVisible?: Omit<Partial<IPressableProps>, '_focusVisible'>;
 
   children?:
     | React.ReactNode

src/components/primitives/Radio/types.tsx

@@ -7,7 +7,7 @@ import type { MutableRefObject } from 'react';
 import type { ResponsiveValue } from '../../../components/types';
 import type { ISizes } from '../../../theme/base/sizes';
 export type IRadioValue = string;
-import type { CustomProps } from '../../types';
+import type { CustomProps, ThemeComponentSizeType } from '../../types';
 import type { IIconProps } from '../Icon';
 
 export type IRadioGroupOnChangeHandler = (value: IRadioValue) => any;
@@ -50,7 +50,7 @@ export interface InterfaceRadioProps extends InterfaceBoxProps<IRadioProps> {
    * 	The size (width and height) of the radio.
    */
 
-  size?: ResponsiveValue<ISizes | (string & {}) | number>;
+  size?: ThemeComponentSizeType<'Radio'>;
 
   /**
    * If given, will use this icon instead of the default.