Use Preconstruct to manage monorepo

.eslintrc.json

@@ -28,5 +28,14 @@
   "rules": {
     "react/react-in-jsx-scope": "off",
     "react/prop-types": "off"
-  }
+  },
+  "overrides": [
+    {
+      "files": "*.js",
+      // rule overrides for js config files (next.config.js, etc.)
+      "rules": {
+        "@typescript-eslint/no-var-requires": "off"
+      }
+    }
+  ]
 }

.github/actions/get-node-version/Dockerfile

@@ -1,5 +1,5 @@
 # Image already pulled on runners
-FROM node:14-alpine
+FROM node:16-alpine
 WORKDIR /src
 COPY package.json yarn.lock ./
 RUN yarn install --frozen-lockfile

.github/actions/get-node-version/package.json

@@ -5,18 +5,16 @@
     "directory": ".github/actions/get-node-version"
   },
   "engines": {
-    "node": "^14.17.0"
+    "node": "^16.6.0"
   },
   "scripts": {
     "build": "tsc"
   },
   "dependencies": {
     "@actions/core": "^1.4.0",
-    "semver": "^7.3.5"
-  },
-  "devDependencies": {
-    "@types/node": "^14.17.6",
+    "@types/node": "^16.6.2",
     "@types/semver": "^7.3.8",
-    "typescript": "4.3.5"
+    "semver": "^7.3.5",
+    "typescript": "^4.4.2"
   }
 }

.github/actions/get-node-version/src/main.ts

