Merge pull request #33 from neynarxyz/ds/neyn-2726-small-bug-and-styl…

…ing-patch-fixes

fix: small bug and styling patch fixes

.github/workflows/release-please.yaml

@@ -0,0 +1,34 @@
+name: Release Please
+
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  release:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v3
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: '20'
+
+      - name: Release Please
+        id: release
+        uses: google-github-actions/release-please-action@v3
+        with:
+          release-type: node
+          package-name: "@neynar/react"
+          token: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Publish to npm
+        if: steps.release.outputs.releases_created != 'true'
+        run: |
+          npm install
+          npm publish
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

README.md

@@ -79,7 +79,7 @@ This component displays a user's Farcaster profile information.
 Params:
 - `fid` (number): The FID of the user to display.
 - `viewerFid?` (number): The FID of the viewer. Default: undefined.
-- `customStyles?` (CSSProperties): Custom styles for the profile card. Default: {}
+- `containerStyles?` (CSSProperties): Custom styles for the profile card. Default: {}
 
 Usage:
 ```tsx
@@ -110,7 +110,8 @@ Params:
     setLocalFrame: React.Dispatch<React.SetStateAction<NeynarFrame>>,
     inputValue?: string
   ) => Promise<NeynarFrame>;`: A handler to add functionality when a frame button is pressed.
