jamespot-react-components 1.0.3 → 1.0.65

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

@@ -1,395 +0,0 @@
-import * as React from 'react';
-import { Field, WrappedFieldInputProps } from 'redux-form';
-import JRCFormFieldRender, { ExternalFormFieldRenderProps, InputState } from '../JRCFormFieldRender';
-
-import styled, { ThemeContext } from 'styled-components';
-import { useIntl } from 'react-intl';
-import check from 'assets/check.svg';
-import AsyncSelect from 'react-select/async';
-
-import Select, { components, MenuProps } from 'react-select';
-import { useControls } from '../ReduxFormControls';
-import JRCIcon from 'components/JRCIcon/JRCIcon';
-import { JRCValueLabelProps } from 'components/Form/Common/types';
-import { OptionProps } from 'react-select';
-import { SelectComponentsConfig } from 'react-select/src/components';
-import { JRCStyledHref } from '../../../JRCHref/JRCHref';
-
-const InfoImg = styled.img`
-    width: 12px;
-    height: 12px;
-    margin-right: 10px;
-    cursor: pointer;
-`;
-
-const DropdownIndicator = (props: any) => {
-    if (props.selectProps.inputState.valid) {
-        return <InfoImg src={check} />;
-    } else {
-        return <JRCIcon name="icon-angle-down" color="grey2" />;
-    }
-};
-
-const getBorderColor = (state: any, themeContext: any) => {
-    const { valid, error } = state.selectProps.inputState;
-    if (state.isFocused) {
-        return themeContext.color.navy;
-    } else if (valid) {
-        return themeContext.color.green;
-    } else if (error) {
-        return themeContext.color.orange;
-    } else {
-        return themeContext.color.grey2;
-    }
-};
-
-const getSelectStyle = (themeContext: any, required: boolean, customStyle: any = {}) => ({
-    input: () => ({
-        padding: '9px 0 0 8px',
-        fontSize: '16px',
-    }),
-    control: (defaultStyles: any, state: any) => ({
-        ...defaultStyles,
-        border: `1px solid ${getBorderColor(state, themeContext)}`,
-        color: themeContext.color.grey5,
-        width: `100%`,
-        minHeight: '40px',
-        borderRadius: `8px`,
-        fontStyle: 'normal',
-        boxShadow: 'none',
-        cursor: state.selectProps.isDisabled ? 'not-allowed' : 'pointer',
-        transition: 'border .2s, box-shadow .2s',
-        ':hover': {
-            border: `1px solid ${getBorderColor(state, themeContext)}`,
-            ...(state.selectProps.isDisabled
-                ? null
-                : {
-                      boxShadow: `0 0 2px ${state.isFocused ? themeContext.color.grey4 : themeContext.color.grey2}`,
-                  }),
-        },
-        ...customStyle.control,
-    }),
-
-    indicatorsContainer: (defaultStyles: any, state: any) => ({
-        ...defaultStyles,
-        'i::before': {
-            color: state.isFocused ? themeContext.color.navy + `!important` : themeContext.color.grey3,
-            paddingRight: `8px`,
-        },
-        ...customStyle.indicatorsContainer,
-    }),
-    clearIndicator: (defaultStyles: any) => ({
-        ...defaultStyles,
-        paddingRight: '4px',
-        color: themeContext.color.grey2,
-        ':hover': {
-            color: themeContext.color.overseas,
-        },
-        ...customStyle.clearIndicator,
-    }),
-    placeholder: (defaultStyles: any) => {
-        return {
-            ...defaultStyles,
-            color: `${themeContext.color.grey3}`,
-            marginLeft: '8px',
-            fontSize: '16px',
-            ...customStyle.placeholder,
-        };
-    },
-    singleValue: (defaultStyles: any) => ({
-        ...defaultStyles,
-        marginLeft: '8px',
-        ...customStyle.singleValue,
-    }),
-    menu: (defaultStyles: any) => {
-        return {
-            ...defaultStyles,
-            marginTop: '4px',
-            padding: '0',
-            borderRadius: '8px',
-            ...customStyle.menu,
-        };
-    },
-    menuList: (defaultStyles: any) => {
-        return {
-            ...defaultStyles,
-            ...customStyle.menuList,
-        };
-    },
-    valueContainer: (defaultStyles: any) => {
-        return {
-            ...defaultStyles,
-            ...customStyle.valueContainer,
-        };
-    },
-    option: () => ({}),
-    group: (defaultStyles: any) => {
-        return {
-            ...defaultStyles,
-            padding: '1.5px 0',
-            ...customStyle.group,
-        };
-    },
-    groupHeading: (defaultStyles: any) => {
-        return {
-            ...defaultStyles,
-            height: '32px',
-            lineHeight: '32px',
-            textTransform: 'none',
-            fontSize: '12px',
-            color: `${themeContext.color.grey5}`,
-            backgroundColor: `${themeContext.color.grey1}`,
-            ...customStyle.groupHeading,
-        };
-    },
-});
-
-export const JRCFormSelectInput = (props: any) => {
-    const themeContext = React.useContext(ThemeContext);
-    const selectStyle = getSelectStyle(themeContext, props.required, props.customReactSelectStyle);
-    const intl = useIntl();
-    const { selectedOption, onInputChange, components, placeholder, options, ...otherProps } = props;
-
-    const [loadedOptions, setLoadedOptions] = React.useState(options);
-
-    React.useEffect(() => {
-        if (props.frontFiltering && props.asyncPromise) {
-            props.asyncPromise().then((res: any) => {
-                setLoadedOptions(res);
-            });
-        }
-    }, []);
-
-    return (
-        <Select
-            id={props.name}
-            styles={selectStyle}
-            components={{
-                IndicatorSeparator: () => null,
-                DropdownIndicator,
-                Option,
-                Menu,
-                ...components,
-            }}
-            noOptionsMessage={() => intl.formatMessage({ id: 'GLOBAL_Form_No_Options' })}
-            loadingMessage={() => intl.formatMessage({ id: 'GLOBAL_Loading' })}
-            placeholder={placeholder || intl.formatMessage({ id: 'GLOBAL_Select' })}
-            defaultValue={selectedOption && selectedOption}
-            onInputChange={onInputChange && onInputChange}
-            isClearable={!props.required && !props.isMulti}
-            options={loadedOptions}
-            {...otherProps}
-        />
-    );
-};
-
-export const JRCFormSelectAsyncInput = (props: any) => {
-    const themeContext = React.useContext(ThemeContext);
-    const selectStyle = getSelectStyle(themeContext, props.required, props.customReactSelectStyle);
-    const intl = useIntl();
-    const { selectedOption, onInputChange, components, placeholder, ...otherProps } = props;
-
-    return (
-        <AsyncSelect
-            id={props.name}
-            styles={selectStyle}
-            components={{
-                IndicatorSeparator: () => null,
-                DropdownIndicator,
-                Option,
-                Menu,
-                ...components,
-            }}
-            noOptionsMessage={() => intl.formatMessage({ id: 'GLOBAL_Form_No_Options' })}
-            loadingMessage={() => intl.formatMessage({ id: 'GLOBAL_Loading' })}
-            placeholder={placeholder || intl.formatMessage({ id: 'GLOBAL_Select' })}
-            defaultValue={selectedOption && selectedOption}
-            onInputChange={onInputChange && onInputChange}
-            isClearable={!props.required && !props.isMulti}
-            {...otherProps}
-        />
-    );
-};
-
-export const JRCFormSelectFieldRender = <TValue,>(
-    props: JRCFormSelectProps<TValue> & { input: WrappedFieldInputProps; inputState: InputState },
-) => {
-    const { input, inputState } = props;
-
-    const { selectedOption } = props;
-
-    React.useEffect(() => {
-        // eslint-disable-next-line no-prototype-builtins
-        if (selectedOption && selectedOption.hasOwnProperty('value') && selectedOption.hasOwnProperty('label')) {
-            input.onChange(selectedOption);
-        }
-    }, []);
-    return (
-        <>
-            {props.asyncPromise && !props.frontFiltering ? (
-                <JRCFormSelectAsyncInput
-                    {...input}
-                    {...props}
-                    inputState={inputState}
-                    loadOptions={props.asyncPromise}
-                    cacheOptions
-                    defaultOptions
-                    onBlur={() => input.onBlur(input.value)}
-                    onChange={(value: TValue) => {
-                        input.onChange(value);
-                    }}
-                />
-            ) : (
-                <JRCFormSelectInput
-                    {...input}
-                    {...props}
-                    inputState={inputState}
-                    onBlur={() => input.onBlur(input.value)}
-                    onChange={(value: TValue) => {
-                        input.onChange(value);
-                    }}
-                />
-            )}
-        </>
-    );
-};
-
-const DefaultOptionLabel = styled.div.attrs((props) => ({ ...props, dashedInset: '5px' }))<{
-    isFocused: boolean;
-    isSelected: boolean;
-    marginBottom?: boolean;
-}>`
-    padding: 4px 12px;
-    margin: 2px 4px ${(props) => (props.marginBottom ? '4px' : '2px')};
-    min-height: 32px;
-    display: flex;
-    align-items: center;
-    border-radius: 4px;
-    position: relative;
-
-    color: ${(props) => (props.isSelected ? props.theme.color.navy : 'inherit')};
-    background-color: ${(props) => (props.isFocused ? props.theme.color.grey0 : 'inherit')};
-
-    font-weight: ${(props) => (props.isSelected ? '500' : 'inherit')};
-    letter-spacing: ${(props) => (props.isSelected ? 'inherit' : '.1px')};
-
-    :hover {
-        cursor: pointer;
-        background: ${(props) => props.theme.color.grey0};
-    }
-`;
-
-const Option = (props: OptionProps<{ label: string }, boolean>) => {
-    const { isFocused, isSelected } = props;
-
-    return (
-        <components.Option {...props}>
-            <DefaultOptionLabel isFocused={isFocused} isSelected={isSelected}>
-                {props.children}
-            </DefaultOptionLabel>
-        </components.Option>
-    );
-};
-
-const Menu = (props: MenuProps<{ label: string }, boolean>) => {
-    return (
-        <components.Menu {...props}>
-            <>
-                {props.children}
-                {props.selectProps.extraLink && (
-                    <DefaultOptionLabel isFocused={false} isSelected={false} marginBottom={true}>
-                        <JRCStyledHref href={props.selectProps.extraLink.url} target="_blank">
-                            {props.selectProps.extraLink.label}
-                        </JRCStyledHref>
-                    </DefaultOptionLabel>
-                )}
-            </>
-        </components.Menu>
-    );
-};
-
-/**
- * Props of the JRCFormSelectField element
- *
- * @extends JRCWritableFormInputProps @see JRCWritableFormInputProps
- *
- * @member name redux form name
- * @member required redux form required validation
- * @member asyncPromise if provided, the select will be async.
- *         Async promise with the available filtered data.
- *         If not provided, the options prop should be provided
- * @member frontFiltering if set to true, the data are loaded once and filtered in the front
- * @member options in case of sync select, available data
- * @member getOptionLabel format the option label. If not provided,
- *         the options or the async promise should have a label attribute
- * @member getOptionValue format the option value. If not provided,
- *         the options or the async promise should have a value attribute
- * @member isMulti defines whether the user can select multiple choices
- * @member selectedOption defines an initial value. This property is going to change
- *         since it is partially incompatible with getOptionLabel and getOptionValue
- * @member onInputChange when input select is changing
- * @member isSearchable whether the user is allowed to filter results by typing
- * @member isDisabled whether the input disabled
- * @member components - react-select custom components
- *
- * @member customReactSelectStyle extra style
- * @member extraLink link displayed at the bottom of the menu
- */
-export interface JRCFormSelectProps<T>
-    extends ExternalFormFieldRenderProps,
-        Partial<React.ComponentPropsWithoutRef<'select'>> {
-    name: string;
-    required?: boolean;
-    placeholder?: string;
-    asyncPromise?: (inputValue: string, callback: () => Promise<T[]>) => void;
-    frontFiltering?: boolean;
-    options?: T[];
-    getOptionLabel?: (option: T) => JSX.Element | string;
-    getOptionValue?: (option: T) => string;
-    isMulti?: boolean;
-    selectedOption?: { label: JSX.Element | string; value: any };
-    onInputChange?: (inputValue: T, { action }: any) => void;
-    isSearchable?: boolean;
-    isDisabled?: boolean;
-    components?: SelectComponentsConfig<T, boolean>;
-
-    customReactSelectStyle?: {};
-    extraLink?: {
-        url: string;
-        label: string;
-    };
-}
-
-/**
- * Component used as a select sync or async
- * @param props JRCFormSelectProps
- * validation props: required
- * @returns JSX.Element
- */
-const JRCFormSelectField = <TValue,>(props: JRCFormSelectProps<TValue>) => {
-    const validate = useControls({
-        intl: useIntl(),
-        required: props.required,
-    });
-    return (
-        <Field
-            component={JRCFormFieldRender}
-            renderInputFct={(input: WrappedFieldInputProps, inputState: InputState) =>
-                JRCFormSelectFieldRender({ ...props, input, inputState })
-            }
-            validate={validate}
-            htmlFor={props.name}
-            {...props}
-        />
-    );
-};
-
-const defaultProps: JRCFormSelectProps<JRCValueLabelProps> = {
-    name: 'select',
-    isSearchable: false,
-    components: {},
-};
-
-JRCFormSelectField.defaultProps = defaultProps;
-
-export { JRCFormSelectField };

