-
Notifications
You must be signed in to change notification settings - Fork 18
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
🧰 Frontend Infrastructure and Tooling 🛠️ #3
Merged
codemonkey800
merged 22 commits into
chanzuckerberg:main
from
codemonkey800:jeremy/frontend-infra
Apr 12, 2021
+10,508
−0
Merged
Changes from all commits
Commits
Show all changes
22 commits
Select commit
Hold shift + click to select a range
462bb39
Project dependencies
codemonkey800 62063bc
Setup .nvmrc
codemonkey800 e9d569b
Node.js gitignore
codemonkey800 584c7fa
Setup initial next.js app
codemonkey800 2906f62
Added SSR for React Query
codemonkey800 3a08feb
Added Tailwind CSS and JIT
codemonkey800 e6c6551
Added script for generating types for SCSS modules
codemonkey800 225fffd
Setup Jest + React Testing Library for unit tests
codemonkey800 b53b4ed
Setup Jest + Playwright for E2E tests
codemonkey800 cc6cb86
Added prettier config
codemonkey800 a5f04a9
Added stylelint config
codemonkey800 7d21dfd
Added ESLint configs
codemonkey800 b3bcb72
Added lint-staged and husky for linting on commit
codemonkey800 57dd9ec
Added plopfile for component and page generators
codemonkey800 909cd0e
Added recommended VSCode extensions and settings
codemonkey800 8953850
Added client README.md
codemonkey800 5486951
Swap pnpm for yarn
codemonkey800 398b274
Rename bg-napari-app-bar to bg-napari-primary
codemonkey800 c92b293
Added link to client/README.md in root README.md
codemonkey800 1177252
Minor refactors
codemonkey800 520a10b
Address review comments
codemonkey800 1b838b3
Fix vscode settings and add spell checker extension
codemonkey800 File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
_ |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
#!/bin/sh | ||
. "$(dirname "$0")/_/husky.sh" | ||
|
||
cd client | ||
node_modules/.bin/lint-staged |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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" | ||
] | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
{ | ||
"typescript.tsdk": "client/node_modules/typescript/lib" | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
module.exports = { | ||
presets: ['next/babel'], | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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', | ||
}, | ||
}, | ||
], | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,2 @@ | ||
'*.{js,ts,tsx,scss,md,yml,yaml,json}': | ||
- prettier --write |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
v15.13.0 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,4 @@ | ||
arrowParens: always | ||
singleQuote: true | ||
trailingComma: all | ||
tabWidth: 2 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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' |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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 | ||
``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,8 @@ | ||
module.exports = { | ||
rules: { | ||
'import/no-extraneous-dependencies': 'off', | ||
'no-console': 'off', | ||
'no-param-reassign': 'off', | ||
'no-underscore-dangle': 'off', | ||
}, | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
module.exports = { | ||
extends: [require.resolve('./jest'), 'plugin:jest-playwright/recommended'], | ||
}; |
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
While I love that pnpm is growing significantly and is up to 2x faster than competitors, it still doesn't have Dependabot support.
Dependabot has support for parsing and updating the
yarn.lock
file, which is crucial for detecting and fixing security vulnerabilities. When Dependabot gets support for thepnpm-lock.yaml
files, we can revisit swapping Yarn for pnpm.