@logora/debate 0.1.0 → 0.1.1

package/src/components/suggestion/suggestion_box/SuggestionBox.stories.jsx

@@ -1,147 +0,0 @@
-import React from 'react';
-import { IntlProvider } from 'react-intl';
-import { MemoryRouter } from 'react-router-dom';
-import { IconProvider } from '@logora/debate/icons/icon_provider';
-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 { ResponsiveProvider } from '@logora/debate/hooks/use_responsive';
-import { ToastProvider } from '@logora/debate/dialog/toast_provider';
-import { VoteProvider } from '@logora/debate/vote/vote_provider';
-import { Location } from '@logora/debate/util/location';
-import * as regularIcons from '@logora/debate/icons/regular_icons';
-import { faker } from '@faker-js/faker';
-import { SuggestionBox } from './SuggestionBox';
-
-const debateShowLocation = new Location('espace-debat/group/:debateSlug', { debateSlug: '' });
-
-const routes = {
-  debateShowLocation
-};
-
-const vote = {
-  id: faker.number.int(),
-  voteable_type: faker.lorem.word(),
-  voteable_id: faker.number.int(),
-  user_id: faker.number.int()
-};
-
-const currentUser = {
-  id: faker.number.int(),
-  full_name: faker.person.fullName(),
-  image_url: faker.image.avatarGitHub(),
-  points: faker.number.int()
-};
-
-const generateSuggestion = (groupOverrides = {}, suggestionOverrides = {}) => ({
-  id: faker.number.int(),
-  name: faker.lorem.words(),
-  slug: faker.lorem.slug(),
-  created_at: faker.date.recent().toISOString(),
-  score: faker.number.int(),
-  language: faker.helpers.arrayElement(['en', 'fr', 'es']),
-  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(),
-    ...suggestionOverrides
-  },
-  ...groupOverrides
-});
-
-const baseSuggestion = generateSuggestion(
-  { is_published: false },
-  { is_accepted: false, is_expired: false }
-);
-
-const publishedSuggestion = generateSuggestion(
-  { is_published: true },
-  { is_accepted: true, is_expired: false }
-);
-
-const config = {
-  modules: {
-    suggestions: {
-      vote_goal: 30
-    }
-  }
-};
-
-const httpClient = {
-  post: () => Promise.resolve({ data: { success: true, data: { resource: vote } } })
-};
-
-const data = dataProvider(httpClient, 'https://mock.example.api');
-
-export default {
-  title: 'Suggestion/Suggestion Box',
-  component: SuggestionBox,
-  argTypes: {
-    disabled: { control: 'boolean' },
-    suggestion: { control: 'object' }
-  },
-  render: (args) => (
-    <MemoryRouter>
-      <ConfigProvider routes={{ ...routes }} config={config}>
-        <DataProviderContext.Provider value={{ dataProvider: data }}>
-          <AuthContext.Provider value={{ currentUser, isLoggedIn: true }}>
-            <ResponsiveProvider>
-              <ModalProvider>
-                <ListProvider>
-                  <ToastProvider>
-                    <VoteProvider>
-                      <IntlProvider locale='en'>
-                        <IconProvider library={regularIcons}>
-                          <SuggestionBox {...args} />
-                        </IconProvider>
-                      </IntlProvider>
-                    </VoteProvider>
-                  </ToastProvider>
-                </ListProvider>
-              </ModalProvider>
-            </ResponsiveProvider>
-          </AuthContext.Provider>
-        </DataProviderContext.Provider>
-      </ConfigProvider>
-    </MemoryRouter>
-  )
-};
-
-export const DefaultSuggestionBox = {
-  args: {
-    suggestion: baseSuggestion,
-    disabled: false
-  }
-};
-
-export const DisabledSuggestionBox = {
-  args: {
-    suggestion: baseSuggestion,
-    disabled: true
-  }
-};
-
-export const PublishedSuggestionBox = {
-  args: {
-    suggestion: publishedSuggestion,
-    disabled: false
-  }
-};

package/src/components/suggestion/suggestion_box/SuggestionBox.test.jsx

