jamespot-react-components 1.0.0

package/src/components/Form/Input/JRCFormTextEditor/JRCFormTextEditor.tsx

@@ -0,0 +1,36 @@
+import * as React from 'react';
+import { Field, WrappedFieldInputProps } from 'redux-form';
+import JRCFormFieldRender, { JRCWritableFormInputProps } from '../JRCFormFieldRender';
+import { useControls } from '../ReduxFormControls';
+import ReactQuill from 'react-quill';
+import 'react-quill/dist/quill.snow.css';
+import { useIntl } from 'react-intl';
+
+const renderInput = (input: WrappedFieldInputProps) => {
+    return <ReactQuill theme="snow" value={input.value} onChange={input.onChange} />;
+};
+
+/**
+ * @deprecated The component @link JRCFormRichTextField must be used to replace JRCFormTextEditorField
+ * Component used as a rich text editor
+ * @param props JRCWritableFormInputProps
+ * validation props: minValue, maxValue, required
+ * @returns JSX.Element
+ */
+export const JRCFormTextEditorField = (props: JRCWritableFormInputProps) => {
+    const validate = useControls({
+        intl: useIntl(),
+        minLength: props.minLength,
+        maxLength: props.maxLength,
+        required: props.required,
+    });
+    return (
+        <Field
+            component={JRCFormFieldRender}
+            renderInputFct={(input: WrappedFieldInputProps) => renderInput(input)}
+            validate={validate}
+            htmlFor={props.name}
+            {...props}
+        />
+    );
+};

package/src/components/Form/Input/JRCFormTextarea/JRCFormTextarea.stories.tsx

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import { withReduxForm } from '../../../../storybook/decorators';
+import { JRCFormTextareaField, TextareaFormInputProps } from './JRCFormTextarea';
+import { Meta, Story } from '@storybook/react';
+
+export default {
+    title: 'Inputs/old',
+    component: JRCFormTextareaField,
+    decorators: [withReduxForm],
+} as Meta;
+
+const Template: Story<TextareaFormInputProps> = (args) => <JRCFormTextareaField {...args} />;
+export const Textarea = Template.bind({});
+Textarea.args = {
+    name: 'name-storybook',
+    label: 'Description du groupe',
+    description:
+        'La description du groupe doit permettre à un utilisateur de déterminer les informations qui y sont partagées',
+    placeholder:
+        "Le groupe RSE est un groupe relatif à l'échange d'information sur la responsabilité sociétale de notre entreprise",
+    helper: {
+        description: 'Vous pouvez indiquer les sujets, la fréquence des communications, etc.',
+        title: 'Indication',
+    },
+    minLength: 3,
+    maxLength: 100,
+    selected: false,
+};

package/src/components/Form/Input/JRCFormTextarea/JRCFormTextarea.tsx

@@ -0,0 +1,71 @@
+import * as React from 'react';
+import { Field, WrappedFieldInputProps } from 'redux-form';
+import JRCFormFieldRender, { ExternalFormFieldRenderProps, InputState } from '../JRCFormFieldRender';
+import { useControls } from '../ReduxFormControls';
+import { cssStyledInput, MaxLengthIndicator } from '../JRCStyledInput';
+import styled from 'styled-components';
+import { useIntl } from 'react-intl';
+
+/**
+ * Props used for all inputs
+ *
+ * @extends Omit<React.ComponentPropsWithoutRef<'input'>, "type"> @see React.ComponentPropsWithoutRef
+ * @extends ExternalFormFieldRenderProps @see ExternalFormFieldRenderProps
+ *
+ * @name redux form name
+ */
+export interface TextareaFormInputProps
+    extends Omit<React.ComponentPropsWithoutRef<'textarea'>, 'type'>,
+        ExternalFormFieldRenderProps {
+    name: string;
+}
+
+export const JRCFormTextarea = styled.textarea`
+    ${cssStyledInput}
+    &&&& {
+        padding-top: 10px;
+        height: 140px;
+    }
+`;
+
+const renderInput = (props: TextareaFormInputProps, input: WrappedFieldInputProps, inputState: InputState) => {
+    const inputRef = React.useRef<HTMLTextAreaElement>(null);
+    React.useEffect(() => {
+        if (props.selected) {
+            inputRef && inputRef.current && inputRef.current.select();
+        }
+    }, [inputRef]);
+    return (
+        <>
+            <MaxLengthIndicator maxLength={props.maxLength} actualLength={input.value.length} />
+            <JRCFormTextarea ref={inputRef} id={props.name} {...props} {...input} {...inputState} />
+        </>
+    );
+};
+
+/**
+ * Component used as a textarea
+ * @param props TextareaFormInputProps
+ * validation props: minLength, maxLength, required
+ * @returns JSX.Element
+ */
+export const JRCFormTextareaField = (props: TextareaFormInputProps) => {
+    const validate = useControls({
+        intl: useIntl(),
+        minLength: props.minLength,
+        maxLength: props.maxLength,
+        required: props.required,
+    });
+
+    return (
+        <Field
+            component={JRCFormFieldRender}
+            renderInputFct={(input: WrappedFieldInputProps, inputState: InputState) =>
+                renderInput(props, input, inputState)
+            }
+            validate={validate}
+            htmlFor={props.name}
+            {...props}
+        />
+    );
+};

