jamespot-react-components 1.0.0

package/src/components/JRCModalImg/JRCModalImg.styles.tsx

@@ -0,0 +1,83 @@
+import styled from 'styled-components';
+
+export const JRCModalBox = styled.div`
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background: rgba(0, 0, 0, 0.7);
+    z-index: 5;
+`;
+
+export const JRCModalContainer = styled.div`
+    position: relative;
+    border-radius: 8px;
+    min-width: 260px;
+    min-height: 260px;
+    max-width: 720px;
+    width: 85vw;
+    max-height: 400px;
+    margin: 50px;
+    background-color: ${(props) => props.theme.color.white};
+    display: flex;
+    flex-direction: column;
+    #r-left .sticky {
+        min-height: 100%;
+    }
+    #r-main {
+        display: flex;
+        flex-direction: column;
+    }
+`;
+
+/**
+ * Type for align content
+ * @member align left: 'flex-start' | align center: 'center' | align right: 'flex-end'
+ */
+type AlignProps = {
+    align?: 'flex-start' | 'center' | 'flex-end';
+};
+
+export const JRCModalContent = styled.div<AlignProps>`
+    margin-right: 24px;
+`;
+
+export const JRCModalFooter = styled.div`
+    display: flex;
+    justify-content: flex-end;
+    padding: 8px 24px 24px 0px;
+`;
+
+export const JRCModalClose = styled.div`
+    position: absolute;
+    right: 0;
+    top: 0;
+    margin: 16px 16px 0px 0px;
+`;
+
+export const ImgContainer = styled.div`
+    min-width: 200px;
+    height: 100%;
+    min-height: 260px;
+    overflow: hidden;
+    img {
+        width: 100%;
+        height: 100%;
+        border-top-left-radius: 8px;
+        border-bottom-left-radius: 8px;
+        max-height: 400px;
+    }
+`;
+export const ContentContainer = styled.div`
+    width: 100%;
+    margin-top: 30px;
+    flex-grow: 1;
+    h2 {
+        margin-bottom: 16px;
+        font-weight: 500;
+    }
+`;

package/src/components/JRCModalImg/JRCModalImg.tsx