package/src/components/Form/Input/JRCFormSelect/JRCFormSelectTag.tsx

@@ -1,132 +0,0 @@
-import * as React from 'react';
-
-import { JRCFormSelectFieldRender, JRCFormSelectProps } from './JRCFormSelect';
-import { JRCTag } from 'components/JRCTag/JRCTag';
-import { useControls } from '../ReduxFormControls';
-import { useIntl } from 'react-intl';
-import { Field, WrappedFieldInputProps } from 'redux-form';
-import JRCFormFieldRender, { InputState } from '../JRCFormFieldRender';
-import { components, MultiValueProps, OptionProps, OptionTypeBase, SingleValueProps } from 'react-select';
-import styled from 'styled-components';
-
-const customStyle = {
-    menuList: {
-        padding: '0',
-        borderRadius: '8px',
-    },
-    valueContainer: {
-        padding: '0px 8px',
-    },
-    group: {
-        padding: '0',
-        marginBottom: '0.25em',
-    },
-};
-
-const getOptionLabel = <isMulti extends boolean>(
-    props: OptionProps<OptionTypeBase, isMulti> | SingleValueProps<OptionTypeBase> | MultiValueProps<OptionTypeBase>,
-) => {
-    // FIXME TYPESCRIPT-STRICT
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    return props.selectProps.getOptionLabel(props.data);
-};
-
-const JRCFormSelectTagRenderer = <T,>(
-    props: JRCFormSelectProps<T>,
-    input: WrappedFieldInputProps,
-    inputState: InputState,
-) => {
-    const { components, ...otherProps } = props;
-    return (
-        <JRCFormSelectFieldRender
-            components={{
-                // FIXME TYPESCRIPT-STRICT
-                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                // @ts-ignore
-                MultiValue: (props: MultiValueProps<OptionTypeBase>) => (
-                    <JRCTag
-                        onMouseDown={props.removeProps.onMouseDown}
-                        onClick={(e) => props.removeProps.onClick(e)}
-                        focusable={true}
-                        isFocused={props.isFocused}
-                        uri={props.data.uri}
-                        label={getOptionLabel(props)}
-                        collapsed={input.value && input.value.length > 2}
-                        tooltipDescription={getOptionLabel(props)}
-                    />
-                ),
-                // FIXME TYPESCRIPT-STRICT
-                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                // @ts-ignore
-                SingleValue: (props: SingleValueProps<OptionTypeBase>) => (
-                    <JRCTag uri={props.data.uri} label={getOptionLabel(props)} />
-                ),
-                // FIXME TYPESCRIPT-STRICT
-                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                // @ts-ignore
-                Option,
-                ...components,
-            }}
-            input={input}
-            inputState={inputState}
-            customReactSelectStyle={customStyle}
-            {...otherProps}
-        />
-    );
-};
-
-/**
- * FIX: For an obscure reason, when the method is directly defined in the component props, we get an error
- * @param props
- * @returns
- */
-const Option = <isMulti extends boolean>(props: OptionProps<OptionTypeBase, isMulti>) => {
-    return (
-        <components.Option {...props}>
-            <FullLength>
-                <JRCTag
-                    uri={props.data.uri}
-                    focusable={true}
-                    isFocused={props.isFocused}
-                    label={getOptionLabel(props)}
-                />
-            </FullLength>
-        </components.Option>
-    );
-};
-
-const FullLength = styled.div`
-    & > * {
-        width: calc(100% - 28px);
-        margin: 2px 6px;
-        min-height: 32px;
-    }
-`;
-
-/**
- * Component used as a select sync or async with custom display: options are JRCTags
- * options (or asyncPromise) elements should have a uri and a name attributes
- * @param props JRCFormSelectProps
- * validation props: required
- * @returns JSX.Element
- */
-const JRCFormSelectTagField = <TValue,>(props: JRCFormSelectProps<TValue>) => {
-    const validate = useControls({
-        intl: useIntl(),
-        required: props.required,
-    });
-    return (
-        <Field
-            component={JRCFormFieldRender}
-            renderInputFct={(input: WrappedFieldInputProps, inputState: InputState) =>
-                JRCFormSelectTagRenderer(props, input, inputState)
-            }
-            validate={validate}
-            htmlFor={props.name}
-            {...props}
-        />
-    );
-};
-
-export { JRCFormSelectTagField };

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

