jamespot-react-components 1.0.0

package/src/components/JRCDate/JRCDate.stories.tsx

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { JRCDate, JRCDateProps } from './JRCDate';
+export default { title: 'JRCDate', component: JRCDate };
+import { Story } from '@storybook/react';
+
+const Template: Story<JRCDateProps> = (args) => <JRCDate {...args}></JRCDate>;
+
+export const Default = Template.bind({});
+Default.args = {
+    date: '2021-11-08 16:04:13',
+};

package/src/components/JRCDate/JRCDate.tsx

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import JRCTooltip from 'components/JRCTooltip/JRCTooltip';
+import { useIntl } from 'react-intl';
+import { extractDate } from 'utils/utils.date';
+
+export interface JRCDateProps {
+    date?: string;
+    useHumanDisplay?: boolean;
+}
+
+export const JRCDate = (props: JRCDateProps) => {
+    const intl = useIntl();
+    const dateJs = new Date();
+
+    const date: string = props.date ? props.date : '';
+
+    const extract = extractDate(date);
+    const displayDate =
+        extract.date.toString().padStart(2, '0') + '/' + extract.month.toString().padStart(2, '0') + '/' + extract.year;
+
+    let displayHumanDate = displayDate;
+
+    if (extract.date === dateJs.getDate() && props.useHumanDisplay) {
+        displayHumanDate = intl.formatMessage({ id: 'GLOBAL_Today' });
+    }
+
+    if (extract.date === dateJs.getDate() - 1 && props.useHumanDisplay) {
+        displayHumanDate = intl.formatMessage({ id: 'GLOBAL_Yesterday' });
+    }
+
+    return <JRCTooltip description={displayDate} position="top" children={displayHumanDate}></JRCTooltip>;
+};

package/src/components/JRCDropDown/JRCDropDown.stories.tsx

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { JRCDropDown, JRCDropDownProps } from './JRCDropDown';
+import { Meta, Story } from '@storybook/react';
+
+export default {
+    title: 'JRCDropDown',
+    component: JRCDropDown,
+} as Meta;
+
+const Template: Story<JRCDropDownProps> = (args) => <JRCDropDown {...args} />;
+export const Simple = Template.bind({});
+Simple.args = {
+    trigger: 'click me',
+    dropdown: <>Hello there</>,
+    align: 'left',
+};

package/src/components/JRCDropDown/JRCDropDown.tsx

@@ -0,0 +1,75 @@
+import * as React from 'react';
+import styled from 'styled-components';
+import { JRCCard } from '../JRCCard/JRCCard';
+
+export interface JRCDropDownProps {
+    trigger: React.ReactNode;
+    dropdown: React.ReactNode;
+    align?: 'left' | 'right';
+}
+
+const Wrapper = styled.span`
+    position: relative;
+`;
+
+const DropdownWrapper = styled(JRCCard)<{ align?: 'left' | 'right' }>`
+    position: absolute;
+    margin: 8px 0 0 0;
+    ${(props) => props.align === 'right' && 'right: 0'};
+    width: max-content;
+`;
+
+type MouseEvents = 'click' | 'mousedown' | 'mouseup';
+type TouchEvents = 'touchstart' | 'touchend';
+
+interface ClickAwayListenerProps extends React.HTMLAttributes<HTMLElement> {
+    onClickAway: (event: MouseEvent | TouchEvent) => void;
+    mouseEvent?: MouseEvents;
+    touchEvent?: TouchEvents;
+    as?: React.ElementType;
+}
+const ClickAwayListener = ({
+    as = 'div',
+    onClickAway,
+    mouseEvent = 'click',
+    touchEvent = 'touchend',
+    ...props
+}: ClickAwayListenerProps) => {
+    const node = React.useRef<HTMLElement>(null);
+    React.useEffect(() => {
+        const handleEvents = (event: MouseEvent | TouchEvent): void => {
+            if (node.current && node.current.contains(event.target as Node)) {
+                return;
+            }
+            onClickAway(event);
+        };
+        document.addEventListener(mouseEvent, handleEvents);
+        document.addEventListener(touchEvent, handleEvents);
+        return () => {
+            document.removeEventListener(mouseEvent, handleEvents);
+            document.removeEventListener(touchEvent, handleEvents);
+        };
+    }, [mouseEvent, onClickAway, touchEvent]);
+
+    return React.createElement(as, { ref: node, ...props });
+};
+
+export const JRCDropDown = ({ trigger, dropdown, align }: JRCDropDownProps) => {
+    const [isOpen, setIsOpen] = React.useState(false);
+
+    const handleMenuClick = () => {
+        setIsOpen(!isOpen);
+    };
+    const handleClickAway = () => {
+        setIsOpen(false);
+    };
+
+    return (
+        <ClickAwayListener onClickAway={handleClickAway}>
+            <Wrapper>
+                <span onClick={handleMenuClick}>{trigger}</span>
+                {isOpen && <DropdownWrapper align={align}>{dropdown}</DropdownWrapper>}
+            </Wrapper>
+        </ClickAwayListener>
+    );
+};

