jamespot-react-components 1.0.9 → 1.0.16

package/build/src/components/JRCAppContainer/JRCAppContainer.d.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+export declare const CONTAINER_PADDING = 32;
 export interface JRCAppContainerProps {
     children: React.ReactNode;
 }

package/build/src/components/Templates/JRCBase.template.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+export declare type JRCTemplateBaseProps = {
+    children: React.ReactNode;
+    isLoading: boolean;
+    title?: React.ReactNode;
+};
+export declare const ChildrenContainerStyle: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ChildrenContainer: (props: JRCTemplateBaseProps) => JSX.Element;
+export declare const JRCTemplateBase: React.FC<any>;

package/build/src/components/Templates/JRCTemplate.stories.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { JRCTemplateBaseProps } from './JRCBase.template';
+import { Story } from '@storybook/react';
+import { JRCTemplateTwoColumnsProps } from './JRCTwoColumns.template';
+declare const _default: {
+    title: string;
+    component: React.FC<any>;
+};
+export default _default;
+export declare const BaseTemplateDemo: Story<JRCTemplateBaseProps>;
+export declare const BaseTemplateDemoLoading: Story<JRCTemplateBaseProps>;
+export declare const TemplateWithLeftColumnDemo: Story<JRCTemplateTwoColumnsProps<any>>;
+export declare const TemplateWithLeftColumnDemoLoading: Story<JRCTemplateTwoColumnsProps<any>>;

package/build/src/components/Templates/JRCTwoColumns.template.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { JRCAppLeftColumnProps, SectionEntry } from 'types';
+import { JRCTemplateBaseProps } from './JRCBase.template';
+export declare type JRCTemplateTwoColumnsProps<T extends SectionEntry> = {
+    leftColumn: JRCAppLeftColumnProps<T>;
+} & JRCTemplateBaseProps;
+export declare const JRCTemplateTwoColumns: React.FC<any>;

package/build/src/index.d.ts