@@ -0,0 +1,140 @@
+import React, { useRef, ComponentPropsWithoutRef, ReactNode } from 'react';
+import JRCButton from '../JRCButton/JRCButton';
+import { JRCH2 } from '../JRCTypo/JRCTypo';
+import { JRCIconButton } from '../JRCIconButton/JRCIconButton';
+import JRCGrid from '../JRCGrid/JRCGrid';
+import JRCColumnCenter from '../JRCColumnCenter/JRCColumnCenter';
+import JRCColumnLeft from '../JRCColumnLeft/JRCColumnLeft';
+import {
+    JRCModalBox,
+    JRCModalContainer,
+    JRCModalContent,
+    JRCModalFooter,
+    JRCModalClose,
+    ImgContainer,
+    ContentContainer,
+} from './JRCModalImg.styles';
+
+/**
+ * Interface to provide Modal Buttons
+ * @member color button color "primary" | "red" | "green" | "grey"
+ * @member isClosed optional boolean (default false). If true, when click on the button, the modal is closes
+ * @member clickHandler optional, callback when the button is click
+ * @member children default ReactNode children in the Modal content
+ * @member variant optional style button "contained" | "outlined"
+ */
+export interface JRCModalImgButtonType extends ComponentPropsWithoutRef<'button'> {
+    children: ReactNode;
+    color?: 'primary' | 'valid' | 'danger';
+    variant?: 'contained' | 'outlined';
+    isClosed?: boolean;
+    clickHandler?: (event?: React.MouseEvent) => void;
+}
+
+/**
+ * Interface for JRCModal props
+ * @member open boolean that open or close the Modal
+ * @member closeHandler callback called when the Modal is closed
+ * @member buttons array of JRCModalButton possibly added to the Modal
+ * @member title optional string (header content) if hasHeader= true
+ * @member showIconClose boolean to show/hide the close (x) button of the Modal
+ * @member children default ReactNode children in the Modal content
+ * @member alignContent content's align, default:flex-start
+ * @member img path image type string
+ * @member size modal max height
+ */
+export interface JRCModalImgProps {
+    open: boolean;
+    closeHandler: () => void;
+    buttons?: JRCModalImgButtonType[];
+    children?: ReactNode;
+    title?: string;
+    showIconClose?: boolean;
+    img: string;
+    alignContent?: 'flex-start' | 'center' | 'flex-end';
+}
+
+const JRCModalImg = ({
+    open,
+    closeHandler,
+    buttons,
+    children,
+    title,
+    showIconClose,
+    img,
+    alignContent = 'center',
+}: JRCModalImgProps) => {
+    const ModalRef = useRef();
+
+    const closeModal = () => {
+        closeHandler();
+    };
+
+    const escapeHandler = (e: React.KeyboardEvent) => {
+        if (e.key == 'Escape') closeHandler();
+    };
+    const dummyVoid = (): undefined => {
+        return undefined;
+    };
+    const getClickHandlerList = () => {
+        const handlerList: (() => void)[] = [];
+        if (buttons != undefined) {
+            buttons.map((button: JRCModalImgButtonType) => {
+                if (button.isClosed == undefined || !button.isClosed)
+                    handlerList.push(() => {
+                        closeHandler();
+                        button.clickHandler != undefined ? button.clickHandler() : dummyVoid();
+                    });
+                else
+                    handlerList.push(() => {
+                        dummyVoid();
+                    });
+            });
+        }
+        return handlerList;
+    };
+    const clickHandlerList = getClickHandlerList();
+
+    return open ? (
+        // FIXME TYPESCRIPT-STRICT
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        <JRCModalBox onKeyDown={(e) => escapeHandler(e)} tabIndex={0} ref={ModalRef}>
+            <JRCModalContainer>
+                <JRCGrid cols="2">
+                    <JRCColumnLeft>
+                        <ImgContainer>
+                            <img src={img} />
+                        </ImgContainer>
+                    </JRCColumnLeft>
+                    <JRCColumnCenter>
+                        {showIconClose && (
+                            <JRCModalClose>
+                                <JRCIconButton icon="icon-times" onClick={closeModal} />
+                            </JRCModalClose>
+                        )}
+                        <ContentContainer>
+                            {title && <JRCH2>{title}</JRCH2>}
+                            <JRCModalContent align={alignContent}>{children}</JRCModalContent>
+                        </ContentContainer>
+                        {buttons ? (
+                            <JRCModalFooter>
+                                {buttons.map((button: JRCModalImgButtonType, index: number) => (
+                                    <JRCButton
+                                        key={index}
+                                        color={button.color}
+                                        variant={button.variant}
+                                        onClick={button.isClosed ? closeModal : clickHandlerList[index]}>
+                                        {button.children}
+                                    </JRCButton>
+                                ))}
+                            </JRCModalFooter>
+                        ) : null}
+                    </JRCColumnCenter>
+                </JRCGrid>
+            </JRCModalContainer>
+        </JRCModalBox>
+    ) : null;
+};
+
+export default JRCModalImg;

package/src/components/JRCPagination/JRCPagination.stories.tsx

