@logora/debate 0.1.0

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

@@ -0,0 +1,232 @@
+import React from 'react';
+import { IntlProvider } from 'react-intl';
+import { ConfigProvider } from '@logora/debate/data/config_provider';
+import { BrowserRouter } from 'react-router-dom';
+import { Location } from '@logora/debate/util/location';
+import { dataProvider, DataProviderContext } from '@logora/debate/data/data_provider';
+import { AuthContext } from '@logora/debate/auth/use_auth';
+import { ModalProvider } from '@logora/debate/dialog/modal';
+import { ListProvider } from '@logora/debate/list/list_provider';
+import { ToastProvider } from '@logora/debate/dialog/toast_provider';
+import { VoteProvider } from '@logora/debate/vote/vote_provider';
+import { InputProvider } from '@logora/debate/input/input_provider';
+import { Argument } from './Argument';
+import { IconProvider } from '@logora/debate/icons/icon_provider';
+import { ResponsiveProvider } from '@logora/debate/hooks/use_responsive';
+import * as regularIcons from '@logora/debate/icons/regular_icons';
+import { faker } from '@faker-js/faker';
+
+const routes = {
+    userShowLocation: new Location('espace-debat/user/:userSlug', { userSlug: '' })
+};
+
+const vote = {
+    id: faker.number.int(),
+    voteable_type: faker.lorem.word(),
+    voteable_id: faker.number.int(),
+    user_id: faker.number.int()
+};
+
+const generateArgument = (overrides) => ({
+    id: 414,
+    content: faker.lorem.sentences(3),
+    upvotes: 0,
+    group_id: 417,
+    is_reply: false,
+    created_at: faker.date.recent(),
+    is_deleted: false,
+    score: 50,
+    author: {
+        image_url: faker.image.avatarGitHub(),
+        full_name: faker.person.fullName(),
+        hash_id: faker.lorem.slug(),
+        slug: faker.lorem.slug(),
+        points: 1320,
+        last_activity: new Date(),
+        description: faker.person.jobTitle()
+    },
+    position: {
+        id: 1,
+        name: 'Yes',
+        language: 'en',
+        translation_entries: []
+    },
+    ...overrides
+});
+
+const baseArgument = generateArgument();
+const longArgument = generateArgument({ content: faker.lorem.sentences(15) });
+const argumentReply = generateArgument({ id: 415, is_reply: true, reply_to_id: baseArgument.id });
+const argumentDeleted = generateArgument({ id: 416, is_deleted: true });
+const argumentWithReplies = generateArgument({
+    id: 417,
+    content: faker.lorem.sentences(2),
+    number_replies: 3,
+    replies_authors: Array.from({ length: 3 }).map(() => ({
+        image_url: faker.image.avatarGitHub(),
+        full_name: faker.person.fullName()
+    }))
+});
+
+const positions = [
+    { id: 1, name: 'Yes', language: 'en', translation_entries: [] },
+    { id: 2, name: 'No', language: 'en', translation_entries: [] }
+];
+
+const groupName = faker.lorem.sentence(5);
+
+const httpClient = {
+    get: () => Promise.resolve({ data: { success: true, data: [argumentReply] } }),
+    post: (url) => {
+        if (url.includes('vote')) {
+            return Promise.resolve({ data: { success: true, data: { resource: vote } } });
+        }
+        if (url.includes('messages')) {
+            return Promise.resolve({ data: { success: true, data: { resource: argumentReply } } });
+        }
+        return Promise.reject(new Error('Unknown endpoint'));
+    },
+    patch: () => null,
+    delete: () => Promise.resolve({ data: { success: true, data: {} } })
+};
+
+const currentUser = { id: vote.user_id };
+const data = dataProvider(httpClient, 'https://mock.example.api');
+
+const BaseProviders = ({ children, config }) => (
+    <BrowserRouter>
+        <ConfigProvider routes={{ ...routes }} config={config}>
+            <DataProviderContext.Provider value={{ dataProvider: data }}>
+                <AuthContext.Provider value={{ currentUser, isLoggedIn: true }}>
+                    <ResponsiveProvider>
+                        <ModalProvider>
+                            <ListProvider>
+                                <ToastProvider>
+                                    <VoteProvider>
+                                        <InputProvider>
+                                            <IconProvider library={regularIcons}>
+                                                <IntlProvider locale="en">{children}</IntlProvider>
+                                            </IconProvider>
+                                        </InputProvider>
+                                    </VoteProvider>
+                                </ToastProvider>
+                            </ListProvider>
+                        </ModalProvider>
+                    </ResponsiveProvider>
+                </AuthContext.Provider>
+            </DataProviderContext.Provider>
+        </ConfigProvider>
+    </BrowserRouter>
+);
+
+const getScenarioData = (mode) => {
+    switch (mode) {
+        case 'reply':
+            return { argument: argumentReply, parentArgument: baseArgument, nestingLevel: 1 };
+        case 'deleted':
+            return { argument: argumentDeleted };
+        case 'withReplies':
+            return { argument: argumentWithReplies };
+        case 'withArgumentReplies':
+            return { argument: baseArgument, argumentReplies: [argumentReply] };
+        case 'emptyContent':
+            return { argument: { ...baseArgument, content: '' } };
+        case 'rejected':
+            return {
+                argument: {
+                    ...baseArgument,
+                    status: 'rejected',
+                    moderation_entry: {
+                        moderation_reason: faker.lorem.sentence(),
+                        moderator_notes: faker.lorem.paragraph()
+                    }
+                }
+            };
+        default:
+            return { argument: baseArgument };
+    }
+};
+
+const meta = {
+    title: 'Argument/Argument',
+    component: Argument,
+    args: {
+        mode: 'default',
+        useLongContent: false,
+        expandable: true,
+        disableLinks: false,
+        disabled: false,
+        hideFooter: false,
+        enableDeletion: true,
+        enableEdition: true,
+        hideContent: false,
+        showModerationFeedback: false
+    },
+    argTypes: {
+        mode: {
+            control: 'select',
+            options: ['default', 'reply', 'deleted', 'withReplies', 'withArgumentReplies', 'emptyContent', 'rejected']
+        },
+        useLongContent: { control: 'boolean' },
+        expandable: { control: 'boolean' },
+        disableLinks: { control: 'boolean' },
+        disabled: { control: 'boolean' },
+        hideFooter: { control: 'boolean' },
+        enableDeletion: { control: 'boolean' },
+        enableEdition: { control: 'boolean' },
+        hideContent: { control: 'boolean' },
+        showModerationFeedback: { control: 'boolean' }
+    },
+    render: ({ mode, useLongContent, ...args }) => {
+        const scenario = getScenarioData(mode);
+        const argument = useLongContent && mode === 'default' ? longArgument : scenario.argument;
+
+        const config = mode === 'rejected'
+            ? {
+                moderation: { showFeedback: true },
+                provider: { userGuideUrl: 'https://www.example.com/moderation-policy' }
+            }
+            : { translation: { enable: false } };
+
+        return (
+            <div style={{ width: '400px', minHeight: '240px' }}>
+                <BaseProviders config={config}>
+                    <Argument
+                        argument={argument}
+                        positions={positions}
+                        groupName={groupName}
+                        {...scenario}
+                        {...args}
+                    />
+                </BaseProviders>
+            </div>
+        );
+    }
+};
+
+export default meta;
+
+export const DefaultArgument = {};
+
+export const ArgumentReply = {
+    args: { mode: 'reply' }
+};
+
+export const DeletedArgument = {
+    args: { mode: 'deleted' }
+};
+
+export const ArgumentWithReplies = {
+    args: { mode: 'withReplies' }
+};
+
+export const ArgumentWithArgumentReplies = {
+    args: { mode: 'withArgumentReplies' }
+};
+
+export const RejectedArgument = {
+    args: {
+        mode: 'rejected',
+        showModerationFeedback: true
+    }
+};

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

