@logora/debate 0.1.0

package/src/components/user_content/use_report_content/ReportModal.module.scss

@@ -0,0 +1,121 @@
+@use 'styles/theme' as theme;
+@use 'styles/spacing' as spacing;
+@use 'styles/display' as display;
+
+.reportModalBody {
+	display: flex !important;
+	flex-direction: column !important;
+	overflow: visible !important;
+}
+
+.reportForm {
+	display: flex !important;
+	flex-direction: column !important;
+	width: 100%;
+}
+
+.reportForm textarea:hover {
+	border-color: inherit;
+}
+
+.reportFormSubmit {
+	text-align: center;
+}
+
+.successButtonBox {
+	@include spacing.mt(4, xs);
+}
+
+.formGroup {
+	display: flex !important;
+	flex-flow: column wrap !important;
+	align-items: flex-start !important;
+	@include spacing.my(2, xs);
+	color: theme.$text-primary;
+
+	label {
+		color: theme.$text-primary; 
+	}
+}
+
+.formControl {
+	display: block;
+	width: 100%;
+	max-width: 100%;
+	box-sizing: border-box;
+	height: auto;
+	padding: 0.375em 0.75em;
+	font-size: theme.$font-size-normal;
+	font-weight: theme.$font-weight-normal;
+	line-height: theme.$line-height-loose;
+	color: theme.$text-primary;
+	background-color: theme.$background-color-primary;
+	background-clip: padding-box;
+	border-radius: 0.25em;
+	transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+	border: theme.$box-border;
+
+	&::placeholder {
+		color: theme.$text-secondary;
+		opacity: 1;
+	}
+
+	&:hover {
+		border: 1px solid theme.$text-secondary;
+	}
+
+	&:focus {
+		border: 1px solid theme.$text-secondary;
+		color: theme.$text-primary;
+		background-color: theme.$background-color-primary;
+		outline: 0;
+		box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
+	}
+}
+
+.select {
+	max-width: 436px;
+
+	@include display.media-breakpoint-down(xs) {
+		max-width: 250px;
+	}
+}
+
+.nameGroup {
+	flex-direction: row !important;
+	gap: spacing.$spacer-sm;
+	width: 100%;
+	flex-wrap: wrap;
+	box-sizing: border-box;
+
+	@include display.media-breakpoint-down(sm) {
+		flex-direction: column !important;
+		gap: 0;
+	}
+}
+
+
+.nameField {
+	flex: 1;
+	min-width: 0;
+	margin-right: spacing.$spacer-sm;
+	max-width: 100%;
+
+	@include display.media-breakpoint-down(sm) {
+		width: 100%;
+	}
+}
+
+.nameField:last-child {
+	margin-right: 0;
+}
+
+.checkboxLabel {
+	display: inline-flex !important;
+	align-items: baseline !important;
+	gap: spacing.$spacer-sm !important;
+}
+
+.checkboxInput {
+	appearance: auto !important;
+}

package/src/components/user_content/use_report_content/ReportModal.stories.jsx

@@ -0,0 +1,61 @@
+export default {
+    title: 'User Content/Use Report Content',
+    component: ReportModal,
+    args: {},
+    argTypes: {}
+};
+
+import React from 'react';
+import { ModalProvider } from '@logora/debate/dialog/modal';
+import { IntlProvider } from 'react-intl';
+import { AuthContext } from '@logora/debate/auth/use_auth';
+import { dataProvider, DataProviderContext } from '@logora/debate/data/data_provider';
+import { ReportModal } from './ReportModal';
+import { IconProvider } from '@logora/debate/icons/icon_provider';
+import * as regularIcons from '@logora/debate/icons/regular_icons';
+
+const httpClient = {
+    get: () => null,
+    post: () => null,
+    patch: () => null
+};
+
+export const DefaultReportModal = () => {
+    const data = dataProvider(httpClient, "https://mock.example.api");
+
+    return (
+        <div style={{ width: "350px", height: "200px" }}>
+            <IntlProvider locale="en">
+                <IconProvider library={regularIcons}>
+                    <ModalProvider>
+                        <DataProviderContext.Provider value={{ dataProvider: data }}>
+                            <AuthContext.Provider value={{ isLoggedIn: true }}>
+                                <ReportModal reportableId={1} reportableType={"argument"} title={"Report this argument"} />
+                            </AuthContext.Provider>
+                        </DataProviderContext.Provider>
+                    </ModalProvider>
+                </IconProvider>
+            </IntlProvider>
+        </div>
+    )
+};
+
+export const ReportModalUserAnonym = () => {
+    const data = dataProvider(httpClient, "https://mock.example.api");
+
+    return (
+        <div style={{ width: "350px", height: "200px" }}>
+            <IntlProvider locale="en">
+                <IconProvider library={regularIcons}>
+                    <ModalProvider>
+                        <DataProviderContext.Provider value={{ dataProvider: data }}>
+                            <AuthContext.Provider value={{ isLoggedIn: false }}>
+                                <ReportModal reportableId={1} reportableType={"argument"} title={"Report this argument"} allowAnonymousUser={true} />
+                            </AuthContext.Provider>
+                        </DataProviderContext.Provider>
+                    </ModalProvider>
+                </IconProvider>
+            </IntlProvider>
+        </div>
+    )
+};