@@ -15,6 +15,7 @@ declare global {
         reactDnd: any;
         reactDndHtml5Backend: any;
         reactHookForm: any;
+        reactRouterDom: any;
     }
 }
 /****
@@ -39,8 +40,6 @@ export { JRCButtonDropdown };
 export { JRCCard } from './components/JRCCard/JRCCard';
 import JRCColumnCenter from './components/JRCColumnCenter/JRCColumnCenter';
 export { JRCColumnCenter };
-import JRCColumnCenterTitle from './components/JRCColumnCenterTitle/JRCColumnCenterTitle';
-export { JRCColumnCenterTitle };
 import JRCColumnLeft from './components/JRCColumnLeft/JRCColumnLeft';
 export { JRCColumnLeft };
 import JRCColumnRight from './components/JRCColumnRight/JRCColumnRight';
@@ -111,6 +110,8 @@ export { JRCInputCommunity } from './components/Form/Input/JRCSelect/JRCAutocomp
 export { JRCInputText } from './components/Form/Input/JRCInputText/JRCInputText';
 export { JRCInputTextarea } from './components/Form/Input/JRCInputTextarea/JRCInputTextarea';
 export { JRCInputDate } from './components/Form/Input/JRCInputDate/JRCInputDate';
+export { JRCTemplateBase } from './components/Templates/JRCBase.template';
+export { JRCTemplateTwoColumns } from './components/Templates/JRCTwoColumns.template';
 /****
  *
  * PLEASE RESPECT ALPHABETICAL ORDER

package/build/src/styles/theme.d.ts

@@ -4,6 +4,7 @@ export interface ITheme {
     initTheme: (options: ThemeConfigOptions) => void;
 }
 export declare type ThemeConfigOptions = {
+    fontFamily: string;
     linkColor: string;
     buttonColor: string;
     headerColor: string;
@@ -25,8 +26,10 @@ declare type ThemeConfigShadeType = {
     [color in Shades]: string;
 };
 export declare type FontWeight = {
+    light: number;
     normal: number;
     medium: number;
+    semiBold: number;
     bold: number;
 };
 export declare type ThemeType = {
@@ -37,7 +40,6 @@ export declare type ThemeType = {
         hrefColor: string;
         size: string;
         lineHeight: string;
-        fontWeight: number;
         weight: FontWeight;
     };
     color: ThemeConfigColorType & ThemeConfigShadeType;

package/build/src/types.d.ts

@@ -31,8 +31,6 @@ export { JRCButtonProps };
 export { JRCButtonDropdownProps } from './components/JRCButtonDropdown/JRCButtonDropdown';
 import { JRCColumnCenterProps } from './components/JRCColumnCenter/JRCColumnCenter';
 export { JRCColumnCenterProps };
-import { JRCColumnCenterTitleProps } from './components/JRCColumnCenterTitle/JRCColumnCenterTitle';
-export { JRCColumnCenterTitleProps };
 import { JRCColumnLeftProps } from './components/JRCColumnLeft/JRCColumnLeft';
 export { JRCColumnLeftProps };
 import { JRCColumnRightProps } from './components/JRCColumnRight/JRCColumnRight';
@@ -77,6 +75,8 @@ import { JRCValueLabelProps } from './components/Form/Common/types';
 export { JRCValueLabelProps };
 import { JRCWritableFormInputProps } from './components/Form/Input/JRCFormFieldRender';
 export { JRCWritableFormInputProps };
+export { JRCTemplateBaseProps } from './components/Templates/JRCBase.template';
+export { JRCTemplateTwoColumnsProps } from './components/Templates/JRCTwoColumns.template';
 import { JRCTypographyProps } from './components/JRCTypography/JRCTypography.d';
 export { JRCTypographyProps };
 export { JRCValidationButtonProps } from './components/JRCButton/JRCValidationButton';

package/externals.json

@@ -9,6 +9,7 @@
     "redux": "redux",
     "redux-form": "reduxForm",
     "react-intl": "reactIntl",
+    "react-router-dom": "reactRouterDom",
     "styled-components": "styledComponents",
     "react-dnd": "reactDnd",
     "react-dnd-html5-backend": "reactDndHtml5Backend",

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "jamespot-react-components",
-    "version": "1.0.9",
+    "version": "1.0.16",
     "description": "",
     "main": "./build/jamespot-react-components.js",
     "types": "./build/src/index.d.ts",
@@ -49,6 +49,7 @@
         "@types/react": "^17.0.2",
         "@types/react-dom": "^17.0.2",
         "@types/react-redux": "^7.1.9",
+        "@types/react-router-dom": "^5.3.3",
         "@types/react-select": "^3.1.2",
         "@types/react-slick": "^0.23.4",
         "@types/react-table": "^7.7.3",
@@ -85,7 +86,6 @@
         "webpack-dev-server": "^4.4.0"
     },
     "dependencies": {
-        "@quickbaseoss/babel-plugin-styled-components-css-namespace": "^1.0.1",
         "@tiptap/extension-color": "^2.0.0-beta.8",
         "@tiptap/extension-heading": "^2.0.0-beta.23",
         "@tiptap/extension-link": "^2.0.0-beta.28",
@@ -96,7 +96,7 @@
         "@types/redux-logger": "^3.0.8",
         "chroma-js": "^2.1.1",
         "classnames": "^2.3.1",
-        "jamespot-user-api": "1.0.13",
+        "jamespot-user-api": "file:../jamespot-user-api",
         "moment": "^2.29.1",
         "react": "^17.x",
         "react-dnd": "^14.0.4",
@@ -105,6 +105,7 @@
         "react-hook-form": "^7.25.0",
         "react-intl": "^5.8.6",
         "react-redux": "^7.2.3",
+        "react-router-dom": "^6.2.1",
         "react-select": "^3.2.0",
         "react-slick": "^0.28.1",
         "react-table": "^7.7.0",

package/src/components/JRCAppContainer/JRCAppContainer.tsx

@@ -1,13 +1,17 @@
 import * as React from 'react';
 import styled from 'styled-components';
 
+export const CONTAINER_PADDING = 32;
+
 const Container = styled.div`
     display: flex;
     max-width: 1600px;
     width: 100%;
     margin: auto;
-    gap: 16px;
-    padding: 16px;
+    gap: ${CONTAINER_PADDING}px;
+    padding: ${CONTAINER_PADDING}px;
+    background-color: ${(props) => props.theme.color.white};
+    min-height: calc(var(--body-height) - ${CONTAINER_PADDING * 2}px);
 `;
 
 export interface JRCAppContainerProps {

package/src/components/JRCAppLeftColumn/JRCAppLeftColumn.styles.tsx

@@ -2,6 +2,7 @@ import { ItemButton } from '../JRCTabs/JRCTabs';
 import styled from 'styled-components';
 import { JRCH2 } from '../JRCTypo/JRCTypo';
 import { JRCIconButton } from '../JRCIconButton/JRCIconButton';
+import { CONTAINER_PADDING } from 'components/JRCAppContainer/JRCAppContainer';
 
 export const JRCAppLeftColumnWrapperTop = styled.div`
     display: flex;
@@ -21,7 +22,7 @@ export const ColumnRelativeSticky = styled.div<{ isMinimized: boolean; isClosed:
     display: flex;
     position: sticky;
     bottom: 0;
-    min-height: calc(var(--body-height) - 32px);
+    min-height: calc(var(--body-height) - ${CONTAINER_PADDING * 2}px);
     background: ${(props) => props.theme.color.grey0};
     min-width: ${(props) => (props.isMinimized ? '80px' : '300px')};
     overflow: ${(props) => (props.isClosed ? 'visible' : 'hidden')};

package/src/components/JRCAvatar/JRCAvatar.test.tsx

@@ -4,19 +4,23 @@ import { screen } from '@testing-library/react';
 
 import JRCAvatar from './JRCAvatar';
 
+const SIZE = 3;
+
 describe('JRCAvatar', () => {
     beforeEach(() => {
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-ignore FIXME remove that when upgrading to typescript version > 4.2.x
-        renderWithWrapper(<JRCAvatar type="user" recordId="1234" size="3" alt="avatar of user John Doe" />);
+        renderWithWrapper(
+            <JRCAvatar type="user" recordId="1234" size={SIZE} alt="avatar of user John Doe" />,
+        );
     });
 
     test('medium avatar to have a proper size', () => {
-        expect(screen.getByRole('img')).toHaveAttribute('width', '24');
-        expect(screen.getByRole('img')).toHaveAttribute('height', '24');
+        const width = (8 * SIZE).toString();
+        expect(screen.getByRole('img')).toHaveAttribute('width', width);
+        expect(screen.getByRole('img')).toHaveAttribute('height', width);
     });
 
     test('medium avatar to download an img twice the container size', () => {
-        expect(screen.getByRole('img')).toHaveAttribute('src', '/imagecache/48x48/user/1234.png');
+        const width = (Math.ceil(window.devicePixelRatio) * 8 * SIZE).toString();
+        expect(screen.getByRole('img')).toHaveAttribute('src', `/imagecache/${width}x${width}/user/1234.png`);
     });
 });

package/src/components/JRCAvatar/JRCAvatar.tsx

@@ -71,6 +71,7 @@ const JRCAvatar = (props: JRCAvatarProps) => {
                     ...otherProps,
                     width: imgSize,
                     height: imgSize,
+                    size: `${imgSize * 2}x${imgSize * 2}`,
                     format: format,
                     alt: alt,
                     'aria-hidden': alt ? undefined : true,

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

@@ -3,8 +3,7 @@
 exports[`JRCButton match snapshot 1`] = `
 <DocumentFragment>
   <button
-    class="sc-dkPtRN kttjSS"
-    color="primary"
+    class="sc-jRQBWg LNyd"
     type="button"
   >
     I'm a text

package/src/components/JRCModal/JRCModal.tsx

@@ -96,109 +96,108 @@ const JRCModalContainerClickAway = ({
 const JRCModal = React.forwardRef(
     (
         {
-    open,
-    closeHandler,
-    buttons,
-    children,
-    title,
-    showIconClose,
-    enableClickAwayCloseModal,
-    isFull,
-    headerButtons,
-    portalId = 'react-modal',
-    inPlace = false,
-    className,
-}: JRCModalProps,
+            open,
+            closeHandler,
+            buttons,
+            children,
+            title,
+            showIconClose,
+            enableClickAwayCloseModal,
+            isFull,
+            headerButtons,
+            portalId = 'react-modal',
+            inPlace = false,
+            className,
+        }: JRCModalProps,
         ref: React.ForwardedRef<HTMLDivElement>,
-        ) => {
-
-    const closeModal = () => {
-        closeHandler();
-    };
+    ) => {
+        const closeModal = () => {
+            closeHandler();
+        };
 
-    const escapeHandler = (e: React.KeyboardEvent) => {
-        if (e.key == 'Escape') closeHandler();
-    };
+        const escapeHandler = (e: React.KeyboardEvent) => {
+            if (e.key == 'Escape') 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();
-                    });
-                else
-                    handlerList.push(() => {
-                        /* dummy void */
-                    });
-            });
-        }
-        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 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 className={'modal-header'}>
-                        {title && <JRCH3>{title}</JRCH3>}
-                        {displayHeaderButtons}
-                        {showIconClose && (
-                            <JRCModalClose>
-                                <JRCIconButton icon="icon-times" onClick={closeModal} />
-                            </JRCModalClose>
-                        )}
-                    </JRCModalHeader>
-                )}
-
-                <JRCModalContent className="modal-content">{children}</JRCModalContent>
-
-                {buttons ? (
-                    <JRCModalFooter>
-                        {buttons.map((button: JRCModalButtonType, index: number) => (
-                            <JRCButton
-                                key={index}
-                                color={button.color}
-                                variant={button.variant}
-                                onClick={button.isClosed ? closeModal : clickHandlerList[index]}>
-                                {button.children}
-                            </JRCButton>
-                        ))}
-                    </JRCModalFooter>
-                ) : null}
-            </JRCModalContainerClickAway>
-        </JRCModalBox>
-    );
-
-    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,
-            );
+        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 className={'modal-header'}>
+                            {title && <JRCH3>{title}</JRCH3>}
+                            {displayHeaderButtons}
+                            {showIconClose && (
+                                <JRCModalClose>
+                                    <JRCIconButton icon="icon-times" onClick={closeModal} />
+                                </JRCModalClose>
+                            )}
+                        </JRCModalHeader>
+                    )}
+
+                    <JRCModalContent className="modal-content">{children}</JRCModalContent>
+
+                    {buttons ? (
+                        <JRCModalFooter>
+                            {buttons.map((button: JRCModalButtonType, index: number) => (
+                                <JRCButton
+                                    key={index}
+                                    color={button.color}
+                                    variant={button.variant}
+                                    onClick={button.isClosed ? closeModal : clickHandlerList[index]}>
+                                    {button.children}
+                                </JRCButton>
+                            ))}
+                        </JRCModalFooter>
+                    ) : null}
+                </JRCModalContainerClickAway>
+            </JRCModalBox>
+        );
+
+        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;
-}
+        return null;
+    },
 );
 
 export default JRCModal;

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/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>
+    );
+};

