@logora/debate 0.1.0

package/src/components/forms/form/form.stories.jsx

@@ -0,0 +1,119 @@
+export default {
+  title: 'Forms/Form',
+  component: Form,
+  args: {
+    useNativeOnSubmit: false
+  },
+  argTypes: {
+    useNativeOnSubmit: {
+      control: 'boolean'
+    }
+  },
+  render: ({ useNativeOnSubmit }) =>
+    useNativeOnSubmit ? <FormWithNativeOnSubmit /> : <FormExample />
+};
+
+import React, { useEffect, useState, useCallback } from 'react';
+import { Form } from './form';
+import { useForm } from './use-form';
+import { extractFormData } from './extract-form-data';
+
+export function FormExample() {
+  function submit(e, data) {
+    
+    alert(JSON.stringify(data));
+  }
+  function onChange(e, data) {
+    console.log(data);
+  }
+
+  return (
+    <Form data-testid='form' onSubmit={submit} onChange={onChange}>
+      <EmailInput placeholder='email input' name='email-input' required />
+      <NonFormElement />
+      <Button />
+    </Form>
+  );
+}
+
+export function FormWithNativeOnSubmit() {
+  function submit(e) {
+    const extractedData = extractFormData(e)
+    alert(JSON.stringify(extractedData));
+  }
+
+  return (
+    <Form data-testid='form' onSubmit={submit}>
+      <EmailInput placeholder='email input' name='email-input' required />
+      <Button />
+    </Form>
+  );
+}
+
+function Button() {
+  const { errors = {} } = useForm();
+  const isDisabled = Object.keys(errors).length > 0;
+  return (
+    <button disabled={isDisabled} type='submit'>
+      Submit
+    </button>
+  );
+}
+
+function NonFormElement() {
+  const {onChange} = useForm();
+  return <div onClick={() => onChange && onChange({name: "non-form-element", value: 'this value was added by clicking a regular div'})}>dsds</div>
+}
+
+const emailRegEx = /\S+@\S+\.\S+/;
+
+function EmailInput(props) {
+  const [message, setMessage] = useState(undefined);
+  const { onChange, onValidate, values, errors } = useForm();
+  
+  const value = values?.['email-input'];
+
+  useEffect(() => {
+    if (!value || value === '') return;
+    if (!emailRegEx.test(value)) {
+      return setMessage('Email should have only valid chars');
+    }
+    setMessage(undefined);
+  }, [value]);
+
+  useEffect(() => {
+    onValidate && onValidate('email-input', message);
+  }, [message, onValidate]);
+
+  const handleBlur = useCallback(
+    ({ value }) => {
+      if (!value || value === '') {
+        setMessage('Required');
+      }
+    },
+    [value]
+  );
+  return (
+    <>
+      <input
+        {...props}
+        onChange={(e) => {
+          onChange && onChange({ name: e.target.name, value: e.target.value });
+        }}
+        onBlur={(e) => {
+          handleBlur({ value: e.target.value });
+        }}
+      />
+      <div>{errors && errors['email-input']}</div>
+    </>
+  );
+}
+
+export const DefaultForm = {};
+
+export const FormNativeOnSubmit = {
+  args: {
+    useNativeOnSubmit: true
+  }
+};
+

package/src/components/forms/form/form.test.jsx

@@ -0,0 +1,3 @@
+it.skip('should render with the correct text', () => {
+  expect(true).toBeTruthy();
+});

package/src/components/forms/form/index.js

@@ -0,0 +1,6 @@
+export { Form } from './form';
+export { useFormContext } from './use-form-context';
+export { useForm } from './use-form';
+
+export { FormContext } from './form-context';
+export { extractFormData } from './extract-form-data';

package/src/components/forms/form/use-form-context.js