package/src/components/JRCFileOpen/JRCFileOpen.tsx

@@ -0,0 +1,195 @@
+import React, { useState, useEffect } from 'react';
+import JRCModal, { JRCModalProps } from 'components/JRCModal/JRCModal';
+import JRCImg from 'components/JRCImg/JRCImg';
+import { useIntl } from 'react-intl';
+import styled from 'styled-components';
+import { useForm, useWatch } from 'react-hook-form';
+
+import { JRCInputCheckbox } from 'components/Form/Input/JRCInputCheckbox/JRCInputCheckbox';
+
+const JRCFileFrame = ({ src }: { src: string }) => {
+    return <iframe style={{ width: '100%', display: 'flex', flex: 1, height: '100%' }} src={src}></iframe>;
+};
+
+const JRCFileUnknown = () => {
+    const intl = useIntl();
+    return <>{intl.formatMessage({ id: 'GLOBAL_Unsuported_File_Format' })}</>;
+};
+
+const getFileExtension = (file: any) => {
+    const mimtype = file.mimetype.toLowerCase();
+    switch (mimtype) {
+        default:
+            return file._extend && file._extend.fileInfo ? file._extend.fileInfo.extension : 'na';
+        case 'image/jpg':
+        case 'image/jpeg':
+        case 'image/png':
+        case 'image/gif':
+            return 'image';
+    }
+};
+
+const Form = styled.div`
+    & > fieldset {
+        margin: 0px;
+    }
+    label {
+        margin: 0px;
+    }
+    display: flex;
+    justify-content: center;
+    align-items: center;
+`;
+
+const FileActionWrapper = styled.div`
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin: 0 8px;
+`;
+
+const FileOpenWrapper = styled.div`
+    display: flex;
+    flex: 1;
+`;
+
+const FlexRow = styled.div`
+    display: flex;
+    flex-direction: row;
+`;
+
+const FILE_MODE_VIEW = 'view';
+const FILE_MODE_EDIT = 'edit';
+
+const checkAccess = (file: any, property: string): boolean => {
+    return file && file._right && file._right[property] !== undefined ? file._right[property] : false;
+};
+
+const FormValues = ({
+    control,
+    name,
+    onChange,
+}: {
+    control: any;
+    name: string;
+    onChange: (values: string | Array<any>) => void;
+}) => {
+    const values = useWatch({ control, name });
+
+    onChange(values);
+
+    return <></>;
+};
+
+export interface JRCFileOpenProps {
+    children: React.ReactNode;
+    file: any;
+    fileActions?: any;
+    title: string;
+}
+
+const JRCFileOpen = (props: JRCFileOpenProps) => {
+    const [open, setOpen] = useState<boolean>(false);
+    const [children, setChildren] = useState<any>(null);
+    const [mode, setMode] = useState<string>(FILE_MODE_VIEW);
+    const idFile = props.file.id;
+    const location = window.location;
+    const urlBase = `${location.protocol}//${location.host}`;
+    const ACCESS_UPDATE = checkAccess(props.file, 'update');
+
+    const fopen = function () {
+        const extension = getFileExtension(props.file);
+
+        setChildren(getChildren(extension));
+        setOpen(true);
+    };
+
+    const getChildren = (extension: string) => {
+        switch (extension) {
+            case 'pdf':
+                return <JRCFileFrame src={`${urlBase}/downloadFile.php?id=${idFile}&attachment=no`}></JRCFileFrame>;
+            case 'odt':
+            case 'ods':
+            case 'pptx':
+            case 'docx':
+            case 'xlsx':
+                return (
+                    <JRCFileFrame
+                        src={`${urlBase}/?action=OnlyOfficeReact&idFile=${idFile}&mode=${mode}`}></JRCFileFrame>
+                );
+            case 'image':
+                return <JRCImg size="fitx1920" type={props.file.type} recordId={props.file.id} alt="image" />;
+            default:
+                return <JRCFileUnknown></JRCFileUnknown>;
+        }
+    };
+
+    const intl = useIntl();
+
+    const args: any = {
+        name: 'checkbox',
+        rules: {
+            required: false,
+        },
+        options: [{ label: intl.formatMessage({ id: 'GLOBAL_Edit_Online' }), value: 'edit' }],
+        direction: 'row',
+        labelPosition: 'before',
+        checkboxMode: 'toggle',
+        variant: 'default',
+    };
+
+    const { control } = useForm({
+        defaultValues: {
+            ['checkbox']: [],
+        },
+        criteriaMode: 'all',
+    });
+
+    const modalHeaderButtons = (
+        <FlexRow>
+            {ACCESS_UPDATE && (
+                <>
+                    <Form>
+                        <JRCInputCheckbox {...args} control={control as any} />
+                        <FormValues
+                            name="checkbox"
+                            control={control}
+                            onChange={(values: any) => {
+                                if (values && Array.isArray(values) && values.length) {
+                                    setMode(FILE_MODE_EDIT);
+                                } else {
+                                    setMode(FILE_MODE_VIEW);
+                                }
+                            }}></FormValues>
+                    </Form>
+                </>
+            )}
+            <FileActionWrapper>{props.fileActions}</FileActionWrapper>
+        </FlexRow>
+    );
+
+    useEffect(() => {
+        const extension = getFileExtension(props.file);
+        setChildren(getChildren(extension));
+    }, [mode]);
+
+    const argsModal: JRCModalProps = {
+        open: open,
+        title: props.title,
+        showIconClose: true,
+        isFull: true,
+        headerButtons: modalHeaderButtons,
+        closeHandler: () => {
+            setOpen(false);
+        },
+    };
+
+    return (
+        <>
+            <FileOpenWrapper onClick={() => fopen()}>{props.children}</FileOpenWrapper>
+            <JRCModal {...argsModal}>{children}</JRCModal>
+        </>
+    );
+};
+
+export default JRCFileOpen;