@@ -0,0 +1,42 @@
+import * as React from 'react';
+import JRCPagination, { JRCPaginationProps } from './JRCPagination';
+import { action } from '@storybook/addon-actions';
+import { Meta, Story } from '@storybook/react';
+
+export default {
+    title: 'JRCPagination',
+} as Meta;
+
+const PaginationTemplate: Story<JRCPaginationProps> = (args) => <JRCPagination {...args} />;
+
+export const PaginationFirst = PaginationTemplate.bind({});
+PaginationFirst.args = {
+    activePage: 1,
+    nbrOfPage: 95,
+    dataCy: 'pagination-example',
+    clickHandler: (number: number) => action(`clicked on page ${number}`)(),
+};
+
+export const PaginationFirstBis = PaginationTemplate.bind({});
+PaginationFirstBis.args = {
+    activePage: 3,
+    nbrOfPage: 95,
+    dataCy: 'pagination-example',
+    clickHandler: (number: number) => action(`clicked on page ${number}`)(),
+};
+
+export const PaginationMiddle = PaginationTemplate.bind({});
+PaginationMiddle.args = {
+    activePage: 19,
+    nbrOfPage: 95,
+    dataCy: 'pagination-example',
+    clickHandler: (number: number) => action(`clicked on page ${number}`)(),
+};
+
+export const PaginationFinal = PaginationTemplate.bind({});
+PaginationFinal.args = {
+    activePage: 95,
+    nbrOfPage: 95,
+    dataCy: 'pagination-example',
+    clickHandler: (number: number) => action(`clicked on page ${number}`)(),
+};

package/src/components/JRCPagination/JRCPagination.test.tsx

@@ -0,0 +1,79 @@
+import * as React from 'react';
+import { cleanup, screen } from '@testing-library/react';
+import { renderWithWrapper } from 'utils/test-utils';
+import UserEvent from '@testing-library/user-event';
+
+import JRCPagination from './JRCPagination';
+
+let activeNumber = 15;
+const PREVIOUS_LABEL = 'previous';
+const NEXT_LABEL = 'next';
+const ACTIVE_PAGE = 15;
+const NR_OF_PAGES = 160;
+
+const propsJRCPagination = {
+    activePage: ACTIVE_PAGE,
+    nbrOfPage: NR_OF_PAGES,
+    previousLabel: PREVIOUS_LABEL,
+    nextLabel: NEXT_LABEL,
+    clickHandler: (page: number) => {
+        activeNumber = page;
+    },
+};
+
+describe('JRCPagination', () => {
+    beforeEach(() => {
+        renderWithWrapper(<JRCPagination {...propsJRCPagination}></JRCPagination>);
+    });
+
+    test('page 1 should not have class active', () => {
+        expect(screen.getByText('1')).not.toHaveClass('active');
+    });
+    test('page 15 should have class active', () => {
+        expect(screen.getByText('15')).toHaveClass('active');
+    });
+    test('page 160 exist on DOM', () => {
+        expect(screen.getByText(NR_OF_PAGES)).toBeInTheDocument();
+    });
+    test('button last exist on DOM', () => {
+        expect(screen.getByTestId('previous')).toBeInTheDocument();
+    });
+    test('button next exist on DOM', () => {
+        expect(screen.getByTestId(NEXT_LABEL)).toBeInTheDocument();
+    });
+
+    // V1 : click handler is on the top of file and change "activeNumber"
+    test('click on button next', () => {
+        UserEvent.click(screen.getByTestId(NEXT_LABEL));
+        expect(activeNumber).toEqual(ACTIVE_PAGE + 1);
+    });
+    test('click on button last', () => {
+        UserEvent.click(screen.getByTestId(PREVIOUS_LABEL));
+        expect(activeNumber).toEqual(ACTIVE_PAGE - 1);
+    });
+    test('click on number 17', () => {
+        UserEvent.click(screen.getByText('17'));
+        expect(activeNumber).toEqual(17);
+    });
+    test('click on number 13', () => {
+        UserEvent.click(screen.getByText('13'));
+        expect(activeNumber).toEqual(13);
+    });
+
+    // V2 : click handler and all the logic is in this test()
+    test('click on button next', () => {
+        // Arrange
+        let hasBeenClicked = false;
+        const handleClick = (page: number) => {
+            if (page === ACTIVE_PAGE + 1) {
+                hasBeenClicked = true;
+            }
+        };
+        cleanup();
+        renderWithWrapper(<JRCPagination {...propsJRCPagination} clickHandler={handleClick} />);
+        // Act
+        UserEvent.click(screen.getByTestId(NEXT_LABEL));
+        // Assert
+        expect(hasBeenClicked).toEqual(true);
+    });
+});

