fix(appbar): integrate main changes

Author: Paweł Kata

docs/component-docs.config.ts

@@ -13,6 +13,7 @@ export type Page =
       source: string;
       component?: string;
       props?: string;
+      propsSource?: string;
       title?: string;
     };
 
@@ -32,7 +33,11 @@ type ComponentDocsConfig = {
 
 const pages = {
   ActivityIndicator: 'ActivityIndicator',
-  Appbar: 'Appbar/Appbar',
+  Appbar: {
+    source: 'Appbar/Appbar',
+    component: 'Appbar',
+    propsSource: 'Appbar/types',
+  },
   Avatar: {
     AvatarIcon: 'Avatar/AvatarIcon',
     AvatarImage: 'Avatar/AvatarImage',

docs/plugins/component-docs/parser.ts

@@ -461,11 +461,27 @@ export const createComponentParser = (tsconfigPath: string) => {
 
     const componentName = page.component ?? getDefaultExportName(sourceFile);
     const component = findComponentDeclaration(sourceFile, componentName);
+    const propsSourcePath = page.propsSource
+      ? path.join(sourceRootDir, `${page.propsSource}.ts`)
+      : sourcePath;
+    const propsSourceFile = page.propsSource
+      ? program.getSourceFile(propsSourcePath)
+      : sourceFile;
+
+    if (!propsSourceFile || !fs.existsSync(propsSourcePath)) {
+      return fail(
+        propsSourcePath,
+        'props source file was not found in the TypeScript program'
+      );
+    }
+
     const propsType = findPropsType(
-      sourceFile,
+      propsSourceFile,
       page.props ?? DEFAULT_PROPS_TYPE
     );
-    validatePropsType(sourceFile, propsType);
+    if (!page.propsSource) {
+      validatePropsType(propsSourceFile, propsType);
+    }
     const defaults = getParameterDefaults(
       checker,
       sourceFile,
@@ -474,7 +490,7 @@ export const createComponentParser = (tsconfigPath: string) => {
     const props = getProps(
       checker,
       sourceRootDir,
-      sourceFile,
+      propsSourceFile,
       propsType,
       defaults
     );

docs/plugins/component-docs/types.ts

@@ -2,6 +2,7 @@ export type ComponentPageConfig = {
   source: string;
   component?: string;
   props?: string;
+  propsSource?: string;
   title?: string;
 };
 

src/components/Appbar/Appbar.tsx

@@ -173,9 +173,9 @@ const Appbar = ({
 }: Props) => {
   const theme = useInternalTheme(themeOverrides);
   const detectedInsets = useSafeAreaInsets();
-  const { customBackground, restStyle, borderRadius } = React.useMemo(() => {
+  const { customBackground, restStyle, borderStyles } = React.useMemo(() => {
     const flattenedStyle = StyleSheet.flatten(style);
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-type-assertion
+
     const resolvedStyle = (flattenedStyle || {}) as Exclude<
       typeof flattenedStyle,
       number
@@ -187,7 +187,7 @@ const Appbar = ({
     return {
       customBackground: backgroundColor,
       restStyle: remainingStyle,
-      borderRadius: getAppbarBorders(remainingStyle),
+      borderStyles: getAppbarBorders(remainingStyle),
     };
   }, [style]);
   const backgroundColor =
@@ -206,15 +206,11 @@ const Appbar = ({
   );
   const sideStyle = React.useMemo(() => ({ width: sideWidth }), [sideWidth]);
   const surfaceStyle = React.useMemo(
-    () => [
-      {
-        backgroundColor,
-        paddingTop: topInset,
-        paddingHorizontal: horizontalInset,
-      },
-      borderRadius,
-    ],
-    [backgroundColor, borderRadius, horizontalInset, topInset]
+    () => ({
+      paddingTop: topInset,
+      paddingHorizontal: horizontalInset,
+    }),
+    [horizontalInset, topInset]
   );
   const appbarStyle = React.useMemo(
     () => [styles.appbar, { backgroundColor, minHeight }, restStyle],
@@ -228,12 +224,18 @@ const Appbar = ({
     ? theme.colors.surfaceContainerHighest
     : theme.colors.surfaceContainer;
   const resolvedSearchStyle = React.useMemo(
-    () => [
-      styles.searchBar,
-      { backgroundColor: searchBackgroundColor },
-      searchBar?.style,
-    ],
-    [searchBackgroundColor, searchBar?.style]
+    () => [styles.searchBar, searchBar?.style],
+    [searchBar?.style]
+  );
+  const searchTheme = React.useMemo(
+    () => ({
+      ...theme,
+      colors: {
+        ...theme.colors,
+        surfaceContainerHigh: searchBackgroundColor,
+      },
+    }),
+    [searchBackgroundColor, theme]
   );
   const {
     accessibilityLabel: _accessibilityLabel,
@@ -286,7 +288,7 @@ const Appbar = ({
               elevation={0}
               testID={searchTestID}
               style={resolvedSearchStyle}
-              theme={theme}
+              theme={searchTheme}
             />
           </View>
         </View>
@@ -388,10 +390,11 @@ const Appbar = ({
 
   return (
     <Surface
+      {...borderStyles}
       ref={ref}
       testID={`${testID}-root-layer`}
+      backgroundColor={backgroundColor}
       elevation={0}
-      container
       theme={theme}
       style={surfaceStyle}
     >

src/components/Appbar/types.ts

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import type {
-  Animated,
   ColorValue,
   GestureResponderEvent,
   StyleProp,
@@ -26,6 +25,8 @@ export type AppbarHeadlineVariant = Exclude<AppbarVariant, 'search'>;
 
 export type AppbarHeadlineAlignment = 'leading' | 'center';
 
+export type AppbarStyle = Omit<ViewStyle, 'elevation'>;
+
 export type AppbarTextProps = {
   /** Style applied to the text. */
   style?: StyleProp<TextStyle>;
@@ -169,7 +170,7 @@ type AppbarBaseProps = Omit<
     right?: number;
   };
   /** Style applied to the app bar container. */
-  style?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
+  style?: StyleProp<AppbarStyle>;
   /** Reference for the app bar container. */
   ref?: React.Ref<View>;
   /** Theme override for the app bar. */

src/components/Appbar/utils.ts

@@ -1,4 +1,4 @@
-import type { Animated, ViewStyle } from 'react-native';
+import type { ViewStyle } from 'react-native';
 
 import type { AppbarTrailingAction, AppbarVariant } from './types';
 
@@ -7,27 +7,31 @@ export const APPBAR_WIDE_ICON_BUTTON_SIZE = 64;
 export const APPBAR_HEADLINE_IMAGE_HEIGHT = 32;
 export const APPBAR_SEARCH_MAX_WIDTH = 720;
 
-const borderStyleProperties: readonly (keyof ViewStyle)[] = [
+const borderStyleProperties = [
   'borderRadius',
+  'borderBottomEndRadius',
+  'borderBottomStartRadius',
+  'borderEndEndRadius',
+  'borderEndStartRadius',
+  'borderStartEndRadius',
+  'borderStartStartRadius',
+  'borderTopEndRadius',
+  'borderTopStartRadius',
   'borderTopLeftRadius',
   'borderTopRightRadius',
   'borderBottomRightRadius',
   'borderBottomLeftRadius',
-];
+  'borderCurve',
+] satisfies readonly (keyof ViewStyle)[];
 
-export const getAppbarBorders = (
-  style:
-    | Animated.Value
-    | Animated.AnimatedInterpolation<string | number>
-    | Animated.WithAnimatedObject<ViewStyle>
-) => {
-  const borders: Record<string, number> = {};
+export const getAppbarBorders = (style: ViewStyle) => {
+  let borders: ViewStyle = {};
 
   for (const property of borderStyleProperties) {
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-type-assertion
-    const value = style[property as keyof typeof style];
-    if (value) {
-      borders[property] = value;
+    const value = style[property];
+
+    if (typeof value === 'number' || typeof value === 'string') {
+      borders = { ...borders, [property]: value };
     }
   }
 

src/components/__tests__/Appbar/Appbar.test.tsx

@@ -120,12 +120,12 @@ describe('Appbar content', () => {
     expect(screen.getByTestId('appbar-content-subtitle-text')).toHaveStyle({
       textAlign: 'center',
     });
-    expect(
-      screen.getByTestId('leading-action-container-outer-layer').parent
-    ).toHaveStyle({ width: 96 });
-    expect(
-      screen.getByTestId('trailing-action-container-outer-layer').parent
-    ).toHaveStyle({ width: 96 });
+    expect(screen.getByTestId('leading-action-container').parent).toHaveStyle({
+      width: 96,
+    });
+    expect(screen.getByTestId('trailing-action-container').parent).toHaveStyle({
+      width: 96,
+    });
 
     await rerender(
       <Appbar
@@ -153,12 +153,12 @@ describe('Appbar content', () => {
       />
     );
 
-    expect(
-      screen.getByTestId('leading-action-container-outer-layer').parent
-    ).toHaveStyle({ width: 96 });
-    expect(
-      screen.getByTestId('trailing-action-container-outer-layer').parent
-    ).toHaveStyle({ width: 96 });
+    expect(screen.getByTestId('leading-action-container').parent).toHaveStyle({
+      width: 96,
+    });
+    expect(screen.getByTestId('trailing-action-container').parent).toHaveStyle({
+      width: 96,
+    });
     expect(
       screen.getByTestId('brand-mark', { includeHiddenElements: true })
     ).toBeOnTheScreen();
@@ -338,9 +338,9 @@ describe('Appbar actions', () => {
       expect(screen.getByTestId('expressive-action-container')).toHaveStyle({
         backgroundColor: color,
       });
-      expect(
-        screen.getByTestId('expressive-action-container-outer-layer')
-      ).toHaveStyle({ width: 56 });
+      expect(screen.getByTestId('expressive-action-container')).toHaveStyle({
+        width: 56,
+      });
     }
   );
 
@@ -527,9 +527,9 @@ describe('Appbar search', () => {
     expect(onChangeText).toHaveBeenLastCalledWith('draft');
     expect(searchbox).toHaveProp('value', 'draft');
 
-    expect(
-      screen.getByTestId('message-search-container-outer-layer')
-    ).toHaveStyle({ width: '100%' });
+    expect(screen.getByTestId('message-search-container')).toHaveStyle({
+      width: '100%',
+    });
     expect(screen.getByTestId('appbar-search-width-limiter')).toHaveStyle({
       width: '100%',
       maxWidth: 720,

src/components/__tests__/Appbar/utils.test.ts

@@ -1,6 +1,39 @@
 import { describe, expect, it } from '@jest/globals';
 
-import { getAppbarHeight, getTrailingActionsWidth } from '../../Appbar/utils';
+import {
+  getAppbarBorders,
+  getAppbarHeight,
+  getTrailingActionsWidth,
+} from '../../Appbar/utils';
+
+describe('getAppbarBorders', () => {
+  const borderStyles = {
+    borderRadius: 0,
+    borderBottomEndRadius: 2,
+    borderBottomStartRadius: 3,
+    borderEndEndRadius: 4,
+    borderEndStartRadius: 5,
+    borderStartEndRadius: 6,
+    borderStartStartRadius: 7,
+    borderTopEndRadius: 8,
+    borderTopStartRadius: 9,
+    borderTopLeftRadius: 10,
+    borderTopRightRadius: 11,
+    borderBottomRightRadius: 12,
+    borderBottomLeftRadius: 13,
+    borderCurve: 'continuous' as const,
+  };
+
+  it('returns every border style and excludes unrelated styles', () => {
+    expect(getAppbarBorders({ ...borderStyles, height: 60, top: 13 })).toEqual(
+      borderStyles
+    );
+  });
+
+  it('returns an empty object when no border styles are passed', () => {
+    expect(getAppbarBorders({ height: 60, top: 13 })).toEqual({});
+  });
+});
 
 describe('getAppbarHeight', () => {
   it.each([