Introduce app-root

bin/bootstrap.sh

@@ -32,4 +32,8 @@ printf 'Building `fe-content-pages`...\n'
 yarn workspace @zooniverse/fe-content-pages build
 printf '\n'
 
+printf 'Building `app-root`...\n'
+yarn workspace @zooniverse/app-root build
+printf '\n'
+
 echo 'Done!'

bin/bootstrap:es6.sh

@@ -32,4 +32,8 @@ printf 'Building `fe-content-pages`...\n'
 yarn workspace @zooniverse/fe-content-pages build
 printf '\n'
 
+printf 'Building `app-root`...\n'
+yarn workspace @zooniverse/app-root build
+printf '\n'
+
 echo 'Done!'

docs/arch/README.md

@@ -53,3 +53,4 @@
 - [ADR 51: User Group Stats Page](adr-51.md)
 - [ADR 52: User Stats Page](adr-52.md)
 - [ADR 53: Logged-In User Homepage](adr-53.md)
+- [ADR 54: app-root](adr-54.md)

docs/arch/adr-54.md

@@ -0,0 +1,22 @@
+# app-root
+
+## Context
+Upon the release of Next.js 13, we've decided to build app-root with the App Router - utilizing Next.js 13's ability to modularize the Zooniverse website. For instance, when a volunteer visits an /about page, the Javascript bundle their browser downloads should not contain /projects or any other unrelated route's code. This decision is also related to the addition and development of `/users` stats pages and `/groups` stats pages (ADRs 51 - 53).
+
+## Decision
+app-root includes
+- The Zooniverse homepage components
+- User auth (client-side)
+- Layout with ZooHeader and ZooFooter
+- App Router file structure for `/`, `/projects`, `/about`, `/users`, `/groups`, and more in the future.
+
+## Consequences
+
+FEM currently consists of two deployed apps: app-project and app-content-pages. Introducing app-root will put FEM on the path of a refactor app-project --> lib-project and app-content-pages --> lib-content-pages. Rather than each Zooniverse route existing as its own app, app-root will pull in code from the appropriate libraries (such as lib-user or lib-project). app-root will handle traffic for the domain root, https://zooniverse.org, so that it can serve the homepage.
+
+User auth: In app-root we’re going to build a logged out homepage on the server, and then do client-side auth with the existing lib-panoptes-js to show user-specific content.
+
+Common libraries used in FEM are Grommet, styled-components, mobx, storybook, mocha, and next-i18next. app-root is the first FEM app to use the Next.js App Router, and Next.js has become very opinionated about defaulting to React Server Components (RSC). Experimentation with the above mentioned libraries, App Router, and RSC is needed during development of app-root. In the scenario where one of these libraries is completely incompatible with App Router or RSC, further decisions will be made on whether to temporarily revert app-root to the Next.js Pages Router, or find a replacement for the incompatible library.
+
+## Status
+Accepted

packages/app-root/.gitignore

@@ -0,0 +1,35 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# 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

packages/app-root/README.md

