@logora/debate 0.1.0 → 0.1.1

package/src/components/user/avatar_selector/AvatarSelector.module.scss

@@ -1,105 +0,0 @@
-@use 'styles/theme' as theme;
-@use 'styles/spacing' as spacing;
-
-.title {
-    font-size: theme.$font-size-extra-small;
-    text-transform: uppercase;
-    @include spacing.mb(3, xs);
-    &.avatarListTitle {
-        @include spacing.pt(3, xs);
-        @include spacing.mt(3, xs);
-        @include spacing.mb(2, xs);
-        border-top: 1px solid theme.$background-color-secondary;
-    }
-}
-
-.uploadAvatarContainer {
-    display: flex !important;
-    align-items: center !important;
-}
-
-.imageInput {
-    display: none;
-}
-
-.imageInputLabel {
-    height: fit-content !important;
-    @include spacing.p(2, xs);
-    border: 1px solid theme.$call-primary !important;
-    border-radius: theme.$box-border-radius !important;
-    cursor: pointer !important;
-    color: theme.$call-primary !important;
-    &:hover {
-        opacity: .7;
-    }
-}
-
-.avatarList {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
-    grid-gap: 30px;
-    overflow: auto;
-    max-height: 350px;
-    @include spacing.px(1, xs);
-    @include spacing.py(1, xs);
-    &.userChoice {
-        padding-bottom: 60px !important;
-    }
-}
-
-.cancelSelection {
-    width: fit-content;
-    @include spacing.px(3, xs);
-    @include spacing.py(2, xs);
-    @include spacing.mb(2, xs);
-    background-color: theme.$background-color-secondary;
-    color: theme.$text-secondary;
-    border-radius: 30px;
-    font-size: theme.$font-size-extra-small;
-    cursor: pointer;
-    &:hover {
-        opacity: .7;
-    }
-}
-
-.avatar {
-    cursor: pointer;
-    &.selected {
-        box-shadow: 0 0 0 3px theme.$success-primary;
-        box-sizing: border-box;
-    }
-}
-
-.uploadedAvatar {
-    width: 70px;
-    height: 70px;
-    border-radius: 50%;
-    @include spacing.mr(2, xs);
-    object-fit: cover;
-}
-
-.chosenAvatar {
-    width: 40px;
-    height: 40px;
-    border-radius: 50%;
-    object-fit: cover;
-}
-
-.confirm {
-    display: flex !important;
-    gap: 20px;
-    justify-content: center;
-    background-color: theme.$background-color-primary;
-    @include spacing.p(2.5, xs);
-    @include spacing.pr(0, xs);
-    @include spacing.mt(1, xs);
-    position: absolute;
-    bottom: 0px;
-    left: 0px;
-    z-index: 2;
-    width: 100%;
-}
-
-.button {
-    text-transform: uppercase;
-}

package/src/components/user/avatar_selector/AvatarSelector.stories.jsx

@@ -1,46 +0,0 @@
-export default {
-    title: 'User/Avatar Selector',
-    component: AvatarSelector,
-    args: {},
-    argTypes: {}
-};
-
-import React from "react";
-import { AvatarSelector } from "./AvatarSelector";
-import { IntlProvider } from "react-intl";
-import { faker } from '@faker-js/faker';
-
-const avatarUrlList = [faker.image.avatarGitHub(), faker.image.avatarGitHub(), faker.image.avatarGitHub(), faker.image.avatarGitHub(), faker.image.avatarGitHub(), faker.image.avatarGitHub(), faker.image.avatarGitHub(), faker.image.avatarGitHub(), faker.image.avatarGitHub(), faker.image.avatarGitHub(), faker.image.avatarGitHub(), faker.image.avatarGitHub(), faker.image.avatarGitHub(), faker.image.avatarGitHub(), faker.image.avatarGitHub(), faker.image.avatarGitHub(), faker.image.avatarGitHub()];
-
-const handleChooseAvatar = (avatar) => {
-    console.log(`Chosen avatar: ${avatar}`);
-};
-
-export const DefaultAvatarSelector = () => {
-    return (
-        <div style={{width:"500px", height: "300px"}}>
-            <IntlProvider locale="en">
-                <AvatarSelector
-                    onChooseAvatar={handleChooseAvatar}
-                    avatarUrlList={avatarUrlList}
-                    userName={"User Name"}
-                />
-            </IntlProvider>
-        </div>
-    );
-};
-
-export const AllowUserImageAvatarSelector = () => {
-    return (
-        <div style={{width:"500px", height: "300px"}}>
-            <IntlProvider locale="en">
-                <AvatarSelector
-                    onChooseAvatar={handleChooseAvatar}
-                    avatarUrlList={avatarUrlList}
-                    userName={"User Name"}
-                    allowUserImage
-                />
-            </IntlProvider>
-        </div>
-    );
-};

