@soul-refiner/design-system 0.1.37 → 0.1.39

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

@@ -1,245 +0,0 @@
-'use client';
-
-import React from 'react';
-import styled from 'styled-components';
-import Picker from '@emoji-mart/react';
-import { Avatar, Box, BoxProps, P } from '../../';
-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

@@ -1,35 +0,0 @@
-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

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

package/src/components/surfaces/drawer/drawer.tsx

@@ -1,182 +0,0 @@
-'use client';
-
-import React from 'react';
-import styled from 'styled-components';
-import { callAll } from '../../../utils';
-
-const DrawerContext = React.createContext<
-  [boolean, React.Dispatch<React.SetStateAction<boolean>>]
->([false, (() => undefined) as React.Dispatch<React.SetStateAction<boolean>>]);
-
-export interface DrawerProps extends React.PropsWithChildren {
-  /**
-   * This is to make the Modal a controlled component,
-   * instead of it managing its own state
-   */
-  controlledOpen?: boolean;
-  onOpenChange?: () => void;
-}
-
-export const Drawer = ({
-  children,
-  controlledOpen,
-  onOpenChange,
-}: DrawerProps) => {
-  const [open, setOpen] = React.useState(controlledOpen || false);
-
-  React.useEffect(() => {
-    if (controlledOpen !== undefined) {
-      setOpen(controlledOpen);
-    }
-  }, [controlledOpen]);
-
-  const _children = React.Children.toArray(children);
-  const triggers: React.ReactNode[] = [];
-  const content: React.ReactNode[] = [];
-  let footer: React.ReactNode = null;
-  let header: React.ReactNode = null;
-
-  for (const child of _children) {
-    if (React.isValidElement(child)) {
-      const type = (child.type as any)?.displayName;
-
-      if (type === 'Drawer.Trigger') triggers.push(child);
-      else if (type === 'Drawer.Header') header = child;
-      else if (type === 'Drawer.Footer') footer = child;
-      else content.push(child);
-    }
-  }
-
-  return (
-    <DrawerContext.Provider value={[open, setOpen]}>
-      {triggers}
-      {open && (
-        <Background
-          onClick={callAll(
-            () => setOpen(false),
-            () => onOpenChange && onOpenChange()
-          )}
-        />
-      )}
-      <Component $open={open}>
-        {header && <HeaderWrapper>{header}</HeaderWrapper>}
-        <ContentWrapper>{content}</ContentWrapper>
-        {footer && <FooterWrapper>{footer}</FooterWrapper>}
-      </Component>
-    </DrawerContext.Provider>
-  );
-};
-
-const Background = styled.div`
-  position: fixed;
-  height: 100vh;
-  width: 100vw;
-  top: 0;
-  left: 0;
-  right: 0;
-  z-index: 149;
-  overflow: hidden;
-  background: #000000;
-  opacity: 0.5;
-  cursor: pointer;
-`;
-
-const Component = styled.div<{
-  $open: boolean;
-}>`
-  position: fixed;
-  top: 0;
-  right: 0;
-  height: 100vh;
-  max-width: 880px;
-  width: 100%;
-  z-index: 150;
-  border-radius: 16px 0px 0px 16px;
-  background-color: var(--background-color);
-  margin-right: -100vw;
-  transition: margin-right 0.5s;
-  background-color: var(--color-grey-10);
-
-  ${({ $open }) => ($open ? 'margin-right: 0px;' : '')}
-`;
-
-const HeaderWrapper = styled.div`
-  background-color: var(--color-white);
-  box-shadow: var(--elevation-2);
-  position: -webkit-sticky; /* Safari */
-  position: sticky;
-  top: 0;
-`;
-
-const ContentWrapper = styled.div`
-  height: calc(100vh - 224px);
-  position: relative;
-  display: flex;
-  flex-flow: column nowrap;
-  padding: 24px 16px 24px 24px;
-  margin-right: 8px;
-  overflow-y: auto;
-
-  &::-webkit-scrollbar-track {
-    box-shadow: inset 0 4px 4px rgba(0, 0, 0, 0.15);
-    -webkit-box-shadow: inset 0 4px 4px rgba(0, 0, 0, 0.15);
-    border-radius: 4px;
-    background-color: var(--color-white);
-    margin: 40px 0px 15px 0px;
-  }
-  &::-webkit-scrollbar {
-    width: 8px;
-    border-radius: 4px;
-  }
-  &::-webkit-scrollbar-thumb {
-    border-radius: 4px;
-    background-color: var(--color-grey-6);
-    opacity: 30%;
-  }
-`;
-
-const FooterWrapper = styled.div`
-  background-color: var(--color-white);
-  box-shadow: var(--elevation-1);
-  position: -webkit-sticky; /* Safari */
-  position: sticky;
-  bottom: 0;
-`;
-
-const DrawerTrigger = ({
-  children: child,
-}: {
-  children: React.ReactElement;
-}) => {
-  const [, setOpen] = React.useContext(DrawerContext);
-  return (
-    child &&
-    React.cloneElement(child, {
-      onClick: callAll(() => setOpen((prev) => !prev), child.props.onClick),
-    })
-  );
-};
-
-DrawerTrigger.displayName = 'Drawer.Trigger';
-Drawer.Trigger = DrawerTrigger;
-
-const DrawerHeader = ({ children }: React.PropsWithChildren) => (
-  <div>{children}</div>
-);
-
-DrawerHeader.displayName = 'Drawer.Header';
-Drawer.Header = DrawerHeader;
-
-const DrawerContent = ({ children }: React.PropsWithChildren) => (
-  <div>{children}</div>
-);
-
-DrawerContent.displayName = 'Drawer.Content';
-Drawer.Content = DrawerContent;
-
-const DrawerFooter = ({ children }: React.PropsWithChildren) => (
-  <div>{children}</div>
-);
-
-DrawerFooter.displayName = 'Drawer.Footer';
-Drawer.Footer = DrawerFooter;

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

