Suggest changes to template (microwavenby#2)

* Suggest renaming CD for storybook.

* Add MIT License.

* Suggest renaming test workflow to CI.

* Rename the CI workflow so there's something to comment on in the PR.

* Combine storybook file types.

* Missing starting .env will make npm run dev:startdb fail.

* Adding note about /styles dir.

* Fix typo.

* Add comments about storybook files.

* Update eslint rules to match https://github.com/navapbc/template-application-nextjs/blob/main/app/.eslintrc.js.

* Ignore some more files and dirs.

* Rename build-storybook to storybook:build to follow other scripts naming convention.

* Add prettierrc from https://github.com/navapbc/template-application-nextjs/blob/main/app/.prettierrc.json.

* Add questions about playwright config.

* Add more things to be ignored and alphabetize.

* Rename bin/start to indicate it's meant for prod.

* Changes to Dockerfile and docker-compose.yml

Dockerfile:
- Set the working dir to /srv
- Re-order to make prod builds at the bottom to make dev builds faster
- Add a dev image

docker-compose:
- use volume for postgres data
- set init to true
- add a dev container for local development that bind mounts the project
  dir into the container
- add a prod container to test that the prod image works

* Update package.json

- Remove `docker` commands from package.json scripts - this leads to
  errors when trying to run these scripts from inside the container
- Suggest alternative naming convention (<thing>:<action>) for scripts
- Make ts-node a prod dependency so that the prod-start.sh works
  correctly for seeding the database

* Rename npm script calls.

* Probably don't need to set explicit docker networking.

* Tidy translation strings.

* Drop extraneous number.

* Add comments to jests files.

* Suggest dropping specific CSS.

* Add back some translation strings that are used in the layout and the storybook stories.

* Tidy e2e.

* [PRP-48-remix-template-review] Responding to comments, adjusting as necessary

---------

Co-authored-by: Sasha Reid <[email protected]>

.dockerignore

@@ -1,7 +1,18 @@
+/.cache
+/.git
+/.github
+/build
+/coverage
 /node_modules
+/playwright*
+/public/build
+/storybook-static
+/test-results
+
+.dockerignore
+*.env
 *.log
 .DS_Store
-.env
-/.cache
-/public/build
-/build
+docker-compose.*
+Dockerfile*
+tsconfig.tsbuildinfo

.env.example

@@ -0,0 +1,9 @@
+# Environment variables declared in this file are automatically made available to Prisma.
+# See the documentation for more detail: https://pris.ly/d/prisma-schema#accessing-environment-variables-from-the-schema
+
+# Prisma supports the native connection string format for PostgreSQL, MySQL, SQLite, SQL Server, MongoDB and CockroachDB.
+# See the documentation for all the connection string options: https://pris.ly/d/connection-strings
+DATABASE_URL=postgresql://postgres:[email protected]:5432/postgres?schema=public
+POSTGRES_PASSWORD=incredible_local_secret_phrase
+POSTGRES_USER=postgres
+NEXT_PUBLIC_DEMO_MODE=false

.eslintrc.js

@@ -1,18 +1,13 @@
 /** @type {import('@types/eslint').Linter.BaseConfig} */
 module.exports = {
+  root: true,
   extends: [
+    // Disable ESLint code formatting rules which conflict with Prettier
+    "prettier",
     "@remix-run/eslint-config",
     "@remix-run/eslint-config/node",
-    "prettier",
   ],
-  // We're using vitest which has a very similar API to jest
-  // (so the linting plugins work nicely), but we have to
-  // set the jest version explicitly.
-  settings: {
-    jest: {
-      version: 28,
-    },
-  },
+  // Additional lint rules. These get layered onto the top-level rules.
   overrides: [
     {
       files: "tests/*.test.*",
@@ -22,5 +17,40 @@ module.exports = {
       files: "e2e/*.spec.*",
       extends: ["plugin:playwright/playwright-test"],
     },
+    // Lint config specific to Test files
+    {
+      files: ["tests/**"],
+      plugins: ["jest"],
+      extends: ["plugin:jest/recommended"],
+    },
+    // Lint config specific to TypeScript files
+    {
+      files: "**/*.+(ts|tsx)",
+      parserOptions: {
+        // These paths need defined to support rules that require type information
+        tsconfigRootDir: __dirname,
+        project: ["./tsconfig.json"],
+      },
+      extends: [
+        "plugin:@typescript-eslint/recommended",
+        // Disable vanilla ESLint rules that conflict with those in @typescript-eslint
+        "plugin:@typescript-eslint/eslint-recommended",
+        // Rules that specifically require type information
+        "plugin:@typescript-eslint/recommended-requiring-type-checking",
+      ],
+      plugins: ["@typescript-eslint"],
+      rules: {
+        // Prevent dead code accumulation
+        "@typescript-eslint/no-unused-vars": "error",
+        // The usage of `any` defeats the purpose of typescript. Consider using `unknown` type instead instead.
+        "@typescript-eslint/no-explicit-any": "error",
+      },
+    },
   ],
+  settings: {
+    // Support projects where Next.js isn't installed in the root directory (such as a monorepo)
+    next: {
+      rootDir: __dirname,
+    },
+  },
 };

.github/workflows/gh-storybook.yml → .github/workflows/cd-storybook.yml

@@ -37,7 +37,7 @@ jobs:
         run: npm install -D
         working-directory: ./
       - name: Build
-        run: BASE_PATH=${{ steps.pages_config.outputs.base_path }} npm run build-storybook
+        run: BASE_PATH=${{ steps.pages_config.outputs.base_path }} npm run storybook:build
         working-directory: ./
       - name: Upload artifact
         uses: actions/upload-pages-artifact@v1

.github/workflows/test.yml → .github/workflows/ci.yml

@@ -1,4 +1,4 @@
-name: 🧪 Test
+name: 🧪 CI
 on:
   push:
     branches:

.prettierignore

@@ -10,3 +10,4 @@ node_modules
 /app/styles/unprefixed/*
 /styles/*
 .github/*
+/storybook-static

.prettierrc.json

@@ -0,0 +1,5 @@
+{
+  "importOrder": ["^components/(.*)$", "^[./]"],
+  "importOrderSeparation": true,
+  "importOrderSortSpecifiers": true
+}

.storybook/main.js

@@ -3,8 +3,7 @@ const path = require("path");
 
 module.exports = {
   stories: [
-    "../stories/**/*.stories.mdx",
-    "../stories/**/*.stories.@(js|jsx|ts|tsx)",
+    "../stories/**/*.stories.@(js|jsx|ts|tsx|mdx)",
   ],
   addons: [
     "@storybook/addon-links",

.storybook/mockModules/remix-react.tsx

@@ -1,3 +1,6 @@
+// Using the WebPack shim to push this file in instead of Remix-React
+// means that we need these re-exports for hooks and components that do
+// work to continue working without modification
 export {
   Link,
   useLocation,
@@ -20,7 +23,7 @@ export const useActionData = () => {};
 // Using unique variable names in your pages is important
 export function useLoaderData<T>() {
   return {
-    backRoute: "#back",
+    // Insert your useLoaderData variable names / values here
   };
 }
 

.storybook/mockModules/remix-validated-form.tsx

@@ -1,4 +1,7 @@
 import { Form } from "@remix-run/react";
+// This WebPack shim is necessary to patch the useField hook
+// and allow components that utilize useField to propagate errors
+// and ValidatedForms (that require validators) to work in Storybook
 export {
   validationError,
   setFormDefaults,

Dockerfile

@@ -1,62 +1,59 @@
-# base node image
+# -------- Image: base -------- #
+# Base node image with package updates and dependencies
 FROM node:18-slim as base
 # Install openssl for Prisma
-RUN apt-get update && apt-get install -y openssl
-# set for base and all layer that inherit from it
+WORKDIR /srv
+RUN apt-get update \
+  && apt-get install -y --no-install-recommends \
+  openssl
 
+# -------- Image: deps -------- #
 # Install all node_modules, including dev dependencies
 FROM base as deps
-
-WORKDIR /myapp
-
 COPY package.json package-lock.json ./
 RUN npm install --production=false
 
-# Setup production node_modules
-FROM base as production-deps
-ENV NODE_ENV production
-
-WORKDIR /myapp
-
-COPY --from=deps /myapp/node_modules /myapp/node_modules
-COPY package.json package-lock.json ./
-RUN npm prune --production
+# -------- Image: dev -------- #
+# Provide a development image
+FROM base as dev
+COPY --from=deps /srv/node_modules /srv/node_modules
+COPY prisma .
+RUN npx prisma generate
+COPY . .
+CMD ["npm", "run", "dev:docker"]
 
+# -------- Image: build -------- #
 # Build the app
 FROM base as build
-
-WORKDIR /myapp
-
-COPY --from=deps /myapp/node_modules /myapp/node_modules
-
+COPY --from=deps /srv/node_modules /srv/node_modules
 COPY prisma .
 RUN npx prisma generate
-
 COPY . .
 RUN npm run build
-RUN npm run build:css
-RUN npm run post:css
+RUN npm run css
+
+# -------- Image: test -------- #
+# Provide a test image
+FROM build as test
+ENV NODE_ENV test
+CMD ["npm", "test"]
+
+# -------- Image: production-deps -------- #
+# Setup production node_modules
+FROM base as production-deps
+ENV NODE_ENV production
+COPY --from=deps /srv/node_modules /srv/node_modules
+COPY package.json package-lock.json ./
+RUN npm prune --production
 
+# -------- Image: prod -------- #
 # Finally, build the production image with minimal footprint
 FROM base as prod
 ENV NODE_ENV production
-
-WORKDIR /myapp
-
-COPY --from=production-deps /myapp/node_modules /myapp/node_modules
-COPY --from=build /myapp/node_modules/.prisma /myapp/node_modules/.prisma
-
-COPY --from=build /myapp/build /myapp/build
-COPY --from=build /myapp/styles/styles.* /myapp/styles/
-COPY --from=build /myapp/public /myapp/public
-COPY ./bin /myapp/bin
+COPY --from=production-deps /srv/node_modules /srv/node_modules
+COPY --from=build /srv/node_modules/.prisma /srv/node_modules/.prisma
+COPY --from=build /srv/build /srv/build
+COPY --from=build /srv/styles/styles.* /srv/styles/
+COPY --from=build /srv/public/build /srv/public/build
 COPY . .
-
-CMD ["/myapp/bin/start.sh"]
-
-# Provide a test container
-FROM build as test
-ENV NODE_ENV test
-COPY --from=build /myapp/jest.config.ts /myapp/jest.config.ts
-WORKDIR /myapp
-CMD ["npm", "test"]
+CMD ["/srv/bin/prod-start.sh"]