jamespot-react-components 1.0.9 → 1.0.66

package/src/components/Form/Input/JRCSelect/JRCInputSelect.types.ts

@@ -1,51 +0,0 @@
-import { JRCInputFieldProps } from '../Common/JRCFormFieldRenderer.types';
-import { ControllerRenderProps } from 'react-hook-form/dist/types/controller';
-import { DataCy } from '../../../../types/dataAttributes';
-
-/**
- * Select
- */
-export type NativeSelectProps<T> = ControllerRenderProps<T> & SelectProps;
-export type JRCInputSelectProps<T> = JRCInputFieldProps<T> & SelectProps;
-
-export type Getter = ((option: any) => any) | string;
-
-export type SelectProps = DataCy & {
-    options?: Array<any>;
-    asyncPromise?: (inputValue: string) => Promise<any[]>;
-
-    multiple?: boolean;
-
-    getLabel?: ((option: any) => any) | string;
-    getValue?: ((option: any) => any) | string;
-
-    disabled?: boolean;
-    placeholder?: string;
-
-    searchable?: boolean;
-    getSearch?: ((option: any) => any) | string;
-
-    group?: boolean;
-    getGroup?: ((option: any) => any) | string;
-
-    components?: {
-        // Receive a full option object
-        Option?: React.ComponentType<{ option: any }>;
-        // Receive an option if getValue is not provided, getValue(option) otherwise
-        SelectedOption?: React.ComponentType<{ option: any }>;
-    };
-};
-
-/**
- * Autocomplete
- */
-export type NativeAutocompleteProps<T> = ControllerRenderProps<T> & AutocompleteInnerProps;
-export type JRCAutocompleteProps<T> = JRCInputFieldProps<T> & AutocompleteInnerProps;
-
-export type AutocompleteLittle = { uri: string; title: string };
-
-export type AutocompleteInnerProps = Omit<SelectProps, 'options'> &
-    DataCy & {
-        options?: Array<AutocompleteLittle>;
-        asyncPromise?: (inputValue: string) => Promise<Array<AutocompleteLittle>>;
-    };

package/src/components/Form/Input/JRCSelect/JRCInputSelect.utils.ts

@@ -1,92 +0,0 @@
-import { deepEqual } from '../../../../utils/utils.object';
-
-/**
- * Get index of an object within an array (works with objects)
- * @param arr
- * @param element
- */
-export function getIndex(arr: Array<any>, element: any): number {
-    return arr.findIndex((v) => deepEqual(v, element));
-}
-
-/**
- * Remove an object within an array (works with objects)
- * @param arr
- * @param value
- */
-export function removeItem<T>(arr: Array<T>, value: T): Array<T> {
-    const index = getIndex(arr, value);
-    if (index >= 0) {
-        arr.splice(index, 1);
-    }
-    return arr;
-}
-
-/**
- * Adds an object within an array. Instantiate it if the arr is neither an array nor defined
- * @param arr
- * @param value
- */
-export function addItem<T>(arr: Array<T> | any, value: T): Array<T> {
-    if (Array.isArray(arr)) {
-        arr.push(value);
-        return arr;
-    } else {
-        return [value];
-    }
-}
-
-/**
- * Sorts, Adds an index then groups an array with a grouping function
- * @param arr
- * @param getGroup
- */
-export function group<T>(
-    arr: Array<T>,
-    getGroup: (v: T) => string,
-): { label: string; options: (T & { _index: number })[] }[] {
-    const mappedArr = arr
-        // add group value once for future use
-        .map((el) => ({ el, group: getGroup(el) }))
-        // sort alphabetically in order for the indexes to be in the right order
-        .sort((el1, el2) => (el1.group === el2.group ? 0 : el1.group < el2.group ? -1 : 1))
-        // group options by their grouping property
-        .reduce((acc, { el, group }, index) => {
-            if (acc.get(group)) acc.set(group, [...acc.get(group), { ...el, _index: index }]);
-            else acc.set(group, [{ ...el, _index: index }]);
-            return acc;
-        }, new Map());
-    // Convert map to array of array
-    return Array.from(mappedArr).map(([k, v]) => ({ label: k, options: v }));
-}
-
-/**
- * Returns the attribute of an object according to a getter
- * If the return value is falsy, always return an empty string to avoid warning: "A component is changing a controlled input to be uncontrolled"
- * @param obj
- * @param getter
- */
-export function get(obj: any, getter: any): any {
-    if (getter && typeof getter === 'function') return getter(obj) || '';
-    else if (getter && typeof getter === 'string') return obj[getter] || '';
-    return obj || '';
-}
-
-/**
- * If the obj is an array, check if the search is in it. Otherwise, checks if the search is the object
- * @param obj
- * @param search
- */
-export function isOrIncludes<T>(obj: T | Array<T>, search: T) {
-    if (Array.isArray(obj)) {
-        return getIndex(obj, search) >= 0;
-    } else {
-        return deepEqual(obj, search);
-    }
-}
-
-/**
- * Returns true if it is falsy, an empty array or an empty object
- * @param v
- */
-export const isNullOrEmpty = (v: any | undefined) => !v || (Array.isArray(v) && !v.length) || v == {};

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

