@soul-refiner/design-system 2.10.8-alpha → 2.10.9-alpha
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/input/responsive-text_area/responsive_text_area.js +1 -1
- package/dist/components/surfaces/accordion/accordion.js +1 -1
- package/dist/components/surfaces/comment/comment.js +32 -3
- package/dist/components/surfaces/post/post.js +3 -3
- package/dist/icons/basic/circle.js +1 -1
- package/dist/src/components/surfaces/comment/comment.d.ts +4 -1
- package/package.json +113 -113
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";var box=require("../../atoms/box/box.js"),React=require("react"),styled=(require("../../atoms/highlighter/highlighter.js"),require("../../atoms/typography/display.js"),require("../../atoms/typography/heading.js"),require("../../atoms/typography/paragraph.js"),require("../../atoms/typography/typography.js"),require("styled-components"));function _interopDefaultCompat(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var React__default=_interopDefaultCompat(React),styled__default=_interopDefaultCompat(styled);const ResponsiveTextArea=React.forwardRef(function({bg:e="var(--color-blue-10)",minWidth:t="400px",value:r,onChange:a,maxCharacters:o=5e3,placeholder:
|
|
1
|
+
"use strict";var box=require("../../atoms/box/box.js"),React=require("react"),styled=(require("../../atoms/highlighter/highlighter.js"),require("../../atoms/typography/display.js"),require("../../atoms/typography/heading.js"),require("../../atoms/typography/paragraph.js"),require("../../atoms/typography/typography.js"),require("styled-components"));function _interopDefaultCompat(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var React__default=_interopDefaultCompat(React),styled__default=_interopDefaultCompat(styled);const ResponsiveTextArea=React.forwardRef(function({bg:e="var(--color-blue-10)",minWidth:t="400px",value:r,onChange:a,maxCharacters:o=5e3,placeholder:l="Write a comment...",isSuccessful:i,actionComponent:n,icon:d,hasWarning:p,wrapperStyles:u,inputStyles:c,onLimitExceeded:s,limitExceededModal:x,...g},f){const h=React__default.default.useCallback(e=>{e.style.height="50px",e.style.height=Math.max(e.scrollHeight,e.offsetHeight)+"px"},[]);return React__default.default.useLayoutEffect(()=>{f&&"current"in f&&f.current&&r&&h(f.current)},[]),React__default.default.createElement(InputWrapper,{$minWidth:t,$bg:e,$sx:u,$warning:p},React__default.default.createElement(TextAreaWrapper,null,React__default.default.createElement(StyledTextArea,{...g,ref:f,placeholder:l,value:r?.slice(0,o),onChange:e=>{e.target.value.length>=o?s?.():a?.(e)},onInput:e=>{h(e.target)},$inputSx:c,$successful:i,$warning:p}),React__default.default.createElement(ActionWrapper,null,React__default.default.createElement(box.Box,{$align:"center",$justify:"center",sx:"height: 100%; "},n))),x)}),ActionWrapper=styled__default.default.div`
|
|
2
2
|
position: absolute;
|
|
3
3
|
bottom: 0%;
|
|
4
4
|
right: 16px;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
"use strict";var React=require("react"),styled=require("styled-components"),box=require("../../atoms/box/box.js"),_function=require("../../../utils/function.js"),chevron_down=require("../../../icons/arrow/chevron_down.js"),chevron_up=require("../../../icons/arrow/chevron_up.js");function _interopDefaultCompat(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var React__default=_interopDefaultCompat(React);const AccordionContext=React__default.default.createContext([-1,()=>{}]),Accordion=({children:e,defaultOpen:t=-1,sx:n})=>{const[a,r]=React__default.default.useState(t);React__default.default.useEffect(()=>{r(t)},[t]);return React__default.default.createElement(AccordionContext.Provider,{value:[a,t=>{r(e=>e===t?-1:t)}]},React__default.default.createElement(Wrapper,{$sx:n},React__default.default.Children.map(e,(e,t)=>React__default.default.isValidElement(e)?React__default.default.cloneElement(e,{index:t}):null)))},Wrapper=styled.styled.div`
|
|
3
3
|
${({$sx:e})=>e||""};
|
|
4
|
-
`,AccordionItem=({buttonSx:e,children:t,index:n,sx:a,trigger:r})=>{const[o,c]=React__default.default.useContext(AccordionContext);return React__default.default.createElement(box.Box,{$dir:"column"},React__default.default.createElement(TriggerWrapper,{onClick:_function.callAll(()=>c(n),r?.props?.onClick),$sx:e},r,o===n?React__default.default.createElement(chevron_up.ChevronUp,null):React__default.default.createElement(chevron_down.ChevronDown,null)),React__default.default.createElement(box.Box,{sx:o===n?a:"visibility: hidden; height: 0px; overflow: hidden;"},t))},TriggerWrapper=styled.styled.
|
|
4
|
+
`,AccordionItem=({buttonSx:e,children:t,index:n,sx:a,trigger:r})=>{const[o,c]=React__default.default.useContext(AccordionContext);return React__default.default.createElement(box.Box,{$dir:"column"},React__default.default.createElement(TriggerWrapper,{onClick:_function.callAll(()=>c(n),r?.props?.onClick),$sx:e},r,o===n?React__default.default.createElement(chevron_up.ChevronUp,null):React__default.default.createElement(chevron_down.ChevronDown,null)),React__default.default.createElement(box.Box,{sx:o===n?a:"visibility: hidden; height: 0px; overflow: hidden;"},t))},TriggerWrapper=styled.styled.div`
|
|
5
5
|
display: flex;
|
|
6
6
|
align-items: center;
|
|
7
7
|
justify-content: space-between;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
"use strict";var React=require("react"),styled=require("styled-components"),Link=require("next/link"),Picker=require("@emoji-mart/react"),emojis=require("../../../emoji/emojis.json.js"),avatar=require("../../iconography/avatar/avatar.js"),box=require("../../atoms/box/box.js"),highlighter=require("../../atoms/highlighter/highlighter.js"),paragraph=require("../../atoms/typography/paragraph.js"),button=require("../../actions/button/button.js"),portal=require("../portal/portal.js"),regex=require("../../../common/regex.js"),styles=require("../../../common/styles.js"),emoticon_add=require("../../../icons/basic/emoticon_add.js"),comment=require("../../../icons/message/comment.js"),helpers=require("./helpers.js"),responsive_text_area=require("../../input/responsive-text_area/responsive_text_area.js"),send_text=require("../../../icons/email/send_text.js");function _interopDefaultCompat(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var React__default=_interopDefaultCompat(React),styled__default=_interopDefaultCompat(styled),Link__default=_interopDefaultCompat(Link),Picker__default=_interopDefaultCompat(Picker);const MAX_REACTIONS_SHOWN=5,Comment=({avatarTooltipContent:e,avatarTooltipSx:t,content:a,createdDate:r,hasMoreReplies:l,id:o,onComment:n,onReact:i,onShowReplies:d,
|
|
2
|
+
"use strict";var React=require("react"),styled=require("styled-components"),Link=require("next/link"),Picker=require("@emoji-mart/react"),emojis=require("../../../emoji/emojis.json.js"),avatar=require("../../iconography/avatar/avatar.js"),box=require("../../atoms/box/box.js"),highlighter=require("../../atoms/highlighter/highlighter.js"),paragraph=require("../../atoms/typography/paragraph.js"),button=require("../../actions/button/button.js"),portal=require("../portal/portal.js"),regex=require("../../../common/regex.js"),styles=require("../../../common/styles.js"),emoticon_add=require("../../../icons/basic/emoticon_add.js"),comment=require("../../../icons/message/comment.js"),helpers=require("./helpers.js"),responsive_text_area=require("../../input/responsive-text_area/responsive_text_area.js"),send_text=require("../../../icons/email/send_text.js");function _interopDefaultCompat(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var React__default=_interopDefaultCompat(React),styled__default=_interopDefaultCompat(styled),Link__default=_interopDefaultCompat(Link),Picker__default=_interopDefaultCompat(Picker);const MAX_REACTIONS_SHOWN=5,Comment=({avatarTooltipContent:e,avatarTooltipSx:t,content:a,createdDate:r,hasMoreReplies:l,id:o,onComment:n,onReact:i,onShowReplies:d,onEdit:u,isEditing:c,setIsEditing:s,dropdown:p,reactionModal:f,reactions:_,replies:m,userImageUri:x,userName:g,userReactions:h,visibilityIcon:b,customPlaceHolder:R,userProfileUri:y,sx:v})=>{const[$,E]=React__default.default.useState(!1),[k,w]=React__default.default.useState({x:0,y:0}),[I,A]=React__default.default.useState("up"),[D,O]=React__default.default.useState(!1),[C,T]=React__default.default.useState(!1),[j,S]=React__default.default.useState(""),q=React__default.default.Children.toArray(m);const[P,W]=React__default.default.useState(a),z=React__default.default.useRef(null);React__default.default.useEffect(()=>{c&&z.current&&z.current.focus()},[c]);var m=e=>{e.stopPropagation(),E(e=>!e),w({y:e.clientY,x:e.clientX}),A(400<e.clientY?"up":"down")},B=()=>{d&&d(),T(!0)},r=helpers.abbrTimeBeforeDate(r),_=_&&Object.entries(_).slice(0,MAX_REACTIONS_SHOWN).sort((e,t)=>e[1]<t[1]?1:-1).map(e=>React__default.default.createElement(Reaction,{key:o+e[0],onClick:()=>i(e[0]),$align:"center",$dir:"row",$gap:5,$userSelected:h?.includes(e[0])},e[0],React__default.default.createElement(paragraph.P,{$bold:!0,$fontSize:10,$lineHeight:14},e[1]))),L=!!q?.length&&0<q.length,H=L&&q.map((e,t)=>{var a;return React__default.default.isValidElement(e)?(a=e.props?.id,t=t!==q.length-1||l,React__default.default.createElement(ReplyWrapper,{$hasLine:t,key:a},e,React__default.default.createElement(ReplyIndicator,null))):null});return React__default.default.createElement(Wrapper,{$sx:v,id:"comment-"+o},React__default.default.createElement(avatar.Avatar,{as:Link__default.default,href:y,image:x,size:32,tooltipContent:e,tooltipSx:t}),React__default.default.createElement(box.Box,{$flex:1,$dir:"column"},React__default.default.createElement(ContentWrapper,{$hasReplies:L||!!l},c?React__default.default.createElement(responsive_text_area.ResponsiveTextArea,{inputStyles:"min-height: 104px;",onChange:e=>{W(e.target.value)},value:P,ref:z}):React__default.default.createElement(CommentBox,null,React__default.default.createElement(box.Box,{$dir:"row",$justify:"space-between",$align:"center"},React__default.default.createElement(paragraph.P,{as:y?Link__default.default:"span",href:y,$bold:!0,$color:"grey-2",sx:"text-decoration:none !important; color:var(--color-grey-2) !important;",$fontSize:14,$lineHeight:20},g),p),React__default.default.createElement(paragraph.P,{sx:"white-space: pre-line;letter-spacing: -0.176px; word-break: break-word;"},React__default.default.createElement(highlighter.Highlighter,{highlightRender:e=>React__default.default.createElement(paragraph.P,{as:"span",$color:"primary-blue-2"},React__default.default.createElement(Link__default.default,{href:e,target:"_blank"},e)),seperator:regex.URL_REGEX,text:a}))),React__default.default.createElement(box.Box,{$align:"flex-start",$dir:"row",$display:"flex",$gap:16,sx:"margin: 8px 0px; position: relative;"},c?React__default.default.createElement(box.Box,{$display:"flex",$align:"center",$justify:"space-between",$gap:6,sx:"margin-top: 8px; width: 100%;"},React__default.default.createElement(emoticon_add.Emoticon,{color:"primary-blue-2",onClick:m,size:24,sx:" cursor: pointer; flex-shrink: 0; margin-right: auto;"}),React__default.default.createElement(button.Button,{onClick:()=>{s&&s(!c),W(a)},sx:"background-color: transparent; border: none; box-shadow: none; color: var(--color-primary-blue-2); margin-left: auto;\r\n &:hover, &:focus {\r\n border: none;\r\n outline: none;\r\n }\r\n ",size:"small",type:"outlined"},"Cancel"),React__default.default.createElement(button.Button,{onClick:()=>{u&&u(P,o),s&&s(!1)},size:"small",type:"primary"},"Save")):React__default.default.createElement(React__default.default.Fragment,null,React__default.default.createElement(emoticon_add.Emoticon,{color:"primary-blue-2",onClick:m,size:24,sx:" cursor: pointer; flex-shrink: 0;"}),React__default.default.createElement(comment.Comment,{color:"primary-blue-2",onClick:()=>O(e=>!e),size:24,sx:"border-radius: 50%; cursor: pointer; flex-shrink: 0;"}),React__default.default.createElement(paragraph.P,{$color:"grey-7"},"•"),React__default.default.createElement(paragraph.P,{$color:"grey-4",$fontSize:12,$lineHeight:24,sx:"flex-shrink: 0;"},r),React__default.default.createElement(box.Box,{$display:"flex",$flow:"row wrap",$gap:6,sx:"max-width: calc(100% - 190px); margin-left: auto;"},_,f)),$&&React__default.default.createElement(portal.Portal,null,React__default.default.createElement(PickerWrapper,{$pickerOrientation:I,$top:k.y,$left:k.x},React__default.default.createElement(Picker__default.default,{data:emojis.default,onEmojiSelect:({native:e})=>{i(e),E(!1)},onClickOutside:()=>E(!1),maxFrequentRows:1,navPosition:"none",previewPosition:"none",perLine:9,theme:"auto"}))))),L&&C&&React__default.default.createElement(RepliesWrapper,null,H),!C&&!l&&L&&React__default.default.createElement(RepliesWrapper,null,React__default.default.createElement(ReplyWrapper,{$hasLine:!1},React__default.default.createElement(button.Button,{onClick:B,size:"small",sx:"color: var(--color-grey-3);",type:"text"},"show replies"),React__default.default.createElement(ReplyIndicator,null))),l&&React__default.default.createElement(RepliesWrapper,null,React__default.default.createElement(ReplyWrapper,{$hasLine:!1},React__default.default.createElement(button.Button,{onClick:B,size:"small",sx:"color: var(--color-grey-3);",type:"text"},"show more replies"),React__default.default.createElement(ReplyIndicator,null))),D&&React__default.default.createElement(CommentWrapper,null,React__default.default.createElement(responsive_text_area.ResponsiveTextArea,{bg:"var(--color-grey-10)",value:j,onChange:e=>{S(e.target.value)},placeholder:R||"Write a reply",maxCharacters:1e3,wrapperStyles:"margin: 16px 0; width: 100%;",actionComponent:React__default.default.createElement(box.Box,{sx:"margin: auto 0 5px 0px;",$align:"center",$justify:"center",$gap:8},b,React__default.default.createElement(button.Button,{disabled:!j.length,icon:React__default.default.createElement(send_text.SendText,null),onClick:e=>{e.stopPropagation(),e.preventDefault(),n(j),S("")},sx:`
|
|
3
3
|
justify-content: center;
|
|
4
4
|
background-color: var(--color-primary-blue-2);
|
|
5
5
|
align-items: center;
|
|
@@ -18,7 +18,36 @@
|
|
|
18
18
|
border: none !important;
|
|
19
19
|
background-color: var(--color-grey-1);
|
|
20
20
|
}
|
|
21
|
-
`,type:"secondary"})),inputStyles:"font-size: 14px;"}))))},Wrapper=styled__default.default.
|
|
21
|
+
`,type:"secondary"})),inputStyles:"font-size: 14px;"}))))},Wrapper=(styled__default.default.textarea`
|
|
22
|
+
padding: 16px;
|
|
23
|
+
resize: none;
|
|
24
|
+
width: 100%;
|
|
25
|
+
cursor: pointer;
|
|
26
|
+
min-height: 196px;
|
|
27
|
+
box-sizing: border-box;
|
|
28
|
+
border: 1px solid var(--color-grey-9);
|
|
29
|
+
border-radius: 16px;
|
|
30
|
+
box-shadow: var(--elevation-6);
|
|
31
|
+
background-color: var(--color-grey-10);
|
|
32
|
+
outline: none;
|
|
33
|
+
font-family: var(--font-inter);
|
|
34
|
+
font-size: 16px;
|
|
35
|
+
line-height: 24px;
|
|
36
|
+
color: var(--color-grey-3);
|
|
37
|
+
|
|
38
|
+
&::placeholder {
|
|
39
|
+
color: var(--color-grey-6);
|
|
40
|
+
}
|
|
41
|
+
&:hover {
|
|
42
|
+
border-color: var(--color-grey-7);
|
|
43
|
+
box-shadow: var(--elevation-6);
|
|
44
|
+
}
|
|
45
|
+
&:focus {
|
|
46
|
+
border-color: var(--color-blue-7);
|
|
47
|
+
background: white;
|
|
48
|
+
box-shadow: var(--elevation-6);
|
|
49
|
+
}
|
|
50
|
+
`,styled__default.default.div`
|
|
22
51
|
max-width: 700px;
|
|
23
52
|
display: flex;
|
|
24
53
|
flex-direction: row;
|
|
@@ -27,7 +56,7 @@
|
|
|
27
56
|
justify-content: space-between;
|
|
28
57
|
position: relative;
|
|
29
58
|
${({$sx:e})=>e||""}
|
|
30
|
-
|
|
59
|
+
`),ContentWrapper=styled__default.default.div`
|
|
31
60
|
display: flex;
|
|
32
61
|
word-break: break-word;
|
|
33
62
|
flex-direction: column;
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
height: ${$.y};
|
|
5
5
|
width: ${$.x};
|
|
6
6
|
margin: 0 auto;
|
|
7
|
-
`},React__default.default.createElement(NavArrow,{$side:"left",$visible:0!==b,onClick:j},React__default.default.createElement(chevron_left.ChevronLeft,{color:"white",size:48})),React__default.default.createElement(Image__default.default,{alt:"",fill:!0,quality:100,onLoad:e=>{var{naturalHeight:e,naturalWidth:t}=e.target;let a=t+"px",r=e+"px";window?.innerHeight<e&&window?.innerWidth<t?(a=Math.floor(.95*window.innerHeight*t/e)+"px",r=Math.round(.95*window.innerWidth*e/t)+"px"):window?.innerHeight<e?(a=Math.floor(.95*window.innerHeight*t/e)+"px",r="95vh"):window?.innerWidth<t&&(a="95vw",r=Math.round(.95*window.innerWidth*e/t)+"px"),k({x:a,y:r})},draggable:!1,priority:!0,sizes:"100vw",src:p[b],style:{objectFit:"cover"}}),React__default.default.createElement(NavArrow,{$side:"right",$visible:b!==p.length-1,onClick:C},React__default.default.createElement(chevron_right.ChevronRight,{color:"white",size:48})))),React__default.default.createElement(Header,null,React__default.default.createElement(avatar.Avatar,{isPaidUser:h,as:r?Link__default.default:"button",href:r,image:l,size:64,status:a?"online":void 0,subtitle:React__default.default.createElement(paragraph.P,{as:"span",sx:"vertical-align: top;",$fontSize:14,$lineHeight:20},React__default.default.createElement(time_ago.TimeAgo,{date:new Date(u)})),title:React__default.default.createElement(heading.H,{as:r?Link__default.default:"span",href:r,sx:"text-decoration:none;",$bold:!0,$fontSize:18,$lineHeight:26},t),textPosition:"right",tooltipContent:i,tooltipSx:o,sx:r?"img { cursor: pointer; }":void 0}),c),!!d?.length&&React__default.default.createElement("div",{style:{padding:"16px 24px"}},g&&1<v?React__default.default.createElement(ShowMoreText__default.default,{lines:2,more:"Continue Reading",onClick:m,anchorClass:"see-more",expanded:!1,truncatedEndingComponent:"... "},React__default.default.createElement(paragraph.P,{$sx:"white-space: pre-line; word-break: break-word;",$textClampLines:2},React__default.default.createElement(highlighter.Highlighter,{highlightRender:e=>React__default.default.createElement(paragraph.P,{as:"span",$color:"primary-blue-2"},React__default.default.createElement(Link__default.default,{href:e,target:"_blank"},e)),seperator:regex.URL_REGEX,text:d}))):React__default.default.createElement(paragraph.P,{$sx:"white-space: pre-line; word-break: break-word;",innerRef:w},React__default.default.createElement(highlighter.Highlighter,{highlightRender:e=>React__default.default.createElement(paragraph.P,{as:"span",$color:"primary-blue-2"},React__default.default.createElement(Link__default.default,{href:e,target:"_blank"},e)),seperator:regex.URL_REGEX,text:g&&1===v?"This is a premium post. Join to the membership to unlock the full access.":d})),g&&!p?.length&&React__default.default.createElement(JoinNow,{onClick:m},React__default.default.createElement(paragraph.P,{$fontSize:14,$mediumBold:!0},"Join now for $",x," per month")),g&&!!p?.length&&React__default.default.createElement(BlurredContentWrapper,null,React__default.default.createElement(Image__default.default,{alt:"",width:
|
|
7
|
+
`},React__default.default.createElement(NavArrow,{$side:"left",$visible:0!==b,onClick:j},React__default.default.createElement(chevron_left.ChevronLeft,{color:"white",size:48})),React__default.default.createElement(Image__default.default,{alt:"",fill:!0,quality:100,onLoad:e=>{var{naturalHeight:e,naturalWidth:t}=e.target;let a=t+"px",r=e+"px";window?.innerHeight<e&&window?.innerWidth<t?(a=Math.floor(.95*window.innerHeight*t/e)+"px",r=Math.round(.95*window.innerWidth*e/t)+"px"):window?.innerHeight<e?(a=Math.floor(.95*window.innerHeight*t/e)+"px",r="95vh"):window?.innerWidth<t&&(a="95vw",r=Math.round(.95*window.innerWidth*e/t)+"px"),k({x:a,y:r})},draggable:!1,priority:!0,sizes:"100vw",src:p[b],style:{objectFit:"cover"}}),React__default.default.createElement(NavArrow,{$side:"right",$visible:b!==p.length-1,onClick:C},React__default.default.createElement(chevron_right.ChevronRight,{color:"white",size:48})))),React__default.default.createElement(Header,null,React__default.default.createElement(avatar.Avatar,{isPaidUser:h,as:r?Link__default.default:"button",href:r,image:l,size:64,status:a?"online":void 0,subtitle:React__default.default.createElement(paragraph.P,{as:"span",sx:"vertical-align: top;",$fontSize:14,$lineHeight:20},React__default.default.createElement(time_ago.TimeAgo,{date:new Date(u)})),title:React__default.default.createElement(heading.H,{as:r?Link__default.default:"span",href:r,sx:"text-decoration:none;",$bold:!0,$fontSize:18,$lineHeight:26},t),textPosition:"right",tooltipContent:i,tooltipSx:o,sx:r?"img { cursor: pointer; }":void 0}),c),!!d?.length&&React__default.default.createElement("div",{style:{padding:"16px 24px"}},g&&1<v?React__default.default.createElement(ShowMoreText__default.default,{lines:2,more:"Continue Reading",onClick:m,anchorClass:"see-more",expanded:!1,truncatedEndingComponent:"... "},React__default.default.createElement(paragraph.P,{$sx:"white-space: pre-line; word-break: break-word;",$textClampLines:2},React__default.default.createElement(highlighter.Highlighter,{highlightRender:e=>React__default.default.createElement(paragraph.P,{as:"span",$color:"primary-blue-2"},React__default.default.createElement(Link__default.default,{href:e,target:"_blank"},e)),seperator:regex.URL_REGEX,text:d}))):React__default.default.createElement(paragraph.P,{$sx:"white-space: pre-line; word-break: break-word;",innerRef:w},React__default.default.createElement(highlighter.Highlighter,{highlightRender:e=>React__default.default.createElement(paragraph.P,{as:"span",$color:"primary-blue-2"},React__default.default.createElement(Link__default.default,{href:e,target:"_blank"},e)),seperator:regex.URL_REGEX,text:g&&1===v?"This is a premium post. Join to the membership to unlock the full access.":d})),g&&!p?.length&&React__default.default.createElement(JoinNow,{onClick:m},React__default.default.createElement(paragraph.P,{$fontSize:14,$mediumBold:!0},"Join now for $",x," per month"))),g&&!!p?.length&&React__default.default.createElement(BlurredContentWrapper,null,React__default.default.createElement(Image__default.default,{alt:"",width:650,height:427,priority:!0,quality:100,src:p[0],style:{objectFit:"fill",height:"100%",width:"100%",filter:"blur(60px)",position:"absolute",top:0,left:"50%",transform:"translateX(-50%)"}}),React__default.default.createElement(lock.Lock,{size:40,color:"white",sx:"z-index: 1"}),React__default.default.createElement("div",{style:{display:"flex",flexDirection:"column",zIndex:1}},React__default.default.createElement(paragraph.P,{$color:"white",$fontSize:14,$bold:!0,$lineHeight:20},"Become a member"),React__default.default.createElement(paragraph.P,{$color:"white",$fontSize:14,$bold:!0,$lineHeight:20},"to unlock this post")),React__default.default.createElement(JoinNow,{onClick:m,style:{zIndex:1,marginTop:0}},React__default.default.createElement(paragraph.P,{$fontSize:14,$mediumBold:!0},"Join now for $",x," per month"))),!!p?.length&&!g&&React__default.default.createElement(ImagesWrapper,{$numImages:p.length},p.slice(0,4).map((e,t)=>React__default.default.createElement(ImageWrapper,{key:""+y+e.slice(0,15)+t},React__default.default.createElement(Image__default.default,{alt:"",fill:!0,onClick:()=>E(t),quality:100,src:e,draggable:!1,style:{cursor:"pointer",objectFit:"cover"}}))),4<p.length&&React__default.default.createElement(heading.H,{as:"p",className:"more-than",sx:"pointer-events: none;",$color:"grey-10",$fontSize:28,$lineHeight:36,$semiBold:!0},"+",p.length-4)),!p?.length&&_&&!g&&React__default.default.createElement(Link__default.default,{href:_.url,target:"_blank"},React__default.default.createElement(ImageWrapper,null,React__default.default.createElement(Image__default.default,{alt:"",fill:!0,quality:100,src:_.imageUrl,draggable:!1,style:{cursor:"pointer",objectFit:"cover"}})),React__default.default.createElement(box.Box,{$dir:"column",$gap:8,sx:"padding: 8px 16px;"},React__default.default.createElement(paragraph.P,{$color:"grey-2",$semiBold:!0},_.title),React__default.default.createElement(paragraph.P,{$color:"grey-5"},_.description))),!!e.length&&React__default.default.createElement(ActionsWrapper,null,!g&&e),s&&!!n.length&&React__default.default.createElement(CommentWrapper,null,n))},Wrapper=styled.styled.div`
|
|
8
8
|
position: relative;
|
|
9
9
|
max-width: 700px;
|
|
10
10
|
width: 100%;
|
|
@@ -80,14 +80,14 @@
|
|
|
80
80
|
}
|
|
81
81
|
`,BlurredContentWrapper=styled.styled.div`
|
|
82
82
|
position: relative;
|
|
83
|
-
margin-top: 24px;
|
|
84
83
|
display: flex;
|
|
85
84
|
flex-direction: column;
|
|
86
|
-
width:
|
|
85
|
+
width: 100%;
|
|
87
86
|
height: 427px;
|
|
88
87
|
align-items: center;
|
|
89
88
|
justify-content: center;
|
|
90
89
|
gap: 16px;
|
|
90
|
+
overflow: hidden;
|
|
91
91
|
`,ActionsWrapper=styled.styled.div`
|
|
92
92
|
display: flex;
|
|
93
93
|
justify-content: space-around;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";var React=require("react"),icon=require("../../components/iconography/icon/icon.js");function _interopDefaultCompat(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var React__default=_interopDefaultCompat(React);const Circle=e=>React__default.default.createElement(icon.Icon,{...e},React__default.default.createElement("path",{fillRule:"evenodd",clipRule:"evenodd",d:"
|
|
1
|
+
"use strict";var React=require("react"),icon=require("../../components/iconography/icon/icon.js");function _interopDefaultCompat(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var React__default=_interopDefaultCompat(React);const Circle=e=>React__default.default.createElement(icon.Icon,{...e},React__default.default.createElement("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M0.666992 8.00024C0.666992 12.0503 3.95024 15.3336 8.00033 15.3336C12.0504 15.3336 15.3337 12.0503 15.3337 8.00024C15.3337 3.95015 12.0504 0.666908 8.00033 0.666908C3.95024 0.666908 0.666992 3.95015 0.666992 8.00024ZM14.0003 8.00024C14.0003 11.314 11.314 14.0002 8.00033 14.0002C4.68662 14.0002 2.00033 11.314 2.00033 8.00024C2.00033 4.68653 4.68662 2.00024 8.00033 2.00024C11.314 2.00024 14.0003 4.68653 14.0003 8.00024Z"}));exports.Circle=Circle;
|
|
@@ -11,6 +11,9 @@ export interface CommentProps {
|
|
|
11
11
|
onComment: (comment: string, id?: string) => void;
|
|
12
12
|
onReact: (reaction: string) => void;
|
|
13
13
|
onShowReplies?: () => void;
|
|
14
|
+
onEdit?: (updatedText: string, id?: string) => void;
|
|
15
|
+
isEditing?: boolean;
|
|
16
|
+
setIsEditing?: (isEditing: boolean) => void;
|
|
14
17
|
reactionModal?: React.ReactElement;
|
|
15
18
|
visibilityIcon?: React.ReactElement;
|
|
16
19
|
reactions?: Record<string, number>;
|
|
@@ -22,4 +25,4 @@ export interface CommentProps {
|
|
|
22
25
|
userProfileUri: string;
|
|
23
26
|
sx?: string;
|
|
24
27
|
}
|
|
25
|
-
export declare const Comment: ({ avatarTooltipContent, avatarTooltipSx, content, createdDate, hasMoreReplies, id, onComment, onReact, onShowReplies, dropdown, reactionModal, reactions, replies, userImageUri, userName, userReactions, visibilityIcon, customPlaceHolder, userProfileUri, sx, }: CommentProps) => React.JSX.Element;
|
|
28
|
+
export declare const Comment: ({ avatarTooltipContent, avatarTooltipSx, content, createdDate, hasMoreReplies, id, onComment, onReact, onShowReplies, onEdit, isEditing, setIsEditing, dropdown, reactionModal, reactions, replies, userImageUri, userName, userReactions, visibilityIcon, customPlaceHolder, userProfileUri, sx, }: CommentProps) => React.JSX.Element;
|
package/package.json
CHANGED
|
@@ -1,113 +1,113 @@
|
|
|
1
|
-
{
|
|
2
|
-
"name": "@soul-refiner/design-system",
|
|
3
|
-
"version": "2.10.
|
|
4
|
-
"main": "dist/index.js",
|
|
5
|
-
"types": "dist/src/index.d.ts",
|
|
6
|
-
"license": "MIT",
|
|
7
|
-
"publishConfig": {
|
|
8
|
-
"registry": "https://registry.npmjs.org"
|
|
9
|
-
},
|
|
10
|
-
"include": [
|
|
11
|
-
"/dist"
|
|
12
|
-
],
|
|
13
|
-
"files": [
|
|
14
|
-
"dist/**/*"
|
|
15
|
-
],
|
|
16
|
-
"exports": {
|
|
17
|
-
".": {
|
|
18
|
-
"import": {
|
|
19
|
-
"types": "./dist/src/index.d.ts",
|
|
20
|
-
"default": "./dist/index.js"
|
|
21
|
-
}
|
|
22
|
-
}
|
|
23
|
-
},
|
|
24
|
-
"devDependencies": {
|
|
25
|
-
"@rollup/plugin-commonjs": "^25.0.7",
|
|
26
|
-
"@rollup/plugin-json": "^6.1.0",
|
|
27
|
-
"@storybook/addon-essentials": "^7.6.7",
|
|
28
|
-
"@storybook/addon-interactions": "^7.6.7",
|
|
29
|
-
"@storybook/addon-links": "^7.6.7",
|
|
30
|
-
"@storybook/addon-themes": "^7.2.3",
|
|
31
|
-
"@storybook/addons": "^7.6.7",
|
|
32
|
-
"@storybook/blocks": "^7.6.7",
|
|
33
|
-
"@storybook/nextjs": "~7.5.3",
|
|
34
|
-
"@storybook/preview-api": "^7.6.13",
|
|
35
|
-
"@storybook/react": "~7.2.1",
|
|
36
|
-
"@storybook/testing-library": "~0.2.0",
|
|
37
|
-
"@types/react": "^18.2.48",
|
|
38
|
-
"@types/react-dom": "18.2.0",
|
|
39
|
-
"@types/react-show-more-text": "^1.4.5",
|
|
40
|
-
"@types/styled-components": "~5.1.26",
|
|
41
|
-
"chromatic": "~6.17.4",
|
|
42
|
-
"husky": "~8.0.0",
|
|
43
|
-
"prettier": "~2.8.8",
|
|
44
|
-
"pretty-quick": "~3.1.3",
|
|
45
|
-
"prop-types": "~15.8.1",
|
|
46
|
-
"rollup": "^4.12.0",
|
|
47
|
-
"rollup-plugin-node-externals": "^7.0.1",
|
|
48
|
-
"rollup-plugin-postcss": "^4.0.2",
|
|
49
|
-
"rollup-plugin-preserve-directives": "^0.4.0",
|
|
50
|
-
"rollup-plugin-typescript2": "^0.36.0",
|
|
51
|
-
"rollup-plugin-uglify": "^6.0.4",
|
|
52
|
-
"storybook": "~7.5.3",
|
|
53
|
-
"tailwindcss": "^3.4.1",
|
|
54
|
-
"tsc-alias": "^1.8.8",
|
|
55
|
-
"tsconfig-paths-webpack-plugin": "~4.0.1",
|
|
56
|
-
"tslib": "^2.6.2",
|
|
57
|
-
"typescript": "~5.0.4",
|
|
58
|
-
"webpack": "~5.89.0"
|
|
59
|
-
},
|
|
60
|
-
"scripts": {
|
|
61
|
-
"build": "yarn rollup --config",
|
|
62
|
-
"build:tailwind": "npx tailwindcss -i ./src/styles/globals.css -o ./dist/styles/output.css",
|
|
63
|
-
"format": "prettier --write .",
|
|
64
|
-
"storybook": "yarn build:tailwind && storybook dev -p 6006",
|
|
65
|
-
"build-storybook": "storybook build",
|
|
66
|
-
"prepare": "husky install"
|
|
67
|
-
},
|
|
68
|
-
"dependencies": {
|
|
69
|
-
"@emoji-mart/react": "~1.1.1",
|
|
70
|
-
"@emotion/react": "^11.11.4",
|
|
71
|
-
"@emotion/styled": "^11.11.0",
|
|
72
|
-
"@mui/material": "^5.15.13",
|
|
73
|
-
"@mui/x-date-pickers": "^6.19.6",
|
|
74
|
-
"@radix-ui/react-dropdown-menu": "^2.0.6",
|
|
75
|
-
"@radix-ui/react-popover": "^1.0.7",
|
|
76
|
-
"@radix-ui/react-separator": "^1.0.3",
|
|
77
|
-
"@radix-ui/react-slot": "^1.0.2",
|
|
78
|
-
"@radix-ui/react-tooltip": "^1.0.7",
|
|
79
|
-
"@udecode/cn": "~29.0.1",
|
|
80
|
-
"@udecode/plate": "^30.6.1",
|
|
81
|
-
"@udecode/react-utils": "^29.0.1",
|
|
82
|
-
"class-variance-authority": "~0.7.0",
|
|
83
|
-
"date-fns": "^3.4.0",
|
|
84
|
-
"emoji-mart": "~5.5.2",
|
|
85
|
-
"lucide-react": "~0.307.0",
|
|
86
|
-
"next": "~13.5",
|
|
87
|
-
"react": "18.2.0",
|
|
88
|
-
"react-dnd": "~16.0.1",
|
|
89
|
-
"react-dnd-html5-backend": "~16.0.1",
|
|
90
|
-
"react-dom": "~18.2.0",
|
|
91
|
-
"react-h5-audio-player": "~3.9.1",
|
|
92
|
-
"react-is": "~18.2.0",
|
|
93
|
-
"react-player": "~2.13.0",
|
|
94
|
-
"react-show-more-text": "^1.7.1",
|
|
95
|
-
"react-tooltip": "~5.18.0",
|
|
96
|
-
"scheduler": "~0.23.0",
|
|
97
|
-
"slate": "~0.101.5",
|
|
98
|
-
"slate-history": "~0.100.0",
|
|
99
|
-
"slate-hyperscript": "~0.100.0",
|
|
100
|
-
"slate-react": "~0.101.5",
|
|
101
|
-
"styled-components": "~6.1.13",
|
|
102
|
-
"tailwind-merge": "~2.2.0",
|
|
103
|
-
"tailwindcss-animate": "~1.0.7"
|
|
104
|
-
},
|
|
105
|
-
"peerDependencies": {
|
|
106
|
-
"next": "~13.5",
|
|
107
|
-
"react": "~18.2.0",
|
|
108
|
-
"react-dom": "~18.2.0",
|
|
109
|
-
"react-h5-audio-player": "~3.9.1",
|
|
110
|
-
"react-player": "~2.13.0",
|
|
111
|
-
"styled-components": "6.1.8"
|
|
112
|
-
}
|
|
113
|
-
}
|
|
1
|
+
{
|
|
2
|
+
"name": "@soul-refiner/design-system",
|
|
3
|
+
"version": "2.10.9-alpha",
|
|
4
|
+
"main": "dist/index.js",
|
|
5
|
+
"types": "dist/src/index.d.ts",
|
|
6
|
+
"license": "MIT",
|
|
7
|
+
"publishConfig": {
|
|
8
|
+
"registry": "https://registry.npmjs.org"
|
|
9
|
+
},
|
|
10
|
+
"include": [
|
|
11
|
+
"/dist"
|
|
12
|
+
],
|
|
13
|
+
"files": [
|
|
14
|
+
"dist/**/*"
|
|
15
|
+
],
|
|
16
|
+
"exports": {
|
|
17
|
+
".": {
|
|
18
|
+
"import": {
|
|
19
|
+
"types": "./dist/src/index.d.ts",
|
|
20
|
+
"default": "./dist/index.js"
|
|
21
|
+
}
|
|
22
|
+
}
|
|
23
|
+
},
|
|
24
|
+
"devDependencies": {
|
|
25
|
+
"@rollup/plugin-commonjs": "^25.0.7",
|
|
26
|
+
"@rollup/plugin-json": "^6.1.0",
|
|
27
|
+
"@storybook/addon-essentials": "^7.6.7",
|
|
28
|
+
"@storybook/addon-interactions": "^7.6.7",
|
|
29
|
+
"@storybook/addon-links": "^7.6.7",
|
|
30
|
+
"@storybook/addon-themes": "^7.2.3",
|
|
31
|
+
"@storybook/addons": "^7.6.7",
|
|
32
|
+
"@storybook/blocks": "^7.6.7",
|
|
33
|
+
"@storybook/nextjs": "~7.5.3",
|
|
34
|
+
"@storybook/preview-api": "^7.6.13",
|
|
35
|
+
"@storybook/react": "~7.2.1",
|
|
36
|
+
"@storybook/testing-library": "~0.2.0",
|
|
37
|
+
"@types/react": "^18.2.48",
|
|
38
|
+
"@types/react-dom": "18.2.0",
|
|
39
|
+
"@types/react-show-more-text": "^1.4.5",
|
|
40
|
+
"@types/styled-components": "~5.1.26",
|
|
41
|
+
"chromatic": "~6.17.4",
|
|
42
|
+
"husky": "~8.0.0",
|
|
43
|
+
"prettier": "~2.8.8",
|
|
44
|
+
"pretty-quick": "~3.1.3",
|
|
45
|
+
"prop-types": "~15.8.1",
|
|
46
|
+
"rollup": "^4.12.0",
|
|
47
|
+
"rollup-plugin-node-externals": "^7.0.1",
|
|
48
|
+
"rollup-plugin-postcss": "^4.0.2",
|
|
49
|
+
"rollup-plugin-preserve-directives": "^0.4.0",
|
|
50
|
+
"rollup-plugin-typescript2": "^0.36.0",
|
|
51
|
+
"rollup-plugin-uglify": "^6.0.4",
|
|
52
|
+
"storybook": "~7.5.3",
|
|
53
|
+
"tailwindcss": "^3.4.1",
|
|
54
|
+
"tsc-alias": "^1.8.8",
|
|
55
|
+
"tsconfig-paths-webpack-plugin": "~4.0.1",
|
|
56
|
+
"tslib": "^2.6.2",
|
|
57
|
+
"typescript": "~5.0.4",
|
|
58
|
+
"webpack": "~5.89.0"
|
|
59
|
+
},
|
|
60
|
+
"scripts": {
|
|
61
|
+
"build": "yarn rollup --config",
|
|
62
|
+
"build:tailwind": "npx tailwindcss -i ./src/styles/globals.css -o ./dist/styles/output.css",
|
|
63
|
+
"format": "prettier --write .",
|
|
64
|
+
"storybook": "yarn build:tailwind && storybook dev -p 6006",
|
|
65
|
+
"build-storybook": "storybook build",
|
|
66
|
+
"prepare": "husky install"
|
|
67
|
+
},
|
|
68
|
+
"dependencies": {
|
|
69
|
+
"@emoji-mart/react": "~1.1.1",
|
|
70
|
+
"@emotion/react": "^11.11.4",
|
|
71
|
+
"@emotion/styled": "^11.11.0",
|
|
72
|
+
"@mui/material": "^5.15.13",
|
|
73
|
+
"@mui/x-date-pickers": "^6.19.6",
|
|
74
|
+
"@radix-ui/react-dropdown-menu": "^2.0.6",
|
|
75
|
+
"@radix-ui/react-popover": "^1.0.7",
|
|
76
|
+
"@radix-ui/react-separator": "^1.0.3",
|
|
77
|
+
"@radix-ui/react-slot": "^1.0.2",
|
|
78
|
+
"@radix-ui/react-tooltip": "^1.0.7",
|
|
79
|
+
"@udecode/cn": "~29.0.1",
|
|
80
|
+
"@udecode/plate": "^30.6.1",
|
|
81
|
+
"@udecode/react-utils": "^29.0.1",
|
|
82
|
+
"class-variance-authority": "~0.7.0",
|
|
83
|
+
"date-fns": "^3.4.0",
|
|
84
|
+
"emoji-mart": "~5.5.2",
|
|
85
|
+
"lucide-react": "~0.307.0",
|
|
86
|
+
"next": "~13.5",
|
|
87
|
+
"react": "18.2.0",
|
|
88
|
+
"react-dnd": "~16.0.1",
|
|
89
|
+
"react-dnd-html5-backend": "~16.0.1",
|
|
90
|
+
"react-dom": "~18.2.0",
|
|
91
|
+
"react-h5-audio-player": "~3.9.1",
|
|
92
|
+
"react-is": "~18.2.0",
|
|
93
|
+
"react-player": "~2.13.0",
|
|
94
|
+
"react-show-more-text": "^1.7.1",
|
|
95
|
+
"react-tooltip": "~5.18.0",
|
|
96
|
+
"scheduler": "~0.23.0",
|
|
97
|
+
"slate": "~0.101.5",
|
|
98
|
+
"slate-history": "~0.100.0",
|
|
99
|
+
"slate-hyperscript": "~0.100.0",
|
|
100
|
+
"slate-react": "~0.101.5",
|
|
101
|
+
"styled-components": "~6.1.13",
|
|
102
|
+
"tailwind-merge": "~2.2.0",
|
|
103
|
+
"tailwindcss-animate": "~1.0.7"
|
|
104
|
+
},
|
|
105
|
+
"peerDependencies": {
|
|
106
|
+
"next": "~13.5",
|
|
107
|
+
"react": "~18.2.0",
|
|
108
|
+
"react-dom": "~18.2.0",
|
|
109
|
+
"react-h5-audio-player": "~3.9.1",
|
|
110
|
+
"react-player": "~2.13.0",
|
|
111
|
+
"styled-components": "6.1.8"
|
|
112
|
+
}
|
|
113
|
+
}
|