@sendbird/uikit-react 3.0.0-beta → 3.0.0-beta.4

package/CHANGELOG.md

@@ -0,0 +1,65 @@
+# Changelog - v3
+
+## [3.0.0-beta.4] (May 24 2022)
+Fixes:
+* Export useChannelList
+* Active disableAutoSelect props
+* Remove empty CSS file to fix source map warning
+
+DOC:
+* Add info about webpack 5 breaking changes
+## [3.0.0-beta.3] (May 19 2022)
+Fixes:
+* Rate limit markAsDelivered call
+* Do not render date separator when renderCustomSeparator is null
+Misc:
+* Update Chat SDK minimum version to `3.1.13`
+
+## [3.0.0-beta.2] (April 29 2022)
+
+Feature:
+* Mention
+  * Add isMentionEnabled props to the <App /> and <SendbirdProvider />
+  * Add userMention into the config props of the <App /> andd <SendbirdProvider />
+    * <SendbirdProvider config={{ userMention: { maxMentionCount: 10, maxSuggestionCount: 15 } }} />
+    * maxMentionCount: A maximum count that you can mention in the message input
+    * maxSuggestionCount: A maximum user count that the SuggestedMentionList suggests for user mention
+  * Create SuggestedMentionList component under the Channel smart component
+    * Create SuggestedUserMentionItem component
+  * Create MentionUserLabel ui component
+  * Add string set
+    * MENTION_NAME__NO_NAME: '(No name)'
+    * MENTION_COUNT__OVER_LIMIT: 'You can mention up to %d times per message.'
+Fix:
+* Type definition file fix for TS project
+For typescript projects, add `node_modules/@sendbird/uikit-react/index.d.ts`
+to your `include` section in tsconfig file to get type definitions
+
+* Move font import to top of CSS file
+Some bundlers such as parcel throw error:
+`@import rules must precede all rules aside from @charset and @layer statements`
+Resolve this issue by moving the line to the top
+
+## [3.0.0-beta] (Apr 12 2022)
+
+This is the official beta for Sendbird UIKit for React version 3!
+
+TLDR -> We split the old `smart-components` into modules which contian context and UI. Context contain logic and UI Components handle UI
+
+**[Check out the v2 to v3 migration guide for details](MIGRATION_v2-to-v3.md)**
+
+Changelog:
+* Package should be installed using `@sendbird/uikit-react`
+* Restructure smart-components into modules that contain a context and related UI components
+* Export these context and UI components to allow fine-grain customization
+* Recommend to use these context elements `useXXXXX()` and react function components to make custom components
+* All generic UI components are available as exports
+* Restrcuture export paths to allow better tree-shaking
+* Example:
+```
+import { useChannel } from '@sendbird/uikit-react/Channel/context';
+import ChannelUI from '@sendbird/uikit-react/Channel/components/ChannelUI';
+```
+* We keep older export patterns to make migration easier
+* Retained modules - ChannelList, Channel, ChannelSettings, OpenChannel, OpenChannelSettings, MessageSearch
+* New modules(not including context and ui of above) - CreateChannel, EditUserProfile, ui

package/README.md

@@ -1,11 +1,19 @@
 # sendbird-uikit
 
