Upgrade doc website to Next14 (#2825)

.eslintrc.js

@@ -103,6 +103,7 @@ module.exports = {
         "@typescript-eslint/no-explicit-any": "off",
         "@typescript-eslint/no-invalid-this": ["error"],
         "@typescript-eslint/no-non-null-assertion": "off",
+        "@typescript-eslint/no-unnecessary-type-assertion": "off",
         "@typescript-eslint/no-unsafe-argument": "off",
         "@typescript-eslint/no-unsafe-assignment": "off",
         "@typescript-eslint/no-unsafe-return": "off",

CONTRIBUTING.md

@@ -19,7 +19,7 @@ Victory is a monorepo built with [Wireit](https://github.com/google/wireit) and
 
 ### Requirements
 
-- [Node.js](https://nodejs.org/) 14 or higher.
+- [Node.js](https://nodejs.org/) 18 or higher.
 - [pnpm](https://pnpm.io/) 7 or higher.
 
 ### Setup
@@ -41,7 +41,7 @@ $ pnpm install
 
 ## Development
 
-### Dev servers
+### Dev demo app
 
 We have some dev servers available for a sample development environment.
 
@@ -52,6 +52,14 @@ $ pnpm start
 
 These run appropriate file watchers, so you can just start developing source files and wait for the webpack dev server to pick up the new changes.
 
+### Running Docs locally
+
+You can run the documentation website locally with the following command. It is linked to the Victory package via PNPM and will reflect changes in packages when they are rebuilt.
+
+```sh
+$ pnpm start:docs
+```
+
 ### Build and checks
 
 Our task system mostly takes care of all task dependencies and things you need. When you first clone this repo or a new branch, run:

docs/.eslintrc.json

@@ -0,0 +1,11 @@
+{
+  "extends": "next/core-web-vitals",
+  "rules": {
+    "no-magic-numbers": 0,
+    "react/no-multi-comp": 0,
+    "new-cap": 0,
+    "max-params": 0,
+    "@typescript-eslint/ban-ts-comment": 0,
+    "@typescript-eslint/no-unnecessary-type-assertion": 0
+  }
+}

docs/.gitignore

@@ -0,0 +1,36 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

docs/README.md

@@ -1,33 +1,36 @@
 <h1 align="center">Victory Documentation Site</h1>
 
-[Documentation site](https://commerce.nearform.com/open-source/victory/) for [victory](https://github.com/FormidableLabs/victory) built with [react-static](https://github.com/nozzle/react-static).
+[Documentation site](https://commerce.nearform.com/open-source/victory/) for [victory](https://github.com/FormidableLabs/victory) built with [Next.js](https://nextjs.org/).
 
 
 ## Getting Started
 
-To install and run the docs site locally:
+To install and run the docs site locally, first install and build from the ROOT of this repository
+
+The victory packages are PNPM linked into this project. You will need to execute a build at the root of the repository before the changes will be picked up by the documentation site.
 
 ```bash
-yarn install
-yarn start
+pnpm install
+pnpm build
+pnpm dev
 ```
 
-Note that paths in local development are based on a root of "/" but be careful when defining relative and absolute paths inline or doing url parsing, as the production output root will be "open-source/victory." Links in markdown files are currently handled with a link helper that prefixes relative paths with "/open-source/victory", so links like "/docs/victory-area" will work as expected in development and production. When adding links elsewhere, use `createPath` from `src/helpers/path-helpers` to ensure the path is correctly prefixed.
+Note that paths in local development are based on a root of "/" but be careful when defining relative and absolute paths inline or doing url parsing, as the production output root will be "open-source/victory."
 
 ## Want to see if you're ready to :shipit:?
 
 First, build the static site (within /docs folder):
 
 ```bash
-yarn build
+pnpm build
 ```
 Once the build succeeds, serve it: 
 
 ```bash
-yarn serve
+pnpm start
 ```
 
-This will render the docs site at `http://localhost:3000/open-source/victory/`. If you go to root (i.e. `http://localhost:3000/`), you will need to click through the browser's file explorer to `open-source/victory` to get to the site.
+This will render the docs site at `http://localhost:3000/open-source/victory/`. If you go to root (i.e. `http://localhost:3000/`).
 
 Note the staging and production sites are served from a nested path, e.g. `https://commerce.nearform.com/open-source/victory`. This step is important for validating that both the `basePath` used by the static HTML output and the `basename` used by the client-side router are working as expected.
 

docs/next.config.mjs

@@ -0,0 +1,9 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  basePath: "/open-source/victory",
+  compiler: {
+    styledComponents: true,
+  },
+};
+
+export default nextConfig;

docs/package.json

@@ -1,87 +1,62 @@
 {
   "name": "victory-docs",
-  "description": "Documentation site for Victory by Formidable",
+  "description": "Documentation site for Victory",
   "version": "9.3.1",
-  "author": "Formidable <[email protected]>",
-  "sideEffects": false,
-  "main": "static.config.js",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/FormidableLabs/victory-docs.git"
-  },
-  "bugs": {
-    "url": "https://github.com/FormidableLabs/victory-docs/issues"
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "prebuild": "pnpm -C .. run build",
+    "build": "pnpm run prebuild && next build",
+    "start": "next start",
+    "lint": "next lint"
   },
-  "homepage": "https://github.com/FormidableLabs/victory-docs#readme",
   "dependencies": {
+    "next": "14.1.0",
+    "react": "^18",
+    "react-dom": "^18"
+  },
+  "devDependencies": {
     "@d3fc/d3fc-discontinuous-scale": "^4.0.2",
-    "@juggle/resize-observer": "^3.0.2",
+    "@next/third-parties": "^14.1.0",
+    "@typescript-eslint/eslint-plugin": "^6",
+    "@typescript-eslint/parser": "^6",
+    "@types/klaw": "^3.0.6",
+    "@types/node": "^20",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "autoprefixer": "^10.0.1",
     "axios": "^0.21.2",
-    "babel-standalone": "^6.26.0",
-    "chokidar": "2.0.3",
-    "component-playground": "^3.2.1",
     "d3-array": "^2.4.0",
     "d3-scale": "^3.2.1",
     "d3-time": "^1.1.0",
     "date-fns": "^2.12.0",
-    "formidable-oss-badges": "^0.3.4",
+    "eslint": "^8",
+    "eslint-config-next": "14.1.0",
+    "formidable-oss-badges": "^1.3.1",
     "fuse.js": "^3.2.1",
-    "lodash": "^4.17.19",
-    "prismjs": "^1.15.0",
-    "react": "^16.8.0",
-    "react-cool-inview": "^0.5.14",
-    "react-copy-to-clipboard": "^5.0.2",
-    "react-dom": "^16.8.0",
-    "react-ga": "^2.4.1",
-    "react-gtm-module": "^2.0.11",
-    "react-helmet": "^5.2.0",
-    "react-hot-loader": "^4.12.3",
-    "react-inlinesvg": "^0.8.1",
-    "react-markdown": "^3.1.0",
-    "react-router": "^5.0.0",
-    "react-router-dom": "^5.0.0",
-    "react-router-ga": "^1.0.0",
-    "react-scroll": "^1.7.15",
-    "react-static": "^7.0.0",
-    "react-static-plugin-react-router": "^7.0.0",
-    "react-static-plugin-sitemap": "^7.0.0",
-    "react-static-plugin-styled-components": "^7.0.0",
-    "styled-components": "^5.1.0",
-    "styled-normalize": "^8.0.6",
-    "unist-util-visit": "^1.4.0",
-    "victory": "^36.8.5"
-  },
-  "devDependencies": {
-    "babel-cli": "^6.26.0",
-    "btoa": "^1.2.1",
-    "chalk": "^4.1.0",
-    "cross-env": "^6.0.3",
-    "github-slugger": "^1.2.1",
-    "gray-matter": "^3.1.1",
+    "gray-matter": "^4.0.3",
     "js-yaml": "^3.12.0",
     "klaw": "^3.0.0",
-    "mdast-util-to-string": "^1.0.5",
+    "lodash": "^4.17.19",
+    "postcss": "^8",
+    "prism-react-renderer": "^2.3.1",
+    "react-cool-inview": "^3.0.1",
+    "react-copy-to-clipboard": "^5.1.0",
+    "react-inlinesvg": "^4.1.1",
+    "react-live": "^4.1.6",
+    "react-markdown": "^9.0.1",
+    "react-scroll": "^1.9.0",
     "remark": "^9.0.0",
     "remark-frontmatter": "^1.3.0",
     "remark-slug": "^5.1.1",
-    "rimraf": "^3.0.2",
-    "serve": "^14.2.1",
-    "unist-util-select": "^1.5.0"
-  },
-  "resolutions": {
-    "react-hot-loader/source-map": "^0.8.0-beta.0"
+    "styled-components": "^6.1.8",
+    "styled-normalize": "^8.0.6",
+    "tailwindcss": "^3.3.0",
+    "typescript": "^5",
+    "unist-util-select": "^1.5.0",
+    "victory": "*"
   },
-  "keywords": [
-    "react-static",
-    "victory",
-    "charting",
-    "docs"
-  ],
-  "license": "MIT",
-  "scripts": {
-    "start": "node --max-old-space-size=2048 node_modules/react-static/bin/react-static start",
-    "serve": "serve dist/",
-    "build": "node ./scripts/build.js",
-    "clean": "rimraf dist"
+  "overrides": {
+    "react": "^18"
   }
 }

docs/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};