@@ -1,184 +0,0 @@
-import React from "react";
-import { render, waitFor, fireEvent } 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 { SuggestionBox } from "./SuggestionBox";
-import { faker } from "@faker-js/faker";
-
-const vote = {
-	id: faker.number.int(),
-	voteable_type: faker.lorem.word(),
-	voteable_id: faker.number.int(),
-	user_id: faker.number.int(),
-};
-
-const currentUser = {
-	id: faker.number.int(),
-	full_name: faker.person.fullName(),
-	image_url: faker.image.avatarGitHub(),
-	points: faker.number.int(),
-};
-
-const generateSuggestion = (groupOverrides, suggestionOverrides) => ({
-	id: faker.number.int(),
-	name: faker.lorem.words(),
-	slug: faker.lorem.slug(),
-	created_at: faker.date.recent().toISOString(),
-	score: faker.number.int(),
-	language: faker.helpers.arrayElement(['en', 'fr', 'es']),
-	is_active: true,
-	messages_count: faker.number.int(),
-	is_published: true,
-	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,
-		is_published: faker.datatype.boolean(),
-		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(),
-		...suggestionOverrides,
-	},
-	...groupOverrides,
-});
-const suggestion = generateSuggestion();
-
-const config = {
-	modules: {
-		suggestions: {
-			vote_goal: 30,
-		},
-	},
-};
-
-const httpClient = {
-	post: vi.fn(() =>
-		Promise.resolve({ data: { success: true, data: { resource: vote } } }),
-	),
-};
-
-const data = dataProvider(httpClient, "https://mock.example.api");
-
-const routes = {
-	debateShowLocation: {
-		toUrl: ({ debateSlug }) => `/espace-debat/group/${debateSlug}`,
-	},
-};
-
-const Providers = ({ children }) => (
-	<MemoryRouter>
-		<ConfigProvider config={{ config }} routes={{ ...routes }}>
-			<DataProviderContext.Provider value={{ dataProvider: data }}>
-				<AuthContext.Provider value={{ currentUser, isLoggedIn: true }}>
-					<ResponsiveProvider>
-						<ModalProvider>
-							<ListProvider>
-								<ToastProvider>
-									<VoteProvider>
-										<IntlProvider locale="en">
-											<IconProvider library={regularIcons}>
-												{children}
-											</IconProvider>
-										</IntlProvider>
-									</VoteProvider>
-								</ToastProvider>
-							</ListProvider>
-						</ModalProvider>
-					</ResponsiveProvider>
-				</AuthContext.Provider>
-			</DataProviderContext.Provider>
-		</ConfigProvider>
-	</MemoryRouter>
-);
-
-const renderSuggestionBox = (props) =>
-	render(
-		<Providers>
-			<SuggestionBox {...props} />
-		</Providers>,
-	);
-
-describe("SuggestionBox", () => {
-	it("should render SuggestionBox correctly", () => {
-		const { getByText } = renderSuggestionBox({ suggestion, disabled: false });
-
-		expect(getByText(suggestion.name)).toBeInTheDocument();
-		expect(getByText(suggestion.debate_suggestion.author.full_name)).toBeInTheDocument();
-		expect(
-			getByText(`${suggestion.debate_suggestion.total_upvotes} supports`),
-		).toBeInTheDocument();
-	});
-
-	it("should disable SuggestionBox correctly", () => {
-		const { getByText } = renderSuggestionBox({ suggestion, disabled: true });
-
-		expect(getByText(suggestion.name)).toBeInTheDocument();
-		expect(getByText(suggestion.debate_suggestion.author.full_name)).toBeInTheDocument();
-		expect(
-			getByText(`${suggestion.debate_suggestion.total_upvotes} supports`),
-		).toBeInTheDocument();
-	});
-
-	// Cas d'une suggestion publiée
-	it("should render published SuggestionBox correctly", () => {
-		const publishedSuggestion = generateSuggestion(
-			{ is_published: true },
-			{
-				is_accepted: true,
-				is_expired: false,
-			},
-		);
-		const { getByText } = renderSuggestionBox({
-			suggestion: publishedSuggestion,
-			disabled: false,
-		});
-		expect(getByText(publishedSuggestion.name)).toBeInTheDocument();
-		expect(getByText(publishedSuggestion.debate_suggestion.author.full_name)).toBeInTheDocument();
-		expect(getByText(/Go to debate/)).toBeInTheDocument();
-	});
-
-	// Cas où on vote: le nombre de personnes intéressées est correct
-	it("should update totalUpvotes when voting", async () => {
-		const suggestionVote = generateSuggestion(
-			{ is_published: false },
-			{
-				is_accepted: false,
-				is_expired: false,
-				total_upvotes: 6,
-				total_downvotes: 5,
-			},
-		);
-		const { getByText, getByTestId } = renderSuggestionBox({
-			suggestion: suggestionVote,
-			disabled: false,
-		});
-		const upvoteButton = getByTestId("upvote-icon");
-
-		await userEvent.click(upvoteButton);
-		expect(getByText("7 supports")).toBeInTheDocument();
-	});
-});