@@ -1,83 +0,0 @@
-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 { JRCInputSelect } from './JRCInputSelect';
-import { JRCInputSelectProps } from './JRCInputSelect.types';
-
-export default {
-    title: 'Inputs/new',
-    component: JRCInputSelect,
-} as Meta;
-
-type Data = {
-    animal: string;
-    cat: string;
-};
-
-const Template: Story<JRCInputSelectProps<{ select: Array<Data> }>> = (args) => {
-    const { handleSubmit, control, reset } = useForm({
-        defaultValues: {
-            select: [{ animal: 'elephant', cat: 'big' }],
-        },
-        criteriaMode: 'all',
-    });
-
-    const onSubmit: SubmitHandler<{ select: Array<Data> }> = (data) => {
-        alert(JSON.stringify(data, null, 2));
-    };
-
-    return (
-        <form onSubmit={handleSubmit(onSubmit)}>
-            <p>-.-</p>
-            <JRCInputSelect {...args} name="select" control={control} />
-            <p>-.-</p>
-            <input type="submit" />
-            <input type="reset" />
-            <button type="button" onClick={() => reset()}>
-                Custom Reset
-            </button>
-        </form>
-    );
-};
-
-export const AsyncSelect = Template.bind({});
-AsyncSelect.args = {
-    label: 'label',
-    htmlFor: 'htmlFor',
-    placeholder: 'placeholder',
-    labelIsLegend: false,
-    description: 'description',
-
-    asyncPromise: (input) =>
-        Promise.resolve(
-            [
-                { animal: 'elephant', cat: 'big' },
-                { animal: 'girage', cat: 'tall' },
-                { animal: 'mouse', cat: 'big' },
-            ].filter((option) => new RegExp(input).test(option.animal)),
-        ),
-
-    multiple: true,
-    getLabel: (option: any) => `~${option.animal}~`,
-    getValue: (option: any) => `~${option.animal}~`,
-
-    searchable: true,
-    getSearch: (option: any) => `${option.animal}`,
-
-    group: true,
-    getGroup: 'cat',
-
-    components: {
-        Option: (props: any) => {
-            return (
-                <div>
-                    {props.option.cat}-{props.option.animal}
-                </div>
-            );
-        },
-        // SelectedOption: (props: any) => {
-        //     return <div>{props.value}</div>
-        // }
-    },
-};

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

