richie-education 2.24.0 → 2.25.0-b2.dev101

package/js/components/AddressesManagement/AddressForm.tsx

@@ -1,169 +0,0 @@
-import { yupResolver } from '@hookform/resolvers/yup';
-import { Fragment, useEffect } from 'react';
-import { useForm } from 'react-hook-form';
-import { FormattedMessage, useIntl } from 'react-intl';
-import { messages } from 'components/AddressesManagement/index';
-import { CheckboxField, TextField } from 'components/Form';
-import { CountrySelectField } from 'components/Form/CountrySelectField';
-import { useAddresses } from 'hooks/useAddresses';
-import type { Address } from 'types/Joanie';
-import validationSchema, { getLocalizedErrorMessage } from './validationSchema';
-
-export type AddressFormValues = Omit<Address, 'id' | 'is_main'> & { save: boolean | undefined };
-
-interface Props {
-  address?: Address;
-  onSubmit: (values: AddressFormValues) => Promise<void>;
-  handleReset: () => void;
-}
-
-const AddressForm = ({ handleReset, onSubmit, address }: Props) => {
-  const defaultValues = {
-    title: '',
-    first_name: '',
-    last_name: '',
-    address: '',
-    postcode: '',
-    city: '',
-    country: '-',
-    save: false,
-  } as AddressFormValues;
-
-  const { register, handleSubmit, reset, formState } = useForm<AddressFormValues>({
-    defaultValues,
-    mode: 'onChange',
-    reValidateMode: 'onChange',
-    resolver: yupResolver(validationSchema),
-  });
-
-  const addresses = useAddresses();
-  const intl = useIntl();
-
-  /**
-   * Prevent form to be submitted and clear `editedAddress` state.
-   */
-  const handleCancel = (event: React.MouseEvent<HTMLButtonElement>) => {
-    event.preventDefault();
-    handleReset();
-    return false;
-  };
-
-  useEffect(() => {
-    reset(address || defaultValues);
-  }, [address]);
-
-  return (
-    <form className="form" name="address-form" onSubmit={handleSubmit(onSubmit)}>
-      <p className="form__required-fields-note">
-        <FormattedMessage {...messages.requiredFields} values={{ symbol: <span>*</span> }} />
-      </p>
-      <TextField
-        aria-invalid={!!formState.errors.title}
-        required
-        id="title"
-        label={intl.formatMessage(messages.titleInputLabel)}
-        error={!!formState.errors.title}
-        message={getLocalizedErrorMessage(intl, formState.errors.title?.message)}
-        {...register('title')}
-      />
-      <div className="form-group">
-        <TextField
-          aria-invalid={!!formState.errors.first_name}
-          required
-          id="first_name"
-          label={intl.formatMessage(messages.first_nameInputLabel)}
-          error={!!formState.errors.first_name}
-          message={getLocalizedErrorMessage(intl, formState.errors.first_name?.message)}
-          {...register('first_name')}
-        />
-        <TextField
-          aria-invalid={!!formState.errors.last_name}
-          required
-          id="last_name"
-          label={intl.formatMessage(messages.last_nameInputLabel)}
-          error={!!formState.errors.last_name}
-          message={getLocalizedErrorMessage(intl, formState.errors.last_name?.message)}
-          {...register('last_name')}
-        />
-      </div>
-      <TextField
-        aria-invalid={!!formState.errors.address}
-        required
-        id="address"
-        label={intl.formatMessage(messages.addressInputLabel)}
-        error={!!formState.errors.address}
-        message={getLocalizedErrorMessage(intl, formState.errors.address?.message)}
-        {...register('address')}
-      />
-      <div className="form-group">
-        <TextField
-          aria-invalid={!!formState.errors.postcode}
-          required
-          id="postcode"
-          label={intl.formatMessage(messages.postcodeInputLabel)}
-          error={!!formState.errors.postcode}
-          message={getLocalizedErrorMessage(intl, formState.errors.postcode?.message)}
-          {...register('postcode')}
-        />
-        <TextField
-          aria-invalid={!!formState.errors.city}
-          required
-          id="city"
-          label={intl.formatMessage(messages.cityInputLabel)}
-          error={!!formState.errors.city}
-          message={getLocalizedErrorMessage(intl, formState.errors.city?.message)}
-          {...register('city')}
-        />
-      </div>
-      <CountrySelectField
-        aria-invalid={!!formState.errors.country}
-        required
-        id="country"
-        label={intl.formatMessage(messages.countryInputLabel)}
-        error={!!formState.errors.country}
-        message={getLocalizedErrorMessage(intl, formState.errors.country?.message)}
-        {...register('country', { value: address?.country, required: true })}
-      />
-      {!address ? (
-        <CheckboxField
-          aria-invalid={!!formState.errors?.save}
-          id="save"
-          label={intl.formatMessage(messages.saveInputLabel)}
-          error={!!formState.errors?.save}
-          message={getLocalizedErrorMessage(intl, formState.errors.save?.message)}
-          {...register('save')}
-        />
-      ) : null}
-      <footer className="form__footer">
-        {address ? (
-          <Fragment>
-            <button
-              className="button button-sale--tertiary"
-              onClick={handleCancel}
-              title={intl.formatMessage(messages.cancelTitleButton)}
-            >
-              <FormattedMessage {...messages.cancelButton} />
-            </button>
-            <button
-              className="button button-sale--primary"
-              disabled={addresses.states.updating}
-              type="submit"
-            >
-              <FormattedMessage {...messages.updateButton} />
-            </button>
-          </Fragment>
-        ) : (
-          <button
-            className="button button-sale--primary"
-            disabled={addresses.states.creating || addresses.states.updating}
-            type="submit"
-          >
-            <FormattedMessage {...messages.selectButton} />
-          </button>
-        )}
-      </footer>
-    </form>
-  );
-};
-
-export default AddressForm;

