New/message component+avatar (#5)

* Box replacement (#224) * added ActionButton, Icon, Input Signed-off-by: Abhinav Kumar <[email protected]> improve auth Signed-off-by: Abhinav Kumar <[email protected]> added apis for slash, ui-iteractions, action-trigger Signed-off-by: Abhinav Kumar <[email protected]> slash-commands+ui-kit+theming Signed-off-by: Abhinav Kumar <[email protected]> slash-commands+ui-kit+theming * html-embedd Signed-off-by: Abhinav Kumar <[email protected]> * new/message-component+avatar Signed-off-by: Abhinav Kumar <[email protected]> --------- Signed-off-by: Abhinav Kumar <[email protected]>
RocketChat · Sep 13, 2023 · d1c70ca · d1c70ca
1 parent 21d88ac
commit d1c70ca
Show file tree

Hide file tree

Showing 23 changed files with 847 additions and 207 deletions.
diff --git a/packages/react/src/components/ActionButton/ActionButton.js b/packages/react/src/components/ActionButton/ActionButton.js
@@ -14,8 +14,8 @@ const getSize = ({ small, large }) => {
 };
 
 const ActionButton = forwardRef(
-  ({ icon, size = 'medium', children, ...props }, ref) => (
-    <Button ref={ref} square size={size} {...props}>
+  ({ icon, size = 'medium', color = 'default', children, ...props }, ref) => (
+    <Button ref={ref} square size={size} color={color} {...props}>
       {children}
       <Icon name={icon} size={getSize(props)} />
     </Button>

diff --git a/packages/react/src/components/ActionButton/ActionButton.stories.js b/packages/react/src/components/ActionButton/ActionButton.stories.js
@@ -39,6 +39,7 @@ export const Ghost = {
     ghost: true,
     icon: 'cross',
     disabled: false,
+    color: 'primary',
   },
   render: (args) => (
     <ThemeProvider theme={DefaultTheme}>

diff --git a/packages/react/src/components/Avatar/Avatar.js b/packages/react/src/components/Avatar/Avatar.js
@@ -0,0 +1,34 @@
+import { css } from '@emotion/react';
+import React from 'react';
+import useComponentOverrides from '../../theme/useComponentOverrides';
+import { AvatarContainer } from './AvatarContainer';
+
+export const Avatar = ({
+  size = '2.25rem',
+  className = '',
+  style = {},
+  url,
+  ...props
+}) => {
+  const AvatarCss = css`
+    border-radius: 0.25rem;
+    height: ${size};
+    width: ${size};
+  `;
+  const { classNames, styleOverrides } = useComponentOverrides(
+    'Avatar',
+    className,
+    style
+  );
+
+  return (
+    <AvatarContainer size={size} {...props}>
+      <img
+        src={`${url}`}
+        css={AvatarCss}
+        className={classNames}
+        style={styleOverrides}
+      />
+    </AvatarContainer>
+  );
+};
diff --git a/packages/react/src/components/Avatar/AvatarContainer.js b/packages/react/src/components/Avatar/AvatarContainer.js
@@ -0,0 +1,33 @@
+import { css } from '@emotion/react';
+import React from 'react';
+import { appendClassNames } from '../../lib/appendClassNames';
+import useComponentOverrides from '../../theme/useComponentOverrides';
+import { Box } from '../Box';
+
+export const AvatarContainer = ({
+  title,
+  children,
+  className = '',
+  style = {},
+  ...props
+}) => {
+  const AvatarContainerCSS = css`
+    display: inline-flex;
+    vertical-align: middle;
+    cursor: pointer;
+  `;
+  const { classNames, styleOverrides } = useComponentOverrides(
+    'AvatarContainer',
+    className,
+    style
+  );
+  props.className = appendClassNames('ec-avatar-container', [classNames]);
+
+  props.style = styleOverrides;
+
+  return (
+    <Box is="figure" css={AvatarContainerCSS} aria-label={title} {...props}>
+      {children}
+    </Box>
+  );
+};
diff --git a/packages/react/src/components/Avatar/index.js b/packages/react/src/components/Avatar/index.js
@@ -0,0 +1 @@
+export * from './Avatar';
diff --git a/packages/react/src/components/Button/Button.js b/packages/react/src/components/Button/Button.js
@@ -30,9 +30,9 @@ const Button = ({
   const classNameButton = css`
     cursor: pointer;
     display: inline-block;
-    background-color: ${theme.palette[color].main};
-    color: ${theme.palette[color].contrastText || 'currentColor'};
-    border-color: ${theme.palette[color].main || 'currentColor'};
+    background-color: ${theme.palette[color]?.main};
+    color: ${theme.palette[color]?.contrastText || 'currentColor'};
+    border-color: ${theme.palette[color]?.main || 'currentColor'};
     border-style: solid;
     border-width: 1px;
     font-size: 0.875rem;
@@ -96,7 +96,7 @@ const Button = ({
     }
     &.ghost {
       background: none;
-      color: ${theme?.palette?.text?.primary || '#1A2027'};
+      color: ${theme?.palette?.[color]?.main || '#1A2027'};
       border: none;
     }
     &.disabled.ghost {

diff --git a/packages/react/src/components/ChatBody/ChatBody.js b/packages/react/src/components/ChatBody/ChatBody.js
@@ -177,12 +177,10 @@ const ChatBody = ({ height, anonymousMode, showRoles }) => {
   useEffect(() => {
     RCInstance.auth.onAuthChange((user) => {
       if (user) {
-        RCInstance.connect().then(() => {
-          RCInstance.addMessageListener(addMessage);
-          RCInstance.addMessageDeleteListener(removeMessage);
-          RCInstance.addActionTriggeredListener(onActionTriggerResponse);
-          RCInstance.addUiInteractionListener(onActionTriggerResponse);
-        });
+        RCInstance.addMessageListener(addMessage);
+        RCInstance.addMessageDeleteListener(removeMessage);
+        RCInstance.addActionTriggeredListener(onActionTriggerResponse);
+        RCInstance.addUiInteractionListener(onActionTriggerResponse);
         getMessagesAndRoles();
       } else {
         getMessagesAndRoles(anonymousMode);

diff --git a/packages/react/src/components/ChatInput/ChatInput.js b/packages/react/src/components/ChatInput/ChatInput.js
@@ -280,7 +280,6 @@ const ChatInput = () => {
           margin-top: 20px;
           border: 2px solid #ddd;
         `}
-        className={styles.containerParent}
       >
         {showMembersList ? (
           <MembersList