@@ -1,102 +0,0 @@
-import * as React from 'react';
-import styled, { css } from 'styled-components';
-import check from 'assets/check.svg';
-import error from 'assets/x.svg';
-import { InputState } from './JRCFormFieldRender';
-import { DataCy } from '../../../types/dataAttributes';
-
-/**
- * Input styles are &&& encapsulated in order to go over the reset styles
- * and the not-resseted legacy style set with input[type="toto"]
- */
-export const cssCommonStyledInput = css<InputState>`
-    &&&& {
-        font-size: 16px;
-        color: ${(props) => props.theme.color.grey5};
-        border: 1px solid ${(props) => props.theme.color.grey2};
-        width: 100%;
-        height: 40px;
-        border-radius: 8px;
-        box-sizing: border-box;
-        padding: 8px 16px;
-        margin-bottom: 4px;
-        box-shadow: none;
-        transition: border 0.2s, box-shadow 0.2s;
-
-        &:hover {
-            box-shadow: 0 0 2px ${(props) => props.theme.color.grey2};
-        }
-        &:focus {
-            border-color: ${(props) => props.theme.color.navy};
-            box-shadow: 0 0 2px ${(props) => props.theme.color.grey4};
-        }
-
-        ${(props) =>
-            props.valid &&
-            `
-            border-color: ${props.theme.color.green};
-            background-image: url(${check});
-            background-repeat: no-repeat;
-            background-position: calc(100% - 14px) 14px;
-            background-size: 12px;
-            &:focus {
-                border-color: ${props.theme.color.green};
-                box-shadow: none;
-            }
-        `}
-
-        ${(props) =>
-            props.error &&
-            `
-            border-color: ${props.theme.color.orange};
-            background-image: url(${error});
-            background-repeat: no-repeat;
-            background-position: calc(100% - 14px) 14px;
-            background-size: 12px;
-        `}
-    }
-`;
-
-export const cssStyledInput = css<InputState>`
-    ${cssCommonStyledInput}
-    &&&::placeholder {
-        color: ${(props) => props.theme.color.grey3};
-        font-size: 16px;
-        font-style: normal;
-        opacity: 1;
-    }
-`;
-
-export const StyledInput = styled.input.attrs<InputState>(({ dataCy, ...props }) => ({ 'data-cy': dataCy, ...props }))`
-    ${cssStyledInput}
-    &&& {
-        &.inputFile {
-            visibility: hidden;
-            display: none;
-        }
-    }
-`;
-
-export type StyledSelectProps = DataCy & {
-    searchable?: boolean;
-};
-
-export const StyledSelect = styled(StyledInput)<StyledSelectProps>`
-    ${(props) => !props.searchable && 'caret-color: transparent'};
-    ${(props) => !props.searchable && 'cursor: pointer'};
-`;
-
-export const MaxLengthIndicatorContainer = styled.div`
-    text-align: right;
-    margin-top: -24px;
-`;
-
-export const MaxLengthIndicator = ({ maxLength, actualLength }: { maxLength?: number; actualLength: number }) => (
-    <>
-        {maxLength && (
-            <MaxLengthIndicatorContainer>
-                {actualLength}/{maxLength}
-            </MaxLengthIndicatorContainer>
-        )}
-    </>
-);

package/src/components/Form/Input/ReduxFormControls.ts

