@soul-refiner/design-system 1.7.22 → 2.0.0-alpha.0

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

@@ -1,188 +0,0 @@
-'use client';
-import React from 'react';
-import styled from 'styled-components';
-import Picker from '@emoji-mart/react';
-import { Avatar, Box, P, TextInput } from '../../';
-import { Button } from '../../actions/button';
-import { Portal } from '../portal';
-import emojis from '../../../emoji/emojis.json';
-import { Styles } from '../../../common';
-import { ThumbsUp, Comment as CommentIcon } from '../../../icons';
-import { abbrTimeBeforeDate } from './helpers';
-const MAX_REACTIONS_SHOWN = 5;
-export const Comment = ({ avatarTooltipContent, avatarTooltipSx, content, createdDate, hasMoreReplies, id, onComment, onReact, onShowReplies, 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(P, { "$bold": true, "$color": "grey-2", "$fontSize": 14, "$lineHeight": 20 }, userName),
-                    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: 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/components/surfaces/comment/helpers.js

@@ -1,26 +0,0 @@
-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/components/surfaces/comment/index.js

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

package/dist/components/surfaces/drawer/drawer.js

@@ -1,130 +0,0 @@
-'use client';
-import React from 'react';
-import styled from 'styled-components';
-import { callAll } from '../../../utils';
-const DrawerContext = React.createContext([false, (() => undefined)]);
-export const Drawer = ({ children, controlledOpen, onOpenChange, }) => {
-    const [open, setOpen] = React.useState(controlledOpen || false);
-    React.useEffect(() => {
-        if (controlledOpen !== undefined) {
-            setOpen(controlledOpen);
-        }
-    }, [controlledOpen]);
-    const _children = React.Children.toArray(children);
-    const triggers = [];
-    const content = [];
-    let footer = null;
-    let header = null;
-    for (const child of _children) {
-        if (React.isValidElement(child)) {
-            const type = child.type?.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 (React.createElement(DrawerContext.Provider, { value: [open, setOpen] },
-        triggers,
-        open && (React.createElement(Background, { onClick: callAll(() => setOpen(false), () => onOpenChange && onOpenChange()) })),
-        React.createElement(Component, { "$open": open },
-            header && React.createElement(HeaderWrapper, null, header),
-            React.createElement(ContentWrapper, null, content),
-            footer && React.createElement(FooterWrapper, null, footer))));
-};
-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 `
-  position: fixed;
-  top: 0;
-  right: 0;
-  height: 100vh;
-  max-width: 880px;
-  width: 100%;
-  z-index: 150;
-  display: flex;
-  flex-flow: column nowrap;
-  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;
-  position: sticky;
-  top: 0;
-  border-radius: 16px 0px 0px 0px;
-`;
-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;
-  flex: 1;
-
-  &::-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;
-  position: sticky;
-  bottom: 0;
-  border-radius: 0px 0px 0px 16px;
-`;
-const DrawerTrigger = ({ children: child, }) => {
-    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.createElement("div", null, children));
-DrawerHeader.displayName = 'Drawer.Header';
-Drawer.Header = DrawerHeader;
-const DrawerContent = ({ children }) => (React.createElement("div", null, children));
-DrawerContent.displayName = 'Drawer.Content';
-Drawer.Content = DrawerContent;
-const DrawerFooter = ({ children }) => (React.createElement("div", null, children));
-DrawerFooter.displayName = 'Drawer.Footer';
-Drawer.Footer = DrawerFooter;

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

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

package/dist/components/surfaces/index.js

@@ -1,9 +0,0 @@
-export { Accordion } from './accordion';
-export { CardCarousel } from './carousel';
-export { Comment } from './comment';
-export { Drawer } from './drawer';
-export { Message } from './message';
-export { Modal } from './modal';
-export { Portal } from './portal';
-export { Post } from './post';
-export { CalendarDate } from './calendar_date';

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

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

package/dist/components/surfaces/message/message.js

@@ -1,44 +0,0 @@
-'use client';
-import React from 'react';
-import styled from 'styled-components';
-import { Avatar, Box, P, H } from '../../';
-export const Message = ({ messages, userId }) => {
-    const id = React.useId();
-    return (React.createElement(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.createElement(React.Fragment, { key: id + index },
-                isFirstMessageBySender && (React.createElement(P, { "$color": "grey-4", "$fontSize": 12, "$lineHeight": 16, sx: "margin-top: 40px; margin-left: auto;" },
-                    createdDate.toLocaleDateString(),
-                    ' ',
-                    createdDate.toLocaleTimeString())),
-                React.createElement(Wrapper, { "$isSelf": isSelf }, content)));
-        }
-        return (React.createElement(React.Fragment, { key: id + index },
-            isFirstMessageBySender && (React.createElement(Avatar, { image: senderAvatarURI, href: senderHref, subtitle: React.createElement(P, { as: "span", "$color": "blue-2", "$fontSize": 12, "$lineHeight": 16, sx: "vertical-align: top;" }, createdDate.toLocaleTimeString()), size: 56, sx: "margin-top: 40px;", textPosition: "right", title: React.createElement(H, { as: "span", "$color": "blue-2", "$fontSize": 18, "$lineHeight": 26, "$mediumBold": true }, senderName) })),
-            React.createElement(Wrapper, { "$isSelf": isSelf }, content)));
-    })));
-};
-const Wrapper = styled.div `
-  max-width: 552px;
-  padding: 16px;
-  border-radius: 16px;
-  font-family: var(--font-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/dist/components/surfaces/modal/index.js

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

package/dist/components/surfaces/modal/modal.js

@@ -1,127 +0,0 @@
-'use client';
-import React from 'react';
-import styled from 'styled-components';
-import { Button } from '../../';
-import { Close } from '../../../icons';
-import { callAll } from '../../../utils';
-const ModalContext = React.createContext([false, (() => undefined)]);
-const Modal = ({ alwaysRender = true, controlledOpen, onChange, children, ...props }) => {
-    const [open, setOpen] = React.useState(controlledOpen || false);
-    React.useEffect(() => {
-        if (controlledOpen !== undefined) {
-            setOpen(controlledOpen);
-        }
-    }, [controlledOpen]);
-    React.useEffect(() => {
-        onChange && onChange(open);
-    }, [open]);
-    let trigger;
-    const rest = [];
-    React.Children.forEach(children, (child) => {
-        const type = React.isValidElement(child) && child.type?.displayName;
-        if (type && type.toLowerCase().includes('trigger')) {
-            trigger = child;
-        }
-        else {
-            rest.push(child);
-        }
-    });
-    return (React.createElement(ModalContext.Provider, { value: [open, setOpen], ...props },
-        trigger,
-        (open || alwaysRender) && rest));
-};
-const ModalTrigger = ({ children: child, }) => {
-    const [, setOpen] = React.useContext(ModalContext);
-    return (child &&
-        React.cloneElement(child, {
-            onClick: callAll(() => setOpen(true), child.props.onClick, (event) => {
-                event?.stopPropagation();
-                event?.preventDefault();
-            }),
-        }));
-};
-ModalTrigger.displayName = 'Modal.Trigger';
-Modal.Trigger = ModalTrigger;
-const ModalDismiss = ({ children: child, setClosed, }) => {
-    const [, setOpen] = React.useContext(ModalContext);
-    return (child &&
-        React.cloneElement(child, {
-            onClick: callAll(() => setOpen(false), child.props.onClick, (event) => {
-                setClosed && setClosed();
-                event?.stopPropagation();
-                event?.preventDefault();
-            }),
-        }));
-};
-ModalDismiss.displayName = 'Modal.Dismiss';
-Modal.Dismiss = ModalDismiss;
-const ModalContent = ({ backgroundDark = true, children, footer, header, setClosed, sx, ...props }) => {
-    const [open, setOpen] = React.useContext(ModalContext);
-    const handleOutsideClick = (event) => {
-        if (event.currentTarget != event.target)
-            return;
-        event.preventDefault();
-        event.stopPropagation();
-        event.preventDefault();
-        setClosed ? setClosed() : setOpen(false);
-    };
-    return (React.createElement(Wrapper, { "$backgroundDark": backgroundDark, "$open": open, onClick: handleOutsideClick },
-        React.createElement(Content, { ...props, "$sx": sx },
-            header && (React.createElement("div", { className: "header" },
-                React.createElement("div", null, header),
-                React.createElement(Modal.Dismiss, { setClosed: setClosed },
-                    React.createElement(Button, { icon: React.createElement(Close, null), type: "special" })))),
-            children,
-            footer && React.createElement("div", { className: "footer" }, footer))));
-};
-ModalContent.displayName = 'Modal.Content';
-Modal.Content = ModalContent;
-export { Modal };
-const Wrapper = styled.div `
-  ${({ $open }) => $open
-    ? `display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;`
-    : 'display: none;'}
-  ${({ $backgroundDark }) => $backgroundDark
-    ? `background: rgba(0, 0, 0, 0.5);
-    cursor: pointer;`
-    : ''}
-  position: fixed;
-  top: 0;
-  left: 0;
-  z-index: 100;
-  width: 100vw;
-  height: 100vh;
-  padding: 0px;
-  margin: 0px;
-  overflow: hidden;
-`;
-const Content = styled.div `
-  position: absolute;
-  z-index: 101;
-  background-color: var(--color-white);
-  box-shadow: var(--elevation-2);
-  border-radius: var(--small);
-  cursor: initial;
-  padding: 24px;
-  display: flex;
-  flex-direction: column;
-  gap: 24px;
-
-  [class~='header'] {
-    display: flex;
-    align-items: center;
-
-    div:first-child {
-      flex: 1;
-    }
-  }
-
-  [class~='footer'] {
-    position: relative;
-    padding-top: 16px;
-  }
-  ${({ $sx }) => ($sx ? $sx : '')}
-`;

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

@@ -1 +0,0 @@
-export { Portal } from './portal';

package/dist/components/surfaces/portal/portal.js

@@ -1,26 +0,0 @@
-'use client';
-import React from 'react';
-import ReactDOM from 'react-dom';
-export const Portal = ({ children, wrapperId = 'root-portal-wrapper', }) => {
-    const [wrapper, setWrapper] = React.useState(null);
-    React.useEffect(() => {
-        let element = document.getElementById(wrapperId);
-        let portalCreated = false;
-        if (!element) {
-            portalCreated = true;
-            element = document.createElement('div');
-            element.setAttribute('id', wrapperId);
-            document.body.appendChild(element);
-        }
-        setWrapper(element);
-        return () => {
-            if (portalCreated && element?.parentNode) {
-                element.parentNode.removeChild(element);
-            }
-        };
-    }, [wrapperId]);
-    if (!wrapper) {
-        return null;
-    }
-    return ReactDOM.createPortal(children, wrapper);
-};

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

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