@pagopa/selfcare-common-frontend 0.0.5 → 0.1.1

package/README.md

@@ -53,7 +53,7 @@ FilterModalConfig fields:
 |-------|------|-----------|-------------|
 | data | Array<T> | Y | The list of values between to which choose |
 | getLabel | (e: T) => string | Y | A function that will select the label to show |
-| getValue | (e: T) => V | Y | A function that will select the value to return when selecting an item |
+| getValue | (e: T) => string | Y | A function that will select the value to return when selecting an item |
 | onFilterChange | (v: V) => void | Y | The function invoked when selecting a value |
 
 ## SessionModal
@@ -80,8 +80,8 @@ Selfcare's page title
 |------|------|-----------|-------------|
 | title | string | Y | The title to show |
 | subTitle | string | N | The subtitle to show |
+| mtTitle | number | N | The margin top of the title |
 | mbTitle | GridSize | N | The margin bottom of the title |
-| mtGrid | number | N | The margin top of the title |
 | mbSubTitle | number | N | The margin bottom of the subtitle |
 | variantTitle | Variant | N | The variant of the Typografy used for the title |
 | variantSubTitle | Variant | N | The variant of the Typografy used for the subtitle |
@@ -91,9 +91,11 @@ Selfcare's toast
 
 | Prop | Type | Mandatory | Description |
 |------|------|-----------|-------------|
+| open | boolean | Y | If this component should be displayed or not |
+| logo | React.ElementType | N | The logo to be rendered. As default a confirm logo will be used |
 | title | string | Y | The toast title |
 | message | React.ReactNode | Y | The toast body |
-| closeToast | React.MouseEventHandler<HTMLButtonElement> | Y | The function to be invoked when closing the toast |
+| closeToast | ()=>void | Y | The function to be invoked when closing the toast |
 
 # Common decorators used in pagopa/selfcare react projects
 ## withLogin

package/build.info

@@ -1,2 +1,2 @@
-20220119.6 - selfcare-common-frontend.deploy(17190)
-tags/v0.0.5^0 930c8a6a4973ded1701d2842995282f893e56aba
+20220120.2 - selfcare-common-frontend.deploy(17331)
+tags/v0.1.1^0 01a75c35fd9797944fbc4d330218a6a794d04cfa

package/common-polyfill.d.ts

@@ -0,0 +1,8 @@
+import 'react-app-polyfill/ie11';
+import 'core-js/es/object/entries';
+import 'core-js/es/object/values';
+import 'core-js/es/promise';
+import 'core-js/es/array';
+import 'core-js/stable/string';
+import 'core-js/stable/number';
+import 'core-js/stable/url-search-params';

package/common-polyfill.js

@@ -0,0 +1,8 @@
+import 'react-app-polyfill/ie11';
+import 'core-js/es/object/entries';
+import 'core-js/es/object/values';
+import 'core-js/es/promise';
+import 'core-js/es/array';
+import 'core-js/stable/string';
+import 'core-js/stable/number';
+import 'core-js/stable/url-search-params';

package/components/CustomAvatar.d.ts

@@ -1,10 +1,17 @@
 declare type Props = {
+    /** The id attribute added to the element */
+    id?: string;
+    /** The logo src */
     customSrc?: string | undefined;
+    /** The alt text showed instead of the image */
     customAlt?: string | undefined;
+    /** Logo width */
     customWidth?: string | undefined;
+    /** Logo height */
     customHeight?: string | undefined;
+    /** If true it will not display the component */
     loading?: boolean;
-    id?: string;
 };
+/** Avatar to use to load Organization logo */
 export default function CustomAvatar({ customAlt, customSrc, customWidth, customHeight, id, loading, }: Props): JSX.Element;
 export {};

package/components/CustomAvatar.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
 import { Avatar } from '@mui/material';
