Release/v4.0.0 beta.12

.storybook/decorators/FluidControl.tsx

@@ -143,7 +143,7 @@ const decorator: NonNullable<Preview['decorators']>[number] = (
   Story,
   { globals: { [GLOBAL_NAME]: val } },
 ) => {
-  if (val === 'none') return <Centered>{Story()}</Centered>;
+  if (val === 'none') return <FullScreen>{Story()}</FullScreen>;
   else if (val === 'fullscreen') return <FullScreen>{Story()}</FullScreen>;
   else if (val === 'framed') return <Framed>{Story()}</Framed>;
   else if (val === 'boundingbox')

.storybook/decorators/UiKitDecorator.tsx

@@ -1,36 +1,30 @@
 import React, { useCallback } from 'react';
 import UiKitProvider from '../../src/core/providers/UiKitProvider';
 import { Preview } from '@storybook/react';
-import amityConfig from '../../amity-uikit.config.json';
-
-const users = import.meta.env.STORYBOOK_USERS.split(',');
-
-const GLOBAL_NAME = 'user';
-const global = {
-  [GLOBAL_NAME]: {
-    name: 'User selector',
-    description: 'User switcher for SDK',
-    defaultValue: 'Web-Test',
-    toolbar: {
-      icon: 'user',
-      items: [
-        { value: 'Web-Test,Web-test', title: 'Web-Test' },
-        ...users.map((user) => {
-          return { value: `${user},${user}`, title: user };
-        }),
-      ],
-    },
-  },
-};
+import { useState } from 'react';
+import { useEffect } from 'react';
+
+const FALLBACK_USER = 'Web-Test';
+
+const decorator: NonNullable<Preview['decorators']>[number] = (Story, context) => {
+  const { args } = context;
+
+  const [userId, setUserId] = useState<string>(args.userId || FALLBACK_USER);
+  const [displayNameState, setDisplayNameState] = useState<string | undefined>(
+    args.displayName || args.userId || userId,
+  );
 
-const FALLBACK_USER = 'Web-Test,Web-Test';
+  useEffect(() => {
+    if (!args.submit) return;
+    if (args.userId) {
+      setUserId(args.userId);
+    }
+    if (args.displayName) {
+      setDisplayNameState(args.displayName);
+    }
+  }, [args.submit]);
 
-const decorator: NonNullable<Preview['decorators']>[number] = (
-  Story,
-  { globals: { [GLOBAL_NAME]: val, theme } },
-) => {
-  const user = val || FALLBACK_USER;
-  const [userId, displayName] = user.split(',');
+  const displayName = displayNameState || userId;
 
   const handleConnectionStatusChange = useCallback((...args) => {
     console.log(`[UiKitProvider.handleConnectionStatusChange]`, ...args);
@@ -46,8 +40,8 @@ const decorator: NonNullable<Preview['decorators']>[number] = (
 
   return (
     <UiKitProvider
-      apiKey={import.meta.env.STORYBOOK_API_KEY}
-      apiRegion={import.meta.env.STORYBOOK_API_REGION}
+      apiKey={args.apiKey || import.meta.env.STORYBOOK_API_KEY}
+      apiRegion={args.apiRegion || import.meta.env.STORYBOOK_API_REGION}
       key={userId}
       userId={userId}
       displayName={displayName || userId}
@@ -60,4 +54,4 @@ const decorator: NonNullable<Preview['decorators']>[number] = (
   );
 };
 
-export default { global, decorator };
+export default { decorator };

.storybook/decorators/UiKitV4Decorator.tsx

@@ -3,35 +3,30 @@ import { AmityUIKitProvider } from '../../src/v4/core/providers';
 import { Preview } from '@storybook/react';
 import amityConfig from '../../amity-uikit.config.json';
 import { Config } from '../../src/v4/core/providers/CustomizationProvider';
+import { useState } from 'react';
+import { useEffect } from 'react';
 
-const users = import.meta.env.STORYBOOK_USERS.split(',');
+const FALLBACK_USER = 'Web-Test';
 
-const GLOBAL_NAME = 'user';
-const global = {
-  [GLOBAL_NAME]: {
-    name: 'User selector',
-    description: 'User switcher for SDK',
-    defaultValue: 'Web-Test',
-    toolbar: {
-      icon: 'user',
-      items: [
-        { value: 'Web-Test,Web-test', title: 'Web-Test' },
-        ...users.map((user) => {
-          return { value: `${user},${user}`, title: user };
-        }),
-      ],
-    },
-  },
-};
+const decorator: NonNullable<Preview['decorators']>[number] = (Story, context) => {
+  const { args } = context;
+
+  const [userId, setUserId] = useState<string>(args.userId || FALLBACK_USER);
+  const [displayNameState, setDisplayNameState] = useState<string | undefined>(
+    args.displayName || args.userId || userId,
+  );
 
-const FALLBACK_USER = 'Web-Test,Web-Test';
+  useEffect(() => {
+    if (!args.submit) return;
+    if (args.userId) {
+      setUserId(args.userId);
+    }
+    if (args.displayName) {
+      setDisplayNameState(args.displayName);
+    }
+  }, [args.submit]);
 
-const decorator: NonNullable<Preview['decorators']>[number] = (
-  Story,
-  { globals: { [GLOBAL_NAME]: val, theme } },
-) => {
-  const user = val || FALLBACK_USER;
-  const [userId, displayName] = user.split(',');
+  const displayName = displayNameState || userId;
 
   const handleConnectionStatusChange = useCallback((...args) => {
     console.log(`[UiKitProvider.handleConnectionStatusChange]`, ...args);
@@ -47,8 +42,8 @@ const decorator: NonNullable<Preview['decorators']>[number] = (
 
   return (
     <AmityUIKitProvider
-      apiKey={import.meta.env.STORYBOOK_API_KEY}
-      apiRegion={import.meta.env.STORYBOOK_API_REGION}
+      apiKey={args.apiKey || import.meta.env.STORYBOOK_API_KEY}
+      apiRegion={args.apiRegion || import.meta.env.STORYBOOK_API_REGION}
       key={userId}
       userId={userId}
       displayName={displayName || userId}

.storybook/preview.ts

@@ -2,6 +2,20 @@ import { Preview } from '@storybook/react';
 import { FluidControl, UiKitDecorator, UiKitV4Decorator } from './decorators';
 
 const preview: Preview = {
+  args: {
+    apiKey: undefined,
+    apiRegion: undefined,
+    userId: undefined,
+    displayName: undefined,
+    submit: false,
+  },
+  argTypes: {
+    apiKey: { control: { type: 'text' } },
+    apiRegion: { control: { type: 'text' } },
+    userId: { control: { type: 'text' } },
+    displayName: { control: { type: 'text' } },
+    submit: { control: { type: 'boolean' } },
+  },
   decorators: [
     FluidControl.decorator,
     (Story, ctx) => {
@@ -29,8 +43,6 @@ const preview: Preview = {
   },
   globalTypes: {
     ...FluidControl.global,
-    ...UiKitDecorator.global,
-    ...UiKitV4Decorator.global,
   },
 };
 

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.
 
+## 4.0.0-beta.12 (2024-09-02)
+
 ## 4.0.0-beta.11 (2024-08-16)
 
 ## 4.0.0-beta.10 (2024-07-24)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@amityco/ui-kit-open-source",
-  "version": "4.0.0-beta.11",
+  "version": "4.0.0-beta.12",
   "engines": {
     "node": ">=20",
     "pnpm": "9"
@@ -39,12 +39,12 @@
     "tsc": "tsc"
   },
   "peerDependencies": {
-    "@amityco/ts-sdk": "^6.27.0",
+    "@amityco/ts-sdk": "^6.30.0",
     "react": ">=17.0.2",
     "react-dom": ">=17.0.2"
   },
   "devDependencies": {
-    "@amityco/ts-sdk": "^6.27.0",
+    "@amityco/ts-sdk": "^6.30.0",
     "@eslint/js": "^9.4.0",
     "@storybook/addon-a11y": "^7.6.7",
     "@storybook/addon-actions": "^7.6.7",
@@ -159,5 +159,5 @@
     }
   },
   "license": "LGPL-2.1-only",
-  "packageManager": "pnpm@9.5.0"
+  "packageManager": "pnpm@9.9.0"
 }

src/chat/components/Chat/index.tsx

@@ -13,6 +13,8 @@ import ChatHeader from '~/chat/components/ChatHeader';
 
 import { ChannelContainer } from './styles';
 import { useCustomComponent } from '~/core/providers/CustomComponentsProvider';
+import { useChannelPermission } from '~/chat/hooks/useChannelPermission';
+import useChannel from '~/chat/hooks/useChannel';
 
 interface ChatProps {
   channelId: string;
@@ -27,6 +29,9 @@ const Chat = ({ channelId, onChatDetailsClick, shouldShowChatDetails }: ChatProp
     };
   }, [channelId]);
 
+  const { isModerator } = useChannelPermission(channelId);
+  const channel = useChannel(channelId);
+
   const sendMessage = async (text: string) => {
     return MessageRepository.createMessage({
       subChannelId: channelId,
@@ -35,6 +40,13 @@ const Chat = ({ channelId, onChatDetailsClick, shouldShowChatDetails }: ChatProp
     });
   };
 
+  const renderMessageComposeBar = () => {
+    if (channel?.type !== 'broadcast' || (channel?.type === 'broadcast' && isModerator)) {
+      return <MessageComposeBar onSubmit={sendMessage} />;
+    }
+    return null;
+  };
+
   return (
     <ChannelContainer>
       <ChatHeader
@@ -43,7 +55,7 @@ const Chat = ({ channelId, onChatDetailsClick, shouldShowChatDetails }: ChatProp
         onChatDetailsClick={onChatDetailsClick}
       />
       <MessageList channelId={channelId} />
-      <MessageComposeBar onSubmit={sendMessage} />
+      {renderMessageComposeBar()}
     </ChannelContainer>
   );
 };

src/chat/hooks/collections/useChannelMembersCollection.ts

@@ -7,7 +7,7 @@ import useLiveCollection from '~/core/hooks/useLiveCollection';
 export default function useChannelMembersCollection(channelId?: string) {
   const { items, ...rest } = useLiveCollection({
     fetcher: ChannelRepository.Membership.getMembers,
-    params: { channelId: channelId as string },
+    params: { channelId: channelId as string, includeDeleted: false },
     shouldCall: () => !!channelId,
   });
 

src/chat/hooks/useChannelPermission.ts

@@ -0,0 +1,18 @@
+import { useMemo } from 'react';
+import useSDK from '~/core/hooks/useSDK';
+
+export const useChannelPermission = (subChannelId?: Amity.SubChannel['subChannelId']) => {
+  const { client } = useSDK();
+
+  const isModerator = useMemo(() => {
+    if (!subChannelId) return false;
+    const currentUser = client?.hasPermission('MUTE_CHANNEL').currentUser() || false;
+    const currentUserInChannel =
+      client?.hasPermission('MUTE_CHANNEL').channel(subChannelId) || false;
+    return currentUser || currentUserInChannel;
+  }, [subChannelId]);
+
+  return {
+    isModerator,
+  };
+};

src/core/components/Confirm/index.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { useConfirmContext } from '~/core/providers/ConfirmProvider';
+import { ModalContainer } from '../ModalContainer';
 
 import {
   ConfirmModal,
@@ -61,9 +62,14 @@ export const ConfirmComponent = () => {
   const onOk = () => {
     closeConfirm();
     confirmData?.onOk && confirmData.onOk();
+    confirmData?.onSuccess && confirmData?.onSuccess();
   };
 
-  return <Confirm {...confirmData} onCancel={onCancel} onOk={onOk} />;
+  return (
+    <ModalContainer>
+      <Confirm {...confirmData} onCancel={onCancel} onOk={onOk} />
+    </ModalContainer>
+  );
 };
 
 export default Confirm;

src/core/components/Dropdown/styles.tsx

@@ -26,7 +26,7 @@ export const Frame = styled.div<{
   scrollableHeight?: number;
 }>`
   position: absolute;
-  z-index: 2;
+  z-index: 10;
   ${({ position }) => getCssPosition(position)}
   ${({ align }) => align && getCssPosition(align)}
   background: ${({ theme }) => theme.palette.system.background};