package/js/components/Button/index.spec.tsx

@@ -1,36 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import { Button } from '.';
-
-describe('<Button />', () => {
-  it('renders a button', () => {
-    render(<Button color="primary">Click me</Button>);
-
-    const button = screen.getByRole('button', { name: 'Click me' });
-    expect(button).toBeInstanceOf(HTMLButtonElement);
-    expect(button).toBeEnabled();
-  });
-
-  it('renders a link', () => {
-    render(
-      <Button color="primary" href="https://www.fun-mooc.fr/">
-        Click me
-      </Button>,
-    );
-
-    const button = screen.getByRole('link', { name: 'Click me' });
-    expect(button).toBeInstanceOf(HTMLAnchorElement);
-    expect(button).toBeEnabled();
-  });
-
-  it('renders a disabled button', () => {
-    render(
-      <Button color="primary" disabled={true}>
-        Click me
-      </Button>,
-    );
-
-    const button = screen.getByRole('button', { name: 'Click me' });
-    expect(button).toBeInstanceOf(HTMLButtonElement);
-    expect(button).toBeDisabled();
-  });
-});

package/js/components/Button/index.stories.tsx

@@ -1,26 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { Button } from './index';
-
-export default {
-  component: Button,
-  args: {
-    children: 'Click me',
-    color: 'primary',
-  },
-} as Meta<typeof Button>;
-
-type Story = StoryObj<typeof Button>;
-
-export const Default: Story = {};
-
-export const Disabled: Story = {
-  args: {
-    disabled: true,
-  },
-};
-
-export const Link: Story = {
-  args: {
-    href: 'https://www.fun-mooc.fr/',
-  },
-};

package/js/components/Button/index.tsx