package/src/components/Templates/JRCTemplate.stories.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import { JRCTemplateBase, JRCTemplateBaseProps } from './JRCBase.template';
+import { Story } from '@storybook/react';
+import { JRCTemplateTwoColumns, JRCTemplateTwoColumnsProps } from './JRCTwoColumns.template';
+
+export default {
+    title: 'JRCTemplateBase',
+    component: JRCTemplateBase,
+};
+
+const Template: Story<JRCTemplateBaseProps> = (args: JRCTemplateBaseProps) => {
+    return <JRCTemplateBase {...args}>{args.children}</JRCTemplateBase>;
+};
+
+export const BaseTemplateDemo = Template.bind({});
+BaseTemplateDemo.args = {
+    children: 'App content',
+    title: 'content title',
+};
+export const BaseTemplateDemoLoading = Template.bind({});
+BaseTemplateDemoLoading.args = {
+    children: 'App content',
+    isLoading: true,
+    title: 'content title',
+};
+
+const TemplateWithLeftColumn: Story<JRCTemplateTwoColumnsProps<any>> = (args: JRCTemplateTwoColumnsProps<any>) => {
+    return <JRCTemplateTwoColumns {...args}>{args.children}</JRCTemplateTwoColumns>;
+};
+
+export const TemplateWithLeftColumnDemo = TemplateWithLeftColumn.bind({});
+TemplateWithLeftColumnDemo.args = {
+    children: 'App content',
+    title: 'content title',
+    leftColumn: {
+        icon: 'icon-edit',
+        color: 'red',
+        title: 'App title',
+        description: 'description',
+    },
+};
+
+export const TemplateWithLeftColumnDemoLoading = TemplateWithLeftColumn.bind({});
+
+TemplateWithLeftColumnDemoLoading.args = {
+    children: 'App content',
+    title: 'content title',
+    isLoading: true,
+    leftColumn: {
+        icon: 'icon-edit',
+        color: 'red',
+        title: 'App title',
+        description: 'description',
+    },
+};

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

