@logora/debate 0.1.0

package/src/components/proposal/proposal_box/ProposalBox.test.jsx

@@ -0,0 +1,137 @@
+import React from "react";
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { IntlProvider } from "react-intl";
+import { MemoryRouter } from "react-router-dom";
+import { ConfigProvider } from "@logora/debate/data/config_provider";
+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 { 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 { ProposalBox } from "./ProposalBox";
+import { faker } from "@faker-js/faker";
+
+vi.mock('@lexical/react/LexicalErrorBoundary', () => ({
+    LexicalErrorBoundary: ({ children }) => children,
+  }));
+
+// Mock data
+const vote = {
+    id: faker.number.int(),
+    voteable_type: faker.lorem.word(),
+    voteable_id: faker.number.int(),
+    user_id: faker.number.int()
+};
+
+const currentUser = {
+    id: vote.user_id,
+    full_name: faker.person.fullName(),
+    image_url: faker.image.avatarGitHub(),
+    points: faker.number.int()
+};
+
+const generateProposal = (overrides) => ({
+    id: faker.number.int(),
+    title: faker.lorem.sentence(),
+    content: faker.lorem.paragraph(),
+    created_at: faker.date.recent().toISOString(),
+    edited_at: null,
+    total_upvotes: faker.number.int(100),
+    total_downvotes: faker.number.int(50),
+    language: "en",
+    translation_entries: [],
+    author: {
+        id: faker.number.int(),
+        image_url: faker.image.avatarGitHub(),
+        full_name: faker.person.fullName(),
+        hash_id: faker.lorem.slug(),
+        slug: faker.lorem.slug(),
+        points: faker.number.int(5000),
+        last_activity: new Date(),
+        description: faker.person.jobTitle()
+    },
+    tag: {
+        display_name: faker.lorem.word(),
+        color: faker.color.rgb()
+    },
+    ...overrides
+});
+
+const proposal = generateProposal();
+const editedProposal = generateProposal({ edited_at: faker.date.recent().toISOString(), is_edited: true });
+
+const httpClient = {
+    post: vi.fn(() => Promise.resolve({ data: { success: true, data: { resource: vote } } })),
+    delete: vi.fn(() => Promise.resolve({ data: { success: true, data: {} } }))
+};
+
+const data = dataProvider(httpClient, "https://mock.example.api");
+
+const routes = {
+    userShowLocation: {
+        toUrl: ({ userSlug }) => `/espace-debat/user/${userSlug}`,
+    },
+};
+
+const Providers = ({ children }) => (
+    <MemoryRouter>
+        <ConfigProvider config={{ translation: { enable: false } }} routes={{ ...routes }}>
+            <DataProviderContext.Provider value={{ dataProvider: data }}>
+                <AuthContext.Provider value={{ currentUser, isLoggedIn: true }}>
+                    <ResponsiveProvider>
+                        <ModalProvider>
+                            <ListProvider>
+                                <ToastProvider>
+                                    <VoteProvider>
+                                        <IconProvider library={regularIcons}>
+                                            <IntlProvider locale="en">
+                                                {children}
+                                            </IntlProvider>
+                                        </IconProvider>
+                                    </VoteProvider>
+                                </ToastProvider>
+                            </ListProvider>
+                        </ModalProvider>
+                    </ResponsiveProvider>
+                </AuthContext.Provider>
+            </DataProviderContext.Provider>
+        </ConfigProvider>
+    </MemoryRouter>
+);
+
+const renderProposal = (props) => render(
+    <Providers>
+        <ProposalBox {...props} />
+    </Providers>
+);
+
+describe("ProposalBox", () => {
+    it("should render ProposalBox correctly", () => {
+        const { getByText } = renderProposal({ proposal, disabled: false });
+
+        expect(getByText(proposal.title)).toBeInTheDocument();
+        expect(getByText(proposal.author.full_name)).toBeInTheDocument();
+        expect(getByText(proposal.tag.display_name)).toBeInTheDocument();
+    });
+
+    it("should show edited status when proposal was edited", () => {
+        const { getByText } = renderProposal({ proposal: editedProposal });
+        expect(getByText("Updated proposal")).toBeInTheDocument();
+    });
+
+    it("should disable voting when current user is author", () => {
+        const authorProposal = generateProposal({ author: currentUser });
+        renderProposal({ proposal: authorProposal });
+        
+        const upvoteButton = screen.getByTestId('upvote-button');
+        const downvoteButton = screen.getByTestId('downvote-button');
+        
+        expect(upvoteButton).toHaveClass('disabled');
+        expect(downvoteButton).toHaveClass('disabled');
+    });
+});

package/src/components/proposal/proposal_box/index.js

@@ -0,0 +1 @@
+export { ProposalBox } from "./ProposalBox"

package/src/components/report/report_box/ReportBox.docs.mdx

@@ -0,0 +1,35 @@
+--- 
+description: A component to display a report with its classification, status.
+---
+
+import { ReportBox } from './ReportBox';
+
+The ReportBox component is used to display a single report, including its classification, status (accepted, pending, or rejected).
+
+
+### Component usage
+
+```js
+import { ReportBox } from '@logora/debate.report.report_box';
+```
+
+```js
+const report = {
+  id: 1,
+  classification: 'Spam',
+  is_processed: true,
+  reportable_type: 'Message',
+  reportable: {
+    id: 84,
+    content: 'This is a reported message.',
+    author: { full_name: 'John Doe' },
+    created_at: '2025-05-06T15:43:17.545Z',
+    status: 'pending',
+  },
+  author: {
+    full_name: 'Jane Smith',
+  },
+};
+
+<ReportBox report={report} />
+```

package/src/components/report/report_box/ReportBox.jsx

@@ -0,0 +1,120 @@
+import React, { useState, useEffect } from "react";
+import { Argument } from "@logora/debate/argument/argument";
+import { SuggestionBox } from "@logora/debate/suggestion/suggestion_box";
+import { ProposalBox } from "@logora/debate/proposal/proposal_box";
+import { useIntl } from "react-intl";
+import { Icon } from '@logora/debate/icons/icon';
+import cx from "classnames";
+import styles from './ReportBox.module.scss';
+
+
+export const ReportBox = ({ report, flash }) => {
+  const intl = useIntl();
+  const [isFlashing, setIsFlashing] = useState(false);
+
+  useEffect(() => {
+    if (flash === report.id) {
+      const reportElement = document.getElementById(`reports_${report.id}`);
+      if (reportElement) {
+        reportElement.scrollIntoView({ behavior: "smooth", block: "center" });
+      }
+      setIsFlashing(true);
+    } else {
+      setIsFlashing(false);
+    }
+  }, [flash, report.id]);
+
+  const renderReportContent = () => {
+    const { reportable_type, reportable } = report;
+    switch (reportable_type) {
+      case "Message": {
+        const shouldHideContent =
+          report.is_processed === true && report.reportable?.status === "rejected";
+      
+        return (
+          <Argument
+            argument={reportable}
+            positions={reportable.group?.group_context?.positions?.slice(0, 2) || []}
+            hideReplies={true}
+            hideFooter={true}
+            showModerationFeedback={false}
+            hideContent={shouldHideContent}
+          />
+        );
+      }
+      
+      case "Proposal":
+        return <ProposalBox proposal={reportable} hideFooter={true} />;
+      case "Group":
+        return <SuggestionBox suggestion={reportable} hideFooter={true} />;
+      default:
+        return <div>{intl.formatMessage({
+          id: "report.unknown_type",
+          defaultMessage: " Unknown content type"
+        })}</div>;
+    }
+  };
+
+  const renderStatusMessage = (isProcessed, contentStatus) => {
+    if (!isProcessed) {
+      return (
+        <div className={styles.statusMessage}>
+          {intl.formatMessage({
+            id: "report.content_header.status_pending",
+            defaultMessage: "The report is currently in process"
+          })}
+        </div>
+      );
+    } else {
+      if (contentStatus === "rejected") {
+        return (
+          <div className={styles.statusMessage} data-testid="report-status-message">
+            {intl.formatMessage({
+              id: "report.content_header.status_rejected",
+              defaultMessage: "Thank you for your report. After verification, the content has been removed."
+            })}
+          </div>
+        );
+      } else {
+        return (
+          <div className={styles.statusMessage}>
+            {intl.formatMessage({
+              id: "report.content_header.status_accepted",
+              defaultMessage: "Thank you for your report. After verification, we have not removed the content."
+            })}
+          </div>
+        );
+      }
+    }
+  };
+
+  return (
+    <div id={`reports_${report.id}`} className={cx(styles.reportBox, { [styles.reportHighlighted]: isFlashing })}>
+      {report && (
+        <div className={styles.reportItem}>
+          <div className={styles.reportHeader}>
+            {report.classification && (
+              <div className={styles.reportReason}>
+                <Icon name="announcement" width={18} height={18} className={styles.warningIcon} />
+                {intl.formatMessage({
+                  id: "report.content_header.moderation_reason",
+                  defaultMessage: "Report reason:"
+                })}{" "}
+                {intl.messages[`report.content_header.moderation_reason.${report.classification.toLowerCase()}`]
+                  ? intl.formatMessage({
+                    id: `report.content_header.moderation_reason.${report.classification.toLowerCase()}`,
+                    defaultMessage: report.classification
+                  })
+                  : report.classification}
+              </div>
+            )}
+            {renderStatusMessage(report.is_processed, report.reportable?.status)}
+          </div>
+          {renderReportContent()}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default ReportBox;

package/src/components/report/report_box/ReportBox.module.scss

@@ -0,0 +1,54 @@
+@use 'styles/spacing' as spacing;
+@use 'styles/theme' as theme;
+
+
+.reportBox {
+  width: 100%;
+}
+
+.reportItem {
+  border: theme.$box-border;
+  border-radius: theme.$box-border-radius;
+  box-shadow: theme.$box-shadow;
+  transition: margin-top 2s;
+  background-color: theme.$background-color-primary;
+}
+
+.reportHeader {
+  padding: spacing.$spacer-md spacing.$spacer-md;
+}
+
+.reportReason {
+  display: flex;
+  color: theme.$against-primary;
+  gap: spacing.$spacer-xs;
+  margin-bottom: spacing.$spacer-md;
+  font-size: theme.$font-size-small;
+  align-items: center;
+}
+
+svg.warningIcon {
+  circle {
+    stroke: theme.$against-primary;
+    stroke-width: 1.5px;
+  }
+
+  path {
+    fill: theme.$against-primary;
+  }
+}
+
+.statusMessage {
+  margin-top: spacing.$spacer-xs;
+  font-size: theme.$font-size-small;
+}
+
+.reportHighlighted {
+  border:1px solid theme.$call-primary !important;
+  -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);
+  border-radius: theme.$box-border-radius;
+}

package/src/components/report/report_box/ReportBox.stories.jsx

@@ -0,0 +1,247 @@
+import React from 'react';
+import { IntlProvider } from 'react-intl';
+import { BrowserRouter } from 'react-router-dom';
+import { ConfigProvider } from '@logora/debate/data/config_provider';
+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 { IconProvider } from '@logora/debate/icons/icon_provider';
+import { ResponsiveProvider } from '@logora/debate/hooks/use_responsive';
+import { faker } from '@faker-js/faker';
+import * as regularIcons from '@logora/debate/icons/regular_icons';
+import ReportBox from './ReportBox';
+
+const vote = {
+  id: faker.number.int(),
+  voteable_type: faker.lorem.word(),
+  voteable_id: faker.number.int(),
+  user_id: faker.number.int()
+};
+
+const currentUser = { id: vote.user_id };
+
+const httpClient = {
+  get: () => Promise.resolve({ data: { success: true, data: [] } }),
+  post: () => Promise.resolve({ data: { success: true, data: { resource: vote } } }),
+  patch: () => null,
+  delete: () => Promise.resolve({ data: { success: true, data: {} } })
+};
+
+const data = dataProvider(httpClient, 'https://mock.example.api');
+
+const config = {
+  modules: {
+    suggestions: {
+      vote_goal: 30
+    }
+  }
+};
+
+const reportArgumentPending = {
+  id: 1,
+  classification: 'INCOHERENT',
+  description: faker.lorem.sentence(),
+  is_processed: false,
+  reportable_type: 'Message',
+  created_at: faker.date.recent().toISOString(),
+  reportable: {
+    id: 84,
+    content: faker.lorem.sentence(),
+    author: { full_name: faker.person.fullName() },
+    created_at: faker.date.recent().toISOString(),
+    upvotes: 10,
+    language: 'en',
+    status: 'pending'
+  },
+  author: {
+    full_name: faker.person.fullName()
+  },
+  position: {
+    id: 1,
+    name: 'Yes',
+    language: 'en',
+    translation_entries: []
+  }
+};
+
+const reportArgumentAccepted = {
+  ...reportArgumentPending,
+  is_processed: true,
+  reportable: {
+    ...reportArgumentPending.reportable,
+    status: 'rejected',
+    moderation_entry: {
+      status: 'rejected'
+    }
+  }
+};
+
+const reportArgumentRejected = {
+  ...reportArgumentPending,
+  is_processed: true,
+  reportable: {
+    ...reportArgumentPending.reportable,
+    author: { full_name: 'Jean Dupont' },
+    status: 'accepted',
+    moderation_entry: {
+      status: 'accepted'
+    }
+  }
+};
+
+const reportProposal = {
+  ...reportArgumentPending,
+  is_processed: true,
+  reportable_type: 'Proposal',
+  reportable: {
+    ...reportArgumentPending.reportable,
+    status: 'accepted'
+  }
+};
+
+const reportSuggestion = {
+  ...reportArgumentPending,
+  is_processed: true,
+  reportable_type: 'Group',
+  reportable: {
+    ...reportArgumentPending.reportable,
+    status: 'accepted',
+    name: faker.lorem.words(),
+    slug: faker.lorem.slug(),
+    score: faker.number.int(),
+    is_active: true,
+    messages_count: faker.number.int(),
+    is_published: false,
+    published_at: faker.date.recent().toISOString(),
+    debate_suggestion: {
+      id: faker.number.int(),
+      created_at: faker.date.recent().toISOString(),
+      expires_at: faker.date.future().toISOString(),
+      total_upvotes: 20,
+      total_downvotes: faker.number.int({ min: 0, max: 100 }),
+      is_accepted: false,
+      is_expired: false,
+      author: {
+        id: faker.number.int(),
+        full_name: faker.person.fullName(),
+        image_url: faker.image.avatarGitHub()
+      },
+      language: faker.helpers.arrayElement(['en', 'fr', 'es']),
+      translation_entries: [],
+      name: faker.lorem.words()
+    }
+  }
+};
+
+const reportWithPositions = {
+  id: 999,
+  classification: 'INCOHERENT',
+  description: faker.lorem.sentence(),
+  is_processed: true,
+  reportable_type: 'Message',
+  created_at: new Date().toISOString(),
+  reportable: {
+    id: 123,
+    content: faker.lorem.sentence(),
+    author: { full_name: 'Jean Jean' },
+    created_at: new Date().toISOString(),
+    upvotes: 5,
+    language: 'fr',
+    status: 'accepted',
+    position: {
+      id: 919,
+      name: 'Oui',
+      language: 'fr',
+      translation_entries: []
+    },
+    group: {
+      group_context: {
+        positions: [
+          { id: 919, name: 'Oui', language: 'fr', translation_entries: [] },
+          { id: 920, name: 'Non', language: 'fr', translation_entries: [] }
+        ]
+      }
+    }
+  }
+};
+
+const Providers = ({ children }) => (
+  <BrowserRouter>
+    <ConfigProvider 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>
+);
+
+export default {
+  title: 'Report/Report Box',
+  component: ReportBox,
+  argTypes: {
+    report: { control: 'object' }
+  },
+  render: (args) => (
+    <div style={{ width: '400px', height: '240px' }}>
+      <Providers>
+        <ReportBox {...args} />
+      </Providers>
+    </div>
+  )
+};
+
+export const ReportArgumentPending = {
+  args: {
+    report: reportArgumentPending
+  }
+};
+
+export const ReportArgumentRejected = {
+  args: {
+    report: reportArgumentRejected
+  }
+};
+
+export const ReportArgumentAccepted = {
+  args: {
+    report: reportArgumentAccepted
+  }
+};
+
+export const ReportProposal = {
+  args: {
+    report: reportProposal
+  }
+};
+
+export const ReportSuggestion = {
+  args: {
+    report: reportSuggestion
+  }
+};
+
+export const ReportWithPositions = {
+  args: {
+    report: reportWithPositions
+  }
+};