package/src/components/suggestion/suggestion_box/index.js

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

package/src/components/suggestion/suggestion_input/SuggestionInput.docs.mdx

@@ -1,19 +0,0 @@
----
-description: An input to submit a suggestion in a debate.
-labels: ['suggestion', 'input']
----
-
-An input to write and submit an suggestion.
-
-### Component usage
-
-```js
-import { SuggestionInput } from '@logora/debate.suggestion.suggestion_input';
-
-```
-
-```js
-
- <SuggestionInput />
-
-```

package/src/components/suggestion/suggestion_input/SuggestionInput.jsx

@@ -1,212 +0,0 @@
-import React, { useState, useRef, useEffect } from "react";
-import { useIntl, FormattedMessage } from "react-intl";
-import { useDataProvider } from "@logora/debate/data/data_provider";
-import { useAuth } from "@logora/debate/auth/use_auth";
-import { useInput } from "@logora/debate/input/input_provider";
-import { useList } from "@logora/debate/list/list_provider";
-import { useAuthRequired } from "@logora/debate/hooks/use_auth_required";
-import { useFormValidation } from "@logora/debate/forms/use_form_validation";
-import { Button } from "@logora/debate/action/button";
-import { TextInput } from "@logora/debate/input/text_input";
-import { useToast } from "@logora/debate/dialog/toast_provider";
-import useSessionStorageState from '@rooks/use-sessionstorage-state';
-import cx from "classnames";
-import styles from "./SuggestionInput.module.scss";
-
-export const SuggestionInput = ({
-	onSubmit = null,
-	maxLength = 140,
-	maxPerUser = 5,
-	disabled = false,
-	userGuideUrl,
-	hideUserGuideLink = false
-}) => {
-	const intl = useIntl();
-	const api = useDataProvider();
-	const list = useList();
-	const { toast } = useToast() || {};
-	const { isLoggedIn } = useAuth();
-	const { focus, setFocus } = useInput();
-	const { errors, validate } = useFormValidation();
-	const [active, setActive] = useState(true);
-	const [flash, setFlash] = useState(false);
-	const [suggestion, setSuggestion] = useState("");
-	const [savedSuggestion, setSavedSuggestion, removeSavedSuggestion] =
-	    useSessionStorageState("userSuggestion", {});
-	const suggestionInputContainer = useRef(null);
-	const inputForm = useRef(null);
-	const requireAuthentication = useAuthRequired();
-
-	useEffect(() => {
-		if (savedSuggestion?.suggestion) {
-			setSuggestion(savedSuggestion.suggestion);
-		}
-	}, []);
-
-	useEffect(() => {
-		if (active) {
-			const saveContent = setInterval(() => {
-				if (suggestion?.length > 0) {
-					const suggestionToSave = {
-						suggestion: suggestion,
-					};
-					setSavedSuggestion(suggestionToSave);
-				}
-			}, 1000);
-			return () => clearInterval(saveContent);
-		}
-	}, [active, suggestion]);
-
-	useEffect(() => {
-		if (focus) {
-			scrollToEditor();
-			focusEditor();
-			flashing();
-			setFocus(false);
-		}
-	}, [focus]);
-
-	const scrollToEditor = () => {
-		inputForm.current.scrollIntoView({ behavior: "smooth" });
-	};
-
-	const focusEditor = () => {
-		inputForm.current.focus();
-	};
-
-	const flashing = () => {
-		if (!flash) {
-			setFlash(true);
-			const timer = setTimeout(() => {
-				setFlash(false);
-			}, 2000);
-			return () => clearTimeout(timer);
-		}
-	};
-
-	const resetEditor = () => {
-		setSuggestion("");
-		removeSavedSuggestion();
-	};
-
-	const handleSubmit = () => {
-		if (isLoggedIn) {
-			const data = {
-				name: suggestion,
-				position_list: JSON.stringify(intl.formatMessage({
-					id: "suggestion.position_list",
-					defaultMessage: "Yes,No",
-				}).split(",")),
-				is_suggestion: true,
-				is_published: false,
-			};
-			const suggestionValidationRules = [
-				{ name: ["length", 3] },
-				{ name: ["maxChar", maxLength] },
-				{ name: ["question", null] },
-			];
-			if (validate(data, suggestionValidationRules)) {
-				setSuggestion("");
-				resetEditor();
-				setActive(false);
-				api.create("groups", data).then((response) => {
-					if (response.data.success) {
-						const suggestion = response.data.data.resource;
-						list.add("suggestionsList", [suggestion]);
-						toast(
-							intl.formatMessage({
-								id: "alert.suggestion_create",
-								defaultMessage: "Your suggestion has been sent !",
-							}),
-							{ type: "success" },
-						);
-						if (onSubmit) {
-							onSubmit();
-						}
-					}
-				});
-			}
-		} else {
-			requireAuthentication({});
-		}
-	};
-
-	return (
-		<div
-			className={styles.suggestionInputContainer}
-			ref={suggestionInputContainer}
-		>
-			<>
-				<div className={cx(styles.suggestionInputItem)}>
-					<div className={styles.suggestionInputTitle}>
-						<FormattedMessage
-							id="suggestion.input_title"
-							defaultMessage="Your suggestion"
-						/>
-					</div>
-					<TextInput
-						ref={inputForm}
-						type="text"
-						aria-label={intl.formatMessage({ id: "suggestion.suggestion_input.aria_label", defaultMessage: "Suggest a debate question" })}
-						name="suggestionInput"
-						role="textbox"
-						placeholder={intl.formatMessage({
-							id: "suggestion.input_placeholder",
-							defaultMessage: "Suggest a debate question",
-						})}
-						onChange={(e) => {
-							setSuggestion(e.target.value);
-						}}
-						value={suggestion}
-						disabled={disabled}
-						error={Object.keys(errors).length > 0}
-						required
-						message={errors?.name}
-						maxLength={maxLength}
-						activeLabel={false}
-					/>
-					<div className={styles.charactersCount}>
-						{maxLength - suggestion.length}{" "}
-						{intl.formatMessage({
-							id: "input.remaining_chars",
-							defaultMessage: "remaining characters",
-						})}
-					</div>
-					{userGuideUrl && !hideUserGuideLink &&(
-						<div className={styles.guideMessage}>
-							<FormattedMessage
-								id="alert.guide_message"
-								defaultMessage={"Contributions must comply with our {userCharter}."}
-								values={{
-									userCharter: (
-										<a className={styles.guideMessage} href={userGuideUrl} target="_blank" >
-											<FormattedMessage id="alert.user_charter" defaultMessage="user charter" />
-										</a>
-									),
-								}}
-							/>
-						</div>
-					)}
-					<div className={styles.suggestionInputSubtitle}>
-						{intl.formatMessage(
-							{
-								id: "suggestion.input_info",
-								defaultMessage:
-									"The positions supported will be YES / NO. You can only post 5 suggestions at a time. Suggestions may not exceed 140 characters.",
-							},
-							{
-								max_per_user: maxPerUser,
-							},
-						)}
-					</div>
-				</div>
-				<Button
-					handleClick={() => handleSubmit()}
-					className={styles.suggestionInputSubmit}
-				>
-					<FormattedMessage id="action.submit" defaultMessage="Submit" />
-				</Button>
-			</>
-		</div>
-	);
-};

