jamespot-react-components 1.0.16 → 1.0.65

package/src/components/JRCIcon/JRCIcon.tsx

@@ -1,51 +0,0 @@
-import * as React from 'react';
-import styled from 'styled-components';
-import { Colors, Shades, ThemeType } from 'styles/theme';
-
-/**
- * Props type for JRCIcon
- * @property name string: Name of the icon (required)
- * @property color, string, optional: icon color, one of the theme color or a hex, rgb color, default to primary
- * @property variant, string, optional: variant of the icon
-
- * @property size, optional: in px - The icon size, default set to 20px
- * @property className, optional, className of the <i /> tag
- */
-export interface JRCIconProps {
-    /** Name of the icon (required) */
-    name: string;
-    /** Color */
-    color?: string;
-    /** background color */
-    variant?: 'default' | 'circle' | 'square';
-    /** Defined the icon's dimensions */
-    size?: number;
-    className?: string;
-}
-
-function getColor(theme: ThemeType, color: string) {
-    return color in theme.color ? theme.color[color as Colors | Shades] : color;
-}
-
-const Icon = styled.i<Required<JRCIconProps>>`
-    flex-shrink: 0;
-    text-align: center;
-    margin: 0 0.2em;
-
-    font-size: ${(props) => (props.variant === 'default' ? `${props.size}px` : `calc(0.6 * ${props.size}px)`)};
-    min-width: ${(props) => `${props.size}px`};
-    line-height: ${(props) => `${props.size}px`};
-    ${(props) =>
-        ['circle', 'square'].includes(props.variant) && `background-color: ${getColor(props.theme, props.color)}`};
-    ${(props) => (props.variant === 'circle' ? `border-radius: 50%` : `border-radius: 20%`)};
-    &:before {
-        transition: color 0.1s;
-        color: ${(props) => (props.variant === 'default' ? getColor(props.theme, props.color) : 'white')};
-    }
-`;
-
-const JRCIcon = ({ color = 'primary', variant = 'default', name, size = 20, className }: JRCIconProps) => (
-    <Icon className={`react-icon ${name} ${className || ''}`} name={name} size={size} color={color} variant={variant} />
-);
-
-export default JRCIcon;

package/src/components/JRCIcon/fonts.d.ts

@@ -1,5 +0,0 @@
-declare module '*.eot';
-declare module '*.woff';
-declare module '*.woff2';
-declare module '*.ttf';
-declare module '*.svg';

package/src/components/JRCIconButton/JRCIconButton.stories.tsx

@@ -1,33 +0,0 @@
-import * as React from 'react';
-import { JRCIconButton, JRCIconButtonProps } from './JRCIconButton';
-import { Meta, Story } from '@storybook/react';
-
-export default {
-    title: 'JRCIconButton',
-    component: JRCIconButton,
-} as Meta;
-
-const Template: Story<JRCIconButtonProps> = (args) => {
-    return (
-        <>
-            <JRCIconButton {...args} />
-            <JRCIconButton {...args} />
-        </>
-    );
-};
-
-export const Primary = Template.bind({});
-Primary.args = {
-    icon: 'icon-navicon',
-    size: 'small',
-    value: 'toto',
-    disabled: false,
-    tooltip: {
-        description: 'demo',
-        button: {
-            children: 'Ce bouton est un exemple inutil',
-            dataCy: 'bouton-tooltip-go-toto-page',
-        },
-    },
-    dataCy: 'navigation-to-toto-page',
-};

package/src/components/JRCIconButton/JRCIconButton.tsx

