Skip to content

Commit 8b676ca

Browse files
garronejgarronej
committed
Enable lang customization
1 parent 2cab7dd commit 8b676ca

File tree

10 files changed

+75
-19
lines changed

10 files changed

+75
-19
lines changed

‎docs/Alert.stories.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,8 @@ const { meta, getStory } = getStoryFactory({
4343
for setting \`isClosed\` to \`false\`, the \`<Alert />\` wont close itself.`,
4444
"control": { "type": null }
4545
}
46-
}
46+
},
47+
"disabledProps": ["lang"]
4748
});
4849

4950
export default meta;

‎docs/DarkModeSwitch.stories.tsx‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import { DarkModeSwitch } from "../dist/DarkModeSwitch";
2+
import { sectionName } from "./sectionName";
3+
import { getStoryFactory } from "./getStory";
4+
5+
const { meta, getStory } = getStoryFactory({
6+
sectionName,
7+
"wrappedComponent": { DarkModeSwitch },
8+
"description": `
9+
- [See DSFR documentation](https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/parametres-d-affichage),
10+
- [See source code](https://github.com/codegouvfr/react-dsfr/blob/main/src/DarkModeSwitch.tsx)`,
11+
"disabledProps": ["darkMode", "containerWidth"]
12+
});
13+
14+
export default meta;
15+
16+
export const Default = getStory({});

‎docs/getStory.tsx‎

Lines changed: 21 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,10 @@ import { id } from "tsafe/id";
66
import "../dist/dsfr/dsfr.css";
77
import { startDsfrReact, useIsDark, DsfrLangProvider } from "../dist";
88

9-
startDsfrReact({ "defaultColorScheme": "system" });
9+
startDsfrReact({
10+
"defaultColorScheme": "system",
11+
"defaultLang": "fr"
12+
});
1013