@@ -1,135 +0,0 @@
-import { useMemo } from 'react';
-import { IntlShape } from 'react-intl';
-
-export type ControlsProps = {
-    required?: boolean;
-    minLength?: number;
-    maxLength?: number;
-    number?: boolean;
-    minValue?: number | string;
-    maxValue?: number | string;
-    email?: boolean;
-    url?: boolean;
-    date?: boolean;
-};
-
-/***
- * Format
- * @todo trad
- */
-const required = (intl: IntlShape) => (value: boolean) =>
-    !value || (value && Array.isArray(value) && !value.length)
-        ? intl.formatMessage({
-              id: 'GLOBAL_Form_Controls_Required',
-          })
-        : undefined;
-const maxLength = (intl: IntlShape, max: number) => (value: string) =>
-    value && value.length > max
-        ? intl.formatMessage(
-              {
-                  id: 'GLOBAL_Form_Controls_MaxLength',
-              },
-              { max },
-          )
-        : undefined;
-
-const minLength = (intl: IntlShape, min: number) => (value: string) =>
-    value && value.length < min
-        ? intl.formatMessage(
-              {
-                  id: 'GLOBAL_Form_Controls_MinLength',
-              },
-              { min },
-          )
-        : undefined;
-
-const number = (intl: IntlShape) => (value: any) =>
-    // TODO : doesn't work !!
-    value && isNaN(Number(value))
-        ? intl.formatMessage({
-              id: 'GLOBAL_Form_Controls_Number',
-          })
-        : undefined;
-
-const minValue = (intl: IntlShape, min: number | string) => (value: number) =>
-    value && value < +min
-        ? intl.formatMessage(
-              {
-                  id: 'GLOBAL_FORM_CONTROLS_MinValue',
-              },
-              { min },
-          )
-        : undefined;
-
-const maxValue = (intl: IntlShape, max: number | string) => (value: number) =>
-    value && value > +max
-        ? intl.formatMessage(
-              {
-                  id: 'GLOBAL_Form_Controls_MaxValue',
-              },
-              { max },
-          )
-        : undefined;
-
-const email = (intl: IntlShape) => (value: string) =>
-    value && !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(value)
-        ? intl.formatMessage({
-              id: 'ERROR_Mail_Invalid',
-          })
-        : undefined;
-
-const url = (intl: IntlShape) => (value: string) =>
-    // eslint-disable-next-line no-useless-escape
-    value && !/^(?:http(s)?:\/\/)?[\w.-]+(?:\.[\w\.-]+)+[\w\-\._~:/?#[\]@!\$&'\(\)\*\+,;=.]+$/i.test(value)
-        ? intl.formatMessage({
-              id: 'GLOBAL_Form_Controls_Url',
-          })
-        : undefined;
-
-const date = (intl: IntlShape) => (value: string) =>
-    value && !/^\d{2,2}\/\d{2,2}\/\d{4,4}$/i.test(value)
-        ? intl.formatMessage({
-              id: 'GLOBAL_Form_Controls_Date',
-          })
-        : undefined;
-
-export const getControls = (props: ControlsProps & { intl: IntlShape }) => {
-    const controls = [];
-    if (props.required) {
-        controls.push(required(props.intl));
-    }
-    if (props.minLength) {
-        controls.push(minLength(props.intl, props.minLength));
-    }
-    if (props.maxLength) {
-        controls.push(maxLength(props.intl, props.maxLength));
-    }
-    if (props.number) {
-        controls.push(number(props.intl));
-    }
-    if (props.date) {
-        controls.push(date(props.intl));
-    }
-    if (props.minValue) {
-        controls.push(minValue(props.intl, props.minValue));
-    }
-    if (props.maxValue) {
-        controls.push(maxValue(props.intl, props.maxValue));
-    }
-    if (props.email) {
-        controls.push(email(props.intl));
-    }
-    if (props.url) {
-        controls.push(url(props.intl));
-    }
-    return controls;
-};
-
-export const useControls = (props: ControlsProps & { intl: IntlShape }) => {
-    const { required, minLength, maxLength, number, minValue, maxValue, email, url } = props;
-    const validate = useMemo(
-        () => getControls({ ...props }),
-        [required, minLength, maxLength, number, minValue, maxValue, email, url],
-    );
-    return validate;
-};

package/src/components/Form/Input/temporary.types.tsx

@@ -1,22 +0,0 @@
-import { JRCButtonProps } from 'components/JRCButton/JRCButton';
-
-export interface extraInfoProps {
-    label?: string;
-    placeholder?: string;
-    htmlFor?: string;
-    description?: string;
-    helper?: {
-        message: string;
-        title?: string;
-        button?: JRCButtonProps;
-        closeButton?: boolean;
-        position?: 'top' | 'bottom' | 'left' | 'right';
-    };
-}
-
-export interface entryProps {
-    input: any;
-    placeholder: string;
-    classes: string;
-    htmlFor: string;
-}

package/src/components/JRCAlert/JRCAlert.stories.tsx

@@ -1,62 +0,0 @@
-/* eslint-disable no-console */
-import * as React from 'react';
-import JRCAlert, { JRCAlertProps } from './JRCAlert';
-import { withReduxForm } from '../../storybook/decorators';
-import { Story, Meta } from '@storybook/react';
-
-export default {
-    title: 'JRCAlert',
-    component: JRCAlert,
-    decorators: [withReduxForm],
-} as Meta;
-
-const Template: Story<JRCAlertProps> = (args) => <JRCAlert {...args}>{args.children}</JRCAlert>;
-
-export const Default = Template.bind({});
-Default.args = {
-    label: 'Custom Alert',
-    description: 'Everyone loves cauliflower cheese caerphilly',
-    color: 'success',
-};
-
-export const Success = Template.bind({});
-Success.args = {
-    label: "C'est tout bon !",
-    description:
-        "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.",
-    buttons: [
-        {
-            color: 'primary',
-            children: 'Action',
-        },
-        {
-            color: 'primary',
-            children: 'Accéder au contenu',
-            variant: 'outlined',
-            onClick: () => console.log('Accès au contenu'),
-        },
-    ],
-    hasLoader: true,
-};
-
-export const Error = Template.bind({});
-Error.args = {
-    label: 'Aïe, il y a eu un couac...',
-    color: 'error',
-    description: 'Votre contenu a bien été crée !',
-    hasLoader: true,
-    buttons: [
-        {
-            color: 'primary',
-            children: 'Action',
-        },
-    ],
-};
-
-export const Warning = Template.bind({});
-Warning.args = {
-    label: 'Attention !',
-    color: 'warning',
-    hasLoader: true,
-    description: 'Votre contenu a bien été crée !',
-};

package/src/components/JRCAlert/JRCAlert.tsx

@@ -1,135 +0,0 @@
-import * as React from 'react';
-import styled, { ThemeContext } from 'styled-components';
-import { JRCIconButton } from '../JRCIconButton/JRCIconButton';
-import JRCButton, { JRCButtonProps } from 'components/JRCButton/JRCButton';
-import { JRCTypography } from '../JRCTypography/JRCTypography';
-import JRCIcon from '../JRCIcon/JRCIcon';
-import { getColor, MessageType } from 'components/Common/util/getColor.util';
-
-export interface JRCAlertProps extends React.ComponentPropsWithoutRef<'div'> {
-    /** Alert title */
-    label: string;
-    /** Main content of the alert */
-    description?: string;
-    /** Define the type of alert */
-    type?: MessageType;
-    /** Add a loader which will make the alert disappear after the timeout */
-    hasLoader?: boolean;
-    /** Timeout */
-    timeout?: number;
-    /** Add buttons on the alert */
-    buttons?: JRCButtonProps[];
-}
-
-const Alert = styled.div<{ description?: string; type: MessageType }>`
-    width: 320px;
-    border-radius: 8px;
-    background: ${(props) => (props.description ? 'white' : props.theme.color[getColor(props.type)])};
-    overflow: hidden;
-    ${(props) => props.description && `box-shadow: 0 0 5px ${props.theme.color.grey2}`};
-`;
-const Container = styled.div<{ center: boolean }>`
-    display: flex;
-    padding: 8px;
-    justify-content: space-between;
-    ${(props) => props.center && 'align-items: center'};
-    flex-direction: row;
-`;
-const Content = styled.div`
-    width: 100%;
-    margin-left: 8px;
-`;
-const Header = styled.div`
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-`;
-
-const icons = {
-    success: 'icon-check-circle',
-    error: 'icon-times-circle',
-    warning: 'icon-exclamation-circle',
-};
-
-const JRCAlert = ({ label, description, hasLoader, buttons, type = 'success', timeout = 3000 }: JRCAlertProps) => {
-    const colors = React.useContext(ThemeContext).color;
-    const [showAlert, setShowAlert] = React.useState(true);
-    const closeAlert = () => setShowAlert(false);
-
-    React.useEffect(() => {
-        const timeoutId = setTimeout(() => {
-            setShowAlert(false);
-        }, timeout);
-        return () => {
-            clearTimeout(timeoutId);
-        };
-    }, [timeout]);
-
-    return (
-        (showAlert && (
-            <Alert
-                description={description}
-                type={type}
-                style={{ '--timeout': `${timeout}ms` } as React.CSSProperties}
-                className="slide-right"
-                role="alert"
-                aria-live="polite">
-                <Container center={!description}>
-                    <JRCIcon name={icons[type]} color={description ? getColor(type) : 'white'} />
-                    <Content>
-                        <Header>
-                            <JRCTypography
-                                size={description ? 'm' : 'l'}
-                                weight="medium"
-                                color={(!description && 'white') || undefined}>
-                                {label}
-                            </JRCTypography>
-                            <JRCIconButton
-                                size="small"
-                                icon="icon-times"
-                                onClick={closeAlert}
-                                aria-label="close"
-                                color={(!description && 'white') || undefined}
-                            />
-                        </Header>
-                        {description && <JRCTypography>{description}</JRCTypography>}
-                        {buttons &&
-                            buttons.map((button: JRCButtonProps, index: number) => (
-                                <JRCButton
-                                    key={index}
-                                    {...button}
-                                    float="right"
-                                    onClick={(e) => {
-                                        if (button.onClick) button.onClick(e);
-                                        closeAlert();
-                                    }}>
-                                    {button.children}
-                                </JRCButton>
-                            ))}
-                    </Content>
-                </Container>
-                {hasLoader && description && <ProgressBar color={description ? colors[getColor(type)] : 'white'} />}
-            </Alert>
-        )) ||
-        null
-    );
-};
-
-/**
- * @member color color of the bar
- */
-interface ProgressBarProps {
-    color: string;
-}
-
-const Bar = styled.div<ProgressBarProps>`
-    height: 4px;
-    border-radius: 2px;
-    background-color: ${(props) => props.color};
-`;
-
-const ProgressBar = ({ color }: ProgressBarProps) => {
-    return <Bar color={color} className="scale-left" />;
-};
-
-export default JRCAlert;