@@ -0,0 +1,43 @@
+import { useCallback, useState } from 'react';
+
+export function useFormContext() {
+  const [errors, setErrors] = useState({});
+  const [values, setValues] = useState({});
+
+  const handleValidate = useCallback(
+    (name, message) =>
+      setErrors((prevErrors) => {
+        const nextMessage = { ...prevErrors, [name]: message };
+        if (message === undefined) delete nextMessage[name];
+        return nextMessage;
+      }),
+    []
+  );
+
+  const handleBlur = useCallback(
+    (event) =>
+      setErrors((prevErrors) => {
+        const target = event.target || event;
+        if (!target.required || !!prevErrors[target.name]) return prevErrors;
+
+        const nextMessage = { ...prevErrors, [target.name]: null };
+        return nextMessage;
+      }),
+    []
+  );
+
+  const handleChange = (event) =>
+    setValues((prevValues) => {
+      const target = event.target || event;
+      const nextValues = { ...prevValues, [target.name]: target.value };
+      return nextValues;
+    });
+
+  return {
+    errors: errors,
+    onBlur: handleBlur,
+    onValidate: handleValidate,
+    onChange: handleChange,
+    values: values,
+  };
+}

package/src/components/forms/form/use-form.js

@@ -0,0 +1,4 @@
+import { useContext } from 'react';
+import { FormContext } from './form-context';
+
+export const useForm = () => useContext(FormContext);

package/src/components/forms/use_form_validation/index.js

@@ -0,0 +1 @@
+export { useFormValidation } from './useFormValidation';

package/src/components/forms/use_form_validation/useFormValidation.docs.mdx

@@ -0,0 +1,40 @@
+---
+description: A hook to validate form inputs.
+labels: ['form-validation']
+---
+
+A hook to validate form inputs. It uses a validate function to verify the datas which take the form values and a validator array which determines what to check on every input.
+If any input is not validated, the hook provides an errors object to use into the form.
+
+validate() function has to parameters : 
+    formData: all the submitted values of the form
+    validationRules: an array of rules to validate. Each rules represent an object with the input field as the key and an array of the validation method in first index and a optionnal validation checker as the second index.
+
+
+### Component usage
+```js
+import { useFormValidation } from '@logora/debate.hooks.use_form_validation';
+```
+```js
+const Component = () => {
+    const { errors, validate } = useFormValidation();
+
+    const submitForm = () => {
+        const data = {
+            content: "My content",
+            title: "My title"
+        };
+        if (validate(data, [{ content: ["required", null] }, { title: ["length", 5] }])) {
+            submitData();
+        } else {
+            return errors;
+        }
+    }
+
+	return (
+        <button onClick={() => submitData()}>
+            Submit
+        </button>
+    )
+}
+```

package/src/components/forms/use_form_validation/useFormValidation.jsx

