Skip to content

Dependencies

Jump to bottom
Chris Hartgerink edited this page Feb 10, 2024 · 53 revisions

Warning

This page is deprecated and may be removed soon.

Below, you can find the latest dependencies involved in this project. We separate dependencies like the package.json, based on main dependencies and developer dependencies (devDependencies).

If you're looking to upgrade a dependency, it's helpful to inspect the Upgrade tips and view any additional information on the dependency itself

🟥 🚧 This list is a work in progress at the moment

Upgrade tips

Dependency upgrades are managed using dependabot, so pull requests will come in on a regular basis.

Upgrades are important to maintain an up-to-date codebase. This helps us:

  • Fix known security issues
  • Introduce improvements as we're downstream from a lot of code
  • Reduce risk by continuously checking upgrades

Please verify the following checklists if you're upgrading a dependency as provided by dependabot.

Note that dependabot starts rebasing PRs after another upgrade has been merged. It's not the end of the world if you merge while it's doing that, but it is preferred you let the rebase finish. If it's ongoing you'll see the following at the original comment of the pull request:

⚠️ Dependabot is rebasing this PR ⚠️

Major

  • Do the release notes indicate relevant breaking changes?
  • Does the Heroku deploy complete?
  • Does the functionality the dependency provides still function as expected?
  • Anything off?

Minor

  • Do the release notes indicate relevant breaking changes?
  • Does the Heroku deploy complete?
  • Does the functionality the dependency provides still function as expected?
  • Anything off?

This also checks for breaking changes as not everybody follows SemVer correctly, where only major versions can have breaking changes.

Patch

  • Does the dependabot compatibility score provide reason for concern? Screenshot 2022-06-27 at 22 29 26
  • Does the Heroku deploy complete?
  • Does the functionality the dependency provides still function as expected?
  • Anything off?

Main dependencies

@algolia/autocomplete-js

@blitzjs/auth

Used to do authentication and authorization in the app (documentation). Introduced in Blitz 2.0.

@blitzjs/next

Used to make use of Next-specific functionality of Blitz (documentation). Introduced in Blitz 2.0.

@blitzjs/rpc

Used for query and mutation resolvers of Blitz (documentation). Introduced in Blitz 2.0.

@carbon/icons-react

Used to render icons. The icons are listed here.

@faker-js/faker

@headlessui/react

Used to render UI components

@prisma/client

Used to perform CRUD with the db.

@react-pdf-viewer/core

@tailwindcss/forms

Used to style form elements via tailwind.

@tailwindcss/line-clamp

Used to truncate the module title in app/core/components/ModuleCard.tsx.

@uploadcare/react-widget

algoliasearch

Used to communicate with Algolia's search API. (docs)

autoprefixer

Installed together with Tailwind as a peer dependency. (doc)

axios

Used to

  • communicate with Uploadcare (main & supporting files, changing avatar)
  • get metadata when adding a reference module via DOI createReferenceModule
  • handle payment with Stripe
  • send CrossRef XML data in a PUT request

blitz

concurrently

Used to run multiple processes during development. (npm run dev)

Candidate for moving to devDependencies.

dagre

eslint

Used to lint code.

Candidate for moving to devDependencies.

filesize

Used to render readable filesizes in the interface.

form-data

formik

husky

Helps run pre-commit and pre-push hooks.

This is a candidate for moving to devDependencies potentially.

i18next

Used to handle localization (e.g., the hero and the subtitle). See also react-i18next and Localization

markdown-it

moment

next

Next.js library. The React framework we are using.

passport-orcid

Used to connect accounts to ORCID.

pdfjs-dist

Needed for @react-pdf-viewer/core to function.

postcss

Installed as a dependency to tailwind (Tailwind Doc)

postmark

Used to send transactional and broadcast emails using Postmark.

prisma

Prisma CLI. Used to manage db.

quill

WYSIWYG editor. See also react-quilljs

quirrel

Used to run periodic jobs.

To add new periodic jobs, please see the documentation. Best way is to add a custom API route to test the query in first. For example:

import { BlitzApiHandler } from "blitz"
import db from "db"

