feat(textProps): adding ability to spread TextProps to help with accessibility (#62)

* feat(textProps): adding ability to spread TextProps to help with accessibility

* feat(textProps): adding ability to spread TextProps to help with accessibility

* fix(ci): lint

* fix(ci): lint

* fix(textProps): adding textProps vs extending

* fix(textProps): adding textProps vs extending

* chore(docs): update docs with a simple example to override textProps

* chore(textProps): cleanup spreading textProps.style

* chore(docs): update docs

Author: theonetheycallneo

.changeset/curvy-files-teach.md

@@ -0,0 +1,5 @@
+---
+"@marceloterreiro/flash-calendar": minor
+---
+
+Add the ability to pass TextProps to the <Text> fields especially when supporting accessibility

apps/docs/docs/fundamentals/customization.mdx

@@ -157,3 +157,65 @@ The sky is the limit here. Here are two demos from the example app:
 </VStack>
 
 </HStack>
+
+### Changing the text props
+
+You can override the `textProps` to control the nested [Text components](https://reactnative.dev/docs/text). For example [disabling font scaling](https://reactnative.dev/docs/text#allowfontscaling) for accessibility on the Calendar's Day:
+
+```tsx
+import {
+  Calendar,
+  useOptimizedDayMetadata,
+} from "@marceloterreiro/flash-calendar";
+import { Text } from "react-native";
+import type { CalendarItemDayWithContainerProps } from "@/components/CalendarItemDay";
+
+import { useRenderCount } from "./useRenderCount";
+
+export const PerfTestCalendarItemDayWithContainer = ({
+  children,
+  metadata: baseMetadata,
+  onPress,
+  theme,
+  dayHeight,
+  daySpacing,
+  containerTheme,
+}: CalendarItemDayWithContainerProps) => {
+  const metadata = useOptimizedDayMetadata(baseMetadata);
+  const renderCounter = useRenderCount();
+
+  return (
+    <Calendar.Item.Day.Container
+      dayHeight={dayHeight}
+      daySpacing={daySpacing}
+      isStartOfWeek={metadata.isStartOfWeek}
+      shouldShowActiveDayFiller={
+        metadata.isRangeValid && !metadata.isEndOfWeek
+          ? !metadata.isEndOfRange
+          : false
+      }
+      theme={containerTheme}
+    >
+      <Calendar.Item.Day
+        textProps={{ allowFontScaling: false }}
+        height={dayHeight}
+        metadata={metadata}
+        onPress={onPress}
+        theme={theme}
+      >
+        {children}
+        <Text
+          style={{
+            fontSize: 8,
+            fontStyle: "italic",
+            textAlign: "center",
+            color: metadata.state === "active" ? "white" : "black",
+          }}
+        >
+          {"\n"}render: {renderCounter}x
+        </Text>
+      </Calendar.Item.Day>
+    </Calendar.Item.Day.Container>
+  );
+};
+```

packages/flash-calendar/src/components/CalendarItemDay.tsx

@@ -1,6 +1,6 @@
 import type { ReactNode } from "react";
 import { useCallback, useMemo } from "react";
-import type { TextStyle, ViewStyle } from "react-native";
+import type { TextProps, TextStyle, ViewStyle } from "react-native";
 import { Pressable, StyleSheet, Text, View } from "react-native";
 
 import type { BaseTheme } from "@/helpers/tokens";
@@ -142,6 +142,8 @@ export interface CalendarItemDayProps {
   >;
   /** The cell's height */
   height: number;
+  /** Optional TextProps to spread to the <Text> component. */
+  textProps?: Omit<TextProps, "children" | "onPress">;
 }
 
 /**
@@ -158,6 +160,7 @@ export const CalendarItemDay = ({
   theme,
   height,
   metadata,
+  textProps,
 }: CalendarItemDayProps) => {
   const baseTheme = useTheme();
   const baseStyles = useMemo(() => {
@@ -196,8 +199,10 @@ export const CalendarItemDay = ({
         const { content } = baseStyles[metadata.state](params);
         return (
           <Text
+            {...textProps}
             style={{
               ...content,
+              ...(textProps?.style ?? ({} as object)),
               ...theme?.base?.({ ...metadata, isPressed }).content,
               ...theme?.[metadata.state]?.({ ...metadata, isPressed }).content,
             }}

packages/flash-calendar/src/components/CalendarItemWeekName.tsx

@@ -1,6 +1,6 @@
 import type { ReactNode } from "react";
 import { useMemo } from "react";
-import type { TextStyle, ViewStyle } from "react-native";
+import type { TextProps, TextStyle, ViewStyle } from "react-native";
 import { StyleSheet, Text, View } from "react-native";
 
 import { lightTheme } from "@/helpers/tokens";
@@ -29,27 +29,39 @@ export interface CalendarItemWeekNameProps {
   height: number;
   /** The theme of the week name, useful for customizing the component. */
   theme?: CalendarItemWeekNameTheme;
+  /** Optional TextProps to spread to the <Text> component. */
+  textProps?: Omit<TextProps, "children">;
 }
 
 export const CalendarItemWeekName = ({
   children,
   height,
   theme,
+  textProps,
 }: CalendarItemWeekNameProps) => {
   const { colors } = useTheme();
   const { containerStyles, contentStyles } = useMemo(() => {
     const containerStyles = [styles.container, { height }, theme?.container];
     const contentStyles = [
       styles.content,
       { color: colors.content.primary },
+      textProps?.style,
       theme?.content,
     ];
     return { containerStyles, contentStyles };
-  }, [colors.content.primary, height, theme?.container, theme?.content]);
+  }, [
+    colors.content.primary,
+    height,
+    theme?.container,
+    theme?.content,
+    textProps?.style,
+  ]);
 
   return (
     <View style={containerStyles}>
-      <Text style={contentStyles}>{children}</Text>
+      <Text {...textProps} style={contentStyles}>
+        {children}
+      </Text>
     </View>
   );
 };