package/src/components/Form/Input/JRCFormURL/JRCFormUrl.stories.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { withReduxForm } from '../../../../storybook/decorators';
+import { JRCWritableFormInputProps } from '../JRCFormFieldRender';
+import { JRCFormUrlField } from './JRCFormUrl';
+import { Meta, Story } from '@storybook/react';
+
+export default {
+    title: 'Inputs/old',
+    component: JRCFormUrlField,
+    decorators: [withReduxForm],
+} as Meta;
+
+const Template: Story<JRCWritableFormInputProps> = (args) => <JRCFormUrlField {...args} />;
+
+export const InputUrl = Template.bind({});
+InputUrl.args = {
+    name: 'name-storybook',
+    label: 'URL du widget externe',
+    description: "L'url sera utilisé pour ouvrir une nouvelle page lorsque l'utilisateur cliquera sur le widget",
+    placeholder: 'https://monsite.com/mapage',
+    helper: {
+        description: 'Nous vous conseillons de rediriger vos utilisateurs vers une page https',
+        title: 'Indication',
+    },
+    required: false,
+};

package/src/components/Form/Input/JRCFormURL/JRCFormUrl.tsx

@@ -0,0 +1,35 @@
+import * as React from 'react';
+import { Field, WrappedFieldInputProps } from 'redux-form';
+import JRCFormFieldRender, { InputState, JRCWritableFormInputProps } from '../JRCFormFieldRender';
+import { useControls } from '../ReduxFormControls';
+import { StyledInput } from '../JRCStyledInput';
+import { useIntl } from 'react-intl';
+
+const renderInput = (props: JRCWritableFormInputProps, input: WrappedFieldInputProps, inputState: InputState) => {
+    return <StyledInput id={props.name} type="url" {...props} {...input} {...inputState} />;
+};
+
+/**
+ * Component used as a <input type="url"/> with a url validation
+ * @param props JRCWritableFormInputProps
+ * validation props: required
+ * @returns JSX.Element
+ */
+export const JRCFormUrlField = (props: JRCWritableFormInputProps) => {
+    const validate = useControls({
+        intl: useIntl(),
+        url: true,
+        required: props.required,
+    });
+    return (
+        <Field
+            component={JRCFormFieldRender}
+            renderInputFct={(input: WrappedFieldInputProps, inputState: InputState) =>
+                renderInput(props, input, inputState)
+            }
+            validate={validate}
+            htmlFor={props.name}
+            {...props}
+        />
+    );
+};

package/src/components/Form/Input/JRCInputCheckbox/JRCInputCheckbox.stories.tsx