@@ -0,0 +1,20 @@
+import { JRCAppContainer, JRCAppLeftColumn } from 'index';
+import * as React from 'react';
+import { JRCAppLeftColumnProps, SectionEntry } from 'types';
+import { ChildrenContainer, JRCTemplateBaseProps } from './JRCBase.template';
+
+export type JRCTemplateTwoColumnsProps<T extends SectionEntry> = {
+    leftColumn: JRCAppLeftColumnProps<T>;
+} & JRCTemplateBaseProps;
+
+export const JRCTemplateTwoColumns: React.FC<any> = <T extends SectionEntry>(props: JRCTemplateTwoColumnsProps<T>) => {
+    const { icon, color, title, description } = props.leftColumn;
+    return (
+        <JRCAppContainer>
+            <JRCAppLeftColumn icon={icon} color={color} title={title} description={description} />
+            <ChildrenContainer title={props.title} isLoading={props.isLoading}>
+                {props.children}
+            </ChildrenContainer>
+        </JRCAppContainer>
+    );
+};

package/src/index.tsx

@@ -10,6 +10,7 @@ import * as jamespotUserApi from 'jamespot-user-api';
 import * as reactDnd from 'react-dnd';
 import * as reactDndHtml5Backend from 'react-dnd-html5-backend';
 import * as reactHookForm from 'react-hook-form';
