@soul-refiner/design-system 2.5.0-alpha.3 → 2.5.0-alpha.5

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

@@ -0,0 +1,194 @@
+'use client';
+import React from 'react';
+import { styled } from 'styled-components';
+import Picker from '@emoji-mart/react';
+import { Avatar } from '../../../components/iconography/avatar/avatar';
+import { Box } from '../../../components/atoms/box/box';
+import { P } from '../../../components/atoms/typography/paragraph';
+import { TextInput } from '../../../components/input';
+import { Button } from '../../../components/actions/button/button';
+import { Portal } from '../../../components/surfaces/portal';
+import emojis from '../../../emoji/emojis.json';
+import { Styles } from '../../../common/styles';
+import { Emoticon } from '../../../icons/basic/emoticon_add';
+import { Comment as CommentIcon } from '../../../icons/message/comment';
+import { abbrTimeBeforeDate } from './helpers';
+const MAX_REACTIONS_SHOWN = 5;
+export const Comment = ({ avatarTooltipContent, avatarTooltipSx, content, createdDate, hasMoreReplies, id, onComment, onReact, onShowReplies, dropdown, reactionModal, reactions, replies, userImageUri, userName, userReactions, userProfileUri, }) => {
+    const [showPicker, setShowPicker] = React.useState(false);
+    const [pickerTriggerLoc, setPickerTriggerLoc] = React.useState({
+        x: 0,
+        y: 0,
+    });
+    const [pickerOrientation, setPickerOrientation] = React.useState('up');
+    const [toggleShowCommentInput, setShowCommentInput] = React.useState(false);
+    const [toggleShowReplies, setShowReplies] = React.useState(false);
+    const [comment, setComment] = React.useState('');
+    const _replies = React.Children.toArray(replies);
+    const handleCommentChange = (event) => {
+        setComment(event.target.value);
+    };
+    const handleCommentSubmit = (event) => {
+        event.stopPropagation();
+        event.preventDefault();
+        onComment(comment);
+        setComment('');
+    };
+    const handleReaction = ({ native }) => {
+        onReact(native);
+        setShowPicker(false);
+    };
+    const handlePicker = (event) => {
+        event.stopPropagation();
+        setShowPicker((prev) => !prev);
+        setPickerTriggerLoc({ y: event.clientY, x: event.clientX });
+        setPickerOrientation(event.clientY > 400 ? 'up' : 'down');
+    };
+    const handlePickerBlur = () => setShowPicker(false);
+    const handleToggleCommentInput = () => setShowCommentInput((prev) => !prev);
+    const handleToggleReplies = () => {
+        onShowReplies && onShowReplies();
+        setShowReplies(true);
+    };
+    const createdTime = abbrTimeBeforeDate(createdDate);
+    const reactionElements = reactions &&
+        Object.entries(reactions)
+            .slice(0, MAX_REACTIONS_SHOWN)
+            .sort((a, b) => (a[1] < b[1] ? 1 : -1))
+            .map((reaction) => (React.createElement(Reaction, { key: id + reaction[0], onClick: () => onReact(reaction[0]), "$align": "center", "$dir": "row", "$gap": 5, "$userSelected": userReactions?.includes(reaction[0]) },
+            reaction[0],
+            React.createElement(P, { "$bold": true, "$fontSize": 10, "$lineHeight": 14 }, reaction[1]))));
+    const hasReplies = !!_replies?.length && _replies.length > 0;
+    const replyElements = hasReplies &&
+        _replies.map((reply, index) => {
+            if (!React.isValidElement(reply))
+                return null;
+            const key = reply.props?.id;
+            const hasLine = index !== _replies.length - 1 || hasMoreReplies;
+            return (React.createElement(ReplyWrapper, { "$hasLine": hasLine, key: key },
+                reply,
+                React.createElement(ReplyIndicator, null)));
+        });
+    return (React.createElement(Wrapper, { id: id },
+        React.createElement(Avatar, { href: userProfileUri, image: userImageUri, size: 32, tooltipContent: avatarTooltipContent, tooltipSx: avatarTooltipSx }),
+        React.createElement(Box, { "$flex": 1, "$dir": "column" },
+            React.createElement(ContentWrapper, { "$hasReplies": hasReplies || !!hasMoreReplies },
+                React.createElement(CommentBox, null,
+                    React.createElement(Box, { "$dir": "row", "$justify": "space-between", "$align": "center" },
+                        React.createElement(P, { "$bold": true, "$color": "grey-2", "$fontSize": 14, "$lineHeight": 20 }, userName),
+                        dropdown),
+                    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(Emoticon, { color: "primary-blue-2", onClick: handlePicker, size: 24, sx: " cursor: pointer; flex-shrink: 0;" }),
+                    React.createElement(CommentIcon, { color: "primary-blue-2", onClick: handleToggleCommentInput, 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,
+                        reactionModal),
+                    showPicker && (React.createElement(Portal, null,
+                        React.createElement(PickerWrapper, { "$pickerOrientation": pickerOrientation, "$top": pickerTriggerLoc.y, "$left": pickerTriggerLoc.x },
+                            React.createElement(Picker, { data: emojis, onEmojiSelect: handleReaction, onClickOutside: handlePickerBlur, maxFrequentRows: 1, navPosition: "none", previewPosition: "none", perLine: 9, theme: "auto" })))))),
+            hasReplies && toggleShowReplies && (React.createElement(RepliesWrapper, null, replyElements)),
+            !toggleShowReplies && !hasMoreReplies && hasReplies && (React.createElement(RepliesWrapper, null,
+                React.createElement(ReplyWrapper, { "$hasLine": false },
+                    React.createElement(Button, { onClick: handleToggleReplies, size: "small", sx: "color: var(--color-grey-3);", type: "text" }, "show replies"),
+                    React.createElement(ReplyIndicator, null)))),
+            hasMoreReplies && (React.createElement(RepliesWrapper, null,
+                React.createElement(ReplyWrapper, { "$hasLine": false },
+                    React.createElement(Button, { onClick: handleToggleReplies, size: "small", sx: "color: var(--color-grey-3);", type: "text" }, "show more replies"),
+                    React.createElement(ReplyIndicator, null)))),
+            toggleShowCommentInput && (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;
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  gap: 12px;
+  justify-content: space-between;
+  position: relative;
+`;
+const ContentWrapper = styled.div `
+  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: 1000;
+
+  ${({ $pickerOrientation }) => $pickerOrientation === 'up' ? 'transform: translateY(-345px);' : ''}
+  top: ${({ $top }) => $top}px;
+  left: ${({ $left }) => $left}px;
+`;
+const Reaction = styled.div `
+  ${Styles.flex}
+  display: flex;
+  padding: 2px 6px;
+  border-radius: 12px;
+  cursor: pointer;
+  ${({ $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 `
+  position: relative;
+  ${({ $hasLine }) => $hasLine
+    ? `
+    &::before {
+      content: "";
+      position: absolute;
+      left: -28px;
+      height: 100%;
+      border-left: 2px solid var(--color-grey-9);
+    }`
+    : ''}
+`;
+const ReplyIndicator = styled.div `
+  position: absolute;
+  top: -12px;
+  left: -28px;
+  width: 28px;
+  height: 32px;
+  border-bottom-left-radius: 16px;
+  border: 2px solid var(--color-grey-9);
+  border-top: none;
+  border-right: none;
+`;
+const CommentWrapper = styled.form `
+  label {
+    margin-bottom: 16px;
+  }
+  label > div {
+    box-shadow: var(--elevation-6);
+    border-radius: 16px;
+  }
+`;

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

@@ -0,0 +1,80 @@
+import React from 'react';
+import { Comment } from './comment';
+import { Button, Dropdown } from 'components/actions';
+import { EllipsisHorizontal } from 'icons';
+const meta = {
+    title: 'Surfaces/Comment',
+};
+const Story = (args) => {
+    const [reactions, setReactions] = React.useState({
+        '✋': 12,
+        '👋': 1,
+        '💯': 501,
+        '😀': 6,
+        '😁': 1,
+        '😃': 8,
+        '😊': 2,
+        '😎': 7,
+        '🤚': 2,
+        '🤣': 24,
+        '🫲': 15,
+        '🫳': 1,
+    });
+    const [userReactions, setUserReactions] = React.useState(['💯']);
+    const handleReaction = (reaction) => {
+        setReactions((prev) => ({
+            ...prev,
+            [reaction]: prev?.[reaction] ? prev[reaction] + 1 : 1,
+        }));
+        setUserReactions((prev) => {
+            if (prev.includes(reaction)) {
+                return prev.filter((item) => item !== reaction);
+            }
+            else {
+                return [...prev, reaction];
+            }
+        });
+    };
+    return (React.createElement(Comment, { onComment: () => undefined, onReact: handleReaction, hasMoreReplies: true, dropdown: React.createElement(Dropdown, { trigger: React.createElement(Button, { icon: React.createElement(EllipsisHorizontal, null), type: "special" }) }), replies: [
+            React.createElement(Comment, { key: 123124, content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tempus, leo, id mi proin aenean gravida. Suspendisse auctor rutrum porttitor viverra convallis neque. Ipsum, aliquet sed laoreet tincidunt.", createdDate: new Date(new Date('16 June 2023').getTime() - 500024), onComment: () => undefined, onReact: () => undefined, reactions: {
+                    '✋': 12,
+                    '👋': 1,
+                    '💯': 501,
+                    '😀': 6,
+                    '😁': 1,
+                    '😃': 8,
+                    '😊': 2,
+                    '😎': 7,
+                    '🤚': 2,
+                    '🤣': 24,
+                    '🫲': 15,
+                    '🫳': 1,
+                }, userName: "Bohdan Popkov", userImageUri: "https://f005.backblazeb2.com/file/sr-platform/avatar.jpg", userProfileUri: "#" }),
+            React.createElement(Comment, { key: 123125, content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tempus, leo, id mi proin aenean gravida. Suspendisse auctor rutrum porttitor viverra convallis neque. Ipsum, aliquet sed laoreet tincidunt.", createdDate: new Date(new Date('16 June 2023').getTime() - 500024), onComment: () => undefined, onReact: () => undefined, reactions: {
+                    '✋': 12,
+                    '👋': 1,
+                    '💯': 501,
+                    '😀': 6,
+                    '😁': 1,
+                    '😃': 8,
+                    '😊': 2,
+                    '😎': 7,
+                    '🤚': 2,
+                    '🤣': 24,
+                    '🫲': 15,
+                    '🫳': 1,
+                }, replies: [
+                    React.createElement(Comment, { content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tempus, leo, id mi proin aenean gravida. Suspendisse auctor rutrum porttitor viverra convallis neque. Ipsum, aliquet sed laoreet tincidunt.", createdDate: new Date(new Date('16 June 2023').getTime() - 500024), onComment: () => undefined, onReact: () => undefined, userName: "Bohdan Popkov", userImageUri: "https://f005.backblazeb2.com/file/sr-platform/avatar.jpg", userProfileUri: "#" }),
+                ], userName: "Bohdan Popkov", userImageUri: "https://f005.backblazeb2.com/file/sr-platform/avatar.jpg", userProfileUri: "#" }),
+        ], reactions: reactions, userReactions: userReactions, ...args }));
+};
+export const Default = Story.bind({});
+Default.argTypes = {};
+Default.args = {
+    content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tempus, leo, id mi proin aenean gravida. Suspendisse auctor rutrum porttitor viverra convallis neque. Ipsum, aliquet sed laoreet tincidunt.',
+    createdDate: new Date('June 6, 2023'),
+    userName: 'Bohdan Popkov',
+    userImageUri: 'https://f005.backblazeb2.com/file/sr-platform/avatar.jpg',
+    userProfileUri: '#',
+};
+export default meta;

package/dist/src/components/surfaces/comment/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 'Now';
+    }
+    else if (diff < 3600000) {
+        // under one hour
+        const minutes = Math.floor(diff / 60000);
+        return `${minutes}m`;
+    }
+    else if (diff < 86400000) {
+        // under one day
+        const hours = Math.floor(diff / 3600000);
+        return `${hours}h`;
+    }
+    else if (diff < 604800000) {
+        // under one week
+        const days = Math.floor(diff / 86400000);
+        return `${days}d`;
+    }
+    else {
+        return `${Math.floor(diff / 604800000)}w`;
+    }
+};

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

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

package/dist/src/components/surfaces/discuss_post/discuss_post.js

@@ -0,0 +1,209 @@
+'use client';
+import React from 'react';
+import Link from 'next/link';
+import styled from 'styled-components';
+import { Styles } from '../../../common/styles';
+import { Box } from '../../../components/atoms/box/box';
+import { HideButRender } from '../../../components/atoms/hide/hide';
+import { TimeAgo } from '../../../components/atoms/time_ago';
+import { P } from '../../../components/atoms/typography/paragraph';
+import { Avatar } from '../../../components/iconography/avatar/avatar';
+import { isSameDay } from './helpers';
+const MAX_REACTIONS_SHOWN = 5;
+export const DiscussPost = ({ avatarSx, content, createdDate, editActions, editing, firstNewPost, handleContentChange, id, onReact, popupActions, popupSx, reactions, reactionModal, replyContent, replyUserHref, replyUserImageUri, replyUserName, sx, userHref, userImageUri, userName, userReactions, }) => {
+    const ref = React.useRef(null);
+    const [change, setChange] = React.useState(false);
+    React.useEffect(() => {
+        if (ref.current)
+            ref.current.value = content;
+    }, [content]);
+    React.useEffect(() => {
+        if (ref?.current && ref.current.value !== content && handleContentChange) {
+            handleContentChange(ref.current.value);
+        }
+    }, [change]);
+    React.useEffect(() => {
+        if (ref.current) {
+            ref.current.style.height = '48px';
+            const scrollHeight = ref.current.scrollHeight;
+            ref.current.style.height = scrollHeight + 'px';
+        }
+    }, [ref.current, change, content]);
+    const date = React.useMemo(() => isSameDay(new Date(), new Date(createdDate)) ? (React.createElement(TimeAgo, { date: createdDate })) : (new Intl.DateTimeFormat('en-US', {
+        minute: 'numeric',
+        hour: 'numeric',
+        day: 'numeric',
+        month: 'long',
+        year: 'numeric',
+    }).format(createdDate)), [createdDate]);
+    const reactionElements = React.useMemo(() => {
+        if (!reactions)
+            return undefined;
+        else {
+            let avail = Object.entries(reactions);
+            if (reactionModal) {
+                avail = avail.slice(0, MAX_REACTIONS_SHOWN);
+            }
+            return avail
+                .sort((a, b) => (a[1] < b[1] ? 1 : -1))
+                .map((reaction) => (React.createElement(Reaction, { key: id + reaction[0], onClick: () => onReact(reaction[0]), "$align": "center", "$dir": "row", "$gap": 5, "$userSelected": userReactions?.includes(reaction[0]) },
+                reaction[0],
+                React.createElement(P, { "$bold": true, "$fontSize": 10, "$lineHeight": 14 }, reaction[1]))));
+        }
+    }, [reactions, userReactions]);
+    return (React.createElement(Wrapper, { "$editing": editing, "$firstNewPost": firstNewPost, "$sx": sx, id: id },
+        React.createElement(HideButRender, { show: !editing && !!replyContent },
+            React.createElement(Box, { "$align": "center", "$gap": 4, sx: "margin-left: 56px;" },
+                React.createElement(ReplyMarker, null),
+                React.createElement(Avatar, { as: Link, href: replyUserHref, image: replyUserImageUri, size: 16, sx: "img { cursor: pointer;}" }),
+                React.createElement(P, { as: Link, href: replyUserHref, "$color": "primary-blue-2", "$fontSize": 12, "$lineHeight": 16, sx: "flex-shrink: 0; text-decoration: none;" },
+                    "@",
+                    replyUserName),
+                React.createElement(P, { "$fontSize": 12, "$lineHeight": 16, "$textClampLines": 1 }, replyContent))),
+        React.createElement(HideButRender, { show: editing },
+            React.createElement(Box, { "$gap": 16, "$align": "flex-start", className: "editing" },
+                React.createElement(Avatar, { as: Link, href: userHref, image: userImageUri, size: 40, sx: avatarSx }),
+                React.createElement(Box, { "$gap": 10, sx: `
+            flex: 1; 
+            background-color: var(--color-grey-10);
+            border-radius: 8px;
+            @media (max-width: 768px) {
+              flex-direction: column;
+              min-height: calc(${ref?.current?.style?.height || '360px'} + 24px);
+            }
+            ` },
+                    React.createElement(TextAreaElement, { onChange: () => setChange((prev) => !prev), ref: ref }),
+                    React.createElement(EditActionsWrapper, null, editActions)))),
+        React.createElement(HideButRender, { show: !editing },
+            React.createElement(Box, { "$gap": 16, "$align": "flex-start" },
+                React.createElement(PopupActionsWrapper, { "$sx": popupSx, className: "popup-actions" }, popupActions),
+                React.createElement(Avatar, { as: Link, href: userHref, image: userImageUri, size: 40, sx: `img { cursor: pointer; }; ${avatarSx}` }),
+                React.createElement(Box, { "$gap": 4, "$dir": "column", sx: "flex: 1;" },
+                    React.createElement(Box, { "$align": "center", "$gap": 8, sx: `height: 20px;
+              @media screen and (max-width: 400px) {
+                flex-direction: column;
+                align-items: flex-start;
+                height: 40px;
+                gap: 0px;
+              }` },
+                        React.createElement(P, { "$bold": true, "$color": !!replyContent ? 'special-orange-1' : 'primary-blue-2', "$fontSize": 14, "$lineHeight": 20 }, userName),
+                        React.createElement(P, { "$color": "grey-4", "$fontSize": 10, "$lineHeight": 14 }, date)),
+                    React.createElement(P, { "$fontSize": 14, "$lineHeight": 20, sx: "white-space: pre-line;" }, content),
+                    React.createElement(Box, { "$display": "flex", "$flow": "row wrap", "$gap": 6, sx: "margin-left: auto;" },
+                        reactionElements,
+                        reactionModal))))));
+};
+const Wrapper = styled.div `
+  position: relative;
+  padding: 12px 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  .popup-actions {
+    display: none;
+  }
+  ${({ $firstNewPost }) => $firstNewPost
+    ? `
+    &:before {
+      content: "";
+      position: absolute;
+      left: 16px;
+      top: 0px;
+      height: 1px;
+      width: calc(100% - 32px);
+      border-top: 1px solid var(--color-red-5);
+    }
+    &:after {
+      position: absolute;
+      top: -8px;
+      right: 16px;
+      content: 'New';
+      padding: 0px 4px;
+      color: var(--color-white);
+      font-family: var(--font-inter);
+      font-size: 12px;
+      font-weight: 500;
+      line-height: 16px;
+      background-color: var(--color-red-5);
+      border-radius: 18px;
+    }`
+    : ''}
+  ${({ $editing }) => $editing
+    ? `
+      background-color: var(--color-grey-9);`
+    : `
+    &:hover {
+      background-color: var(--color-grey-10);
+      .popup-actions {
+        display: flex;
+      }
+    }`}
+  ${({ $sx }) => ($sx ? $sx : '')}
+`;
+const TextAreaElement = styled.textarea `
+  min-width: ${({ $minHeight }) => ($minHeight ? $minHeight - 24 + 'px;' : '')};
+  width: 100%;
+  padding: 4px 16px;
+  flex: 1;
+  font-family: var(--font-inter);
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 20px;
+  color: var(--color-grey-3);
+  border: none;
+  outline: none;
+  border-radius: 8px;
+  background-color: transparent;
+  resize: none;
+
+  &:hover {
+    border-color: var(--color-grey-8);
+  }
+
+  &:focus-within {
+    border-color: var(--color-primary-blue-2);
+  }
+
+  &::-webkit-scrollbar {
+    width: 0px;
+  }
+`;
+const ReplyMarker = styled.div `
+  height: 12px;
+  width: 24px;
+  margin-top: 4px;
+  flex-shrink: 0;
+  border-left: 2px solid var(--color-grey-9);
+  border-top: 2px solid var(--color-grey-9);
+  border-radius: 6px 0px 0px 0px;
+`;
+const Reaction = styled.div `
+  ${Styles.flex}
+  display: flex;
+  padding: 2px 6px;
+  border-radius: 12px;
+  cursor: pointer;
+  ${({ $userSelected }) => $userSelected
+    ? `
+    background-color: var(--color-primary-blue-4);
+    border: 1px solid var(--color-primary-blue-3);
+    `
+    : ''}
+`;
+const PopupActionsWrapper = styled.div `
+  position: absolute;
+  top: -16px;
+  right: 16px;
+  display: flex;
+  align-items: center;
+  border-radius: 4px;
+  background-color: var(--color-white);
+  border: 1px solid var(--color-grey-9);
+  box-shadow: var(--elevation-1);
+  ${({ $sx }) => ($sx ? $sx : '')}
+`;
+const EditActionsWrapper = styled.div `
+  display: flex;
+  align-items: center;
+  gap: 4px;
+`;

package/dist/src/components/surfaces/discuss_post/discuss_post.stories.d.ts

@@ -0,0 +1,6 @@
+import { StoryFn, Meta } from '@storybook/react';
+import { DiscussPostProps } from './discuss_post';
+declare const meta: Meta;
+declare const Story: StoryFn<Omit<DiscussPostProps, 'content'>>;
+export declare const Default: typeof Story;
+export default meta;

package/dist/src/components/surfaces/discuss_post/discuss_post.stories.js

@@ -0,0 +1,62 @@
+import React from 'react';
+import { useState } from '@storybook/preview-api';
+import { DiscussPost } from './discuss_post';
+import { Button } from '../../../components/actions/button/button';
+import { Reply } from '../../../icons/arrow/reply';
+import { EllipsisHorizontal } from '../../../icons/basic/ellipsis_horizontal';
+import { Pencil } from '../../../icons/basic/pencil';
+import { EmojiAdd } from '../../../icons/emoji/emoji_add';
+const meta = {
+    title: 'Surfaces/DiscussPost',
+    parameters: {
+        layout: 'padded',
+    },
+};
+const DEFAULT_CONTENT = `I'm fascinated by the power of data to solve complex problems and reveal hidden insights. I combine my expertise in statistics, machine learning, and programming to build innovative solutions across various industries. 
+In my free time, I enjoy volunteering with organizations that leverage data science for social good, like predicting disease outbreaks and optimizing disaster relief efforts.`;
+const Story = (args) => {
+    const [content, setContent] = useState(DEFAULT_CONTENT);
+    return (React.createElement(DiscussPost, { content: content, handleContentChange: setContent, ...args }));
+};
+export const Default = Story.bind({});
+Default.args = {
+    avatarSx: '',
+    createdDate: new Date(new Date().getTime() - 360000000),
+    editActions: (React.createElement(React.Fragment, null,
+        React.createElement(Button, { icon: React.createElement(EmojiAdd, { size: 24 }), sx: "box-shadow: none; background-color: var(--color-grey-10);", type: "raised" }),
+        React.createElement(Button, { size: "small", type: "outlined" }, "Cancel"),
+        React.createElement(Button, { size: "small", sx: "margin-right: 4px;" }, "Save"))),
+    editing: false,
+    firstNewPost: false,
+    id: '7',
+    popupActions: (React.createElement(React.Fragment, null,
+        React.createElement(Button, { icon: React.createElement(EmojiAdd, { size: 20 }), size: "small", sx: "border-radius: 4px;", type: "raised" }),
+        React.createElement(Button, { icon: React.createElement(Reply, { size: 20 }), size: "small", sx: "border-radius: 4px;", type: "raised" }),
+        React.createElement(Button, { icon: React.createElement(Pencil, { size: 20 }), size: "small", sx: "border-radius: 4px;", type: "raised" }),
+        React.createElement(Button, { icon: React.createElement(EllipsisHorizontal, { size: 20 }), size: "small", sx: "border-radius: 4px;", type: "raised" }))),
+    reactions: {
+        '✋': 12,
+        '👋': 1,
+        '💯': 501,
+        '😀': 6,
+        '😁': 1,
+        '😃': 8,
+        '😊': 2,
+        '😎': 7,
+        '🤚': 2,
+        '🤣': 24,
+        '🫲': 15,
+        '🫳': 1,
+    },
+    replyContent: `I'm fascinated by the power of data to solve complex problems and reveal hidden insights. I combine my expertise in statistics, machine learning, and programming to build innovative solutions across various industries. 
+  In my free time, I enjoy volunteering with organizations that leverage data science for social good, like predicting disease outbreaks and optimizing disaster relief efforts.`,
+    replyUserHref: '#',
+    replyUserImageUri: 'https://f005.backblazeb2.com/file/sr-platform/avatar.jpg',
+    replyUserName: 'Ben Merritt',
+    sx: 'margin-top: 150px;',
+    userHref: '#',
+    userImageUri: 'https://f005.backblazeb2.com/file/sr-platform/avatar.jpg',
+    userName: 'Ben Merritt',
+    userReactions: ['💯'],
+};
+export default meta;

package/dist/src/components/surfaces/discuss_post/helpers.js

@@ -0,0 +1,11 @@
+export const isSameDay = (date1, date2) => {
+    sanitizeTime(date1);
+    sanitizeTime(date2);
+    return date1.getTime() === date2.getTime();
+};
+const sanitizeTime = (date) => {
+    date.setHours(0);
+    date.setMinutes(0);
+    date.setSeconds(0);
+    date.setMilliseconds(0);
+};

package/dist/src/components/surfaces/discuss_post/index.js

@@ -0,0 +1 @@
+export { DiscussPost } from './discuss_post';