@@ -0,0 +1,303 @@
+import React, { act } from 'react';
+vi.mock('@lexical/react/LexicalErrorBoundary', () => ({
+    // remplace le composant ESM par un wrapper neutre pour Jest (CJS)
+    LexicalErrorBoundary: ({ children }) => children,
+  }));
+import { render } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { IntlProvider } from 'react-intl';
+import { BrowserRouter } from 'react-router-dom';
+import { ConfigProvider } from '@logora/debate/data/config_provider';
+import { Location } from '@logora/debate/util/location';
+import { dataProvider, DataProviderContext } from '@logora/debate/data/data_provider';
+import { AuthContext } from '@logora/debate/auth/use_auth';
+import { ModalProvider } from '@logora/debate/dialog/modal';
+import { ListProvider } from '@logora/debate/list/list_provider';
+import { ToastProvider } from '@logora/debate/dialog/toast_provider';
+import { VoteProvider } from '@logora/debate/vote/vote_provider';
+import { Argument } from './Argument';
+import { IconProvider } from '@logora/debate/icons/icon_provider';
+import { ResponsiveProvider } from '@logora/debate/hooks/use_responsive';
+import * as regularIcons from '@logora/debate/icons/regular_icons';
+import { InputProvider, useInput } from '@logora/debate/input/input_provider';
+import { faker } from '@faker-js/faker';
+
+const routes = {
+    userShowLocation: new Location('espace-debat/user/:userSlug', { userSlug: '' })
+};
+
+const vote = {
+    id: faker.number.int(),
+    voteable_type: faker.lorem.word(),
+    voteable_id: faker.number.int(),
+    user_id: faker.number.int()
+};
+
+const httpClient = {
+    get: () => Promise.resolve({ data: { success: true, data: [argumentReply] } }),
+    post: (url, data, config) => {
+        return new Promise((resolve, reject) => {
+            let response;
+            if (url.includes('vote')) {
+                response = { data: { success: true, data: { resource: vote } } };
+            } else if (url.includes('messages')) {
+                response = { data: { success: true, data: { resource: argumentReply } } };
+            } else {
+                reject(new Error("Unknown endpoint"));
+                return;
+            }
+            resolve(response);
+        })
+    },
+    patch: () => null,
+    delete: (url, data, config) => new Promise((resolve) => resolve({ data: { success: true, data: {} } }))
+};
+
+const currentUser = { id: vote.user_id };
+const data = dataProvider(httpClient, "https://mock.example.api");
+
+const createArgument = overrides => ({
+    id: 414,
+    content: faker.lorem.sentences(3),
+    upvotes: 0,
+    group_id: 417,
+    is_reply: false,
+    created_at: faker.date.recent(),
+    is_deleted: false,
+    score: 50,
+    author: {
+        image_url: faker.image.avatarGitHub(),
+        full_name: faker.person.fullName(),
+        hash_id: faker.lorem.slug(),
+        slug: faker.lorem.slug(),
+        points: 1320,
+        last_activity: new Date(),
+        description: faker.person.jobTitle(),
+        moderation_status: "default"
+    },
+    position: {
+        id: 1,
+        name: "Yes",
+        language: "en",
+        translation_entries: []
+    },
+    ...overrides
+});
+
+const argument = createArgument();
+const argumentWithReplies = createArgument({
+    content: faker.lorem.sentences(2),
+    number_replies: 3,
+    replies_authors: [
+        { image_url: faker.image.avatarGitHub(), full_name: faker.person.fullName() },
+        { image_url: faker.image.avatarGitHub(), full_name: faker.person.fullName() },
+        { image_url: faker.image.avatarGitHub(), full_name: faker.person.fullName() }
+    ]
+});
+const argumentReply = createArgument({
+    id: 415,
+    is_reply: true,
+    upvotes: 12,
+    reply_to_id: argument.id,
+    position: { id: 2, name: "No", language: "en" }
+});
+const argumentDeleted = createArgument({
+    id: 416,
+    is_deleted: true,
+    content: faker.lorem.sentences(1),
+    upvotes: 12
+});
+const positions = [
+    { id: 1, name: "Yes", language: "en", translation_entries: [] },
+    { id: 2, name: "No", language: "en", translation_entries: [] }
+];
+const groupName = faker.lorem.sentence(5);
+
+const targetContent = { "root": { "children": [{ "children": [{ "detail": 0, "format": 1, "mode": "normal", "style": "", "text": "I write an argument", "type": "text", "version": 1 }], "direction": "ltr", "format": "", "indent": 0, "type": "paragraph", "version": 1 }], "direction": "ltr", "format": "", "indent": 0, "type": "root", "version": 1 } };
+
+const AddContentComponent = () => {
+    const { setInputRichContent } = useInput();
+
+    const setContent = (event) => { setInputRichContent(targetContent); }
+
+    return (
+        <>
+            <div onClick={setContent}>Click to set content</div>
+        </>
+    )
+}
+
+const Providers = ({ children }) => (
+    <BrowserRouter>
+        <ConfigProvider routes={{ ...routes }} config={{ translation: { enable: false } }}>
+            <DataProviderContext.Provider value={{ dataProvider: data }}>
+                <AuthContext.Provider value={{ currentUser, isLoggedIn: true }}>
+                    <ResponsiveProvider>
+                        <ModalProvider>
+                            <ListProvider>
+                            <IntlProvider locale="en">
+                                <ToastProvider>
+                                    <VoteProvider>
+                                        <InputProvider>
+                                            <IconProvider library={regularIcons}>
+                                                    <AddContentComponent />
+                                                    {children}
+                                            </IconProvider>
+                                        </InputProvider>
+                                    </VoteProvider>
+                                </ToastProvider>
+                                </IntlProvider>
+                            </ListProvider>
+                        </ModalProvider>
+                    </ResponsiveProvider>
+                </AuthContext.Provider>
+            </DataProviderContext.Provider>
+        </ConfigProvider>
+    </BrowserRouter>
+);
+
+const renderArgument = (props) => render(
+    <Providers>
+        <Argument {...props} />
+    </Providers>
+);
+
+describe('Argument', () => {
+    beforeAll(() => {
+        Object.defineProperty(window, 'matchMedia', {
+            writable: true,
+            value: vi.fn().mockImplementation((query) => ({
+                matches: false,
+                media: query,
+                onchange: null,
+                addListener: vi.fn(),
+                removeListener: vi.fn(),
+                addEventListener: vi.fn(),
+                removeEventListener: vi.fn(),
+                dispatchEvent: vi.fn(),
+            })),
+        });
+    });
+
+    it('should render argument correctly', () => {
+        const { getByText } = renderArgument({
+            argument,
+            positions,
+            nestingLevel: 0,
+        });
+
+        expect(getByText(argument.author.full_name)).toBeInTheDocument();
+        expect(getByText(argument.position.name)).toBeInTheDocument();
+        expect(getByText("Reply")).toBeInTheDocument();
+        expect(getByText("Share")).toBeInTheDocument();
+    });
+
+    it('should render argument with replies', () => {
+        const { getByText, getByAltText } = renderArgument({
+            argument: argumentWithReplies,
+            positions,
+            groupName,
+            nestingLevel: 0,
+        });
+
+        expect(getByText("View answers")).toBeInTheDocument();
+        const user1Img = getByAltText(`${argumentWithReplies.replies_authors[0].full_name}'s profile picture`);
+        const user2Img = getByAltText(`${argumentWithReplies.replies_authors[1].full_name}'s profile picture`);
+        const user3Img = getByAltText(`${argumentWithReplies.replies_authors[2].full_name}'s profile picture`);
+        expect(user1Img).toBeInTheDocument();
+        expect(user2Img).toBeInTheDocument();
+        expect(user3Img).toBeInTheDocument();
+        expect(user1Img).toHaveAttribute('src', argumentWithReplies.replies_authors[0].image_url);
+        expect(user2Img).toHaveAttribute('src', argumentWithReplies.replies_authors[1].image_url);
+        expect(user3Img).toHaveAttribute('src', argumentWithReplies.replies_authors[2].image_url);
+    });
+
+    it('should render argument as a reply', () => {
+        const { container } = renderArgument({
+            argument: argumentReply,
+            positions,
+            groupName,
+            nestingLevel: 0,
+        });
+
+        const argumentContainer = container.querySelector(`#argument_${argumentReply.id}`);
+        expect(argumentContainer).toHaveClass('argumentReply');
+    });
+
+    it('should render deleted argument', () => {
+        const { queryByText } = renderArgument({
+            argument: argumentDeleted,
+            positions,
+            groupName,
+            replies: false,
+            nestingLevel: 0,
+        });
+
+        expect(queryByText(argumentDeleted.author.full_name)).not.toBeInTheDocument();
+        expect(queryByText("Deleted")).toBeInTheDocument();
+        expect(queryByText("Content deleted by the user")).toBeInTheDocument();
+    });
+
+    it('should render dropdown', async () => {
+        const { getByText, getByTestId } = renderArgument({
+            argument: argument,
+            positions,
+            groupName,
+            nestingLevel: 0,
+        });
+
+        const dropdown = getByTestId("dropdown");
+        await act(async () => { await userEvent.click(dropdown) });
+        expect(getByText("Report")).toBeInTheDocument();
+    });
+
+    it('should add vote', async () => {
+        const { getByText, getByTestId, queryByText } = renderArgument({
+            argument,
+            positions,
+            groupName,
+            nestingLevel: 0,
+        });
+
+        expect(getByText("0")).toBeInTheDocument();
+        expect(queryByText("1")).not.toBeInTheDocument();
+        const voteButton = getByTestId("vote-button");
+        await act(async () => { await userEvent.click(voteButton) });
+        expect(getByText("1")).toBeInTheDocument();
+        expect(queryByText("0")).not.toBeInTheDocument();
+    });
+
+    it('should render argument input', async () => {
+        const { getByTestId, queryByText } = renderArgument({
+            argument,
+            positions,
+            groupName,
+            nestingLevel: 0,
+        });
+
+        const replyButton = getByTestId("action-reply-button");
+        await act(async () => { await userEvent.click(replyButton) });
+        expect(replyButton).toBeInTheDocument();
+        expect(queryByText("Your answer") || queryByText("Reply")).toBeTruthy();
+    });
+
+    it('should allow the user to add a reply to an argument', async () => {
+        const { getByText, queryByText } = renderArgument({
+            argument,
+            positions: [
+                { id: 1, name: 'Yes', language: 'en', translation_entries: [] },
+                { id: 2, name: 'No', language: 'en', translation_entries: [] },
+            ],
+            groupName: 'Test Debate',
+            nestingLevel: 0,
+        });
+
+        const replyButton = getByText('Reply');
+        await act(async () => {
+            await userEvent.click(replyButton);
+        });
+        expect(replyButton).toBeInTheDocument();
+        expect(queryByText("Reply") || queryByText("Your answer")).toBeTruthy();
+    });
+
+});