package/src/components/user_content/use_report_content/ReportModal.test.jsx

@@ -0,0 +1,51 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { DefaultReportModal } from "./ReportModal.stories";
+
+beforeAll(() => {
+  const patchDialog = (Proto) => {
+    if (!Proto) return;
+
+    if (!Proto.showModal) {
+      Object.defineProperty(Proto, "showModal", {
+        configurable: true,
+        value: function () {
+          this.setAttribute("open", "");
+        },
+      });
+    }
+
+    if (!Proto.close) {
+      Object.defineProperty(Proto, "close", {
+        configurable: true,
+        value: function () {
+          this.removeAttribute("open");
+          this.dispatchEvent(new Event("close"));
+        },
+      });
+    }
+  };
+
+  patchDialog(globalThis.HTMLDialogElement?.prototype);
+  patchDialog(globalThis.HTMLElement?.prototype);
+});
+
+describe("ReportModal", () => {
+  it("should render modal with content and title", async () => {
+    render(<DefaultReportModal />);
+
+    expect(await screen.findByText("Report this argument")).toBeTruthy();
+    expect(await screen.findByRole("textbox")).toBeTruthy();
+  });
+
+  it("should render dropdown", async () => {
+    const user = userEvent.setup();
+    render(<DefaultReportModal />);
+
+    const dropdownButton = await screen.findByRole("button", { name: /select a reason/i });
+    await user.click(dropdownButton);
+
+    expect(await screen.findByText("Incomprehensibility")).toBeTruthy();
+  });
+});

package/src/components/user_content/use_report_content/index.js

@@ -0,0 +1,2 @@
+export { useReportContent } from './useReportContent';
+export { ReportModal as default } from './ReportModal';

package/src/components/user_content/use_report_content/useReportContent.docs.mdx

@@ -0,0 +1,24 @@
+---
+description: A hook to report a content.
+labels: ['report']
+---
+
+A hook to report a content. It receive a reportableType, a reportableId and a modalTitle params.
+
+It's using useAuthenticationRequired hook.
+
+### Component usage
+```js
+import { useReportContent } from '@logora/debate.user_content.use_report_content';
+```
+```js
+const Component = () => {
+    const { reportContent } = useReportContent(reportableType, reportableId, modalTitle);
+
+	return (
+        <button onClick={reportContent}>
+            Report
+        </button>
+    )
+}
+```

package/src/components/user_content/use_report_content/useReportContent.jsx

@@ -0,0 +1,32 @@
+import React, { Suspense } from 'react';
+import { useAuth } from "@logora/debate/auth/use_auth";
+import { useModal } from '@logora/debate/dialog/modal';
+import { useAuthRequired } from '@logora/debate/hooks/use_auth_required';
+import { useConfig } from '@logora/debate/data/config_provider';
+import { ReportModal } from './ReportModal';
+
+export const useReportContent = (reportableType, reportableId, modalTitle) => {
+	const { isLoggedIn, currentUser } = useAuth();
+	const { showModal } = useModal();
+	const config = useConfig();
+	const requireAuthentication = useAuthRequired();
+
+	const reportContent = () => {
+		if (isLoggedIn || config.actions?.allowAnonymousReport === true) {
+			showModal(
+				<Suspense fallback={null}>
+					<ReportModal
+						reportableType={reportableType}
+						reportableId={reportableId}
+						title={modalTitle}
+						allowAnonymousUser={config.actions?.allowAnonymousReport}
+					/>
+				</Suspense>
+			);
+		} else {
+			requireAuthentication();
+		}
+	};
+
+	return { reportContent };
+}

