jamespot-react-components 1.0.16 → 1.0.67

package/src/components/JRCButton/JRCButtonConfig.tsx

@@ -1,150 +0,0 @@
-export const BUTTON_CONFIG = {
-    contained: {
-        primary: {
-            color: 'white',
-            background: 'primary',
-            border: 'primary',
-            active: {
-                background: 'primaryD20',
-                border: 'primaryD20',
-            },
-            hover: {
-                background: 'primaryL15',
-                border: 'primaryL15',
-            },
-        },
-        valid: {
-            color: 'white',
-            background: 'green',
-            border: 'green',
-            active: {
-                background: 'greenD20',
-                border: 'greenD20',
-            },
-            hover: {
-                background: 'greenL20',
-                border: 'greenL20',
-            },
-        },
-        danger: {
-            color: 'white',
-            background: 'orange',
-            border: 'orange',
-            active: {
-                background: 'orangeD20',
-                border: 'orangeD20',
-            },
-            hover: {
-                background: 'orangeL15',
-                border: 'orangeL15',
-            },
-        },
-        secondary: {
-            color: 'grey4',
-            background: 'grey0',
-            border: 'grey2',
-            active: {
-                background: 'primaryL80',
-                border: 'grey2',
-            },
-            hover: {
-                background: 'primaryL90',
-                border: 'grey2',
-            },
-        },
-        disabled: {
-            color: 'grey3',
-            background: 'grey1',
-            border: 'grey1',
-            active: {
-                background: 'grey1',
-                border: 'grey1',
-            },
-            hover: {
-                background: 'grey1',
-                border: 'grey1',
-            },
-        },
-    },
-    outlined: {
-        primary: {
-            color: 'primary',
-            background: 'white',
-            border: 'primary',
-            active: {
-                background: 'primaryL80',
-                border: 'primary',
-            },
-            hover: {
-                background: 'primaryL90',
-                border: 'primary',
-            },
-        },
-        valid: {
-            color: 'green',
-            background: 'white',
-            border: 'green',
-            active: {
-                background: 'greenL80',
-                border: 'green',
-            },
-            hover: {
-                background: 'greenL90',
-                border: 'green',
-            },
-        },
-        danger: {
-            color: 'orange',
-            background: 'white',
-            border: 'orange',
-            active: {
-                background: 'orangeL80',
-                border: 'orange',
-            },
-            hover: {
-                background: 'orangeL90',
-                border: 'orange',
-            },
-        },
-        secondary: {
-            color: 'grey4',
-            background: 'white',
-            border: 'grey4',
-            active: {
-                background: 'primaryL80',
-                border: 'grey4',
-            },
-            hover: {
-                background: 'primaryL90',
-                border: 'grey4',
-            },
-        },
-        disabled: {
-            color: 'grey3',
-            background: 'white',
-            border: 'grey3',
-            active: {
-                background: 'white',
-                border: 'grey3',
-            },
-            hover: {
-                background: 'white',
-                border: 'grey3',
-            },
-        },
-    },
-};
-
-export type ButtonType = {
-    color: string;
-    background: string;
-    border: string;
-    active: {
-        background: string;
-        border: string;
-    };
-    hover: {
-        background: string;
-        border: string;
-    };
-};

package/src/components/JRCButton/JRCValidationButton.tsx

