@soul-refiner/design-system 0.1.13 → 0.1.15

package/package.json

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

package/src/components/feedback/badge/badge.tsx

@@ -0,0 +1,94 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Close } from 'icons';
+
+type BadgeColor = 'blue' | 'red' | 'green' | 'purple' | 'orange';
+
+const colorLookup: Record<
+  BadgeColor,
+  Record<'primary' | 'secondary' | 'bg', string>
+> = {
+  blue: {
+    primary: 'var(--color-hue-blue-1)',
+    secondary: 'var(--color-hue-blue-2)',
+    bg: 'var(--color-hue-blue-3)',
+  },
+  green: {
+    primary: 'var(--color-green-3)',
+    secondary: 'var(--color-green-8)',
+    bg: 'var(--color-green-10)',
+  },
+  orange: {
+    primary: 'var(--color-hue-orange-1)',
+    secondary: 'var(--color-hue-orange-2)',
+    bg: 'var(--color-hue-orange-3)',
+  },
+  purple: {
+    primary: 'var(--color-hue-purple-1)',
+    secondary: 'var(--color-hue-purple-2)',
+    bg: 'var(--color-hue-purple-3)',
+  },
+  red: {
+    primary: 'var(--color-red-4)',
+    secondary: 'var(--color-red-9)',
+    bg: 'var(--color-red-10)',
+  },
+};
+
+export interface BadgeProps extends React.PropsWithChildren {
+  color: BadgeColor;
+  dot?: boolean;
+  onDismiss?: () => void;
+}
+
+export const Badge = ({ children, color, dot, onDismiss }: BadgeProps) => {
+  const bgColor = colorLookup[color].bg;
+  const textColor = colorLookup[color].primary;
+  const borderColor = colorLookup[color].secondary;
+
+  return (
+    <Component
+      $bgColor={bgColor}
+      $borderColor={borderColor}
+      $textColor={textColor}
+    >
+      {dot && <Dot $secondaryColor={textColor} />}
+      {children}
+      {onDismiss && <Close size={16} />}
+    </Component>
+  );
+};
+
+const Component = styled.div<{
+  $bgColor: string;
+  $borderColor: string;
+  $textColor: string;
+}>`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 1px 7px;
+  border-radius: 32px;
+  background-color: ${({ $bgColor }) => $bgColor};
+  color: ${({ $textColor }) => $textColor};
+  border: 1px solid ${({ $borderColor }) => $borderColor};
+  font-family: Inter;
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 16px;
+  user-select: none;
+
+  svg {
+    fill: currentColor;
+    cursor: pointer;
+  }
+`;
+
+const Dot = styled.div<{
+  $secondaryColor: string;
+}>`
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background-color: ${({ $secondaryColor }) => $secondaryColor};
+`;

package/src/components/feedback/badge/index.ts

@@ -0,0 +1,2 @@
+export { Badge } from './badge';
+export type { BadgeProps } from './badge';

package/src/components/feedback/chip/chip.tsx

@@ -0,0 +1,130 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Close } from 'icons';
+
+type ChipColor =
+  | 'grey'
+  | 'blue'
+  | 'red'
+  | 'green'
+  | 'turquoise'
+  | 'purple'
+  | 'yellow'
+  | 'orange'
+  | 'primary-blue';
+type ChipSize = 'small' | 'large';
+
+const colorLookup: Record<
+  ChipColor,
+  Record<'primary' | 'secondary' | 'text', string>
+> = {
+  'primary-blue': {
+    primary: 'var(--color-primary-blue-2)',
+    secondary: 'var(--color-white)',
+    text: 'var(--color-white)',
+  },
+  blue: {
+    primary: 'var(--color-blue-9)',
+    secondary: 'var(--color-blue-5)',
+    text: 'var(--color-grey-4)',
+  },
+  green: {
+    primary: 'var(--color-green-9)',
+    secondary: 'var(--color-green-5)',
+    text: 'var(--color-grey-4)',
+  },
+  grey: {
+    primary: 'var(--color-grey-9)',
+    secondary: 'var(--color-grey-4)',
+    text: 'var(--color-grey-4)',
+  },
+  orange: {
+    primary: 'var(--color-orange-9)',
+    secondary: 'var(--color-orange-5)',
+    text: 'var(--color-grey-4)',
+  },
+  purple: {
+    primary: 'var(--color-purple-9)',
+    secondary: 'var(--color-purple-5)',
+    text: 'var(--color-grey-4)',
+  },
+  red: {
+    primary: 'var(--color-red-9)',
+    secondary: 'var(--color-red-5)',
+    text: 'var(--color-grey-4)',
+  },
+  turquoise: {
+    primary: 'var(--color-turquoise-9)',
+    secondary: 'var(--color-turquoise-5)',
+    text: 'var(--color-grey-4)',
+  },
+  yellow: {
+    primary: 'var(--color-yellow-9)',
+    secondary: 'var(--color-yellow-9)',
+    text: 'var(--color-grey-4)',
+  },
+};
+
+export interface ChipProps extends React.PropsWithChildren {
+  color: ChipColor;
+  dot?: boolean;
+  onDismiss?: () => void;
+  size: ChipSize;
+}
+
+export const Chip = ({ children, color, dot, onDismiss, size }: ChipProps) => {
+  const bgColor = colorLookup[color].primary;
+  const textColor = colorLookup[color].text;
+  const dotColor = colorLookup[color].secondary;
+
+  return (
+    <Component $bgColor={bgColor} $size={size} $textColor={textColor}>
+      {dot && <Dot $secondaryColor={dotColor} />}
+      {children}
+      {onDismiss && <Close size={16} />}
+    </Component>
+  );
+};
+
+const Component = styled.div<{
+  $bgColor: string;
+  $size: ChipSize;
+  $textColor: string;
+}>`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  border-radius: 32px;
+  background-color: ${({ $bgColor }) => $bgColor};
+  color: ${({ $textColor }) => $textColor};
+  font-family: Inter;
+  user-select: none;
+
+  svg {
+    fill: currentColor;
+    cursor: pointer;
+  }
+  ${({ $size }) =>
+    $size === 'small'
+      ? // small
+        `
+    padding: 4px 16px;
+    font-size: 12px;
+    line-height: 16px;
+    font-weight: 500;`
+      : // large
+        `
+    padding: 8px 16px;
+    font-size: 14px;
+    line-height: 20px;
+    font-weight: 600;`}
+`;
+
+const Dot = styled.div<{
+  $secondaryColor: string;
+}>`
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background-color: ${({ $secondaryColor }) => $secondaryColor};
+`;

package/src/components/feedback/chip/index.ts

@@ -0,0 +1,2 @@
+export { Chip } from './chip';
+export type { ChipProps } from './chip';

package/src/components/feedback/index.ts

@@ -1,3 +1,5 @@
+export { Badge } from './badge';
+export type { BadgeProps } from './badge';
 export { Banner } from './banner';
 export type { BannerProps } from './banner';
 export { Loader } from './loader';

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';