jamespot-react-components 1.0.9 → 1.0.66

package/src/components/JRCAvatar/JRCAvatar.tsx

@@ -1,91 +0,0 @@
-import * as React from 'react';
-
-import styled from 'styled-components';
-import JRCImg, { JRCImgProps } from '../JRCImg/JRCImg';
-import { JRCConditionalWrapper } from '../Common/JRCConditionalWrapper';
-
-/**
- * Props type for JRCAvatar
- * @see JRCImgProps
- * /!\ It is not recommended to use the url property as it will result in overriding
- * the default image size
- *
- * @property size, multiple of 8px - The avatar image is downloaded
- *         with a size twice of the circle/square container in order to make it clear
- *         in retina like screens. default: xs
- * @property variant, optional 'circle' | 'square' - default: circle
- * @property focusable - whether the element is focusable. Independent of onClick property
- * @property subAvatar - represent a miniature avatar on the bottom right corner
- * @property className - className passed to the div wrapper
- * @property cssColor - background-color
- * @property from - image base url (imagestatic | imagecache)
- */
-export type JRCAvatarProps = Omit<JRCImgProps, 'size' | 'width' | 'height' | 'alt'> & {
-    uri?: string;
-    size?: number;
-    variant?: 'circle' | 'square';
-    focusable?: boolean;
-    subAvatar?: Omit<JRCImgProps, 'size' | 'width' | 'height'>;
-    className?: string;
-    cssColor?: string;
-    alt?: string;
-};
-
-const BASE_MULTIPLE = 8;
-
-type ExtendedImgProps = {
-    variant?: 'circle' | 'square';
-    focusable?: boolean;
-    width: number;
-    cssColor: string;
-};
-
-/**
- * border is calculated to be 2px when the avatar is 24px in width and 4px when the avatar is 80px
- */
-const Avatar = styled(JRCImg).attrs<ExtendedImgProps>((props) => ({
-    ...props,
-    border: props.width / 28 + 8 / 7,
-}))<ExtendedImgProps & { border: number }>`
-    cursor: ${(props) => (props.focusable ? 'pointer' : 'default')};
-    border-radius: ${(props) => (props.variant === 'square' ? '20%' : '50%')};
-    background-color: ${(props) => props.cssColor || 'transparent'};
-    vertical-align: middle;
-    & + img {
-        border: ${(props) => props.border}px solid white;
-        box-sizing: content-box;
-        margin-left: -${(props) => props.width / 2 + props.border}px;
-        margin-bottom: -${(props) => props.border}px;
-    }
-`;
-
-const JRCAvatar = (props: JRCAvatarProps) => {
-    const { subAvatar, className, size, from, format, alt, ...otherProps } = props;
-    const imgSize = (size || 3) * BASE_MULTIPLE;
-    return (
-        <JRCConditionalWrapper
-            condition={!!props.subAvatar}
-            wrapper={(children) => <div className={className}>{children}</div>}>
-            <>
-                {React.createElement(Avatar, {
-                    ...otherProps,
-                    width: imgSize,
-                    height: imgSize,
-                    format: format,
-                    alt: alt,
-                    'aria-hidden': alt ? undefined : true,
-                    from: from ?? 'imagecache/',
-                } as any)}
-                {props.subAvatar &&
-                    React.createElement(Avatar, {
-                        ...subAvatar,
-                        from: subAvatar?.from || 'imagecache/',
-                        width: imgSize / 2,
-                        height: imgSize / 2,
-                    } as any)}
-            </>
-        </JRCConditionalWrapper>
-    );
-};
-
-export default JRCAvatar;

package/src/components/JRCButton/JRCButton.stories.tsx

