feat: provide default styles when overriding

Author: minheq

src/components/Alert/Alert.tsx

@@ -1,12 +1,14 @@
 import * as React from 'react';
 import { TouchableOpacity, View } from 'react-native';
+import { DeepPartial } from 'ts-essentials';
 
 import { Intent } from '../../constants/Intent';
 import { Icon } from '../../icons';
 import { Theme, withTheme } from '../../theme';
+import { mergeStyles, ReplaceReturnType } from '../../utils/mergeStyles';
 import { Spacing } from '../Layout';
 import { Strong, Text } from '../Typography';
-import { GetAlertStyles, getAlertStyles } from './Alert.styles';
+import { AlertStyles, GetAlertStyles, getAlertStyles } from './Alert.styles';
 
 export interface AlertProps {
   theme: Theme;
@@ -19,7 +21,7 @@ export interface AlertProps {
   icon?: React.ReactNode | null;
   intent?: Intent;
 
-  getStyles?: GetAlertStyles;
+  getStyles?: ReplaceReturnType<GetAlertStyles, DeepPartial<AlertStyles>>;
 }
 
 const resolveIcon = (intent: Intent, theme: Theme) => {
@@ -54,11 +56,14 @@ const AlertBase = (props: AlertProps) => {
     isCloseable = false,
     icon,
     intent = 'info',
-    getStyles = getAlertStyles,
+    getStyles,
     theme,
   } = props;
 
-  const { containerStyle, bodyStyle } = getStyles({ intent }, theme);
+  const { containerStyle, bodyStyle } = mergeStyles(getAlertStyles, getStyles)(
+    { intent },
+    theme,
+  );
 
   return (
     <View style={containerStyle}>

src/components/Avatar/Avatar.tsx

@@ -1,11 +1,17 @@
 import * as React from 'react';
 import { Image, View } from 'react-native';
+import { DeepPartial } from 'ts-essentials';
 
 import { Theme, withTheme } from '../../theme';
 import { FillColors } from '../../theme/ThemeInterface';
+import { mergeStyles, ReplaceReturnType } from '../../utils/mergeStyles';
 import { Text } from '../Typography';
 import { getTextStyles } from '../Typography/Text.styles';
-import { GetAvatarStyles, getAvatarStyles } from './Avatar.styles';
+import {
+  AvatarStyles,
+  GetAvatarStyles,
+  getAvatarStyles,
+} from './Avatar.styles';
 
 // https://github.com/segmentio/evergreen/blob/master/source/avatar/README.md
 export type GetInitialsType = (name?: string, fallback?: string) => string;
@@ -77,7 +83,7 @@ export interface AvatarProps {
    */
   theme: Theme;
 
-  getStyles?: GetAvatarStyles;
+  getStyles?: ReplaceReturnType<GetAvatarStyles, DeepPartial<AvatarStyles>>;
 }
 
 export const AvatarBase = (props: AvatarProps) => {
@@ -93,7 +99,7 @@ export const AvatarBase = (props: AvatarProps) => {
     color = 'automatic',
     forceShowInitials = false,
     sizeLimitOneCharacter = 20,
-    getStyles = getAvatarStyles,
+    getStyles,
   } = props;
 
   const { imageHasFailedLoading } = { imageHasFailedLoading: false };
@@ -104,7 +110,10 @@ export const AvatarBase = (props: AvatarProps) => {
     initials = initials.substring(0, 1);
   }
 
-  const { boxStyle, textStyle, imageStyle } = getStyles(
+  const { boxStyle, textStyle, imageStyle } = mergeStyles(
+    getAvatarStyles,
+    getStyles,
+  )(
     {
       color,
       hashValue,

src/components/Badge/Badge.tsx

@@ -1,11 +1,18 @@
 import * as React from 'react';
+import { DeepPartial } from 'ts-essentials';
 
 import { Theme, withTheme } from '../../theme';
 import { FillColor } from '../../theme/ThemeInterface';
+import { mergeStyles, ReplaceReturnType } from '../../utils/mergeStyles';
 import Box, { Shape } from '../Layout/Box';
 import { Strong } from '../Typography';
 import { getTextStyles } from '../Typography/Text.styles';
-import { BadgeSize, GetBadgeStyles, getBadgeStyles } from './Badge.styles';
+import {
+  BadgeSize,
+  BadgeStyles,
+  GetBadgeStyles,
+  getBadgeStyles,
+} from './Badge.styles';
 
 export interface BadgeProps {
   children: React.ReactNode;
@@ -14,21 +21,24 @@ export interface BadgeProps {
   size?: BadgeSize;
   shape?: Shape;
   isSolid?: boolean;
-  getStyles?: GetBadgeStyles;
+  getStyles?: ReplaceReturnType<GetBadgeStyles, DeepPartial<BadgeStyles>>;
 }
 
 const BadgeBase = (props: BadgeProps) => {
   const {
     children,
     color = 'neutral',
-    getStyles = getBadgeStyles,
+    getStyles,
     isSolid = false,
     shape = 'rounded',
     size = 'small',
     theme,
   } = props;
 
-  const { boxStyle, textStyle } = getStyles({ size, color, isSolid }, theme);
+  const { boxStyle, textStyle } = mergeStyles(getBadgeStyles, getStyles)(
+    { size, color, isSolid },
+    theme,
+  );
 
   return (
     <Box

src/components/Button/Button.tsx

@@ -4,8 +4,10 @@ import {
   TouchableHighlightProps,
   View,
 } from 'react-native';
+import { DeepPartial } from 'ts-essentials';
 
 import { Theme, withTheme } from '../../theme';
+import { mergeStyles, ReplaceReturnType } from '../../utils/mergeStyles';
 import { Spacing } from '../Layout';
 import { LoadingDots } from '../Loading';
 import { Text } from '../Typography';
@@ -14,6 +16,7 @@ import {
   ButtonAppearance,
   ButtonColor,
   ButtonSize,
+  ButtonStyles,
   GetButtonStyles,
   getButtonStyles,
 } from './Button.styles';
@@ -95,15 +98,15 @@ export interface ButtonProps extends TouchableHighlightProps {
   /**
    * Inline styles for components
    */
-  getStyles?: GetButtonStyles;
+  getStyles?: ReplaceReturnType<GetButtonStyles, DeepPartial<ButtonStyles>>;
 }
 
 const ButtonBase = (props: ButtonProps) => {
   const {
     appearance = 'primary',
     title,
     color = 'default',
-    getStyles = getButtonStyles,
+    getStyles,
     iconAfter,
     iconBefore,
     iconLoading,
@@ -120,7 +123,10 @@ const ButtonBase = (props: ButtonProps) => {
     ...touchableHighlightProps
   } = props;
 
-  const { buttonStyle, textStyle, focusColor } = getStyles(
+  const { buttonStyle, textStyle, focusColor } = mergeStyles(
+    getButtonStyles,
+    getStyles,
+  )(
     {
       appearance,
       color,

src/components/Button/ButtonGroup.tsx

@@ -3,7 +3,6 @@ import * as React from 'react';
 import { Theme, withTheme } from '../../theme';
 import { Box } from '../Layout';
 import { ButtonProps } from './Button';
-import { ButtonStylesProps, getButtonStyles } from './Button.styles';
 
 export type ButtonGroupDirection = 'vertical' | 'horizontal';
 
@@ -37,13 +36,9 @@ const ButtonGroup: React.SFC<ButtonGroupProps> = props => {
     const buttonBorderRadius = theme.controlBorderRadius[buttonSize];
 
     return React.cloneElement(button, {
-      getStyles: (styleProps: ButtonStylesProps) => {
-        const defaultButtonStyles = getButtonStyles(styleProps, theme);
-
+      getStyles: () => {
         return {
-          ...defaultButtonStyles,
           buttonStyle: {
-            ...defaultButtonStyles.buttonStyle,
             ...(direction === 'vertical'
               ? {
                   borderBottomWidth: 1,

src/components/Checkbox/Checkbox.tsx

@@ -5,10 +5,16 @@ import {
   TouchableHighlightProps,
   View,
 } from 'react-native';
+import { DeepPartial } from 'ts-essentials';
 
 import { Icon } from '../../icons';
 import { Theme, withTheme } from '../../theme';
-import { GetCheckboxStyles, getCheckboxStyles } from './Checkbox.styles';
+import { mergeStyles, ReplaceReturnType } from '../../utils/mergeStyles';
+import {
+  CheckboxStyles,
+  GetCheckboxStyles,
+  getCheckboxStyles,
+} from './Checkbox.styles';
 
 export type CheckboxShape = 'circle' | 'square';
 
@@ -22,7 +28,7 @@ export interface CheckboxProps {
   /** @default square */
   shape?: CheckboxShape;
   onChange?: (e: GestureResponderEvent) => void | undefined;
-  getStyles?: GetCheckboxStyles;
+  getStyles?: ReplaceReturnType<GetCheckboxStyles, DeepPartial<CheckboxStyles>>;
 }
 
 const CheckboxBase = (props: CheckboxProps & TouchableHighlightProps) => {
@@ -34,14 +40,14 @@ const CheckboxBase = (props: CheckboxProps & TouchableHighlightProps) => {
     onChange = () => null,
     shape = 'square',
     theme,
-    getStyles = getCheckboxStyles,
+    getStyles,
     ...touchableHighlightProps
   } = props;
 
-  const { checkboxStyle, checkboxFocusBackgroundColor } = getStyles(
-    { isChecked, isDisabled, shape },
-    theme,
-  );
+  const { checkboxStyle, checkboxFocusBackgroundColor } = mergeStyles(
+    getCheckboxStyles,
+    getStyles,
+  )({ isChecked, isDisabled, shape }, theme);
 
   return (
     <TouchableHighlight

src/components/Counter/Counter.tsx

@@ -1,10 +1,16 @@
 import * as React from 'react';
 import { TouchableOpacity, View } from 'react-native';
+import { DeepPartial } from 'ts-essentials';
 
 import { Icon } from '../../icons';
 import { Theme, withTheme } from '../../theme';
+import { mergeStyles, ReplaceReturnType } from '../../utils/mergeStyles';
 import { Spacing } from '../Layout';
-import { GetCounterStyles, getCounterStyles } from './Counter.styles';
+import {
+  CounterStyles,
+  GetCounterStyles,
+  getCounterStyles,
+} from './Counter.styles';
 
 export interface CounterProps {
   theme: Theme;
@@ -18,7 +24,7 @@ export interface CounterProps {
   /**
    * Inline styles for components
    */
-  getStyles?: GetCounterStyles;
+  getStyles?: ReplaceReturnType<GetCounterStyles, DeepPartial<CounterStyles>>;
 }
 
 const CounterBase = (props: CounterProps) => {
@@ -29,13 +35,16 @@ const CounterBase = (props: CounterProps) => {
     min,
     onIncrement,
     onDecrement,
-    getStyles = getCounterStyles,
+    getStyles,
     theme,
   } = props;
 
-  const { containerStyle, counterStyle, countStyle, disabledStyle } = getStyles(
-    theme,
-  );
+  const {
+    containerStyle,
+    counterStyle,
+    countStyle,
+    disabledStyle,
+  } = mergeStyles(getCounterStyles, getStyles)(theme);
 
   const isDecrementDisabled = min === count;
   const isIncrementDisabled = max === count;

src/components/Dialog/Dialog.tsx

@@ -1,10 +1,16 @@
 import * as React from 'react';
 import { View } from 'react-native';
+import { DeepPartial } from 'ts-essentials';
 
 import { Theme, withTheme } from '../../theme';
+import { mergeStyles, ReplaceReturnType } from '../../utils/mergeStyles';
 import { Modal } from '../Modal';
 import { Overlay } from '../Overlay';
-import { GetDialogStyles, getDialogStyles } from './Dialog.styles';
+import {
+  DialogStyles,
+  GetDialogStyles,
+  getDialogStyles,
+} from './Dialog.styles';
 
 // TODO: Import from react-native when react-native-web implementation is ready
 
@@ -22,7 +28,7 @@ export interface DialogProps {
   /**
    * Inline styles for components
    */
-  getStyles?: GetDialogStyles;
+  getStyles?: ReplaceReturnType<GetDialogStyles, DeepPartial<DialogStyles>>;
 }
 
 const DialogBase = (props: DialogProps) => {
@@ -33,10 +39,13 @@ const DialogBase = (props: DialogProps) => {
     isVisible,
     onClose = () => null,
     theme,
-    getStyles = getDialogStyles,
+    getStyles,
   } = props;
 
-  const { modalContainerStyle, containerStyle, bodyStyle } = getStyles(theme);
+  const { modalContainerStyle, containerStyle, bodyStyle } = mergeStyles(
+    getDialogStyles,
+    getStyles,
+  )(theme);
 
   return (
     <Modal visible={isVisible} transparent onRequestClose={onClose}>

src/components/Divider/Divider.tsx

@@ -1,20 +1,29 @@
 import * as React from 'react';
 import { View } from 'react-native';
+import { DeepPartial } from 'ts-essentials';
 
 import { Theme, withTheme } from '../../theme';
-import { GetDividerStyles, getDividerStyles } from './Divider.styles';
+import { mergeStyles, ReplaceReturnType } from '../../utils/mergeStyles';
+import {
+  DividerStyles,
+  GetDividerStyles,
+  getDividerStyles,
+} from './Divider.styles';
 
 export interface DividerProps {
   theme: Theme;
   size?: number;
   color?: string;
   radius?: number;
-  getStyles?: GetDividerStyles;
+  getStyles?: ReplaceReturnType<GetDividerStyles, DeepPartial<DividerStyles>>;
 }
 
 const DividerBase = (props: DividerProps) => {
-  const { theme, size, color, radius, getStyles = getDividerStyles } = props;
-  const { dividerStyle } = getStyles({ size, color, radius }, theme);
+  const { theme, size, color, radius, getStyles } = props;
+  const { dividerStyle } = mergeStyles(getDividerStyles, getStyles)(
+    { size, color, radius },
+    theme,
+  );
 
   return <View style={dividerStyle} />;
 };