@@ -20,7 +20,7 @@ import {readFileSync} from "fs";
   }
 
   const typesVersionRangeString = semver.validRange(
-    packageJson.devDependencies["@types/node"]
+    packageJson.dependencies["@types/node"]
   );
   if (!typesVersionRangeString) {
     setFailed(`Invalid types version range: ${typesVersionRangeString}`);

.github/actions/get-node-version/yarn.lock

@@ -7,10 +7,10 @@
   resolved "https://registry.yarnpkg.com/@actions/core/-/core-1.4.0.tgz#cf2e6ee317e314b03886adfeb20e448d50d6e524"
   integrity sha512-CGx2ilGq5i7zSLgiiGUtBCxhRRxibJYU6Fim0Q1Wg2aQL2LTnF27zbqZOrxfvFQ55eSBW0L8uVStgtKMpa0Qlg==
 
-"@types/node@^14.17.6":
-  version "14.17.6"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-14.17.6.tgz#cc61c8361c89e70c468cda464d1fa3dd7e5ebd62"
-  integrity sha512-iBxsxU7eswQDGhlr3AiamBxOssaYxbM+NKXVil8jg9yFXvrfEFbDumLD/2dMTB+zYyg7w+Xjt8yuxfdbUHAtcQ==
+"@types/node@^16.6.2":
+  version "16.11.10"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-16.11.10.tgz#2e3ad0a680d96367103d3e670d41c2fed3da61ae"
+  integrity sha512-3aRnHa1KlOEEhJ6+CvyHKK5vE9BcLGjtUpwvqYLRvYNQKMfabu3BwfJaA/SLW8dxe28LsNDjtHwePTuzn3gmOA==
 
 "@types/semver@^7.3.8":
   version "7.3.8"
@@ -31,10 +31,10 @@ semver@^7.3.5:
   dependencies:
     lru-cache "^6.0.0"
 
-typescript@4.3.5:
-  version "4.3.5"
-  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.3.5.tgz#4d1c37cc16e893973c45a06886b7113234f119f4"
-  integrity sha512-DqQgihaQ9cUrskJo9kIyW/+g0Vxsk8cDtZ52a3NGh0YNTfpUSArXSohyUGnvbPazEPLu398C0UxmKSOrPumUzA==
+typescript@^4.4.2:
+  version "4.5.2"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.5.2.tgz#8ac1fba9f52256fdb06fb89e4122fa6a346c2998"
+  integrity sha512-5BlMof9H1yGt0P8/WF+wPNw6GfctgGjXp5hkblpyT+8rkASSmkUKMXrxR0Xg8ThVCi/JnHQiKXeBaEwCeQwMFw==
 
 yallist@^4.0.0:
   version "4.0.0"

.github/workflows/static-analysis.yml

@@ -52,7 +52,7 @@ jobs:
       - name: Install yarn dependencies
         run: yarn install
       - name: Run ESLint
-        run: yarn run eslint nextjs thunderstore-components -f node_modules/@microsoft/eslint-formatter-sarif/sarif.js -o results.sarif || ":"
+        run: yarn run eslint apps packages -f node_modules/@microsoft/eslint-formatter-sarif/sarif.js -o results.sarif || ":"
       - name: Upload SARIF
         uses: github/codeql-action/upload-sarif@v1
         with:

.github/workflows/test.yml

@@ -47,11 +47,7 @@ jobs:
             yarn-${{ runner.os }}-
       - name: Install Yarn dependencies
         run: yarn install --frozen-lockfile
-      - name: Build thunderstore-components
-        run: |
-          cd thunderstore-components
-          yarn build
-      - name: Build nextjs
-        run: |
-          cd nextjs
-          yarn build
+      - name: Build @thunderstore/components
+        run: yarn workspace @thunderstore/components build
+      - name: Build @thunderstore/nextjs
+        run: yarn workspace @thunderstore/nextjs build

README.md

@@ -0,0 +1,78 @@
+# Thunderstore UI
+
+Monorepo containing Next.js frontend for [thunderstore.io](https://thunderstore.io)
+and reusable UI components.
+
+## Monorepo Setup
+
+- [`yarn` workspaces](https://classic.yarnpkg.com/en/docs/workspaces/) manages
+  the packages in the monorepo (see `packages` key in base `package.json` file)
+  and handles dependency installation/deduplication.
+- [`preconstruct`](https://preconstruct.tools/) automates building and linking
+  the packages within the monorepo. Instead of using relative paths, local
+  packages can be imported as if they were installed via a package manager.
+  - Packages can be linked locally by running `yarn preconstruct dev`, but this
+    is handled automatically by `postinstall` hook, so developers don't need to
+    worry about it.
+
+```
+// first time setup
+git clone [email protected]:thunderstore-io/thunderstore-ui.git thunderstore-ui
+cd thunderstore-ui
+yarn install
+
+// start Next.js dev server
+yarn workspace @thunderstore/nextjs dev
+```
+
+That's it. Changes done to `apps/nextjs` and `packages/components` should both
+be automatically visible at [http://localhost:3000/].
+
+### Adding dependencies
+
+To add new dependencies to existing packages, simply run something like:
+
+```
+yarn workspace @thunderstore/components add react-table @types/react-table
+```
+
+### Adding a new package
+
+To add a completely new package, start by creating the following file structure:
+
+```
+// packages/greeter/package.json:
+{
+  "name": "@thunderstore/greeter",
+  "version": "1.0.0",
+  "description": "Example package"
+}
+
+// packages/greeter/src/index.tsx:
+import React from "react";
+
+export const Greeter: React.FC = () => <p>Hello, world!</p>;
+```
+
+To add some required fields to the new package's `package.json`, run
+`yarn preconstruct init` and allow modifying `package.json` when asked.
+
+To install dependencies, if any, run e.g.
+`yarn workspace @thunderstore/greeter add react react-dom @types/react`.
+
+To "install" the new package to Next.js app, update the `dependencies` section
+in `apps/nextjs/package.json` with `"@thunderstore/greeter": "^1.0.0",`.
+
+Then run `yarn` one more time to let Preconstruct work its magic. After that the
+new package should be usable in the Next.js app by simply importing it:
+
+```
+import { Greeter } from "@thunderstore/greeter";
+```
+
+### About VS Code...
+
+VS Code may have problem detecting installed packages in this monorepo/workspace
+setup. Installing
+[Monorepo Workspace extension](https://marketplace.visualstudio.com/items?itemName=folke.vscode-monorepo-workspace)
+may solve them.

nextjs/next-env.d.ts → apps/nextjs/next-env.d.ts

@@ -1,3 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/types/global" />
 /// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

apps/nextjs/next.config.js

@@ -0,0 +1,3 @@
+const withPreconstruct = require("@preconstruct/next");
+
+module.exports = withPreconstruct();

apps/nextjs/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "@thunderstore/nextjs",
+  "version": "0.1.0",
+  "repository": "https://github.com/thunderstore-io/thunderstore-ui/tree/master/apps/nextjs",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "@chakra-ui/react": "^1.6.8",
+    "@emotion/react": "^11.4.1",
+    "@emotion/styled": "^11.3.0",
+    "@thunderstore/components": "^0.1.0",
+    "@types/react": "^17.0.19",
+    "framer-motion": "^4.1.17",
+    "next": "^11.1.0",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2"
+  },
+  "devDependencies": {
+    "@preconstruct/next": "^3.0.1",
+    "eslint-config-next": "^11.1.2"
+  }
+}

nextjs/pages/_app.tsx → apps/nextjs/pages/_app.tsx

@@ -1,5 +1,5 @@
 import { AppProps } from "next/app";
-import { RootWrapper, theme } from "thunderstore-components";
+import { RootWrapper, theme } from "@thunderstore/components";
 
 function MyApp({ Component, pageProps }: AppProps): JSX.Element {
   return (

nextjs/pages/community-picker.tsx → apps/nextjs/pages/community-picker.tsx

@@ -1,4 +1,4 @@
-import { Community, MultiCommunityPicker } from "thunderstore-components";
+import { Community, MultiCommunityPicker } from "@thunderstore/components";
 import React, { useState } from "react";
 import { Box, Button, List, ListItem } from "@chakra-ui/react";
 

nextjs/pages/package-upload.tsx → apps/nextjs/pages/package-upload.tsx

@@ -1,4 +1,4 @@
-import { PackageUpload } from "thunderstore-components";
+import { PackageUpload } from "@thunderstore/components";
 import React from "react";
 
 const PackageUploadPage: React.FC<Record<string, never>> = () => {

nextjs/pages/team-picker.tsx → apps/nextjs/pages/team-picker.tsx

@@ -1,4 +1,4 @@
-import { TeamPicker } from "thunderstore-components";
+import { TeamPicker } from "@thunderstore/components";
 import React, { useState } from "react";
 import { Box, Button, Text } from "@chakra-ui/react";
 

nextjs/tsconfig.json → apps/nextjs/tsconfig.json

@@ -28,5 +28,5 @@
   },
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
   "exclude": ["node_modules"],
-  "references": [{ "path": "../thunderstore-components" }]
+  "references": [{ "path": "../../packages/components" }]
 }

babel.config.js

@@ -0,0 +1,14 @@
+module.exports = {
+  presets: [
+    [
+      "@babel/preset-env",
+      {
+        modules: false,
+        loose: true,
+      },
+    ],
+    "@babel/preset-react",
+    "@babel/preset-typescript",
+  ],
+  plugins: ["@babel/plugin-transform-runtime"],
+};