@logora/debate 0.1.0

package/src/components/argument/argument/Argument.docs.mdx

@@ -0,0 +1,60 @@
+---
+description: A box component to show argument.
+labels: ['argument']
+---
+
+A box component to show argument.  
+It has a different style for answers and deleted message.
+
+### Component usage
+```js
+    import { Argument } from '@logora/debate.argument.argument';
+```
+```js
+const argument = {
+    id: 414,
+    content: "My super argument",
+    upvotes: 0,
+    group_id: 417,
+    is_reply: false,
+    created_at: "2024-02-07T10:34:16.888Z",
+    score: 50,
+    author: {
+        image_url: "user.image_url",
+        full_name: "Full Name",
+        slug: "full-name",
+        points: 1320,
+        last_activity: "2024-02-07T10:34:16.888Z",
+        description: "Super job"
+    },
+    position: {
+        id: 1,
+        name: "Yes",
+        language: "en",
+        translation_entries: []
+    }
+};
+
+const positions = [
+    {
+        id: 1,
+        name: "Yes",
+        language: "en",
+        translation_entries: []
+    },
+    {
+        id: 2,
+        name: "No",
+        language: "en",
+        translation_entries: []
+    },
+];
+
+<Argument
+    argument={argument}
+    positions={positions}
+    groupName={"Debate name"}
+    nestingLevel={0}
+    disabled={false}
+/>
+```

package/src/components/argument/argument/Argument.jsx

