update to design system

Fixed tsconfig
Added util to create text styles
Updated Chat Group Updated message to match design system
Added ParsedText component

components/Chat/ChatGroupUpdatedMessage.tsx

@@ -1,8 +1,13 @@
 import { PressableProfileWithText } from "@components/PressableProfileWithText";
+import { InboxIdStoreType } from "@data/store/inboxIdStore";
+import { ProfilesStoreType } from "@data/store/profilesStore";
+import { useSelect } from "@data/store/storeHelpers";
+import { VStack } from "@design-system/VStack";
 import { translate } from "@i18n";
 import { textSecondaryColor } from "@styles/colors";
+import { navigate } from "@utils/navigation";
 import { GroupUpdatedContent } from "@xmtp/react-native-sdk";
-import { useMemo } from "react";
+import { useCallback, useMemo } from "react";
 import { StyleSheet, useColorScheme } from "react-native";
 
 import { MessageToDisplay } from "./Message/Message";
@@ -12,14 +17,16 @@ import {
 } from "../../data/store/accountsStore";
 import { getPreferredName, getProfile } from "../../utils/profile";
 
-export default function ChatGroupUpdatedMessage({
+const inboxIdStoreSelectedKeys: (keyof InboxIdStoreType)[] = ["byInboxId"];
+const profilesStoreSelectedKeys: (keyof ProfilesStoreType)[] = ["profiles"];
+export function ChatGroupUpdatedMessage({
   message,
 }: {
   message: MessageToDisplay;
 }) {
   const styles = useStyles();
-  const byInboxId = useInboxIdStore().byInboxId;
-  const profiles = useProfilesStore().profiles;
+  const { byInboxId } = useInboxIdStore(useSelect(inboxIdStoreSelectedKeys));
+  const { profiles } = useProfilesStore(useSelect(profilesStoreSelectedKeys));
   // JSON Parsing is heavy so useMemo
   const parsedContent = useMemo(
     () => JSON.parse(message.content) as GroupUpdatedContent,
@@ -102,29 +109,34 @@ export default function ChatGroupUpdatedMessage({
     }
   });
 
+  const onPress = useCallback((address: string) => {
+    return navigate("Profile", {
+      address,
+    });
+  }, []);
+
   return (
-    <>
+    <VStack style={styles.textContainer}>
       {membersActions.map((a) => (
         <PressableProfileWithText
           key={a.address}
           text={a.content}
           profileDisplay={a.readableName}
           profileAddress={a.address}
-          textStyle={styles.groupChange}
-          pressableTextStyle={styles.profileStyle}
+          onPress={onPress}
         />
       ))}
-    </>
+    </VStack>
   );
 }
 
 const useStyles = () => {
   const colorScheme = useColorScheme();
   return StyleSheet.create({
     textContainer: {
-      flexDirection: "row",
+      justifyContent: "center",
       alignItems: "center",
-      textAlign: "center",
+      width: "100%",
     },
     groupChange: {
       color: textSecondaryColor(colorScheme),

components/Chat/Message/Message.tsx

@@ -63,7 +63,7 @@ import Avatar from "../../Avatar";
 import ClickableText from "../../ClickableText";
 import ActionButton from "../ActionButton";
 import AttachmentMessagePreview from "../Attachment/AttachmentMessagePreview";
-import ChatGroupUpdatedMessage from "../ChatGroupUpdatedMessage";
+import { ChatGroupUpdatedMessage } from "../ChatGroupUpdatedMessage";
 import FramesPreviews from "../Frame/FramesPreviews";
 import ChatInputReplyBubble from "../Input/InputReplyBubble";
 import TransactionPreview from "../Transaction/TransactionPreview";

components/ParsedText/ParsedText.props.ts

@@ -0,0 +1,8 @@
+import { ITextProps } from "@design-system/Text";
+import { ITextStyleProps } from "@design-system/Text/Text.props";
+import { ParseShape } from "react-native-parsed-text";
+
+export interface IParsedTextProps extends ITextProps {
+  parse: ParseShape[];
+  pressableStyle?: ITextStyleProps;
+}

components/ParsedText/ParsedText.tsx

@@ -0,0 +1,35 @@
+import { getTextStyle } from "@design-system/Text/Text.utils";
+import { useAppTheme } from "@theme/useAppTheme";
+import React, { forwardRef, memo, useMemo } from "react";
+import RNParsedText from "react-native-parsed-text";
+
+import { IParsedTextProps } from "./ParsedText.props";
+
+const ParsedTextInner = forwardRef<RNParsedText, IParsedTextProps>(
+  (props, ref) => {
+    const { themed } = useAppTheme();
+    const styles = getTextStyle(themed, props);
+    const childThemedProps = useMemo(() => {
+      return {
+        ...props,
+        ...props.pressableStyle,
+      };
+    }, [props]);
+    const pressableStyles = getTextStyle(themed, childThemedProps);
+    const parseOptions = useMemo(
+      () =>
+        props.parse.map(({ onPress, ...rest }) => ({
+          ...rest,
+          onPress,
+          style: pressableStyles,
+        })),
+      [props.parse, pressableStyles]
+    );
+
+    return (
+      <RNParsedText {...props} parse={parseOptions} ref={ref} style={styles} />
+    );
+  }
+);
+
+export const ParsedText = memo(ParsedTextInner);

components/PressableProfileWithText.tsx

@@ -1,29 +1,26 @@
-import { navigate } from "@utils/navigation";
+import { ITextStyleProps } from "@design-system/Text/Text.props";
 import { memo, useCallback, useMemo } from "react";
-import { StyleProp, TextStyle } from "react-native";
-import ParsedText from "react-native-parsed-text";
+
+import { ParsedText } from "./ParsedText/ParsedText";
+
+const pressableStyle: ITextStyleProps = {
+  weight: "bold",
+};
 
 const PressableProfileWithTextInner = ({
   profileAddress,
   profileDisplay,
   text,
-  textStyle,
-  pressableTextStyle,
+  onPress,
 }: {
+  onPress: (address: string) => void;
   text: string;
   profileDisplay: string;
   profileAddress: string;
-  textStyle?: StyleProp<TextStyle>;
-  pressableTextStyle?: StyleProp<TextStyle>;
 }) => {
-  const onPress = useCallback(() => {
-    if (profileAddress) {
-      return navigate("Profile", {
-        address: profileAddress,
-      });
-    }
-    return undefined;
-  }, [profileAddress]);
+  const handlePress = useCallback(() => {
+    return onPress(profileAddress);
+  }, [profileAddress, onPress]);
 
   const pattern = useMemo(
     () => new RegExp(profileDisplay, "g"),
@@ -32,16 +29,20 @@ const PressableProfileWithTextInner = ({
   const parseOptions = useMemo(
     () => [
       {
-        onPress,
+        onPress: handlePress,
         pattern,
-        style: pressableTextStyle,
       },
     ],
-    [onPress, pattern, pressableTextStyle]
+    [handlePress, pattern]
   );
 
   return (
-    <ParsedText style={textStyle} parse={parseOptions}>
+    <ParsedText
+      preset="subheading"
+      size="xxs"
+      pressableStyle={pressableStyle}
+      parse={parseOptions}
+    >
       {text}
     </ParsedText>
   );

design-system/Text/Text.props.ts

@@ -7,20 +7,8 @@ import { typography } from "../../theme";
 
 export type ISizes = keyof typeof textSizeStyles;
 export type IWeights = keyof typeof typography.primary;
-export interface ITextProps extends RNTextProps {
-  /**
-   * Text which is looked up via i18n.
-   */
-  tx?: TxKeyPath;
-  /**
-   * The text to display if not using `tx` or nested components.
-   */
-  text?: string;
-  /**
-   * Optional options to pass to i18n. Useful for interpolation
-   * as well as explicitly setting locale or translation fallbacks.
-   */
-  txOptions?: i18n.TranslateOptions;
+
+export interface ITextStyleProps {
   /**
    * An optional style override useful for padding & margin.
    */
@@ -37,6 +25,22 @@ export interface ITextProps extends RNTextProps {
    * Text size modifier.
    */
   size?: ISizes;
+}
+
+export interface ITextProps extends RNTextProps, ITextStyleProps {
+  /**
+   * Text which is looked up via i18n.
+   */
+  tx?: TxKeyPath;
+  /**
+   * The text to display if not using `tx` or nested components.
+   */
+  text?: string;
+  /**
+   * Optional options to pass to i18n. Useful for interpolation
+   * as well as explicitly setting locale or translation fallbacks.
+   */
+  txOptions?: i18n.TranslateOptions;
   /**
    * Children components.
    */

design-system/Text/Text.tsx

@@ -1,13 +1,8 @@
 import React from "react";
 import { Text as RNText, StyleProp, TextStyle } from "react-native";
 
-import { IPresets, presets } from "./Text.presets";
 import { ITextProps } from "./Text.props";
-import {
-  textFontWeightStyles,
-  textRtlStyle,
-  textSizeStyles,
-} from "./Text.styles";
+import { getTextStyle } from "./Text.utils";
 import { translate } from "../../i18n";
 import { useAppTheme } from "../../theme/useAppTheme";
 
@@ -35,15 +30,12 @@ export const Text = React.forwardRef<RNText, ITextProps>((props, ref) => {
   const i18nText = tx && translate(tx, txOptions);
   const content = i18nText || text || children;
 
-  const preset: IPresets = props.preset ?? "default";
-
-  const styles: StyleProp<TextStyle> = [
-    textRtlStyle,
-    themed(presets[preset]),
-    weight && textFontWeightStyles[weight],
-    size && textSizeStyles[size],
-    styleProp,
-  ];
+  const styles: StyleProp<TextStyle> = getTextStyle(themed, {
+    weight,
+    size,
+    style: styleProp,
+    ...props,
+  });
 
   return (
     <RNText ref={ref} {...rest} style={styles}>

design-system/Text/Text.utils.ts

@@ -0,0 +1,26 @@
+import { useAppTheme } from "@theme/useAppTheme";
+import { StyleProp, TextStyle } from "react-native";
+
+import { IPresets, presets } from "./Text.presets";
+import { ITextStyleProps } from "./Text.props";
+import {
+  textFontWeightStyles,
+  textRtlStyle,
+  textSizeStyles,
+} from "./Text.styles";
+
+export const getTextStyle = (
+  themed: ReturnType<typeof useAppTheme>["themed"],
+  { weight, size, style: styleProp, ...props }: ITextStyleProps
+): StyleProp<TextStyle> => {
+  const preset: IPresets = props.preset ?? "default";
+  const $styles: StyleProp<TextStyle> = [
+    textRtlStyle,
+    themed(presets[preset]),
+    weight && textFontWeightStyles[weight],
+    size && textSizeStyles[size],
+    styleProp,
+  ];
+
+  return $styles;
+};

tsconfig.json

@@ -15,8 +15,8 @@
       "@screens/*": ["./screens/*"],
       "@styles/*": ["./styles/*"],
       "@utils/*": ["./utils/*"],
-      "@theme": ["./theme/*"],
-      "@design-system": ["./design-system/*"]
+      "@theme/*": ["./theme/*"],
+      "@design-system/*": ["./design-system/*"]
     }
   },
   "exclude": ["./vendor/**/*", "./node_modules/**/*", "./dist/**/*"]