-<img alt="Version 3 beta" src="https://img.shields.io/badge/beta-v3-orange" />
+[![Version 3 beta](https://img.shields.io/badge/Sendbird-BETA-blue.svg)](https://github.com/sendbird/sendbird-uikit-react/tree/develop-v3)
+[![Platform React](https://img.shields.io/badge/Platform-React-orange.svg)](https://reactjs.org)
+[![Language TypeScript](https://img.shields.io/badge/Language-TypeScript-orange.svg)](https://www.typescriptlang.org/)
 
 > React based UI kit based on sendbird javascript SDK
 
 We are introducing a new version of the Sendbird Chat UIKit. Version 3 features a new modular architecture with more granular components that give you enhanced flexibility to customize your web and mobile apps. Check out our [migration guides](MIGRATION_v2-to-v3.md).
 
+## Installation
+
+`npm i @sendbird/uikit-react`
+
+For typescript projects, add `node_modules/@sendbird/uikit-react/index.d.ts` to your `include` section in tsconfig file to get type definitions
+
 ## Getting Started
 
 With Sendbird UI Kit React, we export these components:
@@ -94,6 +102,24 @@ npm run lint
 * .eslintrc.json lints ts files and .eslintrc.js lints js files
 * Type definition file can be `src/index.d.ts` which will be copied to `/release` directory
 
+### Webpack 5
+
+Webpack 5 removes stream and buffer componets from default polyfill
+To enable these, install buffer and stream and then add the following to webpack.cofig.js
+```javascript
+module.exports = {
+  //...
+  resolve: {
+    fallback: {
+      buffer: require.resolve('buffer'),
+      stream: require.resolve('stream-browserify'),
+    },
+  },
+};
+
+```
+To read more: https://webpack.js.org/configuration/resolve/#resolvefallback
+
 ### Creating/exporting new components
 
 1. Define your component inside './src'

package/dist/index.css

@@ -743,7 +743,6 @@
     left: 22px;
     top: 24px; }
 
-
 .sendbird-create-channel--content {
   width: 480px;
   max-height: 552px; }
@@ -1328,6 +1327,9 @@
         margin-left: 4px;
         margin-bottom: 4px;
         white-space: nowrap; }
+        .sendbird-channel-preview .sendbird-channel-preview__content .sendbird-channel-preview__content__upper .sendbird-channel-preview__content__upper__last-message-at.sendbird-message-status {
+          max-width: 74px;
+          justify-content: flex-end; }
     .sendbird-channel-preview .sendbird-channel-preview__content .sendbird-channel-preview__content__lower {
       margin-top: 8px;
       width: 216px;
@@ -1338,6 +1340,8 @@
         overflow: hidden;
         text-overflow: ellipsis; }
       .sendbird-channel-preview .sendbird-channel-preview__content .sendbird-channel-preview__content__lower .sendbird-channel-preview__content__lower__unread-message-count {
+        display: flex;
+        align-items: center;
         margin-left: 8px;
         margin-bottom: 12px; }
   .sendbird-channel-preview .sendbird-channel-preview__action {
@@ -1397,6 +1401,113 @@
   .sendbird-badge .sendbird-badge__text {
     margin: 0px 6px; }
 
+.sendbird-mention-user-label {
+  display: inline-block;
+  font-family: var(--sendbird-font-family-default);
+  font-size: 14px;
+  font-weight: bold;
+  font-stretch: normal;
+  font-style: normal;
+  line-height: 1.43;
+  letter-spacing: normal; }
+  .sendbird-mention-user-label:hover {
+    cursor: pointer; }
+  .sendbird-theme--light .sendbird-mention-user-label {
+    color: var(--sendbird-light-onlight-01); }
+  .sendbird-theme--dark .sendbird-mention-user-label {
+    color: var(--sendbird-dark-ondark-01); }
+  .sendbird-theme--light .sendbird-mention-user-label.reverse {
+    color: var(--sendbird-light-ondark-01); }
+  .sendbird-theme--dark .sendbird-mention-user-label.reverse {
+    color: var(--sendbird-dark-onlight-01); }
+  .sendbird-mention-user-label.purple {
+    font-family: Roboto;
+    font-size: 18px;
+    font-weight: bold;
+    font-stretch: normal;
+    font-style: normal;
+    line-height: normal;
+    letter-spacing: normal; }
+    .sendbird-theme--light .sendbird-mention-user-label.purple {
+      color: var(--sendbird-light-primary-300); }
+    .sendbird-theme--dark .sendbird-mention-user-label.purple {
+      color: var(--sendbird-dark-primary-200); }
+
+.sendbird-reaction-button {
+  border-radius: 8px;
+  display: inline-block;
+  border: solid 1px transparent;
+  cursor: pointer; }
+  .sendbird-theme--light .sendbird-reaction-button:hover {
+    border: solid 1px var(--sendbird-light-background-100);
+    background-color: var(--sendbird-light-background-100); }
+  .sendbird-theme--dark .sendbird-reaction-button:hover {
+    border: solid 1px var(--sendbird-dark-background-400);
+    background-color: var(--sendbird-dark-background-400); }
+  .sendbird-reaction-button__inner {
+    margin: 3px; }
+
+.sendbird-reaction-button--selected {
+  cursor: pointer;
+  border-radius: 8px;
+  display: inline-block; }
+  .sendbird-theme--light .sendbird-reaction-button--selected {
+    border: solid 1px var(--sendbird-light-primary-100);
+    background-color: var(--sendbird-light-primary-100); }
+  .sendbird-theme--dark .sendbird-reaction-button--selected {
+    border: solid 1px var(--sendbird-dark-primary-400);
+    background-color: var(--sendbird-dark-primary-400); }
+  .sendbird-reaction-button--selected:hover {
+    border: solid 1px var(--sendbird-selected-reaction-button-border-hover); }
+  .sendbird-reaction-button--selected__inner {
+    margin: 3px; }
+  .sendbird-reaction-button--selected.sendbird-reactions--pressed {
+    display: block !important; }
+
+.sendbird-message-status {
+  position: relative;
+  display: inline-flex;
+  align-items: flex-start;
+  width: 100%;
+  height: 100%; }
+  .sendbird-message-status .sendbird-message-status__icon {
+    position: relative;
+    display: inline-block;
+    top: -2px; }
+    .sendbird-message-status .sendbird-message-status__icon.hide-icon {
+      display: none; }
+  .sendbird-message-status .sendbird-message-status__text {
+    position: relative;
+    display: inline-block;
+    margin-left: 4px; }
+    .sendbird-message-status .sendbird-message-status__text .sendbird-message-status__text__try-again {
+      text-decoration: underline; }
+      .sendbird-message-status .sendbird-message-status__text .sendbird-message-status__text__try-again:hover {
+        cursor: pointer; }
+    .sendbird-message-status .sendbird-message-status__text .sendbird-message-status__text__delete {
+      text-decoration: underline; }
+      .sendbird-message-status .sendbird-message-status__text .sendbird-message-status__text__delete:hover {
+        cursor: pointer; }
+
+.sendbird-loader {
+  display: inline-block;
+  -webkit-animation: 1s infinite linear;
+          animation: 1s infinite linear;
+  -webkit-animation-name: rotate;
+          animation-name: rotate; }
+
+@-webkit-keyframes rotate {
+  from {
+    transform: rotate(0); }
+  to {
+    transform: rotate(360deg); } }
+
+@keyframes rotate {
+  from {
+    transform: rotate(0); }
+  to {
+    transform: rotate(360deg); } }
+
 .sendbird-edit-user-profile section {
   margin-top: 16px; }
   .sendbird-edit-user-profile section .sendbird-input-label {
@@ -1637,56 +1748,6 @@
       display: flex;
       justify-content: center; }
 
-.sendbird-loader {
-  display: inline-block;
-  -webkit-animation: 1s infinite linear;
-          animation: 1s infinite linear;
-  -webkit-animation-name: rotate;
-          animation-name: rotate; }
-
-@-webkit-keyframes rotate {
-  from {
-    transform: rotate(0); }
-  to {
-    transform: rotate(360deg); } }
-
-@keyframes rotate {
-  from {
-    transform: rotate(0); }
-  to {
-    transform: rotate(360deg); } }
-
-.sendbird-reaction-button {
-  border-radius: 8px;
-  display: inline-block;
-  border: solid 1px transparent;
-  cursor: pointer; }
-  .sendbird-theme--light .sendbird-reaction-button:hover {
-    border: solid 1px var(--sendbird-light-background-100);
-    background-color: var(--sendbird-light-background-100); }
-  .sendbird-theme--dark .sendbird-reaction-button:hover {
-    border: solid 1px var(--sendbird-dark-background-400);
-    background-color: var(--sendbird-dark-background-400); }
-  .sendbird-reaction-button__inner {
-    margin: 3px; }
-
-.sendbird-reaction-button--selected {
-  cursor: pointer;
-  border-radius: 8px;
-  display: inline-block; }
-  .sendbird-theme--light .sendbird-reaction-button--selected {
-    border: solid 1px var(--sendbird-light-primary-100);
-    background-color: var(--sendbird-light-primary-100); }
-  .sendbird-theme--dark .sendbird-reaction-button--selected {
-    border: solid 1px var(--sendbird-dark-primary-400);
-    background-color: var(--sendbird-dark-primary-400); }
-  .sendbird-reaction-button--selected:hover {
-    border: solid 1px var(--sendbird-selected-reaction-button-border-hover); }
-  .sendbird-reaction-button--selected__inner {
-    margin: 3px; }
-  .sendbird-reaction-button--selected.sendbird-reactions--pressed {
-    display: block !important; }
-
 .sendbird-conversation {
   display: flex;
   flex-direction: column;
@@ -1938,6 +1999,61 @@
   .sendbird-conversation__scroll-bottom-button:focus {
     outline: none; }
 
+.sendbird-mention-suggest-list {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  width: calc(100% - 56px);
+  max-height: 260px;
+  overflow: scroll;
+  margin-left: 28px;
+  margin-right: 28px; }
+  .sendbird-theme--light .sendbird-mention-suggest-list {
+    border: 1px solid var(--sendbird-light-background-100); }
+  .sendbird-theme--dark .sendbird-mention-suggest-list {
+    border: 1px solid var(--sendbird-dark-background-500); }
+  .sendbird-mention-suggest-list .sendbird-mention-suggest-list__user-item {
+    position: relative;
+    display: flex;
+    align-items: center;
+    padding: 16px 8px; }
+    .sendbird-theme--light .sendbird-mention-suggest-list .sendbird-mention-suggest-list__user-item {
+      background-color: var(--sendbird-light-background-50); }
+    .sendbird-theme--dark .sendbird-mention-suggest-list .sendbird-mention-suggest-list__user-item {
+      background-color: var(--sendbird-dark-background-600); }
+    .sendbird-mention-suggest-list .sendbird-mention-suggest-list__user-item:hover {
+      cursor: pointer; }
+      .sendbird-theme--light .sendbird-mention-suggest-list .sendbird-mention-suggest-list__user-item:hover {
+        background-color: var(--sendbird-light-background-100); }
+      .sendbird-theme--dark .sendbird-mention-suggest-list .sendbird-mention-suggest-list__user-item:hover {
+        background-color: var(--sendbird-dark-background-500); }
+    .sendbird-theme--light .sendbird-mention-suggest-list .sendbird-mention-suggest-list__user-item.focused {
+      background-color: var(--sendbird-light-background-100); }
+    .sendbird-theme--dark .sendbird-mention-suggest-list .sendbird-mention-suggest-list__user-item.focused {
+      background-color: var(--sendbird-dark-background-500); }
+    .sendbird-mention-suggest-list .sendbird-mention-suggest-list__user-item .sendbird-mention-suggest-list__user-item__avatar {
+      position: relative;
+      display: inline-block; }
+    .sendbird-mention-suggest-list .sendbird-mention-suggest-list__user-item .sendbird-mention-suggest-list__user-item__nickname {
+      position: relative;
+      display: inline-block;
+      margin-left: 16px; }
+    .sendbird-mention-suggest-list .sendbird-mention-suggest-list__user-item .sendbird-mention-suggest-list__user-item__user-id {
+      position: absolute;
+      display: inline-block;
+      right: 16px; }
+  .sendbird-mention-suggest-list .sendbird-mention-suggest-list__notice-item {
+    position: relative;
+    display: flex;
+    align-items: center;
+    padding: 16px 8px; }
+    .sendbird-theme--light .sendbird-mention-suggest-list .sendbird-mention-suggest-list__notice-item {
+      background-color: var(--sendbird-light-background-50); }
+    .sendbird-theme--dark .sendbird-mention-suggest-list .sendbird-mention-suggest-list__notice-item {
+      background-color: var(--sendbird-dark-background-600); }
+    .sendbird-mention-suggest-list .sendbird-mention-suggest-list__notice-item .sendbird-mention-suggest-list__notice-item__icon {
+      margin-right: 4px; }
+
 .sendbird-separator {
   width: 100%;
   display: flex;
@@ -1976,7 +2092,8 @@
     box-sizing: border-box;
     resize: none;
     font-family: var(--sendbird-font-family-default);
-    background-color: inherit; }
+    background-color: inherit;
+    white-space: pre-wrap; }
     .sendbird-theme--light .sendbird-message-input .sendbird-message-input--textarea {
       color: var(--sendbird-light-onlight-01);
       caret-color: var(--sendbird-light-primary-300);
@@ -2240,30 +2357,6 @@
   .sendbird-theme--dark .sendbird-message-content-reactions.mouse-hover.primary, .sendbird-theme--dark .sendbird-message-content-reactions:hover.primary {
     background-color: var(--sendbird-dark-primary-300); }
 
-.sendbird-message-status {
-  position: relative;
-  display: inline-block;
-  width: 100%;
-  height: 100%; }
-  .sendbird-message-status .sendbird-message-status__icon {
-    position: relative;
-    display: inline-block;
-    top: 4px; }
-    .sendbird-message-status .sendbird-message-status__icon.hide-icon {
-      display: none; }
-  .sendbird-message-status .sendbird-message-status__text {
-    position: relative;
-    display: inline-block;
-    margin-left: 4px; }
-    .sendbird-message-status .sendbird-message-status__text .sendbird-message-status__text__try-again {
-      text-decoration: underline; }
-      .sendbird-message-status .sendbird-message-status__text .sendbird-message-status__text__try-again:hover {
-        cursor: pointer; }
-    .sendbird-message-status .sendbird-message-status__text .sendbird-message-status__text__delete {
-      text-decoration: underline; }
-      .sendbird-message-status .sendbird-message-status__text .sendbird-message-status__text__delete:hover {
-        cursor: pointer; }
-
 .sendbird-message-item-menu__list__menu-item:focus-visible {
   outline: none; }
 
@@ -2446,10 +2539,84 @@
     background-color: var(--sendbird-light-primary-400); }
   .sendbird-theme--dark .sendbird-text-message-item-body.mouse-hover.outgoing, .sendbird-theme--dark .sendbird-text-message-item-body:hover.outgoing {
     background-color: var(--sendbird-dark-primary-300); }
+  .sendbird-text-message-item-body .sendbird-text-message-item-body__text-bubble__message {
+    display: inline;
+    margin: 0px 2px; }
 
 p.sendbird-text-message-item-body {
   margin: 0px; }
 
+.sendbird-word {
+  display: inline-block;
+  margin-right: 4px;
+  height: -webkit-fit-content;
+  height: -moz-fit-content;
+  height: fit-content; }
+  .sendbird-word .sendbird-word__mention:hover {
+    cursor: pointer; }
+  .sendbird-word .sendbird-word__mention,
+  .sendbird-word .sendbird-word__url,
+  .sendbird-word .sendbird-word__normal {
+    display: inline-block; }
+
+.sendbird-link-label {
+  text-decoration: unset; }
+  .sendbird-link-label:hover {
+    cursor: pointer;
+    text-decoration: underline; }
+  .sendbird-link-label:focus {
+    outline: none; }
+  .sendbird-link-label__label {
+    display: inline; }
+
+.sendbird-theme--light .sendbird-link-label .sendbird-label--color-onbackground-1 {
+  color: var(--sendbird-light-onlight-01); }
+
+.sendbird-theme--dark .sendbird-link-label .sendbird-label--color-onbackground-1 {
+  color: var(--sendbird-dark-ondark-01); }
+
+.sendbird-theme--light .sendbird-link-label .sendbird-label--color-onbackground-2 {
+  color: var(--sendbird-light-onlight-02); }
+
+.sendbird-theme--dark .sendbird-link-label .sendbird-label--color-onbackground-2 {
+  color: var(--sendbird-dark-ondark-02); }
+
+.sendbird-theme--light .sendbird-link-label .sendbird-label--color-onbackground-3 {
+  color: var(--sendbird-light-onlight-03); }
+
+.sendbird-theme--dark .sendbird-link-label .sendbird-label--color-onbackground-3 {
+  color: var(--sendbird-dark-ondark-03); }
+
+.sendbird-theme--light .sendbird-link-label .sendbird-label--color-oncontent-1 {
+  color: var(--sendbird-light-ondark-01); }
+
+.sendbird-theme--dark .sendbird-link-label .sendbird-label--color-oncontent-1 {
+  color: var(--sendbird-dark-onlight-01); }
+
+.sendbird-theme--light .sendbird-link-label .sendbird-label--color-oncontent-2 {
+  color: var(--sendbird-light-ondark-02); }
+
+.sendbird-theme--dark .sendbird-link-label .sendbird-label--color-oncontent-2 {
+  color: var(--sendbird-dark-onlight-02); }
+
+.sendbird-theme--light .sendbird-link-label .sendbird-label--color-primary {
+  color: var(--sendbird-light-primary-300); }
+
+.sendbird-theme--dark .sendbird-link-label .sendbird-label--color-primary {
+  color: var(--sendbird-dark-primary-200); }
+
+.sendbird-theme--light .sendbird-link-label .sendbird-label--color-error {
+  color: var(--sendbird-light-error-300); }
+
+.sendbird-theme--dark .sendbird-link-label .sendbird-label--color-error {
+  color: var(--sendbird-dark-error-200); }
+
+.sendbird-theme--light .sendbird-link-label .sendbird-label--color-secondary-3 {
+  color: var(--sendbird-light-secondary-300); }
+
+.sendbird-theme--dark .sendbird-link-label .sendbird-label--color-secondary-3 {
+  color: var(--sendbird-dark-secondary-200); }
+
 .sendbird-file-message-item-body {
   position: relative;
   display: inline-block;
@@ -2653,64 +2820,6 @@ p.sendbird-text-message-item-body {
 p.sendbird-og-message-item-body__text-bubble {
   margin: 0px; }
 
-.sendbird-link-label {
-  text-decoration: unset; }
-  .sendbird-link-label:hover {
-    cursor: pointer;
-    text-decoration: underline; }
-  .sendbird-link-label:focus {
-    outline: none; }
-  .sendbird-link-label__label {
-    display: inline; }
-
-.sendbird-theme--light .sendbird-link-label .sendbird-label--color-onbackground-1 {
-  color: var(--sendbird-light-onlight-01); }
-
-.sendbird-theme--dark .sendbird-link-label .sendbird-label--color-onbackground-1 {
-  color: var(--sendbird-dark-ondark-01); }
-
-.sendbird-theme--light .sendbird-link-label .sendbird-label--color-onbackground-2 {
-  color: var(--sendbird-light-onlight-02); }
-
-.sendbird-theme--dark .sendbird-link-label .sendbird-label--color-onbackground-2 {
-  color: var(--sendbird-dark-ondark-02); }
-
-.sendbird-theme--light .sendbird-link-label .sendbird-label--color-onbackground-3 {
-  color: var(--sendbird-light-onlight-03); }
-
-.sendbird-theme--dark .sendbird-link-label .sendbird-label--color-onbackground-3 {
-  color: var(--sendbird-dark-ondark-03); }
-
-.sendbird-theme--light .sendbird-link-label .sendbird-label--color-oncontent-1 {
-  color: var(--sendbird-light-ondark-01); }
-
-.sendbird-theme--dark .sendbird-link-label .sendbird-label--color-oncontent-1 {
-  color: var(--sendbird-dark-onlight-01); }
-
-.sendbird-theme--light .sendbird-link-label .sendbird-label--color-oncontent-2 {
-  color: var(--sendbird-light-ondark-02); }
-
-.sendbird-theme--dark .sendbird-link-label .sendbird-label--color-oncontent-2 {
-  color: var(--sendbird-dark-onlight-02); }
-
-.sendbird-theme--light .sendbird-link-label .sendbird-label--color-primary {
-  color: var(--sendbird-light-primary-300); }
-
-.sendbird-theme--dark .sendbird-link-label .sendbird-label--color-primary {
-  color: var(--sendbird-dark-primary-200); }
-
-.sendbird-theme--light .sendbird-link-label .sendbird-label--color-error {
-  color: var(--sendbird-light-error-300); }
-
-.sendbird-theme--dark .sendbird-link-label .sendbird-label--color-error {
-  color: var(--sendbird-dark-error-200); }
-
-.sendbird-theme--light .sendbird-link-label .sendbird-label--color-secondary-3 {
-  color: var(--sendbird-light-secondary-300); }
-
-.sendbird-theme--dark .sendbird-link-label .sendbird-label--color-secondary-3 {
-  color: var(--sendbird-dark-secondary-200); }
-
 .sendbird-unknown-message-item-body {
   position: relative;
   display: inline-block;
@@ -3706,7 +3815,6 @@ p.sendbird-og-message-item-body__text-bubble {
     .sendbird-openchannel-conversation .sendbird-openchannel-conversation-scroll-container .sendbird-openchannel-conversation-scroll-padding {
       flex: 1 1 0; }
 
-
 .sendbird-frozen-channel-notification {
   position: relative;
   margin-top: 8px;