Skip to content

Commit aa443bd

Browse files
garronejgarronej
committed
Update react-dsfr keycloakify and tss-react
1 parent 6c936e0 commit aa443bd

File tree

9 files changed

+68
-78
lines changed

9 files changed

+68
-78
lines changed

‎package.json‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -26,18 +26,18 @@
2626
"prebuild": "only-include-used-icons"
2727
},
2828
"dependencies": {
29-
"@codegouvfr/react-dsfr": "^0.73.0",
29+
"@codegouvfr/react-dsfr": "^0.75.1",
3030
"@codegouvfr/sill": "^1.13.1",
3131
"@emotion/react": "^11.11.0",
3232
"@emotion/styled": "^11.11.0",
3333
"@mui/icons-material": "^5.0.4",
3434
"@mui/material": "^5.13.3",
35-
"tss-react": "^4.8.8",
35+
"tss-react": "^4.9.0",
3636
"tsafe": "^1.6.4",
3737
"@storybook/addon-docs": "^6.5.15",
3838
"@tanstack/react-virtual": "3.0.0-beta.39",
3939
"i18nifty": "^1.5.12",
40-
"keycloakify": "^7.15.5",
40+
"keycloakify": "^8.0.0",
4141
"react": "^18.2.0",
4242
"react-dom": "^18.2.0",
4343
"react-scripts": "5.0.1",

‎src/account/Template.tsx‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -24,12 +24,11 @@ export default function Template(props: TemplateProps<KcContext, I18n>) {
2424

2525
const { isReady } = usePrepareTemplate({
2626
"doFetchDefaultThemeResources": doUseDefaultCss,
27-
url,
28-
"stylesCommon": [
29-
"node_modules/patternfly/dist/css/patternfly.min.css",
30-
"node_modules/patternfly/dist/css/patternfly-additions.min.css"
27+
"styles": [
28+
`${url.resourcesCommonPath}/node_modules/patternfly/dist/css/patternfly.min.css`,
29+
`${url.resourcesCommonPath}/node_modules/patternfly/dist/css/patternfly-additions.min.css`,
30+
`${url.resourcesPath}/css/account.css`
3131
],
32-
"styles": ["css/account.css"],
3332
"htmlClassName": undefined,
3433
"bodyClassName": clsx("admin-console", "user", getClassName("kcBodyClass"))
3534
});

‎src/login/KcApp.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { lazy, Suspense } from "react";
2-
import { makeStyles } from "tss-react/dsfr";
2+
import { tss } from "tss-react/dsfr";
33
import { fr } from "@codegouvfr/react-dsfr";
44
import Fallback, { type PageProps } from "keycloakify/login";
55
import type { KcContext } from "./kcContext";
@@ -60,7 +60,7 @@ export default function KcApp(props: { kcContext: KcContext }) {
6060
);
6161
}
6262

63-
const useStyles = makeStyles({ "name": { KcApp } })(theme => ({
63+
const useStyles = tss.withName({ KcApp }).create({
6464
"kcHtmlClass": {
6565
"fontSize": "unset",
6666
"& label": {
@@ -80,7 +80,7 @@ const useStyles = makeStyles({ "name": { KcApp } })(theme => ({
8080
},
8181
"kcButtonPrimaryClass": {
8282
"&:hover": {
83-
"color": theme.decisions.text.inverted.blueFrance.default
83+
"color": fr.colors.decisions.text.inverted.blueFrance.default
8484
}
8585
}
86-
}));
86+
});

‎src/login/Template.tsx‎

Lines changed: 32 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import type { TemplateProps } from "keycloakify/login/TemplateProps";
44
import { usePrepareTemplate } from "keycloakify/lib/usePrepareTemplate";
55
import type { KcContext } from "./kcContext";
66
import type { I18n } from "./i18n";
7-
import { makeStyles } from "tss-react/dsfr";
7+
import { tss } from "tss-react/dsfr";
88
import { useGetClassName } from "keycloakify/login/lib/useGetClassName";
99
import Header from "@codegouvfr/react-dsfr/Header";
1010
import { Alert } from "@codegouvfr/react-dsfr/Alert";
@@ -43,9 +43,12 @@ export default function Template(props: TemplateProps<KcContext, I18n>) {
4343

4444
const { isReady } = usePrepareTemplate({
4545
"doFetchDefaultThemeResources": doUseDefaultCss,
46-
url,
47-
"stylesCommon": ["lib/zocial/zocial.css"],
48-
"styles": ["css/login.css"],
46+
"styles": [
47+
`${url.resourcesCommonPath}/node_modules/patternfly/dist/css/patternfly.min.css`,
48+
`${url.resourcesCommonPath}/node_modules/patternfly/dist/css/patternfly-additions.min.css`,
49+
`${url.resourcesCommonPath}/lib/zocial/zocial.css`,
50+
`${url.resourcesPath}/css/login.css`
51+
],
4952
"htmlClassName": getClassName("kcHtmlClass"),
5053
"bodyClassName": undefined
5154
});
@@ -276,34 +279,35 @@ export default function Template(props: TemplateProps<KcContext, I18n>) {
276279
);
277280
}
278281

279-
const useStyles = makeStyles<{ contentWidth: number }>({
280-
"name": { Template }
281-
})((_theme, { contentWidth }) => ({
282-
"container": {
283-
"marginTop": fr.spacing("10v"),
284-
"animation": `${keyframes`
282+
const useStyles = tss
283+
.withParams<{ contentWidth: number }>()
284+
.withName({ Template })
285+
.create(({ contentWidth }) => ({
286+
"container": {
287+
"marginTop": fr.spacing("10v"),
288+
"animation": `${keyframes`
285289
0% {
286290
opacity: 0;
287291
}
288292
100% {
289293
opacity: 1;
290294
}
291295
`} 400ms`
292-
},
293-
"centerCol": {
294-
"display": "flex",
295-
"flexDirection": "column",
296-
"alignItems": "center"
297-
},
298-
"feedback": {
299-
"marginBottom": fr.spacing("6v")
300-
},
301-
"kcContent": {
302-
"width": "100%"
303-
},
304-
"contentWrapper": {
305-
"maxWidth": `${contentWidth}px`,
306-
"width": "100%",
307-
"margin": "0 auto"
308-
}
309-
}));
296+
},
297+
"centerCol": {
298+
"display": "flex",
299+
"flexDirection": "column",
300+
"alignItems": "center"
301+
},
302+
"feedback": {
303+
"marginBottom": fr.spacing("6v")
304+
},
305+
"kcContent": {
306+
"width": "100%"
307+
},
308+
"contentWrapper": {
309+
"maxWidth": `${contentWidth}px`,
310+
"width": "100%",
311+
"margin": "0 auto"
312+
}
313+
}));

‎src/login/pages/Login.tsx‎

Lines changed: 7 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { useState, type FormEventHandler } from "react";
22
import { useConstCallback } from "keycloakify/tools/useConstCallback";
33
import type { PageProps } from "keycloakify/login/pages/PageProps";
4-
import { makeStyles } from "tss-react/dsfr";
4+
import { tss } from "tss-react/dsfr";
55
import { fr } from "@codegouvfr/react-dsfr";
66
import { Button } from "@codegouvfr/react-dsfr/Button";
77
import { Input } from "@codegouvfr/react-dsfr/Input";
@@ -23,15 +23,8 @@ export default function Login(
2323
"classes": classes_props
2424
});
2525

26-
const {
27-
social,
28-
realm,
29-
url,
30-
usernameEditDisabled,
31-
login,
32-
auth,
33-
registrationDisabled
34-
} = kcContext;
26+
const { social, realm, url, usernameHidden, login, auth, registrationDisabled } =
27+
kcContext;
3528

3629
const { msg, msgStr } = i18n;
3730
const { classes, cx } = useStyles();
@@ -172,7 +165,7 @@ export default function Login(
172165
"name": autoCompleteHelper,
173166
"type": "email",
174167
"defaultValue": login.username ?? "",
175-
...(usernameEditDisabled
168+
...(usernameHidden
176169
? { "disabled": true }
177170
: {
178171
"autoFocus": true,
@@ -200,7 +193,7 @@ export default function Login(
200193
)}
201194
>
202195
<div id="kc-form-options">
203-
{realm.rememberMe && !usernameEditDisabled && (
196+
{realm.rememberMe && !usernameHidden && (
204197
<Checkbox
205198
className={classes.rememberMe}
206199
options={[
@@ -254,9 +247,7 @@ export default function Login(
254247
);
255248
}
256249

257-
const useStyles = makeStyles({
258-
"name": { Login }
259-
})(() => ({
250+
const useStyles = tss.withName({ Login }).create({
260251
"centerCol": {
261252
"display": "flex",
262253
"flexDirection": "column",
@@ -283,4 +274,4 @@ const useStyles = makeStyles({
283274
"rememberMe": {
284275
"marginTop": fr.spacing("5v")
285276
}
286-
}));
277+
});

‎src/login/pages/RegisterUserProfile.tsx‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { useState } from "react";
22
import { UserProfileFormFields } from "./shared/UserProfileFormFields";
3-
import { makeStyles } from "tss-react/dsfr";
3+
import { tss } from "tss-react/dsfr";
44
import type { PageProps } from "keycloakify/login/pages/PageProps";
55
import { fr } from "@codegouvfr/react-dsfr";
66
import { useGetClassName } from "keycloakify/login/lib/useGetClassName";
@@ -74,9 +74,7 @@ export default function RegisterUserProfile(
7474
);
7575
}
7676

77-
const useStyles = makeStyles({
78-
"name": { RegisterUserProfile }
79-
})(() => ({
77+
const useStyles = tss.withName({ RegisterUserProfile }).create({
8078
"centerCol": {
8179
"display": "flex",
8280
"flexDirection": "column",
@@ -92,4 +90,4 @@ const useStyles = makeStyles({
9290
"gap": fr.spacing("4v"),
9391
"justifyContent": "end"
9492
}
95-
}));
93+
});

‎src/login/pages/Terms.tsx‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import {
55
useDownloadTerms
66
} from "keycloakify/login/lib/useDownloadTerms";
77
import type { PageProps } from "keycloakify/login/pages/PageProps";
8-
import { makeStyles } from "tss-react/dsfr";
8+
import { tss } from "tss-react/dsfr";
99
import { fr } from "@codegouvfr/react-dsfr";
1010
import { useGetClassName } from "keycloakify/login/lib/useGetClassName";
1111
import type { KcContext } from "../kcContext";
@@ -109,9 +109,7 @@ export default function Terms(
109109
);
110110
}
111111

112-
const useStyles = makeStyles({
113-
"name": { Terms }
114-
})({
112+
const useStyles = tss.withName({ Terms }).create({
115113
"formActions": {
116114
"display": "flex",
117115
"gap": fr.spacing("4v")

‎src/stories/login/Login.stories.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,7 @@ export const WithImmutablePresetUsername = () => (
6666
<PageStory
6767
kcContext={{
6868
login: { username: "[email protected]" },
69-
usernameEditDisabled: true
69+
usernameHidden: true
7070
}}
7171
/>
7272
);

‎yarn.lock‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1218,10 +1218,10 @@
12181218
exec-sh "^0.3.2"
12191219
minimist "^1.2.0"
12201220

1221-
"@codegouvfr/react-dsfr@^0.73.0":
1222-
version "0.73.0"
1223-
resolved "https://registry.yarnpkg.com/@codegouvfr/react-dsfr/-/react-dsfr-0.73.0.tgz#c11201f8b71bba9fca5c44b8eb4af3ee08ed65eb"
1224-
integrity sha512-QYXRF1LkRzlyfZNW2wYYX/HgeUAT0Su3sxWTbgWrpDdwml6bBpVCg4PWXT7ikCx1MU6tDdiKO3knueYFR9FOew==
1221+
"@codegouvfr/react-dsfr@^0.75.1":
1222+
version "0.75.1"
1223+
resolved "https://registry.yarnpkg.com/@codegouvfr/react-dsfr/-/react-dsfr-0.75.1.tgz#280810feff25ba134a1322e2ea5b2b698b83020f"
1224+
integrity sha512-FYlxpwnOstJ/oF4GjyzWS5GPKQl3vrHhZdiBthskNLcuphrpwtgMvRTklauQ+KSlnDU5m9P6RSUmalMGCmlzGw==
12251225
dependencies:
12261226
tsafe "^1.6.3"
12271227

@@ -10111,10 +10111,10 @@ jwt-decode@^3.1.2:
1011110111
resolved "https://registry.yarnpkg.com/jwt-decode/-/jwt-decode-3.1.2.tgz#3fb319f3675a2df0c2895c8f5e9fa4b67b04ed59"
1011210112
integrity sha512-UfpWE/VZn0iP50d8cz9NrZLM9lSWhcJ+0Gt/nm4by88UL+J1SiKN8/5dkjMmbEzwL2CAe+67GsegCbIKtbp75A==
1011310113

10114-
keycloakify@^7.15.5:
10115-
version "7.15.5"
10116-
resolved "https://registry.yarnpkg.com/keycloakify/-/keycloakify-7.15.5.tgz#5e29cff153799c9e7da7e6f2671f4dc919c9ac29"
10117-
integrity sha512-Nt6P/z0+QD+KNhnSFsh+b2wLG1RfVZwleAaxi67TGR08Wh80mRPKA/ebl1X+VnJZiRYWP+TICZoza1q7Pf/N/Q==
10114+
keycloakify@^8.0.0:
10115+
version "8.0.0"
10116+
resolved "https://registry.yarnpkg.com/keycloakify/-/keycloakify-8.0.0.tgz#b0f6a0fda34e8601f735df25b24909433a6b5fd3"
10117+
integrity sha512-/A6Uh9SuVdTP7cix8yS15Vfr03BwVFP11s3YPmQ9dSJN1GrIqzRs6mjTEnogM/ZfhySJwyXSeqTtpCGlXmtxJQ==
1011810118
dependencies:
1011910119
"@babel/generator" "^7.22.9"
1012010120
"@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:
1481414814
resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.5.0.tgz#42bfed86f5787aeb41d031866c8f402429e0fddf"
1481514815
integrity sha512-336iVw3rtn2BUK7ORdIAHTyxHGRIHVReokCR3XjbckJMK7ms8FysBfhLR8IXnAgy7T0PTPNBWKiH514FOW/WSg==
1481614816

14817-
tss-react@^4.8.8:
14818-
version "4.8.8"
14819-
resolved "https://registry.yarnpkg.com/tss-react/-/tss-react-4.8.8.tgz#80f58ff2fa2c15a4097d0760ea7d8ca327c73104"
14820-
integrity sha512-V57AU6J42LLhYhRGSxDVi9VLUaoQtV6y2Kb1e0uqabe3w61G9R8gkUiX4DHZUReboRY9rwExPWz0LVZIgqQ98Q==
14817+
tss-react@^4.9.0:
14818+
version "4.9.0"
14819+
resolved "https://registry.yarnpkg.com/tss-react/-/tss-react-4.9.0.tgz#1457e14e89f1c4a033b697f866439f5921c923d8"
14820+
integrity sha512-dgqNSR9J0+NxvdwzXoKo2HxGGu2sg0UikLnPumGNLa9CSPVcL6ZNu23CJwxPaMvRnQC8NRyNbUN3pBCS9AWwRA==
1482114821
dependencies:
1482214822
"@emotion/cache" "*"
1482314823
"@emotion/serialize" "*"

0 commit comments

Comments
 (0)