@logora/debate 0.1.0 → 0.2.0

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

@@ -1,121 +0,0 @@
-@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

@@ -1,61 +0,0 @@
-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

@@ -1,51 +0,0 @@
-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

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

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

@@ -1,24 +0,0 @@
----
-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

@@ -1,32 +0,0 @@
-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

@@ -1,138 +0,0 @@
-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

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

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

@@ -1,10 +0,0 @@
----
-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

@@ -1,72 +0,0 @@
-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

@@ -1,63 +0,0 @@
-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

@@ -1,18 +0,0 @@
----
-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

@@ -1,84 +0,0 @@
-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;
-    }
-}