package/src/components/JRCFileOpen/extensions.tsx

@@ -0,0 +1,14 @@
+export const extensions: any = {
+    'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet': 'xlsx',
+    'application/vnd.openxmlformats-officedocument.wordprocessingml.document': 'docx',
+    'application/vnd.openxmlformats-officedocument.presentationml.presentation': 'pptx',
+    'application/vnd.oasis.opendocument.text': 'odt',
+    'application/vnd.oasis.opendocument.spreadsheet': 'ods',
+    'application/pdf': 'pdf',
+    'image/png': 'image',
+    'image/PNG': 'image',
+    'image/jpg': 'image',
+    'image/JPG': 'image',
+    'image/jpeg': 'image',
+    'image/JPEG': 'image',
+};

package/src/components/JRCGrid/JRCGrid.stories.tsx

@@ -0,0 +1,45 @@
+import * as React from 'react';
+import JRCGrid from './JRCGrid';
+import JRCColumnCenter from '../JRCColumnCenter/JRCColumnCenter';
+import JRCColumnLeft from '../JRCColumnLeft/JRCColumnLeft';
+import JRCColumnRight from 'components/JRCColumnRight/JRCColumnRight';
+
+const lorem = `
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer facilisis et erat quis dapibus. Nullam volutpat commodo lorem. Vivamus eget diam sit amet orci placerat aliquet. Pellentesque placerat elit nec lobortis condimentum. Duis in odio ac mauris finibus elementum. Donec nec tincidunt sapien. Pellentesque vel neque nec orci pulvinar porta non vel purus. Vestibulum tincidunt velit vitae pulvinar sollicitudin. In vel odio neque. Aenean egestas vitae dui at efficitur. Nullam interdum mi eget elit consectetur, a pharetra velit rutrum.
+    Aliquam hendrerit fringilla rhoncus. Donec dapibus tellus sit amet dapibus tristique. Etiam consectetur scelerisque elit eget tincidunt. Sed dignissim convallis quam, ut maximus orci placerat in. Nunc iaculis arcu et lorem porttitor rutrum. Curabitur rhoncus ante sed lobortis tristique. Donec tempor nulla ante, in consequat arcu ullamcorper et.
+    Nullam hendrerit sodales nisi id interdum. Praesent viverra varius ipsum quis mattis. Sed volutpat urna eu nisl consectetur sodales. Pellentesque molestie varius ex, in scelerisque nisl ornare eu. Mauris vestibulum dolor eu urna vehicula molestie. Nullam a risus velit. Morbi imperdiet nulla eget sagittis volutpat. Aenean rutrum fermentum sapien at consequat. Donec condimentum ultricies fermentum. Cras aliquet nisi nisi, non egestas turpis accumsan scelerisque. Curabitur commodo vitae lectus sed lobortis. Phasellus elementum dictum magna non congue. Ut molestie velit velit, nec condimentum ipsum aliquet id. Pellentesque sed tellus nulla. Vivamus imperdiet eleifend pretium.
+    Nulla vitae pellentesque mauris. Curabitur tempus arcu ut leo fermentum faucibus. Nullam a magna in lacus lobortis ultricies. Nulla facilisi. Quisque aliquam elit ut ante fringilla, eget cursus justo sagittis. Nam faucibus nibh euismod, sagittis urna sed, aliquet quam. Nulla facilisi. Nulla sit amet odio at neque malesuada hendrerit. Nunc vitae lorem neque. Nulla aliquet pulvinar mi a bibendum. Etiam sed porta mauris.
+    Proin pretium enim turpis, sit amet dictum quam maximus vel. Proin lectus mi, luctus vitae enim nec, volutpat cursus leo. Sed ac maximus felis. Vivamus aliquet neque a diam pellentesque facilisis. Etiam rhoncus mauris venenatis, congue lorem sagittis, dignissim mi. Etiam varius nec enim molestie imperdiet. Fusce gravida maximus lacinia. Sed facilisis, metus non porta tristique, diam nulla scelerisque lorem, in consectetur diam neque ut arcu. Vestibulum volutpat sagittis ultrices. Curabitur tristique mauris non orci vehicula condimentum. Mauris eget lacus sed dui rhoncus vestibulum. Nam a ornare odio. Aliquam mollis ex et quam accumsan tincidunt at nec tortor. Praesent sit amet vehicula urna. 
+`;
+
+export default {
+    title: 'JRCGrid',
+    component: JRCGrid,
+};
+
+export const Grid_1_col = () => {
+    return (
+        <JRCGrid cols="1">
+            <JRCColumnCenter>{lorem}</JRCColumnCenter>
+        </JRCGrid>
+    );
+};
+
+export const Grid_2_col_Left_Center = () => {
+    return (
+        <JRCGrid cols="2">
+            <JRCColumnLeft>{lorem}</JRCColumnLeft>
+            <JRCColumnCenter>{lorem}</JRCColumnCenter>
+        </JRCGrid>
+    );
+};
+
+export const Grid_3_col_Left_Center_Right = () => {
+    return (
+        <JRCGrid cols="3">
+            <JRCColumnLeft>{lorem}</JRCColumnLeft>
+            <JRCColumnCenter>{lorem}</JRCColumnCenter>
+            <JRCColumnRight>{lorem}</JRCColumnRight>
+        </JRCGrid>
+    );
+};