@@ -0,0 +1,84 @@
+import * as React from 'react';
+import { useForm } from 'react-hook-form';
+import { JRCInputCheckbox } from './JRCInputCheckbox';
+import { JRCInputCheckboxProps } from './JRCInputCheckbox.types';
+import { SubmitHandler } from 'react-hook-form/dist/types/form';
+import { Meta, Story } from '@storybook/react';
+
+export default {
+    title: 'Inputs/new',
+    component: JRCInputCheckbox,
+} as Meta;
+
+const Template: Story<JRCInputCheckboxProps<any>> = (args) => {
+    const { handleSubmit, control } = useForm({
+        defaultValues: {
+            [args.name]: [],
+        },
+        criteriaMode: 'all',
+    });
+
+    const onSubmit: SubmitHandler<{ checkbox: Array<string> }> = (data) => {
+        alert(JSON.stringify(data, null, 2));
+    };
+
+    return (
+        // FIXME TYPESCRIPT-STRICT
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        <form onSubmit={handleSubmit(onSubmit)}>
+            <JRCInputCheckbox {...args} control={control as any} />
+            <input type="submit" />
+        </form>
+    );
+};
+
+export const InputCheckbox = Template.bind({});
+InputCheckbox.args = {
+    label: 'Quel fruit ou légume preférez-vous ?',
+    name: 'checkbox',
+    description: 'Nous pourrons faire la salade composée du pique-nique en fonction ;)',
+    helper: { description: 'Vous pouvez sélectionner plusieurs choix', title: 'Indication' },
+    rules: {
+        required: true,
+    },
+    options: [
+        { label: 'Pomme', value: 'apple' },
+        { label: 'Poire', value: 'pear' },
+        { label: 'Ananas', value: 'pineapple', disabled: true },
+        { label: 'Carotte', value: 'carrot' },
+        { label: 'Tomate', value: { vegetable: 'tomato' } },
+    ],
+    direction: 'column',
+    labelPosition: 'before',
+    checkboxMode: 'checkbox',
+    variant: 'outlined',
+    backgroundOnHover: true,
+    valueTypeIsBoolean: false,
+    SortByChecked: false,
+};
+
+export const InputRadio = Template.bind({});
+InputRadio.args = {
+    label: 'Quel fruit ou légume preférez-vous ?',
+    name: 'radio',
+    description: 'Nous pourrons faire la salade composée du pique-nique en fonction ;)',
+    helper: { description: 'Vous pouvez sélectionner plusieurs choix', title: 'Indication' },
+    rules: {
+        required: true,
+    },
+    options: [
+        { label: 'Pomme', value: 'apple' },
+        { label: 'Poire', value: 'pear' },
+        { label: 'Ananas', value: 'pineapple', disabled: true },
+        { label: 'Carotte', value: 'carrot' },
+        { label: 'Tomate', value: { vegetable: 'tomato' } },
+    ],
+    direction: 'column',
+    labelPosition: 'before',
+    checkboxMode: 'radio',
+    variant: 'outlined',
+    backgroundOnHover: true,
+    valueTypeIsBoolean: false,
+    SortByChecked: false,
+};

package/src/components/Form/Input/JRCInputCheckbox/JRCInputCheckbox.tsx

