internal/relui: format javascript and css

This change adds eslint and stylelint to format javascript and css
files. The configuration is based on x/pkgsite and x/website, but
removing line-length rules and typescript plugins.

For golang/go#53382

Change-Id: I4bd8a9d23fb8d7369221f455095b26734981bc54
Reviewed-on: https://go-review.googlesource.com/c/build/+/412177
Run-TryBot: Alex Rakoczy <alex@golang.org>
Auto-Submit: Alex Rakoczy <alex@golang.org>
TryBot-Result: Gopher Robot <gobot@golang.org>
Reviewed-by: Dmitri Shuralyov <dmitshur@google.com>
Reviewed-by: Dmitri Shuralyov <dmitshur@golang.org>

.gitignore

@@ -0,0 +1 @@
+node_modules/

cmd/relui/.eslintrc.yaml

@@ -0,0 +1,23 @@
+root: true
+extends: google
+parserOptions:
+  ecmaVersion: 2018
+rules:
+  require-jsdoc: 'off'
+  indent: 'off'
+  arrow-parens: 'off'
+overrides:
+  - files:
+    - "*.js"
+    env:
+      browser: true
+    extends:
+      - eslint:recommended
+      - plugin:prettier/recommended
+    rules:
+      max-len: off
+      valid-jsdoc:
+        - error
+        - requireParamType: false
+          requireReturnType: false
+          requireReturn: false

cmd/relui/.prettierrc.yaml

@@ -0,0 +1,4 @@
+arrowParens: avoid
+singleQuote: true
+bracketSpacing: false
+quoteProps: consistent

cmd/relui/.stylelintrc.yaml

@@ -0,0 +1,12 @@
+extends:
+  - stylelint-config-standard
+  - stylelint-prettier/recommended
+plugins:
+  - stylelint-order
+rules:
+  color-hex-case: lower
+  order/properties-alphabetical-order: true
+  unit-disallowed-list:
+    - 'px'
+  selector-class-pattern: '^[a-zA-Z\-]+$'
+  rule-empty-line-before: never

cmd/relui/Dockerfile.node

@@ -0,0 +1,7 @@
+# Copyright 2022 The Go Authors. All rights reserved.
+# Use of this source code is governed by a BSD-style
+# license that can be found in the LICENSE file.
+
+FROM node:16.15.1-alpine3.16
+
+WORKDIR /workspace/cmd/relui

cmd/relui/Makefile

@@ -14,6 +14,9 @@ POSTGRES_TEST := psql --username=$(POSTGRES_USER) -c "SELECT 1;"
 
 DEV_CFG := ${HOME}/.local/share/relui
 
+MODULE_ROOT := "$(shell readlink -f ../../)"
+NODE_IMAGE_VERSION := "node:16.15.1-bullseye"
+
 .PHONY: dev
 dev: postgres-dev docker
 	docker run --rm --name=relui-dev -v $(POSTGRES_RUN_DEV) -e PGUSER=$(POSTGRES_USER) -e PGDATABASE=relui-dev -p 8080:8080 $(DOCKER_TAG)
@@ -65,3 +68,26 @@ push-prod: docker-prod
 deploy-prod: push-prod
 	go install golang.org/x/build/cmd/xb
 	xb --prod kubectl --namespace prod set image deployment/relui-deployment relui=$(IMAGE_PROD):$(VERSION)
+
+node_modules/: package.json package-lock.json
+	docker run --rm \
+		--volume $(MODULE_ROOT):/workspace \
+		--workdir /workspace/cmd/relui \
+		--env NODE_OPTIONS="--experimental-vm-modules --no-warnings" \
+		$(NODE_IMAGE_VERSION) \
+		npm install --no-update-notifier
+
+.PHONY: lint
+lint: node_modules/
+	docker run --rm \
+		--volume $(MODULE_ROOT):/workspace \
+		--workdir /workspace/cmd/relui \
+		--env NODE_OPTIONS="--experimental-vm-modules --no-warnings" \
+		$(NODE_IMAGE_VERSION) \
+		npm --no-update-notifier run lint:js
+	docker run --rm \
+		--volume $(MODULE_ROOT):/workspace \
+		--workdir /workspace/cmd/relui \
+		--env NODE_OPTIONS="--experimental-vm-modules --no-warnings" \
+		$(NODE_IMAGE_VERSION) \
+		npm --no-update-notifier run lint:css

cmd/relui/README.md

@@ -72,3 +72,19 @@ Alternatively, using docker:
 ```bash
 make test
 ```
+
+## JS/CSS formatting and lint
+
+This project uses eslint and stylelint to format JavaScript and CSS files.
+
+To run:
+
+```bash
+npm run lint
+```
+
+Alternatively, using Docker:
+
+```bash
+make lint
+```