const handler: BlitzApiHandler = async (req, res) => {
  const module = await db.module.findMany({})

  res.statusCode = 200
  res.setHeader("Content-Type", "application/json")
  res.end(JSON.stringify(module))
}

export default handler

To test jobs, please visit your local instance of Quirrel - it usually runs on http://127.0.0.1:9181 or the address printed in the console when running npm run dev. After invoking the job, check the console if you're testing. Make sure the test app deployment works too.

Before being acquired by Netlify, we ran this through Quirrel.dev itself - now we host our own instance over at Railway based on our own fork.

react

react-cookie-consent

Used to deal with consent for optional cookies.

react-dom

react-flow-renderer

Used to generate module maps.

react-helmet

react-hot-toast

react-i18next

Used to handle localization in React. See also i18next and Localization.

react-instantsearch-dom

Candidate for deletion - unclear what function it fulfills (but deletion needs to be tested).

react-markdown

Used to render Markdown for the main files.

Markdown files that can be used for testing:

  1. Test markdown file
  2. The main file from Many Paths module

react-media-hook

Used to detect the dark mode and min-width via useMediaPredicate(). For example:

const prefersDarkMode = useMediaPredicate("(prefers-color-scheme: dark)")
const biggerWindow = useMediaPredicate("(min-width: 640px)")

react-quilljs

React component for the WYSIWYG editor quill.

react-syntax-highlighter

react-xarrows

recharts

Used to create charts for the /stats page.

recoil

Used to manage state in the app.

If you're looking to learn how recoil works, check out this free course.

Logging may get too noisy on local. If so, set RECOIL_DUPLICATE_ATOM_KEY_CHECKING_ENABLED=FALSE in .env.local (See this issue)

recoil-persist

Effect used to store recoil state in localStorage.

Candidate for deletion if we implement in our own project. Used primarily for convenience's sake.

rehype-katex

Used to render equations on Markdown files

remark-gfm

remark-math

stripe

Used for payment integrations.

Cannot be tested with automated deployments, because this needs Stripe webhooks to be active. Because Heroku deployment apps have a priori not known URLs, we do not have a priori accepted webhooks.

How to test stripe on local

Figured out via Issue 721

  1. Create an account on Stripe
  2. Add products. Any names will work (e.g., "Collaborative Collection", "Community Collection")
  3. Get the API IDs of the products (price_***)
  4. Update the API IDs in the seeding script (seeds.ts)
  5. Seed the database (blitz db seed)
  6. Run the Stripe CLI (install stripe-cli first):
stripe listen --forward-to localhost:3000/api/stripe_webhook
  1. Match the Stripe secrets with your Stripe account (STRIPE_SECRET_KEY, STRIPE_PUBLISHABLE_KEY, and STRIPE_WEBHOOK_SECRET). STRIPE_WEBHOOK_SECRET is shown in the console when Stripe CLI is running.
  2. Start the app and complete the transaction with the following test credit card 💳
CC Nr: 4242 4242 4242 4242
Expiration date: 10/30 (any future date)
CVC: 000
Address: (any address)

See also the Stripe docs.

Stripe testing checklist

  • Publishing a module
    • Pay what you want when publishing a module
    • Closed license payments
  • Collections
    • Collaborative
    • Community
    • Upgrade collection
  • Supporting membership dues

tailwindcss

Used to style the app. Installed together with postcss & autoprefixer.

typescript

xml-js

zod

Used to validate input.

Developer dependencies

@testing-library/jest-dom

Used to test DOM elements via Jest.

@testing-library/react

Used to test React components.

@testing-library/react-hooks

Used to test React hooks.

@typescript-eslint/eslint-plugin

Used to lint our code.

eslint-config-next

An ESLint configuration for Next.js

eslint-config-prettier

An ESLint configuration for prettier.

jest

Used to run tests.

jest-environment-jsdom

Used to run tests, required by jest.

@types/react

Used to obtain type definitions for React.

lint-staged

prettier

prettier-plugin-prisma

prettier-plugin-tailwindcss

pretty-quick

ts-jest

Used to run jest.

tsx

Used to test the CrossRef deposit process via npm run test:xml.

    "test:xml": "tsx app/core/crossref/rawtest.ts"

Introduced in #614.

Clone this wiki locally