🧰 Frontend Infrastructure and Tooling 🛠️ (#3)

* Project dependencies

* Setup .nvmrc

* Node.js gitignore

* Setup initial next.js app

* Added SSR for React Query

* Added Tailwind CSS and JIT

* Added script for generating types for SCSS modules

* Setup Jest + React Testing Library for unit tests

* Setup Jest + Playwright for E2E tests

* Added prettier config

* Added stylelint config

* Added ESLint configs

* Added lint-staged and husky for linting on commit

* Added plopfile for component and page generators

* Added recommended VSCode extensions and settings

* Added client README.md

* Swap pnpm for yarn

* Rename bg-napari-app-bar to bg-napari-primary

* Added link to client/README.md in root README.md

* Minor refactors

* Address review comments

* Fix vscode settings and add spell checker extension

.husky/.gitignore

@@ -0,0 +1 @@
+_

.husky/pre-commit

@@ -0,0 +1,5 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+cd client
+node_modules/.bin/lint-staged

.vscode/extensions.json

@@ -0,0 +1,13 @@
+{
+  "recommendations": [
+    "msjsdiag.debugger-for-chrome",
+    "dbaeumer.vscode-eslint",
+    "eamodio.gitlens",
+    "ms-vscode.vscode-typescript-next",
+    "silvenon.mdx",
+    "esbenp.prettier-vscode",
+    "jpoissonnier.vscode-styled-components",
+    "bradlc.vscode-tailwindcss",
+    "streetsidesoftware.code-spell-checker"
+  ]
+}

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "typescript.tsdk": "client/node_modules/typescript/lib"
+}

README.md