package/src/components/JRCPagination/JRCPagination.tsx

@@ -0,0 +1,194 @@
+import { JRCIconButton } from '../JRCIconButton/JRCIconButton';
+import * as React from 'react';
+import styled from 'styled-components';
+import classnames from 'classnames';
+import { DataCy } from '../../types/dataAttributes';
+
+const MAX_NBR_OF_PAGE = 5;
+
+export type PaginationBulletProps = DataCy & {
+    number: number;
+    isActive: boolean;
+    clickHandler: (page: number) => void;
+};
+/**
+ * Props type for JRCPagination
+ * @member activePage number :  active page Number
+ * @member nbrOfPage number : total nb of pages
+ * @member clickHandler (page: number) => void; callback when click on a page number
+ */
+export type JRCPaginationProps = DataCy & {
+    activePage: number;
+    nbrOfPage: number;
+    clickHandler: (page: number) => void;
+};
+
+const StyledBullet = styled.button`
+    cursor: pointer;
+    min-width: 8px;
+    text-align: center;
+    padding: 5px 8px;
+    border-radius: 4px;
+    &.active {
+        padding: 5px 8px 3px;
+        color: ${(props) => props.theme.color.overseas};
+        font-weight: 500;
+        &:after {
+            content: '';
+            height: 2px;
+            background: ${(props) => props.theme.color.overseas};
+            border-radius: 1px;
+            display: block;
+        }
+    }
+    &:hover {
+        padding: 5px 8px 3px;
+        &:after {
+            content: '';
+            height: 2px;
+            background: ${(props) => props.theme.color.overseas};
+            border-radius: 1px;
+            display: block;
+        }
+    }
+    &:focus-visible {
+        background-color: ${(props) => props.theme.color.grey2};
+    }
+`;
+
+export const PaginationBullet = ({ number, isActive, dataCy, clickHandler }: PaginationBulletProps) => {
+    return (
+        <StyledBullet
+            className={classnames({
+                active: isActive,
+            })}
+            data-cy={dataCy && `${dataCy}-page-${number}`}
+            onClick={() => !isActive && clickHandler(number)}>
+            {number}
+        </StyledBullet>
+    );
+};
+
+const PaginationBox = styled.div`
+    display: flex;
+    align-items: center;
+    justify-content: center;
+`;
+const PaginationNumber = styled.div`
+    text-align: center;
+    display: flex;
+`;
+
+const Ellipsis = styled.span`
+    margin-top: 6px;
+`;
+
+const getBulletArray = (
+    begging: number,
+    end: number,
+    activePage: number,
+    clickHandler: (number: number) => void,
+    dataCy?: string,
+) => {
+    const toRender = [];
+    for (let i = begging; i <= end; i++) {
+        toRender.push(
+            <PaginationBullet
+                key={i}
+                number={i}
+                isActive={i === activePage}
+                dataCy={dataCy}
+                clickHandler={clickHandler}
+            />,
+        );
+    }
+    return toRender;
+};
+
+const JRCPagination = ({ activePage = 1, nbrOfPage, clickHandler, dataCy }: JRCPaginationProps) => {
+    let toRender = [];
+    // activePage = 1 : Display the 5 first ... and the last
+    if (activePage <= MAX_NBR_OF_PAGE) {
+        // If there is 6 pages to render and max is 9. We only render the 6 first
+        if (nbrOfPage <= MAX_NBR_OF_PAGE) {
+            toRender = getBulletArray(1, nbrOfPage, activePage, clickHandler, dataCy);
+        } else {
+            toRender = getBulletArray(1, MAX_NBR_OF_PAGE, activePage, clickHandler, dataCy);
+            toRender.push(<Ellipsis key="...end">...</Ellipsis>);
+            // Final Block
+            toRender.push(
+                <PaginationBullet
+                    key={nbrOfPage}
+                    number={nbrOfPage}
+                    isActive={nbrOfPage === activePage}
+                    dataCy={dataCy}
+                    clickHandler={clickHandler}
+                />,
+            );
+        }
+    }
+    // activePage = x : Display the  first ... the 3 before and 3 after ... the last
+    else if (activePage > MAX_NBR_OF_PAGE && activePage < nbrOfPage - MAX_NBR_OF_PAGE) {
+        toRender.push(
+            <PaginationBullet
+                key={1}
+                number={1}
+                isActive={1 === activePage}
+                dataCy={dataCy}
+                clickHandler={clickHandler}
+            />,
+        );
+        toRender.push(<Ellipsis key="...start">...</Ellipsis>);
+
+        toRender = [...toRender, ...getBulletArray(activePage - 2, activePage + 2, activePage, clickHandler, dataCy)];
+
+        toRender.push(<Ellipsis key="...end">...</Ellipsis>);
+        toRender.push(
+            <PaginationBullet
+                key={nbrOfPage}
+                number={nbrOfPage}
+                isActive={nbrOfPage === activePage}
+                dataCy={dataCy}
+                clickHandler={clickHandler}
+            />,
+        );
+    }
+    // activePage = final :the first page ... and the 9 last
+    else {
+        toRender.push(
+            <PaginationBullet
+                key={1}
+                number={1}
+                isActive={1 === activePage}
+                dataCy={dataCy}
+                clickHandler={clickHandler}
+            />,
+        );
+        toRender.push(<Ellipsis key="...start">...</Ellipsis>);
+        // last block
+        toRender = [
+            ...toRender,
+            ...getBulletArray(nbrOfPage - MAX_NBR_OF_PAGE, nbrOfPage, activePage, clickHandler, dataCy),
+        ];
+    }
+    return (
+        <PaginationBox>
+            <JRCIconButton
+                data-testid="previous"
+                disabled={activePage === 1}
+                icon="icon-chevron-left"
+                dataCy={dataCy && `${dataCy}-page-previous`}
+                onClick={() => clickHandler(activePage - 1)}
+            />
+            <PaginationNumber>{toRender}</PaginationNumber>
+            <JRCIconButton
+                data-testid="next"
+                disabled={activePage === nbrOfPage}
+                icon="icon-chevron-right"
+                dataCy={dataCy && `${dataCy}-page-next`}
+                onClick={() => clickHandler(activePage + 1)}
+            />
+        </PaginationBox>
+    );
+};
+export default JRCPagination;

