jamespot-react-components 1.0.3 → 1.0.65

package/src/components/JRCList/JRCList.styles.tsx

@@ -1,213 +0,0 @@
-import * as React from 'react';
-import styled, { css } from 'styled-components';
-import { DndProvider, useDrag, useDrop } from 'react-dnd';
-import { HTML5Backend } from 'react-dnd-html5-backend';
-import { JRCIconButton } from '../JRCIconButton/JRCIconButton';
-import { JRCConditionalWrapper } from '../Common/JRCConditionalWrapper';
-import { DropTargetMonitor } from 'react-dnd/dist/types/types';
-
-const TableCss = css`
-    border-bottom: 1px solid ${(props) => props.theme.color.grey2};
-    text-align: center;
-    text-align: left;
-    vertical-align: middle;
-`;
-
-export const Table = styled.table`
-    ${TableCss};
-    width: 100%;
-    border-collapse: collapse;
-`;
-
-export const Thead = styled.thead``;
-
-export const TBody = styled.tbody``;
-
-export const Th = styled.th<{ width?: number | string }>`
-    ${TableCss};
-    font-size: 12px;
-    font-weight: normal;
-    ${(props) => props.width && props.width > 0 && `width: ${props.width}px`};
-`;
-
-export const Tr = styled.tr<{ dragging?: boolean }>`
-    ${(props) =>
-        props.dragging &&
-        `
-        opacity: 0.5;
-        position: relative;
-        background-color: ${props.theme.color.grey1};
-        &:after {
-            content: "";
-            position: absolute;
-            top: 0; left: 0; bottom: 0; right: 0;
-            background-image: linear-gradient(
-                -45deg, 
-                rgba(255, 255, 255, .5) 25%, 
-                transparent 25%, 
-                transparent 50%, 
-                rgba(255, 255, 255, .5) 50%, 
-                rgba(255, 255, 255, .5) 75%, 
-                transparent 75%, 
-                transparent
-            );
-            z-index: 1;
-            background-size: 50px 50px;
-            animation: move 2s linear infinite;
-            border-top-right-radius: 8px;
-            border-bottom-right-radius: 8px;
-            border-top-left-radius: 20px;
-            border-bottom-left-radius: 20px;
-            overflow: hidden;
-            
-            animation: move 2s linear infinite;
-            @keyframes move {
-                0% {
-                    background-position: 0 0;
-                }
-                100% {
-                    background-position: 50px 50px;
-                }
-            }
-        }
-    `};
-`;
-
-export const Td = styled.td`
-    ${TableCss};
-    ${(props) => props.width && `width: ${props.width}`};
-`;
-
-const DraggableTd = styled.td`
-    ${TableCss};
-    display: table-cell;
-    width: 56px;
-    ${(props) => props.width && props.width > 0 && `width: ${props.width}px`};
-`;
-
-export const LoadMore = styled.div`
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    align-items: center;
-    flex: 1 100%;
-    margin-top: 16px;
-`;
-
-export const LoadMoreButton = styled.div`
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    align-items: center;
-    width: 160px;
-    cursor: pointer;
-    padding: 4px 0px;
-    border-radius: 16px;
-    border: 1px solid ${(props) => props.theme.color.grey5};
-    color: ${(props) => props.theme.color.grey5};
-    &:hover {
-        border: 1px solid ${(props) => props.theme.color.lavender};
-        color: ${(props) => props.theme.color.lavender};
-    }
-`;
-
-export type DraggableTBodyProps = {
-    draggable: boolean;
-    children: Array<JSX.Element>;
-};
-
-export type DraggableTrProps = {
-    index: number;
-    onDrag: (dragIndex: number, dropIndex: number) => void;
-    onDrop: () => void;
-    draggable: boolean;
-    children: Array<JSX.Element>;
-};
-
-export const DraggableTBody = ({ draggable, children }: DraggableTBodyProps) => {
-    return (
-        <JRCConditionalWrapper
-            condition={draggable}
-            wrapper={(children) => <DndProvider backend={HTML5Backend}>{children}</DndProvider>}>
-            <>{children}</>
-        </JRCConditionalWrapper>
-    );
-};
-
-const DND_ITEM_TYPE = 'row';
-
-export const DraggableTr = ({ index, onDrag, onDrop, draggable, children }: DraggableTrProps) => {
-    const dropRef = React.useRef<HTMLTableRowElement>(null);
-    const dragRef = React.useRef<HTMLTableCellElement>(null);
-    let dragging = false;
-
-    if (draggable) {
-        const [_, drop] = useDrop({
-            accept: DND_ITEM_TYPE,
-            drop() {
-                onDrop();
-            },
-            hover(item: any, monitor: DropTargetMonitor) {
-                if (!dropRef.current) {
-                    return;
-                }
-
-                const dragIndex = item.index;
-                const hoverIndex = index;
-
-                if (dragIndex === hoverIndex) {
-                    return;
-                }
-
-                const hoverBoundingRect = dropRef.current.getBoundingClientRect();
-                const hoverMiddleY = (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2;
-                const clientOffset = monitor.getClientOffset() || { y: 1000 };
-                const hoverClientY = clientOffset.y - hoverBoundingRect.top;
-
-                if (dragIndex < hoverIndex && hoverClientY < hoverMiddleY) {
-                    return;
-                }
-
-                if (dragIndex > hoverIndex && hoverClientY > hoverMiddleY) {
-                    return;
-                }
-
-                onDrag(dragIndex, hoverIndex);
-
-                item.index = hoverIndex;
-            },
-        });
-
-        const [{ isDragging }, drag, preview] = useDrag({
-            type: DND_ITEM_TYPE,
-            item: { type: DND_ITEM_TYPE, index },
-            collect: (monitor) => ({
-                isDragging: monitor.isDragging(),
-            }),
-        });
-
-        dragging = isDragging;
-
-        preview(drop(dropRef));
-        drag(dragRef);
-    }
-
-    return (
-        <JRCConditionalWrapper
-            condition={draggable}
-            wrapper={(children) => (
-                <Tr ref={dropRef} dragging={dragging}>
-                    {draggable && (
-                        <DraggableTd ref={dragRef}>
-                            <JRCIconButton icon={'icon-fs-dw'} size="medium" />
-                            &nbsp;
-                        </DraggableTd>
-                    )}
-                    {children}
-                </Tr>
-            )}
-            wrapperFalse={(children) => <tr>{children}</tr>}>
-            <React.Fragment>{children}</React.Fragment>
-        </JRCConditionalWrapper>
-    );
-};

package/src/components/JRCList/JRCList.tsx

@@ -1,217 +0,0 @@
-import * as React from 'react';
-import { useTable, usePagination, useSortBy, UseSortByColumnProps, HeaderGroup, Column, Row, Cell } from 'react-table';
-import { FormattedMessage } from 'react-intl';
-import JRCPagination from '../JRCPagination/JRCPagination';
-import useDidMountEffect from '../../hooks/UseDidMountEffect';
-import JRCIcon from '../JRCIcon/JRCIcon';
-
-import {
-    Table,
-    DraggableTBody,
-    DraggableTr,
-    Thead,
-    TBody,
-    Th,
-    Tr,
-    Td,
-    LoadMore,
-    LoadMoreButton,
-} from './JRCList.styles';
-import type { Orders } from 'jamespot-user-api';
-
-/**
- * Props type for JRCList
- * @member columns default react-table column props
- * @member data default react-table data props
- * @member eventHandlers event handlers: onDrag, onSort and onPage. You Must rearrange the array of data when these events are dispatched
- * @member config config object. See the Type for use
- */
-export type JRCListProps<T extends Record<string, unknown>> = {
-    columns: Array<Column<T>>;
-    data: Array<T>;
-    eventHandlers?: {
-        onDrag?: (src: T, target: T, position: 'before' | 'after', records: Array<T>) => void;
-        onSort?: (orders: Orders) => void;
-        onPage?: (page: number) => void;
-    };
-    config: {
-        manualSortBy: boolean; // This props should be set to true if sorting is server-side made
-        draggable: boolean; // When set to true, the array elements MUST have a unique uri or type/id set attribute
-        pagination?: {
-            type?: string;
-            end?: boolean;
-            page: number;
-            perPage: number;
-            nbResults: number;
-        };
-    };
-};
-
-export const JRCList = <T extends Record<string, unknown>>(props: JRCListProps<T>) => {
-    const [loadMore, setLoadMore] = React.useState(1);
-
-    // Temporary record list used to show the real time order of the list while drag & drop
-    const [dndRecords, setDndRecords] = React.useState<Array<T>>([]);
-
-    const records = React.useMemo(() => (dndRecords.length ? dndRecords : props.data), [props.data, dndRecords]);
-    const columns = React.useMemo(() => props.columns.map((c) => ({ ...c, width: c.width || -1 })), [props.columns]);
-
-    const [dropIndex, setDropIndex] = React.useState(0);
-
-    const getRowId = React.useCallback((row, relativeIndex) => {
-        if (row.uri) {
-            return row.uri;
-        } else if (row.id && row.type) {
-            return `${row.type}/${row.id}`;
-        } else {
-            return relativeIndex;
-        }
-    }, []);
-
-    const tableInstance = useTable(
-        {
-            columns,
-            data: records,
-            manualSortBy: props.config.manualSortBy,
-            initialState: { pageIndex: 0 },
-            getRowId,
-        },
-        useSortBy,
-        usePagination,
-    );
-
-    const {
-        getTableProps,
-        getTableBodyProps,
-        headerGroups,
-        rows,
-        prepareRow,
-        state: { sortBy },
-    } = tableInstance;
-
-    useDidMountEffect(() => {
-        if (props.config.manualSortBy && props.eventHandlers && props.eventHandlers.onSort) {
-            props.eventHandlers.onSort(
-                sortBy.map((sortElement) => ({ name: sortElement.id, sort: sortElement.desc ? 'DESC' : 'ASC' })),
-            );
-        }
-    }, [sortBy]);
-
-    const onDrag = (dragIndex: number, dropIndex: number) => {
-        if (dragStartIndex === undefined) {
-            setDragStartIndex(dragIndex);
-        }
-        setDropIndex(dropIndex);
-
-        const dragRecord = records[dragIndex];
-
-        const newOrder = records.slice();
-        newOrder.splice(dragIndex, 1);
-        newOrder.splice(dropIndex, 0, dragRecord);
-
-        setDndRecords(newOrder);
-    };
-
-    const [dragStartIndex, setDragStartIndex] = React.useState<number | undefined>();
-
-    const onDrop = () => {
-        if (dragStartIndex === undefined) {
-            return;
-        }
-
-        const dragRecord = props.data[dragStartIndex];
-        const dropRecord = props.data[dropIndex];
-        const position = dropIndex - dragStartIndex < 0 ? 'before' : 'after';
-
-        if (props.eventHandlers && props.eventHandlers.onDrag) {
-            props.eventHandlers.onDrag(dragRecord, dropRecord, position, dndRecords);
-        }
-
-        setDndRecords([]);
-        setDragStartIndex(undefined);
-    };
-
-    return (
-        <React.Fragment>
-            <Table {...getTableProps()}>
-                <Thead>
-                    {headerGroups.map((headerGroup) => (
-                        <Tr {...headerGroup.getHeaderGroupProps()}>
-                            {props.config.draggable && <Th></Th>}
-                            {headerGroup.headers.map((column: HeaderGroup<T> & UseSortByColumnProps<T>) => (
-                                <Th {...column.getHeaderProps(column.getSortByToggleProps())} width={column.width}>
-                                    {column.render('Header')}
-                                    {column.canSort ? (
-                                        column.isSorted ? (
-                                            column.isSortedDesc ? (
-                                                <JRCIcon name="icon-sort-desc" size={12} color="grey4" />
-                                            ) : (
-                                                <JRCIcon name="icon-sort-asc" size={12} color="grey4" />
-                                            )
-                                        ) : (
-                                            <JRCIcon name="icon-sort" size={12} color="grey2" />
-                                        )
-                                    ) : (
-                                        ''
-                                    )}
-                                </Th>
-                            ))}
-                        </Tr>
-                    ))}
-                </Thead>
-                <TBody {...getTableBodyProps()}>
-                    <DraggableTBody draggable={props.config.draggable}>
-                        {rows.map((row: Row<T>, index: number): any => {
-                            if (prepareRow(row) !== undefined) {
-                                prepareRow(row);
-                            }
-                            return (
-                                <DraggableTr
-                                    index={index}
-                                    onDrag={onDrag}
-                                    onDrop={onDrop}
-                                    draggable={props.config.draggable}
-                                    {...row.getRowProps()}>
-                                    {row.cells.map((cell: Cell<T>) => {
-                                        return (
-                                            <Td {...cell.getCellProps()} width={cell.column.width}>
-                                                {cell.render('Cell')}
-                                            </Td>
-                                        );
-                                    })}
-                                </DraggableTr>
-                            );
-                        })}
-                    </DraggableTBody>
-                </TBody>
-            </Table>
-
-            {props.config.pagination &&
-                ((props.config.pagination.type && props.config.pagination.type) === 'loadMore' ? (
-                    <>
-                        {!props.config.pagination.end && (
-                            <LoadMore>
-                                <LoadMoreButton
-                                    onClick={() => {
-                                        props.eventHandlers &&
-                                            props.eventHandlers.onPage &&
-                                            props.eventHandlers.onPage(loadMore + 1);
-                                        setLoadMore(loadMore + 1);
-                                    }}>
-                                    <FormattedMessage id="GROUP_more" />
-                                </LoadMoreButton>
-                            </LoadMore>
-                        )}
-                    </>
-                ) : (
-                    <JRCPagination
-                        activePage={props.config.pagination.page}
-                        nbrOfPage={Math.ceil(props.config.pagination.nbResults / props.config.pagination.perPage)}
-                        clickHandler={(page) => {
-                            props.eventHandlers && props.eventHandlers.onPage && props.eventHandlers.onPage(page);
-                        }}
-                    />
-                ))}
-        </React.Fragment>
-    );
-};

package/src/components/JRCList/JRCListMockData.stories.tsx

@@ -1,105 +0,0 @@
-import * as React from 'react';
-import { JRCList, JRCListProps } from './JRCList';
-import { JRCIconButton } from '../JRCIconButton/JRCIconButton';
-import jamespot from 'jamespot-user-api';
-import { Meta, Story } from '@storybook/react';
-import type { Orders } from 'jamespot-user-api';
-
-export default {
-    title: 'JRCList',
-    component: JRCList,
-} as Meta;
-type MyData = {
-    mainType: number;
-    bookmarkLabel: number;
-};
-
-const Template: Story<never> = (/*args: JRCListProps<MyData>*/) => {
-    // let data: Pick<JRCListProps<MyData>, "data">['data'] = [];
-    const [data, setData] = React.useState([] as Pick<JRCListProps<MyData>, 'data'>['data']);
-    const [config, setConfig] = React.useState({
-        manualSortBy: true,
-        draggable: false,
-        pagination: {
-            page: 1,
-            perPage: 10,
-            nbResults: 10,
-        },
-    });
-    const [orders, setOrders] = React.useState<Orders>([]);
-
-    const columns: Pick<JRCListProps<MyData>, 'columns'>['columns'] = [
-        {
-            Header: 'Type de contenu',
-            accessor: 'mainType',
-            disableSortBy: true,
-        },
-        {
-            Header: 'Titre',
-            accessor: (originalRow) => originalRow.bookmarkLabel || 'Favoris sans titre',
-        },
-        {
-            Header: 'Actions',
-            accessor: (originalRow, index) => {
-                return (
-                    <>
-                        <JRCIconButton
-                            icon={'icon-fs-dropbox'}
-                            onClick={() => alert(`Custom action clicked on DROPBOX icon on row ${index}.`)}
-                        />
-                        <JRCIconButton
-                            icon={'icon-fs-facebook'}
-                            onClick={() => alert(`Custom action clicked on FACEBOOK icon on row ${index}.`)}
-                        />
-                    </>
-                );
-            },
-            disableSortBy: true,
-        },
-    ];
-
-    const eventHandlers: Pick<JRCListProps<MyData>, 'eventHandlers'>['eventHandlers'] = {
-        onDrag: (/*src, target*/) => {
-            // call modify bookmark order
-            // do not reload bookmarks
-        },
-        onSort: (sortBy) => {
-            setOrders(sortBy);
-        },
-        onPage: (page) => {
-            setConfig({
-                ...config,
-                pagination: {
-                    ...config.pagination,
-                    page,
-                },
-            });
-        },
-    };
-
-    React.useEffect(() => {
-        const args: any = {
-            page: config.pagination.page,
-            limit: config.pagination.perPage,
-            orders,
-        };
-        jamespot.shortcut.getList(args).then((res: any) => {
-            setData(res.data);
-            setConfig({
-                ...config,
-                pagination: {
-                    ...config.pagination,
-                    nbResults: res.cnt || 0,
-                },
-            });
-        });
-    }, [config.pagination.page, orders]);
-
-    return (
-        <>
-            <JRCList data={data} columns={columns} eventHandlers={eventHandlers} config={config} />
-        </>
-    );
-};
-
-export const WithData = Template.bind({});

package/src/components/JRCLoader/JRCLoader.stories.tsx

@@ -1,17 +0,0 @@
-import * as React from 'react';
-import JRCLoader, { JRCLoaderProps } from './JRCLoader';
-import { Meta, Story } from '@storybook/react';
-
-export default {
-    title: 'JRCLoader',
-    component: JRCLoader,
-} as Meta;
-
-const Template: Story<JRCLoaderProps> = (args: JRCLoaderProps) => <JRCLoader {...args} />;
-
-export const Spinner = Template.bind({});
-
-export const Skeleton = Template.bind({});
-Skeleton.args = {
-    variant: 'skeleton',
-};

package/src/components/JRCLoader/JRCLoader.tsx

@@ -1,53 +0,0 @@
-import * as React from 'react';
-import styled from 'styled-components';
-import { Colors } from '../../styles/theme';
-import { Skeleton } from './JRCSkeleton';
-
-/**
- * Props type for JRCLoader
- * @member color string based on theme.tsx colors
- * @member size size of the loader, default is s, 20px width
- */
-
-interface JRCSpinnerProps {
-    color?: Colors;
-    size?: 's' | 'm' | 'l';
-}
-interface JRCLoaderVariantProps {
-    variant?: 'spinner' | 'skeleton';
-}
-export type JRCLoaderProps = JRCLoaderVariantProps & JRCSpinnerProps;
-
-const sizeMap = {
-    s: 20,
-    m: 40,
-    l: 60,
-};
-
-const Loader = styled.div<Required<JRCSpinnerProps>>`
-    border: ${(props) => `${sizeMap[props.size] / 10}px solid transparent`};
-    border-top: ${(props) => `${sizeMap[props.size] / 10}px solid ${props.theme.color[props.color]}`};
-    border-radius: 50%;
-    margin: auto;
-    width: ${(props) => `${sizeMap[props.size]}px`};
-    height: ${(props) => `${sizeMap[props.size]}px`};
-    box-sizing: border-box;
-    animation: spin 2s linear infinite;
-    @keyframes spin {
-        0% {
-            transform: rotate(0deg);
-        }
-        100% {
-            transform: rotate(360deg);
-        }
-    }
-`;
-
-const JRCLoader = ({ color = 'primary', size = 's', variant = 'spinner' }: JRCLoaderProps) => {
-    if (variant === 'skeleton') {
-        return <Skeleton />;
-    }
-    return <Loader color={color} size={size} />;
-};
-
-export default JRCLoader;

package/src/components/JRCLoader/JRCSkeleton.tsx

@@ -1,77 +0,0 @@
-import * as React from 'react';
-import styled from 'styled-components';
-
-type SSkeletonLineProps = {
-    width?: string;
-    height?: string;
-    translucent?: boolean;
-};
-
-const SSkeletonLine = styled.div<SSkeletonLineProps>`
-    display: inline-block;
-    width: ${(props) => props.width || `20em`};
-    height: ${(props) => props.height || `0.5em`};
-    border-radius: 5px;
-    margin: 5px;
-    background: linear-gradient(-90deg, #f0f0f0 0%, #f8f8f8 50%, #f0f0f0 100%);
-    background-size: 400% 400%;
-    animation: pulse 1.2s ease-in-out infinite;
-    @keyframes pulse {
-        0% {
-            background-position: 0% 0%;
-        }
-        100% {
-            background-position: -135% 0%;
-        }
-    }
-`;
-const SkeletonRowContainer = styled.div`
-    display: flex;
-    flex-direction: row;
-    flex-wrap: nowrap;
-    justify-content: flex-start;
-    align-items: flex-start;
-    flex: 1 100%;
-    overflow: hidden;
-    border-radius: 6px;
-    border: 1px solid ${(props) => props.theme.color.grey1};
-    margin: 8px 32px;
-    padding: 22px;
-    cursor: pointer;
-    &:hover {
-        border: 1px solid ${(props) => props.theme.color.lavender};
-        background: ${(props) => props.theme.color.grey0};
-    }
-`;
-
-const SkeletonLines = styled.div`
-    display: flex;
-    flex: 4;
-    flex-direction: column;
-    flex-wrap: wrap;
-    justify-content: flex-start;
-    align-items: flex-start;
-    margin: 2px 8px;
-`;
-
-const SkeletonPart = () => (
-    <SkeletonRowContainer data-theme="skeleton">
-        <SkeletonLines>
-            <SSkeletonLine width="50%" />
-            <SSkeletonLine width="30%" />
-            <br />
-            <SSkeletonLine width="50%" />
-            <SSkeletonLine width="30%" />
-            <SSkeletonLine width="10%" />
-        </SkeletonLines>
-    </SkeletonRowContainer>
-);
-
-export const Skeleton = () => (
-    <>
-        <SkeletonPart />
-        <SkeletonPart />
-        <SkeletonPart />
-        <SkeletonPart />
-    </>
-);