Merge silverlogic/baseapp-frontend#413: files module

packages/components/modules/__shared__/web/ReactionButton/__storybook__/mockResolvers.ts

@@ -13,9 +13,8 @@ export const mockResolvers = {
     user: {
       id: 'user-1',
       fullName: 'John Doe',
-      avatar: {
-        url: 'https://nyc3.digitaloceanspaces.com/baseapp-production-storage/media/user-avatars/5/6/4/resized/50/50/185a04dfdaa512d218cf9b7a5097e3c9.png',
-      },
+      avatar:
+        'https://nyc3.digitaloceanspaces.com/baseapp-production-storage/media/user-avatars/5/6/4/resized/50/50/185a04dfdaa512d218cf9b7a5097e3c9.png',
     },
     reactionsCount: {
       total: 2,

packages/components/modules/__shared__/web/SocialInput/index.tsx

@@ -67,6 +67,7 @@ const SocialInput = forwardRef<HTMLInputElement, SocialInputProps>(
       SocialTextField = DefaultSocialTextField,
       SocialTextFieldProps = {},
       SocialUpsertActions = DefaultSocialUpsertActions,
+      SocialUpsertActionsProps = {},
       SubmitActions = DefaultSubmitActions,
       SubmitActionsProps = {},
       Form = DefaultForm,
@@ -116,7 +117,7 @@ const SocialInput = forwardRef<HTMLInputElement, SocialInputProps>(
           onCancelReply={onCancelReply}
           {...SocialTextFieldProps}
         >
-          <SocialUpsertActions />
+          <SocialUpsertActions {...SocialUpsertActionsProps} />
           <SubmitActions
             formId={formId}
             disabled={isCreateButtonDisabled}

packages/components/modules/__shared__/web/SocialInput/types.ts

@@ -16,7 +16,8 @@ export interface SocialInputProps {
   mode?: SocialTextFieldMode
   SocialTextField?: FC<SocialTextFieldProps>
   SocialTextFieldProps?: Partial<SocialTextFieldProps>
-  SocialUpsertActions?: FC
+  SocialUpsertActions?: FC<any>
+  SocialUpsertActionsProps?: Record<string, any>
   SubmitActions?: FC<SubmitActionsProps>
   SubmitActionsProps?: Partial<SubmitActionsProps>
   Form?: ComponentType<ComponentPropsWithoutRef<'form'>>

packages/components/modules/activity-log/common/graphql/queries/ActivityLogsFragment.ts

@@ -45,9 +45,7 @@ export const ActivityLogsFragmentQuery = graphql`
             id
             fullName
             email
-            avatar(width: 48, height: 48) {
-              url
-            }
+            avatar(width: 48, height: 48)
           }
         }
       }

packages/components/modules/activity-log/web/ActivityLogComponent/LogGroups/__storybook__/stories.tsx

@@ -37,9 +37,7 @@ export const DefaultLogItem: Story = {
               id: 'user-1',
               fullName: 'Alice Doe',
               email: 'alice@example.com',
-              avatar: {
-                url: 'https://placehold.co/48x48',
-              },
+              avatar: 'https://placehold.co/48x48',
             },
           },
           {
@@ -54,9 +52,7 @@ export const DefaultLogItem: Story = {
               id: 'user-2',
               fullName: 'Bob Smith',
               email: 'bob@example.com',
-              avatar: {
-                url: 'https://placehold.co/48x48?text=Bob',
-              },
+              avatar: 'https://placehold.co/48x48?text=Bob',
             },
           },
         ],

packages/components/modules/activity-log/web/ActivityLogComponent/LogGroups/index.tsx

@@ -44,7 +44,7 @@ const LogGroups: FC<LogGroupsProps> = ({
   }
   const renderAvatar = (group: LogGroup) => {
     if (group.logs[0]?.user == null) return <AvatarDeletedUserIcon />
-    return <GroupAvatar width={40} height={40} src={group.logs[0]?.user?.avatar?.url ?? ''} />
+    return <GroupAvatar width={40} height={40} src={group.logs[0]?.user?.avatar ?? ''} />
   }
 
   const renderItemContent = (group: LogGroup) => (

packages/components/modules/activity-log/web/ActivityLogComponent/LogItem/__storybook__/stories.tsx

@@ -33,9 +33,7 @@ export const DefaultLogItem: Story = {
         id: 'user-1',
         fullName: 'Mock User',
         email: 'mock@tsl.io',
-        avatar: {
-          url: 'https://placehold.co/48x48',
-        },
+        avatar: 'https://placehold.co/48x48',
       },
     },
   },

packages/components/modules/activity-log/web/ActivityLogComponent/__storybook__/mockResolvers.ts

@@ -12,9 +12,8 @@ export const mockData = {
               id: '1234',
               fullName: 'Activity User',
               email: 'test@tsl.io',
-              avatar: {
-                url: 'https://nyc3.digitaloceanspaces.com/baseapp-db-staging/media/profile_images/2162b9f5-3c50-4b45-8d33-9fdb28f5dee4.JPG.48x48_q85.jpg',
-              },
+              avatar:
+                'https://nyc3.digitaloceanspaces.com/baseapp-db-staging/media/profile_images/2162b9f5-3c50-4b45-8d33-9fdb28f5dee4.JPG.48x48_q85.jpg',
             },
             __typename: 'ActivityLog',
           },
@@ -30,9 +29,8 @@ export const mockData = {
               id: '5678',
               fullName: 'Activity User',
               email: 'test@tsl.io',
-              avatar: {
-                url: 'https://nyc3.digitaloceanspaces.com/baseapp-db-staging/media/profile_images/2162b9f5-3c50-4b45-8d33-9fdb28f5dee4.JPG.48x48_q85.jpg',
-              },
+              avatar:
+                'https://nyc3.digitaloceanspaces.com/baseapp-db-staging/media/profile_images/2162b9f5-3c50-4b45-8d33-9fdb28f5dee4.JPG.48x48_q85.jpg',
             },
             __typename: 'ActivityLog',
           },
@@ -48,9 +46,8 @@ export const mockData = {
               id: '91011',
               fullName: 'Activity User',
               email: 'test@tsl.io',
-              avatar: {
-                url: 'https://nyc3.digitaloceanspaces.com/baseapp-db-staging/media/profile_images/2162b9f5-3c50-4b45-8d33-9fdb28f5dee4.JPG.48x48_q85.jpg',
-              },
+              avatar:
+                'https://nyc3.digitaloceanspaces.com/baseapp-db-staging/media/profile_images/2162b9f5-3c50-4b45-8d33-9fdb28f5dee4.JPG.48x48_q85.jpg',
             },
             __typename: 'ActivityLog',
           },
@@ -66,9 +63,8 @@ export const mockData = {
               id: '1213',
               fullName: 'Test User',
               email: 'test2@tsl.io',
-              avatar: {
-                url: 'https://nyc3.digitaloceanspaces.com/baseapp-db-staging/media/profile_images/7069d845-181f-45c8-ab45-ca10c0f7937f.JPG.48x48_q85.jpg',
-              },
+              avatar:
+                'https://nyc3.digitaloceanspaces.com/baseapp-db-staging/media/profile_images/7069d845-181f-45c8-ab45-ca10c0f7937f.JPG.48x48_q85.jpg',
             },
             __typename: 'ActivityLog',
           },
@@ -84,9 +80,8 @@ export const mockData = {
               id: '1415',
               fullName: 'Test User',
               email: 'test2@tsl.io',
-              avatar: {
-                url: 'https://nyc3.digitaloceanspaces.com/baseapp-db-staging/media/profile_images/7069d845-181f-45c8-ab45-ca10c0f7937f.JPG.48x48_q85.jpg',
-              },
+              avatar:
+                'https://nyc3.digitaloceanspaces.com/baseapp-db-staging/media/profile_images/7069d845-181f-45c8-ab45-ca10c0f7937f.JPG.48x48_q85.jpg',
             },
             __typename: 'ActivityLog',
           },
@@ -102,9 +97,8 @@ export const mockData = {
               id: '1617',
               fullName: 'Test User',
               email: 'test2@tsl.io',
-              avatar: {
-                url: 'https://nyc3.digitaloceanspaces.com/baseapp-db-staging/media/profile_images/7069d845-181f-45c8-ab45-ca10c0f7937f.JPG.48x48_q85.jpg',
-              },
+              avatar:
+                'https://nyc3.digitaloceanspaces.com/baseapp-db-staging/media/profile_images/7069d845-181f-45c8-ab45-ca10c0f7937f.JPG.48x48_q85.jpg',
             },
             __typename: 'ActivityLog',
           },
@@ -120,9 +114,8 @@ export const mockData = {
               id: '1819',
               fullName: 'Test User',
               email: 'test2@tsl.io',
-              avatar: {
-                url: 'https://nyc3.digitaloceanspaces.com/baseapp-db-staging/media/profile_images/7069d845-181f-45c8-ab45-ca10c0f7937f.JPG.48x48_q85.jpg',
-              },
+              avatar:
+                'https://nyc3.digitaloceanspaces.com/baseapp-db-staging/media/profile_images/7069d845-181f-45c8-ab45-ca10c0f7937f.JPG.48x48_q85.jpg',
             },
             __typename: 'ActivityLog',
           },
@@ -138,9 +131,8 @@ export const mockData = {
               id: '2021',
               fullName: 'Test User',
               email: 'test2@tsl.io',
-              avatar: {
-                url: 'https://nyc3.digitaloceanspaces.com/baseapp-db-staging/media/profile_images/7069d845-181f-45c8-ab45-ca10c0f7937f.JPG.48x48_q85.jpg',
-              },
+              avatar:
+                'https://nyc3.digitaloceanspaces.com/baseapp-db-staging/media/profile_images/7069d845-181f-45c8-ab45-ca10c0f7937f.JPG.48x48_q85.jpg',
             },
             __typename: 'ActivityLog',
           },
@@ -220,9 +212,8 @@ export const mockData = {
               id: '3031',
               fullName: 'Test User',
               email: 'test2@tsl.io',
-              avatar: {
-                url: 'https://nyc3.digitaloceanspaces.com/baseapp-db-staging/media/profile_images/7069d845-181f-45c8-ab45-ca10c0f7937f.JPG.48x48_q85.jpg',
-              },
+              avatar:
+                'https://nyc3.digitaloceanspaces.com/baseapp-db-staging/media/profile_images/7069d845-181f-45c8-ab45-ca10c0f7937f.JPG.48x48_q85.jpg',
             },
             __typename: 'ActivityLog',
           },
@@ -238,9 +229,8 @@ export const mockData = {
               id: '3233',
               fullName: 'Test User',
               email: 'test2@tsl.io',
-              avatar: {
-                url: 'https://nyc3.digitaloceanspaces.com/baseapp-db-staging/media/profile_images/7069d845-181f-45c8-ab45-ca10c0f7937f.JPG.48x48_q85.jpg',
-              },
+              avatar:
+                'https://nyc3.digitaloceanspaces.com/baseapp-db-staging/media/profile_images/7069d845-181f-45c8-ab45-ca10c0f7937f.JPG.48x48_q85.jpg',
             },
             __typename: 'ActivityLog',
           },
@@ -256,9 +246,8 @@ export const mockData = {
               id: '3435',
               fullName: 'Test User',
               email: 'test2@tsl.io',
-              avatar: {
-                url: 'https://nyc3.digitaloceanspaces.com/baseapp-db-staging/media/profile_images/7069d845-181f-45c8-ab45-ca10c0f7937f.JPG.48x48_q85.jpg',
-              },
+              avatar:
+                'https://nyc3.digitaloceanspaces.com/baseapp-db-staging/media/profile_images/7069d845-181f-45c8-ab45-ca10c0f7937f.JPG.48x48_q85.jpg',
             },
             __typename: 'ActivityLog',
           },
@@ -274,9 +263,8 @@ export const mockData = {
               id: '3637',
               fullName: 'Test User',
               email: 'test2@tsl.io',
-              avatar: {
-                url: 'https://nyc3.digitaloceanspaces.com/baseapp-db-staging/media/profile_images/7069d845-181f-45c8-ab45-ca10c0f7937f.JPG.48x48_q85.jpg',
-              },
+              avatar:
+                'https://nyc3.digitaloceanspaces.com/baseapp-db-staging/media/profile_images/7069d845-181f-45c8-ab45-ca10c0f7937f.JPG.48x48_q85.jpg',
             },
             __typename: 'ActivityLog',
           },

packages/components/modules/comments/common/graphql/queries/CommentItem.ts

@@ -12,9 +12,7 @@ export const CommentItemFragmentQuery = graphql`
     profile {
       id
       name
-      image(width: 50, height: 50) {
-        url
-      }
+      image(width: 50, height: 50)
       urlPath {
         path
       }
@@ -51,6 +49,8 @@ export const CommentItemFragmentQuery = graphql`
     ...ReactionButton_target
 
     ...CommentItem_target
+
+    ...FilesList_target
   }
 `
 

packages/components/modules/comments/common/hooks/useCommentCreateForm/index.ts

@@ -81,7 +81,7 @@ const useCommentCreateForm = ({
           if (expandRepliesOnSuccess && inReplyToId) {
             setCommentIdToExpand(inReplyToId)
           }
-          onSuccess?.({ inReplyToId })
+          onSuccess?.({ inReplyToId, commentId: response?.commentCreate?.comment?.node?.id })
         }
       },
     })

packages/components/modules/comments/common/hooks/useCommentCreateForm/types.ts

@@ -25,7 +25,7 @@ export interface UseCommentCreateFormOptions {
    * leaving reply mode. Used by the native single composer; web keeps the draft.
    */
   resetFormOnReplyTargetChange?: boolean
-  onSuccess?: (context: { inReplyToId?: string }) => void
+  onSuccess?: (context: { inReplyToId?: string; commentId?: string }) => void
 }
 
 export interface UseCommentCreateFormReturn {

packages/components/modules/comments/native/CommentItem/index.tsx

@@ -93,7 +93,7 @@ const CommentItem: FC<CommentItemProps> = ({
                 the avatar/name would be claimed by the inner pressable and never open the
                 action sheet. */}
             <Pressable onPress={goToProfile} onLongPress={openActions}>
-              <AvatarWithPlaceholder imgSource={comment.profile?.image?.url} />
+              <AvatarWithPlaceholder imgSource={comment.profile?.image ?? undefined} />
             </Pressable>
           </View>
           <View style={styles.bodyContainer}>

packages/components/modules/comments/web/CommentCreate/CommentFilesUpsertActions/index.tsx

@@ -0,0 +1,52 @@
+'use client'
+
+import type { FC } from 'react'
+
+import { useFileSelect } from '@baseapp-frontend/components/files/common'
+import { IconButton } from '@baseapp-frontend/design-system/components/web/buttons'
+import { AttachmentIcon, MentionIcon } from '@baseapp-frontend/design-system/components/web/icons'
+
+import type { CommentFilesUpsertActionsProps } from './types'
+
+/**
+ * SocialInput upsert-action bar for the comment composer: the attach icon
+ * uploads files right away; they are attached to the comment once it is created
+ * (see CommentCreate). The mention icon stays a placeholder until wired.
+ */
+const CommentFilesUpsertActions: FC<CommentFilesUpsertActionsProps> = ({
+  onFilesSelected,
+  isUploading = false,
+  maxFiles,
+  maxFileSize,
+  acceptedFileTypes,
+}) => {
+  const { open, getInputProps } = useFileSelect({
+    onFilesSelected,
+    maxFiles,
+    maxFileSize,
+    acceptedFileTypes,
+    disabled: isUploading,
+  })
+
+  return (
+    <div className="grid grid-cols-[repeat(2,max-content)] gap-2">
+      {/* eslint-disable-next-line jsx-a11y/control-has-associated-label */}
+      <input {...getInputProps()} />
+      <IconButton
+        size="small"
+        onClick={open}
+        disabled={isUploading}
+        isLoading={isUploading}
+        aria-label="Attach files"
+      >
+        <AttachmentIcon />
+      </IconButton>
+      <IconButton disabled aria-label="mention">
+        <MentionIcon />
+      </IconButton>
+    </div>
+  )
+}
+
+export default CommentFilesUpsertActions
+export type { CommentFilesUpsertActionsProps } from './types'

packages/components/modules/comments/web/CommentCreate/CommentFilesUpsertActions/types.ts

@@ -0,0 +1,11 @@
+type Accept = Record<string, string[]>
+
+export interface CommentFilesUpsertActionsProps {
+  /** Uploads the picked files (deferred attach happens after the comment is created). */
+  onFilesSelected: (files: File[]) => void
+  /** Shows the attach button in a loading state while uploads are in flight. */
+  isUploading?: boolean
+  maxFiles?: number
+  maxFileSize?: number
+  acceptedFileTypes?: Accept
+}