package/src/components/JRCTabs/JRCTabs.stories.tsx

@@ -0,0 +1,121 @@
+import * as React from 'react';
+import { JRCTabs, JRCTabPanel, ItemEntriesProps } from './JRCTabs';
+import JRCIcon from '../JRCIcon/JRCIcon';
+import styled from 'styled-components';
+
+export default {
+    title: 'JRCTabs',
+    component: JRCTabs,
+};
+
+const itemsHorizontal: ItemEntriesProps[] = [
+    {
+        key: '1',
+        label: <JRCIcon name="icon-picture-o" />,
+    },
+    {
+        key: '2',
+        label: <JRCIcon name="icon-picture-o" />,
+    },
+    {
+        key: '3',
+        label: <JRCIcon name="icon-picture-o" />,
+    },
+];
+
+const itemsVertical: ItemEntriesProps[] = [
+    {
+        key: '5',
+        label: <JRCIcon name="icon-picture-o" />,
+    },
+    {
+        key: '6',
+        label: <JRCIcon name="icon-picture-o" />,
+    },
+];
+
+export const TabHorizontal = () => {
+    const [activeItem, setActiveItem] = React.useState('1');
+
+    return (
+        <div>
+            <JRCTabs
+                direction="horizontal"
+                entries={itemsHorizontal}
+                activeItem={activeItem}
+                callback={(item) => setActiveItem(item)}
+            />
+            <JRCTabPanel active={activeItem === '1'}>Menu 1</JRCTabPanel>
+            <JRCTabPanel active={activeItem === '2'}>Menu 2</JRCTabPanel>
+            <JRCTabPanel active={activeItem === '3'}>Menu 3</JRCTabPanel>
+        </div>
+    );
+};
+
+const Flex = styled.div`
+    display: flex;
+    align-items: flex-start;
+`;
+
+export const TabVertical = () => {
+    const [activeItem, setActiveItem] = React.useState('1');
+
+    return (
+        <Flex>
+            <JRCTabs
+                direction="vertical"
+                entries={itemsVertical}
+                activeItem={activeItem}
+                callback={(key) => setActiveItem(key)}
+            />
+            <JRCTabPanel active={activeItem === '1'}>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras imperdiet leo in tincidunt feugiat. Nulla
+                facilisi. Donec nec tortor ut nunc tempor consectetur. Morbi tristique ipsum eget commodo feugiat.
+                Mauris eget metus in ligula mattis pharetra et vel magna. Cras sed tempor lectus. Duis feugiat tempus
+                condimentum. Cras porttitor efficitur mattis. Nulla facilisi. Etiam luctus ex non mi fermentum, sit amet
+                bibendum dolor interdum. Quisque quis aliquam dui, vel laoreet dolor. Pellentesque et sagittis nunc. Nam
+                auctor vel libero in vehicula. In neque elit, fermentum sit amet pretium sed, ultricies et magna.
+                Vivamus ornare laoreet bibendum.
+            </JRCTabPanel>
+            <JRCTabPanel active={activeItem === '2'}>Menu 2</JRCTabPanel>
+        </Flex>
+    );
+};
+
+export const EmbeddedTab = () => {
+    const [horizontalActiveItem, setHorizontalActiveItem] = React.useState('2');
+    const [verticalActiveItem, setVerticalActiveItem] = React.useState('1');
+
+    return (
+        <div>
+            <JRCTabs
+                direction="horizontal"
+                entries={itemsHorizontal}
+                activeItem={horizontalActiveItem}
+                callback={(item) => setHorizontalActiveItem(item)}
+            />
+            <JRCTabPanel active={horizontalActiveItem === '1'}>Menu 1</JRCTabPanel>
+            <JRCTabPanel active={horizontalActiveItem === '2'}>
+                <Flex>
+                    <JRCTabs
+                        direction="vertical"
+                        entries={itemsVertical}
+                        activeItem={verticalActiveItem}
+                        callback={(key) => setVerticalActiveItem(key)}
+                    />
+                    <JRCTabPanel active={verticalActiveItem === '1'}>
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras imperdiet leo in tincidunt
+                        feugiat. Nulla facilisi. Donec nec tortor ut nunc tempor consectetur. Morbi tristique ipsum eget
+                        commodo feugiat. Mauris eget metus in ligula mattis pharetra et vel magna. Cras sed tempor
+                        lectus. Duis feugiat tempus condimentum. Cras porttitor efficitur mattis. Nulla facilisi. Etiam
+                        luctus ex non mi fermentum, sit amet bibendum dolor interdum. Quisque quis aliquam dui, vel
+                        laoreet dolor. Pellentesque et sagittis nunc. Nam auctor vel libero in vehicula. In neque elit,
+                        fermentum sit amet pretium sed, ultricies et magna. Vivamus ornare laoreet bibendum.{' '}
+                    </JRCTabPanel>
+                    <JRCTabPanel active={verticalActiveItem === '2'}>Menu 2</JRCTabPanel>
+                </Flex>
+            </JRCTabPanel>
+            <JRCTabPanel active={horizontalActiveItem === '3'}>Menu 3</JRCTabPanel>
+        </div>
+    );
+};