Merge remote-tracking branch 'upstream/develop' into release/v4.0.0-b…

…eta.16
AmityCo · Oct 25, 2024 · ae33279 · ae33279
2 parents 35a204c + 55dd372
commit ae33279
Show file tree

Hide file tree

Showing 33 changed files with 284 additions and 49 deletions.
diff --git a/.storybook/main.ts b/.storybook/main.ts
@@ -1,3 +1,6 @@
+import path from 'path';
+import { readdirSync } from 'fs';
+import type { InlineConfig, Plugin } from 'vite';
 import type { StorybookConfig } from '@storybook/react-vite';
 
 const config: StorybookConfig = {
@@ -9,11 +12,80 @@ const config: StorybookConfig = {
     '@storybook/addon-controls',
     '@storybook/addon-viewport',
     '@storybook/addon-toolbars',
-
     '@storybook/addon-a11y',
   ],
   framework: '@storybook/react-vite',
   staticDirs: ['../static'],
+  viteFinal: async (config) => {
+    config.plugins?.push(
+      assetPlugin(config, {
+        markup: `[ICONS]`,
+        exclude: [/.*stories.*/],
+        assetDir: 'src/v4/icons',
+        storyFileName: 'icons.stories.tsx',
+      }),
+    );
+    return config;
+  },
 };
 
 export default config;
+
+const assetPlugin: (
+  config: InlineConfig,
+  options: {
+    assetDir: string;
+    storyFileName: string;
+    exclude?: Array<RegExp>;
+    markup: string | RegExp;
+  },
+) => Plugin = (config, { storyFileName, assetDir, exclude, markup }) => {
+  return {
+    enforce: 'pre',
+    name: 'vite-plugin-v4-icons',
+    transform(code, id) {
+      const rootDir = config.root!;
+
+      if (id.includes(storyFileName)) {
+        let icons = '',
+          imports = '';
+        readdirSync(path.join(rootDir, assetDir)).forEach((file) => {
+          if (file.match(/.*\.(tsx)/) && exclude?.every((ex) => !file.match(ex))) {
+            const fileName = file.replace(/.tsx/, '');
+            const source = {
+              relativePath: path.join(assetDir.replace(/.*src\//, ''), fileName),
+              path: path.join(rootDir, assetDir, file),
+            };
+
+            // eslint-disable-next-line @typescript-eslint/no-var-requires
+            const exportedAssets = require(source.path!);
+            const entries = Object.entries(exportedAssets);
+
+            entries.map(([key, _]) => {
+              const componentName = key === 'default' ? fileName : key;
+              imports +=
+                key == 'default'
+                  ? `import ${fileName} from "src/${source?.relativePath}";\n`
+                  : `import {${key}} from "src/${source?.relativePath}";\n`;
+              icons += `
+                  <button 
+                    key="${key}"
+                    data-name="${componentName}" 
+                  >
+                    <${componentName} width='25' height='25' />
+                    <div>
+                      <p>${componentName}</p>
+                      <p>${source.relativePath.replace('/src', '')}</p>
+                    </div>
+                  </button>
+            `;
+            });
+          }
+        });
+
+        code = imports + code.replace(markup, icons);
+      }
+      return code;
+    },
+  };
+};
diff --git a/src/core/components/Modal/styles.tsx b/src/core/components/Modal/styles.tsx
@@ -2,7 +2,7 @@ import React, { ReactNode } from 'react';
 import styled, { css } from 'styled-components';
 import { Close } from '~/icons';
 
-export const CloseIcon = styled(Close).attrs<{ icon?: ReactNode }>({ width: 18, height: 18 })`
+export const CloseIcon = styled(Close).attrs<{ icon?: ReactNode }>({ width: 20, height: 20 })`
   padding: 0 6px;
   cursor: pointer;
   margin-left: auto;

diff --git a/src/helpers/utils.ts b/src/helpers/utils.ts
@@ -6,8 +6,14 @@ import {
 } from '@amityco/ts-sdk';
 import isEmpty from 'lodash/isEmpty';
 
-export type Mentioned = { userId: string; length: number; index: number; type: string };
-export type Mentionees = Parameters<typeof CommentRepository.updateComment>[1]['mentionees'];
+export type Mentioned = {
+  userId: string;
+  length: number;
+  index: number;
+  type: string;
+  displayName: string;
+};
+export type Mentionees = Amity.UserMention[];
 export type Metadata = {
   mentioned?: Mentioned[];
 };
@@ -116,6 +122,7 @@ export function extractMetadata(
           length: displayName.length - AT_SIGN_LENGTH,
           type: 'user',
           userId: id,
+          displayName,
         })),
     ];
 