package/src/components/argument/argument/ReplyFooter.jsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+import { Icon } from '@logora/debate/icons/icon';
+import { Avatar } from '@logora/debate/user/avatar';
+import styles from './ReplyFooter.module.scss';
+import cx from 'classnames';
+
+export const ReplyFooter = ({ numberReplies, repliesAuthors = [], onToggleReplies, expandReplies }) => {
+    if(numberReplies <= 0) return null
+
+    return (
+        <div className={styles.replyFooter} onClick={onToggleReplies}>
+             {repliesAuthors.map((author, index) => (
+              <span
+              key={index}
+              className={
+                author.role === "editor"
+                  ? styles.replyAvatarRing
+                  : styles.replyAvatarNormal
+              }
+            >
+                    <Avatar
+                        avatarUrl={author.image_url}
+                        userName={author.full_name}
+                        size={32}
+                        showTooltip
+                    />
+                </span>
+            ))}
+            <div
+                className={styles.expandRepliesContainer}
+            >
+                <button
+                    tabIndex='0'
+                    className={cx(styles.expandRepliesButton, { [styles.repliesExpanded]: expandReplies })}
+                >
+                    <FormattedMessage
+                        id={expandReplies ? "alt.hide_answers" : "alt.view_answers"}
+                        values={{ number_replies: numberReplies }}
+                        defaultMessage={expandReplies ? "Hide answers" : "View answers"}
+                    />
+                    <Icon name="lightArrow" width={10} height={10} />
+                </button>
+            </div>
+        </div>
+    )
+}

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

