🧰 Frontend Infrastructure and Tooling 🛠️

.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

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,6 @@
+'*.{js,ts,tsx,scss,md,yml,yaml,json}':
+  - prettier --write
+'*.{js,ts,tsx}':
+  - eslint --fix
+'*.scss':
+  - stylelint --fix

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/.vscode/extensions.json

@@ -0,0 +1,12 @@
+{
+  "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"
+  ]
+}

client/.vscode/settings.json

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

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: [pnpm](https://github.com/pnpm/pnpm) 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 [pnpm](https://github.com/pnpm/pnpm).
+
+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 pnpm globally
+npm -g install pnpm
+
+# Install project dependencies
+pnpm install
+```
+
+## Development Mode
+
+To run the app in development mode, run the following command:
+
+```sh
+pnpm 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
+pnpm plop
+```
+
+If you want to use a specific generator, you can pass the name as the first
+argument:
+
+```sh
+# Run component generator
+pnpm 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'],
+};

client/eslint/jest.js

@@ -0,0 +1,23 @@
+const { resolve } = require('path');
+
+const pkg = require('../package.json');
+
+module.exports = {
+  parserOptions: {
+    project: resolve(__dirname, '../tsconfig.jest.json'),
+  },
+
+  extends: ['plugin:jest/recommended', 'plugin:jest/style'],
+
+  settings: {
+    /*
+      Jest version has to be passed explicitly because ESlint throws an error
+      about not being able to find the Jest version. This is likely due to
+      the frontend being stored in `client/`.
+      https://git.io/JYhAJ
+    */
+    jest: {
+      version: pkg.devDependencies.jest,
+    },
+  },
+};