-- `customStyles?` (CSSProperties): Custom styles for the cast card. Default: {}
+- `containerStyles?` (CSSProperties): Custom styles for the cast card's container. Default: {}
+- `textStyles?` (CSSProperties): Custom styles for the cast card's text. Default: {}
 
 Usage:
 ```tsx

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neynar/react",
-  "version": "0.9.2",
+  "version": "0.9.3",
   "description": "Farcaster frontend component library powered by Neynar",
   "main": "dist/bundle.cjs.js",
   "module": "dist/bundle.es.js",

src/components/molecules/CastCard.tsx

@@ -158,7 +158,8 @@ export type CastCardProps = {
     inputValue?: string
   ) => Promise<NeynarFrame>;
   direct_replies?: CastCardProps[];
-  customStyles?: React.CSSProperties;
+  containerStyles?: React.CSSProperties;
+  textStyles?: React.CSSProperties;
 };
 
 export const CastCard = React.memo(
@@ -184,7 +185,8 @@ export const CastCard = React.memo(
     onCommentBtnPress,
     onFrameBtnPress,
     direct_replies,
-    customStyles
+    containerStyles,
+    textStyles
   }: CastCardProps) => {
     const [likesCount, setLikesCount] = useState<number>(reactions.likes_count);
     const [isLiked, setIsLiked] = useState<boolean>(reactions.likes.some(like => like.fid === viewerFid));
@@ -217,11 +219,11 @@ export const CastCard = React.memo(
     const renderedEmbeds = useRenderEmbeds(filteredEmbeds, allowReactions, viewerFid);
 
     return (
-      <StyledCastCard style={{ ...customStyles, borderWidth: isEmbed ? "1px" : "0" }}>
+      <StyledCastCard style={{ ...containerStyles, borderWidth: isEmbed ? "1px" : "0" }}>
         <HBox>
           <Box spacingRight="10px">
             <Avatar
-              src={avatarImgUrl ?? SKELETON_PFP_URL}
+              src={avatarImgUrl && avatarImgUrl.length > 0 ? avatarImgUrl : SKELETON_PFP_URL}
               onError={handleError}
               loading="lazy"
               alt={`${displayName ?? 'Skeleton'} Avatar`}
@@ -245,7 +247,7 @@ export const CastCard = React.memo(
             </HBox>
 
             <Box spacingVertical="15px">
-              <LinkifiedText>{linkifiedText}</LinkifiedText>
+              <LinkifiedText style={textStyles}>{linkifiedText}</LinkifiedText>
             </Box>
             {renderEmbeds && filteredEmbeds && filteredEmbeds.length > 0 ? (
               <EmbedsContainer style={{ margin: isSingle ? '10px 0' : '0' }}>
@@ -304,4 +306,4 @@ export const CastCard = React.memo(
       </StyledCastCard>
     );
   }
-);
+);

src/components/molecules/ProfileCard.tsx

@@ -78,7 +78,7 @@ export type ProfileCardProps = {
   isFollowing?: boolean;
   isOwnProfile?: boolean;
   onCast?: () => void;
-  customStyles?: React.CSSProperties;
+  containerStyles?: React.CSSProperties;
 };
 
 export const ProfileCard = memo(
@@ -94,7 +94,7 @@ export const ProfileCard = memo(
     isFollowing,
     isOwnProfile,
     onCast,
-    customStyles,
+    containerStyles,
   }: ProfileCardProps) => {
     const linkifiedBio = useLinkifyBio(bio);
 
@@ -113,18 +113,18 @@ export const ProfileCard = memo(
     };
 
     const customNumberStyle = {
-      color: customStyles?.color,
+      color: containerStyles?.color,
     };
 
     return (
-      <StyledProfileCard style={customStyles}>
+      <StyledProfileCard style={containerStyles}>
         {isOwnProfile && onCast && (
           <HBox
             alignItems="center"
             justifyContent="space-between"
             spacingBottom="20px"
           >
-            <UsernameTitle style={customStyles}>@{username}</UsernameTitle>
+            <UsernameTitle style={containerStyles}>@{username}</UsernameTitle>
             <ButtonPrimary onClick={onCast}>Cast</ButtonPrimary>
           </HBox>
         )}
@@ -148,21 +148,21 @@ export const ProfileCard = memo(
                   )}
                 </HBox>
                 <HBox alignItems="center">
-                  <Username style={customStyles}>@{username}</Username>
-                  {isFollowing && <Tag style={customStyles}>Follows you</Tag>}
+                  <Username style={containerStyles}>@{username}</Username>
+                  {isFollowing && <Tag style={containerStyles}>Follows you</Tag>}
                 </HBox>
               </VBox>
               <HBox>
                 {isOwnProfile && (
-                  <ButtonOutlined style={customStyles} onClick={handleEditProfile}>
+                  <ButtonOutlined style={containerStyles} onClick={handleEditProfile}>
                     Edit Profile
                   </ButtonOutlined>
                 )}
               </HBox>
             </HBox>
 
             <Box spacingVertical="15px">
-              <div style={customStyles}>{linkifiedBio}</div>
+              <div style={containerStyles}>{linkifiedBio}</div>
             </Box>
 
             <HBox>

src/components/organisms/NeynarCastCard/index.tsx

@@ -43,7 +43,8 @@ export type NeynarCastCardProps = {
     setLocalFrame: React.Dispatch<React.SetStateAction<NeynarFrame>>,
     inputValue?: string
   ) => Promise<NeynarFrame>;
-  customStyles?: React.CSSProperties;
+  containerStyles?: React.CSSProperties;
+  textStyles?: React.CSSProperties;
 };
 
 export const NeynarCastCard: React.FC<NeynarCastCardProps> = ({
@@ -57,7 +58,8 @@ export const NeynarCastCard: React.FC<NeynarCastCardProps> = ({
   onRecastBtnPress,
   onCommentBtnPress,
   onFrameBtnPress,
-  customStyles
+  containerStyles,
+  textStyles
 }) => {
   const { client_id } = useNeynarContext();
   const [castData, setCastData] = React.useState<any | null>(null);
@@ -115,7 +117,8 @@ export const NeynarCastCard: React.FC<NeynarCastCardProps> = ({
       allowReactions={allowReactions}
       hasPowerBadge={castData.author.power_badge}
       isOwnProfile={isOwnProfile}
-      customStyles={customStyles}
+      containerStyles={containerStyles}
+      textStyles={textStyles}
       onLikeBtnPress={onLikeBtnPress}
       onRecastBtnPress={onRecastBtnPress}
       onCommentBtnPress={onCommentBtnPress}

src/components/organisms/NeynarProfileCard/index.tsx

@@ -33,13 +33,13 @@ async function fetchUserByFid({
 export type NeynarProfileCardProps = {
   fid: number;
   viewerFid?: number;
-  customStyles?: React.CSSProperties;
+  containerStyles?: React.CSSProperties;
 };
 
 export const NeynarProfileCard: React.FC<NeynarProfileCardProps> = ({
   fid,
   viewerFid,
-  customStyles
+  containerStyles
 }) => {
   const { client_id } = useNeynarContext();
 
@@ -92,7 +92,7 @@ export const NeynarProfileCard: React.FC<NeynarProfileCardProps> = ({
       isOwnProfile={isOwnProfile}
       isFollowing={userData.viewer_context?.followed_by}
       onCast={handleCast}
-      customStyles={customStyles}
+      containerStyles={containerStyles}
     />
   );
 };

src/components/stories/NeynarCastCard.stories.tsx

@@ -42,7 +42,7 @@ const TemplateWithCustomStyling: StoryFn<NeynarCastCardProps> = ({
   allowReactions,
   renderEmbeds,
   renderFrames,
-  customStyles
+  containerStyles
 }) => (
   <NeynarCastCard
     type={type}
@@ -51,7 +51,7 @@ const TemplateWithCustomStyling: StoryFn<NeynarCastCardProps> = ({
     allowReactions={allowReactions}
     renderEmbeds={renderEmbeds}
     renderFrames={renderFrames}
-    customStyles={customStyles}
+    containerStyles={containerStyles}
   />
 );
 
@@ -157,5 +157,5 @@ WithCustomStyling.args = {
   allowReactions: false,
   renderEmbeds: true,
   renderFrames: false,
-  customStyles: { background: "black", color: "white" },
+  containerStyles: { background: "black", color: "white" },
 };

src/components/stories/NeynarProfileCard.stories.tsx

@@ -18,8 +18,8 @@ const Template: StoryFn<ProfileCardProps> = (args) => <ProfileCard {...args} />;
 const TemplateWithUser: StoryFn<NeynarProfileCardProps> = ({
   fid,
   viewerFid,
-  customStyles,
-}) => <NeynarProfileCard fid={fid} viewerFid={viewerFid} customStyles={customStyles} />;
+  containerStyles,
+}) => <NeynarProfileCard fid={fid} viewerFid={viewerFid} containerStyles={containerStyles} />;
 
 export const Primary = Template.bind({});
 Primary.args = {
@@ -50,7 +50,7 @@ export const WithCustomStyling = TemplateWithUser.bind({});
 WithCustomStyling.args = {
   fid: 1,
   viewerFid: 1,
-  customStyles: { background: "black", color: "white" },
+  containerStyles: { background: "black", color: "white" },
 };
 
 export const WithEmptyPFPUser = TemplateWithUser.bind({});