@@ -1,91 +0,0 @@
-import * as React from 'react';
-import JRCButton, { JRCButtonProps } from './JRCButton';
-import { useIntl } from 'react-intl';
-import { DB_CLICK_DELAY, RESET_CLICK_DELAY } from '../../utils/const';
-
-/**
- * @see JRCButtonProps
- * @member onValidationClick, optional callback called when the first click is made
- * @member validationMessage, optional validation message, default to "Confirm / Valider"
- */
-export type JRCValidationButtonProps = JRCButtonProps & {
-    onValidationClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
-    validationMessage?: string;
-};
-
-/** double click prevented by using a temporary state (PREVENT_DB_CLICK), changed after a timeout */
-const state = {
-    NOT_CLICKED: 'NOT_CLICKED',
-    PREVENT_DB_CLICK: 'PREVENT_DB_CLICK',
-    CLICKED: 'CLICKED',
-};
-
-export const JRCValidationButton = ({
-    onClick,
-    onValidationClick,
-    children,
-    color,
-    variant,
-    icon,
-    ...props
-}: JRCValidationButtonProps) => {
-    const intl = useIntl();
-
-    const buttonRef = React.useRef<HTMLButtonElement>(null);
-
-    // use ref hack to access current value in callback
-    const [validation, setValidation] = React.useState(state.NOT_CLICKED);
-    const validationRef = React.useRef<typeof state[keyof typeof state]>();
-    validationRef.current = validation;
-
-    const [timeoutId, setTimeoutId] = React.useState<number>();
-    const timeoutIdRef = React.useRef<number>();
-    timeoutIdRef.current = timeoutId;
-
-    React.useEffect(() => {
-        if (validation === state.PREVENT_DB_CLICK) {
-            setTimeoutId(
-                setTimeout(() => {
-                    setValidation(state.NOT_CLICKED);
-                    buttonRef?.current?.removeAttribute('style');
-                }, RESET_CLICK_DELAY) as unknown as number,
-            );
-        }
-    }, [validation]);
-
-    const validationOnClick = React.useCallback(
-        (e: React.MouseEvent<HTMLButtonElement>) => {
-            if (validationRef.current === state.CLICKED) {
-                // Timeout of 0 second to delay the change at the end of the execution pile
-                setTimeout(() => setValidation(state.NOT_CLICKED), 0);
-                buttonRef?.current?.removeAttribute('style');
-                onClick && onClick(e);
-                if (timeoutIdRef.current) clearTimeout(timeoutIdRef.current);
-            } else {
-                setValidation(state.PREVENT_DB_CLICK);
-                setTimeout(() => setValidation(state.CLICKED), DB_CLICK_DELAY);
-                const width = buttonRef?.current?.getBoundingClientRect()?.width;
-                buttonRef?.current?.setAttribute('style', `min-width: ${width}px;`);
-                onValidationClick && onValidationClick(e);
-            }
-        },
-        [onClick],
-    );
-
-    return (
-        <JRCButton
-            {...props}
-            type={validation === state.CLICKED ? props.type : 'button'}
-            ref={buttonRef}
-            onClick={validationOnClick}
-            icon={validation === state.NOT_CLICKED ? icon : 'icon-fs-question'}
-            children={
-                validation === state.NOT_CLICKED
-                    ? children
-                    : props.validationMessage || intl.formatMessage({ id: 'GLOBAL_Validation' })
-            }
-            color={color}
-            variant={validation === state.NOT_CLICKED ? variant : 'outlined'}
-        />
-    );
-};

package/src/components/JRCButton/__snapshots__/JRCButton.test.tsx.snap

@@ -1,12 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`JRCButton match snapshot 1`] = `
-<DocumentFragment>
-  <button
-    class="sc-jRQBWg LNyd"
-    type="button"
-  >
-    I'm a text
-  </button>
-</DocumentFragment>
-`;

package/src/components/JRCButtonDropdown/JRCButtonDropdown.stories.tsx