package/src/components/suggestion/suggestion_input/SuggestionInput.module.scss

@@ -1,50 +0,0 @@
-@use 'styles/spacing' as spacing;
-@use 'styles/theme' as theme;
-
-.suggestionInputContainer {
-    display: flex !important;
-    flex-direction: column !important;
-    color: theme.$text-primary;
-    gap: spacing.$spacer;
-}
-
-.suggestionInputItem {
-    display: flex !important;
-    flex-direction: column !important;
-    gap: spacing.$spacer;
-}
-
-.suggestionInputTitle {
-    font-size: theme.$font-size-medium;
-    line-height: theme.$line-height-normal;
-    font-weight: theme.$font-weight-bold;
-    position: relative;
-    width: max-content;
-}
-
-.suggestionInputSubtitle {
-    font-size: theme.$font-size-normal;
-}
-
-.suggestionInputSubmit {
-    width: max-content;
-}
-
-.charactersCount {
-    font-size: theme.$font-size-small;
-    color: theme.$text-secondary;
-    white-space: nowrap;
-}
-
-.guideMessage {
-    font-size: theme.$font-size-small;
-    color: theme.$text-secondary;
-    white-space: nowrap;
-    white-space: normal; 
-    word-break: break-word; 
-    a {
-        font-size: theme.$font-size-small;
-        text-decoration: underline !important;
-        font-weight: bold !important;
-    }
-}