@@ -0,0 +1,358 @@
+import React, { Suspense, lazy, useEffect, useState, useCallback } from "react";
+import { useAuth } from "@logora/debate/auth/use_auth";
+import { useConfig } from '@logora/debate/data/config_provider';
+import { useIntl } from "react-intl";
+import { useTranslatedContent } from '@logora/debate/translation/translated_content';
+import { ContentHeader } from '@logora/debate/user_content/content_header';
+import { ReadMore } from '@logora/debate/text/read_more';
+import { Icon } from '@logora/debate/icons/icon';
+import { TranslationButton } from '@logora/debate/translation/translation_button';
+import { UserContentSkeleton } from '@logora/debate/skeleton/user_content_skeleton';
+import { AnnouncementDialog } from "@logora/debate/dialog/announcement_dialog";
+import { SourceListItem } from "@logora/debate/source/source_list_item";
+import { ContentFooter } from '@logora/debate/user_content/content_footer';
+import { VoteButton } from '@logora/debate/vote/vote_button';
+import { Button } from '@logora/debate/action/button';
+import { VotePaginatedList } from '@logora/debate/list/paginated_list';
+import { HashScroll } from '@logora/debate/tools/hash_scroll';
+import { ReplyFooter } from "./ReplyFooter";
+import { useRichContent } from "./useRichContent";
+import cx from "classnames";
+import styles from "./Argument.module.scss";
+const ArgumentInput = lazy(() => import('@logora/debate/input/argument_input'));
+import PropTypes from "prop-types";
+
+export const Argument = ({ argument, argumentReplies, nestingLevel = 0, groupType, groupName, positions = [], disableLinks = false, parentArgument, flashParent, expandable, disabled = false, hideFooter = false, hideReplies, vote, fixedContentHeight = false, enableEdition = true, enableDeletion = true, deleteListId, showModerationFeedback, lineCount = 5, replyRedirectUrl, hideContent = false }) => {
+	const intl = useIntl();
+	const { isLoggedIn, currentUser } = useAuth();
+	const userIsBanned = currentUser?.moderation_status === "banned";
+	const config = useConfig();
+
+
+
+	const [expandReplies, setExpandReplies] = useState(false);
+	const [flash, setFlash] = useState(false);
+	const [showReplyInput, setShowReplyInput] = useState(false);
+	const richContent = useRichContent(argument);
+	const [extraReplies, setExtraReplies] = useState();
+	const content = useTranslatedContent(argument.content, argument.language, "content", argument.translation_entries);
+	const position = useTranslatedContent(argument.position?.name, argument.position?.language, "name", argument.position?.translation_entries);
+	const componentId = `argument_${argument.id}`;
+	const positionIndex = argument.position && positions?.map((e) => e.id).indexOf(argument.position.id) + 1;
+
+	useEffect(() => {
+		if (argumentReplies !== undefined) { displayRepliesThread() }
+	}, [argumentReplies])
+
+	const scrollToArgument = (argumentId) => {
+		const currentArgumentId = componentId;
+		if (currentArgumentId === argumentId) {
+			const argumentElement = document.getElementById(argumentId);
+			if (argumentElement) {
+				argumentElement.scrollIntoView({ behavior: "smooth" });
+			}
+			setFlash(true);
+		}
+	};
+
+	const toggleReplyInput = () => {
+		setShowReplyInput(showReplyInput => !showReplyInput);
+	};
+
+	const toggleReplies = () => {
+		setExpandReplies(expandReplies => !expandReplies);
+		setExtraReplies([]);
+	}
+
+	const transformReplies = (reply) => {
+		if (extraReplies?.find(r => r.id === reply.id)) { return; }
+		return reply;
+	}
+
+	const displaySource = useCallback((source, index) => {
+		return <SourceListItem key={index} publisher={source.publisher} url={source.source_url} title={source.title} index={index} />;
+	}, [])
+
+	const displayRepliesThread = () => {
+		if (argumentReplies && Array.isArray(argumentReplies)) {
+			const filteredReplies = argumentReplies.filter((reply) => reply.reply_to_id === argument.id);
+			if (filteredReplies.length > 0) {
+				setExtraReplies(filteredReplies);
+				setExpandReplies(true);
+			}
+		}
+	};
+
+	const displayReply = (reply = null) => {
+		return (
+			<ArgumentContainer
+				{...(reply ? { argument: reply } : {})}
+				nestingLevel={nestingLevel + 1}
+				disabled={disabled}
+				groupName={groupName}
+				groupType={groupType}
+				positions={positions}
+				argumentReplies={argumentReplies}
+				parentArgument={argument}
+				flashParent={(argumentId) => scrollToArgument(`argument_${argumentId}`)}
+			/>
+		)
+	}
+
+	return (
+		<HashScroll elementId={componentId} onScroll={() => setFlash(true)}>
+			<div
+				className={cx(
+					styles.argument,
+					{
+						[styles.flash]: flash,
+						[styles.argumentReply]: argument.is_reply === true,
+					},
+					styles[`level-${nestingLevel}`],
+					styles[`position-${!(argument.author.role === "editor" || argument.author.role === "moderator") && positionIndex}`]
+				)}
+				id={componentId}
+			>
+				<ContentHeader
+					selectedContent={argument.score === 99}
+					author={argument.author}
+					tag={(argument.author.role === "editor" || argument.author.role === "moderator") && argument.is_reply ? null : position.translatedContent}
+					date={argument.created_at}
+					tagClassName={styles[`headerPosition-${positionIndex}`]}
+					disableLinks={disableLinks}
+					isDeleted={argument.is_deleted}
+					showModerationFeedback={showModerationFeedback ?? (argument.status === "rejected" && config.moderation?.showFeedback === true)}
+					moderationReason={argument.moderation_entry?.moderation_reason}
+					moderationNotes={argument.moderation_entry?.moderator_notes}
+					moderationPolicyUrl={config.provider?.userGuideUrl}
+				/>
+				{argument.is_deleted ? (
+					<div className={styles.argumentDeletedBody}>
+						{intl.formatMessage({
+							id: "info.deleted_by_user",
+							defaultMessage: "Content deleted by the user",
+						})}
+					</div>
+				) : hideContent ? (
+					<div className={styles.argumentDeletedBody}>
+						{intl.formatMessage({
+							id: "argument.argument.content_deleted",
+							defaultMessage: "This content has been removed.",
+						})}
+					</div>
+				) : (
+					<>
+						<div className={cx(styles.argumentBody, {
+							[styles.fixedHeight]: config?.layout?.showAllArgumentInEmbed !== true ? fixedContentHeight : false
+						})}>
+							{argument.is_reply && parentArgument && (
+								<div className={styles.replyTo} onClick={() => flashParent(parentArgument.id)}>
+									{intl.formatMessage({ id: "info.replying_to", defaultMessage: "Replying to" })}
+									<span className={styles.replyingTo}>
+										{parentArgument.is_deleted
+											? intl.formatMessage({ id: "info.deleted", defaultMessage: "Deleted" })
+											: parentArgument.author.full_name}
+										<Icon name="chat" height={16} />
+									</span>
+								</div>
+							)}
+
+							<ReadMore
+								content={
+									<>
+										{argument.is_edited && (
+											<div className={styles.edited}>
+												{intl.formatMessage({ id: "argument.argument.updated", defaultMessage: "Updated argument" })}
+											</div>
+										)}
+
+										{richContent && !content.isTranslated ? (
+											<div
+												className={styles.argumentContent}
+												dangerouslySetInnerHTML={{ __html: richContent }}
+											/>
+										) : (
+											<div className={styles.argumentContent}>
+												{content.translatedContent}
+											</div>
+										)}
+
+										{content.isTranslated && (
+											<TranslationButton
+												language={argument.language}
+												callback={() => content.toggleContent()}
+											/>
+										)}
+									</>
+								}
+								lineCount={config?.layout?.showAllArgumentInEmbed !== true ? lineCount : undefined}
+								readMoreText={intl.formatMessage({ id: "action.read_more", defaultMessage: "Read more" })}
+								readLessText={intl.formatMessage({ id: "action.read_less", defaultMessage: "Read less" })}
+								expandable={config?.layout?.showAllArgumentInEmbed !== true ? expandable : false}
+								readMoreClassName={argument.is_reply ? styles.replyStyle : styles.argumentStyle}
+							/>
+						</div>
+
+						{argument.sources?.length > 0 && (
+							<div className={styles.argumentSourcesList}>
+								{argument.sources.map(displaySource)}
+							</div>
+						)}
+					</>
+				)}
+
+				{!hideFooter && !argument.is_deleted &&
+					<ContentFooter
+						resource={argument}
+						disabled={disabled || argument.status === "rejected" || (!isLoggedIn && config?.actions?.disableInputForVisitor === true) || userIsBanned}
+						reportType={"Message"}
+						softDelete={config.actions?.softDelete}
+						deleteType={"messages"}
+						deleteListId={deleteListId}
+						enableReply={nestingLevel <= 2 || (currentUser.role === "editor" || currentUser.role === "moderator")}
+						handleReplyTo={toggleReplyInput}
+						replyRedirectUrl={replyRedirectUrl}
+						shareUrl={`https://app.logora.fr/share/a/${argument.id}`}
+						shareTitle={intl.formatMessage({ id: "share.argument.title", defaultMessage: "Share a debate" })}
+						shareText={intl.formatMessage({ id: "share.argument.text", defaultMessage: "This argument may interest you" })}
+						shareCode={`<iframe src="https://cdn.logora.com/embed.html?shortname=${config.shortname}&id=${argument.id}&resource=argument" frameborder="0" width="100%" height="275px" scrolling="no"></iframe>`}
+						showShareCode={config?.actions?.hideCodeShare !== true}
+						showShareText
+						showShareButton={config?.actions?.hideShareButton !== true}
+						enableReport={!(argument.score === 100 && argument.manual_score)}
+						enableEdition={enableEdition}
+						enableDeletion={enableDeletion}
+					>
+						<VoteButton
+							voteableType={"Message"}
+							voteableId={argument.id}
+							totalUpvote={argument.upvotes}
+							totalDownvote={0}
+							activeClassName={styles[`voteButtonPosition-${positionIndex}`]}
+							disabled={argument.status === "rejected" || (currentUser?.id === argument?.author?.id) || userIsBanned}
+						/>
+					</ContentFooter>
+				}
+				{!hideFooter && !hideReplies &&
+					<ReplyFooter
+						numberReplies={argument.number_replies}
+						repliesAuthors={argument.replies_authors}
+						expandReplies={expandReplies}
+						onToggleReplies={toggleReplies}
+					/>
+				}
+			</div>
+			{!hideReplies &&
+				<>
+					{showReplyInput && (
+						<Suspense fallback={null}>
+							<ArgumentInput
+								key={`Reply${argument.id}`}
+								groupId={argument.group_id}
+								groupType={groupType}
+								groupName={groupName}
+								positions={positions}
+								parentId={argument.id}
+								positionId={vote?.position_id}
+								disabled={disabled}
+								hideSourceAction={config?.actions?.disableUserSources || false}
+								onSubmit={(reply) => {
+									toggleReplyInput();
+									setExtraReplies([reply]);
+									setExpandReplies(true);
+								}}
+								isReply
+								avatarSize={40}
+								placeholder={intl.formatMessage({ id: "input.reply_input.your_answer", defaultMessage: "Your answer" })}
+								userGuideUrl={config?.provider?.userGuideUrl}
+								hideUserGuideLink={config?.provider?.hideUserGuideLink}
+							/>
+						</Suspense>
+					)}
+					{extraReplies?.length > 0 && expandReplies &&
+						<div className={styles.repliesList}>
+							{extraReplies.map(r => displayReply(r))}
+						</div>
+					}
+					{expandReplies &&
+						<div className={styles.repliesList}>
+							<VotePaginatedList
+								voteableType={"Message"}
+								currentListId={`argument_${argument.id}_reply_list`}
+								loadingComponent={<UserContentSkeleton />}
+								resource={"messages"}
+								sort={"+created_at"}
+								filters={{ message_id: argument.id, is_reply: true, status: "accepted" }}
+								perPage={5}
+								display={"column"}
+								resourcePropName={'argument'}
+								emptyListComponent={<></>}
+								transformData={(reply) => transformReplies(reply)}
+							>
+								{displayReply(argument)}
+							</VotePaginatedList>
+						</div>
+					}
+					{extraReplies?.length > 0 && !expandReplies &&
+						<div className={styles.repliesList}>
+							{argument.number_replies > 1 &&
+								<div className={styles.readMoreLink}>
+									<Button
+										role="link"
+										rightIcon={<Icon name="lightArrow" height={10} width={10} />}
+										handleClick={toggleReplies}
+									>
+										{intl.formatMessage({ id: "argument.argument.see_more", defaultMessage: "See more" })}
+									</Button>
+								</div>
+							}
+						</div>
+					}
+				</>
+			}
+		</HashScroll>
+	);
+};
+
+export const ArgumentContainer = Argument;
+
+Argument.propTypes = {
+	/** Argument data */
+	argument: PropTypes.object.isRequired,
+	/** If reply, array with argument and all parents */
+	argumentReplies: PropTypes.array,
+	/** Nesting level of the argument */
+	nestingLevel: PropTypes.number,
+	/** Positions of the debate */
+	positions: PropTypes.array.isRequired,
+	/** If true, disables links */
+	disableLinks: PropTypes.bool,
+	/** Flash border of parent argument */
+	flashParent: PropTypes.func,
+	/** Parent argument */
+	parentArgument: PropTypes.object,
+	/** If true, content is expandable */
+	expandable: PropTypes.bool,
+	/** If true, disabled mode in argument */
+	disabled: PropTypes.bool,
+	/** If true, hides footer, including replies */
+	hideFooter: PropTypes.bool,
+	/** If true, hide replies */
+	hideReplies: PropTypes.bool,
+	/** Type of the group */
+	groupType: PropTypes.string,
+	/** Name of the group the argument is in */
+	groupName: PropTypes.string,
+	/** Vote data */
+	vote: PropTypes.object,
+	/** If true, fix argument height */
+	fixedContentHeight: PropTypes.bool,
+	/** If true, enable edition */
+	enableEdition: PropTypes.bool,
+	/** Id of the list to delete the item from */
+	deleteListId: PropTypes.string,
+	/** Clicking reply redirects to this URL instead of inline reply */
+	replyRedirectUrl: PropTypes.string,
+	/** If true, hide content  */
+	hideContent: PropTypes.bool,
+};