@@ -1,38 +0,0 @@
-import { AnchorHTMLAttributes, ButtonHTMLAttributes, forwardRef } from 'react';
-
-type ButtonAnchorAttributes = ButtonHTMLAttributes<HTMLButtonElement> &
-  AnchorHTMLAttributes<HTMLAnchorElement>;
-
-export interface ButtonProps extends ButtonAnchorAttributes {
-  color?: 'primary' | 'secondary' | 'outline-primary' | 'outline-secondary' | 'transparent-darkest';
-  size?: 'nano' | 'tiny' | 'small' | 'large';
-}
-
-export const Button = forwardRef<HTMLButtonElement & HTMLAnchorElement, ButtonProps>(
-  ({ disabled = false, className = '', ...props }, ref) => {
-    const classes = ['button'];
-    if (props.color) {
-      classes.push('button--' + props.color);
-    }
-    if (props.size) {
-      classes.push('button--' + props.size);
-    }
-    const elementProps = {
-      className: [classes.join(' '), className].join(' '),
-      disabled,
-    };
-
-    if (props.href && !disabled) {
-      return (
-        <a {...elementProps} {...props} ref={ref}>
-          {props.children}
-        </a>
-      );
-    }
-    return (
-      <button {...elementProps} {...props} ref={ref}>
-        {props.children}
-      </button>
-    );
-  },
-);

package/js/components/Form/CheckboxField.stories.tsx

@@ -1,12 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { defaultConfig } from './Field.stories.config';
-import { CheckboxField } from './index';
-
-export default {
-  component: CheckboxField,
-  ...defaultConfig,
-} as Meta<typeof CheckboxField>;
-
-type Story = StoryObj<typeof CheckboxField>;
-
-export const Default: Story = {};

package/js/components/Form/Field.stories.config.tsx

@@ -1,24 +0,0 @@
-import { Meta } from '@storybook/react';
-
-export const defaultConfig: Partial<Meta> = {
-  args: {
-    label: 'Any label here',
-    message: 'Any message here',
-    fieldClasses: [],
-    id: 'id',
-  },
-  argTypes: {
-    disabled: {
-      control: 'boolean',
-    },
-    error: {
-      control: 'boolean',
-    },
-    message: {
-      control: 'text',
-    },
-    required: {
-      control: 'boolean',
-    },
-  },
-};

package/js/components/Form/Inputs.tsx