1114
export function getStoryFactory<Props extends Record<string, any>>(params: {
1215
sectionName: string;
@@ -15,13 +18,15 @@ export function getStoryFactory<Props extends Record<string, any>>(params: {
1518
/** https://storybook.js.org/docs/react/essentials/controls */
1619
argTypes?: Partial<Record<keyof Props, ArgType>>;
1720
defaultContainerWidth?: number;
21+
disabledProps?: ("containerWidth" | "lang" | "darkMode")[];
1822
}) {
1923
const {
2024
sectionName,
2125
wrappedComponent,
2226
description,
2327
argTypes = {},
24-
defaultContainerWidth
28+
defaultContainerWidth,
29+
disabledProps = []
2530
} = params;
2631

2732
const Component: any = Object.entries(wrappedComponent).map(([, component]) => component)[0];
@@ -37,6 +42,9 @@ export function getStoryFactory<Props extends Record<string, any>>(params: {
3742
const { setIsDark } = useIsDark();
3843

3944
useEffect(() => {
45+
if (disabledProps.includes("darkMode")) {
46+
return;
47+
}
4048
if (!isFirstStory) {
4149
return;
4250
}
@@ -123,18 +131,29 @@ export function getStoryFactory<Props extends Record<string, any>>(params: {
123131
}
124132
},
125133
"argTypes": {
134+
"darkMode": {
135+
"table": {
136+
"disable": disabledProps.includes("darkMode")
137+
}
138+
},
126139
"containerWidth": {
127140
"control": {
128141
"type": "range",
129142
"min": 0,
130143
"max": 1920,
131144
"step": 10
145+
},
146+
"table": {
147+
"disable": disabledProps.includes("containerWidth")
132148
}
133149
},
134150
"lang": {
135151
"options": ["fr", "en", "es", "de"],
136152
"control": {
137153
"type": "select"
154+
},
155+
"table": {
156+
"disable": disabledProps.includes("lang")
138157
}
139158
},
140159
"isFirstStory": {

‎src/SwitchColorTheme.tsx‎ renamed to ‎src/DarkModeSwitch.tsx‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ export type DisplayProps = {
1414
className?: string;
1515
};
1616

17-
export const SwitchColorTheme = memo(
17+
export const DarkModeSwitch = memo(
1818
forwardRef<HTMLButtonElement, DisplayProps>((props, ref) => {
1919
const { className, ...rest } = props;
2020

@@ -101,9 +101,9 @@ export const SwitchColorTheme = memo(
101101
})
102102
);
103103

104-
SwitchColorTheme.displayName = symToStr({ SwitchColorTheme });
104+
DarkModeSwitch.displayName = symToStr({ DarkModeSwitch });
105105

106-
export default SwitchColorTheme;
106+
export default DarkModeSwitch;
107107

108108
const RadioGroup = memo((props: { theme: "dark" | "light" | "system" }) => {
109109
const { theme } = props;
@@ -159,8 +159,8 @@ const RadioGroup = memo((props: { theme: "dark" | "light" | "system" }) => {
159159

160160
RadioGroup.displayName = symToStr({ RadioGroup });
161161

162-
const { useTranslation, addSwitchColorThemeTranslations } = createComponentI18nApi({
163-
"componentName": "SwitchColorTheme",
162+
const { useTranslation, addDarkModeSwitchTranslations } = createComponentI18nApi({
163+
"componentName": symToStr({ DarkModeSwitch }),
164164
"frMessages": {
165165
/* spell-checker: disable */
166166
"display settings": "Paramètres d'affichage",
@@ -174,7 +174,7 @@ const { useTranslation, addSwitchColorThemeTranslations } = createComponentI18nA
174174
}
175175
});
176176

177-
addSwitchColorThemeTranslations({
177+
addDarkModeSwitchTranslations({
178178
"lang": "en",
179179
"messages": {
180180
"display settings": "Display settings",
@@ -187,7 +187,7 @@ addSwitchColorThemeTranslations({
187187
}
188188
});
189189

190-
addSwitchColorThemeTranslations({
190+
addDarkModeSwitchTranslations({
191191
"lang": "es",
192192
"messages": {
193193
/* spell-checker: disable */
@@ -198,4 +198,4 @@ addSwitchColorThemeTranslations({
198198
}
199199
});
200200

201-
export { addSwitchColorThemeTranslations };
201+
export { addDarkModeSwitchTranslations };

‎src/lib/i18n.tsx‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,19 @@ import React, { createContext, useContext, useMemo } from "react";
22
import type { ReactNode } from "react";
33
import { isBrowser } from "./tools/isBrowser";
44

5+
let defaultLang: undefined | string;
6+
7+
export function setDefaultLang(lang: string) {
8+
defaultLang = lang;
9+
}
10+
511
const langContext = createContext<string | undefined>(undefined);
612

713
function useLang(): string | undefined {
814
const lang = useContext(langContext);
915

1016
if (lang === undefined) {
11-
return isBrowser ? navigator.language : undefined;
17+
return defaultLang ?? (!isBrowser ? undefined : navigator.language);
1218
}
1319

1420
return lang;

‎src/lib/start.ts‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,17 +3,20 @@ import type { ColorScheme } from "./darkMode";
33
import { startObservingColorSchemeHtmlAttribute, data_fr_theme, data_fr_scheme } from "./darkMode";
44
import { assert } from "tsafe/assert";
55
import { symToStr } from "tsafe/symToStr";
6+
import { setDefaultLang } from "./i18n";
67

78
export type Params = {
89
defaultColorScheme: ColorScheme | "system";
10+
/** If undefined it will fall back to browser preference */
11+
defaultLang?: string;
912
/** Default: false */
1013
verbose?: boolean;
1114
};
1215

1316
let isStarted = false;
1417

1518
export async function startDsfrReact(params: Params) {
16-
const { defaultColorScheme, verbose = false } = params;
19+
const { defaultColorScheme, verbose = false, defaultLang } = params;
1720

1821
assert(
1922
isBrowser,
@@ -29,6 +32,10 @@ export async function startDsfrReact(params: Params) {
2932

3033
isStarted = true;
3134

35+
if (defaultLang !== undefined) {
36+
setDefaultLang(defaultLang);
37+
}
38+
3239
const isNextJsDevEnvironnement = (window as any).__NEXT_DATA__?.buildId === "development";
3340

3441
set_html_color_scheme_attributes: {

‎src/next.tsx‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,7 @@ import DefaultDocument from "next/document";
3333
import { getAssetUrl } from "./lib/tools/getAssetUrl";
3434
import "./dsfr/dsfr.css";
3535
import "./dsfr/utility/icons/icons.css";
36+
import { setDefaultLang } from "./lib/i18n";
3637

3738
const fontUrlByFileBasename = {
3839
"Marianne-Light": marianneLightWoff2Url,
@@ -129,6 +130,12 @@ export function createNextDsfrIntegrationApi(params: Params): NextDsfrIntegratio
129130
startDsfrReact(startDsfrReactParams);
130131
} else {
131132
defaultColorScheme = startDsfrReactParams.defaultColorScheme;
133+
134+
const { defaultLang } = startDsfrReactParams;
135+
136+
if (defaultLang !== undefined) {
137+
setDefaultLang(defaultLang);
138+
}
132139
}
133140

134141
const colorSchemeKey = "dsfrColorScheme";

‎test/integration/cra/src/App.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { Header } from "@codegouvfr/react-dsfr/Header";
22
import { Alert } from "@codegouvfr/react-dsfr/Alert";
33
import { useIsDark, fr } from "@codegouvfr/react-dsfr";
4-
import { SwitchColorTheme } from "@codegouvfr/react-dsfr/SwitchColorTheme";
4+
import { DarkModeSwitch } from "@codegouvfr/react-dsfr/DarkModeSwitch";
55

66
export function App() {
77
const { isDark, setIsDark } = useIsDark();
@@ -53,7 +53,7 @@ export function App() {
5353
<button onClick={() => setIsDark(false)}>Set color scheme to light</button>
5454
<button onClick={() => setIsDark("system")}>Set color scheme to system</button>
5555

56-
<SwitchColorTheme />
56+
<DarkModeSwitch />
5757

5858
</>
5959
);

‎test/integration/next/pages/index.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { Alert } from "@codegouvfr/react-dsfr/Alert";
22
import { useIsDark, fr } from "@codegouvfr/react-dsfr";
3-
import { SwitchColorTheme } from "@codegouvfr/react-dsfr/SwitchColorTheme";
3+
import { DarkModeSwitch } from "@codegouvfr/react-dsfr/DarkModeSwitch";
44

55
export default function App() {
66
const { isDark, setIsDark } = useIsDark();
@@ -29,7 +29,7 @@ export default function App() {
2929
<button onClick={() => setIsDark(false)}>Set color scheme to light</button>
3030
<button onClick={() => setIsDark("system")}>Set color scheme to system</button>
3131

32-
<SwitchColorTheme />
32+
<DarkModeSwitch />
3333

3434
</>
3535
);

‎test/integration/vite/src/App.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { Header } from "@codegouvfr/react-dsfr/Header";
22
import { Alert } from "@codegouvfr/react-dsfr/Alert";
33
import { useIsDark, fr } from "@codegouvfr/react-dsfr";
4-
import { SwitchColorTheme } from "@codegouvfr/react-dsfr/SwitchColorTheme";
4+
import { DarkModeSwitch } from "@codegouvfr/react-dsfr/DarkModeSwitch";
55

66
export function App() {
77
const { isDark, setIsDark } = useIsDark();
@@ -53,7 +53,7 @@ export function App() {
5353
<button onClick={() => setIsDark(false)}>Set color scheme to light</button>
5454
<button onClick={() => setIsDark("system")}>Set color scheme to system</button>
5555

56-
<SwitchColorTheme />
56+
<DarkModeSwitch />
5757

5858
</>
5959
);

0 commit comments

Comments
 (0)