@@ -1,311 +0,0 @@
-import * as React from 'react';
-import JRCButton, { JRCButtonProps } from './JRCButton';
-import { action } from '@storybook/addon-actions';
-import styled from 'styled-components';
-import { withReduxForm } from '../../storybook/decorators';
-import { useState } from 'react';
-import { JRCValidationButton, JRCValidationButtonProps } from './JRCValidationButton';
-import { Meta, Story } from '@storybook/react';
-
-export default {
-    title: 'JRCButton',
-    component: JRCButton,
-    decorators: [withReduxForm],
-} as Meta;
-
-const Template: Story<JRCButtonProps> = (args) => {
-    const [loader, setLoader] = useState(false);
-    return (
-        <JRCButton {...args} loader={loader} onClick={() => setLoader(true)}>
-            {args.children}
-        </JRCButton>
-    );
-};
-
-export const CustomButton = Template.bind({});
-CustomButton.args = {
-    children: 'Click to see loading Icon',
-    icon: 'icon-backward',
-    type: 'submit',
-    dataCy: 'button-cy-demo',
-};
-
-const JRCButtonWrapper = styled.div`
-    display: flex;
-    flex-wrap: wrap;
-`;
-
-export const AllButtons = () => {
-    return (
-        <>
-            <JRCButtonWrapper>
-                <JRCButton onClick={action('button-click')} type="submit" color="primary" variant="contained">
-                    Button
-                </JRCButton>
-                <JRCButton
-                    onClick={action('button-click')}
-                    icon="icon-check"
-                    type="submit"
-                    color="primary"
-                    variant="contained">
-                    Button + Icon
-                </JRCButton>
-                <JRCButton
-                    onClick={action('button-click')}
-                    icon="icon-check"
-                    type="submit"
-                    color="primary"
-                    variant="contained"></JRCButton>
-                <JRCButton
-                    onClick={action('button-click')}
-                    icon="icon-check"
-                    type="submit"
-                    color="primary"
-                    variant="contained">
-                    Icon + Button
-                </JRCButton>
-            </JRCButtonWrapper>
-            <JRCButtonWrapper>
-                <JRCButton onClick={action('button-click')} type="submit" color="valid" variant="contained">
-                    Button
-                </JRCButton>
-                <JRCButton
-                    onClick={action('button-click')}
-                    icon="icon-check"
-                    type="submit"
-                    color="valid"
-                    variant="contained">
-                    Button + Icon
-                </JRCButton>
-                <JRCButton
-                    onClick={action('button-click')}
-                    icon="icon-check"
-                    type="submit"
-                    color="valid"
-                    variant="contained"></JRCButton>
-                <JRCButton
-                    onClick={action('button-click')}
-                    icon="icon-check"
-                    type="submit"
-                    color="valid"
-                    variant="contained">
-                    Icon + Button
-                </JRCButton>
-            </JRCButtonWrapper>
-            <JRCButtonWrapper>
-                <JRCButton onClick={action('button-click')} type="submit" color="danger" variant="contained">
-                    Button
-                </JRCButton>
-                <JRCButton
-                    onClick={action('button-click')}
-                    icon="icon-check"
-                    type="submit"
-                    color="danger"
-                    variant="contained">
-                    Button + Icon
-                </JRCButton>
-                <JRCButton
-                    onClick={action('button-click')}
-                    icon="icon-check"
-                    type="submit"
-                    color="danger"
-                    variant="contained"></JRCButton>
-                <JRCButton
-                    onClick={action('button-click')}
-                    icon="icon-check"
-                    type="submit"
-                    color="danger"
-                    variant="contained">
-                    Icon + Button
-                </JRCButton>
-            </JRCButtonWrapper>
-            <JRCButtonWrapper>
-                <JRCButton onClick={action('button-click')} disabled type="submit" color="primary" variant="contained">
-                    Button
-                </JRCButton>
-                <JRCButton
-                    onClick={action('button-click')}
-                    disabled
-                    icon="icon-check"
-                    type="submit"
-                    color="primary"
-                    variant="contained">
-                    Button + Icon
-                </JRCButton>
-                <JRCButton
-                    onClick={action('button-click')}
-                    disabled
-                    icon="icon-check"
-                    type="submit"
-                    color="primary"
-                    variant="contained"></JRCButton>
-                <JRCButton
-                    onClick={action('button-click')}
-                    disabled
-                    icon="icon-check"
-                    type="submit"
-                    color="primary"
-                    variant="contained">
-                    Icon + Button
-                </JRCButton>
-            </JRCButtonWrapper>
-            <br />
-            <JRCButtonWrapper>
-                <JRCButton onClick={action('button-click')} type="submit" color="primary" variant="outlined">
-                    Button
-                </JRCButton>
-                <JRCButton
-                    onClick={action('button-click')}
-                    icon="icon-check"
-                    type="submit"
-                    color="primary"
-                    variant="outlined">
-                    Button + Icon
-                </JRCButton>
-                <JRCButton
-                    onClick={action('button-click')}
-                    icon="icon-check"
-                    type="submit"
-                    color="primary"
-                    variant="outlined"></JRCButton>
-                <JRCButton
-                    onClick={action('button-click')}
-                    icon="icon-check"
-                    type="submit"
-                    color="primary"
-                    variant="outlined">
-                    Icon + Button
-                </JRCButton>
-            </JRCButtonWrapper>
-            <JRCButtonWrapper>
-                <JRCButton onClick={action('button-click')} type="submit" color="valid" variant="outlined">
-                    Button
-                </JRCButton>
-                <JRCButton
-                    onClick={action('button-click')}
-                    icon="icon-check"
-                    type="submit"
-                    color="valid"
-                    variant="outlined">
-                    Button + Icon
-                </JRCButton>
-                <JRCButton
-                    onClick={action('button-click')}
-                    icon="icon-check"
-                    type="submit"
-                    color="valid"
-                    variant="outlined"></JRCButton>
-                <JRCButton
-                    onClick={action('button-click')}
-                    icon="icon-check"
-                    type="submit"
-                    color="valid"
-                    variant="outlined">
-                    Icon + Button
-                </JRCButton>
-            </JRCButtonWrapper>
-            <JRCButtonWrapper>
-                <JRCButton onClick={action('button-click')} type="submit" color="danger" variant="outlined">
-                    Button
-                </JRCButton>
-                <JRCButton
-                    onClick={action('button-click')}
-                    icon="icon-check"
-                    type="submit"
-                    color="danger"
-                    variant="outlined">
-                    Button + Icon
-                </JRCButton>
-                <JRCButton
-                    onClick={action('button-click')}
-                    icon="icon-check"
-                    type="submit"
-                    color="danger"
-                    variant="outlined"></JRCButton>
-                <JRCButton
-                    onClick={action('button-click')}
-                    icon="icon-check"
-                    type="submit"
-                    color="danger"
-                    variant="outlined">
-                    Icon + Button
-                </JRCButton>
-            </JRCButtonWrapper>
-            <JRCButtonWrapper>
-                <JRCButton onClick={action('button-click')} type="submit" color="secondary" variant="outlined">
-                    Button
-                </JRCButton>
-                <JRCButton
-                    onClick={action('button-click')}
-                    icon="icon-check"
-                    type="submit"
-                    color="secondary"
-                    variant="outlined">
-                    Button + Icon
-                </JRCButton>
-                <JRCButton
-                    onClick={action('button-click')}
-                    icon="icon-check"
-                    type="submit"
-                    color="secondary"
-                    variant="outlined"></JRCButton>
-                <JRCButton
-                    onClick={action('button-click')}
-                    icon="icon-check"
-                    type="submit"
-                    color="secondary"
-                    variant="outlined">
-                    Icon + Button
-                </JRCButton>
-            </JRCButtonWrapper>
-            <JRCButtonWrapper>
-                <JRCButton onClick={action('button-click')} disabled type="submit" color="primary" variant="outlined">
-                    Button
-                </JRCButton>
-                <JRCButton
-                    onClick={action('button-click')}
-                    disabled
-                    icon="icon-check"
-                    type="submit"
-                    color="primary"
-                    variant="outlined">
-                    Button + Icon
-                </JRCButton>
-                <JRCButton
-                    onClick={action('button-click')}
-                    disabled
-                    icon="icon-check"
-                    type="submit"
-                    color="danger"
-                    variant="outlined"></JRCButton>
-                <JRCButton
-                    onClick={action('button-click')}
-                    disabled
-                    icon="icon-check"
-                    type="submit"
-                    color="danger"
-                    variant="outlined">
-                    Icon + Button
-                </JRCButton>
-            </JRCButtonWrapper>
-        </>
-    );
-};
-
-const ValidationTemplate: Story<JRCValidationButtonProps> = (args) => {
-    const [loader, setLoader] = useState(false);
-    return (
-        <JRCValidationButton {...args} loader={loader} onClick={() => setLoader(true)}>
-            {args.children}
-        </JRCValidationButton>
-    );
-};
-
-export const ValidationButton = ValidationTemplate.bind({});
-ValidationButton.args = {
-    children: 'Click to see loading Icon',
-    icon: 'icon-backward',
-    type: 'submit',
-    onValidationClick: action('validation'),
-    dataCy: 'demo-cy-validation-button',
-};

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