package/src/components/user_content/use_report_content/useReportContent.test.jsx

@@ -0,0 +1,138 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { useReportContent } from './useReportContent';
+import { IntlProvider } from 'react-intl';
+import { ToastProvider } from '@logora/debate/dialog/toast_provider';
+import { AuthContext } from '@logora/debate/auth/use_auth';
+import { dataProvider, DataProviderContext } from '@logora/debate/data/data_provider';
+import { ModalProvider } from '@logora/debate/dialog/modal';
+import { ConfigProvider } from '@logora/debate/data/config_provider';
+import { ListProvider } from '@logora/debate/list/list_provider';
+import { IconProvider } from '@logora/debate/icons/icon_provider';
+import * as regularIcons from '@logora/debate/icons/regular_icons';
+import { faker } from '@faker-js/faker';
+
+beforeAll(() => {
+  const Proto = globalThis.HTMLDialogElement?.prototype;
+  if (!Proto) return;
+
+  if (!Proto.showModal) {
+    Object.defineProperty(Proto, 'showModal', {
+      configurable: true,
+      value: function () {
+        this.setAttribute('open', '');
+      },
+    });
+  }
+
+  if (!Proto.close) {
+    Object.defineProperty(Proto, 'close', {
+      configurable: true,
+      value: function () {
+        this.removeAttribute('open');
+        this.dispatchEvent(new Event('close'));
+      },
+    });
+  }
+});
+
+const httpClient = {
+  get: vi.fn(() => Promise.resolve(null)),
+  post: vi.fn(() => Promise.resolve({ data: { success: true } })),
+  patch: vi.fn(() => Promise.resolve(null)),
+  delete: vi.fn(() => Promise.resolve(null)),
+};
+
+const currentUser = {
+  id: faker.number.int(),
+};
+
+const data = dataProvider(httpClient, 'https://mock.example.api');
+
+const ComponentWithReport = () => {
+  const reportableType = 'post';
+  const reportableId = '123';
+  const modalTitle = 'Report Post';
+  const { reportContent } = useReportContent(reportableType, reportableId, modalTitle);
+
+  return (
+    <button data-testid={'report-button'} onClick={reportContent}>
+      <span>Report</span>
+    </button>
+  );
+};
+
+describe('useReportContent', () => {
+  it('should show ReportModal when useReportContent is called', async () => {
+    const user = userEvent.setup();
+
+    render(
+      <IntlProvider locale="en">
+        <ConfigProvider config={{}}>
+          <DataProviderContext.Provider value={{ dataProvider: data }}>
+            <AuthContext.Provider value={{ currentUser: currentUser, isLoggedIn: true }}>
+              <ToastProvider>
+                <IconProvider library={regularIcons}>
+                  <ListProvider>
+                    <ModalProvider>
+                      <ComponentWithReport />
+                    </ModalProvider>
+                  </ListProvider>
+                </IconProvider>
+              </ToastProvider>
+            </AuthContext.Provider>
+          </DataProviderContext.Provider>
+        </ConfigProvider>
+      </IntlProvider>
+    );
+
+    const reportButton = screen.getByTestId('report-button');
+    await user.click(reportButton);
+
+    expect(await screen.findByText('Report Post')).toBeTruthy();
+    expect(await screen.findByText('Tell us more about your report')).toBeTruthy();
+    expect(await screen.findByText('Send')).toBeTruthy();
+  });
+
+  it('should show confirmation step if the report is sent', async () => {
+    const user = userEvent.setup();
+
+    render(
+      <IntlProvider locale="en">
+        <ConfigProvider config={{}}>
+          <DataProviderContext.Provider value={{ dataProvider: data }}>
+            <AuthContext.Provider value={{ currentUser: currentUser, isLoggedIn: true }}>
+              <ToastProvider>
+                <IconProvider library={regularIcons}>
+                  <ListProvider>
+                    <ModalProvider>
+                      <ComponentWithReport />
+                    </ModalProvider>
+                  </ListProvider>
+                </IconProvider>
+              </ToastProvider>
+            </AuthContext.Provider>
+          </DataProviderContext.Provider>
+        </ConfigProvider>
+      </IntlProvider>
+    );
+
+    const reportButton = screen.getByTestId('report-button');
+    await user.click(reportButton);
+
+    expect(await screen.findByText('Report Post')).toBeTruthy();
+    expect(await screen.findByText('Tell us more about your report')).toBeTruthy();
+    expect(await screen.findByText('Send')).toBeTruthy();
+
+    await user.click(screen.getByRole('button', { name: /select a reason/i }));
+    await user.click(await screen.findByText(/incivility/i));
+    await user.click(await screen.findByRole('checkbox'));
+
+    const confirmButton = screen.getByRole('button', { name: /send/i });
+    await user.click(confirmButton);
+
+    expect(await screen.findByText(/thank you for your submission/i)).toBeTruthy();
+    expect(screen.getByText('Close')).toBeTruthy();
+  });
+});

