Release/v4.0.0.beta.5

.npmrc

@@ -1 +1 @@
-//registry.npmjs.org/:_authToken=${NPM_TOKEN}
+//registry.npmjs.org/:_authToken=${NPM_TOKEN}

.storybook/main.ts

@@ -13,6 +13,7 @@ const config: StorybookConfig = {
     '@storybook/addon-a11y',
   ],
   framework: '@storybook/react-vite',
+  staticDirs: ['../static'],
 };
 
 export default config;

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.5 (2024-05-28)
+
 ## 4.0.0-beta.3 (2024-04-26)
 
 ### Bug Fixes

amity-uikit.config.json

@@ -27,6 +27,13 @@
     }
   },
   "excludes": [],
+  "message_reactions": [
+    { "name": "heart", "image": "message_reaction_heart.png" },
+    { "name": "like", "image": "message_reaction_like.png" },
+    { "name": "fire", "image": "message_reaction_fire.png" },
+    { "name": "grinning", "image": "message_reaction_grinning.png" },
+    { "name": "sad", "image": "message_reaction_sad.png" }
+  ],
   "customizations": {
     "select_target_page/*/*": {
       "theme": {},
@@ -200,6 +207,9 @@
     "live_chat/message_composer/*": {
       "message_limit": 200,
       "placeholder_text": "Write a message"
+    },
+    "live_chat_page/message_list/message_quick_reaction": {
+      "reaction": "heart"
     }
   }
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@amityco/ui-kit-open-source",
-  "version": "4.0.0-beta.3",
+  "version": "4.0.0-beta.5",
   "engines": {
     "node": ">=16",
     "pnpm": ">=8"
@@ -39,7 +39,7 @@
     "react-dom": ">=17.0.2"
   },
   "devDependencies": {
-    "@amityco/ts-sdk": "^6.23.0",
+    "@amityco/ts-sdk": "^6.25.1",
     "@storybook/addon-a11y": "^7.6.7",
     "@storybook/addon-actions": "^7.6.7",
     "@storybook/addon-backgrounds": "^7.6.7",

readme.md

@@ -0,0 +1,136 @@
+# Amity UI-Kit for Web (Open-Source)
+
+## Prerequisites
+
+Before getting started, ensure that you have the following prerequisites installed on your system:
+
+- [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.
+
+## 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.

src/i18n/en.json

@@ -386,6 +386,8 @@
 
   "storyDraft.button.shareStory": "Share story",
 
+  "storyTab.title": "Story",
+
   "select.chatType.item": "{answerType} type",
   "chatComposer.label.channelId": "Channel ID",
   "chatComposer.label.displayName": "Display Name",
@@ -435,5 +437,9 @@
   "livechat.error.tooLongMessage.description": "Your message is too long. Please shorten your message and try again.",
   "livechat.error.sendingMessage.error": "Your message wasn't sent. Please try again.",
   "livechat.error.sendingMessage.blockedWord": "Your message wasn't sent as it contains a blocked word.",
-  "livechat.error.sendingMessage.notAllowLink": "Your message wasn’t sent as it contained a link that’s not allowed."
+  "livechat.error.sendingMessage.notAllowLink": "Your message wasn’t sent as it contained a link that’s not allowed.",
+  "livechat.reaction.errorOnload": "Unable to load reactions",
+  "livechat.reaction.emptyState": "No reactions yet",
+  "livechat.reaction.emptyState.description": "Be the first to react to this message!",
+  "livechat.reaction.label.removeReaction": "Click to remove reaction"
 }

src/index.ts

@@ -35,8 +35,16 @@ export {
   AmityLiveChatMessageComposeBar,
 } from '~/v4/chat/components';
 
+export { MessageReactionPreview as AmityLiveChatMessageReactionPreview } from '~/v4/chat/components/MessageReactionPreview';
+export { MessageReactionPicker as AmityLiveChatMessageReactionPicker } from '~/v4/chat/components/MessageReactionPicker';
+export { MessageQuickReaction as AmityLiveChatMessageQuickReaction } from '~/v4/chat/components/MessageQuickReaction';
+export { ReactionList as AmityReactionList } from '~/v4/social/components/ReactionList';
+
 import type { AmityMessageActionType } from '~/v4/chat/components';
+import type { ReactionListProps } from '~/v4/social/components/ReactionList';
+
 export type { AmityMessageActionType };
+export type { ReactionListProps as AmityReactionListProps };
 
 export { AmityLiveChatPage } from '~/v4/chat/pages';