diff --git a/package-lock.json b/package-lock.json index ac244fa5f..678d1d6e8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@equinor/amplify-component-lib", - "version": "8.4.0", + "version": "8.4.1", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@equinor/amplify-component-lib", - "version": "8.4.0", + "version": "8.4.1", "license": "ISC", "dependencies": { "@azure/msal-browser": "3.10.0", diff --git a/package.json b/package.json index 8e14bb3e7..8bfc1523a 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@equinor/amplify-component-lib", - "version": "8.4.0", + "version": "8.4.1", "description": "Frontend Typescript components for the Amplify team", "main": "dist/index.js", "types": "dist/index.d.ts", diff --git a/src/atoms/types/Environment.ts b/src/atoms/enums/Environment.ts similarity index 100% rename from src/atoms/types/Environment.ts rename to src/atoms/enums/Environment.ts diff --git a/src/atoms/enums/Errors.ts b/src/atoms/enums/Errors.ts new file mode 100644 index 000000000..0c8bf552c --- /dev/null +++ b/src/atoms/enums/Errors.ts @@ -0,0 +1,8 @@ +export enum ErrorType { + ERROR_400 = '400', + ERROR_401 = '401', + ERROR_403 = '403', + ERROR_404 = '404', + ERROR_500 = '500', + DEFAULT = 'default', +} diff --git a/src/atoms/enums/index.ts b/src/atoms/enums/index.ts new file mode 100644 index 000000000..c5b4eb57a --- /dev/null +++ b/src/atoms/enums/index.ts @@ -0,0 +1,2 @@ +export * from './Errors'; +export * from './Environment'; diff --git a/src/atoms/hooks/useReleaseNotesQuery.ts b/src/atoms/hooks/useReleaseNotesQuery.ts index 0850854cd..4ac1ef549 100644 --- a/src/atoms/hooks/useReleaseNotesQuery.ts +++ b/src/atoms/hooks/useReleaseNotesQuery.ts @@ -4,7 +4,7 @@ import { } from '@equinor/subsurface-app-management'; import { useQuery } from '@tanstack/react-query'; -import { environment } from 'src/atoms/utils'; +import { environment } from '../utils/auth_environment'; const { getAppName } = environment; diff --git a/src/atoms/hooks/useSignalRMessages.ts b/src/atoms/hooks/useSignalRMessages.ts index 65c9ca3e6..38faaa6a6 100644 --- a/src/atoms/hooks/useSignalRMessages.ts +++ b/src/atoms/hooks/useSignalRMessages.ts @@ -6,8 +6,8 @@ import { LogLevel } from '@microsoft/signalr'; import { HubConnection } from '@microsoft/signalr/dist/esm/HubConnection'; import { useQuery } from '@tanstack/react-query'; +import { EnvironmentType } from 'src/atoms/enums/Environment'; import { usePrevious } from 'src/atoms/hooks/usePrevious'; -import { EnvironmentType } from 'src/atoms/types/Environment'; import { environment } from 'src/atoms/utils/auth_environment'; /* c8 ignore start */ diff --git a/src/atoms/index.ts b/src/atoms/index.ts index 86d52ced0..dfeebe5ce 100644 --- a/src/atoms/index.ts +++ b/src/atoms/index.ts @@ -1,5 +1,6 @@ export * from './hooks'; -export * as style from './style'; +export * from './style'; export type * from './types'; +export * from './enums'; export * from './icons'; export * from './utils'; diff --git a/src/atoms/style/colors.ts b/src/atoms/style/colors.ts index 1375f21e6..945be86e5 100644 --- a/src/atoms/style/colors.ts +++ b/src/atoms/style/colors.ts @@ -14,7 +14,7 @@ export const colors = { lightblue: { default: 'var(--amplify_dataviz_lightblue_default, rgba(133, 208, 250, 1))', - darker: 'var(--amplify_dataviz_lightblue_darker, rgba(35, 170, 246, 1)t', + darker: 'var(--amplify_dataviz_lightblue_darker, rgba(35, 170, 246, 1))', lighter: 'var(--amplify_dataviz_lightblue_lighter, rgba(211, 238, 253, 1))', }, diff --git a/src/atoms/types/Errors.ts b/src/atoms/types/Errors.ts index 98475c9cc..fe27adf74 100644 --- a/src/atoms/types/Errors.ts +++ b/src/atoms/types/Errors.ts @@ -1,13 +1,6 @@ import { ReactNode } from 'react'; -export enum ErrorType { - ERROR_400 = '400', - ERROR_401 = '401', - ERROR_403 = '403', - ERROR_404 = '404', - ERROR_500 = '500', - DEFAULT = 'default', -} +import { ErrorType } from 'src/atoms'; export interface ErrorContentType { type: ErrorType; diff --git a/src/atoms/types/SideBar.ts b/src/atoms/types/SideBar.ts new file mode 100644 index 000000000..7eb00cb51 --- /dev/null +++ b/src/atoms/types/SideBar.ts @@ -0,0 +1,9 @@ +import { IconData } from '@equinor/eds-icons'; + +export interface SideBarMenuItem { + icon: IconData; + name: string; + link: string; + onClick?: () => void; + replace?: boolean; +} diff --git a/src/atoms/types/index.ts b/src/atoms/types/index.ts index 6973d4842..2f58bbe5e 100644 --- a/src/atoms/types/index.ts +++ b/src/atoms/types/index.ts @@ -1,5 +1,5 @@ -export * from 'src/atoms/types/Environment'; export * from 'src/atoms/types/Errors'; export * from 'src/atoms/types/Field'; export * from 'src/atoms/types/Guidelines'; export * from 'src/atoms/types/Icon'; +export * from 'src/atoms/types/SideBar'; diff --git a/src/atoms/utils/auth_environment.ts b/src/atoms/utils/auth_environment.ts index acc224844..66560f3c3 100644 --- a/src/atoms/utils/auth_environment.ts +++ b/src/atoms/utils/auth_environment.ts @@ -1,6 +1,6 @@ import { PublicClientApplication } from '@azure/msal-browser'; -import { EnvironmentType } from 'src/atoms/types/Environment'; +import { EnvironmentType } from 'src/atoms/enums/Environment'; const OPTIONAL_ENV_VARIABLES = [ 'IS_MOCK', diff --git a/src/atoms/utils/errors.test.tsx b/src/atoms/utils/errors.test.tsx index 36afb5fe9..f5ea75694 100644 --- a/src/atoms/utils/errors.test.tsx +++ b/src/atoms/utils/errors.test.tsx @@ -1,5 +1,5 @@ import { getErrorContent, getListOfErrors } from './errors'; -import { ErrorType } from 'src/atoms/types/Errors'; +import { ErrorType } from 'src/atoms'; test('Shows default values without props', () => { const defaultError = getErrorContent('Amplify portal', ErrorType.DEFAULT); diff --git a/src/atoms/utils/errors.tsx b/src/atoms/utils/errors.tsx index 63dd59dee..52c3137f2 100644 --- a/src/atoms/utils/errors.tsx +++ b/src/atoms/utils/errors.tsx @@ -1,4 +1,5 @@ -import { ErrorContentType, ErrorType } from 'src/atoms/types/Errors'; +import { ErrorType } from 'src/atoms'; +import { ErrorContentType } from 'src/atoms/types/Errors'; import { GlitchAnimation } from 'src/organisms/ErrorPage/illustrations/GlitchAnimation'; import { QuestioningAnimation } from 'src/organisms/ErrorPage/illustrations/QuestioningAnimation'; diff --git a/src/molecules/FileProgress/RegularFileProgress.tsx b/src/molecules/FileProgress/RegularFileProgress.tsx index db5ae7577..c8afed5dd 100644 --- a/src/molecules/FileProgress/RegularFileProgress.tsx +++ b/src/molecules/FileProgress/RegularFileProgress.tsx @@ -9,7 +9,7 @@ import { } from '@equinor/eds-icons'; import { colors } from 'src/atoms/style'; -import { size } from 'src/atoms/utils'; +import { formatBytes } from 'src/atoms/utils'; import { FileProgressPropsExtension, RegularFileProgressBaseProps, @@ -23,8 +23,6 @@ import { RegularFileProgressWrapper, } from 'src/molecules/FileProgress/RegularFileProgress.styles'; -const { formatBytes } = size; - interface RegularFileProgressProps extends RegularFileProgressBaseProps, FileProgressPropsExtension {} diff --git a/src/molecules/RichTextEditor/RichTextEditor.tsx b/src/molecules/RichTextEditor/RichTextEditor.tsx index 03ef71459..d4feaf8da 100644 --- a/src/molecules/RichTextEditor/RichTextEditor.tsx +++ b/src/molecules/RichTextEditor/RichTextEditor.tsx @@ -7,7 +7,7 @@ import { OnImageUploadFn, RichTextEditorFeatures, } from './RichTextEditor.types'; -import { richtext } from 'src/atoms'; +import { getFeatures } from 'src/atoms/utils/richtext'; export interface RichTextEditorProps { value: string | null | undefined; @@ -38,7 +38,7 @@ export const RichTextEditor: FC = ({ lightBackground, border = true, }) => { - const usedFeatured = richtext.getFeatures({ + const usedFeatured = getFeatures({ features, extendFeatures, removeFeatures, diff --git a/src/organisms/DataGrid/DataGrid.tsx b/src/organisms/DataGrid/DataGrid.tsx index 87eaddb66..a7c4a20e6 100644 --- a/src/organisms/DataGrid/DataGrid.tsx +++ b/src/organisms/DataGrid/DataGrid.tsx @@ -1,12 +1,11 @@ import { EdsDataGrid, EdsDataGridProps } from '@equinor/eds-data-grid-react'; import { tokens } from '@equinor/eds-tokens'; -import { style } from 'src/index'; +import { spacings } from 'src/index'; import styled from 'styled-components'; const { colors } = tokens; -const { spacings } = style; interface WrapperProps { $enableSorting: boolean; diff --git a/src/organisms/ErrorPage/ErrorPage.stories.tsx b/src/organisms/ErrorPage/ErrorPage.stories.tsx index 485615b92..3cf4b1421 100644 --- a/src/organisms/ErrorPage/ErrorPage.stories.tsx +++ b/src/organisms/ErrorPage/ErrorPage.stories.tsx @@ -3,7 +3,7 @@ import { Meta, StoryFn } from '@storybook/react'; import { GlitchAnimation } from './illustrations/GlitchAnimation'; import { QuestioningAnimation } from './illustrations/QuestioningAnimation'; import { ErrorPage } from '.'; -import { ErrorType } from 'src/atoms/types/Errors'; +import { ErrorType } from 'src/atoms'; import { getErrorContent } from 'src/atoms/utils/errors'; const meta: Meta = { diff --git a/src/organisms/ErrorPage/ErrorPage.test.tsx b/src/organisms/ErrorPage/ErrorPage.test.tsx index ee0151869..412a7a604 100644 --- a/src/organisms/ErrorPage/ErrorPage.test.tsx +++ b/src/organisms/ErrorPage/ErrorPage.test.tsx @@ -1,7 +1,7 @@ import { faker } from '@faker-js/faker'; import { ErrorPage } from '.'; -import { ErrorType } from 'src/atoms/types/Errors'; +import { ErrorType } from 'src/atoms'; import { getErrorContent } from 'src/atoms/utils/errors'; import { render, screen, userEvent } from 'src/tests/test-utils'; diff --git a/src/organisms/ErrorPage/collections/PageNotFound.tsx b/src/organisms/ErrorPage/collections/PageNotFound.tsx index 13a36d8ed..cd9a9be26 100644 --- a/src/organisms/ErrorPage/collections/PageNotFound.tsx +++ b/src/organisms/ErrorPage/collections/PageNotFound.tsx @@ -2,7 +2,7 @@ import { FC } from 'react'; import { useNavigate } from 'react-router'; import { ErrorPage } from '..'; -import { ErrorType } from 'src/atoms/types/Errors'; +import { ErrorType } from 'src/atoms'; import { environment, errors } from 'src/atoms/utils'; const { getErrorContent } = errors; diff --git a/src/organisms/ErrorPage/collections/Unauthorized.tsx b/src/organisms/ErrorPage/collections/Unauthorized.tsx index eb3d084d9..306a6c1bc 100644 --- a/src/organisms/ErrorPage/collections/Unauthorized.tsx +++ b/src/organisms/ErrorPage/collections/Unauthorized.tsx @@ -1,10 +1,9 @@ import { FC } from 'react'; import { ErrorPage } from '..'; -import { ErrorType } from 'src/atoms/types/Errors'; -import { environment, errors } from 'src/atoms/utils'; - -const { getErrorContent } = errors; +import { ErrorType } from 'src/atoms'; +import { getErrorContent } from 'src/atoms/utils'; +import { environment } from 'src/atoms/utils/auth_environment'; import styled from 'styled-components'; diff --git a/src/organisms/SideBar/MenuItem.tsx b/src/organisms/SideBar/MenuItem.tsx index 3aa8b3de0..3a32e935a 100644 --- a/src/organisms/SideBar/MenuItem.tsx +++ b/src/organisms/SideBar/MenuItem.tsx @@ -1,24 +1,16 @@ import { forwardRef, HTMLAttributes, MouseEvent, useMemo } from 'react'; import { Icon } from '@equinor/eds-core-react'; -import { IconData } from '@equinor/eds-icons'; import { IconContainer, ItemText, Link } from './MenuItem.styles'; +import { SideBarMenuItem } from 'src/atoms/types/SideBar'; import { OptionalTooltip } from 'src/molecules/OptionalTooltip/OptionalTooltip'; import { useSideBar } from 'src/providers/SideBarProvider'; -export interface MenuItemType { - icon: IconData; - name: string; - link: string; - onClick?: () => void; - replace?: boolean; -} - export type MenuItemProps = { currentUrl?: string; disabled?: boolean; -} & MenuItemType & +} & SideBarMenuItem & HTMLAttributes; export const MenuItem = forwardRef( diff --git a/src/organisms/SideBar/SideBar.stories.tsx b/src/organisms/SideBar/SideBar.stories.tsx index 1a0ec7104..fd5858374 100644 --- a/src/organisms/SideBar/SideBar.stories.tsx +++ b/src/organisms/SideBar/SideBar.stories.tsx @@ -4,7 +4,7 @@ import { dashboard, favorite_outlined, history } from '@equinor/eds-icons'; import { Meta, StoryFn } from '@storybook/react'; import { SideBar } from '.'; -import { MenuItemType } from 'src/organisms/SideBar/MenuItem'; +import { SideBarMenuItem } from 'src/atoms/types/SideBar'; import { SideBarProvider } from 'src/providers/SideBarProvider'; const meta: Meta = { @@ -33,7 +33,7 @@ const meta: Meta = { export default meta; export const Primary: StoryFn = (args) => { - const menuItems: MenuItemType[] = [ + const menuItems: SideBarMenuItem[] = [ { name: 'Dashboard', icon: dashboard, diff --git a/src/organisms/SideBar/SideBar.test.tsx b/src/organisms/SideBar/SideBar.test.tsx index 4a73f51eb..9bfe97b07 100644 --- a/src/organisms/SideBar/SideBar.test.tsx +++ b/src/organisms/SideBar/SideBar.test.tsx @@ -4,12 +4,13 @@ import { MemoryRouter, Route, Routes } from 'react-router-dom'; import { add, home, star_half } from '@equinor/eds-icons'; import { faker } from '@faker-js/faker'; +import { SideBarMenuItem } from 'src/atoms/types/SideBar'; import { SideBar } from 'src/organisms/SideBar/index'; -import { MenuItem, MenuItemType } from 'src/organisms/SideBar/MenuItem'; +import { MenuItem } from 'src/organisms/SideBar/MenuItem'; import { SideBarProvider } from 'src/providers/SideBarProvider'; import { render, screen, userEvent, within } from 'src/tests/test-utils'; -const defaultMenuItems: MenuItemType[] = [ +const defaultMenuItems: SideBarMenuItem[] = [ { name: 'Home', icon: home, @@ -194,7 +195,7 @@ test('Hides create button when showCreate=false', async () => { }); test('Renders bottom item when provided', () => { - const bottomItemProps: MenuItemType = { + const bottomItemProps: SideBarMenuItem = { name: faker.animal.dog(), icon: star_half, link: faker.internet.url(), diff --git a/src/organisms/SideBar/index.ts b/src/organisms/SideBar/index.ts index c90375fc6..666654dfe 100644 --- a/src/organisms/SideBar/index.ts +++ b/src/organisms/SideBar/index.ts @@ -1,7 +1,5 @@ -import { - MenuItem, - MenuItemType as ItemType, -} from 'src/organisms/SideBar/MenuItem'; +import { SideBarMenuItem as ItemType } from 'src/atoms/types/SideBar'; +import { MenuItem } from 'src/organisms/SideBar/MenuItem'; import { SideBar as BaseSideBar } from 'src/organisms/SideBar/SideBar'; type SidebarType = typeof BaseSideBar & { diff --git a/src/organisms/TopBar/Resources/Feedback/Feedback.utils.ts b/src/organisms/TopBar/Resources/Feedback/Feedback.utils.ts index 955585bd6..20881e691 100644 --- a/src/organisms/TopBar/Resources/Feedback/Feedback.utils.ts +++ b/src/organisms/TopBar/Resources/Feedback/Feedback.utils.ts @@ -8,7 +8,7 @@ import { FeedbackType, UrgencyOption, } from './Feedback.types'; -import { EnvironmentType } from 'src/atoms/types/Environment'; +import { EnvironmentType } from 'src/atoms/enums/Environment'; import { date, environment, string } from 'src/atoms/utils'; const { capitalize } = string; diff --git a/src/organisms/TopBar/Resources/ReleaseNotesDialog/FilterHeader/FilterHeader.test.tsx b/src/organisms/TopBar/Resources/ReleaseNotesDialog/FilterHeader/FilterHeader.test.tsx index a9e70b397..b76cf6596 100644 --- a/src/organisms/TopBar/Resources/ReleaseNotesDialog/FilterHeader/FilterHeader.test.tsx +++ b/src/organisms/TopBar/Resources/ReleaseNotesDialog/FilterHeader/FilterHeader.test.tsx @@ -6,7 +6,7 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; import { ReleaseNoteType } from '../ReleaseNotesTypes/ReleaseNotesTypes.types'; import { FilterHeader } from './FilterHeader'; -import { EnvironmentType } from 'src/atoms/types/Environment'; +import { EnvironmentType } from 'src/atoms/enums/Environment'; import { AuthProvider, ReleaseNotesProvider } from 'src/providers'; import { render, screen, userEvent } from 'src/tests/test-utils'; diff --git a/src/organisms/TopBar/Resources/ReleaseNotesDialog/FilterHeader/FilterHeader.tsx b/src/organisms/TopBar/Resources/ReleaseNotesDialog/FilterHeader/FilterHeader.tsx index f476c4a52..557f9cc3d 100644 --- a/src/organisms/TopBar/Resources/ReleaseNotesDialog/FilterHeader/FilterHeader.tsx +++ b/src/organisms/TopBar/Resources/ReleaseNotesDialog/FilterHeader/FilterHeader.tsx @@ -14,7 +14,7 @@ import { SieveWrapper, Wrapper, } from './FilterHeader.styles'; -import { EnvironmentType } from 'src/atoms/types/Environment'; +import { EnvironmentType } from 'src/atoms/enums/Environment'; import { environment } from 'src/atoms/utils'; import { FilterOption } from 'src/molecules/Sieve/Filter'; import { Sieve } from 'src/molecules/Sieve/Sieve'; diff --git a/src/organisms/TopBar/TopBar.stories.tsx b/src/organisms/TopBar/TopBar.stories.tsx index ce420e731..1fc185fc2 100644 --- a/src/organisms/TopBar/TopBar.stories.tsx +++ b/src/organisms/TopBar/TopBar.stories.tsx @@ -6,9 +6,9 @@ import { Meta, StoryFn } from '@storybook/react'; import { FAKE_ACCOUNT, FAKE_ACCOUNT_PHOTO } from './Account/stories/data'; import { TopBar, TopBarType } from '.'; -import { EnvironmentType } from 'src/atoms/types/Environment'; +import { EnvironmentType } from 'src/atoms/enums/Environment'; +import { SideBarMenuItem } from 'src/atoms/types/SideBar'; import { SideBar } from 'src/organisms/SideBar'; -import { MenuItemType } from 'src/organisms/SideBar/MenuItem'; import { Template } from 'src/organisms/Template/Template'; import { SideBarProvider } from 'src/providers/SideBarProvider'; @@ -83,7 +83,7 @@ export const Primary: StoryFn = ({ ...args }) => { }; export const FullPageExample: StoryFn = ({ ...args }) => { - const menuItems: MenuItemType[] = [ + const menuItems: SideBarMenuItem[] = [ { name: 'Dashboard', icon: dashboard, diff --git a/src/organisms/TopBar/TopBar.styles.ts b/src/organisms/TopBar/TopBar.styles.ts index 93fc75888..ce167bf40 100644 --- a/src/organisms/TopBar/TopBar.styles.ts +++ b/src/organisms/TopBar/TopBar.styles.ts @@ -6,8 +6,8 @@ import { } from '@equinor/eds-core-react'; import { tokens } from '@equinor/eds-tokens'; +import { EnvironmentType } from 'src/atoms/enums/Environment'; import { spacings } from 'src/atoms/style'; -import { EnvironmentType } from 'src/atoms/types/Environment'; import styled from 'styled-components'; diff --git a/src/organisms/TopBar/TopBar.test.tsx b/src/organisms/TopBar/TopBar.test.tsx index 3c4469e6b..c95a0ac5c 100644 --- a/src/organisms/TopBar/TopBar.test.tsx +++ b/src/organisms/TopBar/TopBar.test.tsx @@ -3,8 +3,8 @@ import { tokens } from '@equinor/eds-tokens'; import { faker } from '@faker-js/faker'; import { TopBar } from '.'; +import { EnvironmentType } from 'src/atoms/enums/Environment'; import { spacings } from 'src/atoms/style'; -import { EnvironmentType } from 'src/atoms/types/Environment'; import { Field } from 'src/atoms/types/Field'; import { act, render, screen, userEvent, waitFor } from 'src/tests/test-utils'; diff --git a/src/organisms/TopBar/TopBar.tsx b/src/organisms/TopBar/TopBar.tsx index 1a1532b55..006fe1f63 100644 --- a/src/organisms/TopBar/TopBar.tsx +++ b/src/organisms/TopBar/TopBar.tsx @@ -9,7 +9,7 @@ import { CircularProgress, EnvironmentTag, } from './TopBar.styles'; -import { EnvironmentType } from 'src/atoms/types/Environment'; +import { EnvironmentType } from 'src/atoms/enums/Environment'; import { Field } from 'src/atoms/types/Field'; import { Typography } from 'src/molecules'; import { ApplicationIcon } from 'src/molecules/ApplicationIcon/ApplicationIcon'; diff --git a/src/providers/AuthProvider/AuthProvider.tsx b/src/providers/AuthProvider/AuthProvider.tsx index 8a8f517bf..8df7aec5f 100644 --- a/src/providers/AuthProvider/AuthProvider.tsx +++ b/src/providers/AuthProvider/AuthProvider.tsx @@ -12,7 +12,7 @@ import { AccountInfo } from '@azure/msal-browser'; import { MsalProvider } from '@azure/msal-react'; import { AuthProviderInner } from './AuthProviderInner'; -import { auth, environment } from 'src/atoms/utils'; +import { auth, environment } from 'src/atoms/utils/auth_environment'; const { msalApp } = auth; const { getIsMock } = environment; diff --git a/src/providers/AuthProvider/AuthProviderInner.tsx b/src/providers/AuthProvider/AuthProviderInner.tsx index 9f7d0d430..90b66d50c 100644 --- a/src/providers/AuthProvider/AuthProviderInner.tsx +++ b/src/providers/AuthProvider/AuthProviderInner.tsx @@ -15,7 +15,7 @@ import { AccountInfo } from '@azure/msal-common'; import { useMsal, useMsalAuthentication } from '@azure/msal-react'; import { AuthState } from './AuthProvider'; -import { auth, environment } from 'src/atoms/utils'; +import { auth, environment } from 'src/atoms/utils/auth_environment'; import { FullPageSpinner } from 'src/molecules/FullPageSpinner/FullPageSpinner'; import { Unauthorized } from 'src/organisms/ErrorPage/collections/Unauthorized'; @@ -200,9 +200,7 @@ export const AuthProviderInner: FC = ({ ]); if (authState === 'loading' || account === undefined) - return ( - loadingComponent ?? - ); + return loadingComponent ?? ; if (authState === 'unauthorized') return unauthorizedComponent ?? ;