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

…eta.13

.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

readme.md

@@ -2,135 +2,20 @@
 
 ## Prerequisites
 
-Before getting started, ensure that you have the following prerequisites installed on your system:
+Before starting to work, please read the following instructions.
+https://ekoapp.atlassian.net/wiki/spaces/UP/pages/2443706407/ASC+Web+UIKit+V4+Governance
+
+If you have any questions, please ask / discuss with the team.
+
+### Installation
 
 - [Node.js](https://nodejs.org/) LTS version (currently version 20)
 - [pnpm](https://pnpm.io/) version 8
 
 ## How to install PNPM (Optional)
 
-```
-corepack enable pnpm
-```
-
-Ref: https://pnpm.io/installation#using-corepack
-
-## Running Storybook (Optional)
-
-To run Storybook and view the UI components in isolation, follow these steps:
-
-1. Clone the Amity UI-Kit repository:
-
-   ```
-   git clone https://github.com/AmityCo/Amity-Social-Cloud-UIKit-Web-OpenSource.git
-   ```
-
-2. Navigate to the cloned repository's directory:
-
-   ```
-   cd Amity-Social-Cloud-UIKit-Web-OpenSource
-   ```
-
-3. Install the dependencies using pnpm:
-
-   ```
-   pnpm install
-   ```
-
-4. Create a `.env` file at the root of the project with the following content:
-
-   ```
-   STORYBOOK_API_REGION=<API_REGION>
-   STORYBOOK_API_KEY=<API_KEY>
-   ```
-
-   Replace `<API_REGION>` and `<API_KEY>` with your actual credentials.
-
-5. Run Storybook:
-
-   ```
-   pnpm run storybook
-   ```
-
-6. Open your browser and navigate to `http://localhost:6006` to view the Storybook interface.
-
-## Installation
-
-To install the Amity UI-Kit together with another project, follow these steps:
-
-1. Clone the repository using the following command:
-
-   ```
-   git clone https://github.com/AmityCo/Amity-Social-Cloud-UIKit-Web-OpenSource.git
-   ```
-
-2. Navigate to the cloned repository's directory:
-
-   ```
-   cd ./Amity-Social-Cloud-UIKit-Web-OpenSource
-   ```
-
-3. Install the dependencies using pnpm:
-
-   ```
-   pnpm install
-   ```
-
-4. Build the project:
-
-   ```
-   pnpm run build
-   ```
-
-5. Pack the project
-
-   ```
-   pnpm pack
-   ```
-
-6. Navigate to your application's directory:
-
-   ```
-   cd <path-to-your-app>
-   ```
-
-7. Install the Amity UI-Kit to your application using one of the following package managers:
-   - NPM:
-     ```
-     npm i file:<path-to-amity-ui-kit-repository>/<path-to-tgz-file> --save
-     ```
-   - Yarn (Classic):
-     ```
-     yarn add file:<path-to-amity-ui-kit-repository>/<path-to-tgz-file>
-     ```
-   - PNPM:
-     ```
-     pnpm i file:<path-to-amity-ui-kit-repository>/<path-to-tgz-file>
-     ```
-
-## Documentation
-
-For detailed information and guidance on using the Amity UI-Kit, please refer to our comprehensive online documentation available at [https://docs.amity.co](https://docs.amity.co).
-
-If you require further assistance or have any questions, please don't hesitate to contact our dedicated UI-Kit support team at **[email protected]**. We are here to help you make the most of the Amity UI-Kit.
+Please refer to our online documentation at https://docs.amity.co or contact a Ui-Kit representative at \* \*[email protected]** for support.
 
 ## Contributing
 
-We welcome contributions from the community to help improve and enhance the Amity UI-Kit. If you are interested in contributing to this project, please review our [contributing guide](https://github.com/AmityCo/Amity-Social-Cloud-UIKit-Web-OpenSource/blob/develop/contributing.md) for guidelines and best practices.
-
-Thank you for choosing the Amity UI-Kit for your web development needs!
-
-### FAQ
-
-Q: I tried to run `pnpm build` and it throws a types error.
-A: Try to structure your project to be like this:
-
-```
-- your_app
-  - src
-- Amity-Social-Cloud-UIKit-Web-OpenSource
-  - src
-```
-
-Q: The modifications I made to the code do not appear to be applied.
-A: Please attempt to execute `npm cache clean` or `npm cache clean --force` to resolve this issue.
+See [our contributing guide](https://github.com/EkoCommunications/AmityUiKitWeb/blob/develop/CONTRIBUTING.md)

src/core/providers/UiKitProvider/styles.tsx

@@ -30,5 +30,52 @@ export const UIStyles = styled.div`
     }
   }
 
-  ${skeletonCss}
+  .react-loading-skeleton {
+    --base-color: #ebebeb;
+    --highlight-color: #f5f5f5;
+    --animation-duration: 1.5s;
+    --animation-direction: normal;
+    --pseudo-element-display: block; /* Enable animation */
+
+    background-color: var(--base-color);
+
+    width: 100%;
+    border-radius: 0.25rem;
+    display: inline-flex;
+    line-height: 1;
+
+    position: relative;
+    user-select: none;
+    overflow: hidden;
+  }
+
+  .react-loading-skeleton::after {
+    content: ' ';
+    display: var(--pseudo-element-display);
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 100%;
+    background-repeat: no-repeat;
+    background-image: linear-gradient(
+      90deg,
+      var(--base-color),
+      var(--highlight-color),
+      var(--base-color)
+    );
+    transform: translateX(-100%);
+
+    animation-name: react-loading-skeleton;
+    animation-direction: var(--animation-direction);
+    animation-duration: var(--animation-duration);
+    animation-timing-function: ease-in-out;
+    animation-iteration-count: infinite;
+  }
+
+  @media (prefers-reduced-motion) {
+    .react-loading-skeleton {
+      --pseudo-element-display: none; /* Disable animation */
+    }
+  }
 `;

src/global.d.ts

@@ -14,6 +14,11 @@ interface ImportMeta {
   readonly env: ImportMetaEnv;
 }
 
+declare module '*skeleton.css' {
+  const classes: string;
+  export default classes;
+}
+
 declare module '*.css?inline' {
   const classes: string;
   export default classes;

src/v4/icons/PinBadge.tsx

@@ -11,7 +11,7 @@ export const PinBadgeIcon = (props: React.SVGProps<SVGSVGElement>) => {
       {...props}
     >
       <path
-        fill="currentColor"
+        fill={props.fill}
         d="M18.106 16.436c.575 1.547.53 3.27-.596 4.398a.74.74 0 01-1.06 0l-3.006-3.005-2.32 2.32c-.022.022-.067.022-.089.044l-1.59.53c-.2.067-.398-.132-.332-.331l.53-1.591.066-.066 2.32-2.32-3.005-3.006a.722.722 0 010-1.06c1.105-1.105 2.829-1.194 4.376-.62l2.917-2.342-.929-.928a.722.722 0 010-1.06l1.061-1.06a.74.74 0 011.06 0l6.011 6.01a.76.76 0 010 1.06l-1.06 1.06a.74.74 0 01-1.061 0l-.95-.95-2.343 2.917z"
       ></path>
     </svg>

src/v4/social/components/Comment/Comment.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useState } from 'react';
 import { Typography, BottomSheet } from '~/v4/core/components';
 import { ModeratorBadge } from '~/v4/social/elements/ModeratorBadge';
 import { Timestamp } from '~/v4/social/elements/Timestamp';
@@ -21,6 +21,7 @@ import { CreateCommentParams } from '~/v4/social/components/CommentComposer/Comm
 import useCommentSubscription from '~/v4/core/hooks/subscriptions/useCommentSubscription';
 import { TextWithMention } from '~/v4/social/internal-components/TextWithMention/TextWithMention';
 import millify from 'millify';
+import useCommunityPostPermission from '~/v4/social/hooks/useCommunityPostPermission';
 
 const EllipsisH = ({ ...props }: React.SVGProps<SVGSVGElement>) => (
   <svg
@@ -69,7 +70,7 @@ interface CommentProps {
   pageId?: string;
   componentId?: string;
   comment: Amity.Comment;
-  community?: Amity.Community;
+  community?: Amity.Community | null;
   onClickReply: (comment: Amity.Comment) => void;
   shouldAllowInteraction?: boolean;
 }
@@ -82,11 +83,10 @@ export const Comment = ({
   onClickReply,
   shouldAllowInteraction = true,
 }: CommentProps) => {
-  const { accessibilityId, config, defaultConfig, isExcluded, uiReference, themeStyles } =
-    useAmityComponent({
-      pageId,
-      componentId,
-    });
+  const { accessibilityId, isExcluded, themeStyles } = useAmityComponent({
+    pageId,
+    componentId,
+  });
 
   const { confirm } = useConfirmContext();
 
@@ -97,6 +97,11 @@ export const Comment = ({
 
   const [isShowMore, setIsShowMore] = useState(false);
 
+  const { isModerator: isModeratorUser } = useCommunityPostPermission({
+    community,
+    userId: comment.creator?.userId,
+  });
+
   const toggleBottomSheet = () => setBottomSheetOpen((prev) => !prev);
 
   const isLiked = (comment.myReactions || []).some((reaction) => reaction === 'like');
@@ -211,7 +216,7 @@ export const Comment = ({
                 {comment.creator?.displayName}
               </Typography.BodyBold>
 
-              <ModeratorBadge pageId={pageId} componentId={componentId} />
+              {isModeratorUser && <ModeratorBadge pageId={pageId} componentId={componentId} />}
 
               <TextWithMention
                 data={{ text: (comment.data as Amity.ContentDataText).text }}
@@ -239,7 +244,10 @@ export const Comment = ({
                       {isLiked ? 'Liked' : 'Like'}
                     </Typography.CaptionBold>
                   </div>
-                  <div onClick={() => onClickReply(comment)}>
+                  <div
+                    data-qa-anchor={`${pageId}/${componentId}/reply_button`}
+                    onClick={() => onClickReply(comment)}
+                  >
                     <Typography.CaptionBold className={styles.postComment__secondRow__reply}>
                       Reply
                     </Typography.CaptionBold>

src/v4/social/components/CommentComposer/CommentComposer.tsx

@@ -33,6 +33,7 @@ export type CreateCommentParams = {
 };
 
 interface CommentComposerProps {
+  pageId?: string;
   referenceId: string;
   referenceType: Amity.CommentReferenceType;
   replyTo?: Amity.Comment;
@@ -42,6 +43,7 @@ interface CommentComposerProps {
 }
 
 export const CommentComposer = ({
+  pageId = '*',
   referenceId,
   referenceType,
   replyTo,
@@ -55,6 +57,7 @@ export const CommentComposer = ({
   const editorRef = useRef<CommentInputRef | null>(null);
   const composerRef = useRef<HTMLDivElement | null>(null);
   const composerInputRef = useRef<HTMLDivElement | null>(null);
+  const componentId = 'comment_composer_bar';
 
   const [composerHeight, setComposerHeight] = useState(0);
   const [mentionOffsetBottom, setMentionOffsetBottom] = useState(0);
@@ -129,7 +132,12 @@ export const CommentComposer = ({
       <div className={styles.commentComposer__avatar}>
         <Avatar avatarUrl={avatarUrl} defaultImage={<User />} />
       </div>
-      <div className={styles.commentComposer__input} ref={composerInputRef}>
+
+      <div
+        data-qa-anchor={`${pageId}/${componentId}/comment_composer`}
+        className={styles.commentComposer__input}
+        ref={composerInputRef}
+      >
         <CommentInput
           ref={editorRef}
           onChange={onChange}
@@ -142,6 +150,7 @@ export const CommentComposer = ({
         />
       </div>
       <Button
+        data-qa-anchor={`${pageId}/${componentId}/create_comment_button`}
         isDisabled={!textValue.data.text}
         className={styles.commentComposer__button}
         onPress={() => mutateAsync({ params: textValue })}