Merge branch 'dsfr-plus' into staging

client/.eslintrc

@@ -16,18 +16,27 @@
     "object-curly-newline": "off",
     "react/jsx-props-no-spreading": "off",
     "react-hooks/exhaustive-deps": "warn",
-    "max-len": ["warn", 200],
+    "max-len": [
+      "warn",
+      200
+    ],
     "react/prop-types": "warn",
     "import/prefer-default-export": 0,
+    "import/no-unresolved": "off",
     "no-underscore-dangle": 0,
     "no-console": "warn",
     "indent": [
       "warn",
       2,
       {
-        "ignoredNodes": ["TemplateLiteral"]
+        "ignoredNodes": [
+          "TemplateLiteral"
+        ]
       }
     ]
   },
-  "extends": ["airbnb", "airbnb/hooks"]
-}
+  "extends": [
+    "airbnb",
+    "airbnb/hooks"
+  ]
+}

client/package.json

@@ -10,7 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@dataesr/react-dsfr": "^3.9.2",
+    "@dataesr/dsfr-plus": "^0.2.0",
     "@m4tt72/matomo-tracker-react": "^0.6.2",
     "@tanstack/react-query": "^4.29.5",
     "@tanstack/react-query-devtools": "^4.29.6",

client/src/components/File/index.jsx

@@ -0,0 +1,79 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+// import '@gouvfr/dsfr/dist/component/link/link.css';
+
+const getAll = (props) => {
+  const newProps = {};
+
+  Object.keys(props).forEach((key) => {
+    if (key.startsWith('data-') || key === 'id') {
+      newProps[key] = props[key];
+    }
+  });
+
+  return newProps;
+};
+
+function File({
+  className,
+  label,
+  errorMessage,
+  hint,
+  onChange,
+  multiple,
+  accept,
+  ...remainingProps
+}) {
+  const _className = classNames(
+    'fr-upload-group',
+    className,
+    {
+      [`ds-fr--${label}`]: label,
+    },
+  );
+
+  return (
+    <div {...getAll(remainingProps)} className={_className}>
+      <label className="fr-label" htmlFor="file-upload">
+        {label}
+        {hint && <p className="fr-hint-text">{hint}</p>}
+      </label>
+      <input
+        onChange={onChange}
+        className="fr-upload"
+        type="file"
+        aria-describedby={hint || undefined}
+        multiple={multiple}
+        accept={accept}
+      />
+      {errorMessage && (
+        <p id="file-upload-with-error-desc-error" className="fr-error-text">
+          {errorMessage}
+        </p>
+      )}
+    </div>
+  );
+}
+
+File.defaultProps = {
+  className: '',
+  hint: '',
+  errorMessage: '',
+  accept: undefined,
+  multiple: false,
+  onChange: () => { },
+};
+
+File.propTypes = {
+  className: PropTypes.string,
+  label: PropTypes.string.isRequired,
+  multiple: PropTypes.bool,
+  onChange: PropTypes.func,
+  errorMessage: PropTypes.string,
+  hint: PropTypes.string,
+  accept: PropTypes.string,
+};
+
+export default File;

client/src/components/button-dropdown/index.jsx

@@ -1,8 +1,8 @@
 // https://www.w3schools.com/css/css_dropdowns.asp
 import PropTypes from 'prop-types';
+import { Button } from '@dataesr/dsfr-plus';
 import useToast from '../../hooks/useToast';
 
-import Button from '../button';
 import { export2Csv, export2FosmCsv, export2jsonl } from '../../utils/files';
 import { capitalize } from '../../utils/works';