jamespot-react-components 1.0.2 → 1.0.16

package/src/components/JRCIcon/JRCIcon.tsx

@@ -45,7 +45,7 @@ const Icon = styled.i<Required<JRCIconProps>>`
 `;
 
 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} />
+    <Icon className={`react-icon ${name} ${className || ''}`} name={name} size={size} color={color} variant={variant} />
 );
 
 export default JRCIcon;

package/src/components/JRCIconButton/JRCIconButton.tsx

@@ -81,10 +81,7 @@ 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>}>
+            wrapper={(children) => <JRCTooltip {...(props.tooltip as JRCTooltipProps)}>{children}</JRCTooltip>}>
             <Button {...props} data-cy={props.dataCy} size={props.size}>
                 <JRCIcon
                     name={props.icon}

package/src/components/JRCImg/JRCImg.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import styled from 'styled-components';
+import styled, { ThemeContext } from 'styled-components';
 import { formatImgUrl, ImgUrlProps } from './url.util';
 
 /**
@@ -43,9 +43,11 @@ const Img = styled.img`
 `;
 
 const JRCImg = (props: JRCImgProps) => {
+    const themeContext = React.useContext(ThemeContext);
+
     return (
         <Img
-            src={formatImgUrl(props)}
+            src={formatImgUrl(props, themeContext.dpr)}
             loading={props.loading || 'lazy'}
             alt={props.alt}
             width={props.width}

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

@@ -46,7 +46,7 @@ export type ImgUrlProps = {
 };
 
 export function getFrom(arg: Pick<ImgUrlProps, 'from'>) {
-    return removeIfStartsWith(suffixIfDoesNotExist(arg.from, '/'), '/');
+    return removeIfStartsWith(suffixIfDoesNotExist(arg.from, '/'), '/') || '';
 }
 
 export function getTimestamp(arg: Timestamp) {
@@ -58,9 +58,10 @@ export function getUri(arg: UriOrTypeId): string {
     return `${arg.type}/${arg.recordId}`;
 }
 
-export function getSize(arg: Size & WidthHeight): string {
+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 * 2}x${arg.height * 2}`;
+    else if ('width' in arg && arg.width && 'height' in arg && arg.height)
+        return `${arg.width * dpr}x${arg.height * dpr}`;
     return '';
 }
 
@@ -76,7 +77,7 @@ export function getUrl(url: string): URL | undefined {
     }
 
     try {
-        return new URL(window.location.origin + url);
+        return new URL(window.location.origin + '/' + removeIfStartsWith(url, '/'));
     } catch (e) {
         /* silent exception */
     }
