Release/v3.10.3

.github/workflows/check_do_not_merge.yaml

@@ -12,10 +12,16 @@ on:
 
 jobs:
   ok-to-merge:
-    if: contains(github.event.pull_request.labels.*.name, 'DO NOT MERGE') == false
     runs-on: ubuntu-latest
     steps:
+      - name: This PR is labeled with do not merge
+        if: contains(github.event.pull_request.labels.*.name, 'DO NOT MERGE') == true
+        run: |
+          echo "This PR cannot be merged"
+          exit 1
+
       - name: This PR is not labeled with do not merge
+        if: contains(github.event.pull_request.labels.*.name, 'DO NOT MERGE') == false
         run: |
           echo "This PR can be merged"
           exit 0

.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;
+    },
+  };
+};

CHANGELOG.md

@@ -2,6 +2,8 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### 3.10.3 (2024-10-18)
+
 ### 3.10.2 (2024-09-12)
 
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@amityco/ui-kit-open-source",
-  "version": "3.10.2",
+  "version": "3.10.3",
   "engines": {
     "node": ">=16",
     "pnpm": ">=8"

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;

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,
+    };
+  });
+}

src/social/components/CommunityForm/EditCommunityForm.tsx

@@ -96,6 +96,14 @@ const EditCommunityForm = ({
       await onSubmit?.({ ...data, avatarFileId: data.avatarFileId || undefined });
 
       notification.success({ content: <FormattedMessage id="community.updateSuccess" /> });
+    } catch (error) {
+      console.log('error', error);
+      if (error instanceof Error) {
+        if (error.message.indexOf(':') > -1) {
+          const [, errorMessage] = error.message.split(':');
+          notification.error({ content: errorMessage });
+        }
+      }
     } finally {
       setSubmitting(false);
     }

src/social/components/SideSectionMyCommunity/index.tsx

@@ -23,7 +23,6 @@ const SideSectionMyCommunity = ({ className, activeCommunity }: SideSectionMyCom
   const open = () => setIsOpen(true);
 
   const close = (communityId?: string) => {
-    console.log('communityId', communityId);
     setIsOpen(false);
     communityId && onCommunityCreated(communityId);
   };

src/social/components/UserHeader/UIUserHeader.tsx

@@ -9,13 +9,15 @@ import {
   UserHeaderTitle,
 } from './styles';
 import { useCustomComponent } from '~/core/providers/CustomComponentsProvider';
+import { BrandBadge } from '~/v4/social/internal-components/BrandBadge/BrandBadge';
 
 interface UIUserHeaderProps {
   userId?: string | null;
   displayName?: string | null;
   avatarFileUrl?: string | null;
   children?: ReactNode;
   isBanned?: boolean;
+  isBrand?: boolean;
   onClick?: (userId: string) => void;
 }
 
@@ -26,6 +28,7 @@ const UIUserHeader = ({
   children,
   onClick,
   isBanned,
+  isBrand,
 }: UIUserHeaderProps) => {
   const onClickUser = () => userId && onClick?.(userId);
   return (
@@ -36,7 +39,7 @@ const UIUserHeader = ({
         onClick={onClickUser}
       />
       <UserHeaderTitle title={userId || undefined} onClick={onClickUser}>
-        <div>{displayName}</div> {isBanned && <BanIcon />}
+        <div>{displayName}</div> {isBanned && <BanIcon />} {isBrand && <BrandBadge />}
       </UserHeaderTitle>
       {children && <UserHeaderSubtitle>{children}</UserHeaderSubtitle>}
     </UserHeaderContainer>

src/social/components/UserHeader/index.tsx

@@ -22,6 +22,7 @@ const UserHeader = ({ userId, children, onClick, isBanned = false }: UserHeaderP
       displayName={user?.displayName}
       avatarFileUrl={avatarFileUrl}
       isBanned={isBanned}
+      isBrand={user?.isBrand}
       onClick={onClick}
     >
       {children}

src/social/components/UserHeader/styles.tsx

@@ -27,6 +27,7 @@ export const UserHeaderTitle = styled.div`
   display: flex;
   min-width: 0;
   align-items: center;
+  gap: 8px;
 
   > div {
     text-overflow: ellipsis;

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,
   });
 

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.

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>
           )}
         </>

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 || '');

src/social/pages/CommunityEdit/index.tsx

@@ -33,11 +33,11 @@ const CommunityEditPage = ({
 
   useEffect(() => setActiveTab(tab), [tab]);
 
-  const { onClickCommunity } = useNavigation();
+  const { onBack } = useNavigation();
   const community = useCommunity(communityId);
   const avatarFileUrl = useImage({ fileId: community?.avatarFileId, imageSize: 'medium' });
 
-  const handleReturnToCommunity = () => communityId && onClickCommunity(communityId);
+  const handleReturnToCommunity = () => communityId && onBack();
 
   const handleEditCommunity = async (
     data: Parameters<typeof CommunityRepository.updateCommunity>[1],

src/v4/chat/components/MessageComposer/MessageComposer.tsx

@@ -23,7 +23,7 @@ import { MentionPlugin } from '~/v4/social/internal-components/Lexical/plugins/M
 
 import { useMutation } from '@tanstack/react-query';
 import {
-  editorStateToText,
+  editorToText,
   getEditorConfig,
   MentionData,
 } from '~/v4/social/internal-components/Lexical/utils';
@@ -148,7 +148,7 @@ export const MessageComposer = ({
     if (!channel) return;
     if (!editorRef.current) return;
 
-    const { mentioned, mentionees, text } = editorStateToText(editorRef.current);
+    const { mentioned, mentionees, text } = editorToText(editorRef.current);
 
     if (text?.trim().length === 0) return;