@@ -1,97 +0,0 @@
-import * as React from 'react';
-import JRCIcon from '../JRCIcon/JRCIcon';
-import styled from 'styled-components';
-import { DashedFocusBorder } from 'components/Common/DashedFocusBorder';
-import { Colors, Shades } from 'styles/theme';
-import { JRCTooltip, JRCTooltipProps } from '../JRCTooltip/JRCTooltip';
-import { JRCConditionalWrapper } from '../Common/JRCConditionalWrapper';
-import { DataCy } from '../../types/dataAttributes';
-
-const Button = styled.button.attrs((props: { size: 'small' | 'medium' }) => ({
-    ...props,
-    dashedBorderRadius: config[props.size].focusBorderRadius,
-}))<JRCIconButtonProps>`
-    position: relative;
-    display: inline-flex;
-    justify-content: center;
-    align-items: center;
-    width: ${(props) => config[props.size].size};
-    height: ${(props) => config[props.size].size};
-    border-radius: ${(props) => config[props.size].borderRadius};
-    cursor: ${(props) => (props.disabled ? 'default' : 'pointer')};
-    flex-shrink: 0;
-    :hover,
-    :focus-visible {
-        ${(props) =>
-            !props.disabled &&
-            `background-color: ${props.color === 'white' ? props.theme.color.black15 : props.theme.color.grey0}`};
-    }
-    ${DashedFocusBorder};
-`;
-
-const config = {
-    small: {
-        size: '24px',
-        borderRadius: '4px',
-        iconSize: 16,
-        focusBorderRadius: '3px',
-    },
-    medium: {
-        size: '40px',
-        borderRadius: '8px',
-        iconSize: 20,
-        focusBorderRadius: '6px',
-    },
-};
-
-/**
- * IconButton props
- * @member icon icon of the button
- * @member onClick on click callback
- * @member name name (for form only)
- * @member value value (for form only)
- * @member disabled disable the button
- * @member size size of the button, default value, set to m
- * @member tooltip tooltip props
- * @member variant?:  can be 'circle' | 'square' ;
-
- */
-export type JRCIconButtonProps = DataCy & {
-    icon: string;
-    size?: 'small' | 'medium';
-    onClick?: (event?: React.MouseEvent) => void;
-    name?: string;
-    value?: string;
-    disabled?: boolean;
-    type?: 'submit' | 'reset' | 'button';
-    color?: Colors | Shades | 'inherit';
-    tooltip?: Omit<JRCTooltipProps, 'children'>;
-    variant?: 'circle' | 'square';
-};
-
-const defaultProps = {
-    // eslint-disable-next-line @typescript-eslint/no-empty-function
-    onClick: () => {},
-    type: 'button',
-    variant: 'square',
-    size: 'medium',
-};
-
-const JRCIconButton = (props: JRCIconButtonProps & typeof defaultProps) => {
-    return (
-        <JRCConditionalWrapper
-            condition={!!props.tooltip}
-            wrapper={(children) => <JRCTooltip {...(props.tooltip as JRCTooltipProps)}>{children}</JRCTooltip>}>
-            <Button {...props} data-cy={props.dataCy} size={props.size}>
-                <JRCIcon
-                    name={props.icon}
-                    size={config[props.size].iconSize}
-                    color={props.color ? props.color : props.disabled ? 'grey1' : 'grey3'}
-                />
-            </Button>
-        </JRCConditionalWrapper>
-    );
-};
-
-JRCIconButton.defaultProps = defaultProps;
-export { JRCIconButton };

package/src/components/JRCImg/JRCImg.stories.tsx

@@ -1,18 +0,0 @@
-import * as React from 'react';
-import JRCImg, { JRCImgProps } from './JRCImg';
-import { Meta, Story } from '@storybook/react';
-
-export default {
-    title: 'JRCImg',
-    component: JRCImg,
-} as Meta;
-
-const Template: Story<JRCImgProps> = (args) => <JRCImg {...args} />;
-
-export const Primary = Template.bind({});
-Primary.args = {
-    size: 'fitx700',
-    type: 'fileArticle',
-    recordId: '245',
-    alt: 'Texte alternatif',
-};

package/src/components/JRCImg/JRCImg.test.tsx