@@ -1,295 +0,0 @@
-import { forwardRef, type ReactNode, useMemo } from 'react';
-
-/**
- * A collection of form input elements
- * - TextField
- * - TextareaField
- * - SelectField
- * - CheckboxField
- * - RadioField
- */
-
-interface FieldProps {
-  inputId?: string;
-  error?: Boolean;
-  message?: ReactNode | string;
-  fieldClasses?: string[];
-  required?: boolean;
-}
-
-// - Field
-const Field = ({
-  fieldClasses = [],
-  inputId,
-  error,
-  message,
-  required = false,
-  children,
-}: React.PropsWithChildren<FieldProps>) => {
-  const classList = useMemo(() => {
-    const classes = ['form-field', ...fieldClasses];
-    if (error) {
-      classes.push('form-field--error');
-    }
-    if (required) {
-      classes.push('form-field--required');
-    }
-    return classes.join(' ');
-  }, [fieldClasses, required, error]);
-
-  const iconHref = error ? '#icon-warning' : '#icon-info-rounded';
-
-  return (
-    <p className={classList}>
-      <span className="form-field__box">{children}</span>
-      {message && (
-        <span className="form-field__message" {...(!!inputId && { id: `${inputId}-message` })}>
-          <svg aria-hidden={true} className="form-field__message__icon">
-            <use href={iconHref} />
-          </svg>
-          {message}
-        </span>
-      )}
-    </p>
-  );
-};
-
-// - TextField
-interface TextFieldProps extends React.InputHTMLAttributes<HTMLInputElement>, FieldProps {
-  id: string;
-  label?: string;
-  type?:
-    | 'date'
-    | 'datetime-local'
-    | 'email'
-    | 'month'
-    | 'number'
-    | 'password'
-    | 'search'
-    | 'tel'
-    | 'text'
-    | 'url'
-    | 'week';
-}
-
-/**
- * A form input component.
- *
- * It forwards ref to the input element to retrieve easily its value from
- * parent component through useRef.
- *
- * @param {TextFieldProps} TextFieldProps
- * @return {HTMLInputElement} HTMLInputElement
- */
-
-export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
-  ({ fieldClasses = [], label, id, type = 'text', error, message, required, ...props }, ref) => (
-    <Field
-      inputId={id}
-      error={error}
-      message={message}
-      fieldClasses={fieldClasses}
-      required={required}
-    >
-      <input
-        className="form-field__input"
-        id={id}
-        placeholder={label}
-        ref={ref}
-        type={type}
-        required={required}
-        {...props}
-        {...(!!message && {
-          'aria-describedby': `${id}-message`,
-        })}
-      />
-      {label && (
-        <label className="form-field__label" htmlFor={id}>
-          {label}
-        </label>
-      )}
-    </Field>
-  ),
-);
-
-// - TextareaField
-interface TextareaFieldProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement>, FieldProps {
-  id: string;
-  label?: string;
-}
-
-/**
- * A form textarea component.
- *
- * It forwards ref to the textarea element to retrieve easily its value
- * from parent component through useRef.
- *
- * @param {TextareaFieldProps} TextareaFieldProps
- * @return {HTMLTextAreaElement} HTMLTextAreaElement
- */
-export const TextareaField = forwardRef<HTMLTextAreaElement, TextareaFieldProps>(
-  ({ fieldClasses = [], error, message, label, id, required, ...props }, ref) => (
-    <Field
-      inputId={id}
-      error={error}
-      message={message}
-      required={required}
-      fieldClasses={fieldClasses}
-    >
-      <textarea
-        className="form-field__textarea"
-        id={id}
-        placeholder={label}
-        ref={ref}
-        required={required}
-        {...props}
-        {...(!!message && {
-          'aria-describedby': `${id}-message`,
-        })}
-      />
-      {label && (
-        <label className="form-field__label" htmlFor={id}>
-          {label}
-        </label>
-      )}
-    </Field>
-  ),
-);
-
-// - SelectField
-export interface SelectFieldProps
-  extends React.SelectHTMLAttributes<HTMLSelectElement>,
-    FieldProps {
-  defaultValue?: string;
-  id: string;
-  label?: string;
-}
-
-/**
- * A form select component
- *
- * It forwards ref to the select element to retrieve easily its value
- * from parent component through useRef.
- *
- * @param {SelectFieldProps} SelectFieldProps
- * @return {HTMLSelectElement} HTMLSelectElement
- */
-export const SelectField = forwardRef<HTMLSelectElement, SelectFieldProps>(
-  ({ fieldClasses = [], error, message, label, id, required, children, ...props }, ref) => (
-    <Field
-      inputId={id}
-      error={error}
-      message={message}
-      required={required}
-      fieldClasses={fieldClasses}
-    >
-      {label && (
-        <label className="form-field__label" htmlFor={id}>
-          {label}
-        </label>
-      )}
-      <span className="form-field__select-container">
-        <select
-          className="form-field__select-input"
-          id={id}
-          ref={ref}
-          required={required}
-          {...props}
-          {...(!!message && {
-            'aria-describedby': `${id}-message`,
-          })}
-        >
-          {children}
-        </select>
-        <span className="form-field__select-arrow" />
-      </span>
-    </Field>
-  ),
-);
-
-// - CheckboxField
-interface CheckboxFieldProps extends Omit<TextFieldProps, 'type'> {
-  id: string;
-  label: string;
-}
-
-/**
- * A checkbox input component
- *
- * It forwards ref to the input element to retrieve easily its value
- * from parent component through useRef.
- *
- * @param {CheckboxFieldProps} CheckboxFieldProps
- * @return {HTMLSelectElement} HTMLSelectElement
- */
-export const CheckboxField = forwardRef<HTMLInputElement, CheckboxFieldProps>(
-  ({ fieldClasses = [], error, message, label, id, required, ...props }, ref) => (
-    <Field
-      inputId={id}
-      error={error}
-      message={message}
-      required={required}
-      fieldClasses={fieldClasses}
-    >
-      <input
-        className="form-field__checkbox-input"
-        id={id}
-        ref={ref}
-        type="checkbox"
-        required={required}
-        {...props}
-        {...(!!message && {
-          'aria-describedby': `${id}-message`,
-        })}
-      />
-      <label className="form-field__label" htmlFor={id}>
-        <span className="form-field__checkbox-control" aria-hidden={true}>
-          <svg role="img">
-            <use href="#icon-check" />
-          </svg>
-        </span>
-        {label}
-      </label>
-    </Field>
-  ),
-);
-
-// - RadioField
-interface RadioFieldProps extends CheckboxFieldProps {}
-
-/**
- * A radio input component
- *
- * It forwards ref to the input element to retrieve easily its value
- * from parent component through useRef.
- *
- * @param {RadioFieldProps} RadioFieldProps
- * @return {HTMLSelectElement} HTMLInputElement
- */
-export const RadioField = forwardRef<HTMLInputElement, RadioFieldProps>(
-  ({ fieldClasses = [], error, label, message, id, required, onClick, ...props }, ref) => (
-    <Field
-      inputId={id}
-      error={error}
-      message={message}
-      required={required}
-      fieldClasses={fieldClasses}
-    >
-      <input
-        className="form-field__radio-input"
-        id={id}
-        ref={ref}
-        type="radio"
-        required={required}
-        {...props}
-        {...(!!message && {
-          'aria-describedby': `${id}-message`,
-        })}
-      />
-      <label className="form-field__label" htmlFor={id}>
-        <span className="form-field__radio-control" aria-hidden={true} />
-        {label}
-      </label>
-    </Field>
-  ),
-);