@@ -160,3 +167,26 @@ export function parseMentionsMarkup(
 export function isNonNullable<TValue>(value: TValue | undefined | null): value is TValue {
   return value != null;
 }
+
+export function reconstructMentions(
+  metadata?: Metadata,
+  mentionees?: Mentionees,
+): { plainTextIndex: number; id: string; display: string }[] {
+  if (!metadata?.mentioned || mentionees?.length === 0) {
+    return [];
+  }
+
+  const userIds = mentionees?.find((mentionee) => mentionee.type === 'user')?.userIds || [];
+
+  return metadata?.mentioned?.map((mention, index) => {
+    const id = userIds[index];
+    const displayName = mention.displayName;
+    const display = '@' + (displayName ?? id);
+
+    return {
+      plainTextIndex: mention.index,
+      id,
+      display,
+    };
+  });
+}
diff --git a/src/social/components/post/Editor/index.tsx b/src/social/components/post/Editor/index.tsx
@@ -6,20 +6,19 @@ import { PostEditorContainer, Footer, ContentContainer, PostButton } from './sty
 import { usePostEditor } from './usePostEditor';
 
 interface PostEditorProps {
-  postId?: string;
+  post: Amity.Post;
   onSave: () => void;
   className?: string;
   placeholder?: string;
 }
 
 const PostEditor = ({
-  postId,
+  post,
   placeholder = "What's going on...",
   className,
   onSave,
 }: PostEditorProps) => {
   const {
-    post,
     markup,
     onChange,
     queryMentionees,
@@ -30,7 +29,7 @@ const PostEditor = ({
     isEmpty,
     handleSave,
   } = usePostEditor({
-    postId,
+    post,
     onSave,
   });
 

diff --git a/src/social/components/post/Editor/usePostEditor.ts b/src/social/components/post/Editor/usePostEditor.ts
@@ -1,12 +1,11 @@
 import { PostRepository } from '@amityco/ts-sdk';
 import { useMemo, useState } from 'react';
-import { parseMentionsMarkup } from '~/helpers/utils';
+import { parseMentionsMarkup, reconstructMentions } from '~/helpers/utils';
 import usePost from '~/social/hooks/usePost';
 import usePostByIds from '~/social/hooks/usePostByIds';
 import useSocialMention from '~/social/hooks/useSocialMention';
 
-export const usePostEditor = ({ postId, onSave }: { postId?: string; onSave: () => void }) => {
-  const post = usePost(postId);
+export const usePostEditor = ({ post, onSave }: { post: Amity.Post; onSave: () => void }) => {
   const initialChildrenPosts = usePostByIds(post?.children);
   const { text, markup, mentions, mentionees, metadata, clearAll, onChange, queryMentionees } =
     useSocialMention({
@@ -18,6 +17,7 @@ export const usePostEditor = ({ postId, onSave }: { postId?: string; onSave: ()
         typeof post?.data === 'string' ? post?.data : (post?.data as Amity.ContentDataText)?.text,
         post?.metadata,
       ),
+      remoteMentions: reconstructMentions(post?.metadata, post?.mentionees),
     });
 
   // List of the children posts removed - these will be deleted on save.

diff --git a/src/social/components/post/Post/DefaultPostRenderer.tsx b/src/social/components/post/Post/DefaultPostRenderer.tsx
@@ -320,13 +320,13 @@ const DefaultPostRenderer = (props: DefaultPostRendererProps) => {
             </ReviewButtonsContainer>
           )}
 
-          {isEditing && (
+          {isEditing && post && (
             <Modal
               data-qa-anchor="post-editor-modal"
               title={formatMessage({ id: 'post.editPost' })}
               onCancel={closeEditingPostModal}
             >
-              <PostEditor postId={post?.postId} onSave={closeEditingPostModal} />
+              <PostEditor post={post} onSave={closeEditingPostModal} />
             </Modal>
           )}
         </>

diff --git a/src/social/hooks/useSocialMention.ts b/src/social/hooks/useSocialMention.ts
@@ -8,6 +8,7 @@ interface UseSocialMentionProps {
   targetType?: 'user' | 'community' | string;
   remoteText?: string;
   remoteMarkup?: string;
+  remoteMentions?: { plainTextIndex: number; id: string; display: string }[];
 }
 
 export type QueryMentioneesFnType = (query?: string) => Promise<
@@ -24,15 +25,15 @@ const useSocialMention = ({
   targetType,
   remoteText,
   remoteMarkup,
+  remoteMentions = [],
 }: UseSocialMentionProps) => {
   const isCommunityFeed = targetType === 'community';
   const community = useCommunity(targetId);
 
   const [text, setText] = useState(remoteText ?? '');
   const [markup, setMarkup] = useState(remoteMarkup ?? remoteText);
-  const [mentions, setMentions] = useState<
-    { plainTextIndex: number; id: string; display: string }[]
-  >([]);
+  const [mentions, setMentions] =
+    useState<{ plainTextIndex: number; id: string; display: string }[]>(remoteMentions);
 
   useEffect(() => {
     setText(remoteText || '');

diff --git a/src/v4/icons/icons.stories.tsx b/src/v4/icons/icons.stories.tsx
@@ -0,0 +1,28 @@
+import React from 'react';
+import styles from './icons.style.module.css';
+
+export default {
+  title: 'V4/Icons',
+};
+
+export const Default = {
+  render: () => {
+    return (
+      <section
+        className={styles.container}
+        onClick={(e) => {
+          if (e.target instanceof HTMLButtonElement) {
+            const iconName = e.target.getAttribute('data-name');
+            if (iconName) {
+              navigator.clipboard.writeText(iconName).then(() => {
+                alert(`${iconName} copied.`);
+              });
+            }
+          }
+        }}
+      >
+        [ICONS]
+      </section>
+    );
+  },
+};
diff --git a/src/v4/icons/icons.style.module.css b/src/v4/icons/icons.style.module.css
@@ -0,0 +1,26 @@
+.container {
+  gap: 2rem;
+  width: 100%;
+  padding: 3rem;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
+  background: var(--asc-color-background-default);
+}
+
+.container button {
+  width: 100%;
+  padding: 1rem;
+  display: flex;
+  cursor: pointer;
+  align-items: center;
+  border-radius: 0.5rem;
+  flex-direction: column;
+  justify-content: center;
+  color: var(--asc-color-base-default);
+  background: var(--asc-color-secondary-shade5);
+  border: 1px solid var(--asc-color-secondary-shade4);
+}
+
+.container button svg {
+  fill: var(--asc-color-base-default);
+}
diff --git a/src/v4/social/components/Comment/Comment.tsx b/src/v4/social/components/Comment/Comment.tsx
@@ -248,7 +248,9 @@ export const Comment = ({
                       componentId={componentId}
                       timestamp={comment.createdAt}
                     />
-                    {comment.createdAt !== comment.editedAt && ' (edited)'}
+                    <span data-qa-anchor={`${pageId}/${componentId}/comment_edited_text`}>
+                      {comment.createdAt !== comment.editedAt && ' (edited)'}
+                    </span>
                   </Typography.Caption>
 
                   <div onClick={handleLike}>

diff --git a/src/v4/social/components/CommentComposer/CommentComposer.tsx b/src/v4/social/components/CommentComposer/CommentComposer.tsx
@@ -175,7 +175,7 @@ export const CommentComposer = ({
           data-qa-anchor={`${pageId}/${componentId}/comment_composer_post`}
           isDisabled={!textValue?.data?.text}
           className={styles.commentComposer__button}
-          onPress={() => mutateAsync({ params: textValue })}
+          onPressStart={() => mutateAsync({ params: textValue })}
         >
           <Typography.Body>Post</Typography.Body>
         </Button>

diff --git a/src/v4/social/components/CommentComposer/CommentInput.tsx b/src/v4/social/components/CommentComposer/CommentInput.tsx
@@ -177,6 +177,9 @@ export const CommentInput = forwardRef<CommentInputRef, CommentInputProps>(
         const root = $getRoot();
         root.clear();
       });
+      setTimeout(() => {
+        editorRef.current?.blur();
+      }, 500);
     };
 
     useImperativeHandle(ref, () => ({
@@ -202,7 +205,6 @@ export const CommentInput = forwardRef<CommentInputRef, CommentInputProps>(
         }}
       >
         <div
-          data-qa-anchor={accessibilityId}
           className={styles.editorContainer}
           style={
             {
@@ -211,7 +213,12 @@ export const CommentInput = forwardRef<CommentInputRef, CommentInputProps>(
           }
         >
           <RichTextPlugin
-            contentEditable={<ContentEditable className={styles.editorEditableContent} />}
+            contentEditable={
+              <ContentEditable
+                data-qa-anchor={accessibilityId}
+                className={styles.editorEditableContent}
+              />
+            }
             placeholder={
               placehoder ? <div className={styles.editorPlaceholder}>{placehoder}</div> : null
             }

diff --git a/src/v4/social/components/PostContent/PostContent.tsx b/src/v4/social/components/PostContent/PostContent.tsx
@@ -400,7 +400,10 @@ export const PostContent = ({
             ) : null}
             <Timestamp timestamp={post.createdAt} />
             {post.createdAt !== post.editedAt && (
-              <Typography.Caption className={styles.postContent__bar__information__editedTag}>
+              <Typography.Caption
+                data-qa-anchor={`${pageId}/${componentId}/post_edited_text`}
+                className={styles.postContent__bar__information__editedTag}
+              >
                 (edited)
               </Typography.Caption>
             )}

diff --git a/src/v4/social/components/ReplyComment/ReplyComment.tsx b/src/v4/social/components/ReplyComment/ReplyComment.tsx
@@ -187,7 +187,9 @@ const PostReplyComment = ({ pageId = '*', community, comment }: ReplyCommentProp
                     componentId={componentId}
                     timestamp={comment.createdAt}
                   />
-                  {comment.createdAt !== comment.editedAt && ' (edited)'}
+                  <span data-qa-anchor={`${pageId}/${componentId}/reply_comment_edited_text`}>
+                    {comment.createdAt !== comment.editedAt && ' (edited)'}
+                  </span>
                 </Typography.Caption>
                 <div onClick={handleLike}>
                   <Typography.CaptionBold

diff --git a/src/v4/social/components/StoryTab/StoryTabCommunity.tsx b/src/v4/social/components/StoryTab/StoryTabCommunity.tsx
@@ -63,7 +63,7 @@ export const StoryTabCommunityFeed: React.FC<StoryTabCommunityFeedProps> = ({
   const { community } = useCommunityInfo(communityId);
 
   const { currentUserId, client } = useSDK();
-  const { user } = useUser(currentUserId);
+  const { user } = useUser({ userId: currentUserId });
   const isGlobalAdmin = isAdmin(user?.roles);
   const hasStoryPermission = isGlobalAdmin || checkStoryPermission(client, communityId);
   const hasStories = stories?.length > 0;