@@ -1,13 +0,0 @@
-import * as React from 'react';
-import { renderWithWrapper } from 'utils/test-utils';
-
-import JRCImg from './JRCImg';
-
-describe('JRCImg', () => {
-    test('medium avatar to download an img twice the container size', () => {
-        const { container } = renderWithWrapper(
-            <JRCImg from="imagecache" size="fitx700" type="fileArticle" recordId="245" alt="image" />,
-        );
-        expect(container.firstChild).toHaveAttribute('src', '/imagecache/fitx700/fileArticle/245.png');
-    });
-});

package/src/components/JRCImg/JRCImg.tsx

@@ -1,60 +0,0 @@
-import * as React from 'react';
-
-import styled, { ThemeContext } from 'styled-components';
-import { formatImgUrl, ImgUrlProps } from './url.util';
-
-/**
- * @see ImgUrlProps
- * @property loading - img loading attribute - default is lazy
- * @property alt - img alt attributes
- *
- * @property type - type of the record image (ex: user, fileArticle, spot, diffgroup, etc.)
- * @property recordId - id of the record
- * @property uri - uri of the record
- *
- * @property width - Width of the <img /> tag. Also used to compute the image size downloaded
- * @property height - Height of the <img /> tag. Also used to compute the image size downloaded
- * @property size - if the url is not provided, used to download the image at this size.
- *                  If not provided, the size will be computed from width and height.
- *                  /!\ This property should not be used unless the image should not be displayed
- *                  at retina resolution for any reason.
- *
- * @property format - format of the image (ex: png, jpeg, etc.) - default is png
- *
- * @property url - img url used in place of width, height, size, uri, recordId and type to download an image
- *
- * @property timestamp - date used to force an image to be downloaded from the server instead
- *                       of from the cache. The modified timestamp of the object being displayed
- *                       should be passed
- *
- * @property className - className of the <img /> tag
- */
-export type JRCImgProps = ImgUrlProps & {
-    loading?: 'eager' | 'lazy';
-    alt: string;
-    className?: string;
-};
-
-const Img = styled.img`
-    box-sizing: border-box;
-    flex-shrink: 0;
-    border: 0;
-    line-height: ${(props) => props.height}px;
-`;
-
-const JRCImg = (props: JRCImgProps) => {
-    const themeContext = React.useContext(ThemeContext);
-
-    return (
-        <Img
-            src={formatImgUrl(props, themeContext.dpr)}
-            loading={props.loading || 'lazy'}
-            alt={props.alt}
-            width={props.width}
-            height={props.height}
-            className={props.className}
-        />
-    );
-};
-
-export default JRCImg;

package/src/components/JRCImg/url.util.ts

