feat(*): refactor style getters

Author: minheq

src/components/Alert/Alert.mdx

@@ -36,18 +36,14 @@ Give feedback to the user about an action or state
 Use `getStyles` prop
 
 ```tsx
-AlertStyleProps {
-  intent: Intent;
-}
-
 AlertStyles {
   containerStyle: ViewStyle;
   bodyStyle: ViewStyle;
   titleStyle: TextStyle;
   descriptionStyle: TextStyle;
 }
 
-getStyles={(AlertStyleProps, Theme) => AlertStyles}
+getStyles={(AlertProps, Theme) => AlertStyles}
 ```
 
 Markup

src/components/Alert/Alert.styles.ts

@@ -1,7 +1,7 @@
 import { TextStyle, ViewStyle } from 'react-native';
 
-import { Intent } from '../../constants/Intent';
 import { Theme } from '../../theme';
+import { AlertProps } from './Alert';
 
 export interface AlertStyles {
   containerStyle: ViewStyle;
@@ -10,16 +10,9 @@ export interface AlertStyles {
   descriptionStyle: TextStyle;
 }
 
-export interface AlertStyleProps {
-  intent: Intent;
-}
-
-export type GetAlertStyles = (
-  alertStyleProps: AlertStyleProps,
-  theme: Theme,
-) => AlertStyles;
+export type GetAlertStyles = (props: AlertProps, theme: Theme) => AlertStyles;
 
-export const getAlertStyles: GetAlertStyles = ({ intent }, theme) => {
+export const getAlertStyles: GetAlertStyles = ({ intent = 'info' }, theme) => {
   return {
     bodyStyle: {
       flex: 1,

src/components/Avatar/Avatar.mdx

@@ -29,21 +29,13 @@ Display avatar image, with default for name initials
 Using `getStyles` prop
 
 ```tsx
-AvatarStylesProps {
-  name?: string;
-  color: AvatarColor;
-  isSolid: boolean;
-  size: number;
-  sizeLimitOneCharacter: number;
-}
-
 AvatarStyles {
   containerStyle: ViewStyle;
   textStyle: TextStyle;
   imageStyle: ImageStyle;
 }
 
-getStyles={(AvatarStylesProps, Theme) => AvatarStyles}
+getStyles={(AvatarProps, Theme) => AvatarStyles}
 ```
 
 Markup

src/components/Avatar/Avatar.styles.ts

@@ -1,6 +1,7 @@
 import { ImageStyle, TextStyle, ViewStyle } from 'react-native';
 
 import { FillColors, Fills, Theme } from '../../theme/Theme';
+import { AvatarProps } from './Avatar';
 
 export const hashCode = (s?: string) => {
   const str = String(s);
@@ -20,14 +21,6 @@ export const hashCode = (s?: string) => {
 
 export type AvatarColor = 'automatic' | keyof FillColors;
 
-export interface AvatarStylesProps {
-  name?: string;
-  color: AvatarColor;
-  isSolid: boolean;
-  size: number;
-  sizeLimitOneCharacter: number;
-}
-
 export interface AvatarStyles {
   containerStyle: ViewStyle;
   textStyle: TextStyle;
@@ -68,12 +61,18 @@ const getAvatarProps = (
 };
 
 export type GetAvatarStyles = (
-  avatarStylesProps: AvatarStylesProps,
+  props: AvatarProps,
   theme: Theme,
 ) => AvatarStyles;
 
 export const getAvatarStyles: GetAvatarStyles = (
-  { name, color, isSolid, size = 24, sizeLimitOneCharacter = 20 },
+  {
+    name,
+    color = 'automatic',
+    isSolid = false,
+    size = 48,
+    sizeLimitOneCharacter = 20,
+  },
   theme,
 ) => {
   let colorProps;

src/components/Avatar/Avatar.tsx

@@ -70,8 +70,6 @@ export const Avatar = (props: AvatarProps) => {
     source,
     size = 48,
     name,
-    isSolid = false,
-    color = 'automatic',
     sizeLimitOneCharacter = 20,
     getStyles,
     testID,
@@ -93,16 +91,7 @@ export const Avatar = (props: AvatarProps) => {
     getAvatarStyles,
     getStyles,
     theme.components.getAvatarStyles,
-  )(
-    {
-      color,
-      isSolid,
-      name,
-      size,
-      sizeLimitOneCharacter,
-    },
-    theme,
-  );
+  )(props, theme);
 
   return (
     <View style={containerStyle} testID={testID}>

src/components/Badge/Badge.mdx

@@ -27,19 +27,12 @@ Display to indicate status or feat of service
 Using `getStyles` prop
 
 ```tsx
-BadgeStylesProps {
-  shape: ContainerShape;
-  size: ControlSize;
-  color: FillColor;
-  isSolid: boolean;
-}
-
 BadgeStyles {
   textStyle: TextStyle;
   containerStyle: ViewStyle;
 }
 
-getStyles={(BadgeStylesProps, Theme) => BadgeStyles}
+getStyles={(BadgeProps, Theme) => BadgeStyles}
 ```
 
 Markup

src/components/Badge/Badge.styles.ts

@@ -1,31 +1,17 @@
 import { TextStyle, ViewStyle } from 'react-native';
 
-import {
-  ContainerShape,
-  ControlSize,
-  FillColor,
-  Theme,
-} from '../../theme/Theme';
-
-export interface BadgeStylesProps {
-  shape: ContainerShape;
-  size: ControlSize;
-  color: FillColor;
-  isSolid: boolean;
-}
+import { Theme } from '../../theme/Theme';
+import { BadgeProps } from './Badge';
 
 export interface BadgeStyles {
   textStyle: TextStyle;
   containerStyle: ViewStyle;
 }
 
-export type GetBadgeStyles = (
-  props: BadgeStylesProps,
-  theme: Theme,
-) => BadgeStyles;
+export type GetBadgeStyles = (props: BadgeProps, theme: Theme) => BadgeStyles;
 
 export const getBadgeStyles: GetBadgeStyles = (
-  { size, color, isSolid, shape },
+  { size = 'medium', color = 'neutral', isSolid = false, shape = 'rounded' },
   theme,
 ) => {
   const shapeStyles = theme.containerShapes[shape];

src/components/Badge/Badge.tsx

@@ -44,23 +44,15 @@ export interface BadgeProps {
 }
 
 export const Badge = (props: BadgeProps) => {
-  const {
-    color = 'neutral',
-    getStyles,
-    isSolid = false,
-    shape = 'rounded',
-    size = 'medium',
-    title,
-    testID,
-  } = props;
+  const { getStyles, size = 'medium', title, testID } = props;
 
   const theme = useTheme();
 
   const { containerStyle, textStyle } = mergeStyles(
     getBadgeStyles,
     getStyles,
     theme.components.getBadgeStyles,
-  )({ size, color, isSolid, shape }, theme);
+  )(props, theme);
 
   return (
     <View style={containerStyle} testID={testID}>

src/components/Button/Button.mdx

@@ -55,25 +55,14 @@ Button component to trigger an action
 Using `getStyles` prop
 
 ```
-ButtonStylesProps {
-  appearance: ButtonAppearance;
-  color: ButtonColor;
-  size: ControlSize;
-  isDisabled: boolean;
-  isLoading: boolean;
-  isInline: boolean;
-  hasIconAfter?: boolean;
-  hasIconBefore?: boolean;
-}
-
 ButtonStyles {
   buttonStyle: ViewStyle;
   textStyle: TextStyle;
   innerButtonWrapperStyle: ViewStyle;
   buttonContentWrapperStyle: ViewStyle;
 }
 
-getStyles={(ButtonStylesProps, Theme) => ButtonStyles}
+getStyles={(ButtonProps, Theme) => ButtonStyles}
 ```
 
 Markup

src/components/Button/Button.styles.ts

@@ -1,6 +1,7 @@
 import { TextStyle, ViewStyle } from 'react-native';
 
-import { ButtonColor, ControlSize, Theme } from '../../theme/Theme';
+import { ButtonColor, Theme } from '../../theme/Theme';
+import { ButtonProps } from './Button';
 
 export interface ButtonColorProps {
   backgroundColor: string;
@@ -101,17 +102,6 @@ export const getButtonAppearances = (theme: Theme): ButtonAppearances => {
   };
 };
 
-export interface ButtonStylesProps {
-  appearance: ButtonAppearance;
-  color: ButtonColor;
-  size: ControlSize;
-  isDisabled: boolean;
-  isLoading: boolean;
-  isInline: boolean;
-  hasIconAfter?: boolean;
-  hasIconBefore?: boolean;
-}
-
 export interface ButtonStyles {
   buttonStyle: ViewStyle;
   textStyle: TextStyle;
@@ -120,21 +110,23 @@ export interface ButtonStyles {
 }
 
 export type GetButtonStyles = (
-  buttonStylesProps: ButtonStylesProps,
+  props: ButtonProps,
   theme: Theme,
 ) => ButtonStyles;
 
-export const getButtonStyles: GetButtonStyles = (buttonStyleProps, theme) => {
+export const getButtonStyles: GetButtonStyles = (props, theme) => {
   const {
-    appearance,
-    color,
-    size,
+    appearance = 'primary',
+    color = 'default',
+    size = 'medium',
     isDisabled,
     isLoading,
+    iconAfter,
+    iconBefore,
     isInline,
-    hasIconAfter,
-    hasIconBefore,
-  } = buttonStyleProps;
+  } = props;
+  const hasIconAfter = !!iconAfter;
+  const hasIconBefore = !!iconBefore;
 
   const buttonAppearances = getButtonAppearances(theme);