@@ -0,0 +1,114 @@
+import { useState } from 'react';
+import { useIntl } from "react-intl";
+
+export const useFormValidation = () => {
+    const [errors, setErrors] = useState({});
+    const intl = useIntl();
+
+    const required = (formData, value) => {
+        return !formData[value];
+    }
+
+    const checkValue = (value, targetValue) => {
+        return value !== targetValue;
+    }
+
+    const checkMinLength = (value, minLength) => {
+        return value.split(" ").length < minLength;
+    }
+
+    const checkMaxLength = (value, maxLength) => {
+        return value.split(" ").length > maxLength;
+    }
+
+    const checkMinChar = (value, minChar) => {
+        value = value || "";
+        return value.trim().split("").length < minChar;
+    }
+
+    const checkMaxChar = (value, maxChar) => {
+        return value.split("").length > maxChar;
+    }
+
+    const isQuestion = (value) => {
+        return value.trim()[value.trim().length - 1] !== "?"
+    }
+
+    const urlInText = (value) => {
+        let urlRegex = /(((https?:\/\/)|(www\.))[^\s]+)/g;
+        return urlRegex.test(value);
+    }
+
+    const validate = (formData, validationRules) => {
+        let errors = {};
+        validationRules.forEach(rule => {
+            let validationField = Object.keys(rule)[0];
+            let validationMethod = Object.values(rule)[0][0];
+            let validationChecker = Object.values(rule)[0][1];
+
+            if (validationMethod === "required") {
+                if (required(formData, validationField)) {
+                    errors[validationField] = intl.formatMessage({ id: `errors.${validationField}_required`, defaultMessage: `${validationField} can't be empty.` })
+                }
+            }
+            if (validationMethod === "enforceValue") {
+                if (checkValue(formData[validationField], validationChecker)) {
+                    errors[validationField] = intl.formatMessage({ 
+                        id: "errors.enforce_value", 
+                        defaultMessage: `${validationField} must be ${validationChecker}.` },
+                        { validation_field: validationField, validation_value: validationChecker })
+                }
+            }
+            if (validationMethod === "length") {
+                if (checkMinLength(formData[validationField], validationChecker)) {
+                    errors[validationField] = intl.formatMessage({ 
+                        id: `errors.${validationField}_length`, 
+                        defaultMessage: `${validationField} is too short. It must be at least ${validationChecker} long.` },
+                        { variable: validationChecker })
+                }
+            }
+            if (validationMethod === "maxLength") {
+                if (checkMaxLength(formData[validationField], validationChecker)) {
+                    errors[validationField] = intl.formatMessage({ 
+                        id: `errors.${validationField}_max_length`, 
+                        defaultMessage: `${validationField} is too long.` })
+                }
+            }
+            if (validationMethod === "question") {
+                if (isQuestion(formData[validationField])) {
+                    errors[validationField] = intl.formatMessage({ id: `errors.${validationField}_question`, defaultMessage: `${validationField} must have a question mark at the end.` })
+                }
+            }
+            if (validationMethod === "url") {
+                if (urlInText(formData[validationField])) {
+                    errors[validationField] = intl.formatMessage({ id: `errors.${validationField}_url`, defaultMessage: `${validationField} must not contain any links` })
+                }
+            }
+            if (validationMethod === "maxChar") {
+                if (checkMaxChar(formData[validationField], validationChecker)) {
+                    errors[validationField] = intl.formatMessage({ 
+                        id: `errors.${validationField}_max_char`, 
+                        defaultMessage: `${validationField} has too many characters.` })
+                }
+            }
+            if (validationMethod === "minChar") {
+                if (checkMinChar(formData[validationField], validationChecker)) {
+                    errors[validationField] = intl.formatMessage({
+                        id: `errors.${validationField}_min_char`, 
+                        defaultMessage: `${validationField} is too short.` })
+                }
+            }
+        })
+        if (Object.keys(errors).length > 0) {
+            setErrors(errors);
+            return false; 
+        } 
+        setErrors({});
+        return true;
+    }
+
+    return {
+        errors,
+        validate
+    }
+}

package/src/components/forms/use_form_validation/useFormValidation.test.jsx

@@ -0,0 +1,91 @@
+import React from 'react';
+import { renderHook, act } from '@testing-library/react';
+import { useFormValidation } from './useFormValidation';
+
+vi.mock('react-intl', () => ({ useIntl: () => ({formatMessage: vi.fn(),}) }));
+
+describe('useFormValidation', () => {
+    afterEach(() => {
+        vi.clearAllMocks();
+    });
+
+    it('Should validate correct form values and return empty errors object', () => {
+        const formData = { title: "My title", content: "My content"}
+        const { result } = renderHook(() =>
+            useFormValidation()
+        );
+
+        act(() => {
+            result.current.validate(formData, [{ title: ["required", null] }, { content: ["length", 1] }]);
+        });
+        expect(Object.keys(result.current.errors).length).toBe(0);
+    });
+
+    it('Should not validate incorrect form values and return errors object with errors', () => {
+        const formData = { title: "", content: "My content"}
+        const { result } = renderHook(() =>
+            useFormValidation()
+        );
+
+        act(() => {
+            result.current.validate(formData, [{ title: ["required", null] }, { content: ["length", 3] }]);
+        });
+        
+        expect(Object.keys(result.current.errors).length).toBe(2);
+        expect(result.current.errors.hasOwnProperty("title")).toBe(true);
+        expect(result.current.errors.hasOwnProperty("content")).toBe(true);
+    });
+
+    it('Should not validate if required func does not pass', () => {
+        const formData = { title: "", content: "My cool content"}
+        const { result } = renderHook(() =>
+            useFormValidation()
+        );
+
+        act(() => {
+            result.current.validate(formData, [{ title: ["required", null] }, { content: ["length", 3] }]);
+        });
+        expect(Object.keys(result.current.errors).length).toBe(1);
+        expect(result.current.errors.hasOwnProperty("title")).toBe(true);
+    });
+
+    it('Should not validate if length func does not pass', () => {
+        const formData = { title: "", content: "My content"}
+        const { result } = renderHook(() =>
+            useFormValidation()
+        );
+
+        act(() => {
+            result.current.validate(formData, [{ title: ["length", 5] }, { content: ["length", 3] }]);
+        });
+        expect(Object.keys(result.current.errors).length).toBe(2);
+        expect(result.current.errors.hasOwnProperty("title")).toBe(true);
+        expect(result.current.errors.hasOwnProperty("content")).toBe(true);
+    });
+
+    it('Should not validate if maxLength func does not pass', () => {
+        const formData = { title: "My title", content: "My super long content"}
+        const { result } = renderHook(() =>
+            useFormValidation()
+        );
+
+        act(() => {
+            result.current.validate(formData, [{ title: ["length", 2] }, { content: ["maxLength", 3] }]);
+        });
+        expect(Object.keys(result.current.errors).length).toBe(1);
+        expect(result.current.errors.hasOwnProperty("content")).toBe(true);
+    });
+
+    it('Should not validate if question func does not pass', () => {
+        const formData = { title: "My title", content: "My super long content"}
+        const { result } = renderHook(() =>
+            useFormValidation()
+        );
+
+        act(() => {
+            result.current.validate(formData, [{ title: ["length", 2] }, { content: ["question", null] }]);
+        });
+        expect(Object.keys(result.current.errors).length).toBe(1);
+        expect(result.current.errors.hasOwnProperty("content")).toBe(true);
+    });
+});