package/src/components/JRCGrid/JRCGrid.tsx

@@ -0,0 +1,15 @@
+import * as React from 'react';
+
+/**
+ * Props type for JRCGrid
+ * @member children: enclosed React component
+ * @member cols : number of cols  "1" | "2" | "3"
+ */
+export interface JRCGridProps {
+    children: React.ReactNode;
+    cols: '1' | '2' | '3';
+}
+
+const JRCGrid = (props: JRCGridProps) => <div className={`r-grid page-${props.cols}-cols`}>{props.children}</div>;
+
+export default JRCGrid;

package/src/components/JRCHref/JRCHref.stories.tsx

@@ -0,0 +1,33 @@
+import * as React from 'react';
+
+import { JRCStyledHref, JRCLinkToUser, JRCLinkToArticle, JRCStyledHrefProps, JRCLinkToProps } from './JRCHref';
+import { Meta, Story } from '@storybook/react';
+
+export default {
+    title: 'JRCHref',
+} as Meta;
+
+const Template: Story<JRCStyledHrefProps> = (args) => <JRCStyledHref {...args}>{args.children}</JRCStyledHref>;
+
+export const Default = Template.bind({});
+Default.args = {
+    children: 'Hello',
+    href: '#',
+    dataCy: 'link-to-the-main-content',
+};
+
+const UserTemplate: Story<JRCLinkToProps> = (args) => <JRCLinkToUser {...args}>{args.children}</JRCLinkToUser>;
+export const User = UserTemplate.bind({});
+User.args = {
+    idObject: 10,
+    children: 'John Doe',
+    dataCy: 'link-to-user-john-doe',
+};
+
+const ArticleTemplate: Story<JRCLinkToProps> = (args) => <JRCLinkToArticle {...args}>{args.children}</JRCLinkToArticle>;
+export const Article = ArticleTemplate.bind({});
+Article.args = {
+    idObject: 10,
+    children: 'Comment écrire un article?',
+    dataCy: 'link-to-article-10',
+};