@@ -0,0 +1,193 @@
+import { JRCFormFieldRenderer } from '../Common/JRCFormFieldRenderer';
+import * as React from 'react';
+import {
+    CheckboxLabel,
+    CheckboxOrToggle,
+    DirectionContainer,
+    FocusBackground,
+} from '../JRCFormCheckbox/JRCFormCheckbox.style';
+import { ControllerRenderProps } from 'react-hook-form/dist/types/controller';
+import { JRCRadio } from '../JRCFormCheckbox/JRCRadio';
+import { deepEqual } from '../../../../utils/utils.object';
+import { DataCy } from '../../../../types/dataAttributes';
+import { JRCInputFieldProps } from '../Common/JRCFormFieldRenderer.types';
+import { CheckboxValue } from './JRCInputCheckbox.types';
+
+type Value<T> = string | number | T;
+
+type CheckboxOption<TFieldValues> = {
+    label: string | JSX.Element;
+    value: Value<TFieldValues>;
+    disabled?: boolean;
+};
+
+export type CheckboxProps<TFieldValues> = DataCy & {
+    disabled?: boolean;
+    checkboxMode?: 'checkbox' | 'toggle' | 'radio';
+    options: CheckboxOption<TFieldValues>[];
+    direction?: 'row' | 'column' | 'two-columns';
+    variant?: 'default' | 'outlined';
+    labelPosition?: 'before' | 'after';
+    SortByChecked?: boolean;
+    backgroundOnHover?: boolean;
+    backgroundOnSelect?: boolean;
+    valueTypeIsBoolean?: boolean;
+};
+
+export type JRCInputCheckboxProps<TFieldValues> = CheckboxProps<TFieldValues> & JRCInputFieldProps<TFieldValues>;
+
+function RenderInput<TFieldValues>({
+    variant = 'default',
+    ...props
+}: CheckboxProps<TFieldValues> &
+    Omit<ControllerRenderProps<TFieldValues>, 'value'> & { value: TFieldValues | TFieldValues[] }) {
+    const field = {
+        onChange: props.onChange,
+        onBlur: props.onBlur,
+        value: props.value,
+        name: props.name,
+        ref: props.ref,
+    };
+
+    const [valueTypeIsBoolean, setValueTypeIsBoolean] = React.useState(
+        props.options.length === 1 && props.valueTypeIsBoolean,
+    );
+
+    React.useEffect(() => {
+        setValueTypeIsBoolean(props.options.length === 1 && props.valueTypeIsBoolean);
+    }, [props.options.length, props.valueTypeIsBoolean]);
+
+    const isChecked = (
+        field: Omit<ControllerRenderProps<TFieldValues>, 'value'> & { value: TFieldValues | TFieldValues[] },
+        option: CheckboxOption<TFieldValues>,
+    ): boolean =>
+        field &&
+        (valueTypeIsBoolean
+            ? !!field.value
+            : props.checkboxMode === 'radio'
+            ? deepEqual(field.value, option.value)
+            : (field?.value as CheckboxValue<TFieldValues>[])?.some((v) => deepEqual(v, option.value)));
+
+    const sortByCheck = () => props.options.sort((a, b) => (isChecked(field, b) && isChecked(field, a) ? 1 : -1));
+    const [options, setOptions] = React.useState(props.SortByChecked ? sortByCheck() : props.options);
+
+    React.useEffect(() => {
+        if (props.SortByChecked) setOptions(sortByCheck());
+    }, [field && field.value]);
+
+    return (
+        // FIXME TYPESCRIPT-STRICT
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        <DirectionContainer direction={props.direction} variant={props.variant}>
+            {options.map((option, index) => {
+                const checked = isChecked(field, option);
+                return (
+                    // FIXME TYPESCRIPT-STRICT
+                    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                    // @ts-ignore
+                    <CheckboxLabel
+                        key={index}
+                        direction={props.direction}
+                        labelPosition={props.labelPosition}
+                        variant={variant}
+                        disabled={props.disabled || option.disabled}
+                        checked={checked}
+                        backgroundOnHover={props.backgroundOnHover}
+                        backgroundOnSelect={props.backgroundOnSelect}>
+                        {props.checkboxMode === 'radio' ? (
+                            <JRCRadio
+                                name={props.name}
+                                data-cy={props.dataCy && `${props.dataCy}-option-${index}`}
+                                disabled={props.disabled || option.disabled}
+                                checked={checked}
+                                onChange={() => field.onChange(option.value || undefined)}
+                            />
+                        ) : (
+                            <CheckboxOrToggle
+                                // FIXME TYPESCRIPT-STRICT
+                                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                                // @ts-ignore
+                                checkboxMode={props.checkboxMode}
+                                name={props.name}
+                                data-cy={props.dataCy && `${props.dataCy}-option-${index}`}
+                                disabled={props.disabled || option.disabled}
+                                checked={checked}
+                                onChange={(event) => {
+                                    if (valueTypeIsBoolean) {
+                                        return field.onChange(event.target.checked || undefined);
+                                    } else {
+                                        let newValue = [...((field?.value as TFieldValues[]) || [])] as
+                                            | Array<string | number | TFieldValues>
+                                            | undefined;
+                                        if (event.target.checked) {
+                                            // FIXME TYPESCRIPT-STRICT
+                                            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                                            // @ts-ignore
+                                            newValue.push(option.value);
+                                        } else {
+                                            // FIXME TYPESCRIPT-STRICT
+                                            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                                            // @ts-ignore
+                                            newValue.splice(newValue.indexOf(option.value), 1);
+                                            // FIXME TYPESCRIPT-STRICT
+                                            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                                            // @ts-ignore
+                                            if (!newValue.length) newValue = undefined;
+                                        }
+                                        return field.onChange(newValue);
+                                    }
+                                }}
+                            />
+                        )}
+                        <FocusBackground variant={variant} />
+                        {option.label}
+                    </CheckboxLabel>
+                );
+            })}
+        </DirectionContainer>
+    );
+}
+
+export function JRCInputCheckbox<TFieldValues>({
+    name,
+    control,
+    rules,
+    label,
+    htmlFor,
+    labelIsLegend,
+    description,
+    helper,
+    ...props
+}: JRCInputCheckboxProps<TFieldValues>) {
+    return (
+        <JRCFormFieldRenderer
+            name={name}
+            control={control}
+            rules={rules}
+            label={label}
+            htmlFor={htmlFor}
+            labelIsLegend={labelIsLegend || true}
+            description={description}
+            helper={helper}
+            renderFunction={({ value, ...field }) => (
+                <RenderInput
+                    {...props}
+                    {...field}
+                    value={value as CheckboxValue<TFieldValues> | Array<CheckboxValue<TFieldValues>>}
+                />
+            )}
+        />
+    );
+}
+
+JRCInputCheckbox.defaultProps = {
+    direction: 'column',
+    labelPosition: 'before',
+    checkboxMode: 'checkbox',
+    label: '',
+    backgroundOnHover: false,
+    backgroundOnSelect: false,
+    SortByChecked: false,
+    valueTypeIsBoolean: false,
+};

