refactor: cleanup

Author: lukewalczak

docs/docusaurus.config.js

@@ -138,6 +138,7 @@ const config = {
             ListItem: 'List/ListItem',
             ListSection: 'List/ListSection',
             ListSubheader: 'List/ListSubheader',
+            ListImage: 'List/ListImage',
           },
           Menu: {
             Menu: 'Menu/Menu',

src/components/BottomNavigation/BottomNavigationBar.tsx

@@ -11,7 +11,6 @@ import {
   ViewStyle,
 } from 'react-native';
 
-import color from 'color';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import {
@@ -20,8 +19,6 @@ import {
   getLabelColor,
 } from './utils';
 import { useInternalTheme } from '../../core/theming';
-import overlay from '../../styles/overlay';
-import { black, white } from '../../styles/themes/v2/colors';
 import type { ThemeProp } from '../../types';
 import useAnimatedValue from '../../utils/useAnimatedValue';
 import useAnimatedValueArray from '../../utils/useAnimatedValueArray';
@@ -333,18 +330,17 @@ const BottomNavigationBar = <Route extends BaseRoute>({
   animationEasing,
   onTabPress,
   onTabLongPress,
-  shifting: shiftingProp,
+  shifting: shiftingProp = false,
   safeAreaInsets,
   labelMaxFontSizeMultiplier = 1,
-  compact: compactProp,
+  compact = false,
   testID = 'bottom-navigation-bar',
   theme: themeOverrides,
 }: Props<Route>) => {
   const theme = useInternalTheme(themeOverrides);
   const { bottom, left, right } = useSafeAreaInsets();
   const { scale } = theme.animation;
-  const compact = compactProp ?? false;
-  let shifting = shiftingProp ?? false;
+  let shifting = shiftingProp;
 
   if (shifting && navigationState.routes.length < 2) {
     shifting = false;
@@ -476,38 +472,22 @@ const BottomNavigationBar = <Route extends BaseRoute>({
   };
 
   const { routes } = navigationState;
-  const { colors, dark: isDarkTheme, mode } = theme;
 
-  const { backgroundColor: customBackground, elevation = 4 } =
-    (StyleSheet.flatten(style) || {}) as {
-      elevation?: number;
-      backgroundColor?: ColorValue;
-    };
-
-  const approxBackgroundColor = customBackground
-    ? customBackground
-    : isDarkTheme && mode === 'adaptive'
-    ? overlay(elevation, colors?.surface)
-    : colors?.primary;
+  const { backgroundColor: customBackground } = (StyleSheet.flatten(style) ||
+    {}) as {
+    elevation?: number;
+    backgroundColor?: ColorValue;
+  };
 
   const backgroundColor = customBackground || theme.colors.elevation.level2;
 
-  const isDark =
-    typeof approxBackgroundColor === 'string'
-      ? !color(approxBackgroundColor).isLight()
-      : true;
-
-  const textColor = isDark ? white : black;
-
   const activeTintColor = getActiveTintColor({
     activeColor,
-    defaultColor: textColor,
     theme,
   });
 
   const inactiveTintColor = getInactiveTintColor({
     inactiveColor,
-    defaultColor: textColor,
     theme,
   });
 
@@ -615,15 +595,13 @@ const BottomNavigationBar = <Route extends BaseRoute>({
               tintColor: activeTintColor,
               hasColor: Boolean(activeColor),
               focused,
-              defaultColor: textColor,
               theme,
             });
 
             const inactiveLabelColor = getLabelColor({
               tintColor: inactiveTintColor,
               hasColor: Boolean(inactiveColor),
               focused,
-              defaultColor: textColor,
               theme,
             });
 

src/components/BottomNavigation/utils.ts

@@ -1,9 +1,6 @@
 import type { InternalTheme } from 'src/types';
 
-import type { black, white } from '../../styles/themes/v2/colors';
-
 type BaseProps = {
-  defaultColor: typeof black | typeof white;
   theme: InternalTheme;
 };
 

src/components/Button/Button.tsx

@@ -199,7 +199,7 @@ const Button = (
     delayLongPress,
     style,
     theme: themeOverrides,
-    uppercase: uppercaseProp,
+    uppercase = false,
     contentStyle,
     labelStyle,
     testID = 'button',
@@ -219,7 +219,6 @@ const Button = (
     [mode]
   );
   const { roundness, animation, fonts } = theme;
-  const uppercase = uppercaseProp ?? false;
   const isWeb = Platform.OS === 'web';
 
   const hasPassedTouchHandler = hasTouchHandler({

src/components/FAB/AnimatedFAB.tsx

@@ -221,7 +221,7 @@ const AnimatedFAB = ({
   theme: themeOverrides,
   style,
   visible = true,
-  uppercase: uppercaseProp,
+  uppercase = false,
   testID = 'animated-fab',
   animateFrom = 'right',
   extended = false,
@@ -232,7 +232,6 @@ const AnimatedFAB = ({
   ...rest
 }: Props) => {
   const theme = useInternalTheme(themeOverrides);
-  const uppercase: boolean = uppercaseProp ?? false;
   const isIOS = Platform.OS === 'ios';
   const isWeb = Platform.OS === 'web';
   const isAnimatedFromRight = animateFrom === 'right';

src/components/FAB/FAB.tsx

@@ -197,7 +197,7 @@ const FAB = forwardRef<View, Props>(
       theme: themeOverrides,
       style,
       visible = true,
-      uppercase: uppercaseProp,
+      uppercase = false,
       loading,
       testID = 'fab',
       size = 'medium',
@@ -215,7 +215,6 @@ const FAB = forwardRef<View, Props>(
       fonts,
     } = theme;
 
-    const uppercase = uppercaseProp ?? false;
     const { current: visibility } = React.useRef<Animated.Value>(
       new Animated.Value(visible ? 1 : 0)
     );

src/components/List/ListImage.tsx

@@ -8,7 +8,13 @@ import {
 } from 'react-native';
 
 export type Props = {
+  /**
+   * Image source.
+   */
   source: ImageSourcePropType;
+  /**
+   * Variant of the image. The default variant is `image`.
+   */
   variant?: 'image' | 'video';
   style?: StyleProp<ImageStyle>;
 };

src/components/TextInput/Addons/Underline.tsx

@@ -1,8 +1,6 @@
 import * as React from 'react';
 import { Animated, StyleSheet, StyleProp, ViewStyle } from 'react-native';
 
-import type { ThemeProp } from 'src/types';
-
 type UnderlineProps = {
   parentState: {
     focused: boolean;
@@ -15,7 +13,6 @@ type UnderlineProps = {
   underlineColorCustom?: string;
   hasActiveOutline?: boolean;
   style?: StyleProp<ViewStyle>;
-  theme?: ThemeProp;
 };
 
 export const Underline = ({
@@ -33,8 +30,6 @@ export const Underline = ({
 
   if (error) backgroundColor = colors?.error;
 
-  const activeScale = 2;
-
   return (
     <Animated.View
       testID="text-input-underline"
@@ -45,7 +40,7 @@ export const Underline = ({
           // Underlines is thinner when input is not focused
           transform: [
             {
-              scaleY: hasActiveOutline ? activeScale : 0.5,
+              scaleY: hasActiveOutline ? 2 : 0.5,
             },
           ],
         },

src/components/TextInput/TextInputFlat.tsx

@@ -346,7 +346,6 @@ const TextInputFlat = ({
         error={error}
         colors={colors}
         activeColor={activeColor}
-        theme={theme}
       />
       <View
         onLayout={onInputLayout}

src/styles/overlay.tsx

@@ -1,69 +1,5 @@
 import { Animated } from 'react-native';
 
-import color from 'color';
-
 export const isAnimatedValue = (
   it: number | string | Animated.AnimatedInterpolation<number | string>
 ): it is Animated.Value => it instanceof Animated.Value;
-
-// TODO: Revist this function to see if it's still needed
-export default function overlay<T extends Animated.Value | number>(
-  elevation: T,
-  surfaceColor: string
-): T extends number ? string : Animated.AnimatedInterpolation<number | string> {
-  if (isAnimatedValue(elevation)) {
-    const inputRange = [0, 1, 2, 3, 8, 24];
-
-    // @ts-expect-error: TS doesn't seem to refine the type correctly
-    return elevation.interpolate({
-      inputRange,
-      outputRange: inputRange.map((elevation) => {
-        return calculateColor(surfaceColor, elevation);
-      }),
-    });
-  }
-
-  // @ts-expect-error: TS doesn't seem to refine the type correctly
-  return calculateColor(surfaceColor, elevation);
-}
-
-function calculateColor(surfaceColor: string, elevation: number = 1) {
-  let overlayTransparency: number;
-  if (elevation >= 1 && elevation <= 24) {
-    overlayTransparency = elevationOverlayTransparency[elevation];
-  } else if (elevation > 24) {
-    overlayTransparency = elevationOverlayTransparency[24];
-  } else {
-    overlayTransparency = elevationOverlayTransparency[1];
-  }
-  return color(surfaceColor)
-    .mix(color('white'), overlayTransparency * 0.01)
-    .hex();
-}
-
-const elevationOverlayTransparency: Record<string, number> = {
-  1: 5,
-  2: 7,
-  3: 8,
-  4: 9,
-  5: 10,
-  6: 11,
-  7: 11.5,
-  8: 12,
-  9: 12.5,
-  10: 13,
-  11: 13.5,
-  12: 14,
-  13: 14.25,
-  14: 14.5,
-  15: 14.75,
-  16: 15,
-  17: 15.12,
-  18: 15.24,
-  19: 15.36,
-  20: 15.48,
-  21: 15.6,
-  22: 15.72,
-  23: 15.84,
-  24: 16,
-};