package/src/components/argument/argument/Argument.module.scss

@@ -0,0 +1,233 @@
+@use 'styles/spacing' as spacing;
+@use 'styles/theme' as theme;
+@use 'styles/display' as display;
+
+
+.argument {
+	border-radius: theme.$box-border-radius;
+	box-shadow: theme.$box-shadow;
+	transition: margin-top 2s;
+	border: theme.$box-border;
+	scroll-margin-top: 150px;
+	background-color: theme.$background-color-primary;
+	@include spacing.p(3, xs);
+	display: flex;
+	flex-direction: column;
+	gap: spacing.$spacer;
+}
+
+.edited {
+	font-size: theme.$font-size-extra-small;
+	color: theme.$text-secondary;
+	line-height: theme.$line-height-loose;
+	@include spacing.mb(1.5, xs);
+}
+
+.argumentReply {
+	position: relative;
+	background-color: theme.$text-tertiary;
+	border-top-left-radius: 0;
+	border-bottom-left-radius: 0;
+	box-shadow: theme.$box-shadow;
+	border-top-right-radius: theme.$box-border-radius;
+	border-bottom-right-radius: theme.$box-border-radius;
+	border-left: 6px solid;
+	border-left-color: theme.$call-primary !important;
+
+	&.position-1 {
+		border-left-color: theme.$for-primary !important;
+	}
+
+	&.position-2 {
+		border-left-color: theme.$against-primary !important;
+	}
+
+	&.position-3 {
+		border-left-color: theme.$third-position-color-primary !important;
+	}
+
+	@for $i from 1 through 5 {
+		&.level-#{$i} {
+			margin-left: #{$i}em !important;
+		}
+	}
+
+	&::before {
+		content: "";
+		border-left: 4px solid theme.$text-secondary;
+		position: absolute;
+		width: 4px;
+		height: 10px;
+		top: -10px;
+		left: 2em;
+	}
+
+	@include display.media-breakpoint-down(xs) {
+		border-left: 4px solid;
+	}
+}
+
+.flash {
+	-webkit-transition: box-shadow 0.8s ease-in-out;
+	-moz-transition: box-shadow 0.8s ease-in-out;
+	-o-transition: box-shadow 0.8s ease-in-out;
+	transition: box-shadow 0.8s ease-in-out;
+	box-shadow: -4px 4px 15px 3px rgba(0, 0, 0, 0.15);
+}
+
+.position-1.flash {
+	border-color: theme.$for-primary;
+}
+
+.position-2.flash {
+	border-color: theme.$against-primary;
+}
+
+.position-3.flash {
+	border-color: theme.$third-position-color-primary;
+	@include spacing.mt(2, xs);
+}
+
+.argumentBody {
+	font-size: theme.$font-size-normal;
+	line-height: theme.$line-height-loose;
+}
+
+.argumentDeletedBody {
+	font-size: theme.$font-size-small;
+	color: theme.$text-secondary;
+}
+
+.fixedHeight {
+	height: 100px;
+	overflow: hidden;
+	position: relative;
+
+	&:after {
+		content: "";
+		position: absolute;
+		z-index: 1;
+		bottom: 0;
+		left: 0;
+		right: 0;
+		pointer-events: none;
+		background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 90%);
+		width: 100%;
+		height: 5em;
+	}
+}
+
+.argumentContent {
+	line-height: theme.$line-height-loose;
+	overflow-wrap: break-word;
+	word-wrap: break-word;
+
+	& * {
+		font-size: theme.$font-size-normal;
+	}
+}
+
+.argumentSourcesList {
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: flex-start;
+	font-size: theme.$font-size-extra-small;
+	font-weight: theme.$font-weight-normal;
+}
+
+.argumentSourcesList a {
+	text-decoration: none;
+}
+
+.repliesList {
+	@include spacing.mt(2, xs);
+}
+
+.readMoreLink {
+	@include spacing.mt(2.5, xs);
+	display: flex;
+	justify-content: center;
+}
+
+.replyStyle {
+    background: theme.$text-tertiary;
+}
+
+.replyTo {
+	display: flex !important;
+	flex-direction: row !important;
+	align-items: flex-start !important;
+	@include spacing.pb(2, xs);
+	font-size: theme.$font-size-extra-small;
+	color: theme.$text-secondary;
+	cursor: pointer;
+	overflow: hidden;
+	white-space: nowrap;
+
+	span {
+		@include spacing.pl(1, xs);
+		cursor: pointer;
+		text-decoration: underline;
+	}
+
+	svg {
+		padding: 2px 0 0 2px;
+		fill: theme.$text-secondary;
+	}
+}
+
+.replyingTo {
+	display: flex !important;
+}
+
+.headerPosition-0 {
+	background-color: theme.$call-primary !important;
+}
+
+.headerPosition-1 {
+	background-color: theme.$for-primary !important;
+}
+
+.headerPosition-2 {
+	background-color: theme.$against-primary !important;
+}
+
+.headerPosition-3 {
+	background-color: theme.$third-position-color-primary !important;
+}
+
+.voteButtonPosition-1 {
+	color: theme.$for-primary !important;
+
+	& svg {
+		fill: theme.$for-primary !important;
+	}
+}
+
+.voteButtonPosition-2 {
+	color: theme.$against-primary !important;
+
+	& svg {
+		fill: theme.$against-primary !important;
+	}
+}
+
+.voteButtonPosition-3 {
+	color: theme.$third-position-color-primary !important;
+
+	& svg {
+		fill: theme.$third-position-color-primary !important;
+	}
+}
+
+
+@media (prefers-color-scheme: dark) {
+	.replyStyle {
+		background-color: theme.$text-tertiary;
+	}
+
+	.argumentStyle {
+		background-color: theme.$background-color-primary;
+	}
+}