package/src/components/gamification/badge_box/BadgeBox.docs.mdx

@@ -0,0 +1,25 @@
+---
+description: A box component that displays the title, user progress, description and image of a badge
+labels: ["gamification", "badge"]
+---
+
+A box component that displays the title, user progress, description and image of a badge.
+
+### Component usage
+
+```jsx
+import { BadgeBox } from '@logora/debate.gamification.badge_box';
+```
+
+```jsx
+<BadgeBox 
+    eloquenceTitle={"Influencer"}
+    icon_url={"image_url"}
+    level={2}
+    name={"name"}
+    next_title_level={3}
+    steps={10}
+    title={"title"}
+    progress={3}
+/>
+```

package/src/components/gamification/badge_box/BadgeBox.jsx

@@ -0,0 +1,74 @@
+import React from 'react';
+import { ProgressBar } from "@logora/debate/progress/progress_bar";
+import styles from './BadgeBox.module.scss';
+import cx from 'classnames';
+import PropTypes from "prop-types";
+import { useIntl, FormattedMessage } from "react-intl";
+
+export const BadgeBox = ({ icon_url, level, name, next_title_level, steps, title, progress, eloquenceTitle }) => {
+    const intl = useIntl();
+
+    return (
+        <div className={styles.badgeBox}>
+            <div className={cx(styles.badgeLevel, styles[`level-${level}`])}>
+                <FormattedMessage id="gamification.badge_box.level" values={{ count: level  }} defaultMessage="Level {count}" />
+            </div>
+            <div className={styles.badgeImageBox}>
+                <img className={styles.badgeImage} src={icon_url} loading={"lazy"} width={80} height={80} title={title} alt={`Badge ${title}`} />
+            </div>
+            <div className={styles.badgeName}>
+                { intl.formatMessage({ id: `gamification.badge_box.${name}.title`, defaultMessage: "Contributor" }) }
+            </div>
+            <div className={styles.badgeDescription}>
+                <FormattedMessage id={`gamification.badge_box.${name}.description`} values={{ count: steps }} defaultMessage="Write {count} arguments with a relevance score of at least 75" />
+            </div>
+            <div className={styles.badgeProgressContainer}>
+                {progress >= steps ?
+                    <span>{ intl.formatMessage({ id: "gamification.badge_box.completed", defaultMessage: "Completed !" }) }</span>
+                :
+                    <span>{progress + "/" + steps}</span>
+                }
+                <ProgressBar 
+                    progress={progress} 
+                    goal={steps} 
+                    className={styles.badgeProgress} 
+                    innerClassName={cx(styles.badgeProgressBar, styles[`level-${level}`])} 
+                />
+            </div>
+            { next_title_level !== null &&
+                <div className={cx(styles.badgeReward, {[styles.rewardObtained]: progress >= steps, [styles.rewardShown]: eloquenceTitle === name})} data-testid="badge-reward">
+                    <span>
+                        {eloquenceTitle === name ? 
+                            intl.formatMessage({ id: "gamification.badge_box.title_shown", defaultMessage: "Title shown :" }) 
+                        : 
+                            progress >= steps ? 
+                                intl.formatMessage({ id: "gamification.badge_box.title_obtained", defaultMessage: "Title obtained :" }) 
+                            : 
+                                <FormattedMessage id="gamification.badge_box.title" values={{ variable: next_title_level  }} defaultMessage="At level {variable} you will get the title :" /> 
+                        }
+                    </span>
+                    <span className={styles.rewardName}>&quot;{ intl.formatMessage({ id: `gamification.badge_box.${name}.reward`, defaultMessage: "Dialogue pro" })}&quot;</span>
+                </div>
+            }
+        </div>
+    );
+}
+
+BadgeBox.propTypes = {
+    /** The url of the image to display */
+    icon_url: PropTypes.string,
+    /** Level of the badge */
+    level: PropTypes.number,
+    /** The name of the badge */
+    name: PropTypes.string,
+    /** The next badge level */
+    next_title_level: PropTypes.number,
+    /** The badge steps */
+    steps: PropTypes.number.isRequired,
+    /** The badge title */
+    title: PropTypes.string,
+    /** The badge progression */
+    progress: PropTypes.number.isRequired,
+    /** User title */
+    eloquenceTitle: PropTypes.string,
+};