package/src/components/user/avatar_selector/AvatarSelector.test.jsx

@@ -1,98 +0,0 @@
-import React from "react";
-import { render, screen, act, waitFor } from "@testing-library/react";
-import { DefaultAvatarSelector } from "./AvatarSelector.stories";
-import { AllowUserImageAvatarSelector } from "./AvatarSelector.stories";
-import { AvatarSelector } from "./AvatarSelector";
-import { faker } from '@faker-js/faker';
-import { IntlProvider } from "react-intl";
-import userEvent from '@testing-library/user-event';
-
-const avatarUrlList = [faker.image.avatarGitHub(), faker.image.avatarGitHub(), faker.image.avatarGitHub(), faker.image.avatarGitHub()];
-const file = new File(['hello'], 'hello.png', {type: 'image/png'})
-
-describe("AvatarSelector", () => {
-
-    it("should render with all images", () => {
-        render(<DefaultAvatarSelector />);
-        const images = screen.getAllByTestId("avatar");
-        expect(images.length).toBe(17);
-    });
-
-    it("should trigger callback with user validation", async () => {
-        const onChooseCallback = vi.fn();
-
-        render(
-            <IntlProvider locale="en">
-                <AvatarSelector 
-                    onChooseAvatar={onChooseCallback}
-                    avatarUrlList={avatarUrlList}
-                    userName={"User Name"}
-                />
-            </IntlProvider>
-        );
-
-        const images = screen.getAllByTestId("avatar");
-        const chosenAvatar = images[0];
-
-        await userEvent.click(chosenAvatar);
-
-        const button = screen.getByRole("button");
-        await userEvent.click(button);
-        expect(onChooseCallback).toHaveBeenCalledTimes(1);
-    });
-
-    it("should render with upload input and avatar list", () => {
-        render(<AllowUserImageAvatarSelector />);
-
-        const images = screen.getAllByTestId("avatar");
-        expect(images.length).toBe(17);
-        expect(screen.getByText("Import image of your choice")).toBeInTheDocument();
-        expect(screen.getByText("Or choose from one of our avatars")).toBeInTheDocument();
-        expect(screen.getByText("Upload an image")).toBeInTheDocument();
-    });
-
-    it("should render cancel button", async () => {
-        render(<AllowUserImageAvatarSelector />);
-        
-        const images = screen.getAllByTestId("avatar");
-        const chosenAvatar = images[0];
-
-        await userEvent.click(chosenAvatar);
-        expect(screen.getByText("Cancel selection")).toBeInTheDocument();
-    });
-
-    it("should handle image upload", async () => {
-        const onChooseCallback = vi.fn();
-        render(
-            <IntlProvider locale="en">
-                <AvatarSelector 
-                    onChooseAvatar={onChooseCallback}
-                    avatarUrlList={avatarUrlList}
-                    userName={"User Name"}
-                    allowUserImage
-                />
-            </IntlProvider>
-        );
-        
-        const fileInput = screen.getByTestId("avatar-input");
-        act(() => {
-            userEvent.upload(fileInput, file);
-        });
-
-        await waitFor(() => screen.getByTestId("upload-avatar"));
-
-        const uploadedAvatarPreview = screen.getByTestId("upload-avatar");
-        expect(uploadedAvatarPreview).toBeInTheDocument();
-
-        const confirmButton = screen.getByRole("button");
-        expect(confirmButton).toBeEnabled();
-
-        await userEvent.click(confirmButton);
-
-        await waitFor(() => {
-            expect(onChooseCallback).toHaveBeenCalledTimes(1);
-        });
-
-        expect(onChooseCallback).toHaveBeenCalledWith(file);
-    });
-});

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

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

package/src/components/user/update_user_info_modal/UpdateUserInfoModal.docs.mdx