package/src/components/suggestion/suggestion_input/SuggestionInput.stories.jsx

@@ -1,87 +0,0 @@
-import React from 'react';
-import { IntlProvider } from 'react-intl';
-import { BrowserRouter } from 'react-router-dom';
-import { IconProvider } from '@logora/debate/icons/icon_provider';
-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 * as regularIcons from '@logora/debate/icons/regular_icons';
-import { faker } from '@faker-js/faker';
-import { InputProvider } from '@logora/debate/input/input_provider';
-import { SuggestionInput } from './SuggestionInput';
-
-const currentUser = {
-  id: faker.number.int(),
-  full_name: faker.person.fullName(),
-  image_url: faker.image.avatarGitHub(),
-  points: faker.number.int()
-};
-
-const httpClient = {
-  post: () => Promise.resolve({ data: { success: true, data: {} } })
-};
-
-const data = dataProvider(httpClient, 'https://mock.example.api');
-
-export default {
-  title: 'Suggestion/Suggestion Input',
-  component: SuggestionInput,
-  argTypes: {
-    disabled: { control: 'boolean' },
-    maxLength: { control: 'number' },
-    userGuideUrl: { control: 'text' }
-  },
-  render: (args) => (
-    <BrowserRouter>
-      <ConfigProvider>
-        <IconProvider library={regularIcons}>
-          <IntlProvider locale='en'>
-            <DataProviderContext.Provider value={{ dataProvider: data }}>
-              <AuthContext.Provider value={{ currentUser, isLoggedIn: true }}>
-                <ToastProvider>
-                  <ModalProvider>
-                    <ListProvider>
-                      <InputProvider>
-                        <SuggestionInput {...args} />
-                      </InputProvider>
-                    </ListProvider>
-                  </ModalProvider>
-                </ToastProvider>
-              </AuthContext.Provider>
-            </DataProviderContext.Provider>
-          </IntlProvider>
-        </IconProvider>
-      </ConfigProvider>
-    </BrowserRouter>
-  )
-};
-
-export const DefaultSuggestionInput = {
-  args: {
-    disabled: false
-  }
-};
-
-export const DisabledSuggestionInput = {
-  args: {
-    disabled: true
-  }
-};
-
-export const SuggestionInputMaxLength = {
-  args: {
-    disabled: true,
-    maxLength: 30
-  }
-};
-
-export const SuggestionInputWithUserGuideUrl = {
-  args: {
-    disabled: true,
-    maxLength: 30,
-    userGuideUrl: 'https://example.com/user-guide'
-  }
-};