@@ -0,0 +1,36 @@
+# app-root
+
+A [Next.js](https://nextjs.org/) app for handling all routes, including `/projects`, `/user`, `/about`, `/groups`.
+
+## Getting started
+
+This package should be cloned as part of the [front-end-monorepo](https://github.com/zooniverse/front-end-monorepo).
+
+## Running in development
+
+Starts a development server on port 3000.
+
+### Node
+```sh
+yarn dev
+```
+or
+
+```sh
+yarn build
+yarn start
+```
+
+### Analyze bundle sizes
+
+This app has `@next/bundle-analyzer` as a dev dependency. To use it, run `ANALYZE=true yarn build`.
+
+## Technologies
+
+  - @zooniverse/panoptes-js - Panoptes API javascript client
+  - @zooniverse/react-components - Zooniverse common React components
+  - @zooniverse/grommet-theme - Zooniverse brand Grommet theme
+  - [Grommet](https://v2.grommet.io/components) - React UI component library
+  - [next.js](https://nextjs.org/) - Server-side rendering and routing framework
+  - [React.js](https://reactjs.org/)  - Component, virtual DOM based javascript library
+  - [styled-components](https://www.styled-components.com/) - CSS in JS styling library.

packages/app-root/jsconfig.json

@@ -0,0 +1,7 @@
+{
+  "compilerOptions": {
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  }
+}

packages/app-root/next.config.mjs

@@ -0,0 +1,9 @@
+import withBundleAnalyzer from '@next/bundle-analyzer'
+
+const bundleAnalyzer = withBundleAnalyzer({
+	enabled: process.env.ANALYZE === 'true',
+})
+
+const nextConfig = {}
+
+export default bundleAnalyzer(nextConfig)

packages/app-root/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "@zooniverse/app-root",
+  "description": "",
+  "license": "Apache-2.0",
+  "author": "Zooniverse <contact@zooniverse.org> (https://www.zooniverse.org/)",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "type": "module",
+  "dependencies": {
+    "@zooniverse/async-states": "~0.0.1",
+    "@zooniverse/grommet-theme": "~3.1.1",
+    "@zooniverse/panoptes-js": "~0.4.1",
+    "@zooniverse/react-components": "~1.6.1",
+    "grommet": "~2.33.2",
+    "grommet-icons": "~4.11.0",
+    "next": "13.5.3",
+    "react": "~18.2.0",
+    "react-dom": "~18.2.0",
+    "styled-components": "~5.3.10"
+  },
+  "engines": {
+    "node": ">=18.13"
+  },
+  "devDependencies": {
+    "@next/bundle-analyzer": "~13.5.4"
+  }
+}

packages/app-root/src/app/about/page.js

@@ -0,0 +1,7 @@
+export default function AboutPage() {
+  return (
+    <div>
+      <p>This is lib-content-pages</p>
+    </div>
+  )
+}

packages/app-root/src/app/groups/page.js

@@ -0,0 +1,7 @@
+export default function UserGroupPage() {
+  return (
+    <div>
+      <p>This is lib-user</p>
+    </div>
+  )
+}

packages/app-root/src/app/layout.js

@@ -0,0 +1,17 @@
+import RootLayout from '@/components/RootLayout'
+import StyledComponentsRegistry from './style-registry'
+
+export const metadata = {
+  title: 'Zooniverse',
+  description: 'People-powered Research'
+}
+
+export default function NextLayout({ children }) {
+  return (
+    <html lang='en'>
+      <StyledComponentsRegistry>
+        <RootLayout>{children}</RootLayout>
+      </StyledComponentsRegistry>
+    </html>
+  )
+}

packages/app-root/src/app/loading.js

@@ -0,0 +1,7 @@
+function RootLoading() {
+  return (
+    <p>Loading...</p>
+  )
+}
+
+export default RootLoading

packages/app-root/src/app/page.js

@@ -0,0 +1,9 @@
+export default function HomePage() {
+  return (
+    <main>
+      <div>
+        <p>This is the zooniverse.org home page</p>
+      </div>
+    </main>
+  )
+}

packages/app-root/src/app/projects/page.js

@@ -0,0 +1,7 @@
+export default function ProjectPage() {
+  return (
+    <div>
+      <p>This is lib-project</p>
+    </div>
+  )
+}

packages/app-root/src/app/style-registry.js

@@ -0,0 +1,29 @@
+'use client'
+
+import { useServerInsertedHTML } from 'next/navigation'
+import { ServerStyleSheet, StyleSheetManager } from 'styled-components'
+import { useState } from 'react'
+
+// https://nextjs.org/docs/app/building-your-application/styling/css-in-js#styled-components
+
+export default function StyledComponentsRegistry({
+  children
+}) {
+  // Only create stylesheet once with lazy initial state
+  // x-ref: https://reactjs.org/docs/hooks-reference.html#lazy-initial-state
+  const [styledComponentsStyleSheet] = useState(() => new ServerStyleSheet())
+
+  useServerInsertedHTML(() => {
+    const styles = styledComponentsStyleSheet.getStyleElement()
+    styledComponentsStyleSheet.instance.clearTag()
+    return <>{styles}</>
+  })
+
+  if (typeof window !== 'undefined') return <>{children}</>
+
+  return (
+    <StyleSheetManager disableVendorPrefixes sheet={styledComponentsStyleSheet.instance}>
+      {children}
+    </StyleSheetManager>
+  )
+}

packages/app-root/src/app/users/page.js

@@ -0,0 +1,7 @@
+export default function UserPage() {
+  return (
+    <div>
+      <p>This is lib-user</p>
+    </div>
+  )
+}

packages/app-root/src/components/RootLayout.js

@@ -0,0 +1,37 @@
+'use client'
+/**
+ * Note that all child components are now client components.
+ * If we want children of RootLayout to be server components
+ * a ZooHeaderContainer and ZooFooterContainer could be created instead.
+ */
+
+import { createGlobalStyle } from 'styled-components'
+import { Grommet } from 'grommet'
+import zooTheme from '@zooniverse/grommet-theme'
+import ZooHeader from '@zooniverse/react-components/ZooHeader'
+import ZooFooter from '@zooniverse/react-components/ZooFooter'
+
+const GlobalStyle = createGlobalStyle`
+  body {
+    margin: 0;
+  }
+`
+
+export default function RootLayout({ children }) {
+  return (
+    <body>
+      <GlobalStyle />
+      <Grommet
+        background={{
+          dark: 'dark-1',
+          light: 'light-1'
+        }}
+        theme={zooTheme}
+      >
+        <ZooHeader />
+        {children}
+        <ZooFooter />
+      </Grommet>
+    </body>
+  )
+}