package/src/components/Form/Input/JRCInputCheckbox/JRCInputCheckbox.types.ts

@@ -0,0 +1,27 @@
+import { JRCInputFieldProps } from '../Common/JRCFormFieldRenderer.types';
+import { ControllerRenderProps } from 'react-hook-form/dist/types/controller';
+
+export type CheckboxValue<T> = string | number | T;
+
+export type CheckboxOption<TFieldValues> = {
+    label: string | JSX.Element;
+    value: CheckboxValue<TFieldValues>;
+    disabled?: boolean;
+};
+
+export type InnerProps<TFieldValues> = {
+    disabled?: boolean;
+    checkboxMode?: 'checkbox' | 'toggle' | 'radio';
+    options: CheckboxOption<TFieldValues>[];
+    direction?: 'row' | 'column' | 'two-columns';
+    variant?: 'default' | 'outlined';
+    labelPosition?: 'before' | 'after';
+    SortByChecked?: boolean;
+    backgroundOnHover?: boolean;
+    backgroundOnSelect?: boolean;
+    valueTypeIsBoolean?: boolean;
+};
+
+export type JRCInputCheckboxProps<TFieldValues> = InnerProps<TFieldValues> & JRCInputFieldProps<TFieldValues>;
+export type InputCheckboxProps<TFieldValues> = InnerProps<TFieldValues> &
+    Omit<ControllerRenderProps<TFieldValues>, 'value'> & { value: TFieldValues | TFieldValues[] };

package/src/components/Form/Input/JRCInputText/JRCInputText.stories.tsx

@@ -0,0 +1,52 @@
+import * as React from 'react';
+import { JRCInputText } from './JRCInputText';
+import { useForm } from 'react-hook-form';
+import { JRCInputFieldProps } from '../Common/JRCFormFieldRenderer.types';
+import { SubmitHandler } from 'react-hook-form/dist/types/form';
+import { Meta, Story } from '@storybook/react';
+
+export default {
+    title: 'Inputs/new',
+    component: JRCInputText,
+} as Meta;
+
+const Template: Story<JRCInputFieldProps<'text'>> = (args) => {
+    const { handleSubmit, control, reset } = useForm({
+        defaultValues: {
+            text: '',
+        },
+        criteriaMode: 'all',
+    });
+
+    const onSubmit: SubmitHandler<{ text: string }> = (data) => {
+        alert(JSON.stringify(data, null, 2));
+    };
+
+    return (
+        <form onSubmit={handleSubmit(onSubmit)}>
+            <JRCInputText {...args} name="text" control={control} />
+            <input type="submit" />
+            <input type="reset" />
+            <button type="button" onClick={() => reset()}>
+                Custom Reset
+            </button>
+        </form>
+    );
+};
+
+export const InputText = Template.bind({});
+InputText.args = {
+    label: 'Nom de groupe',
+    description: "Le nom du groupe doit permettre en un clin d'oeil de connaitre le sujet du groupe",
+    placeholder: 'Présentations',
+    helper: { description: 'Ne faites pas commencer votre groupe par "Groupe de"', title: 'Indication' },
+    rules: {
+        maxLength: {
+            value: 25,
+            message:
+                'This is an example error. For instance, the text should not be written with more than 25 characters. This message is not the default one.',
+        },
+        minLength: 3,
+        required: true,
+    },
+};

