@soul-refiner/design-system 0.2.43 → 0.2.45

package/dist/components/atoms/box/box.d.ts

@@ -9,7 +9,7 @@ export interface BoxProps extends BackgroundColor, BorderRadius, Elevation, Flex
     sx?: string;
 }
 export declare const Box: ({ $display, sx, ...args }: BoxProps) => React.JSX.Element;
-export declare const Component: import("styled-components").IStyledComponent<"web", "div", BoxProps & {
+export declare const Component: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, BoxProps & {
     $sx?: string | undefined;
-}, never>;
+}>>;
 export {};

package/dist/components/atoms/typography/typography.d.ts

@@ -1,9 +1,7 @@
+/// <reference types="react" />
 import { Color, Styleable, TextClamp, TypographyStyle, TypographyWeight } from '../../../types';
 export type TypographyProps = Pick<React.HTMLAttributes<HTMLParagraphElement>, 'children' | 'className' | 'dangerouslySetInnerHTML' | 'id' | 'onBlur' | 'onBlurCapture' | 'onClick' | 'onChange' | 'onCopy' | 'onCut' | 'onKeyDown' | 'onKeyDownCapture' | 'onKeyUp' | 'onKeyUpCapture' | 'onMouseDown' | 'onMouseDownCapture' | 'onMouseEnter' | 'onMouseLeave' | 'onMouseOut' | 'onMouseOver'> & {
     value?: string;
     href?: string;
 } & Color & Styleable & TextClamp & TypographyStyle & TypographyWeight;
-export declare const Typography: import("styled-components").IStyledComponent<"web", "p", Pick<import("react").HTMLAttributes<HTMLParagraphElement>, "children" | "onBlur" | "onBlurCapture" | "onClick" | "onChange" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseOut" | "onMouseOver" | "className" | "id" | "dangerouslySetInnerHTML" | "onCopy" | "onCut" | "onKeyDown" | "onKeyDownCapture" | "onKeyUp" | "onKeyUpCapture"> & {
-    value?: string | undefined;
-    href?: string | undefined;
-} & Color & Styleable & TextClamp & TypographyStyle & TypographyWeight, never>;
+export declare const Typography: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, TypographyProps>>;

package/dist/components/editor/navbar/navbar.d.ts

@@ -3,6 +3,6 @@ export interface EditorBarProps {
     handleUploadImage: (files: FileList) => Promise<string>;
 }
 export declare const EditorBar: ({ handleUploadImage }: EditorBarProps) => React.JSX.Element;
-export declare const MenuButton: import("styled-components").IStyledComponent<"web", "button", {
+export declare const MenuButton: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {
     $active?: boolean | undefined;
-}, never>;
+}>>;

package/dist/components/editor/simple_editor/navbar.d.ts

@@ -3,6 +3,6 @@ export interface EditorBarProps {
     handleUploadImage: (files: FileList) => Promise<string>;
 }
 export declare const EditorBar: ({ handleUploadImage }: EditorBarProps) => React.JSX.Element;
-export declare const MenuButton: import("styled-components").IStyledComponent<"web", "button", {
+export declare const MenuButton: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {
     $active?: boolean | undefined;
-}, never>;
+}>>;

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