+/** Avatar to use to load Organization logo */
 export default function CustomAvatar({ customAlt, customSrc, customWidth, customHeight, id, loading, }) {
     return (_jsx(React.Fragment, { children: _jsx(Avatar, { id: id, alt: customAlt, src: customSrc, sx: {
                 width: customWidth,

package/components/CustomPagination.d.ts

@@ -1,9 +1,13 @@
 import { Page } from '../model/Page';
 import { PageRequest } from '../model/PageRequest';
 declare type Props = {
+    /** The actual page */
     page: Page;
+    /** The actual sort applied */
     sort?: string;
+    /** The function to be invoked if the user change page */
     onPageRequest: (r: PageRequest) => void;
 };
+/** Selfcare custom table available pages component */
 export default function CustomPagination({ page, onPageRequest, sort }: Props): JSX.Element;
 export {};

package/components/CustomPagination.js

@@ -12,6 +12,7 @@ const getLabelDisplayedRowsTo = (count, page, size) => {
     }
     return size === -1 ? count : Math.min(count, (page + 1) * size);
 };
+/** Selfcare custom table available pages component */
 export default function CustomPagination({ page, onPageRequest, sort }) {
     const count = page.totalElements;
     const from = count === 0 ? 0 : page.number * page.size + 1;
@@ -20,5 +21,6 @@ export default function CustomPagination({ page, onPageRequest, sort }) {
                             page: value - 1,
                             size: page.size,
                             sort,
-                        }), window.scrollTo(0, 0)) }, void 0)) }), void 0)] }), void 0) }, void 0));
+                        }),
+                            window.scrollTo(0, 0)) }, void 0)) }), void 0)] }), void 0) }, void 0));
 }

package/components/ErrorBoundary/ErrorBoundary.js

@@ -7,6 +7,12 @@ import { appStateActions, appStateSelectors } from '../../redux/slices/appStateS
 import { handleErrors } from '../../services/errorService';
 import SessionModal from '../SessionModal';
 import BlockingErrorPage from './components/BlockingErrorPage';