package/src/components/Form/Input/JRCInputText/JRCInputText.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { StyledInput } from '../JRCStyledInput';
+import { JRCInputFieldProps } from '../Common/JRCFormFieldRenderer.types';
+import { JRCFormFieldRenderer } from '../Common/JRCFormFieldRenderer';
+import { DataCy } from '../../../../types/dataAttributes';
+
+export type InputTextProps = DataCy & React.ComponentPropsWithoutRef<'input'>;
+
+const RenderInput = React.forwardRef((props: InputTextProps, ref: React.ForwardedRef<HTMLInputElement>) => {
+    return <StyledInput type="text" id={props.name} {...props} ref={ref} />;
+});
+
+/**
+ * Component used as a <input type="text"/>
+ * @param props JRCInputFieldProps
+ * validation props: required
+ * @returns JSX.Element
+ */
+export function JRCInputText<T>(props: JRCInputFieldProps<T>) {
+    return (
+        <JRCFormFieldRenderer
+            {...props}
+            renderFunction={({ value, ...field }) => <RenderInput {...props} {...field} value={value as string} />}
+        />
+    );
+}

package/src/components/Form/Input/JRCSelect/JRCAutocomplete.stories.tsx

@@ -0,0 +1,62 @@
+import { Meta, Story } from '@storybook/react';
+import { useForm } from 'react-hook-form';
+import { SubmitHandler } from 'react-hook-form/dist/types/form';
+import * as React from 'react';
+import { JRCInputAutocomplete } from './JRCInputAutocomplete';
+import { JRCAutocompleteProps } from './JRCInputSelect.types';
+
+export default {
+    title: 'Inputs/new',
+    component: JRCInputAutocomplete,
+} as Meta;
+
+const Template: Story<JRCAutocompleteProps<{ select: Array<{ uri?: string; title: string }> }>> = (args) => {
+    const { handleSubmit, control, reset } = useForm({
+        defaultValues: {
+            select: [{ title: 'elephant' }],
+        },
+        criteriaMode: 'all',
+    });
+
+    const onSubmit: SubmitHandler<{ select: Array<{ uri?: string; title: string }> }> = (data) => {
+        alert(JSON.stringify(data, null, 2));
+    };
+
+    return (
+        <form onSubmit={handleSubmit(onSubmit)}>
+            <p>-.-</p>
+            <JRCInputAutocomplete {...args} name="select" control={control} />
+            <p>-.-</p>
+            <input type="submit" />
+            <input type="reset" />
+            <button type="button" onClick={() => reset()}>
+                Custom Reset
+            </button>
+        </form>
+    );
+};
+
+export const Autocomplete = Template.bind({});
+Autocomplete.args = {
+    label: 'label',
+    htmlFor: 'htmlFor',
+    placeholder: 'placeholder',
+    labelIsLegend: false,
+    description: 'description',
+
+    asyncPromise: (input: any) =>
+        Promise.resolve(
+            [
+                { uri: 'user/1234', title: 'elephant', type: 'user' },
+                { uri: 'user/1234', title: 'girage', type: 'user' },
+                { uri: 'user/1234', title: 'mouse', type: 'spot' },
+            ].filter((option) => new RegExp(input).test(option.title)),
+        ),
+
+    multiple: true,
+
+    searchable: true,
+
+    group: true,
+    getGroup: 'type',
+};