@logora/debate 0.1.0 → 0.1.1

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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