@@ -1,34 +0,0 @@
-import * as React from 'react';
-import { screen } from '@testing-library/react';
-import { renderWithWrapper } from 'utils/test-utils';
-import UserEvent from '@testing-library/user-event';
-
-import JRCButton from './JRCButton';
-
-const TEXT = "I'm a text";
-
-describe('JRCButton', () => {
-    test('match snapshot', () => {
-        const { asFragment } = renderWithWrapper(<JRCButton>{TEXT}</JRCButton>);
-        expect(asFragment()).toMatchSnapshot();
-    });
-
-    test('renders button with correct text', () => {
-        renderWithWrapper(<JRCButton>{TEXT}</JRCButton>);
-        expect(screen.getByText(TEXT)).toBeInTheDocument();
-        expect(screen.getByRole('button')).toBeInTheDocument();
-    });
-
-    test('calls correct function on click', () => {
-        const onClick = jest.fn();
-        renderWithWrapper(<JRCButton onClick={onClick}>{TEXT}</JRCButton>);
-        UserEvent.click(screen.getByText(TEXT));
-        expect(onClick).toHaveBeenCalled();
-    });
-
-    test('button should be disabled', () => {
-        renderWithWrapper(<JRCButton disabled>{TEXT}</JRCButton>);
-        expect(screen.getByText(TEXT)).toHaveAttribute('disabled');
-        expect(screen.getByText(TEXT)).toBeDisabled();
-    });
-});

