diff --git a/.env b/.env index 3d1b2b21..2711c8df 100644 --- a/.env +++ b/.env @@ -22,3 +22,6 @@ VITE_TELEMETRY_DISABLED= VITE_TELEMETRY_MAX_DELAY= # Override max number of data to send in a single batch (default: 10) VITE_TELEMETRY_MAX_LENGTH= + +# When VITE_IS_GOV_INSTANCE equals true we use the dsfr design and false we use the default design cf https://react-dsfr.codegouv.studio/custom-branding +VITE_IS_GOV_INSTANCE= \ No newline at end of file diff --git a/package.json b/package.json index f0e47422..7516c3a4 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "stromae-dsfr", "private": true, - "version": "1.4.2", + "version": "1.4.2-whitelabel.0", "type": "module", "scripts": { "prepare": "husky && vite-envs update-types", @@ -25,7 +25,7 @@ "prebuild-storybook": "react-dsfr update-icons" }, "dependencies": { - "@codegouvfr/react-dsfr": "^1.13.6", + "@codegouvfr/react-dsfr": "^1.23.9", "@emotion/react": "^11.13.3", "@emotion/styled": "^11.13.0", "@inseefr/lunatic": "^3.5.8", @@ -37,14 +37,14 @@ "date-fns": "^4.1.0", "he": "^1.2.0", "i18nifty": "^3.2.2", - "oidc-spa": "^6.8.2", + "oidc-spa": "^6.14.0", "react": "^18.3.1", "react-dom": "^18.3.1", "react-hook-form": "^7.53.0", "react-hot-toast": "^2.4.1", "react-number-format": "^5.4.0", "tsafe": "^1.7.2", - "tss-react": "^4.9.13", + "tss-react": "^4.9.18", "zod": "^3.23.8" }, "devDependencies": { diff --git a/src/App.tsx b/src/App.tsx index 5fb87117..c981858a 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,5 +1,6 @@ -import { MuiDsfrThemeProvider } from '@codegouvfr/react-dsfr/mui' +import { createDsfrCustomBrandingProvider } from '@codegouvfr/react-dsfr/mui' import { startReactDsfr } from '@codegouvfr/react-dsfr/spa' +import { createTheme } from '@mui/material/styles' import { QueryClient, QueryClientProvider } from '@tanstack/react-query' import { Link, @@ -8,15 +9,43 @@ import { createRouter, } from '@tanstack/react-router' +import logoInseePngUrl from '@/assets/logo-insee.png' import { TelemetryProvider } from '@/contexts/TelemetryContext' import { OidcProvider } from '@/oidc' import { routeTree } from '@/router/router' +import './assets/fonts/OpenSans/main.css' + startReactDsfr({ defaultColorScheme: 'system', Link, }) +const { DsfrCustomBrandingProvider } = createDsfrCustomBrandingProvider({ + createMuiTheme: ({ isDark, theme_gov }) => { + if (import.meta.env.VITE_IS_GOV_INSTANCE === 'true') { + return { theme: theme_gov } + } + + const theme = createTheme({ + palette: { + mode: isDark ? 'dark' : 'light', + primary: { + main: isDark ? '#02AFFF' : '#3467AE', + }, + secondary: { + main: '#FFC403', + }, + }, + typography: { + fontFamily: '"Open Sans"', + }, + }) + + return { theme, faviconUrl: logoInseePngUrl } + }, +}) + declare module '@codegouvfr/react-dsfr/spa' { interface RegisterLink { Link: (props: LinkProps) => JSX.Element @@ -48,7 +77,7 @@ declare module '@tanstack/react-router' { /** Wraps and inits the providers used in the app */ export function App() { return ( - + @@ -59,6 +88,6 @@ export function App() { - + ) } diff --git a/src/assets/fonts/OpenSans/OpenSans-Bold-webfont.ttf b/src/assets/fonts/OpenSans/OpenSans-Bold-webfont.ttf new file mode 100755 index 00000000..e71279d2 Binary files /dev/null and b/src/assets/fonts/OpenSans/OpenSans-Bold-webfont.ttf differ diff --git a/src/assets/fonts/OpenSans/OpenSans-Bold-webfont.woff b/src/assets/fonts/OpenSans/OpenSans-Bold-webfont.woff new file mode 100755 index 00000000..21288dfc Binary files /dev/null and b/src/assets/fonts/OpenSans/OpenSans-Bold-webfont.woff differ diff --git a/src/assets/fonts/OpenSans/OpenSans-Bold-webfont.woff2 b/src/assets/fonts/OpenSans/OpenSans-Bold-webfont.woff2 new file mode 100755 index 00000000..c80b2d2a Binary files /dev/null and b/src/assets/fonts/OpenSans/OpenSans-Bold-webfont.woff2 differ diff --git a/src/assets/fonts/OpenSans/OpenSans-BoldItalic-webfont.ttf b/src/assets/fonts/OpenSans/OpenSans-BoldItalic-webfont.ttf new file mode 100755 index 00000000..0796612e Binary files /dev/null and b/src/assets/fonts/OpenSans/OpenSans-BoldItalic-webfont.ttf differ diff --git a/src/assets/fonts/OpenSans/OpenSans-BoldItalic-webfont.woff b/src/assets/fonts/OpenSans/OpenSans-BoldItalic-webfont.woff new file mode 100755 index 00000000..f8a69140 Binary files /dev/null and b/src/assets/fonts/OpenSans/OpenSans-BoldItalic-webfont.woff differ diff --git a/src/assets/fonts/OpenSans/OpenSans-BoldItalic-webfont.woff2 b/src/assets/fonts/OpenSans/OpenSans-BoldItalic-webfont.woff2 new file mode 100755 index 00000000..60d8de4f Binary files /dev/null and b/src/assets/fonts/OpenSans/OpenSans-BoldItalic-webfont.woff2 differ diff --git a/src/assets/fonts/OpenSans/OpenSans-Italic-webfont.ttf b/src/assets/fonts/OpenSans/OpenSans-Italic-webfont.ttf new file mode 100755 index 00000000..88a72b3e Binary files /dev/null and b/src/assets/fonts/OpenSans/OpenSans-Italic-webfont.ttf differ diff --git a/src/assets/fonts/OpenSans/OpenSans-Italic-webfont.woff b/src/assets/fonts/OpenSans/OpenSans-Italic-webfont.woff new file mode 100755 index 00000000..0fc3e445 Binary files /dev/null and b/src/assets/fonts/OpenSans/OpenSans-Italic-webfont.woff differ diff --git a/src/assets/fonts/OpenSans/OpenSans-Italic-webfont.woff2 b/src/assets/fonts/OpenSans/OpenSans-Italic-webfont.woff2 new file mode 100755 index 00000000..440b74c3 Binary files /dev/null and b/src/assets/fonts/OpenSans/OpenSans-Italic-webfont.woff2 differ diff --git a/src/assets/fonts/OpenSans/OpenSans-Light-webfont.ttf b/src/assets/fonts/OpenSans/OpenSans-Light-webfont.ttf new file mode 100755 index 00000000..d4fb7217 Binary files /dev/null and b/src/assets/fonts/OpenSans/OpenSans-Light-webfont.ttf differ diff --git a/src/assets/fonts/OpenSans/OpenSans-Light-webfont.woff b/src/assets/fonts/OpenSans/OpenSans-Light-webfont.woff new file mode 100755 index 00000000..8dd610ce Binary files /dev/null and b/src/assets/fonts/OpenSans/OpenSans-Light-webfont.woff differ diff --git a/src/assets/fonts/OpenSans/OpenSans-Light-webfont.woff2 b/src/assets/fonts/OpenSans/OpenSans-Light-webfont.woff2 new file mode 100755 index 00000000..d0b43e0a Binary files /dev/null and b/src/assets/fonts/OpenSans/OpenSans-Light-webfont.woff2 differ diff --git a/src/assets/fonts/OpenSans/OpenSans-LightItalic-webfont.ttf b/src/assets/fonts/OpenSans/OpenSans-LightItalic-webfont.ttf new file mode 100755 index 00000000..913b0f53 Binary files /dev/null and b/src/assets/fonts/OpenSans/OpenSans-LightItalic-webfont.ttf differ diff --git a/src/assets/fonts/OpenSans/OpenSans-LightItalic-webfont.woff b/src/assets/fonts/OpenSans/OpenSans-LightItalic-webfont.woff new file mode 100755 index 00000000..f0204140 Binary files /dev/null and b/src/assets/fonts/OpenSans/OpenSans-LightItalic-webfont.woff differ diff --git a/src/assets/fonts/OpenSans/OpenSans-LightItalic-webfont.woff2 b/src/assets/fonts/OpenSans/OpenSans-LightItalic-webfont.woff2 new file mode 100755 index 00000000..21a92a7e Binary files /dev/null and b/src/assets/fonts/OpenSans/OpenSans-LightItalic-webfont.woff2 differ diff --git a/src/assets/fonts/OpenSans/OpenSans-Regular-webfont.ttf b/src/assets/fonts/OpenSans/OpenSans-Regular-webfont.ttf new file mode 100755 index 00000000..1638039b Binary files /dev/null and b/src/assets/fonts/OpenSans/OpenSans-Regular-webfont.ttf differ diff --git a/src/assets/fonts/OpenSans/OpenSans-Regular-webfont.woff b/src/assets/fonts/OpenSans/OpenSans-Regular-webfont.woff new file mode 100755 index 00000000..0ad69fb5 Binary files /dev/null and b/src/assets/fonts/OpenSans/OpenSans-Regular-webfont.woff differ diff --git a/src/assets/fonts/OpenSans/OpenSans-Regular-webfont.woff2 b/src/assets/fonts/OpenSans/OpenSans-Regular-webfont.woff2 new file mode 100755 index 00000000..f778f9c8 Binary files /dev/null and b/src/assets/fonts/OpenSans/OpenSans-Regular-webfont.woff2 differ diff --git a/src/assets/fonts/OpenSans/OpenSans-Semibold-webfont.ttf b/src/assets/fonts/OpenSans/OpenSans-Semibold-webfont.ttf new file mode 100755 index 00000000..0e5dfbe8 Binary files /dev/null and b/src/assets/fonts/OpenSans/OpenSans-Semibold-webfont.ttf differ diff --git a/src/assets/fonts/OpenSans/OpenSans-Semibold-webfont.woff b/src/assets/fonts/OpenSans/OpenSans-Semibold-webfont.woff new file mode 100755 index 00000000..22544e6a Binary files /dev/null and b/src/assets/fonts/OpenSans/OpenSans-Semibold-webfont.woff differ diff --git a/src/assets/fonts/OpenSans/OpenSans-Semibold-webfont.woff2 b/src/assets/fonts/OpenSans/OpenSans-Semibold-webfont.woff2 new file mode 100755 index 00000000..852f7106 Binary files /dev/null and b/src/assets/fonts/OpenSans/OpenSans-Semibold-webfont.woff2 differ diff --git a/src/assets/fonts/OpenSans/OpenSans-SemiboldItalic-webfont.ttf b/src/assets/fonts/OpenSans/OpenSans-SemiboldItalic-webfont.ttf new file mode 100755 index 00000000..96240a6e Binary files /dev/null and b/src/assets/fonts/OpenSans/OpenSans-SemiboldItalic-webfont.ttf differ diff --git a/src/assets/fonts/OpenSans/OpenSans-SemiboldItalic-webfont.woff b/src/assets/fonts/OpenSans/OpenSans-SemiboldItalic-webfont.woff new file mode 100755 index 00000000..8956812e Binary files /dev/null and b/src/assets/fonts/OpenSans/OpenSans-SemiboldItalic-webfont.woff differ diff --git a/src/assets/fonts/OpenSans/OpenSans-SemiboldItalic-webfont.woff2 b/src/assets/fonts/OpenSans/OpenSans-SemiboldItalic-webfont.woff2 new file mode 100755 index 00000000..b0c2a26b Binary files /dev/null and b/src/assets/fonts/OpenSans/OpenSans-SemiboldItalic-webfont.woff2 differ diff --git a/src/assets/fonts/OpenSans/main.css b/src/assets/fonts/OpenSans/main.css new file mode 100644 index 00000000..aca21af6 --- /dev/null +++ b/src/assets/fonts/OpenSans/main.css @@ -0,0 +1,79 @@ +@font-face { + font-family: 'Open Sans'; + src: url('./OpenSans-Bold-webfont.woff2') format('woff2'); + font-weight: 900; + /* Black */ + font-style: normal; +} + +@font-face { + font-family: 'Open Sans'; + src: url('./OpenSans-Bold-webfont.woff2') format('woff2'); + font-weight: bold; + /* Bold */ + font-style: normal; +} + +@font-face { + font-family: 'Open Sans'; + src: url('./OpenSans-Light-webfont.woff2') format('woff2'); + font-weight: 300; + /* Light */ + font-style: normal; +} + +@font-face { + font-family: 'Open Sans'; + src: url('./OpenSans-Regular-webfont.woff2') format('woff2'); + font-weight: 500; + /* Medium */ + font-style: normal; +} + +@font-face { + font-family: 'Open Sans'; + src: url('./OpenSans-Regular-webfont.woff2') format('woff2'); + font-weight: 400; + /* Regular */ + font-style: normal; +} + +@font-face { + font-family: 'Open Sans'; + src: url('./OpenSans-Semibold-webfont.woff2') format('woff2'); + font-weight: 600; + /* SemiBold */ + font-style: normal; +} + +@font-face { + font-family: 'Open Sans'; + src: url('./OpenSans-Thin-webfont.woff2') format('woff2'); + font-weight: 100; + /* Thin */ + font-style: normal; +} + +@font-face { + font-family: 'Open Sans'; + src: url('./OpenSans-Thin-webfont.woff2') format('woff2'); + font-weight: 200; + /* UltraLight */ + font-style: normal; +} + +@font-face { + font-family: 'Open Sans'; + src: url('./OpenSans-Bold-webfont.woff2') format('woff2'); + font-weight: 950; + /* UltraBlack */ + font-style: normal; +} + +@font-face { + font-family: 'Geist Variable'; + src: url('./GeistVariableVF.woff2') format('woff2'); + font-weight: 100 950; + /* Range from Thin to UltraBlack */ + font-style: normal; +} diff --git a/src/components/error/ErrorComponent.tsx b/src/components/error/ErrorComponent.tsx index 68a72342..f07be44a 100644 --- a/src/components/error/ErrorComponent.tsx +++ b/src/components/error/ErrorComponent.tsx @@ -1,12 +1,10 @@ import { fr } from '@codegouvfr/react-dsfr' import Button from '@codegouvfr/react-dsfr/Button' -import ArtWorkBackground from '@codegouvfr/react-dsfr/dsfr/artwork/background/ovoid.svg' -import TechnicalError from '@codegouvfr/react-dsfr/dsfr/artwork/pictograms/system/technical-error.svg' -import ArtWork from '@codegouvfr/react-dsfr/dsfr/artwork/system.svg' import { useNavigate, useSearch } from '@tanstack/react-router' import { Container } from '@/components/Container' import { errorNormalizer } from '@/components/error/errorNormalizer' +import { TechnicalError } from '@/components/pictogram/TechnicalError' import { useDocumentTitle } from '@/hooks/useDocumentTitle' import { declareComponentKeys, useTranslation } from '@/i18n' @@ -73,38 +71,7 @@ export function ErrorComponent(props: Props) { 'fr-unhidden-lg', )} > - + diff --git a/src/components/orchestrator/slotComponents/Roundabout.tsx b/src/components/orchestrator/slotComponents/Roundabout.tsx index fd256993..13596461 100644 --- a/src/components/orchestrator/slotComponents/Roundabout.tsx +++ b/src/components/orchestrator/slotComponents/Roundabout.tsx @@ -5,7 +5,7 @@ import Alert from '@codegouvfr/react-dsfr/Alert' import { Badge } from '@codegouvfr/react-dsfr/Badge' import Button from '@codegouvfr/react-dsfr/Button' import type { LunaticSlotComponents } from '@inseefr/lunatic' -import { useStyles } from 'tss-react/dsfr' +import { useStyles } from 'tss-react' import { Declarations } from './Declarations' import type { ItemOf } from './utils/type' diff --git a/src/components/orchestrator/slotComponents/Summary/SummaryResponses.tsx b/src/components/orchestrator/slotComponents/Summary/SummaryResponses.tsx index 27ea1075..3b494d1d 100644 --- a/src/components/orchestrator/slotComponents/Summary/SummaryResponses.tsx +++ b/src/components/orchestrator/slotComponents/Summary/SummaryResponses.tsx @@ -1,7 +1,7 @@ import type { PropsWithChildren, ReactNode } from 'react' import { fr } from '@codegouvfr/react-dsfr' -import { useStyles } from 'tss-react/dsfr' +import { useStyles } from 'tss-react' function ListResponses({ title, diff --git a/src/components/pictogram/TechnicalError.tsx b/src/components/pictogram/TechnicalError.tsx new file mode 100644 index 00000000..e0f60ee4 --- /dev/null +++ b/src/components/pictogram/TechnicalError.tsx @@ -0,0 +1,141 @@ +import { fr } from '@codegouvfr/react-dsfr' +import ArtWorkBackground from '@codegouvfr/react-dsfr/dsfr/artwork/background/ovoid.svg' +import TechnicalErrorDsfr from '@codegouvfr/react-dsfr/dsfr/artwork/pictograms/system/technical-error.svg' +import '@codegouvfr/react-dsfr/dsfr/artwork/system.svg' +import artworkSystemSvgUrl from '@codegouvfr/react-dsfr/dsfr/artwork/system.svg' +import { useIsGov } from '@codegouvfr/react-dsfr/mui' +import { useStyles } from 'tss-react/mui' + +export function TechnicalError() { + const { isGov } = useIsGov() + + if (!isGov) { + return + } + + return +} + +function TechnicalErrorWhiteLabel() { + const { theme } = useStyles() + + const strokeColor = theme.palette.text.primary + + return ( + + + + + + + + + + + + + + + + ) +} + +function TechnicalErrorGov() { + return ( + + ) +} diff --git a/src/main.lazy.tsx b/src/main.lazy.tsx new file mode 100644 index 00000000..614a1d64 --- /dev/null +++ b/src/main.lazy.tsx @@ -0,0 +1,11 @@ +import React from 'react' + +import ReactDOM from 'react-dom/client' + +import { App } from './App' + +ReactDOM.createRoot(document.getElementById('root')!).render( + + + , +) diff --git a/src/main.tsx b/src/main.tsx index 614a1d64..89847607 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -1,11 +1,10 @@ -import React from 'react' +import { oidcEarlyInit } from 'oidc-spa/entrypoint' -import ReactDOM from 'react-dom/client' +const { shouldLoadApp } = oidcEarlyInit({ + freezeFetch: true, + freezeXMLHttpRequest: true, +}) -import { App } from './App' - -ReactDOM.createRoot(document.getElementById('root')!).render( - - - , -) +if (shouldLoadApp) { + import('./main.lazy') +} diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts index fe554f65..ddd63f56 100644 --- a/src/vite-env.d.ts +++ b/src/vite-env.d.ts @@ -15,6 +15,7 @@ type ImportMetaEnv = { VITE_TELEMETRY_DISABLED: string VITE_TELEMETRY_MAX_DELAY: string VITE_TELEMETRY_MAX_LENGTH: string + VITE_IS_GOV_INSTANCE: string BASE_URL: string MODE: string DEV: boolean diff --git a/yarn.lock b/yarn.lock index 4e90592b..0744b512 100644 --- a/yarn.lock +++ b/yarn.lock @@ -286,10 +286,10 @@ resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39" integrity sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw== -"@codegouvfr/react-dsfr@^1.13.6": - version "1.17.0" - resolved "https://registry.yarnpkg.com/@codegouvfr/react-dsfr/-/react-dsfr-1.17.0.tgz#f781abd40493de02d89d1b11240a4500d24b097a" - integrity sha512-zYluHhGRD39ckZvQFgK8hSeo76TbxPtuot+I6N66vC6XXkILvv0llbIvezkxv3xlz4J8fvq4Ou5Hngt5EWtpeg== +"@codegouvfr/react-dsfr@^1.23.9": + version "1.23.9" + resolved "https://registry.yarnpkg.com/@codegouvfr/react-dsfr/-/react-dsfr-1.23.9.tgz#a016abf6d61ca7c5447c8cb2c28795ff7b47510f" + integrity sha512-QeyTDGSUbU7JqbJ96PDMhcipsy0q6a+Fjv/kJh4S+cgtHvUDzM3/XdOnrppYFaG5VXLblNoZgavOmJuFVyPzwA== dependencies: tsafe "^1.8.5" yargs-parser "^21.1.1" @@ -5742,10 +5742,10 @@ object.assign@^4.1.7: has-symbols "^1.1.0" object-keys "^1.1.1" -oidc-spa@^6.8.2: - version "6.8.2" - resolved "https://registry.yarnpkg.com/oidc-spa/-/oidc-spa-6.8.2.tgz#005f353a7ae7385a8d3b85808f895fbc49723ccd" - integrity sha512-R27+BDg9RW/eI0uZLDnBC/BzKdhkPcOrLIyFwnwCLeL9D9oe+YGXt0LlxSHlgU1DQ3ElLEWNCCNQc9bjpb4oeg== +oidc-spa@^6.14.0: + version "6.14.0" + resolved "https://registry.yarnpkg.com/oidc-spa/-/oidc-spa-6.14.0.tgz#38ec7d2a5d76829421bb3318c5f8f33878f0d227" + integrity sha512-RpdvmwDy54YGACn6jv3UpPwg2U1eRfgEhgX3M/OOtB3bFOjN+MnmpuKLwPSr2/gg2zMUXLsoap9RUB76PrbTsQ== onetime@^5.1.2: version "5.1.2" @@ -7131,10 +7131,10 @@ tslib@^2.0.1, tslib@^2.2.0, tslib@^2.6.0, tslib@^2.8.1: resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.8.1.tgz#612efe4ed235d567e8aba5f2a5fab70280ade83f" integrity sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w== -tss-react@^4.9.13: - version "4.9.15" - resolved "https://registry.yarnpkg.com/tss-react/-/tss-react-4.9.15.tgz#a26fc24889a462ab4858094bc5b33cdda36e45ab" - integrity sha512-rLiEmDwUtln9RKTUR/ZPYBrufF0Tq/PFggO1M7P8M3/FAcodPQ746Ug9MCEFkURKDlntN17+Oja0DMMz5yBnsQ== +tss-react@^4.9.18: + version "4.9.18" + resolved "https://registry.yarnpkg.com/tss-react/-/tss-react-4.9.18.tgz#34828008381f2dd3fe79f835ecd43fde5a349505" + integrity sha512-Uc+VvP4RXVzfEacw735xRvne1lwt5HNhvIFptpvmK+G6F/hRA5TeEr3SEzxrqTb6ixA4vANB0iXjBB6LdexxJA== dependencies: "@emotion/cache" "*" "@emotion/serialize" "*"