@@ -1,109 +0,0 @@
-import { UriOrTypeId } from 'components/Form/Common/types';
-import { removeIfStartsWith, suffixIfDoesNotExist } from '../../utils/utils.string';
-
-/**
- * @see JRCImgProps
- */
-type WidthHeight = {
-    width?: number;
-    height?: number;
-};
-
-/**
- * @see JRCImgProps
- */
-type Size = {
-    size?: string;
-};
-
-/**
- * @see JRCImgProps
- */
-type Format = { format?: string };
-
-/**
- * @see JRCImgProps
- */
-type Timestamp = { timestamp?: string | number };
-
-/**
- * @see JRCImgProps
- */
-export type ImgUrlProps = {
-    url?: string;
-
-    size?: string;
-    width?: number;
-    height?: number;
-
-    from?: string;
-    uri?: string;
-    recordId?: string | number;
-    type?: string;
-    format?: string;
-
-    timestamp?: string | number;
-};
-
-export function getFrom(arg: Pick<ImgUrlProps, 'from'>) {
-    return removeIfStartsWith(suffixIfDoesNotExist(arg.from, '/'), '/') || '';
-}
-
-export function getTimestamp(arg: Timestamp) {
-    return arg.timestamp ? `?_=${arg.timestamp}` : '';
-}
-
-export function getUri(arg: UriOrTypeId): string {
-    if ('uri' in arg && arg.uri) return arg.uri;
-    return `${arg.type}/${arg.recordId}`;
-}
-
-export function getSize(arg: Size & WidthHeight, dpr = 2): string {
-    if ('size' in arg && arg.size) return arg.size;
-    else if ('width' in arg && arg.width && 'height' in arg && arg.height)
-        return `${arg.width * dpr}x${arg.height * dpr}`;
-    return '';
-}
-
-export function getFormat(arg: Format) {
-    return arg.format || 'png';
-}
-
-export function getUrl(url: string): URL | undefined {
-    try {
-        return new URL(url);
-    } catch (e) {
-        /* silent exception */
-    }
-
-    try {
-        return new URL(window.location.origin + '/' + removeIfStartsWith(url, '/'));
-    } catch (e) {
-        /* silent exception */
-    }
-}
-
-/**
- * Format an img url
- * If url arg is provided, it is used, in addition with an optional timestamp
- * If not parsable or not passed, one should provide:
- *   - optional from
- *   - size in either size or width/height argument.
- *     If width & height are provided, the downloaded image take car of the screen resolution
- *   - uri or type/recordId
- *   - optional format, default png
- *   - optional timestamp
- *   The final url is {from}/{size}/{uri}.{format}?_={timestamp}
- * @param arg
- */
-export function formatImgUrl(arg: ImgUrlProps, dpr = 2) {
-    if ('url' in arg && arg.url) {
-        const url = getUrl(arg.url);
-        if (url) {
-            if ('timestamp' in arg && arg.timestamp && !url.searchParams.has('_'))
-                url.searchParams.append('_', arg.timestamp.toString());
-            return url.toString();
-        }
-    }
-    return `/${getFrom(arg)}${getSize(arg, dpr)}/${getUri(arg)}.${getFormat(arg)}${getTimestamp(arg)}`;
-}

package/src/components/JRCImg/url.utils.test.ts

@@ -1,80 +0,0 @@
-import { formatImgUrl, getFormat, getFrom, getSize, getTimestamp, getUri } from './url.util';
-
-describe('Test utils.url', () => {
-    beforeAll(() => {
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-ignore
-        delete window.location;
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-ignore
-        window.location = { origin: 'https://website.com' };
-    });
-
-    test('formatImgUrl url', () => {
-        expect(formatImgUrl({ url: '/url/random' })).toStrictEqual('https://website.com/url/random');
-        expect(formatImgUrl({ url: '/url/random?_=12345' })).toStrictEqual('https://website.com/url/random?_=12345');
-        expect(formatImgUrl({ url: '/url/random', timestamp: 'timestamp' })).toStrictEqual(
-            'https://website.com/url/random?_=timestamp',
-        );
-        expect(formatImgUrl({ url: '/url/random', timestamp: 123 })).toStrictEqual(
-            'https://website.com/url/random?_=123',
-        );
-        expect(formatImgUrl({ url: '/url/random?_=12345', timestamp: 123 })).toStrictEqual(
-            'https://website.com/url/random?_=12345',
-        );
-        expect(formatImgUrl({ url: 'https://otherwebsite.com/url/random?_=12345', timestamp: 123 })).toStrictEqual(
-            'https://otherwebsite.com/url/random?_=12345',
-        );
-        expect(formatImgUrl({ url: 'img/react/bookmark-noresult.png', height: 450 })).toStrictEqual(
-            'https://website.com/img/react/bookmark-noresult.png',
-        );
-    });
-
-    test('getFrom', () => {
-        expect(getFrom({})).toStrictEqual('');
-        expect(getFrom({ from: 'imagestatic' })).toStrictEqual('imagestatic/');
-        expect(getFrom({ from: 'imagestatic/' })).toStrictEqual('imagestatic/');
-        expect(getFrom({ from: '/imagestatic/' })).toStrictEqual('imagestatic/');
-        expect(getFrom({ from: undefined })).toStrictEqual('');
-    });
-
-    test('getSize', () => {
-        expect(getSize({ size: '32' })).toStrictEqual('32');
-        expect(getSize({ width: 32, height: 32 })).toStrictEqual('64x64');
-        expect(getSize({ width: 32, height: 32 }, 3)).toStrictEqual('96x96');
-    });
-
-    test('getUri', () => {
-        expect(getUri({ uri: 'article/32' })).toStrictEqual('article/32');
-        expect(getUri({ type: 'article', recordId: 32 })).toStrictEqual('article/32');
-        expect(getUri({ type: 'article', recordId: '32' })).toStrictEqual('article/32');
-    });
-
-    test('getFormat', () => {
-        expect(getFormat({})).toStrictEqual('png');
-        expect(getFormat({ format: 'odt' })).toStrictEqual('odt');
-    });
-
-    test('getTimestamp', () => {
-        expect(getTimestamp({})).toStrictEqual('');
-        expect(getTimestamp({ timestamp: 32 })).toStrictEqual('?_=32');
-    });
-
-    test('formatImgUrl other props', () => {
-        expect(formatImgUrl({ from: 'imagestatic', size: '32', uri: 'article/32' })).toStrictEqual(
-            '/imagestatic/32/article/32.png',
-        );
-
-        expect(
-            formatImgUrl({
-                from: '/imagestatic/',
-                width: 32,
-                height: 64,
-                type: 'article',
-                recordId: 74,
-                format: 'odt',
-                timestamp: '1234',
-            }),
-        ).toStrictEqual('/imagestatic/64x128/article/74.odt?_=1234');
-    });
-});

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

