@soul-refiner/design-system 2.9.15 → 2.10.2
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.
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
"use strict";var React=require("react"),styled=require("styled-components"),styles=require("../../../common/styles.js");function _interopDefaultCompat(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var React__default=_interopDefaultCompat(React);const P=({as:e="p",children:t,$fontSize:l=16,$lineHeight:s=24,$textAlign:i="left",sx:n,...
|
|
2
|
+
"use strict";var React=require("react"),styled=require("styled-components"),styles=require("../../../common/styles.js");function _interopDefaultCompat(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var React__default=_interopDefaultCompat(React);const P=({as:e="p",children:t,$fontSize:l=16,$lineHeight:s=24,$textAlign:i="left",sx:n,innerRef:a,...r})=>React__default.default.createElement(StyledP,{as:e,$fontSize:l,$lineHeight:s,$textAlign:i,$sx:n,ref:a,...r},t),StyledP=styled.styled.p`
|
|
3
3
|
margin: 0px;
|
|
4
4
|
font-family: var(--font-inter);
|
|
5
5
|
font-size: ${({$fontSize:e})=>e+"px"};
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
"use strict";var React=require("react"),Image=require("next/image"),Link=require("next/link"),styled=require("styled-components"),regex=require("../../../common/regex.js"),box=require("../../atoms/box/box.js"),highlighter=require("../../atoms/highlighter/highlighter.js"),heading=require("../../atoms/typography/heading.js"),paragraph=require("../../atoms/typography/paragraph.js"),modal=require("../modal/modal.js"),time_ago=(require("../../atoms/typography/display.js"),require("../../atoms/typography/typography.js"),require("../../atoms/time_ago/time_ago.js")),
|
|
2
|
+
"use strict";var React=require("react"),Image=require("next/image"),Link=require("next/link"),styled=require("styled-components"),ShowMoreText=require("react-show-more-text"),regex=require("../../../common/regex.js"),box=require("../../atoms/box/box.js"),highlighter=require("../../atoms/highlighter/highlighter.js"),heading=require("../../atoms/typography/heading.js"),paragraph=require("../../atoms/typography/paragraph.js"),modal=require("../modal/modal.js"),time_ago=(require("../../atoms/typography/display.js"),require("../../atoms/typography/typography.js"),require("../../atoms/time_ago/time_ago.js")),avatar=require("../../iconography/avatar/avatar.js"),lock=require("../../../icons/security/lock.js"),chevron_left=require("../../../icons/arrow/chevron_left.js"),chevron_right=require("../../../icons/arrow/chevron_right.js");function _interopDefaultCompat(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var React__default=_interopDefaultCompat(React),Image__default=_interopDefaultCompat(Image),Link__default=_interopDefaultCompat(Link),ShowMoreText__default=_interopDefaultCompat(ShowMoreText);const Post=({actions:e,author:t,authorActive:a,authorHref:r,authorImage:l,avatarTooltipContent:i,avatarTooltipSx:o,children:n,content:d,createdDate:u,dropdown:c,hasComments:s,id:f,images:p,isPaidUser:h,isPaywalled:g=!1,link:_,onJoin:m,monthlyMembershipPrice:x})=>{const y=React__default.default.useId(),w=React__default.default.useRef(null),[v,R]=React__default.default.useState(-1),[b,E]=React__default.default.useState(-1),[$,k]=React__default.default.useState({x:"30vw",y:"30vh"});React__default.default.useEffect(()=>{w.current&&R(w.current.offsetHeight?w.current.offsetHeight/24:-1)},[]),React__default.default.useEffect(()=>{const e=e=>{"ArrowLeft"===e.key?j():"ArrowRight"===e.key?C():"Escape"!==e.key&&"Enter"!==e.key||E(-1)};return"undefined"!=typeof document&&p?.length&&document.addEventListener("keydown",e),()=>{p?.length&&document.removeEventListener("keydown",e)}},[]);e=React__default.default.Children.toArray(e),n=React__default.default.Children.toArray(n);const C=()=>{E(e=>p?.length&&e!==p.length-1?e+1:e)},j=()=>{E(e=>p?.length&&0!==e?e-1:e)};return React__default.default.createElement(Wrapper,{id:f},-1<b&&!!p?.[b]&&React__default.default.createElement(modal.Modal,{alwaysRender:!1,controlledOpen:!0,onChange:e=>!e&&E(-1)},React__default.default.createElement(modal.Modal.Content,{sx:`
|
|
3
3
|
position: relative;
|
|
4
|
-
height: ${
|
|
5
|
-
width: ${
|
|
4
|
+
height: ${$.y};
|
|
5
|
+
width: ${$.x};
|
|
6
6
|
margin: 0 auto;
|
|
7
|
-
`},React__default.default.createElement(NavArrow,{$side:"left",$visible:0!==
|
|
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:1,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:1},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:700,height:427,priority:!0,quality:100,src:p[0],style:{objectFit:"fill",width:"80%",height:"100%",filter:"blur(60px)",position:"absolute",top:0,left:"50%",transform:"translateX(-50%)",zIndex:9e3}}),React__default.default.createElement(lock.Lock,{size:40,color:"grey-7",sx:"z-index: 9001"}),React__default.default.createElement("div",{style:{display:"flex",flexDirection:"column",zIndex:9001}},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:9001,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%;
|
|
@@ -16,6 +16,11 @@
|
|
|
16
16
|
box-shadow: var(--elevation-6);
|
|
17
17
|
border-radius: 16px;
|
|
18
18
|
}
|
|
19
|
+
|
|
20
|
+
.see-more {
|
|
21
|
+
text-decoration: underline;
|
|
22
|
+
cursor: pointer;
|
|
23
|
+
}
|
|
19
24
|
`,Header=styled.styled.div`
|
|
20
25
|
padding: 16px 24px;
|
|
21
26
|
display: flex;
|
|
@@ -58,10 +63,6 @@
|
|
|
58
63
|
height: 100%;
|
|
59
64
|
}
|
|
60
65
|
`}
|
|
61
|
-
|
|
62
|
-
${({$isPaywalled:e})=>e?`
|
|
63
|
-
filter: blur(10px) brightness(0.6);
|
|
64
|
-
clip-path: inset(0px 0px 0px 0px);`:""}
|
|
65
66
|
`,ImageWrapper=styled.styled.div`
|
|
66
67
|
position: relative;
|
|
67
68
|
aspect-ratio: 700 / 427;
|
|
@@ -77,14 +78,16 @@
|
|
|
77
78
|
height: 100%;
|
|
78
79
|
pointer-events: none;
|
|
79
80
|
}
|
|
80
|
-
`,
|
|
81
|
-
position:
|
|
81
|
+
`,BlurredContentWrapper=styled.styled.div`
|
|
82
|
+
position: relative;
|
|
83
|
+
margin-top: 24px;
|
|
82
84
|
display: flex;
|
|
83
85
|
flex-direction: column;
|
|
84
|
-
|
|
86
|
+
width: 700px;
|
|
87
|
+
height: 427px;
|
|
85
88
|
align-items: center;
|
|
86
|
-
|
|
87
|
-
|
|
89
|
+
justify-content: center;
|
|
90
|
+
gap: 16px;
|
|
88
91
|
`,ActionsWrapper=styled.styled.div`
|
|
89
92
|
display: flex;
|
|
90
93
|
justify-content: space-around;
|
|
@@ -111,4 +114,12 @@
|
|
|
111
114
|
&:hover {
|
|
112
115
|
background-color: rgba(0, 0, 0, 0.2);
|
|
113
116
|
}
|
|
117
|
+
`,JoinNow=styled.styled.div`
|
|
118
|
+
margin-top: 24px;
|
|
119
|
+
border-radius: 32px;
|
|
120
|
+
border: 1px solid var(--color-grey-8);
|
|
121
|
+
background-color: white;
|
|
122
|
+
padding: 6px 16px;
|
|
123
|
+
width: fit-content;
|
|
124
|
+
cursor: pointer;
|
|
114
125
|
`;exports.Post=Post;
|
|
@@ -8,5 +8,6 @@ export interface ParagraphProps extends CommonProps {
|
|
|
8
8
|
$fontSize?: 10 | 11 | 12 | 14 | 16;
|
|
9
9
|
$lineHeight?: 14 | 16 | 20 | 24;
|
|
10
10
|
$sx?: string;
|
|
11
|
+
innerRef?: React.RefObject<HTMLParagraphElement>;
|
|
11
12
|
}
|
|
12
|
-
export declare const P: ({ as, children, $fontSize, $lineHeight, $textAlign, sx, ...rest }: ParagraphProps) => React.JSX.Element;
|
|
13
|
+
export declare const P: ({ as, children, $fontSize, $lineHeight, $textAlign, sx, innerRef, ...rest }: ParagraphProps) => React.JSX.Element;
|
|
@@ -22,5 +22,6 @@ export interface PostProps extends React.PropsWithChildren {
|
|
|
22
22
|
url: string;
|
|
23
23
|
};
|
|
24
24
|
onJoin?: () => void;
|
|
25
|
+
monthlyMembershipPrice?: number;
|
|
25
26
|
}
|
|
26
|
-
export declare const Post: ({ actions, author, authorActive, authorHref, authorImage, avatarTooltipContent, avatarTooltipSx, children, content, createdDate, dropdown, hasComments, id, images, isPaidUser, isPaywalled, link, onJoin, }: PostProps) => React.JSX.Element;
|
|
27
|
+
export declare const Post: ({ actions, author, authorActive, authorHref, authorImage, avatarTooltipContent, avatarTooltipSx, children, content, createdDate, dropdown, hasComments, id, images, isPaidUser, isPaywalled, link, onJoin, monthlyMembershipPrice, }: PostProps) => React.JSX.Element;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@soul-refiner/design-system",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.10.2",
|
|
4
4
|
"main": "dist/index.js",
|
|
5
5
|
"types": "dist/src/index.d.ts",
|
|
6
6
|
"license": "MIT",
|
|
@@ -36,6 +36,7 @@
|
|
|
36
36
|
"@storybook/testing-library": "~0.2.0",
|
|
37
37
|
"@types/react": "^18.2.48",
|
|
38
38
|
"@types/react-dom": "18.2.0",
|
|
39
|
+
"@types/react-show-more-text": "^1.4.5",
|
|
39
40
|
"@types/styled-components": "~5.1.26",
|
|
40
41
|
"chromatic": "~6.17.4",
|
|
41
42
|
"husky": "~8.0.0",
|
|
@@ -90,6 +91,7 @@
|
|
|
90
91
|
"react-h5-audio-player": "~3.9.1",
|
|
91
92
|
"react-is": "~18.2.0",
|
|
92
93
|
"react-player": "~2.13.0",
|
|
94
|
+
"react-show-more-text": "^1.7.1",
|
|
93
95
|
"react-tooltip": "~5.18.0",
|
|
94
96
|
"scheduler": "~0.23.0",
|
|
95
97
|
"slate": "~0.101.5",
|