+import * as reactRouterDom from 'react-router-dom';
 
 /****
  * DECLARE SHARED LIBRARIES ON GLOBAL
@@ -29,6 +30,7 @@ declare global {
         reactDnd: any;
         reactDndHtml5Backend: any;
         reactHookForm: any;
+        reactRouterDom: any;
     }
 }
 
@@ -45,6 +47,7 @@ window.styledComponents = styled;
 window.reactDnd = reactDnd;
 window.reactDndHtml5Backend = reactDndHtml5Backend;
 window.reactHookForm = reactHookForm;
+window.reactRouterDom = reactRouterDom;
 
 /****
  *
@@ -56,6 +59,7 @@ import JRCAlert from './components/JRCAlert/JRCAlert';
 export { JRCAlert };
 
 export { JRCAppHeader } from './components/JRCAppHeader/JRCAppHeader';
+
 export { JRCAppContainer } from './components/JRCAppContainer/JRCAppContainer';
 export { JRCAppLeftColumn } from './components/JRCAppLeftColumn/JRCAppLeftColumn';
 
@@ -79,9 +83,6 @@ export { JRCCard } from './components/JRCCard/JRCCard';
 import JRCColumnCenter from './components/JRCColumnCenter/JRCColumnCenter';
 export { JRCColumnCenter };
 
-import JRCColumnCenterTitle from './components/JRCColumnCenterTitle/JRCColumnCenterTitle';
-export { JRCColumnCenterTitle };
-
 import JRCColumnLeft from './components/JRCColumnLeft/JRCColumnLeft';
 export { JRCColumnLeft };
 
@@ -173,6 +174,7 @@ import { JRCH1, JRCH2, JRCH3, JRCH4, JRCH5, JRCText } from './components/JRCTypo
 export { JRCH1, JRCH2, JRCH3, JRCH4, JRCH5, JRCText };
 
 import { JRCTypography } from './components/JRCTypography/JRCTypography';
+import { JRCAppHeader } from 'components/JRCAppHeader/JRCAppHeader';
 export { JRCTypography };
 
 export { JRCValidationButton } from './components/JRCButton/JRCValidationButton';
@@ -195,6 +197,9 @@ export { JRCInputText } from './components/Form/Input/JRCInputText/JRCInputText'
 export { JRCInputTextarea } from './components/Form/Input/JRCInputTextarea/JRCInputTextarea';
 export { JRCInputDate } from './components/Form/Input/JRCInputDate/JRCInputDate';
 
+export { JRCTemplateBase } from './components/Templates/JRCBase.template';
+export { JRCTemplateTwoColumns } from './components/Templates/JRCTwoColumns.template';
+
 /****
  *
  * PLEASE RESPECT ALPHABETICAL ORDER