@soul-refiner/design-system 0.2.30 → 0.2.31

package/dist/components/surfaces/comment/comment.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 export interface CommentProps {
     content: string;
     createdDate: Date;
-    onCommentClick: () => void;
+    onComment: (comment: string) => void;
     onReact: (reaction: string) => void;
     reactions?: Record<string, number>;
     replies?: CommentProps[];
@@ -11,4 +11,4 @@ export interface CommentProps {
     userReactions?: string[];
     userProfileUri: string;
 }
-export declare const Comment: ({ content, createdDate, onCommentClick, onReact, reactions, replies, userImageUri, userName, userReactions, userProfileUri, }: CommentProps) => React.JSX.Element;
+export declare const Comment: ({ content, createdDate, onComment, onReact, reactions, replies, userImageUri, userName, userReactions, userProfileUri, }: CommentProps) => React.JSX.Element;

package/dist/components/surfaces/comment/comment.js

@@ -2,14 +2,25 @@
 import React from 'react';
 import styled from 'styled-components';
 import Picker from '@emoji-mart/react';
-import { Avatar, Box, P } from '../../';
+import { Avatar, Box, P, TextInput } from '../../';
 import emojis from '../../../emoji/emojis.json';
 import { ThumbsUp, Comment as CommentIcon } from '../../../icons';
 import { abbrTimeBeforeDate } from './helpers';
 import { Styles } from '../../../common';
-export const Comment = ({ content, createdDate, onCommentClick, onReact, reactions, replies, userImageUri, userName, userReactions, userProfileUri, }) => {
+export const Comment = ({ content, createdDate, onComment, onReact, reactions, replies, userImageUri, userName, userReactions, userProfileUri, }) => {
     const id = React.useId();
     const [showPicker, setShowPicker] = React.useState(false);
+    const [toggleShowComment, setToggleShowComment] = React.useState(false);
+    const [comment, setComment] = React.useState('');
+    const handleCommentChange = (event) => {
+        setComment(event.target.value);
+    };
+    const handleCommentSubmit = (event) => {
+        event.stopPropagation();
+        event.preventDefault();
+        onComment(comment);
+        setComment('');
+    };
     const handleReaction = ({ native }) => {
         onReact(native);
         setShowPicker(false);
@@ -19,7 +30,8 @@ export const Comment = ({ content, createdDate, onCommentClick, onReact, reactio
         setShowPicker((prev) => !prev);
     };
     const handlePickerBlur = () => setShowPicker(false);
-    const createdTime = abbrTimeBeforeDate(createdDate, { message: true });
+    const handleToggleShowComment = () => setToggleShowComment((prev) => !prev);
+    const createdTime = abbrTimeBeforeDate(createdDate);
     const reactionElements = reactions &&
         Object.entries(reactions)
             .sort((a, b) => (a[1] < b[1] ? 1 : -1))
@@ -40,13 +52,15 @@ export const Comment = ({ content, createdDate, onCommentClick, onReact, reactio
                     React.createElement(P, { sx: "letter-spacing: -0.176px;" }, content)),
                 React.createElement(Box, { "$align": "flex-start", "$dir": "row", "$display": "flex", "$gap": 16, sx: "margin: 8px 0px; position: relative;" },
                     React.createElement(ThumbsUp, { color: "primary-blue-2", onClick: handlePicker, size: 24, sx: "border-radius: 50%; cursor: pointer; flex-shrink: 0;" }),
-                    React.createElement(CommentIcon, { color: "primary-blue-2", onClick: onCommentClick, size: 24, sx: "border-radius: 50%; cursor: pointer; flex-shrink: 0;" }),
+                    React.createElement(CommentIcon, { color: "primary-blue-2", onClick: handleToggleShowComment, size: 24, sx: "border-radius: 50%; cursor: pointer; flex-shrink: 0;" }),
                     React.createElement(P, { "$color": "grey-7" }, "\u2022"),
                     React.createElement(P, { "$color": "grey-4", "$fontSize": 12, "$lineHeight": 24, sx: "flex-shrink: 0;" }, createdTime),
                     React.createElement(Box, { "$display": "flex", "$flow": "row wrap", "$gap": 6, sx: "max-width: calc(100% - 190px); margin-left: auto;" }, reactionElements),
                     showPicker && (React.createElement(PickerWrapper, null,
                         React.createElement(Picker, { data: emojis, onEmojiSelect: handleReaction, onClickOutside: handlePickerBlur, maxFrequentRows: 1, navPosition: "none", previewPosition: "none", perLine: 9, theme: "auto" }))))),
-            hasReplies && React.createElement(RepliesWrapper, null, replyElements))));
+            hasReplies && React.createElement(RepliesWrapper, null, replyElements),
+            toggleShowComment && (React.createElement(CommentWrapper, { onSubmit: handleCommentSubmit },
+                React.createElement(TextInput, { bg: "var(--color-grey-10)", placeholder: "Write a reply", onChange: handleCommentChange, value: comment }))))));
 };
 const Wrapper = styled.div `
   max-width: 700px;
@@ -125,3 +139,9 @@ const ReplyIndicator = styled.div `
   border-top: none;
   border-right: none;
 `;
+const CommentWrapper = styled.form `
+  label > div {
+    box-shadow: var(--elevation-6);
+    border-radius: 16px;
+  }
+`;

package/dist/components/surfaces/comment/helpers.d.ts

@@ -1,5 +1 @@
-type Options = {
-    message?: boolean;
-};
-export declare const abbrTimeBeforeDate: (date: Date, options?: Options) => string;
-export {};
+export declare const abbrTimeBeforeDate: (date: Date) => string;

package/dist/components/surfaces/comment/helpers.js

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

package/dist/components/surfaces/index.d.ts

@@ -8,3 +8,5 @@ export { Message } from './message';
 export type { MessageProps } from './message';
 export { Modal } from './modal';
 export type { ModalContentProps, ModalProps } from './modal';
+export { Post } from './post';
+export type { PostProps } from './post';

package/dist/components/surfaces/index.js

@@ -3,3 +3,4 @@ export { Comment } from './comment';
 export { Drawer } from './drawer';
 export { Message } from './message';
 export { Modal } from './modal';
+export { Post } from './post';

package/dist/components/surfaces/post/helpers.d.ts

@@ -0,0 +1 @@
+export declare const abbrTimeBeforeDate: (date: Date) => string;

package/dist/components/surfaces/post/helpers.js

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

package/dist/components/surfaces/post/index.d.ts

@@ -0,0 +1,2 @@
+export { Post } from './post';
+export type { PostProps } from './post';

package/dist/components/surfaces/post/index.js

@@ -0,0 +1 @@
+export { Post } from './post';

package/dist/components/surfaces/post/post.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+export interface PostProps extends React.PropsWithChildren {
+    author: string;
+    authorActive?: boolean;
+    authorHref: string;
+    authorImage: string;
+    content: string;
+    createdDate: string;
+    images?: string[];
+}
+export declare const Post: ({ author, authorActive, authorHref, authorImage, children, content, createdDate, images, }: PostProps) => React.JSX.Element;

package/dist/components/surfaces/post/post.js

@@ -0,0 +1,104 @@
+'use client';
+import React from 'react';
+import styled from 'styled-components';
+import { Avatar, H, P, TextInput } from '../../';
+import { abbrTimeBeforeDate } from './helpers';
+export const Post = ({ author, authorActive, authorHref, authorImage, children, content, createdDate, images, }) => {
+    const id = React.useId();
+    const [comment, setComment] = React.useState('');
+    const _comments = React.Children.toArray(children);
+    const handleCommentChange = (event) => {
+        setComment(event.target.value);
+    };
+    const subtitle = abbrTimeBeforeDate(new Date(createdDate));
+    return (React.createElement(Wrapper, null,
+        React.createElement(Header, null,
+            React.createElement(Avatar, { href: authorHref, image: authorImage, size: 64, status: authorActive ? 'online' : undefined, subtitle: React.createElement(P, { as: "span", sx: "vertical-align: top;", "$fontSize": 14, "$lineHeight": 20 }, subtitle), title: React.createElement(H, { as: "span", "$bold": true, "$fontSize": 18, "$lineHeight": 26 }, author), textPosition: "right" })),
+        React.createElement(P, { "$sx": "padding: 24px;" }, content),
+        !!images?.length && (React.createElement(ImagesWrapper, { "$numImages": images.length },
+            images.slice(0, 4).map((url, i) => (React.createElement(ImageWrapper, { key: `${id}${url.slice(0, 15)}${i}` },
+                React.createElement("img", { src: url, alt: "" })))),
+            images.length > 4 && (React.createElement(H, { as: "p", className: "more-than", "$color": "grey-10", "$fontSize": 28, "$lineHeight": 36, "$semiBold": true },
+                "+",
+                images.length - 4)))),
+        !!_comments.length && React.createElement(CommentWrapper, null, children),
+        React.createElement(CommentInputWrapper, null,
+            React.createElement(Avatar, { href: authorHref, image: authorImage, size: 40 }),
+            React.createElement(TextInput, { bg: "var(--color-grey-10)", placeholder: "Write a comment", onChange: handleCommentChange, value: comment }))));
+};
+const Wrapper = styled.div `
+  max-width: 700px;
+  width: 100%;
+  background-color: var(--color-white);
+  border-radius: 24px;
+  box-shadow: var(--elevation-7);
+
+  label > div {
+    box-shadow: var(--elevation-6);
+    border-radius: 16px;
+  }
+`;
+const Header = styled.div `
+  padding: 16px 24px;
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  border-bottom: 1px solid var(--color-grey-9);
+`;
+const ImagesWrapper = styled.div `
+  position: relative;
+  display: flex;
+  gap: 8px;
+  flex-flow: row wrap;
+  justify-content: space-between;
+
+  @media screen and (max-width: 532px) {
+    overflow-y: auto;
+  }
+
+  .more-than {
+    position: absolute;
+    bottom: 94px;
+    right: 154px;
+    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
+  }
+
+  ${({ $numImages }) => $numImages > 1
+    ? `
+    div {
+      min-width: calc(50% - 4px);
+      max-width: calc(50% - 4px);
+
+      flex:1;
+      img {
+        object-fit: cover;
+        width: 100%;
+        height: 100%;
+      }
+    }`
+    : `
+    div > img {
+      object-fit: contain;
+      width: 100%;
+      height: 100%;
+    }
+    `}
+`;
+const ImageWrapper = styled.div `
+  position: relative;
+  aspect-ratio: 700 / 427;
+  flex: 1;
+  min-width: min(227px, 80vw);
+`;
+const CommentWrapper = styled.div `
+  padding: 24px;
+  display: flex;
+  flex-flow: column nowrap;
+  gap: 24px;
+`;
+const CommentInputWrapper = styled.div `
+  padding: 24px;
+  display: flex;
+  gap: 12px;
+  align-items: center;
+`;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@soul-refiner/design-system",
-  "version": "0.2.30",
+  "version": "0.2.31",
   "main": "dist/index.js",
   "license": "MIT",
   "publishConfig": {