@soul-refiner/design-system 0.1.13 → 0.1.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@soul-refiner/design-system",
-  "version": "0.1.13",
+  "version": "0.1.14",
   "main": "src/index.ts",
   "license": "MIT",
   "publishConfig": {

package/src/components/surfaces/comment/comment.tsx

@@ -0,0 +1,243 @@
+import React from 'react';
+import styled from 'styled-components';
+import Picker from '@emoji-mart/react';
+import { Avatar, Box, BoxProps, P } from 'components';
+import emojis from 'emoji/emojis.json';
+import { ThumbsUp, Comment as CommentIcon } from 'icons';
+import { abbrTimeBeforeDate } from './helpers';
+import { Styles } from 'common';
+
+export interface CommentProps {
+  content: string;
+  createdDate: Date;
+  onCommentClick: () => void;
+  onReact: (reaction: string) => void;
+  reactions?: Record<string, number>;
+  replies?: CommentProps[];
+  userImageUri: string;
+  userName: string;
+  userReactions?: string[];
+  userProfileUri: string;
+}
+
+export const Comment = ({
+  content,
+  createdDate,
+  onCommentClick,
+  onReact,
+  reactions,
+  replies,
+  userImageUri,
+  userName,
+  userReactions,
+  userProfileUri,
+}: CommentProps) => {
+  const id = React.useId();
+  const [showPicker, setShowPicker] = React.useState(false);
+
+  const handleReaction = ({ native }: Record<string, string>) => {
+    onReact(native);
+    setShowPicker(false);
+  };
+
+  const handlePicker = (event: React.MouseEvent) => {
+    event.stopPropagation();
+    setShowPicker((prev) => !prev);
+  };
+
+  const handlePickerBlur = () => setShowPicker(false);
+
+  const createdTime = abbrTimeBeforeDate(createdDate, { message: true });
+
+  const reactionElements =
+    reactions &&
+    Object.entries(reactions)
+      .sort((a, b) => (a[1] < b[1] ? 1 : -1))
+      .map((reaction) => (
+        <Reaction
+          key={id + reaction[0]}
+          $align="center"
+          $dir="row"
+          $gap={5}
+          $userSelected={userReactions?.includes(reaction[0])}
+        >
+          {reaction[0]}
+          <P $bold $fontSize={10} $lineHeight={14}>
+            {reaction[1]}
+          </P>
+        </Reaction>
+      ));
+
+  const hasReplies = !!replies?.length && replies.length > 0;
+  const replyElements =
+    hasReplies &&
+    replies.map((reply, index) => (
+      <ReplyWrapper
+        $isNotLastReply={index !== replies.length - 1}
+        key={id + reply.createdDate.getTime().toString(36)}
+      >
+        <Comment {...reply} />
+        <ReplyIndicator />
+      </ReplyWrapper>
+    ));
+
+  return (
+    <Wrapper>
+      <Avatar href={userProfileUri} image={userImageUri} size={32} />
+      <Box $flex={1} $dir="column">
+        <ContentWrapper $hasReplies={hasReplies}>
+          <CommentBox>
+            <P $bold $color="grey-2" $fontSize={14} $lineHeight={20}>
+              {userName}
+            </P>
+            <P sx="letter-spacing: -0.176px;">{content}</P>
+          </CommentBox>
+          <Box
+            $align="flex-start"
+            $dir="row"
+            $display="flex"
+            $gap={16}
+            sx="margin: 8px 0px; position: relative;"
+          >
+            <ThumbsUp
+              color="primary-blue-2"
+              onClick={handlePicker}
+              size={24}
+              sx="border-radius: 50%; cursor: pointer; flex-shrink: 0;"
+            />
+            <CommentIcon
+              color="primary-blue-2"
+              onClick={onCommentClick}
+              size={24}
+              sx="border-radius: 50%; cursor: pointer; flex-shrink: 0;"
+            />
+            <P $color="grey-7">•</P>
+            <P
+              $color="grey-4"
+              $fontSize={12}
+              $lineHeight={24}
+              sx="flex-shrink: 0;"
+            >
+              {createdTime}
+            </P>
+            <Box
+              $display="flex"
+              $flow="row wrap"
+              $gap={6}
+              sx="max-width: calc(100% - 190px); margin-left: auto;"
+            >
+              {reactionElements}
+            </Box>
+            {showPicker && (
+              <PickerWrapper>
+                <Picker
+                  data={emojis}
+                  onEmojiSelect={handleReaction}
+                  onClickOutside={handlePickerBlur}
+                  maxFrequentRows={1}
+                  navPosition="none"
+                  previewPosition="none"
+                  perLine={9}
+                  theme="auto"
+                />
+              </PickerWrapper>
+            )}
+          </Box>
+        </ContentWrapper>
+        {hasReplies && <RepliesWrapper>{replyElements}</RepliesWrapper>}
+      </Box>
+    </Wrapper>
+  );
+};
+
+const Wrapper = styled.div`
+  max-width: 700px;
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  gap: 12px;
+  justify-content: space-between;
+  position: relative;
+`;
+
+const ContentWrapper = styled.div<{
+  $hasReplies: boolean;
+}>`
+  display: flex;
+  flex-direction: column;
+  ${({ $hasReplies }) =>
+    $hasReplies
+      ? `
+    position: relative;
+
+    &::before {
+      content: "";
+      position: absolute;
+      top: 32px;
+      left: -28px;
+      height: calc(100% - 12px);
+      border-left: 2px solid var(--color-grey-9);
+    }`
+      : ''}
+`;
+
+const CommentBox = styled.div`
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  background-color: var(--color-grey-10);
+  border-radius: 16px;
+`;
+
+const PickerWrapper = styled.div`
+  position: absolute;
+  z-index: 5;
+`;
+
+const Reaction = styled.div<BoxProps & { $userSelected?: boolean }>`
+  ${Styles.flex}
+  display: flex;
+  padding: 2px 6px;
+  border-radius: 12px;
+  ${({ $userSelected }) =>
+    $userSelected
+      ? `
+    background-color: var(--color-primary-blue-4);
+    border: 1px solid var(--color-primary-blue-3);
+    `
+      : ''}
+`;
+
+const RepliesWrapper = styled.div`
+  padding-top: 12px;
+`;
+
+const ReplyWrapper = styled.div<{
+  $isNotLastReply?: boolean;
+}>`
+  position: relative;
+  ${({ $isNotLastReply }) =>
+    $isNotLastReply
+      ? `
+    &::before {
+      content: "";
+      position: absolute;
+      left: -28px;
+      height: 100%;
+      border-left: 2px solid var(--color-grey-9);
+    }`
+      : ''}
+`;
+
+const ReplyIndicator = styled.div`
+  position: absolute;
+  top: 0;
+  left: -28px;
+  width: 28px;
+  height: 16px;
+  border-bottom-left-radius: 16px;
+  border: 2px solid var(--color-grey-9);
+  border-top: none;
+  border-right: none;
+`;

package/src/components/surfaces/comment/helpers.ts

@@ -0,0 +1,35 @@
+type Options = {
+  message?: boolean;
+};
+
+export const abbrTimeBeforeDate = (date: Date, options?: Options) => {
+  const { message } = options ?? {};
+  const now = new Date();
+  const diff = now.getTime() - date.getTime();
+
+  if (diff < 60000) {
+    // under 1 min
+    if (message) return 'Now';
+    return 'Just now';
+  } else if (diff < 3600000) {
+    // under one hour
+    const minutes = Math.floor(diff / 60000);
+    if (message) return `${minutes}m`;
+    return `${minutes} ${minutes === 1 ? 'min' : 'mins'}`;
+  } else if (diff < 86400000) {
+    // under one day
+    const hours = Math.floor(diff / 3600000);
+    if (message) return `${hours}h`;
+    return `${hours} ${hours === 1 ? 'hour' : 'hours'}`;
+  } else if (diff < 604800000) {
+    // under one week
+    const days = Math.floor(diff / 86400000);
+    if (message) return `${days}d`;
+    return `${days} ${days === 1 ? 'day' : 'days'}`;
+  } else {
+    if (message) {
+      return `${Math.floor(diff / 604800000)}w`;
+    }
+    return date.toDateString().slice(4);
+  }
+};

package/src/components/surfaces/comment/index.ts

@@ -0,0 +1,2 @@
+export { Comment } from './comment';
+export type { CommentProps } from './comment';

package/src/components/surfaces/index.ts

@@ -1,3 +1,5 @@
+export { Comment } from './comment';
+export type { CommentProps } from './comment';
 export { Message } from './message';
 export type { MessageProps } from './message';
 export { Modal } from './modal';