From b30bb6ce2f8ca279a7d3efc939ca3c57cbd7d8a5 Mon Sep 17 00:00:00 2001 From: Anthony LC Date: Wed, 6 Mar 2024 12:25:19 +0100 Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F(app-desk)=20improve=20useCun?= =?UTF-8?q?ninghamTheme?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Some tokens were not available from the hook. We only had the tokens of the currentTheme available but actually the theme is an augmentation of the default theme, so we should use the default theme tokens as a base and then override them with the currentTheme tokens. It is what this commit does. --- src/frontend/apps/desk/package.json | 2 + .../src/cunningham/useCunninghamTheme.tsx | 19 ++++++---- src/frontend/yarn.lock | 38 +++++-------------- 3 files changed, 23 insertions(+), 36 deletions(-) diff --git a/src/frontend/apps/desk/package.json b/src/frontend/apps/desk/package.json index 15552a0..ee8c05b 100644 --- a/src/frontend/apps/desk/package.json +++ b/src/frontend/apps/desk/package.json @@ -18,6 +18,7 @@ "@openfun/cunningham-react": "2.6.0", "@tanstack/react-query": "5.25.0", "i18next": "23.10.1", + "lodash": "4.17.21", "luxon": "3.4.4", "next": "14.1.3", "react": "18.2.0", @@ -34,6 +35,7 @@ "@testing-library/react": "14.2.1", "@testing-library/user-event": "14.5.2", "@types/jest": "29.5.12", + "@types/lodash": "4.14.202", "@types/luxon": "3.4.2", "@types/node": "*", "@types/react": "18.2.64", diff --git a/src/frontend/apps/desk/src/cunningham/useCunninghamTheme.tsx b/src/frontend/apps/desk/src/cunningham/useCunninghamTheme.tsx index 2e038ef..e858286 100644 --- a/src/frontend/apps/desk/src/cunningham/useCunninghamTheme.tsx +++ b/src/frontend/apps/desk/src/cunningham/useCunninghamTheme.tsx @@ -1,24 +1,29 @@ +import merge from 'lodash/merge'; import { create } from 'zustand'; import { tokens } from './cunningham-tokens'; -type ColorsTokens = typeof tokens.themes.default.theme.colors; -type ComponentTokens = typeof tokens.themes.default.components; + +type Tokens = typeof tokens.themes.default & Partial; +type ColorsTokens = Tokens['theme']['colors']; +type ComponentTokens = Tokens['components']; +type Theme = 'default' | 'dsfr'; interface AuthStore { - theme: string; - setTheme: (theme: string) => void; - colorsTokens: () => ColorsTokens; + theme: Theme; + setTheme: (theme: Theme) => void; + colorsTokens: () => Partial; componentTokens: () => ComponentTokens; } const useCunninghamTheme = create((set, get) => { - const currentTheme = () => tokens.themes[get().theme as 'default']; + const currentTheme = () => + merge(tokens.themes['default'], tokens.themes[get().theme]) as Tokens; return { theme: 'dsfr', colorsTokens: () => currentTheme().theme.colors, componentTokens: () => currentTheme().components, - setTheme: (theme: string) => { + setTheme: (theme: Theme) => { set({ theme }); }, }; diff --git a/src/frontend/yarn.lock b/src/frontend/yarn.lock index dc9cc19..2dd9336 100644 --- a/src/frontend/yarn.lock +++ b/src/frontend/yarn.lock @@ -3185,6 +3185,11 @@ resolved "https://registry.yarnpkg.com/@types/json5/-/json5-0.0.29.tgz#ee28707ae94e11d2b827bcbe5270bcea7f3e71ee" integrity sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ== +"@types/lodash@4.14.202": + version "4.14.202" + resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.202.tgz#f09dbd2fb082d507178b2f2a5c7e74bd72ff98f8" + integrity sha512-OvlIYQK9tNneDlS0VN54LLd5uiPCBOp7gS5Z0f1mjoJYBrtStzgmJBxONW3U6OZqdtNzZPmn9BS/7WI7BFFcFQ== + "@types/luxon@3.4.2": version "3.4.2" resolved "https://registry.yarnpkg.com/@types/luxon/-/luxon-3.4.2.tgz#e4fc7214a420173cea47739c33cdf10874694db7" @@ -7023,7 +7028,7 @@ lodash.truncate@^4.4.2: resolved "https://registry.yarnpkg.com/lodash.truncate/-/lodash.truncate-4.4.2.tgz#5a350da0b1113b837ecfffd5812cbe58d6eae193" integrity sha512-jttmRe7bRse52OsWIMDLaXxWqRAmtIUccAQ3garviCqJjafXOfNMO0yMfNpdD6zbGaTU0P5Nz7e7gAT6cKmJRw== -lodash@^4.17.15: +lodash@4.17.21, lodash@^4.17.15: version "4.17.21" resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c" integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg== @@ -8338,16 +8343,7 @@ string-length@^4.0.1: char-regex "^1.0.2" strip-ansi "^6.0.0" -"string-width-cjs@npm:string-width@^4.2.0": - version "4.2.3" - resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010" - integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g== - dependencies: - emoji-regex "^8.0.0" - is-fullwidth-code-point "^3.0.0" - strip-ansi "^6.0.1" - -string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3: +"string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3: version "4.2.3" resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010" integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g== @@ -8414,14 +8410,7 @@ string_decoder@~1.1.1: dependencies: safe-buffer "~5.1.0" -"strip-ansi-cjs@npm:strip-ansi@^6.0.1": - version "6.0.1" - resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9" - integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A== - dependencies: - ansi-regex "^5.0.1" - -strip-ansi@^6.0.0, strip-ansi@^6.0.1: +"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1: version "6.0.1" resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9" integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A== @@ -9270,16 +9259,7 @@ which@^2.0.1: dependencies: isexe "^2.0.0" -"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0": - version "7.0.0" - resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43" - integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q== - dependencies: - ansi-styles "^4.0.0" - string-width "^4.1.0" - strip-ansi "^6.0.0" - -wrap-ansi@^7.0.0: +"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0: version "7.0.0" resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43" integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==