@@ -1,98 +0,0 @@
-import * as React from 'react';
-import { JRCList, JRCListProps } from './JRCList';
-import { JRCIconButton } from '../JRCIconButton/JRCIconButton';
-import { Meta, Story } from '@storybook/react';
-import { action } from '@storybook/addon-actions';
-import type { Orders } from 'jamespot-user-api';
-import { Column } from 'react-table';
-
-export default {
-    title: 'JRCList',
-    component: JRCList,
-} as Meta;
-
-const Template: Story<Pick<JRCListProps<MyData>, 'config'>> = (args) => {
-    const [data, setData] = React.useState<Array<MyData>>([
-        { uri: 'article/3', col1: 3, col2: 5, col3: 2, col4: 7 },
-        { uri: 'article/4', col1: 4, col2: 6, col3: 2, col4: 7 },
-        { uri: 'article/7', col1: 7, col2: 9, col3: 2, col4: 7 },
-    ]);
-
-    const columns: Array<Column<MyData>> = [
-        {
-            Header: 'Column 1',
-            accessor: 'col1',
-            width: 500,
-        },
-        {
-            Header: 'Column 2',
-            accessor: 'col2',
-        },
-        {
-            Header: 'Column 3',
-            accessor: 'col3',
-        },
-        {
-            Header: 'Column 4',
-            accessor: 'col4',
-        },
-        {
-            Header: 'Actions',
-            accessor: (originalRow: MyData, index: number) => {
-                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 = {
-        onSort: (sortBy: Orders) => {
-            if (sortBy && sortBy.length) {
-                alert(`column ${sortBy[0].name} has been sorted ${sortBy[0].sort}.`);
-            } else {
-                alert(`columns returned in unsorted state.`);
-            }
-        },
-        onPage: (page: number) => alert(`switch to page ${page}.`),
-        onDrag: (src: MyData, target: MyData, position: 'before' | 'after', records: Array<MyData>) => {
-            action('drag event callback');
-            setData(records);
-        },
-    };
-
-    return <JRCList {...args} data={data} columns={columns} eventHandlers={eventHandlers} />;
-};
-
-type MyData = {
-    uri: string;
-    col1: number;
-    col2: number;
-    col3: number;
-    col4: number;
-};
-
-export const Primary = Template.bind({});
-const args: Pick<JRCListProps<MyData>, 'config'> = {
-    config: {
-        manualSortBy: true,
-        draggable: true,
-        pagination: {
-            page: 20,
-            perPage: 10,
-            nbResults: 1000,
-        },
-    },
-};
-
-Primary.args = args;