fix(deps): update @reach (major) (#165)

* fix(deps): update @reach

* chore(deps): fix theme-ui

* chore(frontend): remove pragma

Co-authored-by: Renovate Bot <bot@renovateapp.com>
Co-authored-by: LionelB <lionel@lumographe.fr>

shared/graphql-client/package.json

@@ -5,7 +5,7 @@
     "@urql/core": "^1.16.1",
     "graphql": "^15.4.0",
     "isomorphic-unfetch": "^3.1.0",
-    "react": "^16.14.0"
+    "react": "^17.0.1"
   },
   "main": "src/index.js",
   "module": "src/index.js",

targets/frontend/.babelrc

@@ -1,3 +1,12 @@
 {
-  "presets": ["next/babel"]
+  "presets": [
+    [
+      "next/babel",
+      {
+        "preset-react": {
+          "runtime": "automatic"
+        }
+      }
+    ]
+  ]
 }

targets/frontend/.eslintrc.json

@@ -15,6 +15,8 @@
   },
   "rules": {
     "jsx-a11y/anchor-is-valid": "warn",
-    "react/prop-types": "warn"
+    "react/prop-types": "warn",
+    "react/jsx-uses-react": "off",
+    "react/react-in-jsx-scope": "off"
   }
 }

targets/frontend/package.json

@@ -45,14 +45,14 @@
     "p-limit": "^3.1.0",
     "polished": "^4.0.5",
     "pretty-bytes": "^5.4.1",
-    "react": "^16.14.0",
+    "react": "^17.0.1",
     "react-ace": "^9.2.1",
     "react-autosuggest": "^10.0.4",
-    "react-dom": "^16.14.0",
+    "react-dom": "^17.0.1",
     "react-dropzone": "^11.2.4",
     "react-hook-form": "^6.14.2",
-    "react-icons": "^3.11.0",
-    "react-is": "^16.13.1",
+    "react-icons": "^4.1.0",
+    "react-is": "^17.0.1",
     "react-sortable-hoc": "^1.11.0",
     "rehype-raw": "^5.0.0",
     "rehype-stringify": "^8.0.0",
@@ -64,7 +64,7 @@
     "strip-markdown": "^4.0.0",
     "styled-components": "^5.2.1",
     "swr": "^0.3.11",
-    "theme-ui": "^0.3.5",
+    "theme-ui": "0.6.0-alpha.3",
     "unified": "^9.2.0",
     "unist-util-parents": "^1.0.3",
     "unist-util-select": "^3.0.4",

targets/frontend/src/components/MarkdownLink.js