+/** This feature is based on react-redux library and require to register the reducer build in appStateSlice into the application's redux store.
+It allows to dispatch errors in order to display a warning or the error page to the user.
+Errors dispatched will be notified using errorService
+
+To use this feature you have to put ErrorBOundary in your App as a child of a redux Provider component.
+In order to dispatch an error you have to use the custom hook useErrorDispatcher which will return a fuction to be used to dispatch the error. */
 class ErrorBoundary extends Component {
     componentDidCatch(error, errorInfo) {
         this.props.addError({

package/components/FilterModal.d.ts

@@ -1,17 +1,28 @@
 import * as React from 'react';
 declare type Props = {
+    /** If the popup is to be displayed */
     open: boolean;
+    /** The function to be invoked when clicking on exit button or selecting a value */
     handleClose: React.MouseEventHandler<HTMLButtonElement>;
+    /** The popup title */
     title: string;
+    /** @see FilterModalConfig */
     filterModalConfig?: FilterModalConfig<any, any>;
+    /** The popup height */
     height?: string;
+    /** The popup minHeight */
     minHeight?: string;
 };
 export declare type FilterModalConfig<T, V> = {
+    /** The list of values between to which choose */
     data: Array<T>;
+    /** A function that will select the label to show */
     getLabel: (e: T) => string;
-    getValue: (e: T) => V;
+    /** A function that will select the value to return when selecting an item */
+    getValue: (e: T) => string;
+    /** The function invoked when selecting a value */
     onFilterChange: (v: V) => void;
 };
+/** Modal used to show a list of values from which to choose a single value */
 export default function FilterModal({ open, handleClose, title, filterModalConfig, height, minHeight, }: Props): JSX.Element;
 export {};

package/components/FilterModal.js

@@ -5,12 +5,13 @@ import Dialog from '@mui/material/Dialog';
 import useMediaQuery from '@mui/material/useMediaQuery';
 import { useTheme } from '@mui/material/styles';
 import ClearOutlinedIcon from '@mui/icons-material/ClearOutlined';
+/** Modal used to show a list of values from which to choose a single value */
 export default function FilterModal({ open, handleClose, title, filterModalConfig, height = '16em', minHeight = '16em', }) {
     const theme = useTheme();
     const fullScreen = useMediaQuery(theme.breakpoints.down('xs'));
     const [valueRadio, setValueRadio] = React.useState('');
-    const handleChange = (event) => {
-        setValueRadio(event.target.value);
+    const handleChange = (_, value) => {
+        setValueRadio(value);
     };
     const submitFilter = (event) => {
         const i = data.filter((value) => value.id === valueRadio).map((x) => x)[0];

package/components/Footer/Footer.d.ts

@@ -1,5 +1,7 @@
 declare type Props = {
+    /** The email to which the assistance button will ask to send an email */
     assistanceEmail?: string;
 };
+/** SelfCare Footer component */
 declare const Footer: ({ assistanceEmail }: Props) => JSX.Element;
 export default Footer;

package/components/Footer/Footer.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Grid, Link, SvgIcon, Typography } from '@mui/material';
 import { ReactComponent as logo } from '../../assets/logo_pago_pa.svg';
+/** SelfCare Footer component */
 const Footer = ({ assistanceEmail }) => (_jsxs(Box, Object.assign({ component: "footer", sx: {
         pt: '32px',
         height: '156px',

package/components/Header/Header.d.ts

@@ -1,8 +1,12 @@
 /// <reference types="react" />
 declare type HeaderProps = {
+    /** if true, it will render an other toolbar under the Header */
     withSecondHeader: boolean;
+    /** The function to be invoked when pressing the rendered logout button, if not defined it will redirect to the logout page, if setted to null it will no render the logout button. It's possible to modify the logout path changing the value in CONFIG.logout inside the index.tsx file */
     onExitAction?: (() => void) | null;
+    /** If withSecondHeader is true, this component will be rendered at the end of the secondary toolbar */
     subHeaderChild?: React.ReactNode;
 };
+/** SelfCare Header component */
 declare const Header: ({ withSecondHeader, onExitAction, subHeaderChild, }: HeaderProps) => JSX.Element;
 export default Header;

package/components/Header/Header.js

@@ -5,6 +5,7 @@ import { Fragment } from 'react';
 import { ReactComponent as logo } from '../../assets/logo_pago_pa_mini.svg';
 import { CONFIG } from '../../config/env';
 import SubHeader from './subHeader/SubHeader';
+/** SelfCare Header component */
 const Header = ({ withSecondHeader, onExitAction = () => window.location.assign(CONFIG.URL_FE.LOGOUT), subHeaderChild, }) => (_jsxs(Fragment, { children: [_jsx(AppBar, Object.assign({ position: "relative", sx: {
                 alignItems: 'center',
                 height: '48px',

package/components/Loading/LoadingOverlay.d.ts

@@ -1 +1,6 @@
-export declare function LoadingOverlay(): JSX.Element;
+/** This feature is based on react-redux library and require to register the reducer build in appStateSlice into the application's redux store.
+It allows to draw a loader when an async task to wait is running.
+
+To use this feature you have to put LoadingOverlay in your App as a child of a redux Provider component.
+In order to register the start of an async task you have to use the custom hook useLoading passing the id of the task to await, which will return a setter function used to start and end the loading behavior. */
+export default function LoadingOverlay(): JSX.Element;

package/components/Loading/LoadingOverlay.js

@@ -4,7 +4,12 @@ import { Box } from '@mui/system';
 import MDSpinner from 'react-md-spinner';
 import { useSelector } from 'react-redux';
 import { appStateSelectors } from '../../redux/slices/appStateSlice';
-export function LoadingOverlay() {
+/** This feature is based on react-redux library and require to register the reducer build in appStateSlice into the application's redux store.
+It allows to draw a loader when an async task to wait is running.
+
+To use this feature you have to put LoadingOverlay in your App as a child of a redux Provider component.
+In order to register the start of an async task you have to use the custom hook useLoading passing the id of the task to await, which will return a setter function used to start and end the loading behavior. */
+export default function LoadingOverlay() {
     const theme = useTheme();
     const loading = useSelector(appStateSelectors.selectLoading);
     return (_jsx(Modal, Object.assign({ open: loading, sx: { outline: 0 } }, { children: _jsx(Box, Object.assign({ sx: {

package/components/SessionModal.d.ts

@@ -1,16 +1,28 @@
 import * as React from 'react';
 declare type Props = {
+    /** If this component should be displayed or not */
     open: boolean;
+    /** The title to show in the popup */
     title: string;
+    /** The body to show in the popup */
     message: React.ReactNode;
+    /** If defined, it will render a confirm button using this function as behavior */
     onConfirm?: React.MouseEventHandler<HTMLButtonElement> | undefined;
+    /** The confirm label text */
     onConfirmLabel?: string;
+    /** The function invoked when clicking on close button or in the showed X icon */
     handleClose: React.MouseEventHandler<HTMLButtonElement> | undefined;
+    /** If defined, it allow to set a different behavior when clicking on X icon */
     handleExit?: React.MouseEventHandler<HTMLButtonElement> | undefined;
+    /** Close button text */
     onCloseLabel?: string;
+    /** The popup height */
     height?: string;
+    /** The popup minHeight */
     minHeight?: string;
+    /** The popup width */
     width?: string;
 };
+/** Selfcare's popup */
 export default function SessionModal({ open, title, message, onConfirm, onConfirmLabel, handleClose, handleExit, onCloseLabel, height, minHeight, width, }: Props): JSX.Element;
 export {};

package/components/SessionModal.js

@@ -4,6 +4,7 @@ import Dialog from '@mui/material/Dialog';
 import useMediaQuery from '@mui/material/useMediaQuery';
 import { useTheme } from '@mui/material/styles';
 import ClearOutlinedIcon from '@mui/icons-material/ClearOutlined';
+/** Selfcare's popup */
 export default function SessionModal({ open, title, message, onConfirm, onConfirmLabel = 'Riprova', handleClose, handleExit = handleClose, onCloseLabel = 'Annulla', height = '16em', minHeight = '16em', width = '21.9em', }) {
     const theme = useTheme();
     const fullScreen = useMediaQuery(theme.breakpoints.down('xs'));

package/components/TitleBox.d.ts

@@ -1,13 +1,21 @@
 import { GridSize } from '@mui/material';
 import { Variant } from '@mui/material/styles/createTypography';
 declare type Props = {
+    /** The title to show */
     title: string;
+    /** The subtitle to show */
     subTitle?: string;
+    /** The margin top of the title */
+    mtTitle?: number;
+    /** The margin bottom of the title */
     mbTitle?: GridSize;
-    mtGrid?: number;
+    /** The margin bottom of the subtitle */
     mbSubTitle?: number;
+    /** The variant of the Typografy used for the title */
     variantTitle?: Variant;
+    /** The variant of the Typografy used for the subtitle */
     variantSubTitle?: Variant;
 };
-export default function TitleBox({ title, subTitle, mbTitle, mtGrid, mbSubTitle, variantTitle, variantSubTitle, }: Props): JSX.Element;
+/** Selfcare's page title */
+export default function TitleBox({ title, subTitle, mbTitle, mtTitle, mbSubTitle, variantTitle, variantSubTitle, }: Props): JSX.Element;
 export {};

package/components/TitleBox.js

@@ -3,6 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // import { Box } from '@mui/material';
 import { Typography } from '@mui/material';
 import { Grid } from '@mui/material';
-export default function TitleBox({ title, subTitle, mbTitle = 2, mtGrid, mbSubTitle, variantTitle = 'h1', variantSubTitle = 'h5', }) {
-    return (_jsxs(Grid, Object.assign({ container: true, mt: mtGrid }, { children: [_jsx(Grid, Object.assign({ item: true, xs: 12, mb: mbTitle }, { children: _jsx(Typography, Object.assign({ variant: variantTitle }, { children: title }), void 0) }), void 0), _jsx(Grid, Object.assign({ item: true, xs: 12, mb: mbSubTitle }, { children: _jsx(Typography, Object.assign({ variant: variantSubTitle, sx: { fontSize: '18px' } }, { children: subTitle }), void 0) }), void 0)] }), void 0));
+/** Selfcare's page title */
+export default function TitleBox({ title, subTitle, mbTitle = 2, mtTitle, mbSubTitle, variantTitle = 'h1', variantSubTitle = 'h5', }) {
+    return (_jsxs(Grid, Object.assign({ container: true, mt: mtTitle }, { children: [_jsx(Grid, Object.assign({ item: true, xs: 12, mb: mbTitle }, { children: _jsx(Typography, Object.assign({ variant: variantTitle }, { children: title }), void 0) }), void 0), _jsx(Grid, Object.assign({ item: true, xs: 12, mb: mbSubTitle }, { children: _jsx(Typography, Object.assign({ variant: variantSubTitle, sx: { fontSize: '18px' } }, { children: subTitle }), void 0) }), void 0)] }), void 0));
 }

package/components/Toast.d.ts

@@ -1,8 +1,18 @@
-/// <reference types="react" />
+import React from 'react';
 declare type Props = {
+    /** If this component should be displayed or not */
+    open: boolean;
+    /** The logo to be rendered. As default a confirm logo will be used */
+    logo?: React.ElementType;
+    /** The logo to be rendered. As default a confirm logo will be used */
+    leftBorderColor?: string;
+    /** The toast title */
     title: string;
+    /** The toast body */
     message: React.ReactNode;
-    closeToast: React.MouseEventHandler<HTMLButtonElement>;
+    /** The function to be invoked when closing the toast */
+    onCloseToast: () => void;
 };
-export default function Toast({ title, message, closeToast }: Props): JSX.Element;
+/** Selfcare's toast */
+export default function Toast({ open, title, message, onCloseToast, logo, leftBorderColor, }: Props): JSX.Element;
 export {};

package/components/Toast.js

@@ -1,22 +1,24 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Alert, Grid, SvgIcon, Typography, Box, IconButton } from '@mui/material';
+import { Fragment } from 'react';
+import { Alert, Grid, SvgIcon, Typography, IconButton } from '@mui/material';
 import { styled } from '@mui/system';
 import CloseIcon from '@mui/icons-material/Close';
-import { ReactComponent as logo } from '../assets/confirmUserUpdate.svg';
+import { ReactComponent as confirmLogo } from '../assets/confirmUserUpdate.svg';
 const CustomAlert = styled(Alert)({
     '.MuiAlert-icon': { display: 'none' },
 });
-export default function Toast({ title, message, closeToast }) {
-    return (_jsx(Grid, Object.assign({ container: true, justifyContent: "end", px: 2 }, { children: _jsx(Grid, Object.assign({ item: true, xs: 12, display: "flex", justifyContent: "flex-end" }, { children: _jsx(Box, Object.assign({ sx: {} }, { children: _jsx(CustomAlert, Object.assign({ className: "userToast", variant: "outlined", sx: {
-                        position: 'fixed',
-                        bottom: '64px',
-                        right: '64px',
-                        zIndex: 100,
-                        width: '376px',
-                        backgroundColor: 'white',
-                        borderLeft: '4px solid #00CF86 !important',
-                        borderRadius: '5px',
-                        boxShadow: '0px 0px 45px rgba(0, 0, 0, 0.1) ',
-                        border: 'none',
-                    } }, { children: _jsxs(Grid, Object.assign({ container: true }, { children: [_jsx(Grid, Object.assign({ item: true, xs: 2 }, { children: _jsx(SvgIcon, { component: logo, viewBox: "0 0 80 24", sx: { width: '80px', height: '37px', marginLeft: '13px' } }, void 0) }), void 0), _jsxs(Grid, Object.assign({ item: true, xs: 8 }, { children: [_jsx(Typography, Object.assign({ pt: 1, pb: 1, sx: { fontSize: '15px', fontWeight: '600' } }, { children: title }), void 0), _jsx(Typography, { children: message }, void 0)] }), void 0), _jsx(Grid, Object.assign({ item: true, xs: 2 }, { children: _jsx(IconButton, Object.assign({ onClick: closeToast }, { children: _jsx(CloseIcon, {}, void 0) }), void 0) }), void 0)] }), void 0) }), void 0) }), void 0) }), void 0) }), void 0));
+/** Selfcare's toast */
+export default function Toast({ open, title, message, onCloseToast, logo = confirmLogo, leftBorderColor = '#00CF86', }) {
+    return (_jsx(Fragment, { children: open && (_jsx(CustomAlert, Object.assign({ className: "userToast", variant: "outlined", sx: {
+                position: 'fixed',
+                bottom: '64px',
+                right: '64px',
+                zIndex: 100,
+                width: '376px',
+                backgroundColor: 'white',
+                borderLeft: `4px solid ${leftBorderColor} !important`,
+                borderRadius: '5px',
+                boxShadow: '0px 0px 45px rgba(0, 0, 0, 0.1) ',
+                border: 'none',
+            } }, { children: _jsxs(Grid, Object.assign({ container: true }, { children: [_jsx(Grid, Object.assign({ item: true, xs: 2 }, { children: _jsx(SvgIcon, { component: logo, viewBox: "0 0 80 24", sx: { width: '80px', height: '37px', marginLeft: '13px' } }, void 0) }), void 0), _jsxs(Grid, Object.assign({ item: true, xs: 8 }, { children: [_jsx(Typography, Object.assign({ pt: 1, pb: 1, sx: { fontSize: '15px', fontWeight: '600' } }, { children: title }), void 0), _jsx(Typography, { children: message }, void 0)] }), void 0), _jsx(Grid, Object.assign({ item: true, xs: 2 }, { children: _jsx(IconButton, Object.assign({ onClick: onCloseToast }, { children: _jsx(CloseIcon, {}, void 0) }), void 0) }), void 0)] }), void 0) }), void 0)) }, void 0));
 }

package/config/env.d.ts

@@ -4,6 +4,6 @@ export declare const CONFIG: {
         LOGOUT: string;
     };
     MOCKS: {
-        MOCK_USER: string;
+        MOCK_USER: boolean;
     };
 };

package/config/env.js

@@ -1,9 +1,10 @@
+import * as env from 'env-var';
 export const CONFIG = {
     URL_FE: {
         LOGIN: '/auth/login',
         LOGOUT: '/auth/logout',
     },
     MOCKS: {
-        MOCK_USER: process.env.REACT_APP_MOCK_USER,
+        MOCK_USER: env.get('REACT_APP_MOCK_USER').default('false').asBool(),
     },
 };

package/decorators/withLogin.d.ts

@@ -1,4 +1,8 @@
 /// <reference types="react" />
 declare type LoginProps = {};
+/** This feature is based on react-redux library and require to register the reducer build in userSlice into the application's redux store.
+This decorator has to be applied to components whose acces require an active session.
+Accessing to the components decorated with it without a session will brought to the login page.
+It's possible to modify the login path changing the value in CONFIG.login inside the index.tsx file  */
 export default function withLogin<T extends LoginProps>(WrappedComponent: React.ComponentType<T>): React.ComponentType<T>;
 export {};

package/decorators/withLogin.js

@@ -5,6 +5,10 @@ import useLoading from '../hooks/useLoading';
 import { useLogin } from '../hooks/useLogin';
 import { userSelectors } from '../redux/slices/userSlice';
 import { LOADING_TASK_LOGIN_CHECK } from '../utils/constants';
+/** This feature is based on react-redux library and require to register the reducer build in userSlice into the application's redux store.
+This decorator has to be applied to components whose acces require an active session.
+Accessing to the components decorated with it without a session will brought to the login page.
+It's possible to modify the login path changing the value in CONFIG.login inside the index.tsx file  */
 export default function withLogin(WrappedComponent) {
     const displayName = WrappedComponent.displayName || WrappedComponent.name || 'Component';
     const ComponentWithLogin = (props) => {

package/hooks/useErrorDispatcher.d.ts

@@ -1,2 +1,3 @@
 import { AppError } from '../redux/slices/appStateSlice';
+/** @see ErrorBoundary */
 export default function (): (error: AppError) => void;

package/hooks/useErrorDispatcher.js

@@ -1,5 +1,6 @@
 import { useDispatch } from 'react-redux';
 import { appStateActions } from '../redux/slices/appStateSlice';
+/** @see ErrorBoundary */
 export default function () {
     const dispatch = useDispatch();
     return (error) => dispatch(appStateActions.addError(error));

package/hooks/useLoading.d.ts

@@ -1 +1,2 @@
+/** @see LoadingOverlay */
 export default function (task: string): (loading: boolean) => void;

package/hooks/useLoading.js

@@ -2,6 +2,7 @@ import { uniqueId } from 'lodash';
 import { useRef } from 'react';
 import { useDispatch } from 'react-redux';
 import { appStateActions } from '../redux/slices/appStateSlice';
+/** @see LoadingOverlay */
 export default function (task) {
     const dispatch = useDispatch();
     const ref = useRef(uniqueId());

package/hooks/useLogin.js

@@ -9,7 +9,7 @@ export const useLogin = () => {
     const dispatch = useDispatch();
     const setUser = (user) => dispatch(userActions.setLoggedUser(user));
     const attemptSilentLogin = async () => {
-        if (CONFIG.MOCKS.MOCK_USER === 'true') {
+        if (CONFIG.MOCKS.MOCK_USER) {
             setUser({
                 uid: '0',
                 taxCode: 'AAAAAA00A00A000A',

package/index.d.ts

@@ -1,10 +1,20 @@
+export { default as Header } from './components/Header/Header';
 export * from './components/Header/Header';
+export { default as Footer } from './components/Footer/Footer';
 export * from './components/Footer/Footer';
+export { default as CustomAvatar } from './components/CustomAvatar';
 export * from './components/CustomAvatar';
+export { default as CustomPagination } from './components/CustomPagination';
 export * from './components/CustomPagination';
+export { default as FilterModal } from './components/FilterModal';
 export * from './components/FilterModal';
+export { default as SessionModal } from './components/SessionModal';
 export * from './components/SessionModal';
+export { default as TitleBox } from './components/TitleBox';
 export * from './components/TitleBox';
+export { default as Toast } from './components/Toast';
 export * from './components/Toast';
+export { default as ErrorBoundary } from './components/ErrorBoundary/ErrorBoundary';
 export * from './components/ErrorBoundary/ErrorBoundary';
+export { default as LoadingOverlay } from './components/Loading/LoadingOverlay';
 export * from './components/Loading/LoadingOverlay';

package/index.js

@@ -1,10 +1,20 @@
+export { default as Header } from './components/Header/Header';
 export * from './components/Header/Header';
+export { default as Footer } from './components/Footer/Footer';
 export * from './components/Footer/Footer';
+export { default as CustomAvatar } from './components/CustomAvatar';
 export * from './components/CustomAvatar';
+export { default as CustomPagination } from './components/CustomPagination';
 export * from './components/CustomPagination';
+export { default as FilterModal } from './components/FilterModal';
 export * from './components/FilterModal';
+export { default as SessionModal } from './components/SessionModal';
 export * from './components/SessionModal';
+export { default as TitleBox } from './components/TitleBox';
 export * from './components/TitleBox';
+export { default as Toast } from './components/Toast';
 export * from './components/Toast';
+export { default as ErrorBoundary } from './components/ErrorBoundary/ErrorBoundary';
 export * from './components/ErrorBoundary/ErrorBoundary';
+export { default as LoadingOverlay } from './components/Loading/LoadingOverlay';
 export * from './components/Loading/LoadingOverlay';

package/package.json

@@ -1,7 +1,10 @@
 {
   "name": "@pagopa/selfcare-common-frontend",
-  "version": "0.0.5",
+  "description": "Shared React components for the pagopa selfcare project",
+  "version": "0.1.1",
   "license": "MIT",
+  "repository": "https://github.com/pagopa/selfcare-common-frontend",
+  "author": "https://www.pagopa.gov.it",
   "private": false,
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/redux/slices/appStateSlice.d.ts

@@ -1,15 +1,24 @@
 import { PayloadAction } from '@reduxjs/toolkit';
 import { ErrorInfo } from 'react';
 export declare type AppError = {
+    /** The identifier used to recognize the error: it cannot be possible to have the same error id at the same time */
     id: string;
+    /** The Error thrown */
     error: Error;
     errorInfo?: ErrorInfo;
+    /** If true, this error will show the error page, not allowing the user to do anything, otherwise it will show a closable popup */
     blocking: boolean;
+    /** A description of the error to send when notifying the error */
     techDescription: string;
+    /** A text to show as title of the popup when a not blocking error occurs */
     displayableTitle?: string;
+    /** A text to show as body of the popup when a not blocking error occurs */
     displayableDescription?: string;
+    /** If defined, in case of not blocking error, it will render a retry button which will execute this function */
     onRetry?: () => void;
+    /** If defined, in case of not blocking error, it will be executed when closing the popup */
     onClose?: () => void;
+    /** If true, it will notify the error */
     toNotify: boolean;
 };
 interface AppStateState {