@logora/debate 0.1.0 → 0.1.1

package/src/components/user/update_user_info_modal/UpdateUserInfoModal.module.scss

@@ -1,176 +0,0 @@
-@use "styles/spacing" as spacing;
-@use "styles/theme" as theme;
-@use "styles/flex" as flex;
-@use "styles/display" as display;
-
-.container {
-  display: flex !important;
-  @include flex.flex-direction(column, xs);
-  @include flex.flex-direction(row, sm);
-  @include flex.align-items(flex-start, sm);
-  @include flex.align-items(center, xs);
-  @include spacing.mb(4, xs);
-}
-
-.nameContainer {
-  display: flex !important;
-  @include flex.flex-direction(column, xs);
-  @include flex.flex-direction(row, sm);
-  @include flex.align-items(flex-start, sm);
-  @include flex.justify-content(center, xs);
-  @include flex.justify-content(flex-start, sm);
-  gap: spacing.$spacer;
-}
-
-.inputsContainer {
-  margin-left: spacing.$spacer-xl;
-  display: flex;
-  flex-direction: column;
-  gap: spacing.$spacer;
-  @include display.media-breakpoint-down(xs) {
-    margin-left: 0;
-    margin-top: spacing.$spacer-xl;
-  }
-}
-
-.hint {
-  width: 100%;
-  font-size: theme.$font-size-small;
-  color: theme.$text-secondary;
-}
-
-.langSelect {
-  width: 100%;
-}
-
-.textArea {
-  width: 100%;
-  height: 100px;
-  box-sizing: border-box;
-  outline: 0;
-  padding: 0.69em 1em;
-  font-size: inherit;
-  font-family: inherit;
-  border: theme.$box-border;
-  box-shadow: theme.$box-shadow;
-  border-radius: theme.$box-border-radius;
-  background-color: theme.$background-color-primary;
-  color: theme.$text-primary;
-
-  // when no content in the input and not focused, display the label as the placeholder
-  &:placeholder-shown:not(:focus) {
-    & ~ label {
-      transition: top 300ms, font-size 300ms, padding-top 300ms, transform 300ms,
-        color 300ms ease-in-out;
-      top: 50%;
-      transform: translateY(-50%);
-      font-size: 1em;
-      background-color: unset;
-    }
-  }
-
-  // keep precedence! filled < hover < success < error < disabled
-  &.filled {
-    background-color: theme.$background-color-secondary;
-  }
-  &::placeholder {
-    color: theme.$text-secondary;
-  }
-  &:hover {
-    border: 1px solid theme.$text-secondary;
-  }
-  &:focus {
-    border: 1px solid theme.$text-secondary !important;
-    background-color: theme.$background-color-primary;
-    & ~ label {
-      color: theme.$text-secondary !important;
-    }
-  }
-
-  &.success {
-    border: 1px solid theme.$success-primary !important;
-    & ~ label {
-      color: theme.$success-primary;
-    }
-  }
-  &.error {
-    border: 1px solid theme.$cancel-primary !important;
-    & ~ label {
-      color: theme.$cancel-primary;
-    }
-  }
-  &:disabled {
-    cursor: not-allowed;
-    background-color: theme.$text-tertiary;
-    border: 1px solid theme.$darken-text-tertiary;
-    & ~ label {
-      color: theme.$darkest-text-tertiary;
-    }
-  }
-}
-
-.userSaveBox {
-  float: right;
-  margin-top: spacing.$spacer;
-}
-
-.dialog {
-  margin-bottom: spacing.$spacer;
-}
-
-// PROFILE PICTURE
-.userPictureUpload {
-  width: 160px;
-  height: 160px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  background: #666;
-  border-radius: 50%;
-  margin-bottom: spacing.$spacer;
-  object-fit: cover;
-  @include display.media-breakpoint-down(xs) {
-    width: 80px;
-    height: 80px;
-  }
-}
-
-.userImageContainer {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-
-.formFooterTerms {
-  @include spacing.mt(3, xs);
-  font-size: theme.$font-size-small;
-  text-align: center;
-}
-
-.termsLink {
-  color: theme.$call-primary !important;
-}
-
-.backButton {
-  width: max-content;
-  margin-top: spacing.$spacer-xl;
-  border-bottom: 1px solid theme.$text-secondary;
-  cursor: pointer;
-}
-
-.toggle {
-  @include spacing.mt(3, xs);
-  color: theme.$text-primary;
-}
-
-.toggle .cgu {
-  color: theme.$text-primary;
-  font-weight: theme.$font-weight-bold;
-  text-decoration: underline !important;
-}
-
-.required {
-  color: theme.$cancel-primary;
-  @include spacing.mt(3, xs);
-  font-size: theme.$font-size-small;
-}

package/src/components/user/update_user_info_modal/UpdateUserInfoModal.stories.jsx

@@ -1,113 +0,0 @@
-export default {
-    title: 'User/Update User Info Modal',
-    component: UpdateUserInfoModal,
-    args: {},
-    argTypes: {}
-};
-
-import React from 'react';
-import { UpdateUserInfoModal } from './UpdateUserInfoModal';
-import { IntlProvider } from 'react-intl';
-import { dataProvider, DataProviderContext } from '@logora/debate/data/data_provider';
-import { AuthProvider, AuthContext } from '@logora/debate/auth/use_auth';
-import { ModalProvider } from "@logora/debate/dialog/modal";
-import { ConfigProvider } from '@logora/debate/data/config_provider';
-import { IconProvider } from '@logora/debate/icons/icon_provider';
-import * as regularIcons from '@logora/debate/icons/regular_icons';
-import { faker } from '@faker-js/faker';
-
-const httpClient = {
-    get: () => null,
-    post: () => null,
-    patch: () => { return new Promise((resolve, reject) => {
-            resolve(
-                {
-                    status: 200, 
-                    data: {
-                        success: true,
-                        data: {
-                            language: "fr",
-                            first_name: "Test",
-                            last_name: "Test"
-                        }
-                    }
-                } 
-            );
-        });
-    },
-};
-
-const currentUser = {
-    id: faker.number.int(),
-    full_name: faker.person.fullName(),
-    first_name: faker.person.firstName(),
-    last_name: faker.person.lastName(),
-    description: faker.person.jobTitle(),
-    image_url: faker.image.avatarGitHub(),
-    points: faker.number.int()
-}
-
-const data = dataProvider(httpClient, "https://mock.example.api");
-
-export const DefaultUpdateUserInfoModal = () => {
-    return (
-        <div style={{ width: "850px", height: "300px" }}>
-            <ModalProvider>
-                <ConfigProvider config={{ translation: { translationMethods: [{fr: "en"}] }}}>
-                    <IconProvider library={regularIcons}>
-                        <IntlProvider locale="en">
-                            <DataProviderContext.Provider value={{ dataProvider: data }}>
-                                <AuthProvider>
-                                    <UpdateUserInfoModal />
-                                </AuthProvider>
-                            </DataProviderContext.Provider>
-                        </IntlProvider>
-                    </IconProvider>
-                </ConfigProvider>
-            </ModalProvider> 
-        </div>
-    );
-};
-
-export const UpdateUserInfoModalWithTermsAndConsent = () => {
-    return (
-        <div style={{ width: "850px", height: "300px" }}>
-            <ModalProvider>
-                <ConfigProvider config={{ translation: { translationMethods: [{fr: "en"}] }}}>
-                    <IconProvider library={regularIcons}>
-                        <IntlProvider locale="en">
-                            <DataProviderContext.Provider value={{ dataProvider: data }}>
-                                <AuthProvider>
-                                    <UpdateUserInfoModal 
-                                        showEmailConsent={true}
-                                        showTerms={true}
-                                    />
-                                </AuthProvider>
-                            </DataProviderContext.Provider>
-                        </IntlProvider>
-                    </IconProvider>
-                </ConfigProvider>
-            </ModalProvider> 
-        </div>
-    );
-};
-
-export const UpdateUserInfoModalWithInfos = () => {
-    return (
-        <div style={{ width: "850px", height: "300px" }}>
-            <ModalProvider>
-                <ConfigProvider config={{ translation: { translationMethods: [{fr: "en"}] }}}>
-                    <IconProvider library={regularIcons}>
-                        <IntlProvider locale="en">
-                            <DataProviderContext.Provider value={{ dataProvider: data }}>
-                                <AuthContext.Provider value={{ currentUser: currentUser, isLoggedIn: true }}>
-                                    <UpdateUserInfoModal />
-                                </AuthContext.Provider>
-                            </DataProviderContext.Provider>
-                        </IntlProvider>
-                    </IconProvider>
-                </ConfigProvider>
-            </ModalProvider> 
-        </div>
-    );
-};

package/src/components/user/update_user_info_modal/UpdateUserInfoModal.test.jsx

@@ -1,213 +0,0 @@
-import React from "react";
-import { render } from "@testing-library/react";
-import userEvent from '@testing-library/user-event';
-import { UpdateUserInfoModal } from "./UpdateUserInfoModal";
-import { IntlProvider } from 'react-intl';
-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 { ConfigProvider } from '@logora/debate/data/config_provider';
-import { IconProvider } from '@logora/debate/icons/icon_provider';
-import * as regularIcons from '@logora/debate/icons/regular_icons';
-import { faker } from '@faker-js/faker';
-
-const httpClient = {
-    get: vi.fn(),
-    post: vi.fn(),
-    patch: vi.fn()
-};
-
-const currentUser = {
-    id: faker.number.int(),
-    full_name: faker.person.fullName(),
-    image_url: faker.image.avatarGitHub(),
-    points: faker.number.int()
-}
-
-const currentUserWithInfos = {
-    id: faker.number.int(),
-    full_name: faker.person.fullName(),
-    first_name: faker.person.firstName(),
-    last_name: faker.person.lastName(),
-    description: faker.person.jobTitle(),
-    image_url: faker.image.avatarGitHub(),
-    points: faker.number.int()
-}
-
-const data = dataProvider(httpClient, "https://mock.example.api");
-
-beforeAll(() => {
-    HTMLDialogElement.prototype.showModal = function () {
-      this.setAttribute("open", "");
-    };
-    HTMLDialogElement.prototype.close = function () {
-      this.removeAttribute("open");
-    };
-  });
-
-describe("UpdateUserInfoModal", () => {
-    it("should appear normally", async () => {
-        const { queryByText } = render(
-            <ModalProvider>
-                <ConfigProvider config={{ translation: { translationMethods: [{fr: "en"}]}, actions: { disableNameUpdate: true } }}>
-                    <IntlProvider locale="en">
-                        <IconProvider library={regularIcons}>
-                            <DataProviderContext.Provider value={{ dataProvider: data }}>
-                                <AuthContext.Provider value={{ currentUser: currentUser, isLoggedIn: true }}>
-                                    <UpdateUserInfoModal />
-                                </AuthContext.Provider>
-                            </DataProviderContext.Provider>
-                        </IconProvider>
-                    </IntlProvider>
-                </ConfigProvider>
-            </ModalProvider> 
-        );
-        expect(queryByText("Last name")).toBeInTheDocument();
-        expect(queryByText("First name")).toBeInTheDocument();
-        expect(queryByText("0")).toBeInTheDocument();
-        expect(queryByText("Update your profile")).toBeInTheDocument();
-        expect(queryByText("Select an avatar")).toBeInTheDocument();
-        expect(queryByText("Save")).toBeInTheDocument();
-        expect(queryByText("I declare I have read the General Conditions of Use and the Privacy policy of the debate space and accept them.")).not.toBeInTheDocument();
-        expect(queryByText("I agree to receive emails from the editor")).not.toBeInTheDocument();
-    });
-
-    it("should appear with terms and consent", async () => {
-        const { queryByText } = render(
-            <ModalProvider>
-                <ConfigProvider config={{ translation: { translationMethods: [{fr: "en"}]}, actions: { disableNameUpdate: true } }}>
-                    <IntlProvider locale="en">
-                        <IconProvider library={regularIcons}>
-                            <DataProviderContext.Provider value={{ dataProvider: data }}>
-                                <AuthContext.Provider value={{ currentUser: currentUser, isLoggedIn: true }}>
-                                    <UpdateUserInfoModal 
-                                        showEmailConsent
-                                        showTerms
-                                    />
-                                </AuthContext.Provider>
-                            </DataProviderContext.Provider>
-                        </IconProvider>
-                    </IntlProvider>
-                </ConfigProvider>
-            </ModalProvider> 
-        );
-        expect(queryByText("Last name")).toBeInTheDocument();
-        expect(queryByText("First name")).toBeInTheDocument();
-        expect(queryByText("0")).toBeInTheDocument();
-        expect(queryByText("Update your profile")).toBeInTheDocument();
-        expect(queryByText("Select an avatar")).toBeInTheDocument();
-        expect(queryByText("Save")).toBeInTheDocument();
-        expect(queryByText(/I declare I have read the /i)).toBeInTheDocument();
-        expect(queryByText(/ of the debate space and accept them./i)).toBeInTheDocument();
-        expect(queryByText("I agree to receive emails from the editor")).toBeInTheDocument();
-    });
-
-    it("should throw an error if the name field is less than 2 characters", async () => {
-        const { getByTestId, queryByText } = render(
-            <ModalProvider>
-                <ConfigProvider config={{ translation: { translationMethods: [{fr: "en"}]}, actions: { disableNameUpdate: true } }}>
-                    <IntlProvider locale="en">
-                        <IconProvider library={regularIcons}>
-                            <DataProviderContext.Provider value={{ dataProvider: data }}>
-                                <AuthContext.Provider value={{ currentUser: currentUser, isLoggedIn: true }}>
-                                    <UpdateUserInfoModal />
-                                </AuthContext.Provider>
-                            </DataProviderContext.Provider>
-                        </IconProvider>
-                    </IntlProvider>
-                </ConfigProvider>
-            </ModalProvider> 
-        );
-
-        const saveButton = getByTestId('save-button');
-        await userEvent.click(saveButton)
-        expect(queryByText("first_name is too short.")).toBeInTheDocument();
-        expect(queryByText("last_name is too short.")).toBeInTheDocument();
-    });
-
-    it("should display back button when choosing an avatar", async () => {
-        const { getByTestId, queryByText } = render(
-            <ModalProvider>
-                <ConfigProvider config={{ translation: { translationMethods: [{fr: "en"}]}, actions: { disableNameUpdate: true } }}>
-                    <IntlProvider locale="en">
-                        <IconProvider library={regularIcons}>
-                            <DataProviderContext.Provider value={{ dataProvider: data }}>
-                                <AuthContext.Provider value={{ currentUser: currentUser, isLoggedIn: true }}>
-                                    <UpdateUserInfoModal 
-                                        showEmailConsent
-                                        showTerms
-                                    />
-                                </AuthContext.Provider>
-                            </DataProviderContext.Provider>
-                        </IconProvider>
-                    </IntlProvider>
-                </ConfigProvider>
-            </ModalProvider> 
-        );
-        
-        const avatarButton = getByTestId('avatar-button');
-        await userEvent.click(avatarButton)
-
-        expect(queryByText("Back")).toBeInTheDocument();
-    });
-
-    it("should throw an error if the terms are not accepted", async () => {
-        const { getByTestId, queryByText } = render(
-            <ModalProvider>
-                <ConfigProvider config={{ translation: { translationMethods: [{fr: "en"}]}, actions: { disableNameUpdate: true } }}>
-                    <IntlProvider locale="en">
-                        <IconProvider library={regularIcons}>
-                            <DataProviderContext.Provider value={{ dataProvider: data }}>
-                                <AuthContext.Provider value={{ currentUser: currentUser, isLoggedIn: true }}>
-                                    <UpdateUserInfoModal 
-                                        showEmailConsent
-                                        showTerms
-                                    />
-                                </AuthContext.Provider>
-                            </DataProviderContext.Provider>
-                        </IconProvider>
-                    </IntlProvider>
-                </ConfigProvider>
-            </ModalProvider>
-        );
-        
-        const firstName = getByTestId('first-name');
-        await userEvent.click(firstName)
-        await userEvent.keyboard("First name")
-
-        const lastName = getByTestId('last-name');
-         await userEvent.click(lastName)
-        await userEvent.keyboard("Last name")
-
-        const saveButton = getByTestId('save-button');
-        await userEvent.click(saveButton)
-        expect(queryByText("accepts_terms must be true.")).toBeInTheDocument();
-    });
-
-    it("should displays the current user's info", async () => {
-        const { getByTestId} = render(
-            <ModalProvider>
-                <ConfigProvider config={{ translation: { translationMethods: [{fr: "en"}]}, actions: { disableNameUpdate: true } }}>
-                    <IntlProvider locale="en">
-                        <IconProvider library={regularIcons}>
-                            <DataProviderContext.Provider value={{ dataProvider: data }}>
-                                <AuthContext.Provider value={{ currentUser: currentUserWithInfos, isLoggedIn: true }}>
-                                    <UpdateUserInfoModal />
-                                </AuthContext.Provider>
-                            </DataProviderContext.Provider>
-                        </IconProvider>
-                    </IntlProvider>
-                </ConfigProvider>
-            </ModalProvider> 
-        );
-
-        const firstName = getByTestId('first-name');
-        expect(firstName.value).toBe(currentUserWithInfos.first_name);
-
-        const lastName = getByTestId('last-name');
-        expect(lastName.value).toBe(currentUserWithInfos.last_name);
-
-        const description = getByTestId('description');
-        expect(description.value).toBe(currentUserWithInfos.description);
-    });
-});

package/src/components/user/update_user_info_modal/index.js

@@ -1,2 +0,0 @@
-export { UpdateUserInfoModal } from "./UpdateUserInfoModal";
-export { useUpdateUserInfo } from "./useUpdateUserInfo";

package/src/components/user/update_user_info_modal/useUpdateUserInfo.jsx

@@ -1,40 +0,0 @@
-import React, { useEffect } from "react";
-import { useAuth } from "@logora/debate/auth/use_auth";
-import { useModal } from "@logora/debate/dialog/modal";
-import { useConfig } from "@logora/debate/data/config_provider";
-import { UpdateUserInfoModal } from "./UpdateUserInfoModal";
-
-export const useUpdateUserInfo = () => {
-	const { currentUser, isLoggedIn } = useAuth();
-	const { showModal, isModalPresent } = useModal();
-	const config = useConfig();
-
-	const showUpdateUserInfoModal = () => {
-		showModal(
-			<UpdateUserInfoModal
-				showEmailConsent={config.auth?.showEmailConsent}
-				showTerms={config.auth?.hideCgu !== true}
-				termsUrl={
-					config.provider?.cguUrl || "https://www.logora.com/blog-posts/cgu"
-				}
-				privacyUrl={
-					config.provider?.privacyUrl ||
-					"https://www.logora.com/blog-posts/privacy-policy"
-				}
-			/>,
-		);
-	};
-
-	useEffect(() => {
-		if (
-			!isModalPresent &&
-			isLoggedIn &&
-			currentUser.is_onboarded === false &&
-			config.auth?.showOnboarding === true
-		) {
-			showUpdateUserInfoModal();
-		}
-	}, [isModalPresent, isLoggedIn, config.auth?.showOnboarding]);
-
-	return null;
-};

package/src/components/user/user_box/UserBox.docs.mdx

@@ -1,21 +0,0 @@
----
-description: A component that renders an user box.
----
-
-import { UserBox } from './UserBox';
-
-A component that renders a user box. It renders a profile image, a full name and a description.
-
-### Component usage
-```js
-import { UserBox } from '@logora/user.user_box';
-```
-```js
-<BrowserRouter>
-    <IntlProvider locale="en">
-        <ConfigProvider routes={{...routes}}>
-            <UserBox user={user} />
-        </ConfigProvider>
-    </IntlProvider>
-</BrowserRouter>
-```

package/src/components/user/user_box/UserBox.jsx

@@ -1,59 +0,0 @@
-import React from 'react';
-import { useIntl } from 'react-intl';
-import { FormattedMessage } from 'react-intl';
-import { Link } from '@logora/debate/action/link';
-import { useRoutes } from '@logora/debate/data/config_provider';
-import { Avatar } from '@logora/debate/user/avatar';
-import styles from './UserBox.module.scss';
-import PropTypes from 'prop-types';
-import cx from 'classnames';
-
-export const UserBox = ({ user }) => {
-	const intl = useIntl();
-	const routes = useRoutes();
-
-	return (
-		<div className={cx(styles.userBox, "author-box")}>
-			<div className={styles.userBoxHeader}>
-				<Link to={routes.userShowLocation.toUrl({ userSlug: user.hash_id })} aria-label={intl.formatMessage({ id: "user.user_box.author_link.aria_label", defaultMessage: "View profile" })}>
-					<Avatar data-tid={"action_view_user_image"} userName={user.full_name} avatarUrl={user.image_url} isOnline={(new Date(user.last_activity) > Date.now())} size={60} />
-				</Link>
-			</div>
-			<div className={styles.userBoxDescription}>
-				<Link to={routes.userShowLocation.toUrl({ userSlug: user.hash_id })}>
-					<div data-tid={"action_view_user_name"} className={styles.userBoxName} title={user.full_name}>
-						{user.full_name}
-					</div>
-				</Link>
-				{user.role === 'contributor' && (
-					<Link to={routes.userShowLocation.toUrl({ userSlug: user.hash_id })} hash={"activity"}>
-						<div className={styles.userBoxPoints}>
-							<span>
-								<FormattedMessage
-									id="user.user_box.points"
-									values={{ count: user.points }}
-									defaultMessage="{count} points"
-								/>
-							</span>
-						</div>
-					</Link>
-				)}
-				<Link to={routes.userShowLocation.toUrl({ userSlug: user.hash_id })}>
-					<div className={styles.userBoxStats}>
-						<div className={styles.userDebates}>
-							<FormattedMessage id="user.user_box.user_arguments" values={{ count: user.messages_count }} defaultMessage="{count} arguments" />
-						</div>
-						<div className={styles.userVotes}>
-							<FormattedMessage id="user.user_box.user_votes" values={{ count: user.upvotes }} defaultMessage="{count} votes" />
-						</div>
-					</div>
-				</Link>
-			</div>
-		</div>
-	);
-}
-
-UserBox.propTypes = {
-	/** User object, must contains : image_url, last_activity, full_name, points, hash_id, messages_count, upvotes */
-	user: PropTypes.object,
-}