jamespot-react-components 1.0.0

package/src/components/JRCIcon/JRCIcon.tsx

@@ -0,0 +1,51 @@
+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

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

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

@@ -0,0 +1,33 @@
+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

@@ -0,0 +1,100 @@
+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}
+            // FIXME TYPESCRIPT-STRICT
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+            // @ts-ignore
+            wrapper={(children) => <JRCTooltip {...props.tooltip}>{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

@@ -0,0 +1,18 @@
+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

@@ -0,0 +1,13 @@
+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

@@ -0,0 +1,58 @@
+import * as React from 'react';
+
+import styled 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) => {
+    return (
+        <Img
+            src={formatImgUrl(props)}
+            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

@@ -0,0 +1,108 @@
+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): 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 * 2}x${arg.height * 2}`;
+    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 + 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) {
+    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)}/${getUri(arg)}.${getFormat(arg)}${getTimestamp(arg)}`;
+}

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

@@ -0,0 +1,74 @@
+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',
+        );
+    });
+
+    test('getFrom', () => {
+        expect(getFrom({})).toStrictEqual(undefined);
+        expect(getFrom({ from: 'imagestatic' })).toStrictEqual('imagestatic/');
+        expect(getFrom({ from: 'imagestatic/' })).toStrictEqual('imagestatic/');
+        expect(getFrom({ from: '/imagestatic/' })).toStrictEqual('imagestatic/');
+    });
+
+    test('getSize', () => {
+        expect(getSize({ size: '32' })).toStrictEqual('32');
+        expect(getSize({ width: 32, height: 32 })).toStrictEqual('64x64');
+    });
+
+    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

@@ -0,0 +1,98 @@
+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;