@soul-refiner/design-system 0.1.12 → 0.1.14

package/package.json

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

package/src/components/actions/button/button.tsx

@@ -173,8 +173,6 @@ const base = css<{
     color: var(--color-grey-7) !important;
     cursor: unset !important;
   }
-
-  ${({ $sx }) => ($sx ? $sx : '')}
 `;
 
 const Primary = styled(Box)<{
@@ -199,6 +197,8 @@ const Primary = styled(Box)<{
   ${base}
   ${Styles.flex}
   ${Styles.padding}
+
+  ${({ $sx }) => ($sx ? $sx : '')}
 `;
 
 const Secondary = styled(Box)<{
@@ -222,6 +222,8 @@ const Secondary = styled(Box)<{
   ${base}
   ${Styles.flex}
   ${Styles.padding}
+
+  ${({ $sx }) => ($sx ? $sx : '')}
 `;
 
 const Outlined = styled(Box)<{
@@ -240,6 +242,8 @@ const Outlined = styled(Box)<{
   ${base}
   ${Styles.flex}
   ${Styles.padding}
+
+  ${({ $sx }) => ($sx ? $sx : '')}
 `;
 
 const Danger = styled(Box)<{
@@ -264,6 +268,8 @@ const Danger = styled(Box)<{
   ${base}
   ${Styles.flex}
   ${Styles.padding}
+
+  ${({ $sx }) => ($sx ? $sx : '')}
 `;
 
 const Text = styled(Box)<{
@@ -291,6 +297,8 @@ const Text = styled(Box)<{
   ${base}
   ${Styles.flex}
   ${Styles.padding}
+
+  ${({ $sx }) => ($sx ? $sx : '')}
 `;
 
 const Raised = styled(Box)<{
@@ -320,6 +328,8 @@ const Raised = styled(Box)<{
   ${base}
   ${Styles.flex}
   ${Styles.padding}
+
+  ${({ $sx }) => ($sx ? $sx : '')}
 `;
 
 const Special = styled(Box)<{
@@ -347,4 +357,6 @@ const Special = styled(Box)<{
   ${base}
   ${Styles.flex}
   ${Styles.padding}
+
+  ${({ $sx }) => ($sx ? $sx : '')}
 `;

package/src/components/actions/dropdown/dropdown.tsx

@@ -119,7 +119,7 @@ const Dropdown = ({
   const handleChange = multiple ? handleChangeMultiple : handleChangeSingle;
 
   const isSelected = (value: string) =>
-    maintainState && multiple ? selected.includes(value) : value === selected;
+    maintainState && (multiple ? selected.includes(value) : value === selected);
 
   /**
    * allow for the API to accept children as options

package/src/components/iconography/icon/icon.tsx

@@ -30,6 +30,7 @@ export interface IconProps extends NativeProps {
   as?: React.ElementType;
   color?: (typeof COLORS)[number];
   size?: 16 | 20 | 24;
+  sx?: string;
 }
 
 export const Icon = ({
@@ -37,6 +38,7 @@ export const Icon = ({
   children,
   color = 'grey-3',
   size = 16,
+  sx,
   ...rest
 }: IconProps) => {
   return (
@@ -47,6 +49,7 @@ export const Icon = ({
       viewBox="0 0 16 16"
       fill={colorReference[color]}
       xmlns="http://www.w3.org/2000/svg"
+      $sx={sx}
       {...rest}
     >
       {children}
@@ -54,4 +57,6 @@ export const Icon = ({
   );
 };
 
-const SVG = styled.svg``;
+const SVG = styled.svg<{ $sx?: string }>`
+  ${({ $sx }) => ($sx ? $sx : '')}
+`;

package/src/components/input/index.ts

@@ -4,3 +4,5 @@ export { Filter } from './filter';
 export type { FilterProps, FilterTriggerProps } from './filter';
 export { Radio } from './radio';
 export type { RadioProps } from './radio';
+export { Search } from './search';
+export type { SearchProps } from './search';

package/src/components/input/search/index.ts

@@ -0,0 +1,2 @@
+export { Search } from './search';
+export type { SearchProps } from './search';

package/src/components/input/search/search.tsx

@@ -0,0 +1,223 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Styles } from 'common';
+import { BoxProps } from 'components';
+import { Close, Search as SearchIcon } from 'icons';
+
+type NativeProps = Pick<
+  React.HTMLAttributes<HTMLInputElement>,
+  'placeholder' | 'onChange' | 'onSubmit'
+>;
+
+type SearchSize = 'collapsed' | 'small' | 'medium' | 'large';
+
+export interface SearchProps extends NativeProps {
+  dropdownFilter?: React.ReactElement;
+  onClearText?: () => void;
+  size: SearchSize;
+  sx?: string;
+  value: string;
+}
+
+export const Search = ({
+  dropdownFilter,
+  onChange,
+  onClearText,
+  onSubmit,
+  placeholder,
+  size,
+  sx,
+  value,
+}: SearchProps) => {
+  const [expanded, setExpanded] = React.useState(false);
+  const [focused, setFocused] = React.useState(false);
+  const inputRef = React.useRef<HTMLInputElement>(null);
+
+  const isCollapsed = !expanded && size === 'collapsed';
+  const iconSize = isCollapsed || size === 'large' ? 24 : 16;
+
+  const handleExpand = () => {
+    setExpanded(true);
+    inputRef?.current?.focus();
+  };
+
+  const handleCollapse = () => {
+    setExpanded(false);
+    setFocused(false);
+    inputRef?.current?.blur();
+  };
+
+  const handleFocus = () => {
+    inputRef?.current?.focus();
+  };
+
+  return (
+    <Wrapper
+      $align="center"
+      $dir="row"
+      $isCollapsed={isCollapsed}
+      $isFocused={focused}
+      $borderRadius="large"
+      $size={size}
+      $sx={sx}
+      onClick={
+        dropdownFilter && size === 'large'
+          ? undefined
+          : isCollapsed
+          ? handleExpand
+          : handleFocus
+      }
+    >
+      <SearchIcon
+        color={size === 'large' ? 'blue-7' : 'grey-3'}
+        size={iconSize}
+        onClick={isCollapsed ? undefined : handleCollapse}
+        sx={
+          isCollapsed || size !== 'collapsed'
+            ? undefined
+            : `
+          &:hover {
+            cursor: pointer;
+            background-color: var(--color-grey-10);
+            border-radius: 50%;
+          }`
+        }
+      />
+      <Input
+        $isCollapsed={isCollapsed}
+        onBlur={() => setFocused(false)}
+        onChange={onChange}
+        onFocus={() => setFocused(true)}
+        onSubmit={onSubmit}
+        placeholder={placeholder}
+        ref={inputRef}
+        value={value}
+      />
+      {!isCollapsed && onClearText && (
+        <Close
+          size={16}
+          onClick={onClearText}
+          sx={`
+            ${value.length === 0 ? 'visibility: hidden;' : ''}
+            padding: 4px;
+            &:hover {
+              cursor: pointer;
+              background-color: var(--color-grey-10);
+              border-radius: 50%;
+            }`}
+        />
+      )}
+      {size === 'large' && dropdownFilter && (
+        <>
+          <Separator />
+          {dropdownFilter}
+        </>
+      )}
+    </Wrapper>
+  );
+};
+
+const Wrapper = styled.div<
+  BoxProps & {
+    $isCollapsed: boolean;
+    $isFocused: boolean;
+    $size: SearchSize;
+    $sx?: string;
+  }
+>`
+  ${Styles.flex}
+  ${Styles.padding}
+  display: flex;
+  background-color: var(--color-white);
+
+  & > * {
+    width: fit-content;
+    flex-shrink: 0;
+  }
+
+  ${({ $isCollapsed, $size }) =>
+    $isCollapsed
+      ? `
+    padding: 12px;
+    border-radius: 50%;
+    &:hover {
+      background-color: var(--color-grey-10);
+      cursor: pointer;
+    }`
+      : `
+    border-radius: 8px;
+    ${
+      $size === 'collapsed'
+        ? // collapsed
+          `
+      gap: 8px;
+      padding: 10px 16px;
+      border: 1px solid var(--color-grey-8);
+      
+      &:hover {
+        border: 1px solid var(--color-grey-6);
+      }`
+        : $size === 'small'
+        ? // small
+          `
+      gap: 12px;
+      padding: 10px 16px;
+      border: 1px solid var(--color-grey-8);
+      
+      &:hover {
+        border: 1px solid var(--color-grey-6);
+      }`
+        : $size === 'medium'
+        ? // medium
+          `
+      gap: 12px;
+      padding: 14px 16px;
+      border: 1px solid var(--color-grey-8);
+      
+      &:hover {
+        border: 1px solid var(--color-grey-6);
+      }`
+        : // large
+          `
+      gap: 16px;
+      padding: 16px;
+      box-shadow: var(--elevation-1);
+      
+      &:hover {
+        border: 1px solid var(--color-grey-6);
+      }`
+    }`}
+
+  ${({ $isFocused, $isCollapsed }) =>
+    $isFocused && !$isCollapsed
+      ? 'border: 1px solid var(--color-primary-blue-2) !important;'
+      : ''}
+
+  ${({ $sx }) => ($sx ? $sx : '')}
+`;
+
+const Input = styled.input.attrs(({ ref }) => ({
+  ref: ref,
+}))<{
+  $isCollapsed: boolean;
+}>`
+  flex: 1;
+  border-radius: 8px;
+  outline: none;
+  border: none;
+  font-size: 14px;
+  font-family: Inter;
+  line-height: 20px;
+  color: var(--color-grey-2);
+
+  ${({ $isCollapsed }) =>
+    $isCollapsed
+      ? 'width: 0px; height: 0px; padding: 0px !important; border: none !important;'
+      : ''}
+`;
+
+const Separator = styled.div`
+  width: 1px;
+  height: 20px;
+  background-color: var(--color-grey-9);
+`;

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