feat: added overriding functionality

package.json

@@ -44,6 +44,7 @@
     "@release-it/conventional-changelog": "^2.0.0",
     "@types/jest": "^26.0.0",
     "@types/react": "^16.9.19",
+    "@types/react-is": "^17.0.0",
     "@types/react-native": "0.62.13",
     "auto-changelog": "^2.2.1",
     "copyfiles": "^2.4.1",
@@ -90,5 +91,8 @@
         }
       ]
     ]
+  },
+  "dependencies": {
+    "is-react": "^1.5.4"
   }
 }

src/button/Button.stories.tsx

@@ -6,6 +6,7 @@ import { optionsKnob, boolean } from '@storybook/addon-knobs';
 import Button from './Button';
 import { KIND, SHAPE, SIZE } from './constants';
 import type { ButtonProps } from './types';
+import type { Theme } from '../themes';
 
 const props = (): ButtonProps => ({
   kind: optionsKnob(
@@ -82,4 +83,25 @@ storiesOf('Button', module)
     >
       <Text>Hello World</Text>
     </Button>
+  ))
+  .add('with overrides', () => (
+    <Button
+      {...props()}
+      startEnhancer={DummyEnhancer}
+      endEnhancer={DummyEnhancer}
+      overrides={{
+        baseButton: {
+          style: (theme: Theme) => ({
+            backgroundColor: theme.colors.backgroundWarning,
+          }),
+        },
+        content: {
+          style: (theme: Theme) => ({
+            color: theme.colors.accent100,
+          }),
+        },
+      }}
+    >
+      <Text>Hello World</Text>
+    </Button>
   ));

src/button/Button.tsx

@@ -1,16 +1,16 @@
-import React, { useMemo } from 'react';
+import React from 'react';
 import { TouchableOpacity } from 'react-native';
-import { useThemedStyle } from '@gorhom/base-ui';
 import Enhancer from '../enhancer';
 import ButtonContent from './ButtonContent';
+import { useThemedStyle, useOverrideComponent } from '../hooks';
 import { stylesCreator } from './styles';
 import { KIND, SHAPE, SIZE } from './constants';
 
 import type { ButtonProps } from './types';
 
 const Button = ({
-  style,
   // presets
+  overrides,
   kind = KIND.primary,
   size = SIZE.default,
   shape = SHAPE.default,
@@ -35,20 +35,49 @@ const Button = ({
     isSelected,
     disabled
   );
-  const containerStyle = useMemo(() => [styles.container, style], [
-    styles.container,
-    style,
-  ]);
   //#endregion
 
+  //#region components
+  const [BaseButton, BaseButtonProps] = useOverrideComponent(
+    TouchableOpacity,
+    styles.baseButton,
+    overrides?.baseButton
+  );
+
+  const [StartEnhancer, StartEnhancerProps] = useOverrideComponent(
+    Enhancer,
+    styles.startEnhancer,
+    overrides?.startEnhancer
+  );
+
+  const [EndEnhancer, EndEnhancerProps] = useOverrideComponent(
+    Enhancer,
+    styles.endEnhancer,
+    overrides?.endEnhancer
+  );
+
+  const [Content, ContentProps] = useOverrideComponent(
+    ButtonContent,
+    styles.content,
+    overrides?.content
+  );
+  //#endregion
   return (
-    <TouchableOpacity style={containerStyle} onPress={onPress}>
+    <BaseButton {...BaseButtonProps} onPress={onPress}>
       <>
-        <Enhancer position="start" component={startEnhancer} />
-        <ButtonContent children={children} style={styles.content} />
-        <Enhancer position="end" component={endEnhancer} />
+        <StartEnhancer
+          {...StartEnhancerProps}
+          position="start"
+          component={startEnhancer}
+        />
+        <Content {...ContentProps} children={children} />
+        <EndEnhancer
+          {...EndEnhancerProps}
+          position="end"
+          component={endEnhancer}
+        />
       </>
-    </TouchableOpacity>
+    </BaseButton>
   );
 };
 

src/button/styles.ts

@@ -1,7 +1,8 @@
 import { createStyles, Theme } from '@gorhom/base-ui';
 import { KIND, SIZE, SHAPE } from './constants';
+import type { ButtonOverrides } from './types';
 
-export const stylesCreator = createStyles(
+export const stylesCreator = createStyles<ButtonOverrides>(
   (
     theme,
     kind: KIND,
@@ -11,7 +12,7 @@ export const stylesCreator = createStyles(
     isSelected: boolean,
     disabled: boolean
   ) => ({
-    container: {
+    baseButton: {
       flexDirection: 'row',
       alignItems: 'center',
       justifyContent: 'center',
@@ -26,6 +27,8 @@ export const stylesCreator = createStyles(
       lineHeight: getShapeStyles(theme, shape, size).height,
       textAlign: 'center',
     },
+    startEnhancer: {},
+    endEnhancer: {},
   })
 );
 

src/button/types.d.ts

@@ -1,8 +1,27 @@
 import type { FC, ReactNode } from 'react';
-import type { StyleProp, ViewStyle } from 'react-native';
+import type {
+  StyleProp,
+  TouchableOpacityProps,
+  ViewProps,
+  ViewStyle,
+} from 'react-native';
+import type { Override } from '../types';
 import type { KIND, SHAPE, SIZE } from './constants';
 
+export interface ButtonOverrides {
+  [key: string]: Override<any>;
+  baseButton?: Override<TouchableOpacityProps>;
+  content?: Override<ViewProps>;
+  startEnhancer?: Override;
+  endEnhancer?: Override;
+}
+
 export interface ButtonProps {
+  /**
+   * Defines the button overrides.
+   * @default undefined
+   */
+  overrides?: ButtonOverrides;
   /**
    * Defines the kind (purpose) of a button.
    * @default KIND.primary

src/enhancer/Enhancer.tsx

@@ -1,16 +1,12 @@
-import React, { useMemo } from 'react';
+import React from 'react';
 import { View } from 'react-native';
 import { useThemedStyle } from '@gorhom/base-ui';
 import { stylesCreator } from './styles';
 import type { EnhancerProps } from './types';
 
 const Enhancer = ({ component: Component = null, position }: EnhancerProps) => {
   //#region styles
-  const styles = useThemedStyle(stylesCreator);
-  const containerStyle = useMemo(
-    () => (position === 'start' ? styles.startContainer : styles.endContainer),
-    [position, styles]
-  );
+  const styles = useThemedStyle(stylesCreator, position);
   //#endregion
 
   //#region render
@@ -19,11 +15,11 @@ const Enhancer = ({ component: Component = null, position }: EnhancerProps) => {
   }
 
   if (typeof Component === 'function') {
-    return <View style={containerStyle}>{Component({})}</View>;
+    return <View style={styles.container}>{Component({})}</View>;
   }
 
   if (typeof Component === 'object') {
-    return <View style={containerStyle}>{Component}</View>;
+    return <View style={styles.container}>{Component}</View>;
   }
   return null;
   //#endregion

src/enhancer/constants.ts

@@ -0,0 +1,6 @@
+enum POSITION {
+  start = 'start',
+  end = 'end',
+}
+
+export { POSITION };

src/enhancer/styles.ts

@@ -1,10 +1,9 @@
 import { createStyles } from '@gorhom/base-ui';
+import { POSITION } from './constants';
 
-export const stylesCreator = createStyles(theme => ({
-  startContainer: {
-    marginEnd: theme.sizing.scale500,
-  },
-  endContainer: {
-    marginStart: theme.sizing.scale500,
+export const stylesCreator = createStyles((theme, position: POSITION) => ({
+  container: {
+    [position === POSITION.start ? 'marginEnd' : 'marginStart']: theme.sizing
+      .scale500,
   },
 }));

src/enhancer/types.d.ts

@@ -1,6 +1,7 @@
 import type { FC, ReactNode } from 'react';
+import type { POSITION } from './constants';
 
 export interface EnhancerProps {
   component?: null | ReactNode | FC;
-  position: 'start' | 'end';
+  position: keyof typeof POSITION;
 }

src/hooks/index.ts

@@ -1 +1,3 @@
+export { useTheme } from './useTheme';
 export { useThemedStyle } from './useThemedStyle';
+export { useOverrideComponent } from './useOverrideComponent';

src/hooks/useOverrideComponent.ts

@@ -0,0 +1,67 @@
+import React, { useMemo } from 'react';
+import { isValidElementType } from 'react-is';
+
+import type { Style, Theme } from '../themes/types';
+import type { Override, OverrideObject } from '../types';
+import { useTheme } from './useTheme';
+
+const getOverrideComponent = (
+  override?: Override
+): React.ComponentType<any> | undefined => {
+  if (!override) {
+    return undefined;
+  }
+  if (isValidElementType(override)) {
+    return override as React.ComponentType<any>;
+  }
+  if (override && typeof override === 'object') {
+    return override.component;
+  }
+
+  return undefined;
+};
+
+const getOverrideStyle = (
+  theme: Theme,
+  override?: Override
+): Style | undefined => {
+  if (
+    override &&
+    typeof (override as OverrideObject<any>).style === 'function'
+  ) {
+    // @ts-ignore
+    return override.style(theme);
+  }
+
+  // @ts-ignore
+  return override?.style;
+};
+
+export const useOverrideComponent = <T>(
+  defaultComponent: React.ComponentType<T>,
+  defaultStyle: Style,
+  override?: Override
+): [React.ComponentType<T>, T] => {
+  ///#region hooks
+  const theme = useTheme();
+  //#endregion
+
+  //#region variables
+  const Component = useMemo(
+    () => getOverrideComponent(override) ?? defaultComponent,
+    // `defaultComponent` always stable
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [override]
+  );
+
+  const props = useMemo<any>(
+    () => ({
+      ...(override && 'props' in override ? override?.props : {}),
+      style: [defaultStyle, getOverrideStyle(theme, override)],
+    }),
+    [override, defaultStyle, theme]
+  );
+  //#endregion
+
+  return [Component, props];
+};

src/hooks/useTheme.ts

@@ -0,0 +1,4 @@
+import { useContext } from 'react';
+import { ThemeContext } from '../contexts';
+
+export const useTheme = () => useContext(ThemeContext);

src/hooks/useThemedStyle.ts

@@ -1,6 +1,6 @@
-import { useContext, useMemo } from 'react';
+import { useMemo } from 'react';
+import { useTheme } from './useTheme';
 import type { ImageStyle, TextStyle, ViewStyle } from 'react-native';
-import { ThemeContext } from '../contexts';
 import type { Theme } from '../themes';
 
 type NamedStyles<T> = { [P in keyof T]: ViewStyle | TextStyle | ImageStyle };
@@ -10,7 +10,7 @@ export const useThemedStyle = <T extends NamedStyles<T> | NamedStyles<any>>(
   ...args: any[]
 ): T | NamedStyles<T> => {
   //#region context
-  const theme = useContext(ThemeContext);
+  const theme = useTheme();
   //#endregion
 
   //#region variables

src/themes/types.d.ts

@@ -315,6 +315,8 @@ export interface Theme {
   typography: Typography;
 }
 
+export type Style = ViewStyle | TextStyle | ImageStyle;
+
 export type NamedStyles<T> = {
-  [P in keyof T]: ViewStyle | TextStyle | ImageStyle;
+  [P in keyof T]: Style;
 };

src/themes/utilities/createStyles.ts

@@ -1,9 +1,11 @@
 import { ImageStyle, StyleSheet, TextStyle, ViewStyle } from 'react-native';
 import type { Theme } from '../types';
 
-type NamedStyles<T> = { [P in keyof T]: ViewStyle | TextStyle | ImageStyle };
+type NamedStyles<T> = {
+  [P in keyof Required<T>]: ViewStyle | TextStyle | ImageStyle;
+};
 
-export const createStyles = <T extends NamedStyles<T> | NamedStyles<any>>(
+export const createStyles = <T>(
   styles: (theme: Theme, ...args: any[]) => NamedStyles<T>
-) => (theme: Theme, ...args: any[]) =>
+) => (theme: Theme, ...args: any[]): NamedStyles<T> =>
   StyleSheet.create(styles(theme, ...args));

src/types.d.ts

@@ -0,0 +1,17 @@
+import type React from 'react';
+import type { Theme } from './themes';
+
+export type ConfigurationOverrideFunction = (theme: Theme) => {};
+export type ConfigurationOverrideObject = {};
+
+export type ConfigurationOverride =
+  | ConfigurationOverrideObject
+  | ConfigurationOverrideFunction;
+
+export interface OverrideObject<C> {
+  component?: React.ComponentType<C>;
+  props?: ConfigurationOverride;
+  style?: ConfigurationOverride;
+}
+
+export type Override<C = any> = OverrideObject<C> | React.ComponentType<C>;