jamespot-react-components 1.0.0

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

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

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

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

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

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

@@ -0,0 +1,47 @@
+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/JRCFormTextEditor/JRCFormTextEditor.stories.tsx

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import { withReduxForm } from '../../../../storybook/decorators';
+import { JRCWritableFormInputProps } from '../JRCFormFieldRender';
+import { JRCFormTextEditorField } from './JRCFormTextEditor';
+import { Meta, Story } from '@storybook/react';
+
+export default {
+    title: 'Inputs/old',
+    component: JRCFormTextEditorField,
+    decorators: [withReduxForm],
+} as Meta;
+
+const Template: Story<JRCWritableFormInputProps> = (args) => (
+    <>
+        <h1>Deprecated: use RichTextEditor</h1>
+        <JRCFormTextEditorField {...args} />
+    </>
+);
+
+export const InputTextEditor = Template.bind({});
+InputTextEditor.args = {
+    name: 'name-storybook',
+    label: 'Article',
+    description: 'Ecrivez un article captivant pour vos auditeurs, ni trop long, ni trop court, juste suffisant.',
+    placeholder: "Moi, j'aime les haricots",
+    helper: { description: 'Si vis pacem, para bellum', title: 'Indication' },
+    minLength: 3,
+    maxLength: 2500,
+    required: false,
+};