fix(fuselage): MessageMetrics props types (#1342)

RocketChat · Apr 1, 2024 · 71c2216 · 71c2216
1 parent cc19133
commit 71c2216
Show file tree

Hide file tree

Showing 11 changed files with 290 additions and 36 deletions.
diff --git a/.changeset/angry-avocados-punch.md b/.changeset/angry-avocados-punch.md
@@ -0,0 +1,5 @@
+---
+"@rocket.chat/fuselage": patch
+---
+
+fix(fuselage): MessageMetrics props types
diff --git a/packages/fuselage/src/components/Message/MessageMetrics/MessageMetrics.spec.tsx b/packages/fuselage/src/components/Message/MessageMetrics/MessageMetrics.spec.tsx
@@ -1,14 +1,31 @@
+import { composeStories } from '@storybook/testing-react';
 import { render } from '@testing-library/react';
+import { axe } from 'jest-axe';
 import React from 'react';
 
-import MessageMetrics from '.';
+import * as stories from './MessageMetrics.stories';
 
-it('renders without crashing', () => {
-  render(
-    <MessageMetrics>
-      <MessageMetrics.Reply />
-      <MessageMetrics.Item />
-      <MessageMetrics.Following name='bell' />
-    </MessageMetrics>
+const testCases = Object.values(composeStories(stories)).map((Story) => [
+  Story.storyName || 'Story',
+  Story,
+]);
+
+describe('[MessageMetrics Rendering]', () => {
+  test.each(testCases)(
+    `renders %s without crashing`,
+    async (_storyname, Story) => {
+      const tree = render(<Story />);
+      expect(tree.baseElement).toMatchSnapshot();
+    }
+  );
+
+  test.each(testCases)(
+    '%s should have no a11y violations',
+    async (_storyname, Story) => {
+      const { container } = render(<Story />);
+
+      const results = await axe(container);
+      expect(results).toHaveNoViolations();
+    }
   );
 });
diff --git a/packages/fuselage/src/components/Message/MessageMetrics/MessageMetrics.stories.tsx b/packages/fuselage/src/components/Message/MessageMetrics/MessageMetrics.stories.tsx
@@ -0,0 +1,51 @@
+import { action } from '@storybook/addon-actions';
+import { Title, Primary } from '@storybook/addon-docs';
+import type { ComponentMeta } from '@storybook/react';
+import React from 'react';
+
+import {
+  MessageMetrics,
+  MessageMetricsReply,
+  MessageMetricsItem,
+  MessageMetricsFollowing,
+  MessageMetricsItemIcon,
+  MessageMetricsItemLabel,
+} from '.';
+import { BasicMessageTemplate } from '../helpers';
+
+export default {
+  title: 'Message/MessageMetrics',
+  component: MessageMetrics,
+  parameters: {
+    docs: {
+      page: () => (
+        <>
+          <Title />
+          <Primary />
+        </>
+      ),
+    },
+  },
+} as ComponentMeta<typeof MessageMetrics>;
+
+const metrics = (
+  <MessageMetrics>
+    <MessageMetricsReply>Reply</MessageMetricsReply>
+    <MessageMetricsItem title='Replies'>
+      <MessageMetricsItemIcon name='thread' />
+      <MessageMetricsItemLabel>10</MessageMetricsItemLabel>
+    </MessageMetricsItem>
+    <MessageMetricsItem>
+      <MessageMetricsFollowing
+        title='Following'
+        name='bell'
+        onClick={action('click')}
+      />
+    </MessageMetricsItem>
+  </MessageMetrics>
+);
+
+export const Default = BasicMessageTemplate.bind({});
+Default.args = {
+  metrics,
+};
diff --git a/packages/fuselage/src/components/Message/MessageMetrics/MessageMetricsContent.tsx b/packages/fuselage/src/components/Message/MessageMetrics/MessageMetricsContent.tsx
@@ -1,10 +1,6 @@
-import type { ReactNode } from 'react';
+import type { HTMLAttributes } from 'react';
 import React from 'react';
 
-type ContentProps = {
-  children?: ReactNode;
-};
-
-export const Content = (props: ContentProps) => (
-  <div className='rcx-message-metrics__content' {...props} />
-);
+export const MessageMetricsContent = (
+  props: HTMLAttributes<HTMLDivElement>
+) => <div className='rcx-message-metrics__content' {...props} />;
diff --git a/packages/fuselage/src/components/Message/MessageMetrics/MessageMetricsContentItem.tsx b/packages/fuselage/src/components/Message/MessageMetrics/MessageMetricsContentItem.tsx
@@ -1,10 +1,6 @@
-import type { ReactNode } from 'react';
+import type { HTMLAttributes } from 'react';
 import React from 'react';
 
-type MessageMetricsContentItemProps = {
-  children?: ReactNode;
-};
-
 export const MessageMetricsContentItem = (
-  props: MessageMetricsContentItemProps
+  props: HTMLAttributes<HTMLDivElement>
 ) => <div className='rcx-message-metrics__content-item' {...props} />;
diff --git a/packages/fuselage/src/components/Message/MessageMetrics/MessageMetricsFollowing.tsx b/packages/fuselage/src/components/Message/MessageMetrics/MessageMetricsFollowing.tsx
@@ -1,9 +1,13 @@
+import type { ComponentProps } from 'react';
 import React from 'react';
 
 import { IconButton } from '../../Button';
 
-type MessageMetricsFollowingProps = { name: 'bell' | 'bell-off' };
+type MessageMetricsFollowingProps = {
+  name: 'bell' | 'bell-off';
+} & Omit<ComponentProps<typeof IconButton>, 'icon'>;
 
 export const MessageMetricsFollowing = ({
   name,
-}: MessageMetricsFollowingProps) => <IconButton small icon={name} />;
+  ...props
+}: MessageMetricsFollowingProps) => <IconButton {...props} small icon={name} />;
diff --git a/...lage/src/components/Message/MessageMetrics/MessageMetricsItem/MessageMetricsItemLabel.tsx b/...lage/src/components/Message/MessageMetrics/MessageMetricsItem/MessageMetricsItemLabel.tsx
@@ -1,10 +1,6 @@
-import type { ReactNode } from 'react';
+import type { HTMLAttributes } from 'react';
 import React from 'react';
 
-type MessageMetricsItemLabelProps = {
-  children?: ReactNode;
-};
-
 export const MessageMetricsItemLabel = (
-  props: MessageMetricsItemLabelProps
+  props: HTMLAttributes<HTMLDivElement>
 ) => <div className='rcx-message-metrics__item-label' {...props} />;
diff --git a/packages/fuselage/src/components/Message/MessageMetrics/MessageMetricsItem/index.ts b/packages/fuselage/src/components/Message/MessageMetrics/MessageMetricsItem/index.ts
@@ -3,6 +3,14 @@ import { MessageMetricsItemIcon } from './MessageMetricsItemIcon';
 import { MessageMetricsItemLabel } from './MessageMetricsItemLabel';
 
 export default Object.assign(MessageMetricsItem, {
+  /**
+   * @deprecated prefer using named imports
+   * */
   Icon: MessageMetricsItemIcon,
+  /**
+   * @deprecated prefer using named imports
+   * */
   Label: MessageMetricsItemLabel,
 });
+
+export { MessageMetricsItem, MessageMetricsItemIcon, MessageMetricsItemLabel };
diff --git a/...fuselage/src/components/Message/MessageMetrics/__snapshots__/MessageMetrics.spec.tsx.snap b/...fuselage/src/components/Message/MessageMetrics/__snapshots__/MessageMetrics.spec.tsx.snap
@@ -0,0 +1,173 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`[MessageMetrics Rendering] renders Default without crashing 1`] = `
+<body>
+  <div>
+    <div
+      class="rcx-box rcx-box--full"
+    >
+      <div
+        class="rcx-message-divider"
+        role="separator"
+      >
+        <div
+          class="rcx-message-divider__bar"
+        />
+        <div
+          class="rcx-message-divider__wrapper"
+        >
+          May, 24, 2020
+        </div>
+         
+        <div
+          class="rcx-message-divider__bar"
+        />
+      </div>
+      <div
+        class="rcx-message rcx-message--clickable customclass"
+        tabindex="0"
+      >
+        <div
+          class="rcx-box rcx-box--full rcx-message-container rcx-message-container--left"
+        >
+          <figure
+            class="rcx-box rcx-box--full rcx-avatar rcx-avatar--x36"
+          >
+            <img
+              alt=""
+              class="rcx-avatar__element rcx-avatar__element--x36"
+              src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/2wBDAQkJCQwLDBgNDRgyIRwhMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjL/wAARCAAoACgDASIAAhEBAxEB/8QAGwAAAgIDAQAAAAAAAAAAAAAAAAcEBgIDBQj/xAAuEAACAQQAAwcEAQUAAAAAAAABAgMABAUREiExBhMUIkFRYQcWcYGhFTJSgpH/xAAYAQADAQEAAAAAAAAAAAAAAAACAwQBAP/EAB4RAAIBBQEBAQAAAAAAAAAAAAABAgMREiExE0HR/9oADAMBAAIRAxEAPwBuXuIkhBuMe5ib/AHQP49q4L3mLitryTLTSpOiHQI5k/HzXa/qbFOEudVTu1dumWvcTaNCZYZ7vU6g6LxqjOU/24dfs1Ouh9FnkMpd3Reeyx83hAxZZEhkdV9/MBrX71WGPvJcqrJBGveKATtuXXqNU0pu02bTHXD/AGvJAluyxxRd6F4x00o+NdKoVrjbzJdvVe1t5cVLc2ck8qjnohgpPtz2v7G6JtPQ2VJwjlcw+37mchpnK6GtIuv5NFWeTsLNPvxWTvpfjvOEfwKKzEVkSct2vscS/BIzSN0YRkeX81UpPqO8masJETu7OOccY4dswYFQeftv096XV5knuJGdm2T1+agvMXj8jEaHX905QihabvcbuS7X566mLWLwSY8PuRnk/u4eZ0deTl71Ef6hY+0yM88TzeNZY4luYwpVYyduOfrvhPTnr0pXSX9y5mCsyJMdyxxvwq599em+taItqCSNc90ChvZRUruUcT0JiO18Elpk7t8v41LWzacxkBSuvjQ/FFJayjDWrCTepAQ2vUH0oo/Jk3ovpwJJeVCP5CN+lFFaaMqy+nAyuChvrTI2kN9JAsi2ZOy4IBHMnkSCP+iqBexSWdxLazoUljJVlPUH2oorkV10pRc7b1zXb/hZOzuJvM86QWEXeELxOzHSIPcmiiiunVlF2RNTpRkrs//Z"
+            />
+          </figure>
+        </div>
+        <div
+          class="rcx-box rcx-box--full rcx-message-container"
+        >
+          <div
+            class="rcx-box rcx-box--full rcx-message-header"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-message-header__wrapper"
+            >
+              <span
+                class="rcx-box rcx-box--full rcx-message-header__name-container"
+              >
+                <span
+                  class="rcx-box rcx-box--full rcx-message-header__name"
+                >
+                  Haylie George
+                </span>
+                 
+                <span
+                  class="rcx-box rcx-box--full rcx-message-header__username"
+                >
+                  @haylie.george
+                </span>
+              </span>
+              <div
+                class="rcx-box rcx-box--full rcx-message-header__roles"
+              >
+                <span
+                  class="rcx-box rcx-box--full  rcx-tag  rcx-box rcx-box--full rcx-message-header__role"
+                >
+                  <span
+                    class="rcx-tag__inner"
+                  >
+                    Admin
+                  </span>
+                </span>
+                <span
+                  class="rcx-box rcx-box--full  rcx-tag  rcx-box rcx-box--full rcx-message-header__role"
+                >
+                  <span
+                    class="rcx-tag__inner"
+                  >
+                    User
+                  </span>
+                </span>
+                <span
+                  class="rcx-box rcx-box--full  rcx-tag  rcx-box rcx-box--full rcx-message-header__role"
+                >
+                  <span
+                    class="rcx-tag__inner"
+                  >
+                    Owner
+                  </span>
+                </span>
+              </div>
+              <span
+                class="rcx-box rcx-box--full rcx-message-header__time"
+              >
+                12:00 PM
+              </span>
+            </div>
+          </div>
+          <div
+            class="rcx-message-body"
+          >
+            Ut enim ad minim veniam
+          </div>
+          <div
+            class="rcx-box rcx-box--full rcx-message-block"
+          >
+            <div
+              class="rcx-message-metrics__content-item"
+            >
+              <div
+                class="rcx-message-metrics__content-wrapper"
+              >
+                <div
+                  class="rcx-message-metrics__item"
+                >
+                  <button
+                    class="rcx-box rcx-box--full rcx-button--small rcx-button--primary rcx-button"
+                    type="button"
+                  >
+                    <span
+                      class="rcx-button--content"
+                    >
+                      Reply
+                    </span>
+                  </button>
+                </div>
+                <div
+                  class="rcx-message-metrics__item"
+                  title="Replies"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-thread rcx-icon rcx-css-4pvxx3"
+                  >
+                    
+                  </i>
+                  <div
+                    class="rcx-message-metrics__item-label"
+                  >
+                    10
+                  </div>
+                </div>
+                <div
+                  class="rcx-message-metrics__item"
+                >
+                  <button
+                    class="rcx-box rcx-box--full rcx-button--small-square rcx-button--square rcx-button--icon rcx-button"
+                    title="Following"
+                    type="button"
+                  >
+                    <i
+                      aria-hidden="true"
+                      class="rcx-box rcx-box--full rcx-icon--name-bell rcx-icon rcx-css-4pvxx3"
+                    >
+                      
+                    </i>
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</body>
+`;
diff --git a/packages/fuselage/src/components/Message/MessageMetrics/index.tsx b/packages/fuselage/src/components/Message/MessageMetrics/index.tsx
@@ -4,14 +4,19 @@ import MessageMetricsItem from './MessageMetricsItem';
 import { MessageMetricsReply } from './MessageMetricsReply';
 
 export default Object.assign(MessageMetrics, {
+  /**
+   * @deprecated prefer using named imports
+   * */
   Reply: MessageMetricsReply,
+  /**
+   * @deprecated prefer using named imports
+   * */
   Item: MessageMetricsItem,
+  /**
+   * @deprecated prefer using named imports
+   * */
   Following: MessageMetricsFollowing,
 });
 
-export {
-  MessageMetrics,
-  MessageMetricsFollowing,
-  MessageMetricsItem,
-  MessageMetricsReply,
-};
+export { MessageMetrics, MessageMetricsFollowing, MessageMetricsReply };
+export * from './MessageMetricsItem';
diff --git a/packages/fuselage/src/components/Message/helpers.tsx b/packages/fuselage/src/components/Message/helpers.tsx
@@ -13,9 +13,11 @@ export const avatarUrl =
 export const BasicMessageTemplate: Story = ({
   reactions,
   toolbar,
+  metrics,
 }: {
   reactions?: ReactNode;
   toolbar?: ReactNode;
+  metrics?: ReactNode;
 }) => (
   <Box>
     <MessageDivider>May, 24, 2020</MessageDivider>
@@ -38,6 +40,7 @@ export const BasicMessageTemplate: Story = ({
         </Message.Header>
         <Message.Body>Ut enim ad minim veniam</Message.Body>
         {reactions}
+        {metrics && <Message.Block>{metrics}</Message.Block>}
       </Message.Container>
       {toolbar}
     </Message>