Switch to pnpm; Update CRA (tone-row#329)

* chore(module): remove module

* chore(pkg): update node version

* chore(pkg): remove vscode folder

* chore(pkg): nvmrc to node-version

* chore(cra): update to react-scripts 5

Author: rob-gordon

.github/workflows/benchmark.yml

@@ -8,7 +8,7 @@ jobs:
       - uses: actions/checkout@v2
       - uses: actions/setup-node@v1
         with:
-          node-version: 14.x
+          node-version: 16.x
       - name: Install Deps
         run: yarn
       - name: Benchmark

.github/workflows/e2e.yml

@@ -33,7 +33,7 @@ jobs:
       - name: Setup Node
         uses: actions/setup-node@v1
         with:
-          node-version: 14.x
+          node-version: 16.x
       - name: Install Playwright
         run: |
           yarn global add [email protected]

.github/workflows/test.yml

@@ -8,7 +8,7 @@ jobs:
       - uses: actions/checkout@v2
       - uses: actions/setup-node@v1
         with:
-          node-version: 14.x
+          node-version: 16.x
       - name: Install Dependencies
         run: yarn
       - name: Test

.gitignore

@@ -7,4 +7,5 @@ yarn-error.log
 .env.test.local
 .env.production.local
 .vercel
-TODO.md
+TODO.md
+.vscode

.node-version

@@ -0,0 +1 @@
+v16.17.0

.npmrc

@@ -0,0 +1 @@
+auto-install-peers=true

.nvmrc

@@ -45,7 +45,7 @@ module.exports = {
     "react/react-in-jsx-scope": "off",
     "@typescript-eslint/explicit-module-boundary-types": "off",
     "@typescript-eslint/no-explicit-any": "off",
-    "@typescript-eslint/ban-ts-comment": "warn",
+    "@typescript-eslint/ban-ts-comment": "off",
     "@typescript-eslint/ban-types": "off",
     "react/prop-types": 0,
     "@typescript-eslint/no-empty-interface": 0,

.vscode/launch.json

@@ -22,7 +22,10 @@
     "@sentry/tracing": "^6.18.1",
     "@stripe/react-stripe-js": "^1.6.0",
     "@stripe/stripe-js": "^1.19.1",
+    "@supabase/gotrue-js": "^1.22.22",
+    "@supabase/postgrest-js": "^0.38.0",
     "@supabase/supabase-js": "^1.24.0",
+    "@svgr/webpack": "^6.3.1",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
@@ -33,19 +36,22 @@
     "@types/node": "^12.0.0",
     "@types/react": "^17.0.0",
     "@types/react-dom": "^17.0.0",
+    "buffer": "^6.0.3",
     "core-js": "^3.18.1",
     "cytoscape": "^3.20.0",
     "cytoscape-dagre": "^2.3.2",
     "cytoscape-elk": "^2.0.2",
     "cytoscape-klay": "^3.1.4",
     "date-fns": "^2.25.0",
     "deepmerge": "^4.2.2",
+    "eslint": "^8.3.0",
     "file-saver": "^2.0.5",
     "flagged": "^2.0.1",
     "framer-motion": "^4.1.17",
     "gray-matter": "^4.0.2",
     "lodash.throttle": "^4.1.1",
     "lz-string": "^1.4.4",
+    "make-plural": "^7.1.0",
     "moniker": "^0.1.2",
     "phosphor-react": "^1.3.1",
     "re-resizable": "^6.9.0",
@@ -57,7 +63,7 @@
     "react-icons": "^4.3.1",
     "react-query": "^3.26.0",
     "react-router-dom": "^5.2.0",
-    "react-scripts": "4.0.3",
+    "react-scripts": "5.0.1",
     "react-select": "^4.3.1",
     "react-use-localstorage": "^3.5.3",
     "stripe": "^8.179.0",
@@ -124,8 +130,9 @@
     "@types/strip-comments": "^2.0.0",
     "@types/svg-parser": "^2.0.1",
     "@types/svgo": "^2.6.0",
-    "@typescript-eslint/eslint-plugin": "^4.26.1",
-    "@typescript-eslint/parser": "^4.26.1",
+    "@types/testing-library__jest-dom": "^5.14.5",
+    "@typescript-eslint/eslint-plugin": "^5",
+    "@typescript-eslint/parser": "^5",
     "axios": "^0.27.2",
     "benchmark": "^2.1.4",
     "concurrently": "^6.0.0",
@@ -140,6 +147,7 @@
     "eslint-plugin-simple-import-sort": "^7.0.0",
     "jest-canvas-mock": "^2.3.1",
     "minimist": "^1.2.5",
+    "monaco-editor": "^0.34.0",
     "msw": "^0.36.8",
     "prettier": "^2.3.1",
     "ts-unused-exports": "^7.0.3",

.vscode/settings.json

@@ -29,6 +29,7 @@ export function ClearTextButton({ handleClear }: { handleClear: () => void }) {
         dialogProps={{
           isOpen: dialogOpen,
           onDismiss: () => setDialogOpen(false),
+          "aria-label": t`Clear text`,
         }}
       >
         <Trans>Clear text?</Trans>

app/.eslintrc.js

@@ -152,6 +152,7 @@ const Graph = memo(
       userStyle: string;
     }>({ content: "", layout: "", userStyle: "" });
 
+    // Memoize values, return previous values if parsing fails
     const { content, layout, userStyle } = useMemo(() => {
       try {
         const { data, content } = frontmatter(stripComments(textToParse), {
@@ -166,7 +167,8 @@ const Graph = memo(
         };
         lastValues.current = values;
         return values;
-      } catch {
+      } catch (error) {
+        console.error(error);
         return lastValues.current;
       }
     }, [textToParse]);

app/package.json

@@ -1,5 +1,5 @@
 import React, { ReactNode, useContext } from "react";
-import { useRouteMatch } from "react-router";
+import { useRouteMatch } from "react-router-dom";
 
 import { HiddenGraphOptions } from "../lib/helpers";
 import { useFullscreen, useIsValidSponsor } from "../lib/hooks";

app/src/components/ClearTextButton.tsx

@@ -8,15 +8,18 @@ import { login } from "../lib/queries";
 import { Box, Type } from "../slang";
 import styles from "./LoginForm.module.css";
 import { Button, Input, Notice, Section } from "./Shared";
-
+type Fields = {
+  email: string;
+};
 export function LoginForm({ heading }: { heading: ReactNode }) {
-  const { register, handleSubmit } = useForm();
+  const { register, handleSubmit } = useForm<Fields>();
   const [success, setSuccess] = useState(false);
   const { mutate, isLoading, error } = useMutation(login, {
     onSuccess: () => setSuccess(true),
   });
+
   const onSubmit = useCallback(
-    ({ email }: { email: string }) => {
+    ({ email }: Fields) => {
       mutate(email);
     },
     [mutate]

app/src/components/Graph.tsx

@@ -17,7 +17,7 @@ import {
 import { memo, useContext, useRef, useState } from "react";
 import { useForm } from "react-hook-form";
 import { useMutation } from "react-query";
-import { useHistory, useRouteMatch } from "react-router";
+import { useHistory, useRouteMatch } from "react-router-dom";
 
 import { gaChangeTab, gaCopyChart, gaNewChart } from "../lib/analytics";
 import {

app/src/components/GraphWrapper.tsx

@@ -90,10 +90,12 @@ export default function Charts() {
     </Box>
   );
 }
-
+type Fields = {
+  chartTitle: string;
+};
 function LocalCharts() {
   const { setShowing } = useContext(AppContext);
-  const { watch, register, handleSubmit } = useForm();
+  const { watch, register, handleSubmit } = useForm<Fields>();
   const title = watch("chartTitle");
   const [charts, setCharts] = useState<string[]>([]);
   const { push } = useHistory();
@@ -103,7 +105,7 @@ function LocalCharts() {
   const [copy, setCopy] = useState("");
 
   const onSubmit = useCallback(
-    ({ chartTitle }: { chartTitle: string }) => {
+    ({ chartTitle }: Fields) => {
       if (chartTitle) {
         push(`/${chartTitle}`);
         setShowing("editor");
@@ -341,7 +343,9 @@ function CopyChart({
     </Dialog>
   );
 }
-
+type CreateNewFields = {
+  name: string;
+};
 function HostedCharts() {
   const validSponsor = useIsValidSponsor();
   const { session, setShowing } = useContext(AppContext);
@@ -356,10 +360,11 @@ function HostedCharts() {
     },
   });
   const { data: charts } = useCharts();
-  const { register, watch, handleSubmit } = useForm();
+  const { register, watch, handleSubmit } = useForm<CreateNewFields>();
   const name = watch("name");
+
   const onSubmit = useCallback(
-    ({ name }: { name: string }) => {
+    ({ name }: CreateNewFields) => {
       session?.user?.id && mutate({ name, user_id: session?.user?.id });
     },
     [mutate, session?.user?.id]
@@ -478,15 +483,17 @@ function CopyHostedChart({
     </Dialog>
   );
 }
-
+type CopyHostedFields = {
+  name: string;
+};
 function CopyHostedChartInner({
   isOpen,
   onDismiss,
 }: {
   isOpen: boolean | number;
   onDismiss: () => void;
 }) {
-  const { register, handleSubmit, watch } = useForm();
+  const { register, handleSubmit, watch } = useForm<CopyHostedFields>();
   const copyName = watch("name");
   const { push } = useHistory();
   const newChart = useMutation("makeChart", makeChart, {
@@ -500,7 +507,8 @@ function CopyHostedChartInner({
     typeof isOpen === "number" ? isOpen.toString() : undefined
   );
   const { session } = useContext(AppContext);
-  function onSubmit({ name }: { name: string }) {
+
+  function onSubmit({ name }: CopyHostedFields) {
     if (chart && session?.user?.id) {
       newChart.mutate({
         name,

app/src/components/LoginForm.tsx

@@ -3,7 +3,7 @@ import { CardElement, useElements, useStripe } from "@stripe/react-stripe-js";
 import { ReactNode, useCallback, useContext, useState } from "react";
 import { useForm } from "react-hook-form";
 import { useMutation } from "react-query";
-import { useHistory } from "react-router";
+import { useHistory } from "react-router-dom";
 
 import { formatCents, formatDate, formatRelative } from "../lib/helpers";
 import {

app/src/components/MenuNext.tsx

@@ -55,8 +55,9 @@ export default function useDownloadHandlers(
 
       // Add font file if necessary
       let fontString = "";
-      if (graphTheme.font?.files) {
-        for (const { url, name } of graphTheme.font?.files) {
+      const files = graphTheme.font.files;
+      if (files) {
+        for (const { url, name } of files) {
           if (!(url in window.__flowchartFunBase64EncodedFonts)) {
             const fontUrl = `/fonts/${url}`;
             const font = await fetch(fontUrl)

app/src/components/Navigation.tsx

@@ -5,13 +5,22 @@ import "core-js/features/object/entries";
 
 import * as Sentry from "@sentry/react";
 import { Integrations } from "@sentry/tracing";
+import { Buffer } from "buffer";
 import React from "react";
 import ReactDOM from "react-dom";
 
 import pkg from "../package.json";
 import App from "./components/App";
 import reportWebVitals from "./reportWebVitals";
 
+// Fixes Webpack 5 Buffer polyfill issue
+declare global {
+  interface Window {
+    Buffer: typeof Buffer;
+  }
+}
+window.Buffer = Buffer;
+
 Sentry.init({
   release: `flowchartfun@${pkg.version}`,
   dsn: "https://[email protected]/5673697",

app/src/components/SponsorDashboard.tsx

@@ -39,8 +39,8 @@ export const editorOptions: EditorProps["options"] = {
   insertSpaces: true,
   wordBasedSuggestions: false,
   occurrencesHighlight: false,
-  renderLineHighlight: false,
-  highlightActiveIndentGuide: false,
+  // TODO: choose the correct render line highlight, used to be false
+  renderLineHighlight: "none",
   scrollBeyondLastLine: false,
   overviewRulerBorder: false,
   lineDecorationsWidth: "10px",

app/src/components/useDownloadHandlers.ts

@@ -315,7 +315,7 @@ describe("parseText", () => {
   });
 
   test.skip("line number should account for yaml length, passed in", () => {
-    const edges = parseText(`a\n\t(5)`, getSize, 4).filter(edgesOnly);
+    const edges = parseText(`a\n\t(5)`, getSize).filter(edgesOnly);
     expect(edges).toContainEqual({
       data: {
         id: "N14e_5:0",
@@ -328,9 +328,9 @@ describe("parseText", () => {
   });
 
   test("should produce the same ID's regardless of line number start'", () => {
-    const resultA = parseText(`a\nb`, getSize, 0);
+    const resultA = parseText(`a\nb`, getSize);
     const idsA = resultA.map((n) => n.data.id);
-    const resultB = parseText(`a\nb`, getSize, 1);
+    const resultB = parseText(`a\nb`, getSize);
     const idsB = resultB.map((n) => n.data.id);
     expect(idsA).toEqual(idsB);
   });

app/src/index.tsx

@@ -6,10 +6,12 @@ import { palette } from "../slang/config";
 export const languageId = "flowchartfun";
 export const themeNameLight = "flowchartfun-light";
 export const themeNameDark = "flowchartfun-dark";
+import type { editor } from "monaco-editor";
 
-const lightTheme = {
+const lightTheme: editor.IStandaloneThemeData = {
   base: "vs",
   inherit: true,
+  colors: {},
   rules: [
     { token: "nodeIdAndClass", foreground: palette.purple[0] },
     {
@@ -23,9 +25,10 @@ const lightTheme = {
   ],
 };
 
-const darkTheme = {
+const darkTheme: editor.IStandaloneThemeData = {
   base: "vs-dark",
   inherit: true,
+  colors: {},
   rules: [
     // ID
     { token: "nodeIdAndClass", foreground: palette.purple[0] },

app/src/lib/constants.ts

@@ -69,6 +69,7 @@ const Edit = memo(function Edit() {
     >
       <Editor
         value={text}
+        // @ts-ignore
         wrapperClassName={styles.Editor}
         defaultLanguage={languageId}
         options={editorOptions}