From aa443bd3ad17b6d68fefe0cd10d986fc6aaf50a1 Mon Sep 17 00:00:00 2001 From: garronej Date: Mon, 28 Aug 2023 20:52:40 +0200 Subject: [PATCH] Update react-dsfr keycloakify and tss-react --- package.json | 6 +-- src/account/Template.tsx | 9 ++-- src/login/KcApp.tsx | 8 ++-- src/login/Template.tsx | 60 +++++++++++++------------ src/login/pages/Login.tsx | 23 +++------- src/login/pages/RegisterUserProfile.tsx | 8 ++-- src/login/pages/Terms.tsx | 6 +-- src/stories/login/Login.stories.tsx | 2 +- yarn.lock | 24 +++++----- 9 files changed, 68 insertions(+), 78 deletions(-) diff --git a/package.json b/package.json index 5a4ad49..e062986 100644 --- a/package.json +++ b/package.json @@ -26,18 +26,18 @@ "prebuild": "only-include-used-icons" }, "dependencies": { - "@codegouvfr/react-dsfr": "^0.73.0", + "@codegouvfr/react-dsfr": "^0.75.1", "@codegouvfr/sill": "^1.13.1", "@emotion/react": "^11.11.0", "@emotion/styled": "^11.11.0", "@mui/icons-material": "^5.0.4", "@mui/material": "^5.13.3", - "tss-react": "^4.8.8", + "tss-react": "^4.9.0", "tsafe": "^1.6.4", "@storybook/addon-docs": "^6.5.15", "@tanstack/react-virtual": "3.0.0-beta.39", "i18nifty": "^1.5.12", - "keycloakify": "^7.15.5", + "keycloakify": "^8.0.0", "react": "^18.2.0", "react-dom": "^18.2.0", "react-scripts": "5.0.1", diff --git a/src/account/Template.tsx b/src/account/Template.tsx index 5d32e5f..6f1ecae 100644 --- a/src/account/Template.tsx +++ b/src/account/Template.tsx @@ -24,12 +24,11 @@ export default function Template(props: TemplateProps) { const { isReady } = usePrepareTemplate({ "doFetchDefaultThemeResources": doUseDefaultCss, - url, - "stylesCommon": [ - "node_modules/patternfly/dist/css/patternfly.min.css", - "node_modules/patternfly/dist/css/patternfly-additions.min.css" + "styles": [ + `${url.resourcesCommonPath}/node_modules/patternfly/dist/css/patternfly.min.css`, + `${url.resourcesCommonPath}/node_modules/patternfly/dist/css/patternfly-additions.min.css`, + `${url.resourcesPath}/css/account.css` ], - "styles": ["css/account.css"], "htmlClassName": undefined, "bodyClassName": clsx("admin-console", "user", getClassName("kcBodyClass")) }); diff --git a/src/login/KcApp.tsx b/src/login/KcApp.tsx index d2c8661..be97a95 100644 --- a/src/login/KcApp.tsx +++ b/src/login/KcApp.tsx @@ -1,5 +1,5 @@ import { lazy, Suspense } from "react"; -import { makeStyles } from "tss-react/dsfr"; +import { tss } from "tss-react/dsfr"; import { fr } from "@codegouvfr/react-dsfr"; import Fallback, { type PageProps } from "keycloakify/login"; import type { KcContext } from "./kcContext"; @@ -60,7 +60,7 @@ export default function KcApp(props: { kcContext: KcContext }) { ); } -const useStyles = makeStyles({ "name": { KcApp } })(theme => ({ +const useStyles = tss.withName({ KcApp }).create({ "kcHtmlClass": { "fontSize": "unset", "& label": { @@ -80,7 +80,7 @@ const useStyles = makeStyles({ "name": { KcApp } })(theme => ({ }, "kcButtonPrimaryClass": { "&:hover": { - "color": theme.decisions.text.inverted.blueFrance.default + "color": fr.colors.decisions.text.inverted.blueFrance.default } } -})); +}); diff --git a/src/login/Template.tsx b/src/login/Template.tsx index b2c9022..d105b5a 100644 --- a/src/login/Template.tsx +++ b/src/login/Template.tsx @@ -4,7 +4,7 @@ import type { TemplateProps } from "keycloakify/login/TemplateProps"; import { usePrepareTemplate } from "keycloakify/lib/usePrepareTemplate"; import type { KcContext } from "./kcContext"; import type { I18n } from "./i18n"; -import { makeStyles } from "tss-react/dsfr"; +import { tss } from "tss-react/dsfr"; import { useGetClassName } from "keycloakify/login/lib/useGetClassName"; import Header from "@codegouvfr/react-dsfr/Header"; import { Alert } from "@codegouvfr/react-dsfr/Alert"; @@ -43,9 +43,12 @@ export default function Template(props: TemplateProps) { const { isReady } = usePrepareTemplate({ "doFetchDefaultThemeResources": doUseDefaultCss, - url, - "stylesCommon": ["lib/zocial/zocial.css"], - "styles": ["css/login.css"], + "styles": [ + `${url.resourcesCommonPath}/node_modules/patternfly/dist/css/patternfly.min.css`, + `${url.resourcesCommonPath}/node_modules/patternfly/dist/css/patternfly-additions.min.css`, + `${url.resourcesCommonPath}/lib/zocial/zocial.css`, + `${url.resourcesPath}/css/login.css` + ], "htmlClassName": getClassName("kcHtmlClass"), "bodyClassName": undefined }); @@ -276,12 +279,13 @@ export default function Template(props: TemplateProps) { ); } -const useStyles = makeStyles<{ contentWidth: number }>({ - "name": { Template } -})((_theme, { contentWidth }) => ({ - "container": { - "marginTop": fr.spacing("10v"), - "animation": `${keyframes` +const useStyles = tss + .withParams<{ contentWidth: number }>() + .withName({ Template }) + .create(({ contentWidth }) => ({ + "container": { + "marginTop": fr.spacing("10v"), + "animation": `${keyframes` 0% { opacity: 0; } @@ -289,21 +293,21 @@ const useStyles = makeStyles<{ contentWidth: number }>({ opacity: 1; } `} 400ms` - }, - "centerCol": { - "display": "flex", - "flexDirection": "column", - "alignItems": "center" - }, - "feedback": { - "marginBottom": fr.spacing("6v") - }, - "kcContent": { - "width": "100%" - }, - "contentWrapper": { - "maxWidth": `${contentWidth}px`, - "width": "100%", - "margin": "0 auto" - } -})); + }, + "centerCol": { + "display": "flex", + "flexDirection": "column", + "alignItems": "center" + }, + "feedback": { + "marginBottom": fr.spacing("6v") + }, + "kcContent": { + "width": "100%" + }, + "contentWrapper": { + "maxWidth": `${contentWidth}px`, + "width": "100%", + "margin": "0 auto" + } + })); diff --git a/src/login/pages/Login.tsx b/src/login/pages/Login.tsx index 85b71ca..93ce730 100644 --- a/src/login/pages/Login.tsx +++ b/src/login/pages/Login.tsx @@ -1,7 +1,7 @@ import { useState, type FormEventHandler } from "react"; import { useConstCallback } from "keycloakify/tools/useConstCallback"; import type { PageProps } from "keycloakify/login/pages/PageProps"; -import { makeStyles } from "tss-react/dsfr"; +import { tss } from "tss-react/dsfr"; import { fr } from "@codegouvfr/react-dsfr"; import { Button } from "@codegouvfr/react-dsfr/Button"; import { Input } from "@codegouvfr/react-dsfr/Input"; @@ -23,15 +23,8 @@ export default function Login( "classes": classes_props }); - const { - social, - realm, - url, - usernameEditDisabled, - login, - auth, - registrationDisabled - } = kcContext; + const { social, realm, url, usernameHidden, login, auth, registrationDisabled } = + kcContext; const { msg, msgStr } = i18n; const { classes, cx } = useStyles(); @@ -172,7 +165,7 @@ export default function Login( "name": autoCompleteHelper, "type": "email", "defaultValue": login.username ?? "", - ...(usernameEditDisabled + ...(usernameHidden ? { "disabled": true } : { "autoFocus": true, @@ -200,7 +193,7 @@ export default function Login( )} >
- {realm.rememberMe && !usernameEditDisabled && ( + {realm.rememberMe && !usernameHidden && ( ({ +const useStyles = tss.withName({ Login }).create({ "centerCol": { "display": "flex", "flexDirection": "column", @@ -283,4 +274,4 @@ const useStyles = makeStyles({ "rememberMe": { "marginTop": fr.spacing("5v") } -})); +}); diff --git a/src/login/pages/RegisterUserProfile.tsx b/src/login/pages/RegisterUserProfile.tsx index ff8b578..ca7c46e 100644 --- a/src/login/pages/RegisterUserProfile.tsx +++ b/src/login/pages/RegisterUserProfile.tsx @@ -1,6 +1,6 @@ import { useState } from "react"; import { UserProfileFormFields } from "./shared/UserProfileFormFields"; -import { makeStyles } from "tss-react/dsfr"; +import { tss } from "tss-react/dsfr"; import type { PageProps } from "keycloakify/login/pages/PageProps"; import { fr } from "@codegouvfr/react-dsfr"; import { useGetClassName } from "keycloakify/login/lib/useGetClassName"; @@ -74,9 +74,7 @@ export default function RegisterUserProfile( ); } -const useStyles = makeStyles({ - "name": { RegisterUserProfile } -})(() => ({ +const useStyles = tss.withName({ RegisterUserProfile }).create({ "centerCol": { "display": "flex", "flexDirection": "column", @@ -92,4 +90,4 @@ const useStyles = makeStyles({ "gap": fr.spacing("4v"), "justifyContent": "end" } -})); +}); diff --git a/src/login/pages/Terms.tsx b/src/login/pages/Terms.tsx index ef7c0cb..58da66e 100644 --- a/src/login/pages/Terms.tsx +++ b/src/login/pages/Terms.tsx @@ -5,7 +5,7 @@ import { useDownloadTerms } from "keycloakify/login/lib/useDownloadTerms"; import type { PageProps } from "keycloakify/login/pages/PageProps"; -import { makeStyles } from "tss-react/dsfr"; +import { tss } from "tss-react/dsfr"; import { fr } from "@codegouvfr/react-dsfr"; import { useGetClassName } from "keycloakify/login/lib/useGetClassName"; import type { KcContext } from "../kcContext"; @@ -109,9 +109,7 @@ export default function Terms( ); } -const useStyles = makeStyles({ - "name": { Terms } -})({ +const useStyles = tss.withName({ Terms }).create({ "formActions": { "display": "flex", "gap": fr.spacing("4v") diff --git a/src/stories/login/Login.stories.tsx b/src/stories/login/Login.stories.tsx index cbc5fa4..3ae2f7c 100644 --- a/src/stories/login/Login.stories.tsx +++ b/src/stories/login/Login.stories.tsx @@ -66,7 +66,7 @@ export const WithImmutablePresetUsername = () => ( ); diff --git a/yarn.lock b/yarn.lock index 79a9158..4908f84 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1218,10 +1218,10 @@ exec-sh "^0.3.2" minimist "^1.2.0" -"@codegouvfr/react-dsfr@^0.73.0": - version "0.73.0" - resolved "https://registry.yarnpkg.com/@codegouvfr/react-dsfr/-/react-dsfr-0.73.0.tgz#c11201f8b71bba9fca5c44b8eb4af3ee08ed65eb" - integrity sha512-QYXRF1LkRzlyfZNW2wYYX/HgeUAT0Su3sxWTbgWrpDdwml6bBpVCg4PWXT7ikCx1MU6tDdiKO3knueYFR9FOew== +"@codegouvfr/react-dsfr@^0.75.1": + version "0.75.1" + resolved "https://registry.yarnpkg.com/@codegouvfr/react-dsfr/-/react-dsfr-0.75.1.tgz#280810feff25ba134a1322e2ea5b2b698b83020f" + integrity sha512-FYlxpwnOstJ/oF4GjyzWS5GPKQl3vrHhZdiBthskNLcuphrpwtgMvRTklauQ+KSlnDU5m9P6RSUmalMGCmlzGw== dependencies: tsafe "^1.6.3" @@ -10111,10 +10111,10 @@ jwt-decode@^3.1.2: resolved "https://registry.yarnpkg.com/jwt-decode/-/jwt-decode-3.1.2.tgz#3fb319f3675a2df0c2895c8f5e9fa4b67b04ed59" integrity sha512-UfpWE/VZn0iP50d8cz9NrZLM9lSWhcJ+0Gt/nm4by88UL+J1SiKN8/5dkjMmbEzwL2CAe+67GsegCbIKtbp75A== -keycloakify@^7.15.5: - version "7.15.5" - resolved "https://registry.yarnpkg.com/keycloakify/-/keycloakify-7.15.5.tgz#5e29cff153799c9e7da7e6f2671f4dc919c9ac29" - integrity sha512-Nt6P/z0+QD+KNhnSFsh+b2wLG1RfVZwleAaxi67TGR08Wh80mRPKA/ebl1X+VnJZiRYWP+TICZoza1q7Pf/N/Q== +keycloakify@^8.0.0: + version "8.0.0" + resolved "https://registry.yarnpkg.com/keycloakify/-/keycloakify-8.0.0.tgz#b0f6a0fda34e8601f735df25b24909433a6b5fd3" + integrity sha512-/A6Uh9SuVdTP7cix8yS15Vfr03BwVFP11s3YPmQ9dSJN1GrIqzRs6mjTEnogM/ZfhySJwyXSeqTtpCGlXmtxJQ== dependencies: "@babel/generator" "^7.22.9" "@babel/parser" "^7.22.7" @@ -14814,10 +14814,10 @@ tslib@^2.0.0, tslib@^2.0.1, tslib@^2.0.3, tslib@^2.1.0: resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.5.0.tgz#42bfed86f5787aeb41d031866c8f402429e0fddf" integrity sha512-336iVw3rtn2BUK7ORdIAHTyxHGRIHVReokCR3XjbckJMK7ms8FysBfhLR8IXnAgy7T0PTPNBWKiH514FOW/WSg== -tss-react@^4.8.8: - version "4.8.8" - resolved "https://registry.yarnpkg.com/tss-react/-/tss-react-4.8.8.tgz#80f58ff2fa2c15a4097d0760ea7d8ca327c73104" - integrity sha512-V57AU6J42LLhYhRGSxDVi9VLUaoQtV6y2Kb1e0uqabe3w61G9R8gkUiX4DHZUReboRY9rwExPWz0LVZIgqQ98Q== +tss-react@^4.9.0: + version "4.9.0" + resolved "https://registry.yarnpkg.com/tss-react/-/tss-react-4.9.0.tgz#1457e14e89f1c4a033b697f866439f5921c923d8" + integrity sha512-dgqNSR9J0+NxvdwzXoKo2HxGGu2sg0UikLnPumGNLa9CSPVcL6ZNu23CJwxPaMvRnQC8NRyNbUN3pBCS9AWwRA== dependencies: "@emotion/cache" "*" "@emotion/serialize" "*"