@@ -1,5 +1,3 @@
-import React from "react";
-
 export const MarkdownLink = () => (
   <a
     href=" https://docs.framasoft.org/fr/grav/markdown.html"

targets/frontend/src/components/Roles.js

@@ -1,4 +1,3 @@
-import React from "react";
 import { Badge, Message } from "theme-ui";
 import { useQuery } from "urql";
 

targets/frontend/src/components/alerts/AlertTabs.js

@@ -1,6 +1,5 @@
 import Link from "next/link";
 import PropTypes from "prop-types";
-import React from "react";
 import { getStatusLabel, slugifyRepository } from "src/models";
 import { Message, NavLink, Spinner } from "theme-ui";
 import { useQuery } from "urql";

targets/frontend/src/components/alerts/AlertTitle.js

@@ -1,9 +1,7 @@
-/** @jsx jsx */
-
 import PropTypes from "prop-types";
 import { useState } from "react";
 import { IoIosLink, IoMdChatbubbles } from "react-icons/io";
-import { Box, Flex, jsx } from "theme-ui";
+import { Box, Flex } from "theme-ui";
 
 import { IconButton } from "../button";
 import { Comments } from "../comments";

targets/frontend/src/components/alerts/Status.js

@@ -1,8 +1,5 @@
-/** @jsx jsx */
-
 import PropTypes from "prop-types";
 import { IoIosCheckmark, IoIosClose } from "react-icons/io";
-import { jsx } from "theme-ui";
 import { useMutation } from "urql";
 
 import { MenuButton, MenuItem } from "../button";

targets/frontend/src/components/button/CopyButton.js

@@ -1,10 +1,7 @@
-/** @jsx jsx  */
-
 import PropTypes from "prop-types";
 import { useEffect, useState } from "react";
 import { IoMdCheckmark, IoMdClipboard } from "react-icons/io";
 import { Button } from "src/components/button";
-import { jsx } from "theme-ui";
 
 export const CopyButton = ({
   onClip,

targets/frontend/src/components/button/GitlabButton.js

@@ -1,4 +1,3 @@
-/** @jsx jsx  */
 import PropTypes from "prop-types";
 import { useEffect, useState } from "react";
 import {
@@ -10,7 +9,6 @@ import {
 import { getToken } from "src/lib/auth/token";
 import { request } from "src/lib/request";
 import useSWR from "swr";
-import { jsx } from "theme-ui";
 
 import { ConfirmButton } from "../confirmButton";
 

targets/frontend/src/components/button/index.js

@@ -1,4 +1,3 @@
-/** @jsx jsx */
 import {
   AccordionButton as ReachAccordionButton,
   useAccordionItemContext,
@@ -16,7 +15,6 @@ import {
   Box,
   Button as BaseButton,
   IconButton as BaseIconButton,
-  jsx,
   NavLink,
 } from "theme-ui";
 
@@ -52,13 +50,16 @@ const smallSize = {
 };
 // function _Button({ outline = false, ...props }) {}
 
-export const Button = React.forwardRef(({ outline, ...props }, ref) =>
-  outline ? (
+export const Button = React.forwardRef(function _Button(
+  { outline, ...props },
+  ref
+) {
+  return outline ? (
     <OutlineButton ref={ref} {...props} />
   ) : (
     <SolidButton ref={ref} {...props} />
-  )
-);
+  );
+});
 Button.propTypes = {
   outline: PropTypes.bool,
   ...buttonPropTypes,

targets/frontend/src/components/changes/ChangeGroup.js

@@ -1,8 +1,6 @@
-/** @jsx jsx */
 import { AccordionItem, AccordionPanel } from "@reach/accordion";
 import PropTypes from "prop-types";
 import { AccordionButton } from "src/components/button";
-import { jsx } from "theme-ui";
 
 export const ChangesGroup = ({ changes, label, renderChange }) => {
   return changes && changes.length > 0 ? (

targets/frontend/src/components/changes/FicheTravailDataChange.js

@@ -1,8 +1,7 @@
-/** @jsx jsx */
 import PropTypes from "prop-types";
 import React, { useState } from "react";
 import { IoIosArrowDown, IoIosArrowForward } from "react-icons/io";
-import { Button as TButton, Card, jsx, Text } from "theme-ui";
+import { Button as TButton, Card, Text } from "theme-ui";
 
 import { ViewDiff } from "./ViewDiff";
 

targets/frontend/src/components/changes/ViewDiff.js

@@ -1,9 +1,7 @@
 // adapted from https://github.com/davidmason/react-stylable-diff/blob/master/lib/react-diff.js
-/** @jsx jsx */
 
 import PropTypes from "prop-types";
 import { useState } from "react";
-import { jsx } from "theme-ui";
 
 var jsdiff = require("diff");
 

targets/frontend/src/components/changes/index.js

@@ -1,4 +1,3 @@
-/** @jsx jsx */
 import PropTypes from "prop-types";
 import { useState } from "react";
 import { IoIosArrowDown, IoIosArrowForward } from "react-icons/io";
@@ -9,7 +8,6 @@ import {
   Card,
   Divider,
   Flex,
-  jsx,
   Text,
 } from "theme-ui";
 

targets/frontend/src/components/collapsible/index.js

@@ -1,5 +1,5 @@
 import PropTypes from "prop-types";
-import React, { useRef, useState } from "react";
+import { useRef, useState } from "react";
 import { IoIosArrowDown, IoIosArrowUp, IoMdGitCompare } from "react-icons/io";
 
 import { Button } from "../button";

targets/frontend/src/components/comments/Comment.js

@@ -1,7 +1,5 @@
-/** @jsx jsx */
-
 import PropTypes from "prop-types";
-import { Box, jsx } from "theme-ui";
+import { Box } from "theme-ui";
 
 export function Comment({ comment }) {
   return (

targets/frontend/src/components/comments/CommentForm.js

@@ -1,8 +1,6 @@
-/** @jsx jsx */
 import VisuallyHidden from "@reach/visually-hidden";
 import PropTypes from "prop-types";
 import { useForm } from "react-hook-form";
-import { jsx } from "theme-ui";
 
 import { Button } from "../button";
 

targets/frontend/src/components/comments/CommentList.js

@@ -1,8 +1,6 @@
-/** @jsx jsx */
-
 import PropTypes from "prop-types";
 import { useLayoutEffect, useRef } from "react";
-import { jsx, Text } from "theme-ui";
+import { Text } from "theme-ui";
 
 import { Stack } from "../layout/Stack";
 import { Comment, commentPropTypes } from "./Comment";

targets/frontend/src/components/comments/index.js

@@ -1,9 +1,7 @@
-/** @jsx jsx */
-
 import PropTypes from "prop-types";
 import { useMemo } from "react";
 import { useUser } from "src/hooks/useUser";
-import { Card, jsx, Message } from "theme-ui";
+import { Card, Message } from "theme-ui";
 import { useMutation, useQuery } from "urql";
 
 import { Stack } from "../layout/Stack";

targets/frontend/src/components/confirmButton/index.js

@@ -1,9 +1,7 @@
-/** @jsx jsx */
-
 import PropTypes from "prop-types";
 import React, { useState } from "react";
 import { MdClose } from "react-icons/md";
-import { Button as BaseButton, jsx } from "theme-ui";
+import { Button as BaseButton } from "theme-ui";
 
 const buttonPropTypes = {
   size: PropTypes.oneOf(["small", "normal"]),
@@ -35,58 +33,56 @@ const smallSize = {
   py: "xxsmall",
 };
 
-export const ConfirmButton = React.forwardRef(
-  (
-    { variant = "primary", size = "normal", children, onClick, ...props },
-    ref
-  ) => {
-    const [needConfirm, setNeedConfirm] = useState(false);
+export const ConfirmButton = React.forwardRef(function _ConfirmButton(
+  { variant = "primary", size = "normal", children, onClick, ...props },
+  ref
+) {
+  const [needConfirm, setNeedConfirm] = useState(false);
 
-    const onClickCustom = (event) => {
-      if (!needConfirm) {
-        setNeedConfirm(true);
-      } else {
-        setNeedConfirm(false);
-        onClick(event);
-      }
-    };
-    const cancel = (event) => {
-      event.stopPropagation();
+  const onClickCustom = (event) => {
+    if (!needConfirm) {
+      setNeedConfirm(true);
+    } else {
       setNeedConfirm(false);
-    };
-    return (
-      <BaseButton
-        {...props}
-        ref={ref}
-        sx={{
-          ...defaultButtonStyles,
-          ...(size === "small" ? smallSize : normalSize),
-          "&:hover:not([disabled])": {
-            bg: (theme) => theme.buttons[variant].bgHover,
-            borderColor: (theme) => theme.buttons[variant].bgHover,
-          },
-          "&[disabled]": {
-            bg: "muted",
-            borderColor: "muted",
-          },
-          bg: (theme) => theme.buttons[variant].bg,
-          borderColor: (theme) => theme.buttons[variant].bg,
-          borderRadius: "small",
-          color: (theme) => theme.buttons[variant].color,
-        }}
-        onClick={onClickCustom}
-      >
-        {needConfirm ? (
-          <>
-            Vraiment ? <MdClose onClick={cancel} />
-          </>
-        ) : (
-          children
-        )}
-      </BaseButton>
-    );
-  }
-);
+      onClick(event);
+    }
+  };
+  const cancel = (event) => {
+    event.stopPropagation();
+    setNeedConfirm(false);
+  };
+  return (
+    <BaseButton
+      {...props}
+      ref={ref}
+      sx={{
+        ...defaultButtonStyles,
+        ...(size === "small" ? smallSize : normalSize),
+        "&:hover:not([disabled])": {
+          bg: (theme) => theme.buttons[variant].bgHover,
+          borderColor: (theme) => theme.buttons[variant].bgHover,
+        },
+        "&[disabled]": {
+          bg: "muted",
+          borderColor: "muted",
+        },
+        bg: (theme) => theme.buttons[variant].bg,
+        borderColor: (theme) => theme.buttons[variant].bg,
+        borderRadius: "small",
+        color: (theme) => theme.buttons[variant].color,
+      }}
+      onClick={onClickCustom}
+    >
+      {needConfirm ? (
+        <>
+          Vraiment ? <MdClose onClick={cancel} />
+        </>
+      ) : (
+        children
+      )}
+    </BaseButton>
+  );
+});
 ConfirmButton.propTypes = {
   ...buttonPropTypes,
 };

targets/frontend/src/components/dialog/index.js

@@ -1,10 +1,8 @@
-/** @jsx jsx */
-
 import { Dialog as ReachDialog } from "@reach/dialog";
 import VisuallyHidden from "@reach/visually-hidden";
 import PropTypes from "prop-types";
 import { IoMdClose } from "react-icons/io";
-import { css, jsx } from "theme-ui";
+import { css } from "theme-ui";
 
 import { IconButton } from "../button";
 import { Stack } from "../layout/Stack";

targets/frontend/src/components/editor/CodeEditor.js

@@ -1,8 +1,6 @@
-/** @jsx jsx */
-
 /* eslint-disable-next-line simple-import-sort/sort */
 import PropTypes from "prop-types";
-import { jsx } from "theme-ui";
+
 import AceEditor from "react-ace";
 import "ace-builds/src-noconflict/mode-json";
 import "ace-builds/src-noconflict/theme-github";

targets/frontend/src/components/editorialContent/ContentSections/MarkdownPreviewModal.js

@@ -1,12 +1,10 @@
-/** @jsx jsx  */
-
 import micromark from "micromark";
 import PropTypes from "prop-types";
 import { useState } from "react";
 import { IoIosEye } from "react-icons/io";
 import { Button } from "src/components/button";
 import { Dialog } from "src/components/dialog";
-import { Flex, jsx } from "theme-ui";
+import { Flex } from "theme-ui";
 
 export const MarkdownPreviewModal = ({ markdown }) => {
   const [showMarkdownPreview, setShowMarkdownPreview] = useState(false);