50 |
61 | );
62 | })
63 | );
64 |
65 | Download.displayName = symToStr({ Download });
66 |
67 | export default Download;
68 |
--------------------------------------------------------------------------------
/src/Header/index.ts:
--------------------------------------------------------------------------------
1 | export { default } from "./Header";
2 | export {
3 | Header,
4 | type HeaderProps,
5 | HeaderQuickAccessItem,
6 | type HeaderQuickAccessItemProps,
7 | addHeaderTranslations,
8 | useTranslation
9 | } from "./Header";
10 |
--------------------------------------------------------------------------------
/src/Header/useIsHeaderMenuModalOpen.ts:
--------------------------------------------------------------------------------
1 | import { useEffect, useState } from "react";
2 | import { headerMenuModalIdPrefix } from "./Header";
3 | import { useIsModalOpen } from "../Modal/useIsModalOpen";
4 | import { symToStr } from "tsafe/symToStr";
5 |
6 | export function useIsHeaderMenuModalOpen() {
7 | const [headerMenuModalId, setHeaderMenuModalId] = useState("");
8 |
9 | useEffect(() => {
10 | const matchingElements = document.querySelectorAll(`[id^='${headerMenuModalIdPrefix}']`);
11 |
12 | if (matchingElements.length > 1) {
13 | throw new Error(
14 | `There is more than one Header mounted on the page, you can't use ${symToStr({
15 | useIsHeaderMenuModalOpen
16 | })}`
17 | );
18 | }
19 |
20 | if (matchingElements.length === 0) {
21 | throw new Error(
22 | `The header is not mounted on the page, you can't use ${symToStr({
23 | useIsHeaderMenuModalOpen
24 | })}`
25 | );
26 | }
27 |
28 | setHeaderMenuModalId(matchingElements[0].id);
29 | }, []);
30 |
31 | return useIsModalOpen({
32 | "id": headerMenuModalId,
33 | "isOpenedByDefault": false
34 | });
35 | }
36 |
--------------------------------------------------------------------------------
/src/Highlight.tsx:
--------------------------------------------------------------------------------
1 | import React, { memo, forwardRef, type ReactNode, type CSSProperties } from "react";
2 | import { symToStr } from "tsafe/symToStr";
3 | import { assert } from "tsafe/assert";
4 | import type { Equals } from "tsafe";
5 | import { fr } from "./fr";
6 | import { cx } from "./tools/cx";
7 | import { useAnalyticsId } from "./tools/useAnalyticsId";
8 |
9 | export type HighlightProps = {
10 | id?: string;
11 | className?: string;
12 | classes?: Partial51 | 56 | {label} 57 | {details} 58 | 59 |
60 |
42 |
46 | );
47 | })
48 | );
49 |
50 | Highlight.displayName = symToStr({ Highlight });
51 |
52 | export default Highlight;
53 |
--------------------------------------------------------------------------------
/src/MainNavigation/index.ts:
--------------------------------------------------------------------------------
1 | export * from "./MainNavigation";
2 | export { addMegaMenuTranslations } from "./MegaMenu";
3 |
4 | import { MainNavigation } from "./MainNavigation";
5 |
6 | export default MainNavigation;
7 |
--------------------------------------------------------------------------------
/src/Modal/index.ts:
--------------------------------------------------------------------------------
1 | export * from "./Modal";
2 |
--------------------------------------------------------------------------------
/src/RadioButtons.tsx:
--------------------------------------------------------------------------------
1 | import React, { memo, forwardRef } from "react";
2 | import { symToStr } from "tsafe/symToStr";
3 | import { Fieldset, type FieldsetProps } from "./shared/Fieldset";
4 |
5 | export type RadioButtonsProps = Omit43 | {children} 44 |
45 |-
42 | {tags.map((tagProps, i) => (
43 |
-
44 |
45 |
46 | ))}
47 |
18 |
20 |
--------------------------------------------------------------------------------
/stories/ProConnectButton.stories.tsx:
--------------------------------------------------------------------------------
1 | import { ProConnectButton } from "../dist/ProConnectButton";
2 | import { sectionName } from "./sectionName";
3 | import { getStoryFactory, logCallbacks } from "./getStory";
4 |
5 | const { meta, getStory } = getStoryFactory({
6 | sectionName,
7 | "wrappedComponent": { ProConnectButton },
8 | "description": `
9 | - [See DSFR documentation](https://github.com/numerique-gouv/agentconnect-documentation/blob/main/doc_fs/bouton_proconnect.md)
10 | - [See source code](https://github.com/codegouvfr/react-dsfr/blob/main/src/ProConnectButton.tsx)`
11 | });
12 |
13 | export default meta;
14 |
15 | export const Default = getStory({
16 | "url": "https://example.com"
17 | });
18 |
19 | export const WithOnClick = getStory({
20 | ...logCallbacks(["onClick"])
21 | });
22 |
--------------------------------------------------------------------------------
/stories/RotatingLogo.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { memo, useState } from "react";
3 | import { useConstCallback } from "powerhooks";
4 | import { keyframes, createMakeAndWithStyles } from "tss-react";
5 | import keycloakifyLogoHeroMovingPngUrl from "./assets/logo-in.png";
6 | import keycloakifyLogoHeroStillPngUrl from "./assets/logo-out.png";
7 |
8 | const { makeStyles } = createMakeAndWithStyles({
9 | "useTheme": () => ({})
10 | });
11 |
12 | export type Props = {
13 | style?: React.CSSProperties;
14 | id?: string;
15 | onLoad?: () => void;
16 | };
17 |
18 | export const RotatingLogo = memo((props: Props) => {
19 | const { id, style, onLoad: onLoadProp } = props;
20 |
21 | const [isImageLoaded, setIsImageLoaded] = useState(false);
22 |
23 | const onLoad = useConstCallback(() => {
24 | setIsImageLoaded(true);
25 | onLoadProp?.();
26 | });
27 |
28 | const { classes } = useStyles({
29 | isImageLoaded
30 | });
31 | return (
32 |
33 | 
38 | 
44 |
45 | );
46 | });
47 |
48 | const useStyles = makeStyles<{ isImageLoaded: boolean }>({
49 | "name": { RotatingLogo }
50 | })((_theme, { isImageLoaded }) => ({
51 | "root": {
52 | "position": "relative"
53 | },
54 | "rotatingImg": {
55 | "animation": `${keyframes({
56 | "from": {
57 | "transform": "rotate(0deg)"
58 | },
59 | "to": {
60 | "transform": "rotate(360deg)"
61 | }
62 | })} infinite 20s linear`,
63 | "width": isImageLoaded ? "100%" : undefined,
64 | "height": isImageLoaded ? "auto" : undefined
65 | },
66 | "stillImg": {
67 | "position": "absolute",
68 | "top": "0",
69 | "left": "0",
70 | "width": isImageLoaded ? "100%" : undefined,
71 | "height": isImageLoaded ? "auto" : undefined
72 | }
73 | }));
74 |
--------------------------------------------------------------------------------
/stories/SkipLinks.stories.tsx:
--------------------------------------------------------------------------------
1 | import { SkipLinks, type SkipLinksProps } from "../dist/SkipLinks";
2 | import { sectionName } from "./sectionName";
3 | import { getStoryFactory } from "./getStory";
4 |
5 | const { meta, getStory } = getStoryFactory
18 |
20 |
--------------------------------------------------------------------------------
/stories/global.d.ts:
--------------------------------------------------------------------------------
1 | declare module "*.png" {
2 | const src: string;
3 | export default src;
4 | }
5 |
6 | declare module "*.svg" {
7 | import * as React from "react";
8 |
9 | export const ReactComponent: React.FunctionComponent<
10 | React.SVGProps
19 |
23 | 🇫🇷 The French State Design System React toolkit 🇫🇷 24 |
25 | 26 | [Github](https://github.com/codegouvfr/react-dsfr) - [Documentation](https://react-dsfr.codegouv.studio/) 27 | 28 | 29 | 30 |
31 | 32 | This Storybook website serves as your daily companion for developing with React-DSFR. 33 | It not only provides visibility into the available components but also allows you to preview them in various states, 34 | enabling you to copy and paste the code directly into your project. 35 | 36 | Additionally, this website features a handy [color helper tool](/?path=/docs/%F0%9F%8E%A8-color-helper--page). 37 | This tool empowers you to navigate through the DSFR color palette and choose the most fitting shades for your specific use cases. 38 | 39 |
40 |
--------------------------------------------------------------------------------
/stories/sectionName.ts:
--------------------------------------------------------------------------------
1 | export const sectionName = "components";
2 |
--------------------------------------------------------------------------------
/stories/utils.css:
--------------------------------------------------------------------------------
1 |
2 | .margin-bottom-50px {
3 | margin-bottom: 50px;
4 | }
5 |
6 | .margin-bottom-300px {
7 | margin-bottom: 300px;
8 | }
9 |
10 | .margin-bottom-600px {
11 | margin-bottom: 600px;
12 | }
--------------------------------------------------------------------------------
/test/integration/README.md:
--------------------------------------------------------------------------------
1 | # integration tests
2 |
3 | In this directory we test the integration of the module against mainstream React frameworks.
4 |
--------------------------------------------------------------------------------
/test/integration/cra/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | /node_modules
5 | /.pnp
6 | .pnp.js
7 |
8 | # testing
9 | /coverage
10 |
11 | # production
12 | /build
13 |
14 | # misc
15 | .DS_Store
16 | .env.local
17 | .env.development.local
18 | .env.test.local
19 | .env.production.local
20 |
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*
24 |
25 | /public/dsfr
26 |
27 | /public/dsfr/
28 |
--------------------------------------------------------------------------------
/test/integration/cra/README.md:
--------------------------------------------------------------------------------
1 | Run the App:
2 |
3 | ```bash
4 | git clone https://github.com/codegouvfr/react-dsfr
5 | cd react-dsfr
6 | yarn
7 | yarn start-cra
8 | ```
--------------------------------------------------------------------------------
/test/integration/cra/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "react-dsfr-test-app-cra",
3 | "version": "0.1.0",
4 | "private": true,
5 | "dependencies": {
6 | "react": "18.2.0",
7 | "react-dom": "18.2.0",
8 | "react-scripts": "5.0.1",
9 | "type-route": "^0.7.2",
10 | "@mui/material": "^5.14.18",
11 | "@emotion/react": "^11.11.0",
12 | "@emotion/styled": "^11.11.0",
13 | "@mui/icons-material": "^5.14.18",
14 | "@mui/x-date-pickers": "^6.18.2",
15 | "dayjs": "^1.11.6",
16 | "@codegouvfr/react-dsfr": "file:../../../dist"
17 | },
18 | "devDependencies": {
19 | "@types/node": "^16.7.13",
20 | "@types/react": "18.0.21",
21 | "@types/react-dom": "18.0.6",
22 | "typescript": "^4.8.3"
23 | },
24 | "scripts": {
25 | "start": "react-scripts start",
26 | "build": "react-scripts build",
27 | "test": "react-scripts test",
28 | "eject": "react-scripts eject",
29 | "copy-dsfr-to-public": "node node_modules/@codegouvfr/react-dsfr/bin/copy-dsfr-to-public.js",
30 | "only-include-used-icons": "node node_modules/@codegouvfr/react-dsfr/bin/only-include-used-icons.js",
31 | "prestart": "yarn copy-dsfr-to-public && yarn only-include-used-icons",
32 | "prebuild": "yarn copy-dsfr-to-public && yarn only-include-used-icons"
33 | },
34 | "eslintConfig": {
35 | "extends": [
36 | "react-app",
37 | "react-app/jest"
38 | ]
39 | },
40 | "browserslist": {
41 | "production": [
42 | ">0.2%",
43 | "not dead",
44 | "not op_mini all"
45 | ],
46 | "development": [
47 | "last 1 chrome version",
48 | "last 1 firefox version",
49 | "last 1 safari version"
50 | ]
51 | }
52 | }
--------------------------------------------------------------------------------
/test/integration/cra/public/robots.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *
3 | Disallow:
4 |
--------------------------------------------------------------------------------
/test/integration/cra/src/Picto.tsx:
--------------------------------------------------------------------------------
1 | import { fr } from "@codegouvfr/react-dsfr";
2 |
3 | import * as Pictogrammes from '@codegouvfr/react-dsfr/picto';
4 |
5 | export function Picto() {
6 | return (
7 |
20 |
22 | 23 | 🇫🇷 The French State Design System React toolkit 🇫🇷 24 |
25 | 26 | [Github](https://github.com/codegouvfr/react-dsfr) - [Documentation](https://react-dsfr.codegouv.studio/) 27 | 28 | 29 | 30 |
31 | 32 | This Storybook website serves as your daily companion for developing with React-DSFR. 33 | It not only provides visibility into the available components but also allows you to preview them in various states, 34 | enabling you to copy and paste the code directly into your project. 35 | 36 | Additionally, this website features a handy [color helper tool](/?path=/docs/%F0%9F%8E%A8-color-helper--page). 37 | This tool empowers you to navigate through the DSFR color palette and choose the most fitting shades for your specific use cases. 38 | 39 |
8 | {
9 | Object.entries(Pictogrammes).map(([name, Component]) => (
10 |
17 | )
18 | }
--------------------------------------------------------------------------------
/test/integration/cra/src/react-app-env.d.ts:
--------------------------------------------------------------------------------
1 | /// Is dark? {isDark ? "yes" : "no"}
30 | 31 |Client modal content
33 | 34 |
8 | {
9 | Object.entries(Pictogrammes).map(([name, Component]) => (
10 |
17 | )
18 | }
--------------------------------------------------------------------------------
/test/integration/vite/src/consentManagement.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { createConsentManagement } from "@codegouvfr/react-dsfr/consentManagement";
4 |
5 | export const {
6 | ConsentBannerAndConsentManagement,
7 | FooterConsentManagementItem,
8 | FooterPersonalDataPolicyItem,
9 | useConsent
10 | } = createConsentManagement({
11 | "finalityDescription": ({ lang }) => ({
12 | "advertising": {
13 | "title": "Publicité",
14 | "description": "Nous utilisons des cookies pour vous proposer des publicités adaptées à vos centres d’intérêts et mesurer leur efficacité."
15 | },
16 | "analytics": {
17 | "title": "Analyse",
18 | "description": "Nous utilisons des cookies pour mesurer l’audience de notre site et améliorer son contenu."
19 | },
20 | "personalization": {
21 | "title": "Personnalisation",
22 | "description": "Nous utilisons des cookies pour vous proposer des contenus adaptés à vos centres d’intérêts."
23 | },
24 | "statistics": {
25 | "title": "Statistiques",
26 | "description": "Nous utilisons des cookies pour mesurer l’audience de notre site et améliorer son contenu.",
27 | "subFinalities": {
28 | "deviceInfo": "Informations sur votre appareil",
29 | "traffic": "Informations sur votre navigation",
30 | }
31 | }
32 | }),
33 | "personalDataPolicyLinkProps": {
34 | "to": "/politique-de-confidentialite",
35 | },
36 | "consentCallback": async ({ finalityConsent, finalityConsent_prev })=> {
37 |
38 | if( finalityConsent_prev === undefined && !finalityConsent.isFullConsent ){
39 | location.reload();
40 | await new Promise(()=> {/*never*/});
41 | }
42 |
43 | console.log("callback from gdpr hook");
44 | }
45 | });
46 |
--------------------------------------------------------------------------------
/test/integration/vite/src/vite-env.d.ts:
--------------------------------------------------------------------------------
1 | ///