Skip to content

Commit aa329d7

Browse files
garronejgarronej
committed
Add Vite test setup
1 parent 57cdca6 commit aa329d7

File tree

17 files changed

+1206
-159
lines changed

17 files changed

+1206
-159
lines changed

‎README.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,7 @@ npx tsc -p src/bin -w & npx tsc -p src -w
3636

3737
yarn start_cra # For testing in in a Create React App setup
3838
yarn start_next # For testing in a Next.js setup
39+
yarn start_vite # For testing in a Vite setup
3940
```
4041

4142
> When you want to import assets from the `./dsfr/` directory

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@
1212
"build": "rimraf dist/ && tsc -p src/bin && tsc -p src && yarn grant_exec_perms && yarn copy_dsfr_dist_to_root",
1313
"start_cra": "yarn yarn_link && cd src/test/frameworks/cra && yarn start",
1414
"start_next": "yarn yarn_link && cd src/test/frameworks/next && yarn dev",
15+
"start_vite": "yarn yarn_link && cd src/test/frameworks/vite && yarn dev",
1516
"lint:check": "eslint . --ext .ts,.tsx",
1617
"lint": "yarn lint:check --fix",
1718
"_format": "prettier '**/*.{ts,tsx,json,md}'",

‎src/bin/yarn_link.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -106,7 +106,7 @@ const execYarnLink = (params: { targetModuleName?: string; cwd: string }) => {
106106
});
107107
};
108108

109-
const testAppNames = ["cra", "next"] as const;
109+
const testAppNames = ["cra", "vite", "next"] as const;
110110

111111
const getTestAppPath = (testAppName: typeof testAppNames[number]) =>
112112
pathJoin(projectDirPath, "src", "test", "frameworks", testAppName);

‎src/test/frameworks/cra/package.json‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,9 @@
1919
"build": "react-scripts build",
2020
"test": "react-scripts test",
2121
"eject": "react-scripts eject",
22-
"prestart": "node node_modules/dsfr-react/bin/copy_dsfr_dist_to_public.js"
22+
"copy_dsfr_dist_to_public": "node node_modules/dsfr-react/bin/copy_dsfr_dist_to_public.js",
23+
"prestart": "yarn copy_dsfr_dist_to_public",
24+
"prebuild": "yarn copy_dsfr_dist_to_public"
2325
},
2426
"eslintConfig": {
2527
"extends": [

‎src/test/frameworks/cra/public/index.html‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -13,16 +13,16 @@
1313

1414
<%
1515
[
16-
"Marianne-Light",
17-
"Marianne-Light_Italic",
16+
//"Marianne-Light",
17+
//"Marianne-Light_Italic",
1818
"Marianne-Regular",
19-
"Marianne-Regular_Italic",
19+
//"Marianne-Regular_Italic",
2020
"Marianne-Medium",
21-
"Marianne-Medium_Italic",
21+
//"Marianne-Medium_Italic",
2222
"Marianne-Bold",
23-
"Marianne-Bold_Italic",
24-
"Spectral-Regular",
25-
"Spectral-ExtraBold"
23+
//"Marianne-Bold_Italic",
24+
//"Spectral-Regular",
25+
//"Spectral-ExtraBold"
2626
].forEach(function(name){ %>
2727
<link rel="preload" href="%PUBLIC_URL%/dsfr/fonts/<%=name%>.woff2" as="font" crossorigin="anonymous" />
2828
<% }); %>

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

Lines changed: 150 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,150 @@
1+
2+
import artworkLightSvgUrl from "dsfr-react/dsfr/artwork/light.svg";
3+
import artworkDarkSvgUrl from "dsfr-react/dsfr/artwork/dark.svg";
4+
import artworkSystemSvgUrl from "dsfr-react/dsfr/artwork/system.svg";
5+
import { useColorScheme } from "dsfr-react";
6+
7+
export function App() {
8+
9+
const { colorScheme, setColorScheme } = useColorScheme();
10+
11+
return (
12+
<>
13+
<h1>Color Scheme: {colorScheme}</h1>
14+
<button onClick={() => setColorScheme("dark")}>Set color scheme to dark</button>
15+
<button onClick={() => setColorScheme("light")}>Set color scheme to light</button>
16+
<button onClick={() => setColorScheme("system")}>Set color scheme to system</button>
17+
<header role="banner" className="fr-header">
18+
<div className="fr-header__body">
19+
<div className="fr-container">
20+
<div className="fr-header__body-row">
21+
<div className="fr-header__brand fr-enlarge-link">
22+
<div className="fr-header__brand-top">
23+
<div className="fr-header__logo">
24+
<a href="https://example.fr" title="Accueil - Nom de l’entité (ministère, secrétariat d‘état, gouvernement)">
25+
<p className="fr-logo">
26+
Intitulé
27+
<br />officiel
28+
</p>
29+
</a>
30+
</div>
31+
<div className="fr-header__navbar">
32+
<button className="fr-btn--menu fr-btn" data-fr-opened="false" aria-controls="modal-491" aria-haspopup="menu" id="button-492" title="Menu">
33+
Menu
34+
</button>
35+
</div>
36+
</div>
37+
</div>
38+
</div>
39+
</div>
40+
</div>
41+
<div className="fr-header__menu fr-modal" id="modal-491" aria-labelledby="button-492">
42+
<div className="fr-container">
43+
<button className="fr-btn--close fr-btn" aria-controls="modal-491" title="Fermer">
44+
Fermer
45+
</button>
46+
<div className="fr-header__menu-links">
47+
</div>
48+
<nav className="fr-nav" id="navigation-494" role="navigation" aria-label="Menu principal">
49+
<ul className="fr-nav__list">
50+
<li className="fr-nav__item">
51+
<a className="fr-nav__link" href="https://example.com" target="_self">accès direct</a>
52+
</li>
53+
<li className="fr-nav__item">
54+
<a className="fr-nav__link" href="https://example.com" target="_self">accès direct</a>
55+
</li>
56+
<li className="fr-nav__item">
57+
<a className="fr-nav__link" href="https://example.com" target="_self">accès direct</a>
58+
</li>
59+
<li className="fr-nav__item">
60+
<a className="fr-nav__link" href="https://example.com" target="_self">accès direct</a>
61+
</li>
62+
</ul>
63+
</nav>
64+
</div>
65+
</div>
66+
<div className="fr-header__tools-links">
67+
<ul className="fr-links-group">
68+
<li>
69+
<button className="fr-link fr-fi-theme-fill fr-link--icon-left" aria-controls="fr-theme-modal" data-fr-opened="false">Paramètres d{"'"}affichage</button>
70+
</li>
71+
</ul>
72+
</div>
73+
</header>
74+
75+
76+
77+
<dialog id="fr-theme-modal" className="fr-modal" aria-labelledby="fr-theme-modal-title">
78+
<div className="fr-container fr-container--fluid fr-container-md">
79+
<div className="fr-grid-row fr-grid-row--center">
80+
<div className="fr-col-12 fr-col-md-6 fr-col-lg-4">
81+
<div className="fr-modal__body">
82+
<div className="fr-modal__header">
83+
<button className="fr-btn--close fr-btn" aria-controls="fr-theme-modal" title="Fermer">
84+
Fermer
85+
</button>
86+
</div>
87+
<div className="fr-modal__content">
88+
<h1 id="fr-theme-modal-title" className="fr-modal__title">
89+
Paramètres d{"'"}affichage
90+
</h1>
91+
<div id="fr-display" className="fr-display">
92+
<div className="fr-form-group">
93+
<fieldset className="fr-fieldset">
94+
<legend className="fr-fieldset__legend fr-text--regular" id='-legend'>
95+
Choisissez un thème pour personnaliser l’apparence du site.
96+
</legend>
97+
<div className="fr-fieldset__content">
98+
<div className="fr-radio-group fr-radio-rich">
99+
<input value="light" type="radio" id="fr-radios-theme-light" name="fr-radios-theme" />
100+
<label className="fr-label" htmlFor="fr-radios-theme-light">
101+
Thème clair
102+
</label>
103+
<div className="fr-radio-rich__img">
104+
<svg xmlns="http://www.w3.org/2000/svg" className="fr-artwork" width="80px" height="80px" viewBox="0 0 80 80">
105+
<use className="fr-artwork-decorative" xlinkHref={`${artworkLightSvgUrl}#artwork-decorative`}></use>
106+
<use className="fr-artwork-minor" xlinkHref={`${artworkLightSvgUrl}#artwork-minor`}></use>
107+
<use className="fr-artwork-major" xlinkHref={`${artworkLightSvgUrl}#artwork-major`}></use>
108+
</svg>
109+
</div>
110+
</div>
111+
<div className="fr-radio-group fr-radio-rich">
112+
<input value="dark" type="radio" id="fr-radios-theme-dark" name="fr-radios-theme" />
113+
<label className="fr-label" htmlFor="fr-radios-theme-dark">
114+
Thème sombre
115+
</label>
116+
<div className="fr-radio-rich__img">
117+
<svg xmlns="http://www.w3.org/2000/svg" className="fr-artwork" width="80px" height="80px" viewBox="0 0 80 80">
118+
<use className="fr-artwork-decorative" xlinkHref={`${artworkDarkSvgUrl}#artwork-decorative`}></use>
119+
<use className="fr-artwork-minor" xlinkHref={`${artworkDarkSvgUrl}#artwork-minor`}></use>
120+
<use className="fr-artwork-major" xlinkHref={`${artworkDarkSvgUrl}#artwork-major`}></use>
121+
</svg>
122+
</div>
123+
</div>
124+
<div className="fr-radio-group fr-radio-rich">
125+
<input value="system" type="radio" id="fr-radios-theme-system" name="fr-radios-theme" />
126+
<label className="fr-label" htmlFor="fr-radios-theme-system">
127+
Système
128+
<span className="fr-hint-text">Utilise les paramètres système.</span>
129+
</label>
130+
<div className="fr-radio-rich__img">
131+
<svg xmlns="http://www.w3.org/2000/svg" className="fr-artwork" width="80px" height="80px" viewBox="0 0 80 80">
132+
<use className="fr-artwork-decorative" xlinkHref={`${artworkSystemSvgUrl}#artwork-decorative`}></use>
133+
<use className="fr-artwork-minor" xlinkHref={`${artworkSystemSvgUrl}#artwork-minor`}></use>
134+
<use className="fr-artwork-major" xlinkHref={`${artworkSystemSvgUrl}#artwork-major`}></use>
135+
</svg>
136+
</div>
137+
</div>
138+
</div>
139+
</fieldset>
140+
</div>
141+
</div>
142+
</div>
143+
</div>
144+
</div>
145+
</div>
146+
</div>
147+
</dialog>
148+
</>
149+
);
150+
}

0 commit comments

Comments
 (0)