package/src/components/JRCButton/JRCButton.tsx

@@ -1,126 +0,0 @@
-import * as React from 'react';
-import JRCIcon, { JRCIconProps } from '../JRCIcon/JRCIcon';
-import styled from 'styled-components';
-import JRCLoader from 'components/JRCLoader/JRCLoader';
-import { BUTTON_CONFIG, ButtonType } from './JRCButtonConfig';
-import { ForwardedRef } from 'react';
-import { DataCy } from '../../types/dataAttributes';
-
-export type JRCButtonProps = React.ComponentPropsWithoutRef<'button'> &
-    DataCy & {
-        /** Color of the background of the button */
-        color?: 'primary' | 'valid' | 'danger' | 'secondary';
-        /** Indicates loading of content on the button */
-        loader?: boolean;
-        /** This Boolean attribute specifies that the button should have input focus when the page loads */
-        autofocus?: boolean;
-        /** Defines the value associated with the button’s name when it’s submitted with the form data */
-        value?: string;
-        /** Enhance your button with an icon */
-        icon?: string;
-        /** The variant is used to define what type of action the button will take */
-        variant?: 'contained' | 'outlined';
-        /** CSS float attribute */
-        float?: 'left' | 'right';
-        /** CSS min-width attribute */
-        minWidth?: string;
-    };
-
-export const transformColor = (color?: string): JRCIconProps['color'] => {
-    switch (color) {
-        case 'valid':
-            return 'green';
-        case 'danger':
-            return 'orange';
-        case 'secondary':
-            return 'grey4';
-        default:
-            return 'primary';
-    }
-};
-
-/**
- * Button styling. May be used as a <a> tag
- */
-export const Button = styled.button<{ themeButton: ButtonType; hasChildren: boolean } & JRCButtonProps>`
-    float: ${(props) => props.float};
-    min-width: ${(props) => props.minWidth};
-    display: inline-flex;
-    flex-direction: row;
-    justify-content: center;
-    cursor: ${(props) => (props.disabled ? 'not-allowed' : props.loader ? 'wait' : 'pointer')};
-    align-items: center;
-    color: ${(props) => props.theme.color[props.themeButton.color]};
-    height: 40px;
-    margin: 0.2rem;
-    position: relative;
-    outline: none;
-    border-radius: 8px;
-    padding: ${(props) => (props.hasChildren ? '8px 16px' : '8px 10px')};
-    background-color: ${(props) => props.theme.color[props.themeButton.background]};
-    box-sizing: border-box;
-    border: 2px solid ${(props) => props.theme.color[props.themeButton.border]};
-    transition: color 0.5s, background-color 0.5s, border 0.5s;
-    text-decoration: none;
-    &:hover {
-        text-decoration: none;
-        color: ${(props) => props.theme.color[props.themeButton.color]};
-        background-color: ${(props) => props.theme.color[props.themeButton.hover.background]};
-        border-color: ${(props) => props.theme.color[props.themeButton.hover.border]};
-    }
-    &:active {
-        background-color: ${(props) => props.theme.color[props.themeButton.active.background]};
-        border-color: ${(props) => props.theme.color[props.themeButton.active.border]};
-    }
-    &:before {
-        display: none;
-        content: '';
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-        width: calc(100% - 2.5px);
-        border-radius: inherit;
-        height: calc(100% - 2.5px);
-        border: 1px dashed ${(props) => props.theme.color[props.themeButton.color]};
-    }
-    & > i,
-    & > div {
-        margin: ${(props) => `0 ${props.hasChildren ? '8px' : '0'} 0 0`};
-    }
-    &:focus-visible:before {
-        display: ${(props) => !props.disabled && !props.loader && 'block'};
-    }
-`;
-
-const JRCButton = React.forwardRef(
-    (
-        { color = 'primary', type = 'button', variant = 'contained', ...props }: JRCButtonProps,
-        ref: ForwardedRef<HTMLButtonElement>,
-    ) => {
-        const disabled = props.disabled || props.loader;
-        const themeButton = BUTTON_CONFIG[variant][disabled ? 'disabled' : color];
-
-        return (
-            <Button
-                hasChildren={!!props.children}
-                themeButton={themeButton}
-                type={type}
-                data-cy={props.dataCy}
-                disabled={disabled}
-                {...props}
-                ref={ref}>
-                {props.icon && !props.loader && (
-                    <JRCIcon
-                        name={props.icon}
-                        color={props.disabled ? 'grey3' : variant === 'contained' ? 'white' : transformColor(color)}
-                    />
-                )}
-                {props.loader && <JRCLoader color="grey3" />}
-                {props.children}
-            </Button>
-        );
-    },
-);
-
-export default JRCButton;