@@ -1,2 +0,0 @@
-export { Drawer } from './drawer';
-export type { DrawerProps } from './drawer';

package/src/components/surfaces/index.ts

@@ -1,10 +0,0 @@
-export { Accordion } from './accordion';
-export type { AccordionProps, AccordionItemProps } from './accordion';
-export { Comment } from './comment';
-export type { CommentProps } from './comment';
-export { Drawer } from './drawer';
-export type { DrawerProps } from './drawer';
-export { Message } from './message';
-export type { MessageProps } from './message';
-export { Modal } from './modal';
-export type { ModalContentProps, ModalProps } from './modal';

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

@@ -1,2 +0,0 @@
-export { Message } from './message';
-export type { MessageProps } from './message';

package/src/components/surfaces/message/message.tsx

@@ -1,124 +0,0 @@
-'use client';
-
-import React from 'react';
-import styled from 'styled-components';
-import { Avatar, Box, P, H } from '../../';
-
-export interface MessageProps {
-  messages: {
-    content: string;
-    senderHref: string;
-    senderId: string;
-    senderName: string;
-    senderAvatarURI: string;
-    createdDate: Date;
-  }[];
-  userId: string;
-}
-
-export const Message = ({ messages, userId }: MessageProps) => {
-  const id = React.useId();
-  return (
-    <Box $display="flex" $dir="column" $gap={16}>
-      {messages.map(
-        (
-          {
-            content,
-            createdDate,
-            senderAvatarURI,
-            senderHref,
-            senderId,
-            senderName,
-          },
-          index
-        ) => {
-          const isSelf = senderId === userId;
-          const isFirstMessageBySender =
-            messages?.[index - 1]?.senderId !== senderId;
-
-          if (isSelf) {
-            return (
-              <React.Fragment key={id + index}>
-                {isFirstMessageBySender && (
-                  <P
-                    $color="grey-4"
-                    $fontSize={12}
-                    $lineHeight={16}
-                    sx="margin-top: 40px; margin-left: auto;"
-                  >
-                    {createdDate.toLocaleDateString()}{' '}
-                    {createdDate.toLocaleTimeString()}
-                  </P>
-                )}
-                <Wrapper $isSelf={isSelf}>{content}</Wrapper>
-              </React.Fragment>
-            );
-          }
-
-          return (
-            <React.Fragment key={id + index}>
-              {isFirstMessageBySender && (
-                <Avatar
-                  image={senderAvatarURI}
-                  href={senderHref}
-                  subtitle={
-                    <P
-                      as="span"
-                      $color="blue-2"
-                      $fontSize={12}
-                      $lineHeight={16}
-                      sx="vertical-align: top;"
-                    >
-                      {createdDate.toLocaleTimeString()}
-                    </P>
-                  }
-                  size={56}
-                  sx="margin-top: 40px;"
-                  textPosition="right"
-                  title={
-                    <H
-                      as="span"
-                      $color="blue-2"
-                      $fontSize={18}
-                      $lineHeight={26}
-                      $mediumBold
-                    >
-                      {senderName}
-                    </H>
-                  }
-                />
-              )}
-              <Wrapper $isSelf={isSelf}>{content}</Wrapper>
-            </React.Fragment>
-          );
-        }
-      )}
-    </Box>
-  );
-};
-
-const Wrapper = styled.div<{
-  $isSelf: boolean;
-}>`
-  max-width: 552px;
-  padding: 16px;
-  border-radius: 16px;
-  font-family: Inter;
-  font-size: 14px;
-  line-height: 20px;
-  letter-spacing: -0.006em;
-
-  ${({ $isSelf }) =>
-    $isSelf
-      ? `
-    margin-left: auto;
-    color: var(--color-white);
-    background-color: var(--color-primary-blue-2);
-    border-top-right-radius: 0px;`
-      : `
-    margin-left: 68px;
-    margin-right: auto;
-    color: var(--color-grey-3);
-    background-color: var(--color-grey-9);
-    border-top-left-radius: 0px;`}
-`;

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

@@ -1,2 +0,0 @@
-export { Modal } from './modal';
-export type { ModalProps, ModalContentProps } from './modal';