package/js/components/Form/RadioField.stories.tsx

@@ -1,18 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { defaultConfig } from './Field.stories.config';
-import { RadioField } from './index';
-
-export default {
-  component: RadioField,
-  ...defaultConfig,
-  render: (args) => (
-    <div>
-      <RadioField {...args} value="French" id="French" name="input" />
-      <RadioField {...args} value="German" id="German" name="input" />
-    </div>
-  ),
-} as Meta<typeof RadioField>;
-
-type Story = StoryObj<typeof RadioField>;
-
-export const Default: Story = {};

package/js/components/Form/SelectField.stories.tsx

@@ -1,27 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { defaultConfig } from './Field.stories.config';
-import { SelectField } from './index';
-
-const choices = ['French', 'Spanish', 'German', 'English'];
-
-export default {
-  component: SelectField,
-  ...defaultConfig,
-  render: (args) => (
-    <SelectField {...args}>
-      {choices.map((choice) => (
-        <option value={choice} key={'option-' + choice}>
-          {choice}
-        </option>
-      ))}
-    </SelectField>
-  ),
-} as Meta<typeof SelectField>;
-
-type Story = StoryObj<typeof SelectField>;
-
-export const Default: Story = {
-  args: {
-    defaultValue: 'German',
-  },
-};

package/js/components/Form/TextAreaField.stories.tsx

@@ -1,12 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { defaultConfig } from './Field.stories.config';
-import { TextareaField } from './index';
-
-export default {
-  component: TextareaField,
-  ...defaultConfig,
-} as Meta<typeof TextareaField>;
-
-type Story = StoryObj<typeof TextareaField>;
-
-export const Default: Story = {};

package/js/components/Form/TextField.stories.tsx

@@ -1,12 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { defaultConfig } from './Field.stories.config';
-import { TextField } from './index';
-
-export default {
-  component: TextField,
-  ...defaultConfig,
-} as Meta<typeof TextField>;
-
-type Story = StoryObj<typeof TextField>;
-
-export const Default: Story = {};