@soul-refiner/design-system 2.1.4 → 2.1.5
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/text_area/text_area.js +1 -1
- package/dist/components/surfaces/discuss_post/discuss_post.js +118 -0
- package/dist/components/surfaces/discuss_post/helpers.js +1 -0
- package/dist/index.js +1 -1
- package/dist/src/components/surfaces/discuss_post/discuss_post.d.ts +26 -0
- package/dist/src/components/surfaces/discuss_post/helpers.d.ts +1 -0
- package/dist/src/components/surfaces/discuss_post/index.d.ts +2 -0
- package/dist/src/components/surfaces/index.d.ts +2 -0
- package/package.json +1 -1
|
@@ -0,0 +1,118 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
"use strict";var React=require("react"),Link=require("next/link"),styled=require("styled-components"),styles=require("../../../common/styles.js"),box=require("../../atoms/box/box.js"),hide=require("../../atoms/hide/hide.js"),time_ago=require("../../atoms/time_ago/time_ago.js"),paragraph=require("../../atoms/typography/paragraph.js"),avatar=require("../../iconography/avatar/avatar.js"),helpers=require("./helpers.js");function _interopDefaultCompat(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var React__default=_interopDefaultCompat(React),Link__default=_interopDefaultCompat(Link),styled__default=_interopDefaultCompat(styled);const MAX_REACTIONS_SHOWN=5,DiscussPost=({avatarSx:e,content:t,createdDate:a,editActions:r,editing:l,firstNewPost:o,handleContentChange:i,id:n,onReact:d,popupActions:u,popupSx:c,reactions:p,reactionModal:s,replyContent:f,replyUserHref:x,replyUserImageUri:_,replyUserName:g,sx:m,userHref:h,userImageUri:y,userName:$,userReactions:R})=>{const b=React__default.default.useRef(null),[v,E]=React__default.default.useState(!1);React__default.default.useEffect(()=>{b.current&&(b.current.value=t)},[]),React__default.default.useEffect(()=>{b?.current&&b.current.value!==t&&i&&i(b.current.value)},[v]),React__default.default.useEffect(()=>{var e;b.current&&(b.current.style.height="48px",e=b.current.scrollHeight,b.current.style.height=e+"px")},[b.current,v,t]);var w=React__default.default.useMemo(()=>helpers.isSameDay(new Date,new Date(a))?React__default.default.createElement(time_ago.TimeAgo,{date:a}):new Intl.DateTimeFormat("en-US",{minute:"numeric",hour:"numeric",day:"numeric",month:"long",year:"numeric"}).format(a),[a]),k=React__default.default.useMemo(()=>p&&Object.entries(p).slice(0,MAX_REACTIONS_SHOWN).sort((e,t)=>e[1]<t[1]?1:-1).map(e=>React__default.default.createElement(Reaction,{key:n+e[0],onClick:()=>d(e[0]),$align:"center",$dir:"row",$gap:5,$userSelected:R?.includes(e[0])},e[0],React__default.default.createElement(paragraph.P,{$bold:!0,$fontSize:10,$lineHeight:14},e[1]))),[p,R]);return React__default.default.createElement(Wrapper,{$editing:l,$firstNewPost:o,$sx:m,id:n},React__default.default.createElement(hide.HideButRender,{show:!l&&!!f},React__default.default.createElement(box.Box,{$align:"center",$gap:4,sx:"margin-left: 56px;"},React__default.default.createElement(ReplyMarker,null),React__default.default.createElement(avatar.Avatar,{as:Link__default.default,href:x,image:_,size:16,sx:"img { cursor: pointer;}"}),React__default.default.createElement(paragraph.P,{as:Link__default.default,href:x,$color:"primary-blue-2",$fontSize:12,$lineHeight:16,sx:"flex-shrink: 0; text-decoration: none;"},"@",g),React__default.default.createElement(paragraph.P,{$fontSize:12,$lineHeight:16,$textClampLines:1},f))),React__default.default.createElement(hide.HideButRender,{show:l},React__default.default.createElement(box.Box,{$gap:16,$align:"flex-start",className:"editing"},React__default.default.createElement(avatar.Avatar,{as:Link__default.default,href:h,image:y,size:40,sx:e}),React__default.default.createElement(box.Box,{$gap:10,sx:`
|
|
3
|
+
flex: 1;
|
|
4
|
+
background-color: var(--color-grey-10);
|
|
5
|
+
border-radius: 8px;
|
|
6
|
+
@media (max-width: 768px) {
|
|
7
|
+
flex-direction: column;
|
|
8
|
+
min-height: calc(${b?.current?.style?.height||"360px"} + 24px);
|
|
9
|
+
}
|
|
10
|
+
`},React__default.default.createElement(TextAreaElement,{onChange:()=>E(e=>!e),ref:b}),React__default.default.createElement(EditActionsWrapper,null,r)))),React__default.default.createElement(hide.HideButRender,{show:!l},React__default.default.createElement(box.Box,{$gap:16,$align:"flex-start"},React__default.default.createElement(PopupActionsWrapper,{$sx:c,className:"popup-actions"},u),React__default.default.createElement(avatar.Avatar,{as:Link__default.default,href:h,image:y,size:40,sx:"img { cursor: pointer; }; "+e}),React__default.default.createElement(box.Box,{$gap:4,$dir:"column",sx:"flex: 1;"},React__default.default.createElement(box.Box,{$align:"center",$gap:8,sx:`height: 20px;
|
|
11
|
+
@media screen and (max-width: 400px) {
|
|
12
|
+
flex-direction: column;
|
|
13
|
+
align-items: flex-start;
|
|
14
|
+
height: 40px;
|
|
15
|
+
gap: 0px;
|
|
16
|
+
}`},React__default.default.createElement(paragraph.P,{$bold:!0,$color:f?"special-orange-1":"primary-blue-2",$fontSize:14,$lineHeight:20},$),React__default.default.createElement(paragraph.P,{$color:"grey-4",$fontSize:10,$lineHeight:14},w)),React__default.default.createElement(paragraph.P,{$fontSize:14,$lineHeight:20,sx:"white-space: pre-line;"},t),React__default.default.createElement(box.Box,{$display:"flex",$flow:"row wrap",$gap:6,sx:"margin-left: auto;"},k,s)))))},Wrapper=styled__default.default.div`
|
|
17
|
+
position: relative;
|
|
18
|
+
padding: 12px 16px;
|
|
19
|
+
display: flex;
|
|
20
|
+
flex-direction: column;
|
|
21
|
+
gap: 8px;
|
|
22
|
+
.popup-actions {
|
|
23
|
+
display: none;
|
|
24
|
+
}
|
|
25
|
+
${({$firstNewPost:e})=>e?`
|
|
26
|
+
&:before {
|
|
27
|
+
content: "";
|
|
28
|
+
position: absolute;
|
|
29
|
+
left: 16px;
|
|
30
|
+
top: 0px;
|
|
31
|
+
height: 1px;
|
|
32
|
+
width: calc(100% - 32px);
|
|
33
|
+
border-top: 1px solid var(--color-red-5);
|
|
34
|
+
}
|
|
35
|
+
&:after {
|
|
36
|
+
position: absolute;
|
|
37
|
+
top: -8px;
|
|
38
|
+
right: 16px;
|
|
39
|
+
content: 'New';
|
|
40
|
+
padding: 0px 4px;
|
|
41
|
+
color: var(--color-white);
|
|
42
|
+
font-family: var(--font-inter);
|
|
43
|
+
font-size: 12px;
|
|
44
|
+
font-weight: 500;
|
|
45
|
+
line-height: 16px;
|
|
46
|
+
background-color: var(--color-red-5);
|
|
47
|
+
border-radius: 18px;
|
|
48
|
+
}`:""}
|
|
49
|
+
${({$editing:e})=>e?`
|
|
50
|
+
background-color: var(--color-grey-9);`:`
|
|
51
|
+
&:hover {
|
|
52
|
+
background-color: var(--color-grey-10);
|
|
53
|
+
.popup-actions {
|
|
54
|
+
display: flex;
|
|
55
|
+
}
|
|
56
|
+
}`}
|
|
57
|
+
${({$sx:e})=>e||""}
|
|
58
|
+
`,TextAreaElement=styled__default.default.textarea`
|
|
59
|
+
min-width: ${({$minHeight:e})=>e?e-24+"px;":""};
|
|
60
|
+
width: 100%;
|
|
61
|
+
padding: 4px 16px;
|
|
62
|
+
flex: 1;
|
|
63
|
+
font-family: var(--font-inter);
|
|
64
|
+
font-size: 14px;
|
|
65
|
+
font-weight: 400;
|
|
66
|
+
line-height: 20px;
|
|
67
|
+
color: var(--color-grey-3);
|
|
68
|
+
border: none;
|
|
69
|
+
outline: none;
|
|
70
|
+
border-radius: 8px;
|
|
71
|
+
background-color: transparent;
|
|
72
|
+
resize: none;
|
|
73
|
+
|
|
74
|
+
&:hover {
|
|
75
|
+
border-color: var(--color-grey-8);
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
&:focus-within {
|
|
79
|
+
border-color: var(--color-primary-blue-2);
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
&::-webkit-scrollbar {
|
|
83
|
+
width: 0px;
|
|
84
|
+
}
|
|
85
|
+
`,ReplyMarker=styled__default.default.div`
|
|
86
|
+
height: 12px;
|
|
87
|
+
width: 24px;
|
|
88
|
+
margin-top: 4px;
|
|
89
|
+
flex-shrink: 0;
|
|
90
|
+
border-left: 2px solid var(--color-grey-9);
|
|
91
|
+
border-top: 2px solid var(--color-grey-9);
|
|
92
|
+
border-radius: 6px 0px 0px 0px;
|
|
93
|
+
`,Reaction=styled__default.default.div`
|
|
94
|
+
${styles.Styles.flex}
|
|
95
|
+
display: flex;
|
|
96
|
+
padding: 2px 6px;
|
|
97
|
+
border-radius: 12px;
|
|
98
|
+
cursor: pointer;
|
|
99
|
+
${({$userSelected:e})=>e?`
|
|
100
|
+
background-color: var(--color-primary-blue-4);
|
|
101
|
+
border: 1px solid var(--color-primary-blue-3);
|
|
102
|
+
`:""}
|
|
103
|
+
`,PopupActionsWrapper=styled__default.default.div`
|
|
104
|
+
position: absolute;
|
|
105
|
+
top: -16px;
|
|
106
|
+
right: 16px;
|
|
107
|
+
display: flex;
|
|
108
|
+
align-items: center;
|
|
109
|
+
border-radius: 4px;
|
|
110
|
+
background-color: var(--color-white);
|
|
111
|
+
border: 1px solid var(--color-grey-9);
|
|
112
|
+
box-shadow: var(--elevation-1);
|
|
113
|
+
${({$sx:e})=>e||""}
|
|
114
|
+
`,EditActionsWrapper=styled__default.default.div`
|
|
115
|
+
display: flex;
|
|
116
|
+
align-items: center;
|
|
117
|
+
gap: 4px;
|
|
118
|
+
`;exports.DiscussPost=DiscussPost;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";const isSameDay=(e,s)=>(sanitizeTime(e),sanitizeTime(s),e.getTime()===s.getTime()),sanitizeTime=e=>{e.setHours(0),e.setMinutes(0),e.setSeconds(0),e.setMilliseconds(0)};exports.isSameDay=isSameDay;
|
package/dist/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";var button=require("./components/actions/button/button.js"),dropdown=require("./components/actions/dropdown/dropdown.js"),rate=require("./components/actions/rate/rate.js"),_switch=require("./components/actions/switch/switch.js"),toggle=require("./components/actions/toggle/toggle.js"),upload=require("./components/actions/upload/upload.js"),box=require("./components/atoms/box/box.js"),hide=require("./components/atoms/hide/hide.js"),seconds_to_duration=require("./components/atoms/seconds_to_duration/seconds_to_duration.js"),display=require("./components/atoms/typography/display.js"),heading=require("./components/atoms/typography/heading.js"),paragraph=require("./components/atoms/typography/paragraph.js"),typography=require("./components/atoms/typography/typography.js"),time_ago=require("./components/atoms/time_ago/time_ago.js"),card=require("./components/card/card.js"),editor=require("./components/editor/editor.js"),simple_editor=require("./components/editor/simple_editor/simple_editor.js"),badge=require("./components/feedback/badge/badge.js"),banner=require("./components/feedback/banner/banner.js"),loader=require("./components/feedback/loader/loader.js"),notification=require("./components/feedback/notification/notification.js"),progress=require("./components/feedback/progress/progress.js"),toast=require("./components/feedback/toast/toast.js"),tooltip=require("./components/feedback/tooltip/tooltip.js"),animated_toast=require("./components/feedback/animated_toast/animated_toast.js"),avatar=require("./components/iconography/avatar/avatar.js"),icon=require("./components/iconography/icon/icon.js"),checkbox=require("./components/input/checkbox/checkbox.js"),date=require("./components/input/date/date.js"),filter=require("./components/input/filter/filter.js"),radio=require("./components/input/radio/radio.js"),search=require("./components/input/search/search.js"),select=require("./components/input/select/select.js"),text_area=require("./components/input/text_area/text_area.js"),text_input=require("./components/input/text_input/text_input.js"),calendar=require("./components/input/calendar/calendar.js"),time=require("./components/input/time/time.js"),video=require("./components/media/video/video.js"),video$1=require("./components/media/video-player/video.js"),breadcrumb=require("./components/navigation/breadcrumb/breadcrumb.js"),inner=require("./components/navigation/inner/inner.js"),tabs=require("./components/navigation/tabs/tabs.js"),accordion=require("./components/surfaces/accordion/accordion.js"),card$1=require("./components/surfaces/carousel/card/card.js"),comment=require("./components/surfaces/comment/comment.js"),drawer=require("./components/surfaces/drawer/drawer.js"),message=require("./components/surfaces/message/message.js"),modal=require("./components/surfaces/modal/modal.js"),portal=require("./components/surfaces/portal/portal.js"),post=require("./components/surfaces/post/post.js"),calendar_date=require("./components/surfaces/calendar_date/calendar_date.js"),table=require("./components/table/table/table.js"),users_selection=require("./components/custom/users_selection/users_selection.js"),courses_selection=require("./components/custom/courses_selection/courses_selection.js"),index=require("./icons/index.js"),emojis=require("./emoji/emojis.json.js");exports.Button=button.Button,exports.Dropdown=dropdown.Dropdown,exports.Rate=rate.Rate,exports.Switch=_switch.Switch,exports.Toggle=toggle.Toggle,exports.Upload=upload.Upload,exports.Box=box.Box,exports.HideButRender=hide.HideButRender,exports.SecToDuration=seconds_to_duration.SecToDuration,exports.Display=display.Display,exports.H=heading.H,exports.P=paragraph.P,exports.Typography=typography.Typography,exports.TimeAgo=time_ago.TimeAgo,exports.Card=card.Card,exports.Editor=editor.Editor,exports.SimpleEditor=simple_editor.SimpleEditor,exports.Badge=badge.Badge,exports.Banner=banner.Banner,exports.Loader=loader.Loader,exports.Notification=notification.Notification,exports.Progress=progress.Progress,exports.Toast=toast.Toast,exports.Tooltip=tooltip.Tooltip,exports.AnimatedToast=animated_toast.AnimatedToast,exports.Avatar=avatar.Avatar,exports.Icon=icon.Icon,exports.Checkbox=checkbox.Checkbox,exports.DatePicker=date.DatePicker,exports.Filter=filter.Filter,exports.Radio=radio.Radio,exports.Search=search.Search,exports.Select=select.Select,exports.TextArea=text_area.TextArea,exports.TextInput=text_input.TextInput,exports.CalendarInput=calendar.CalendarInput,exports.Time=time.Time,exports.Video=video.Video,exports.VideoPlayer=video$1.VideoPlayer,exports.Breadcrumb=breadcrumb.Breadcrumb,exports.InnerNav=inner.InnerNav,exports.Tabs=tabs.Tabs,exports.Accordion=accordion.Accordion,exports.CardCarousel=card$1.CardCarousel,exports.Comment=comment.Comment,exports.Drawer=drawer.Drawer,exports.Message=message.Message,exports.Modal=modal.Modal,exports.Portal=portal.Portal,exports.Post=post.Post,exports.CalendarDate=calendar_date.CalendarDate,exports.Table=table.Table,exports.UsersSelection=users_selection.UsersSelection,exports.CoursesSelection=courses_selection.CoursesSelection,exports.Icons=index,exports.emoji=emojis;
|
|
1
|
+
"use strict";var button=require("./components/actions/button/button.js"),dropdown=require("./components/actions/dropdown/dropdown.js"),rate=require("./components/actions/rate/rate.js"),_switch=require("./components/actions/switch/switch.js"),toggle=require("./components/actions/toggle/toggle.js"),upload=require("./components/actions/upload/upload.js"),box=require("./components/atoms/box/box.js"),hide=require("./components/atoms/hide/hide.js"),seconds_to_duration=require("./components/atoms/seconds_to_duration/seconds_to_duration.js"),display=require("./components/atoms/typography/display.js"),heading=require("./components/atoms/typography/heading.js"),paragraph=require("./components/atoms/typography/paragraph.js"),typography=require("./components/atoms/typography/typography.js"),time_ago=require("./components/atoms/time_ago/time_ago.js"),card=require("./components/card/card.js"),editor=require("./components/editor/editor.js"),simple_editor=require("./components/editor/simple_editor/simple_editor.js"),badge=require("./components/feedback/badge/badge.js"),banner=require("./components/feedback/banner/banner.js"),loader=require("./components/feedback/loader/loader.js"),notification=require("./components/feedback/notification/notification.js"),progress=require("./components/feedback/progress/progress.js"),toast=require("./components/feedback/toast/toast.js"),tooltip=require("./components/feedback/tooltip/tooltip.js"),animated_toast=require("./components/feedback/animated_toast/animated_toast.js"),avatar=require("./components/iconography/avatar/avatar.js"),icon=require("./components/iconography/icon/icon.js"),checkbox=require("./components/input/checkbox/checkbox.js"),date=require("./components/input/date/date.js"),filter=require("./components/input/filter/filter.js"),radio=require("./components/input/radio/radio.js"),search=require("./components/input/search/search.js"),select=require("./components/input/select/select.js"),text_area=require("./components/input/text_area/text_area.js"),text_input=require("./components/input/text_input/text_input.js"),calendar=require("./components/input/calendar/calendar.js"),time=require("./components/input/time/time.js"),video=require("./components/media/video/video.js"),video$1=require("./components/media/video-player/video.js"),breadcrumb=require("./components/navigation/breadcrumb/breadcrumb.js"),inner=require("./components/navigation/inner/inner.js"),tabs=require("./components/navigation/tabs/tabs.js"),accordion=require("./components/surfaces/accordion/accordion.js"),card$1=require("./components/surfaces/carousel/card/card.js"),comment=require("./components/surfaces/comment/comment.js"),discuss_post=require("./components/surfaces/discuss_post/discuss_post.js"),drawer=require("./components/surfaces/drawer/drawer.js"),message=require("./components/surfaces/message/message.js"),modal=require("./components/surfaces/modal/modal.js"),portal=require("./components/surfaces/portal/portal.js"),post=require("./components/surfaces/post/post.js"),calendar_date=require("./components/surfaces/calendar_date/calendar_date.js"),table=require("./components/table/table/table.js"),users_selection=require("./components/custom/users_selection/users_selection.js"),courses_selection=require("./components/custom/courses_selection/courses_selection.js"),index=require("./icons/index.js"),emojis=require("./emoji/emojis.json.js");exports.Button=button.Button,exports.Dropdown=dropdown.Dropdown,exports.Rate=rate.Rate,exports.Switch=_switch.Switch,exports.Toggle=toggle.Toggle,exports.Upload=upload.Upload,exports.Box=box.Box,exports.HideButRender=hide.HideButRender,exports.SecToDuration=seconds_to_duration.SecToDuration,exports.Display=display.Display,exports.H=heading.H,exports.P=paragraph.P,exports.Typography=typography.Typography,exports.TimeAgo=time_ago.TimeAgo,exports.Card=card.Card,exports.Editor=editor.Editor,exports.SimpleEditor=simple_editor.SimpleEditor,exports.Badge=badge.Badge,exports.Banner=banner.Banner,exports.Loader=loader.Loader,exports.Notification=notification.Notification,exports.Progress=progress.Progress,exports.Toast=toast.Toast,exports.Tooltip=tooltip.Tooltip,exports.AnimatedToast=animated_toast.AnimatedToast,exports.Avatar=avatar.Avatar,exports.Icon=icon.Icon,exports.Checkbox=checkbox.Checkbox,exports.DatePicker=date.DatePicker,exports.Filter=filter.Filter,exports.Radio=radio.Radio,exports.Search=search.Search,exports.Select=select.Select,exports.TextArea=text_area.TextArea,exports.TextInput=text_input.TextInput,exports.CalendarInput=calendar.CalendarInput,exports.Time=time.Time,exports.Video=video.Video,exports.VideoPlayer=video$1.VideoPlayer,exports.Breadcrumb=breadcrumb.Breadcrumb,exports.InnerNav=inner.InnerNav,exports.Tabs=tabs.Tabs,exports.Accordion=accordion.Accordion,exports.CardCarousel=card$1.CardCarousel,exports.Comment=comment.Comment,exports.DiscussPost=discuss_post.DiscussPost,exports.Drawer=drawer.Drawer,exports.Message=message.Message,exports.Modal=modal.Modal,exports.Portal=portal.Portal,exports.Post=post.Post,exports.CalendarDate=calendar_date.CalendarDate,exports.Table=table.Table,exports.UsersSelection=users_selection.UsersSelection,exports.CoursesSelection=courses_selection.CoursesSelection,exports.Icons=index,exports.emoji=emojis;
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
export interface DiscussPostProps {
|
|
3
|
+
avatarSx?: string;
|
|
4
|
+
content: string;
|
|
5
|
+
createdDate: Date;
|
|
6
|
+
editActions?: React.ReactElement;
|
|
7
|
+
editing?: boolean;
|
|
8
|
+
firstNewPost?: boolean;
|
|
9
|
+
handleContentChange?: (value: string) => void;
|
|
10
|
+
id: string;
|
|
11
|
+
onReact: (reaction: string) => void;
|
|
12
|
+
popupActions?: React.ReactElement;
|
|
13
|
+
popupSx?: string;
|
|
14
|
+
reactions?: Record<string, number>;
|
|
15
|
+
reactionModal?: React.ReactElement;
|
|
16
|
+
replyContent: string;
|
|
17
|
+
replyUserHref?: string;
|
|
18
|
+
replyUserImageUri?: string;
|
|
19
|
+
replyUserName?: string;
|
|
20
|
+
sx?: string;
|
|
21
|
+
userHref: string;
|
|
22
|
+
userImageUri: string;
|
|
23
|
+
userName: string;
|
|
24
|
+
userReactions?: string[];
|
|
25
|
+
}
|
|
26
|
+
export declare const DiscussPost: ({ avatarSx, content, createdDate, editActions, editing, firstNewPost, handleContentChange, id, onReact, popupActions, popupSx, reactions, reactionModal, replyContent, replyUserHref, replyUserImageUri, replyUserName, sx, userHref, userImageUri, userName, userReactions, }: DiscussPostProps) => React.JSX.Element;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const isSameDay: (date1: Date, date2: Date) => boolean;
|
|
@@ -4,6 +4,8 @@ export { CardCarousel } from './carousel';
|
|
|
4
4
|
export type { CardCarouselProps } from './carousel';
|
|
5
5
|
export { Comment } from './comment';
|
|
6
6
|
export type { CommentProps } from './comment';
|
|
7
|
+
export { DiscussPost } from './discuss_post';
|
|
8
|
+
export type { DiscussPostProps } from './discuss_post';
|
|
7
9
|
export { Drawer } from './drawer';
|
|
8
10
|
export type { DrawerProps } from './drawer';
|
|
9
11
|
export { Message } from './message';
|