@@ -1,10 +0,0 @@
-import * as React from 'react';
-import { withReduxForm } from '../../../../storybook/decorators';
-import { JRCFormSendAlertField } from './JRCFormSendAlert';
-
-export default {
-    title: 'Inputs/old/Checkbox',
-    decorators: [withReduxForm],
-};
-
-export const FormSendAlert: React.VFC<{}> = () => <JRCFormSendAlertField name="field-name" />;

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

@@ -1,22 +0,0 @@
-import * as React from 'react';
-import { useIntl } from 'react-intl';
-import { JRCFormCheckbox } from '../JRCFormCheckbox/JRCFormCheckbox';
-
-export type JRCFormSendAlertInputProps = React.ComponentPropsWithoutRef<'input'>;
-
-export const JRCFormSendAlertField = (props: { name: string }) => {
-    const intl = useIntl();
-    return (
-        <JRCFormCheckbox
-            checkboxMode="toggle"
-            name={props.name}
-            options={[
-                {
-                    label: intl.formatMessage({ id: 'GLOBAL_Form_SendAlert' }),
-                    value: 'YES',
-                },
-            ]}
-            reduxFormValueType="boolean"
-        />
-    );
-};

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

@@ -1,26 +0,0 @@
-import * as React from 'react';
-import { withReduxForm } from '../../../../storybook/decorators';
-import { JRCWritableFormInputProps } from '../JRCFormFieldRender';
-import { JRCFormTextField } from './JRCFormText';
-import { Meta, Story } from '@storybook/react';
-
-export default {
-    title: 'Inputs/old',
-    component: JRCFormTextField,
-    decorators: [withReduxForm],
-} as Meta;
-
-const Template: Story<JRCWritableFormInputProps> = (args) => <JRCFormTextField {...args} />;
-
-export const InputText = Template.bind({});
-InputText.args = {
-    name: 'name-storybook',
-    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' },
-    minLength: 3,
-    maxLength: 25,
-    required: false,
-    selected: false,
-};

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