package/src/components/gamification/badge_box/BadgeBox.module.scss

@@ -0,0 +1,103 @@
+@use 'styles/theme' as theme;
+@use 'styles/spacing' as spacing;
+@use 'styles/flex' as flex;
+@use 'styles/display' as display;
+
+.badgeBox {
+    display: flex !important;
+    flex-direction: column !important;
+    align-items: center !important;
+    justify-content: flex-start !important;
+    @include spacing.p(3, xs);
+    box-shadow: theme.$box-shadow;
+    border-radius: theme.$box-border-radius;
+    border: theme.$box-border;
+    text-align: center;
+    width: 250px;
+    max-width: 250px;
+    position: relative;
+    background-color: theme.$background-color-primary;
+}
+
+.level-1 {
+    background-color: #C98448;
+}
+
+.level-2 {
+    background-color: #AFAFAF;
+}
+
+.level-3 {
+    background-color: #FCBD11;
+}
+
+.badgeLevel {
+    @include spacing.px(2, xs);
+    @include spacing.py(1.5, xs);
+    position: absolute;
+    top: 0;
+    left: 0;
+    font-size: theme.$font-size-small;
+    color: theme.$text-light;
+    border-radius: theme.$box-border-radius 0 theme.$box-border-radius 0;
+}
+
+.badgeImageBox {
+    @include spacing.mb(2, xs);
+}
+
+.badgeImage {
+    width: 80px;
+    height: 80px;
+    border-radius: 50%;
+}
+
+.badgeName {
+    @include spacing.py(2, xs);
+    font-weight: theme.$font-weight-bold;
+}
+
+.badgeDescription {
+    font-size: theme.$font-size-small;
+    min-height: 40px;
+}
+
+.badgeProgressContainer {
+    @include spacing.mt(2, xs);
+    width: 100%;
+    font-size: theme.$font-size-small;
+    color: theme.$text-secondary;
+    font-weight: theme.$font-weight-bold;
+}
+
+.badgeProgress {
+    height: 7px;
+    width: 100%;
+    border-radius: 8px;
+    background-color: theme.$background-color-secondary !important;
+}
+
+.badgeReward {
+    display: flex !important;
+    flex-direction: column !important;
+    @include spacing.mt(3, xs);
+    @include spacing.p(1, xs);
+    border-radius: theme.$box-border-radius;
+    width: 100%;
+    font-size: theme.$font-size-small;
+    color: theme.$text-secondary;
+    .rewardName {
+        font-weight: theme.$font-weight-bold;
+    }
+    &.rewardObtained {
+        background: theme.$success-primary;
+        color: theme.$text-light;
+        cursor: pointer;
+    }
+    &.rewardShown {
+        background: theme.$background-color-primary !important;
+        color: theme.$success-primary !important;
+        cursor: pointer;
+        border: 1px solid theme.$success-primary;
+    }
+}