@@ -1,22 +0,0 @@
----
-description: A modal to select name and language for user profile.
-labels: ["modal", "onboarding"]
----
-
-A modal component that allows users to select his first name, last name and language.
-
-It must be inside [IconProvider](https://bit.cloud/logora/debate/icons/icon_provider).
-
-### Component usage
-
-```jsx
-import UpdateUserInfoModal from '@logora/debate.user.update_user_info_modal';
-
-<ModalProvider>
-    <IntlProvider locale="en">
-        <AuthProvider>
-            <UpdateUserInfoModal />
-        </AuthProvider>
-    </IntlProvider>
-</ModalProvider>
-```

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

@@ -1,254 +0,0 @@
-import React, { useState } from 'react';
-import { useResponsive } from '@logora/debate/hooks/use_responsive';
-import { Modal, useModal } from '@logora/debate/dialog/modal';
-import { useDataProvider } from '@logora/debate/data/data_provider';
-import { useIntl, FormattedMessage } from "react-intl";
-import { useAuth } from '@logora/debate/auth/use_auth';
-import { useConfig } from '@logora/debate/data/config_provider';
-import { useFormValidation } from '@logora/debate/forms/use_form_validation';
-import { Icon } from '@logora/debate/icons/icon';
-import { AvatarSelector } from '@logora/debate/user/avatar_selector';
-import { Button } from '@logora/debate/action/button';
-import { TextInput } from '@logora/debate/input/text_input';
-import { Select } from '@logora/debate/input/select';
-import { Loader } from '@logora/debate/progress/loader';
-import { Toggle } from "@logora/debate/input/toggle";
-import styles from './UpdateUserInfoModal.module.scss';
-import PropTypes from "prop-types";
-
-export const UpdateUserInfoModal = ({ termsUrl, privacyUrl, showEmailConsent = false, showTerms = false }) => {
-    const auth = useAuth();
-    const api = useDataProvider();
-    const intl = useIntl();
-    const config = useConfig();
-
-    const avatarUrlList = [...Array(config.avatars?.maxFileName || 0).keys()].map(j => `${config.avatars?.baseUrl}/${j+1}.${config.avatars?.fileExtension}`);
-
-    const [firstName, setFirstName] = useState(auth.currentUser.first_name || '');
-    const [description, setDescription] = useState(auth.currentUser.description || '');
-    const [lastName, setLastName] = useState(auth.currentUser.last_name || '');
-    const [lang, setLang] = useState(auth.currentUser.language);
-    const [showAvatars, setShowAvatars] = useState(false);
-    const [previewPictureBase64, setPreviewPictureBase64] = useState(auth.currentUser.image_url);
-    const [previewPicture, setPreviewPicture] = useState(null);
-    const [avatarUpload, setAvatarUpload] = useState(false);
-    const [isUpdating, setIsUpdating] = useState(false);
-    const { isMobile } = useResponsive();
-    const { errors, validate } = useFormValidation();
-    const { hideModal } = useModal();
-    const [acceptsTerms, setAcceptsTerms] = useState(false);
-    const [acceptsProviderEmail, setAcceptsProviderEmail] = useState(false);
-
-    const displayPreview = (uri) => {
-		const reader = new FileReader();
-		reader.onloadend = () => { setPreviewPictureBase64(reader.result) }
-		reader.readAsDataURL(uri);
-	}
-
-    const validationRules = [
-        { first_name: ["required", null] }, 
-        { first_name: ["minChar", 2] }, 
-        { last_name: ["required", null] }, 
-        { last_name: ["minChar", 2] }, 
-        { language: ["required", null] },
-        ...( showTerms ? [{ accepts_terms: ["enforceValue", true] }] : [])
-    ]
-
-    const submit = (event) => {
-        event.preventDefault();
-        const data = {};
-        if (firstName) { data['first_name'] =  firstName; }
-        if (lastName) { data['last_name'] =  lastName; }
-        if (lang) { data['language'] =  lang; }
-        if (previewPicture && avatarUpload) { data['image'] = previewPicture; }
-        if (previewPicture && !avatarUpload) { data['origin_image_url'] = previewPicture; }
-        if (description) { data['description'] = description; }
-        if (showEmailConsent) { data["accepts_provider_email"] = acceptsProviderEmail; }
-        if (showTerms) { data["accepts_terms"] = acceptsTerms; }
-        data["is_onboarded"] = true;
-
-        if (validate(data, validationRules)) {
-            setIsUpdating(true);
-            const formData = new FormData();
-            Object.entries(data).forEach(([key, value]) => {
-                formData.append(key, value);
-            })
-
-            api.update("users", auth.currentUser.slug, formData).then(response => {
-                if(response.data.success) {
-                    auth.setCurrentUser(response.data.data.resource);
-                    hideModal();
-                } else {
-                    hideModal();
-                }
-            });
-        }
-    }
-
-    const handleChooseAvatar = (avatar) => {
-        const urlRegex = /^(https?|ftp):\/\/[^\s/$.?#].[^\s]*$/i;
-        setPreviewPicture(avatar);
-        setShowAvatars(false);
-        if (urlRegex.test(avatar)) {
-            setPreviewPictureBase64(avatar);
-            setAvatarUpload(false);
-        } else {
-            setAvatarUpload(true);
-            displayPreview(avatar);
-        }
-    };
-
-    return (
-        <Modal data-vid={"update_user_info_modal"} title={intl.formatMessage({ id: "modal.update_user_info_modal.modal_title", defaultMessage: "Update your profile" })} style={{ width: isMobile ? "unset" : "max-content", minWidth: isMobile ? "unset" : "500px", maxWidth: "800px" }} showCloseButton={false} disableClickOutside={true}>
-            { isUpdating ? 
-                <Loader />
-            :
-                !showAvatars ?
-                    <>
-                        <div className={styles.container}>
-                            <div className={styles.userImageContainer}>
-                                { previewPictureBase64 ?
-                                    <img className={styles.userPictureUpload} src={previewPictureBase64} alt={intl.formatMessage({ id:"alt.my_profile_picture", defaultMessage:"Ma photo de profil" })} />
-                                :
-                                    <div className={styles.userPictureUpload}>
-                                            <Icon name="camera" height={20} width={20} alt={intl.formatMessage({ id:"user.user_edit.profile_picture", defaultMessage:"Profile picture" })}/>
-                                    </div>
-                                }
-                                <Button data-testid="avatar-button" data-tid={"action_save_profile"} onClick={() => setShowAvatars(true)} style={{ whiteSpace: "nowrap" }}>
-                                    { intl.formatMessage({ id:"user.user_edit.avatar", defaultMessage: "Select an avatar"}) }
-                                </Button>
-                            </div>
-                            <div className={styles.inputsContainer}>
-                                <div className={styles.nameContainer}>
-                                    <div className={styles.updateProfileInput}>
-                                        <TextInput   
-                                            type={"text"} 
-                                            name={"first_name"} 
-                                            aria-label={intl.formatMessage({ id: "auth.signup_form.first_name.aria_label", defaultMessage: "First name" })}
-                                            placeholder={intl.formatMessage({ id:"auth_signup_form_first_name_placeholder", defaultMessage: "First name" })} 
-                                            onChange={e => config.actions?.disableOnboardingNameUpdate === true ? null : setFirstName(e.target.value)}
-                                            value={firstName}
-                                            error={errors["first_name"] ? true : false}
-                                            message={errors["first_name"]}
-                                            data-testid="first-name"
-                                            disabled={config.actions?.disableOnboardingNameUpdate === true}
-                                        />
-                                    </div>
-                                    <div className={styles.updateProfileInput}>
-                                        <TextInput 
-                                            type={"text"} 
-                                            name={"last_name"} 
-                                            aria-label={intl.formatMessage({ id: "auth.signup_form.last_name.aria_label", defaultMessage: "Last name" })}
-                                            placeholder={intl.formatMessage({ id:"auth_signup_form_last_name_placeholder", defaultMessage: "Last name" })} 
-                                            onChange={e => config.actions?.disableOnboardingNameUpdate === true ? null : setLastName(e.target.value)}
-                                            value={lastName}
-                                            error={errors["last_name"] ? true : false}
-                                            message={errors["last_name"]}
-                                            data-testid="last-name"
-                                            disabled={config.actions?.disableOnboardingNameUpdate === true}
-                                        />
-                                    </div>
-                                </div>
-                                { config.actions?.disableNameUpdate == true && config.actions?.disableOnboardingNameUpdate != true &&
-                                    <div className={styles.hint}>
-                                        { intl.formatMessage({ id:"user.user_edit.user_name_hint", defaultMessage: "last name" }) } 
-                                    </div>
-                                }
-                                { (config.translation?.translationMethods && Object.keys(config.translation.translationMethods).length > 0) &&
-                                    <Select 
-                                        selectClassName={styles.langSelect}
-                                        options={Object.keys(config.translation.translationMethods).map(l =>  (
-                                            {
-                                                name: l,
-                                                value: l,
-                                                text: `${l.toUpperCase()}`
-                                            }
-                                        ))}
-                                        defaultOption={lang}
-                                        onChange={(option) => setLang(option.value)}
-                                    />
-                                }
-                                <div className={styles.userDescription}>
-                                    <textarea 
-                                        className={styles.textArea} 
-                                        placeholder={intl.formatMessage({ id:"user.user_edit.user_description", defaultMessage: "Describe yourself in a few words" })} 
-                                        value={description} 
-                                        onChange={(e) => setDescription(e.target.value)} 
-                                        maxLength={500}
-                                        data-testid="description"
-                                    />
-                                </div>
-                            </div>
-                        </div>
-                        { showTerms &&
-                            <div className={styles.toggle}>
-                                <Toggle 
-                                    type={"checkbox"} 
-                                    name={"accepts_terms"} 
-                                    style={{ fontSize: 18 }}
-                                    checked={acceptsTerms} 
-                                    label={ <FormattedMessage
-                                        id='modal.update_user_info_modal.accepts_terms'
-                                        defaultMessage="I declare I have read the <var1>General Conditions of Use</var1> and the <var2>Privacy policy</var2> of the debate space and accept them."
-                                        values={{
-                                            var1: (chunks) => (
-                                                <a className={styles.cgu} target='_blank' href={termsUrl}>
-                                                    {chunks}
-                                                </a>
-                                            ),
-                                            var2: (chunks) => (
-                                                <a className={styles.cgu} target='_blank' href={privacyUrl}>
-                                                    {chunks}
-                                                </a>
-                                            ),
-                                        }}/>}
-                                    onInputChanged={(e) => setAcceptsTerms(!acceptsTerms)}
-                                    message={errors["accepts_terms"]}
-                                    data-testid={"accepts-terms-input"}
-                                />
-                            </div>
-                        }
-                        { showEmailConsent &&
-                            <div className={styles.toggle}>
-                                <Toggle 
-                                    type={"checkbox"} 
-                                    name={"accepts_provider_email"} 
-                                    style={{ fontSize: 18 }}
-                                    checked={acceptsProviderEmail} 
-                                    label={ intl.formatMessage({ id: "modal.update_user_info_modal.consent_label", defaultMessage: "I agree to receive emails from the editor" }, { provider: config.provider?.companyName }) }
-                                    onInputChanged={(e) => setAcceptsProviderEmail(!acceptsProviderEmail)} 
-                                    data-testid={"accepts-email-input"}
-                                />
-                            </div>
-                        }
-                        <div className={styles.userSaveBox}>
-                            <Button data-testid="save-button" data-tid={"action_save_profile"} onClick={(e) => submit(e)}>
-                                { intl.formatMessage({ id:"user.user_edit.save", defaultMessage: "Save"}) }
-                            </Button>
-                        </div>
-                    </>
-                : 
-                    <>
-                        <AvatarSelector 
-                            onChooseAvatar={handleChooseAvatar}
-                            avatarUrlList={avatarUrlList}
-                            userName={auth.currentUser.full_name}
-                            allowUserImage={config.avatars?.allowUserImage}
-                        />
-                        <div className={styles.backButton} onClick={() => setShowAvatars(false)}>{ intl.formatMessage({ id:"user.user_edit.back", defaultMessage: "Back"}) }</div>
-                    </>
-            }
-        </Modal>
-    );
-}
-
-UpdateUserInfoModal.propTypes = {
-    /** URL to the terms page */
-	termsUrl: PropTypes.string,
-    /** URL to the privacy page */
-	privacyUrl: PropTypes.string,
-    /** If `true`, will show a toggle for email consent */
-	showEmailConsent: PropTypes.bool,
-	/** If `true`, will show a toggle to accept terms */
-	showTerms: PropTypes.bool,
-}