@@ -1,47 +0,0 @@
-import * as React from 'react';
-import { Field, WrappedFieldInputProps } from 'redux-form';
-import JRCFormFieldRender, { InputState, JRCWritableFormInputProps } from '../JRCFormFieldRender';
-import { useControls } from '../ReduxFormControls';
-import { MaxLengthIndicator, StyledInput } from '../JRCStyledInput';
-import { useIntl } from 'react-intl';
-
-const renderInput = (props: JRCWritableFormInputProps, input: any, inputState: InputState) => {
-    const inputRef = React.useRef<HTMLInputElement>(null);
-    React.useEffect(() => {
-        if (props.selected || false) {
-            inputRef && inputRef.current && inputRef.current.select();
-        }
-    }, [inputRef]);
-    return (
-        <>
-            <MaxLengthIndicator maxLength={props.maxLength} actualLength={input.value.length} />
-            <StyledInput ref={inputRef} id={props.name} type="text" {...props} {...input} {...inputState} />
-        </>
-    );
-};
-
-/**
- * Component used as a <input type="text"/>
- * @param props JRCWritableFormInputProps
- * validation props: minLength, maxLength, required
- * @returns JSX.Element
- */
-export const JRCFormTextField = (props: JRCWritableFormInputProps) => {
-    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/JRCFormTextarea/JRCFormTextarea.stories.tsx

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