@@ -34,6 +34,13 @@ The [CZI Imaging Team](https://chanzuckerberg.com/science/programs-resources/ima
 CZI sees promise in _napari_ and seeks to assist its development by providing resources not always available to the open source community, including dedicated user research, design, and engineering support.
 CZI is proud to collaborate with the science community to accelerate research and enable open science for all.
 
+## Source Code
+
+We're building the napari hub out in the open, so if you want to contribute
+or get a sneak, please take a look at:
+
+- [napari hub client](client/README.md)
+
 ### Team
 
 - Jeremy Asuncion, Engineering ([@codemonkey800](https://github.com/codemonkey800))

client/.babelrc.js

@@ -0,0 +1,3 @@
+module.exports = {
+  presets: ['next/babel'],
+};

client/.eslintrc.js

@@ -0,0 +1,80 @@
+/**
+ * ESLint configuration for napari hub client. All client code is linted using
+ * this configuration. That includes JS tooling modules, configuration scripts
+ * (next.config.js, plopfile.js, etc.), E2E tests, and application source code.
+ *
+ * Files with specific configurations are handled using the ESLint `overrides`
+ * feature. We use overrides over nested `.eslintrc.js` files (for example
+ * `src/.eslintrc.js` and `src/pages/.eslintrc.js`) to make this configuration
+ * file the Single Source of Truth for ESLint configuration.
+ */
+
+const configs = {
+  dev: require.resolve('./eslint/dev'),
+  e2e: require.resolve('./eslint/e2e'),
+  react: require.resolve('./eslint/react'),
+  tests: require.resolve('./eslint/tests'),
+  typescript: require.resolve('./eslint/typescript'),
+};
+
+module.exports = {
+  root: true,
+  extends: ['airbnb/base', 'prettier', configs.dev],
+  plugins: ['simple-import-sort'],
+
+  overrides: [
+    // TypeScript scripts
+    {
+      files: ['*.ts'],
+      extends: [configs.typescript, configs.dev],
+    },
+
+    // Unit tests
+    {
+      files: ['./src/**/*.test.ts', './jest/**/*.ts'],
+      extends: [configs.typescript, configs.dev, configs.tests],
+    },
+
+    // E2E tests
+    {
+      files: ['./tests/**/*.ts'],
+      extends: [configs.typescript, configs.dev, configs.e2e],
+    },
+
+    // TypeScript and React source code.
+    {
+      files: ['./src/**/*.ts', './src/**/*.tsx'],
+      extends: [configs.typescript, configs.react],
+    },
+
+    /*
+      Disable explicit return types for TSX files. Prefer inferred return
+      types for React component:
+      https://kentcdodds.com/blog/how-to-write-a-react-component-in-typescript
+    */
+    {
+      files: ['./src/**/*.tsx'],
+      rules: {
+        '@typescript-eslint/explicit-module-boundary-types': 'off',
+      },
+    },
+
+    /*
+      Prefer default exports for Next.js pages and SCSS modules.
+
+      Next.js routing needs the pages to be exported as default exports, and
+      the team has no plans to add support for the time being:
+      https://github.com/vercel/next.js/issues/7275
+
+      SCSS modules export from the `default` export, so their type
+      definitions are generated using `export default styles`.
+    */
+    {
+      files: ['./src/pages/**/*.tsx', './src/**/*.module.scss.d.ts'],
+      rules: {
+        'import/no-default-export': 'off',
+        'import/prefer-default-export': 'error',
+      },
+    },
+  ],
+};

client/.gitignore

@@ -0,0 +1,134 @@
+
+# Created by https://www.toptal.com/developers/gitignore/api/node
+# Edit at https://www.toptal.com/developers/gitignore?templates=node
+
+### Node ###
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# TypeScript v1 declaration files
+typings/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional stylelint cache
+.stylelintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+.env.test
+.env*.local
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+.parcel-cache
+
+# Next.js build output
+.next
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+
+# Storybook build outputs
+.out
+.storybook-out
+storybook-static
+
+# rollup.js default build output
+dist/
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and not Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port
+
+# Stores VSCode versions used for testing VSCode extensions
+.vscode-test
+
+# Temporary folders
+tmp/
+temp/
+
+# End of https://www.toptal.com/developers/gitignore/api/node
+
+
+.vercel

client/.lintstagedrc.yml

@@ -0,0 +1,2 @@
+'*.{js,ts,tsx,scss,md,yml,yaml,json}':
+  - prettier --write

client/.nvmrc

@@ -0,0 +1 @@
+v15.13.0

client/.prettierignore

@@ -0,0 +1,11 @@
+# Plop Templates don't have a prettier formatter unfortunately :(
+plop-templates
+
+# Package lock
+pnpm-lock.yaml
+
+# Next build
+.next
+
+# Jest snapshots
+*.snap

client/.prettierrc.yml

@@ -0,0 +1,4 @@
+arrowParens: always
+singleQuote: true
+trailingComma: all
+tabWidth: 2

client/.stylelintrc.yml

@@ -0,0 +1,12 @@
+extends:
+  - stylelint-config-recommended
+  - stylelint-config-sass-guidelines
+  - stylelint-config-css-modules
+
+rules:
+  # Enforce camel case CSS classes for CSS modules because camel case
+  # properties can be accessed using dot notation. For comparison:
+  #   `styles['some-class']` vs `styles.someClass`
+  selector-class-pattern:
+    - ^[a-z][a-zA-Z0-9]+$
+    - message: 'Classes should be camelCase'

client/README.md

@@ -0,0 +1,72 @@
+# Client
+
+napari hub website implemented with Next.js and TypeScript! We use a lot of
+cool frontend tech for the website:
+
+- :zap: [React](https://reactjs.org/) + [Next.js](https://nextjs.org/)
+- :crossed_swords: [TypeScript](https://www.typescriptlang.org/)
+- :art: [SCSS modules](https://github.com/css-modules/css-modules)
+- :nail_care: [Tailwind CSS](https://tailwindcss.com/) for utility styles
+- :racing_car: [Tailwind JIT](https://tailwindcss.com/docs/just-in-time-mode) for on-demand Tailwind styles
+- :package: [Yarn](https://classic.yarnpkg.com/en/) for package management
+- :camera_flash: [Jest](https://jestjs.io/) + [React Testing Library](https://testing-library.com/docs/react-testing-library/intro) for unit and snapshot tests
+- :performing_arts: [Jest](https://jestjs.io/) + [Playwright](https://github.com/microsoft/playwright) for E2E tests
+- :mag: [ESlint](https://eslint.org/) + [Stylelint](https://stylelint.io/) for TypeScript and SCSS linting
+- :gear: [Plop](https://plopjs.com/documentation/) for boilerplate automation
+
+## Setup Dev Environment
+
+### Node.js
+
+We use Node.js and various packages on NPM for building napari hub. For
+package management, we use [yarn](https://classic.yarnpkg.com/en/).
+
+It's recommended you use NVM so you don't have to manage multiple Node.js versions yourself:
+
+- Bash: [nvm](https://github.com/nvm-sh/nvm)
+- Fish: [nvm.fish](https://github.com/jorgebucaran/nvm.fish)
+- Zsh: [zsh-nvm](https://github.com/lukechilds/zsh-nvm)
+
+When you have NVM setup, run the following commands:
+
+```sh
+# Installs Node.js version defined in `.nvmrc`
+nvm install
+
+# Uses project defined Node.js version
+nvm use
+
+# Install yarn globally
+npm -g install yarn
+
+# Install project dependencies
+yarn install
+```
+
+## Development Mode
+
+To run the app in development mode, run the following command:
+
+```sh
+yarn dev
+```
+
+This will start the Next.js dev server with [fast refresh](https://nextjs.org/docs/basic-features/fast-refresh). Edit some code and watch it update in the browser without having to refresh :heart_eyes:
+
+## Plop Generators
+
+We use [Plop](https://plopjs.com/documentation/) to automate common
+boilerplate in the codebase. You can run Plop without any arguments and get a
+list of generators you can use:
+
+```sh
+yarn plop
+```
+
+If you want to use a specific generator, you can pass the name as the first
+argument:
+
+```sh
+# Run component generator
+yarn plop component
+```

client/eslint/dev.js

@@ -0,0 +1,8 @@
+module.exports = {
+  rules: {
+    'import/no-extraneous-dependencies': 'off',
+    'no-console': 'off',
+    'no-param-reassign': 'off',
+    'no-underscore-dangle': 'off',
+  },
+};

client/eslint/e2e.js

@@ -0,0 +1,3 @@
+module.exports = {
+  extends: [require.resolve('./jest'), 'plugin:jest-playwright/recommended'],
+};