@@ -0,0 +1,77 @@
+@use 'styles/spacing' as spacing;
+@use 'styles/theme' as theme;
+@use 'styles/display' as display;
+
+.replyFooter {
+	font-size: theme.$font-size-normal;
+	font-weight: theme.$font-weight-normal;
+	display: flex !important;
+	align-items: center !important;
+	justify-content: flex-start !important;
+	cursor: pointer;
+}
+
+.expandRepliesContainer {
+	text-align: right;
+	padding: 0 !important;
+}
+
+.expandRepliesButton {
+	border: none;
+	position: relative;
+	cursor: pointer;
+	display: flex;
+	align-items: center;
+	gap: spacing.$spacer-sm;
+	background-color: theme.$background-color-primary;
+	font-size: theme.$font-size-normal;
+	font-weight: bold;
+
+	@include spacing.p(0, xs);
+	@include spacing.px(2.5, xs);
+
+	.expandRepliesButton:focus {
+		outline: revert;
+	  }
+
+	svg {
+		display: inline-block;
+
+		path {
+			stroke: theme.$text-primary;
+		}
+	}
+
+	&.repliesExpanded {
+		svg {
+			transform: rotate(180deg);
+		}
+	}
+}
+
+.replyAvatarRing {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	width: 40px;        
+	height: 40px;
+	border-radius: 50%;
+	background: theme.$call-primary; 
+	flex-shrink: 0;
+  }
+  
+  .replyAvatarRingInner {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	width: 34px;         
+	height: 34px;
+	border-radius: 50%;
+	background: theme.$background-color-primary; 
+  }
+  
+  .replyAvatarRing img,
+  .replyAvatarRing svg {
+	border-radius: 50%;
+	display: block;
+  }

package/src/components/argument/argument/index.js

@@ -0,0 +1,2 @@
+export { Argument } from './Argument';
+export { useRichContent } from './useRichContent';

package/src/components/argument/argument/useRichContent.jsx

@@ -0,0 +1,18 @@
+import { useEffect, useState } from 'react';
+import { lexicalToHtml } from "@logora/debate/input/text_editor";
+
+export const useRichContent = (argument) => {
+    const [richContent, setRichContent] = useState(null);
+
+    useEffect(() => {
+		if (argument.rich_content && argument.is_deleted != true) {
+			const rawContent = JSON.parse(argument.rich_content);
+			if (rawContent.hasOwnProperty("root")) {
+				const html = lexicalToHtml(rawContent);
+				setRichContent(html);
+			}
+		}
+	}, [argument.rich_content]);
+
+    return richContent;
+}