@@ -4,12 +4,18 @@ 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';
-import { Styles } from '../../../common';
 export const Comment = ({ content, createdDate, hasMoreReplies, id, onComment, onReact, onShowReplies, 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('');
@@ -30,6 +36,8 @@ export const Comment = ({ content, createdDate, hasMoreReplies, id, onComment, o
     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);
@@ -68,8 +76,9 @@ export const Comment = ({ content, createdDate, hasMoreReplies, id, onComment, o
                     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" }))))),
+                    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 },
@@ -119,6 +128,10 @@ const CommentBox = styled.div `
 const PickerWrapper = styled.div `
   position: absolute;
   z-index: 5;
+
+  ${({ $pickerOrientation }) => $pickerOrientation === 'up' ? 'transform: translateY(-345px);' : ''}
+  top: ${({ $top }) => $top}px;
+  left: ${({ $left }) => $left}px;
 `;
 const Reaction = styled.div `
   ${Styles.flex}

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

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

package/dist/components/surfaces/index.js

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

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

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

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

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

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

@@ -0,0 +1,5 @@
+import React from 'react';
+export interface PortalProps extends React.PropsWithChildren {
+    wrapperId?: string;
+}
+export declare const Portal: ({ children, wrapperId, }: PortalProps) => React.ReactPortal | null;

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

@@ -0,0 +1,26 @@
+'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/post.d.ts

@@ -10,6 +10,5 @@ export interface PostProps extends React.PropsWithChildren {
     hasComments?: boolean;
     id?: string;
     images?: string[];
-    onComment: (comment: string) => void;
 }
-export declare const Post: ({ actions, author, authorActive, authorHref, authorImage, children, content, createdDate, hasComments, images, onComment, }: PostProps) => React.JSX.Element;
+export declare const Post: ({ actions, author, authorActive, authorHref, authorImage, children, content, createdDate, hasComments, images, }: PostProps) => React.JSX.Element;

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

@@ -1,22 +1,12 @@
 'use client';
 import React from 'react';
 import styled from 'styled-components';
-import { Avatar, H, P, TextInput } from '../../';
+import { Avatar, H, P } from '../../';
 import { abbrTimeBeforeDate } from './helpers';
-export const Post = ({ actions, author, authorActive, authorHref, authorImage, children, content, createdDate, hasComments, images, onComment, }) => {
+export const Post = ({ actions, author, authorActive, authorHref, authorImage, children, content, createdDate, hasComments, images, }) => {
     const id = React.useId();
-    const [comment, setComment] = React.useState('');
     const _actions = React.Children.toArray(actions);
     const _comments = React.Children.toArray(children);
-    const handleCommentChange = (event) => {
-        setComment(event.target.value);
-    };
-    const handleCommentSubmit = (event) => {
-        event.stopPropagation();
-        event.preventDefault();
-        onComment(comment);
-        setComment('');
-    };
     const subtitle = abbrTimeBeforeDate(new Date(createdDate));
     return (React.createElement(Wrapper, { id: id },
         React.createElement(Header, null,
@@ -29,10 +19,7 @@ export const Post = ({ actions, author, authorActive, authorHref, authorImage, c
                 "+",
                 images.length - 4)))),
         !!_actions.length && React.createElement(ActionsWrapper, null, _actions),
-        hasComments && !!_comments.length && (React.createElement(CommentWrapper, null, _comments)),
-        hasComments && (React.createElement(CommentInputWrapper, { onSubmit: handleCommentSubmit },
-            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 })))));
+        hasComments && !!_comments.length && (React.createElement(CommentWrapper, null, _comments))));
 };
 const Wrapper = styled.div `
   max-width: 700px;
@@ -111,9 +98,3 @@ const CommentWrapper = styled.div `
   flex-flow: column nowrap;
   gap: 24px;
 `;
-const CommentInputWrapper = styled.form `
-  padding: 24px;
-  display: flex;
-  gap: 12px;
-  align-items: center;
-`;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@soul-refiner/design-system",
-  "version": "0.2.43",
+  "version": "0.2.45",
   "main": "dist/index.js",
   "license": "MIT",
   "publishConfig": {
@@ -32,6 +32,7 @@
     "@storybook/react": "^7.2.1",
     "@storybook/react-vite": "^7.2.1",
     "@storybook/testing-library": "^0.2.0",
+    "@types/react-dom": "18.2.0",
     "@types/styled-components": "^5.1.26",
     "@typescript-eslint/eslint-plugin": "^5.59.5",
     "@typescript-eslint/parser": "^5.59.5",
@@ -72,5 +73,6 @@
     "slate-hyperscript": "^0.77.0",
     "slate-react": "^0.97.1",
     "styled-components": "^6.0.0-rc.3"
-  }
+  },
+  "packageManager": "yarn@3.6.1"
 }