Update react-dsfr keycloakify and tss-react

codegouvfr · Aug 28, 2023 · aa443bd · aa443bd
1 parent 6c936e0
commit aa443bd
Show file tree

Hide file tree

Showing 9 changed files with 68 additions and 78 deletions.
diff --git 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
@@ -24,12 +24,11 @@ export default function Template(props: TemplateProps<KcContext, I18n>) {
 
     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
@@ -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
@@ -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<KcContext, I18n>) {
 
     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,34 +279,35 @@ export default function Template(props: TemplateProps<KcContext, I18n>) {
     );
 }
 
-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;
             }
             100% {
                 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
@@ -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(
                                     )}
                                 >
                                     <div id="kc-form-options">
-                                        {realm.rememberMe && !usernameEditDisabled && (
+                                        {realm.rememberMe && !usernameHidden && (
                                             <Checkbox
                                                 className={classes.rememberMe}
                                                 options={[
@@ -254,9 +247,7 @@ export default function Login(
     );
 }
 
-const useStyles = makeStyles({
-    "name": { Login }
-})(() => ({
+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
@@ -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
@@ -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
@@ -66,7 +66,7 @@ export const WithImmutablePresetUsername = () => (
     <PageStory
         kcContext={{
             login: { username: "[email protected]" },
-            usernameEditDisabled: true
+            usernameHidden: true
         }}
     />
 );

diff --git 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" "*"