Modernize build, test, stories

[hatton]

• CRA start (about 50 seconds) to vite dev (230 ms)
• CRA Build (25 seconds) to vite (19 seconds)
• sort out svg ulrs vs react elements
• proxy api and s3 calls
• get modules split
• remove babel
• remove need for import {jsx}
• upgrade storybook, get running on vite
• react to 17
• node to 20
• jest (22 seconds) --> vitest (7 seconds)

---

This change is 

[andrew-polk]

The README wants a fair bit of updating.

I haven't finished reviewing yet but publishing what I have so far.

Reviewed 141 of 167 files at r1, all commit messages.
Reviewable status: 141 of 167 files reviewed, 14 unresolved discussions (waiting on @hatton)

---

doctor-storybook.log line 1 at r1 (raw file):

🩺 The doctor is checking the health of your Storybook..

I'm thinking we don't want this file in the repo?

---

migration-storybook.log line 1 at r1 (raw file):

🔎 checking possible migrations..

I'm thinking we don't want this file in the repo?

---

vite.config.ts line 21 at r1 (raw file):

                    target: "https://s3.amazonaws.com",
                    changeOrigin: true,
                    rewrite: (path) => {

Do we not want the secure prop here, too?

---

src/App.tsx line 1 at r1 (raw file):

// this engages a babel macro that does cool emotion stuff (like source maps). See https://emotion.sh/docs/babel-macros

I think we want to remove this babel comment everywhere, too.

---

src/components/Footer.tsx line 110 at r1 (raw file):

        >
            <img
                src="https://images.ctfassets.net/fo9twyrwpveg/7Htleo27dKYua8gio8UEUy/0797152a2d2f8e41db49ecbf1ccffdaa/PoweredByContentful_DarkBackground_MonochromeLogo.svg?react"

I don't think this instance wants the ?react treatment.

---

src/components/SearchDeeper.tsx line 7 at r1 (raw file):

import { Button, SvgIcon, useTheme } from "@material-ui/core";
import SearchingDeeper from "../assets/SearchingDeeper.svg?react";
import { commonUI } from "../theme";

Looks like an accidental addition.

---

src/components/TestEmbedding.tsx line 1 at r1 (raw file):

import { css } from "@emotion/react";

Should this file move to the Embedding folder?

---

src/components/appHosted/AppHostedLanguageGroup.tsx line 6 at r1 (raw file):

import React, { useContext, useState, useMemo, useEffect } from "react";
import { LanguageCard } from "../LanguageCard";
import logo from "../../assets/BloomLibrary Logo.svg?react";

In cases like this, where we use it as a src, I don't think we want ?react

---

src/components/BookDetail/GetTemplateButton.tsx line 6 at r1 (raw file):

import React from "react";
import { FormattedMessage } from "react-intl";
import TemplateIcon from "../../assets/Template.svg";

Looks like this one missed the ?react treatment.

---

src/components/BookDetail/ReadOfflineButton.tsx line 6 at r1 (raw file):

import React from "react";
import Button from "@material-ui/core/Button";
import BloomPubIcon from "../../assets/BloomPubWhite.svg?react";

In cases like this, where we use it as a src, I don't think we want ?react

---

src/components/Grid/GridPage.tsx line 12 at r1 (raw file):

import Button from "@material-ui/core/Button";
import { useIntl } from "react-intl";
import DownloadCsvIcon from "../../export/download-csv.svg?react";

In cases like this, where we use it as a src, I don't think we want ?react

---

src/connection/ApiConnection.ts line 12 at r1 (raw file):

    if (window.location.hostname === "localhost") {
        return local;
    }

Most of the time, when running locally, we want to test against the real api.
The dev only wants to change this when running against a locally-run api.

So, if I understand correctly, when running on localhost and we want prod api, we want /api.
If we're running on localhost and want local api, we want http://localhost:7071.
Else, we want https://api.bloomlibrary.org.

---

src/connection/LibraryQueryHooks.ts line 1374 at r1 (raw file):

                    })),
                };
            }

This looks like a change you must have been working on separately to try to search on more than one language.
We should probably move it out of this change to vite.

---

old-eslint.config.mjs line 1 at r1 (raw file):

export default [

Any reason to keep this file?n

[andrew-polk]

Reviewed 3 of 167 files at r1.
Reviewable status: 144 of 167 files reviewed, 16 unresolved discussions (waiting on @hatton)

---

eslint.config.mjs line 8 at r1 (raw file):

    { files: ["**/*.{js,mjs,cjs,ts,jsx,tsx}"] },
    // { languageOptions: { globals: globals.browser } },
    ...tseslint.configs.recommended,

I think maybe we want these:

• plugin:react/recommended
• plugin:react-hooks/recommended

---

eslint.config.mjs line 20 at r1 (raw file):

            ],

            "@typescript-eslint/no-explicit-any": "off",

I'm surprised to see we aren't at least warning on any

[andrew-polk]

Reviewed 104 of 116 files at r2, 10 of 12 files at r3, 2 of 2 files at r4, all commit messages.
Reviewable status: 151 of 171 files reviewed, 3 unresolved discussions (waiting on @hatton)

[andrew-polk]

Reviewed 1 of 1 files at r5.
Reviewable status: 151 of 171 files reviewed, 3 unresolved discussions (waiting on @hatton)

[andrew-polk]

Reviewed 2 of 116 files at r2, 3 of 4 files at r6, all commit messages.
Reviewable status: 154 of 172 files reviewed, 3 unresolved discussions (waiting on @hatton)

[andrew-polk]

Readme looks good.
I've reviewed everything except the storybook files.

Reviewed 1 of 1 files at r7.
Reviewable status: 155 of 173 files reviewed, 3 unresolved discussions (waiting on @hatton)

[andrew-polk]

Reviewed 1 of 116 files at r2.
Reviewable status: 156 of 173 files reviewed, 4 unresolved discussions (waiting on @hatton)

---

src/ImgWithCredits.tsx line 37 at r7 (raw file):

                the Img as a direct child. Apparently the direct child of a Tooltip must be
                something that "can hold a ref". */}
                <img {...props} />

I can't tell if this matters, but I'll ask the question...
Did we lose something by moving away from react-image here?

[hatton]

Reviewed 3 of 116 files at r2.
Reviewable status: 156 of 173 files reviewed, 4 unresolved discussions

[andrew-polk]

Ok, I've reviewed everything.

Looks like there are 4 comments remaining.

Reviewed 16 of 167 files at r1, 1 of 4 files at r6, all commit messages.
Reviewable status: all files reviewed, 4 unresolved discussions (waiting on @hatton)