@@ -1,289 +0,0 @@
-import React, { useEffect } from 'react';
-import { JRCButtonDropdown } from './JRCButtonDropdown';
-import styled from 'styled-components';
-import { action } from '@storybook/addon-actions';
-import JRCIcon from '../JRCIcon/JRCIcon';
-import { Meta } from '@storybook/react';
-
-export default {
-    title: 'JRCButtonDropdown',
-    component: JRCButtonDropdown,
-} as Meta;
-
-const ItemsContainer = styled.div``;
-const ItemContainer = styled.div`
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    padding: 8px 16px;
-    cursor: pointer;
-    border-radius: 0px 0px 8px 8px;
-    &:hover {
-        background-color: #f8f8ff;
-        color: #848491;
-    }
-    &:active {
-        color: #efefff;
-    }
-`;
-const ItemWrapper = styled.div`
-    padding-left: 8px;
-`;
-
-const Divider = styled.div`
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    padding: 8px 16px;
-    cursor: pointer;
-    border-bottom: 1px solid #dadaf0;
-    &:hover {
-        background-color: #f8f8ff;
-        color: #848491;
-    }
-    &:active {
-        color: #efefff;
-    }
-`;
-
-const JRCButtonWrapper = styled.div`
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: space-between;
-`;
-
-const item = ['item1', 'item2'];
-
-export const simple = () => {
-    return (
-        <JRCButtonDropdown label="simple">
-            <ItemsContainer>
-                <Divider onClick={action('button-click')}>
-                    <JRCIcon name="icon-calendar-check-o" variant="circle" color="#F97B62" size={20} />
-                    <ItemWrapper>item1</ItemWrapper>
-                </Divider>
-                <ItemContainer onClick={action('button-click')}>
-                    <JRCIcon name="icon-calendar-check-o" variant="circle" color="#F97B62" size={20} />
-                    <ItemWrapper>item2</ItemWrapper>
-                </ItemContainer>
-            </ItemsContainer>
-        </JRCButtonDropdown>
-    );
-};
-
-export const simpleWithAction = () => {
-    return (
-        <JRCButtonDropdown label="action" action={action('button-click')}>
-            <ItemsContainer>
-                <ItemContainer onClick={action('button-click')}>
-                    <JRCIcon name="icon-calendar-check-o" variant="circle" color="#F97B62" size={20} />
-                    <ItemWrapper>param</ItemWrapper>
-                </ItemContainer>
-            </ItemsContainer>
-        </JRCButtonDropdown>
-    );
-};
-
-export const AllButtonDropdown = () => {
-    return (
-        <JRCButtonWrapper>
-            <JRCButtonDropdown label="dropdown">
-                <ItemsContainer>
-                    {item.map((i, id) => (
-                        <Divider key={id} onClick={action('button-click')}>
-                            <JRCIcon name="icon-calendar-check-o" variant="circle" color="#F97B62" size={20} />
-                            <ItemWrapper>{i}</ItemWrapper>
-                        </Divider>
-                    ))}
-                    <ItemContainer onClick={action('button-click')}>
-                        <JRCIcon name="icon-calendar-check-o" variant="circle" color="#F97B62" size={20} />
-                        <ItemWrapper>item3</ItemWrapper>
-                    </ItemContainer>
-                </ItemsContainer>
-            </JRCButtonDropdown>
-
-            <JRCButtonDropdown label="dropdown" color="valid">
-                <ItemsContainer>
-                    {item.map((i, id) => (
-                        <Divider key={id} onClick={action('button-click')}>
-                            <JRCIcon name="icon-calendar-check-o" variant="circle" color="#F97B62" size={20} />
-                            <ItemWrapper>{i}</ItemWrapper>
-                        </Divider>
-                    ))}
-                    <ItemContainer onClick={action('button-click')}>
-                        <JRCIcon name="icon-calendar-check-o" variant="circle" color="#F97B62" size={20} />
-                        <ItemWrapper>item3</ItemWrapper>
-                    </ItemContainer>
-                </ItemsContainer>
-            </JRCButtonDropdown>
-
-            <JRCButtonDropdown label="dropdown" color="danger">
-                <ItemsContainer>
-                    {item.map((i, id) => (
-                        <Divider key={id} onClick={action('button-click')}>
-                            <JRCIcon name="icon-calendar-check-o" variant="circle" color="#F97B62" size={20} />
-                            <ItemWrapper>{i}</ItemWrapper>
-                        </Divider>
-                    ))}
-                    <ItemContainer onClick={action('button-click')}>
-                        <JRCIcon name="icon-calendar-check-o" variant="circle" color="#F97B62" size={20} />
-                        <ItemWrapper>item3</ItemWrapper>
-                    </ItemContainer>
-                </ItemsContainer>
-            </JRCButtonDropdown>
-
-            <JRCButtonDropdown label="dropdown" color="primary" variant="outlined">
-                <ItemsContainer>
-                    {item.map((i, id) => (
-                        <Divider key={id} onClick={action('button-click')}>
-                            <JRCIcon name="icon-calendar-check-o" variant="circle" color="#F97B62" size={20} />
-                            <ItemWrapper>{i}</ItemWrapper>
-                        </Divider>
-                    ))}
-                    <ItemContainer onClick={action('button-click')}>
-                        <JRCIcon name="icon-calendar-check-o" variant="circle" color="#F97B62" size={20} />
-                        <ItemWrapper>item3</ItemWrapper>
-                    </ItemContainer>
-                </ItemsContainer>
-            </JRCButtonDropdown>
-
-            <JRCButtonDropdown label="dropdown" color="valid" variant="outlined">
-                <ItemsContainer>
-                    {item.map((i, id) => (
-                        <Divider key={id} onClick={action('button-click')}>
-                            <JRCIcon name="icon-calendar-check-o" variant="circle" color="#F97B62" size={20} />
-                            <ItemWrapper>{i}</ItemWrapper>
-                        </Divider>
-                    ))}
-                    <ItemContainer onClick={action('button-click')}>
-                        <JRCIcon name="icon-calendar-check-o" variant="circle" color="#F97B62" size={20} />
-                        <ItemWrapper>item3</ItemWrapper>
-                    </ItemContainer>
-                </ItemsContainer>
-            </JRCButtonDropdown>
-
-            <JRCButtonDropdown label="dropdown" color="danger" variant="outlined">
-                <ItemsContainer>
-                    {item.map((i, id) => (
-                        <Divider key={id} onClick={action('button-click')}>
-                            <JRCIcon name="icon-calendar-check-o" variant="circle" color="#F97B62" size={20} />
-                            <ItemWrapper>{i}</ItemWrapper>
-                        </Divider>
-                    ))}
-                    <ItemContainer onClick={action('button-click')}>
-                        <JRCIcon name="icon-calendar-check-o" variant="circle" color="#F97B62" size={20} />
-                        <ItemWrapper>item3</ItemWrapper>
-                    </ItemContainer>
-                </ItemsContainer>
-            </JRCButtonDropdown>
-
-            <JRCButtonDropdown label="dropdown" disabled>
-                <ItemsContainer>
-                    {item.map((i, id) => (
-                        <Divider key={id} onClick={action('button-click')}>
-                            <JRCIcon name="icon-calendar-check-o" variant="circle" color="#F97B62" size={20} />
-                            <ItemWrapper>{i}</ItemWrapper>
-                        </Divider>
-                    ))}
-                    <ItemContainer onClick={action('button-click')}>
-                        <JRCIcon name="icon-calendar-check-o" variant="circle" color="#F97B62" size={20} />
-                        <ItemWrapper>item3</ItemWrapper>
-                    </ItemContainer>
-                </ItemsContainer>
-            </JRCButtonDropdown>
-
-            <JRCButtonDropdown label="dropdown" disabled variant="outlined">
-                <ItemsContainer>
-                    {item.map((i, id) => (
-                        <Divider key={id} onClick={action('button-click')}>
-                            <JRCIcon name="icon-calendar-check-o" variant="circle" color="#F97B62" size={20} />
-                            <ItemWrapper>{i}</ItemWrapper>
-                        </Divider>
-                    ))}
-                    <ItemContainer onClick={action('button-click')}>
-                        <JRCIcon name="icon-calendar-check-o" variant="circle" color="#F97B62" size={20} />
-                        <ItemWrapper>item3</ItemWrapper>
-                    </ItemContainer>
-                </ItemsContainer>
-            </JRCButtonDropdown>
-        </JRCButtonWrapper>
-    );
-};
-
-export const AllWithAction = () => {
-    return (
-        <JRCButtonWrapper>
-            <JRCButtonDropdown label="action" action={action('button-click')}>
-                <ItemsContainer>
-                    <ItemContainer onClick={action('button-click')}>
-                        <JRCIcon name="icon-calendar-check-o" variant="circle" color="#F97B62" size={20} />
-                        <ItemWrapper>param</ItemWrapper>
-                    </ItemContainer>
-                </ItemsContainer>
-            </JRCButtonDropdown>
-
-            <JRCButtonDropdown label="action" color="valid" action={action('button-click')}>
-                <ItemsContainer>
-                    <ItemContainer onClick={action('button-click')}>
-                        <JRCIcon name="icon-calendar-check-o" variant="circle" color="#F97B62" size={20} />
-                        <ItemWrapper>param</ItemWrapper>
-                    </ItemContainer>
-                </ItemsContainer>
-            </JRCButtonDropdown>
-
-            <JRCButtonDropdown label="action" color="danger" action={action('button-click')}>
-                <ItemsContainer>
-                    <ItemContainer onClick={action('button-click')}>
-                        <JRCIcon name="icon-calendar-check-o" variant="circle" color="#F97B62" size={20} />
-                        <ItemWrapper>param</ItemWrapper>
-                    </ItemContainer>
-                </ItemsContainer>
-            </JRCButtonDropdown>
-
-            <JRCButtonDropdown label="action" variant="outlined" action={action('button-click')}>
-                <ItemsContainer>
-                    <ItemContainer onClick={action('button-click')}>
-                        <JRCIcon name="icon-calendar-check-o" variant="circle" color="#F97B62" size={20} />
-                        <ItemWrapper>param</ItemWrapper>
-                    </ItemContainer>
-                </ItemsContainer>
-            </JRCButtonDropdown>
-
-            <JRCButtonDropdown label="action" color="valid" variant="outlined" action={action('button-click')}>
-                <ItemsContainer>
-                    <ItemContainer onClick={action('button-click')}>
-                        <JRCIcon name="icon-calendar-check-o" variant="circle" color="#F97B62" size={20} />
-                        <ItemWrapper>param</ItemWrapper>
-                    </ItemContainer>
-                </ItemsContainer>
-            </JRCButtonDropdown>
-
-            <JRCButtonDropdown label="action" color="danger" variant="outlined" action={action('button-click')}>
-                <ItemsContainer>
-                    <ItemContainer onClick={action('button-click')}>
-                        <JRCIcon name="icon-calendar-check-o" variant="circle" color="#F97B62" size={20} />
-                        <ItemWrapper>param</ItemWrapper>
-                    </ItemContainer>
-                </ItemsContainer>
-            </JRCButtonDropdown>
-
-            <JRCButtonDropdown label="action" disabled action={action('button-click')}>
-                <ItemsContainer>
-                    <ItemContainer onClick={action('button-click')}>
-                        <JRCIcon name="icon-calendar-check-o" variant="circle" color="#F97B62" size={20} />
-                        <ItemWrapper>param</ItemWrapper>
-                    </ItemContainer>
-                </ItemsContainer>
-            </JRCButtonDropdown>
-
-            <JRCButtonDropdown label="action" disabled variant="outlined" action={action('button-click')}>
-                <ItemsContainer>
-                    <ItemContainer onClick={action('button-click')}>
-                        <JRCIcon name="icon-calendar-check-o" variant="circle" color="#F97B62" size={20} />
-                        <ItemWrapper>param</ItemWrapper>
-                    </ItemContainer>
-                </ItemsContainer>
-            </JRCButtonDropdown>
-        </JRCButtonWrapper>
-    );
-};