@@ -95,7 +96,7 @@ export function getUrl(url: string): URL | undefined {
  *   The final url is {from}/{size}/{uri}.{format}?_={timestamp}
  * @param arg
  */
-export function formatImgUrl(arg: ImgUrlProps) {
+export function formatImgUrl(arg: ImgUrlProps, dpr = 2) {
     if ('url' in arg && arg.url) {
         const url = getUrl(arg.url);
         if (url) {
@@ -104,5 +105,5 @@ export function formatImgUrl(arg: ImgUrlProps) {
             return url.toString();
         }
     }
-    return `/${getFrom(arg)}${getSize(arg)}/${getUri(arg)}.${getFormat(arg)}${getTimestamp(arg)}`;
+    return `/${getFrom(arg)}${getSize(arg, dpr)}/${getUri(arg)}.${getFormat(arg)}${getTimestamp(arg)}`;
 }

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

@@ -9,6 +9,7 @@ describe('Test utils.url', () => {
         // @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');
@@ -24,18 +25,23 @@ describe('Test utils.url', () => {
         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(undefined);
+        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', () => {

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

@@ -4,6 +4,7 @@ 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 { useIntl } from 'react-intl';
 import { DropTargetMonitor } from 'react-dnd/dist/types/types';
 
 const TableCss = css`
@@ -19,13 +20,20 @@ export const Table = styled.table`
     border-collapse: collapse;
 `;
 
-export const Thead = styled.thead``;
+export const Thead = styled.thead`
+    position: sticky;
+    top: 0;
+    background-color: white;
+    border-bottom: 2px solid ${(props) => props.theme.color.grey2};
+    z-index: 1;
+`;
 
 export const TBody = styled.tbody``;
 
 export const Th = styled.th<{ width?: number | string }>`
     ${TableCss};
     font-size: 12px;
+    padding: 0 4px;
     font-weight: normal;
     ${(props) => props.width && props.width > 0 && `width: ${props.width}px`};
 `;
@@ -75,6 +83,7 @@ export const Tr = styled.tr<{ dragging?: boolean }>`
 
 export const Td = styled.td`
     ${TableCss};
+    padding: 0 4px;
     ${(props) => props.width && `width: ${props.width}`};
 `;
 
@@ -137,6 +146,8 @@ export const DraggableTBody = ({ draggable, children }: DraggableTBodyProps) =>
 const DND_ITEM_TYPE = 'row';
 
 export const DraggableTr = ({ index, onDrag, onDrop, draggable, children }: DraggableTrProps) => {
+    const intl = useIntl();
+
     const dropRef = React.useRef<HTMLTableRowElement>(null);
     const dragRef = React.useRef<HTMLTableCellElement>(null);
     let dragging = false;
@@ -199,7 +210,10 @@ export const DraggableTr = ({ index, onDrag, onDrop, draggable, children }: Drag
                 <Tr ref={dropRef} dragging={dragging}>
                     {draggable && (
                         <DraggableTd ref={dragRef}>
-                            <JRCIconButton icon={'icon-fs-dw'} size="medium" />
+                            <JRCIconButton
+                                icon="icon-fs-dw"
+                                tooltip={{ description: intl.formatMessage({ id: 'GLOBAL_Move' }), position: 'right' }}
+                            />
                             &nbsp;
                         </DraggableTd>
                     )}

package/src/components/JRCList/JRCList.tsx

@@ -2,7 +2,7 @@ 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 { useDidMountEffect } from '../../hooks/UseDidMountEffect';
 import JRCIcon from '../JRCIcon/JRCIcon';
 
 import {
@@ -25,6 +25,7 @@ import type { Orders } from 'jamespot-user-api';
  * @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
+ * @member className className
  */
 export type JRCListProps<T extends Record<string, unknown>> = {
     columns: Array<Column<T>>;
@@ -45,6 +46,7 @@ export type JRCListProps<T extends Record<string, unknown>> = {
             nbResults: number;
         };
     };
+    className?: string;
 };
 
 export const JRCList = <T extends Record<string, unknown>>(props: JRCListProps<T>) => {
@@ -133,7 +135,7 @@ export const JRCList = <T extends Record<string, unknown>>(props: JRCListProps<T
 
     return (
         <React.Fragment>
-            <Table {...getTableProps()}>
+            <Table {...getTableProps()} className={props.className}>
                 <Thead>
                     {headerGroups.map((headerGroup) => (
                         <Tr {...headerGroup.getHeaderGroupProps()}>
@@ -162,9 +164,7 @@ export const JRCList = <T extends Record<string, unknown>>(props: JRCListProps<T
                 <TBody {...getTableBodyProps()}>
                     <DraggableTBody draggable={props.config.draggable}>
                         {rows.map((row: Row<T>, index: number): any => {
-                            if (prepareRow(row) !== undefined) {
-                                prepareRow(row);
-                            }
+                            prepareRow(row);
                             return (
                                 <DraggableTr
                                     index={index}

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

@@ -83,7 +83,7 @@ const Template: Story<never> = (/*args: JRCListProps<MyData>*/) => {
             limit: config.pagination.perPage,
             orders,
         };
-        jamespot.shortcut.getList(args).then((res: any) => {
+        jamespot.bookmark.getList(args).then((res: any) => {
             setData(res.data);
             setConfig({
                 ...config,

package/src/components/JRCModal/JRCModal.styles.tsx

@@ -63,12 +63,6 @@ export const JRCModalHeader = styled.div`
     justify-content: space-between;
 `;
 
-export const JRCModalHeaderTitle = styled.div`
-    display: flex;
-    flex-direction: row;
-    flex: 1;
-`;
-
 export const JRCModalFooter = styled.div`
     flex-shrink: 0;
     display: flex;

package/src/components/JRCModal/JRCModal.tsx

@@ -9,7 +9,6 @@ import {
     JRCModalContainerFull,
     JRCModalContent,
     JRCModalHeader,
-    JRCModalHeaderTitle,
     JRCModalFooter,
     JRCModalClose,
 } from './JRCModal.styles';
@@ -40,6 +39,8 @@ export interface JRCModalButtonType extends ComponentPropsWithoutRef<'button'> {
  * @member enableClickAwayCloseModal boolean to enable the close of the Modal by Click Outside of Modal
  * @member children default ReactNode children in the Modal content
  * @member portalId id attribute for createPortal
+ * @member inPlace if true, does not use a portal
+ * @member className use for overriding the styled-components styles
  */
 export interface JRCModalProps {
     open: boolean;
@@ -52,6 +53,8 @@ export interface JRCModalProps {
     isFull?: boolean;
     headerButtons?: ReactNode;
     portalId?: string;
+    inPlace?: boolean;
+    className?: string;
 }
 
 type MouseEvents = 'click' | 'mousedown' | 'mouseup';
@@ -90,69 +93,67 @@ const JRCModalContainerClickAway = ({
     return React.createElement(props.isFull ? JRCModalContainerFull : JRCModalContainer, { ref: node, ...props });
 };
 
-const JRCModal = ({
-    open,
-    closeHandler,
-    buttons,
-    children,
-    title,
-    showIconClose,
-    enableClickAwayCloseModal,
-    isFull,
-    headerButtons,
-    portalId = 'react-modal',
-}: JRCModalProps) => {
-    const modalRef = React.useRef(null);
-
-    const closeModal = () => {
-        closeHandler();
-    };
+const JRCModal = React.forwardRef(
+    (
+        {
+            open,
+            closeHandler,
+            buttons,
+            children,
+            title,
+            showIconClose,
+            enableClickAwayCloseModal,
+            isFull,
+            headerButtons,
+            portalId = 'react-modal',
+            inPlace = false,
+            className,
+        }: JRCModalProps,
+        ref: React.ForwardedRef<HTMLDivElement>,
+    ) => {
+        const closeModal = () => {
+            closeHandler();
+        };
 
-    const escapeHandler = (e: React.KeyboardEvent) => {
-        if (e.key == 'Escape') closeHandler();
-    };
-    const dummyVoid = (): undefined => {
-        return undefined;
-    };
+        const escapeHandler = (e: React.KeyboardEvent) => {
+            if (e.key == 'Escape') closeHandler();
+        };
 
-    const handleClickAway = (event: any) => {
-        event.stopPropagation();
-        closeHandler();
-    };
+        const handleClickAway = (event: any) => {
+            event.stopPropagation();
+            closeHandler();
+        };
 
-    const getClickHandlerList = () => {
-        const handlerList: (() => void)[] = [];
-        if (buttons != undefined) {
-            buttons.map((button: JRCModalButtonType) => {
-                if (button.isClosed == undefined || !button.isClosed)
-                    handlerList.push(() => {
-                        closeHandler();
-                        button.clickHandler != undefined ? button.clickHandler() : dummyVoid();
-                    });
-                else
-                    handlerList.push(() => {
-                        dummyVoid();
-                    });
-            });
-        }
-        return handlerList;
-    };
+        const getClickHandlerList = () => {
+            const handlerList: (() => void)[] = [];
+            if (buttons != undefined) {
+                buttons.map((button: JRCModalButtonType) => {
+                    if (button.isClosed == undefined || !button.isClosed)
+                        handlerList.push(() => {
+                            closeHandler();
+                            button.clickHandler != undefined && button.clickHandler();
+                        });
+                    else
+                        handlerList.push(() => {
+                            /* dummy void */
+                        });
+                });
+            }
+            return handlerList;
+        };
 
-    const displayHeaderButtons = headerButtons ? headerButtons : null;
-    const clickHandlerList = getClickHandlerList();
-    const portalDiv = document.getElementById(portalId);
+        const displayHeaderButtons = headerButtons ? headerButtons : null;
+        const clickHandlerList = getClickHandlerList();
+        const portalDiv = document.getElementById(portalId);
 
-    const ModalBox = open ? (
-        // FIXME TYPESCRIPT-STRICT
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-ignore
-        <JRCThemeProvider>
-            <JRCModalBox onKeyDown={(e) => escapeHandler(e)} tabIndex={0} ref={modalRef}>
+        const ModalBox = () => (
+            <JRCModalBox onKeyDown={(e) => escapeHandler(e)} tabIndex={0} ref={ref} className={className}>
                 <JRCModalContainerClickAway
+                    className="modal-container"
                     onClickAway={enableClickAwayCloseModal ? handleClickAway : undefined}
                     isFull={isFull}>
                     {(title || showIconClose) && (
-                        <JRCModalHeader>
+                        <JRCModalHeader className={'modal-header'}>
                             {title && <JRCH3>{title}</JRCH3>}
                             {displayHeaderButtons}
                             {showIconClose && (
@@ -163,7 +164,7 @@ const JRCModal = ({
                         </JRCModalHeader>
                     )}
 
-                    <JRCModalContent>{children}</JRCModalContent>
+                    <JRCModalContent className="modal-content">{children}</JRCModalContent>
 
                     {buttons ? (
                         <JRCModalFooter>
@@ -180,10 +181,23 @@ const JRCModal = ({
                     ) : null}
                 </JRCModalContainerClickAway>
             </JRCModalBox>
-        </JRCThemeProvider>
-    ) : null;
-
-    return portalDiv ? ReactDOM.createPortal(ModalBox, portalDiv) : null;
-};
+        );
+
+        if (open) {
+            if (inPlace) {
+                return <ModalBox />;
+            } else if (portalDiv) {
+                // when using a portal, we need to provide the Theme explicitely
+                return ReactDOM.createPortal(
+                    <JRCThemeProvider>
+                        <ModalBox />
+                    </JRCThemeProvider>,
+                    portalDiv,
+                );
+            }
+        }
+        return null;
+    },
+);
 
 export default JRCModal;

package/src/components/JRCTag/JRCTag.tsx

@@ -19,6 +19,7 @@ import JRCTooltip from '../JRCTooltip/JRCTooltip';
  * @member focusable - whether the element is focusable. Independant of onClick property
  * @member isFocused - whether the element is focused. Property used with variant for styling the component
  * @member tooltipDescription - if present, show a tooltip with the description
+ * @member clickVariant - whether the hover/focus style is a selectable item or a deletable item
  */
 export type JRCTagProps<T> = UriOrTypeId & {
     collapsed?: boolean;
@@ -31,9 +32,10 @@ export type JRCTagProps<T> = UriOrTypeId & {
     isFocused?: boolean;
     tooltipDescription?: string;
     alt?: string;
+    clickVariant?: 'select' | 'delete';
 };
 
-const TagWrapper = styled.div<{ focusable: boolean; isFocused: boolean }>`
+const TagWrapper = styled.div<{ focusable: boolean; isFocused: boolean; clickVariant: 'select' | 'delete' }>`
     position: relative;
     display: inline-flex;
     align-items: center;
@@ -44,16 +46,16 @@ const TagWrapper = styled.div<{ focusable: boolean; isFocused: boolean }>`
     cursor: ${(props) => (props.focusable ? 'pointer' : 'default')};
     background-color: ${(props) => {
         if (props.focusable && props.isFocused) {
-            return props.theme.color.orangeL80;
+            return props.theme.color[config[props.clickVariant].hoverBGColor];
         } else {
-            return props.theme.color.grey0;
+            return props.theme.color[config[props.clickVariant].backgroundColor];
         }
     }};
     color: ${(props) => {
         if (props.focusable && props.isFocused) {
-            return props.theme.color.grey4;
+            return props.theme.color[config[props.clickVariant].hoverColor];
         } else {
-            return props.theme.color.grey5;
+            return props.theme.color[config[props.clickVariant].color];
         }
     }};
 
@@ -72,14 +74,15 @@ const TagWrapper = styled.div<{ focusable: boolean; isFocused: boolean }>`
     }
 
     :hover {
-        ${(props) => props.focusable && `background-color: ${props.theme.color.orangeL80}`};
-        ${(props) => props.focusable && `color: ${props.theme.color.grey4}`};
+        ${(props) =>
+            props.focusable && `background-color: ${props.theme.color[config[props.clickVariant].hoverBGColor]}`};
+        ${(props) => props.focusable && `color: ${props.theme.color[config[props.clickVariant].hoverColor]}`};
     }
     :hover i {
-        ${(props) => props.focusable && `display: block`};
+        ${(props) => props.focusable && props.clickVariant === 'delete' && `display: block`};
     }
     & i {
-        ${(props) => props.focusable && props.isFocused && `display: block`};
+        ${(props) => props.focusable && props.isFocused && props.clickVariant === 'delete' && `display: block`};
     }
 `;
 
@@ -87,8 +90,24 @@ const TagLabel = styled.div`
     margin-left: 4px;
 `;
 
+const config = {
+    select: {
+        color: 'grey4',
+        backgroundColor: 'white',
+        hoverColor: 'grey5',
+        hoverBGColor: 'grey0',
+    },
+    delete: {
+        color: 'grey5',
+        backgroundColor: 'grey0',
+        hoverColor: 'grey4',
+        hoverBGColor: 'orangeL80',
+    },
+};
+
 export function JRCTag<T>(props: JRCTagProps<T>) {
     const uri = 'uri' in props ? props.uri : `${props.type}/${props.recordId}`;
+    const clickVariant = props.clickVariant || 'delete';
 
     const getAvatar = () =>
         React.createElement(
@@ -104,6 +123,7 @@ export function JRCTag<T>(props: JRCTagProps<T>) {
                     : undefined,
                 focusable: props.focusable,
                 isFocused: props.isFocused,
+                clickVariant,
             },
             <>
                 <JRCAvatar alt={props.alt} uri={uri} variant={props.variant} focusable={props.focusable} />

package/src/components/JRCThemeProvider/animation.css

@@ -1,3 +1,22 @@
+.wiggle {
+    animation: 0.25s ease-in-out 0s 4 wiggle;
+}
+
+@keyframes wiggle {
+    0% {
+        transform: rotate(0deg);
+    }
+    25% {
+        transform: rotate(10deg) scale(1.1);
+    }
+    75% {
+        transform: rotate(-10deg) scale(1.1);
+    }
+    100% {
+        transform: rotate(0deg);
+    }
+}
+
 .scale-left {
     animation: scale var(--timeout, 1000ms) linear 0s 1;
 }

package/src/components/JRCThemeProvider/font.css

@@ -5,7 +5,7 @@
 .react-reset button,
 .react-reset select,
 .react-reset textarea {
-    font-family: 'Poppins';
+    font-family: var(--font-family);
     font-size: 14px;
     line-height: 1.5em;
     font-weight: 400;

package/src/components/JRCThemeProvider/gabarit.css

@@ -1,3 +1,7 @@
+.react-reset {
+    width: 100%;
+}
+
 .r-grid {
     display: grid;
     --pageColWidthLeft: 230px;

package/src/components/JRCTooltip/JRCTooltip.tsx

@@ -71,6 +71,9 @@ const Text = styled(JRCText)<{ sizeTooltip: keyof typeof sizes.padding }>`
     margin: 0;
     text-align: ${(props) => (props.sizeTooltip === 'small' ? 'center' : 'initial')};
 `;
+const InlineBlock = styled.span`
+    display: inline-block;
+`;
 
 export const JRCTooltip = (props: JRCTooltipProps) => {
     const id = uuidv4();
@@ -86,14 +89,14 @@ export const JRCTooltip = (props: JRCTooltipProps) => {
     };
     return (
         <>
-            <span
+            <InlineBlock
                 aria-describedby={id}
                 data-event="mouseenter focusin"
                 data-event-off={props.closeButton && props.button ? 'click' : 'mouseleave'}
                 data-tip
                 data-for={id}>
                 {props.children}
-            </span>
+            </InlineBlock>
             <Tooltip
                 effect="solid"
                 role="tooltip"

package/src/components/JRCTypography/__snapshots__/JRCTypography.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`JRCTypography match snapshot 1`] = `
 <DocumentFragment>
   <p
-    class="sc-bdvvtL iOYRhi"
+    class="sc-bdvvtL gGmII"
   >
     JRCTypography
   </p>

package/src/components/Templates/JRCBase.template.tsx

@@ -0,0 +1,39 @@
+import { JRCAppContainer } from 'components/JRCAppContainer/JRCAppContainer';
+import JRCLoader from 'components/JRCLoader/JRCLoader';
+import { JRCTypography } from 'components/JRCTypography/JRCTypography';
+import * as React from 'react';
+import styled from 'styled-components';
+
+export type JRCTemplateBaseProps = {
+    children: React.ReactNode;
+    isLoading: boolean;
+    title?: React.ReactNode;
+};
+
+export const ChildrenContainerStyle = styled.div`
+    display: block;
+    width: 100%;
+`;
+
+export const ChildrenContainer = (props: JRCTemplateBaseProps) => {
+    return (
+        <ChildrenContainerStyle>
+            {props.title && (
+                <JRCTypography variant="h1" size="xl" weight="medium">
+                    {props.title}
+                </JRCTypography>
+            )}
+            {props.isLoading ? <JRCLoader variant="skeleton" /> : <>{props.children}</>}
+        </ChildrenContainerStyle>
+    );
+};
+
+export const JRCTemplateBase: React.FC<any> = (props: JRCTemplateBaseProps) => {
+    return (
+        <JRCAppContainer>
+            <ChildrenContainer title={props.title} isLoading={props.isLoading}>
+                {props.children}
+            </ChildrenContainer>
+        </JRCAppContainer>
+    );
+};