package/src/components/JRCHref/JRCHref.tsx

@@ -0,0 +1,40 @@
+import * as React from 'react';
+import styled from 'styled-components';
+import { DataCy } from '../../types/dataAttributes';
+
+/**
+ * Props type for JRCLinkToArticle and JRCLinkToUser
+ * @member id number : id of the record
+ * @member href string : href for href
+ * @member children: enclosed React component
+ */
+export interface JRCLinkToProps extends JRCStyledHrefProps {
+    idObject?: number;
+    href?: string;
+    children: React.ReactNode;
+}
+
+/**
+ * Props type for JRCStyledHref
+ * @see HTML.a default props
+ */
+export type JRCStyledHrefProps = DataCy & React.ComponentPropsWithoutRef<'a'>;
+
+export const JRCStyledHref = styled.a.attrs<JRCStyledHrefProps>(({ dataCy, ...props }) => ({
+    'data-cy': dataCy,
+    ...props,
+}))`
+    color: ${(props) => props.theme.font.hrefColor};
+`;
+
+export const JRCLinkToArticle = ({ idObject, href, children, ...props }: JRCLinkToProps) => (
+    <JRCStyledHref href={href ? href : `/article/${idObject}`} {...props}>
+        {children}
+    </JRCStyledHref>
+);
+
+export const JRCLinkToUser = ({ idObject, href, children, ...props }: JRCLinkToProps) => (
+    <JRCStyledHref href={href ? href : `/user/${idObject}`} {...props}>
+        {children}
+    </JRCStyledHref>
+);