package/src/components/util/lang_emojis/index.js

@@ -0,0 +1 @@
+export { LANGUAGES, getLocaleIcon, getLocaleName } from './langEmojis';

package/src/components/util/lang_emojis/langEmojis.docs.mdx

@@ -0,0 +1,10 @@
+---
+description: A constant array of language objects with their respective icons.
+---
+
+The `LANGUAGES` array is a list of objects where each object represents a language with its associated icon.
+
+### Component usage
+
+```js
+import { LANGUAGES } from '@logora/debate.util.lang_emojis';

package/src/components/util/lang_emojis/langEmojis.js

@@ -0,0 +1,72 @@
+const LANGUAGES = [
+    {
+        name: "fr",
+        icon: " 🇫🇷"
+    },
+    {
+        name: "en",
+        icon: " 🇬🇧"
+    },
+    {
+        name: "es",
+        icon: " 🇪🇸"
+    },
+    {
+        name: "de",
+        icon: " 🇩🇪"
+    },
+    {
+        name: "it",
+        icon: " 🇮🇹"
+    },
+    {
+        name: "rm",
+        icon: " 🇨🇭"
+    },
+    {
+        name: "pt",
+        icon: " 🇵🇹"
+    },
+    {
+        name: "pt-BR",
+        icon: " 🇧🇷"
+    },
+    {
+        name: "fi",
+        icon: " 🇫🇮"
+    },
+    {
+        name: "fr-CH",
+        icon: " 🇨🇭 🇫🇷"
+    },
+    {
+        name: "en-CH",
+        icon: " 🇨🇭 🇬🇧"
+    },
+    {
+        name: "de-CH",
+        icon: " 🇨🇭 🇩🇪"
+    },
+    {
+        name: "it-CH",
+        icon: " 🇨🇭 🇮🇹"
+    },
+]
+
+const getLocaleIcon = (locale, dialect) => {
+    if (dialect) {
+        return LANGUAGES.find(lang => lang.name === `${locale}-${dialect}`)?.icon || LANGUAGES.find(lang => lang.name === locale)?.icon
+    } else {
+        return LANGUAGES.find(lang => lang.name === locale)?.icon
+    }
+}
+
+const getLocaleName = (locale, dialect) => {
+    if (dialect) {
+        return LANGUAGES.find(lang => lang.name === `${locale}-${dialect}`)?.name || LANGUAGES.find(lang => lang.name === locale)?.name
+    } else {
+        return LANGUAGES.find(lang => lang.name === locale)?.name
+    }
+}
+
+export { getLocaleIcon, getLocaleName, LANGUAGES }

package/src/components/util/lang_emojis/langEmojis.test.jsx

@@ -0,0 +1,63 @@
+import { LANGUAGES, getLocaleIcon, getLocaleName } from "./langEmojis";
+
+describe('LANGUAGES', () => {
+    it('should have the correct properties', () => {
+        LANGUAGES.forEach(language => {
+            expect(language).toHaveProperty('name');
+            expect(language).toHaveProperty('icon');
+        });
+    });
+
+    it('each language object should be unique by name', () => {
+        const languageNames = LANGUAGES.map(lang => lang.name);
+        const uniqueNames = new Set(languageNames);
+        expect(uniqueNames.size).toBe(languageNames.length);
+    });
+
+    it('each language object should be unique by icon', () => {
+        const languageIcons = LANGUAGES.map(lang => lang.icon);
+        const uniqueIcons = new Set(languageIcons);
+        expect(uniqueIcons.size).toBe(languageIcons.length);
+    });
+});
+
+describe('getLocaleIcon', () => {
+    it('should return the correct icon for a given locale', () => {
+        expect(getLocaleIcon('fr', 'CH')).toBe(' 🇨🇭 🇫🇷');
+        expect(getLocaleIcon('en', 'CH')).toBe(' 🇨🇭 🇬🇧');
+        expect(getLocaleIcon('en')).toBe(' 🇬🇧');
+        expect(getLocaleIcon('de')).toBe(' 🇩🇪');
+    });
+
+    it('should return undefined for an unknown locale', () => {
+        expect(getLocaleIcon('unknown')).toBeUndefined();
+    });
+
+    it('should return undefined for a null input', () => {
+        expect(getLocaleIcon(null)).toBeUndefined();
+    });
+
+    it('should return undefined for an empty string input', () => {
+        expect(getLocaleIcon('')).toBeUndefined();
+    });
+});
+
+describe('getLocaleName', () => {
+    it('should return the correct name for a given locale', () => {
+        expect(getLocaleName('fr')).toBe('fr');
+        expect(getLocaleName('en')).toBe('en');
+        expect(getLocaleName('de')).toBe('de');
+    });
+
+    it('should return undefined for an unknown locale', () => {
+        expect(getLocaleName('unknown')).toBeUndefined();
+    });
+
+    it('should return undefined for a null input', () => {
+        expect(getLocaleName(null)).toBeUndefined();
+    });
+
+    it('should return undefined for an empty string input', () => {
+        expect(getLocaleName('')).toBeUndefined();
+    });
+});

package/src/components/util/location/Location.docs.mdx

@@ -0,0 +1,18 @@
+---
+description: A class to help define routes with dynamic parameters.
+---
+
+import { Location } from './Location';
+
+A class that helps define routes with parameters.
+
+### Component usage
+```js
+import { Location } from '@logora/debate.util.location';
+```
+```js
+const location = new Location("path/:pathParam", { pathParam: "" }, { queryParam: "" });
+const url = location.toUrl({ pathParam: "myPathParam", queryParam: "myQueryParam" });
+console.log(url);
+// => "path/myPathParam?queryParam=myQueryParam
+```

package/src/components/util/location/Location.js

@@ -0,0 +1,84 @@
+import { compile } from 'path-to-regexp';
+
+const cache = {};
+const cacheLimit = 10000;
+let cacheCount = 0;
+
+export class Location {
+    constructor(path, paramDefs, queryStringParamDefs) {
+        this._path = path;
+        this._paramDefs = paramDefs;
+        this._queryStringParamDefs = queryStringParamDefs;
+    }
+
+    get path() {
+        return this._path;
+    }
+
+    get paramDefs() {
+        return this._paramDefs;
+    }
+
+    toUrl(params) {
+        const path = this.generatePath(this.path, Object.assign(this.paramDefs || {}, params));
+        const queryString = this.generateQueryString(this._queryStringParamDefs, params);
+
+        return queryString
+            ? `${path}?${queryString}`
+            : path;
+    }
+
+    compilePath(path) {
+        if (cache[path]) return cache[path];
+
+        const generator = compile(path);
+
+        if (cacheCount < cacheLimit) {
+            cache[path] = generator;
+            cacheCount++;
+        }
+
+        return generator;
+    }
+
+    generatePath(path = "/", params = {}) {
+        return path === "/"
+            ? path
+            : this.compilePath(path)(params, { pretty: true });
+    }
+
+    generateQueryString(paramDefs, params = {}) {
+        if (!paramDefs || this.isEmptyObject(paramDefs)) {
+            return null;
+        }
+        if (this.isEmptyObject(params)) {
+            return null;
+        }
+
+        const queryStringParams = Object
+            .keys(params)
+            .filter(key => Object.keys(paramDefs).indexOf(key) > -1)
+            .reduce((acc, key) => {
+                const value = params[key] === 'undefined' ? undefined
+                    : params[key] === 'null' ? null
+                        : params[key];
+                const paramDef = paramDefs[key];
+                return paramDef === value
+                    ? acc //avoid query string clutter: don't serialize values that are the same as the default
+                    : {
+                        [key]: params[key],
+                        ...acc
+                    }
+            }, {});
+
+        // If no params to serialize, return null
+        if (!queryStringParams || Object.keys(queryStringParams).length === 0) {
+            return null;
+        }
+        return new URLSearchParams(queryStringParams).toString();
+    }
+
+    isEmptyObject(obj) {
+        return Object.keys(obj).length === 0 && obj.constructor === Object;
+    }
+}