feat: remove extraneous features of Starter Kit ("clean-slate"-ish)

.devcontainer/devcontainer.json

@@ -1,31 +1,31 @@
 // For format details, see https://aka.ms/devcontainer.json. For config options, see the
 // README at: https://github.com/devcontainers/templates/tree/main/src/javascript-node-postgres
 {
-	"name": "Starter Kit",
-	"dockerComposeFile": "docker-compose.yml",
-	"service": "app",
-	"workspaceFolder": "/workspaces/${localWorkspaceFolderBasename}",
+  "name": "Starter Kit",
+  "dockerComposeFile": "docker-compose.yml",
+  "service": "app",
+  "workspaceFolder": "/workspaces/${localWorkspaceFolderBasename}",
 
-	"secrets": {
-		"POSTMAN_API_KEY": {
-			"description": "Your API key from Postman to send emails. Required for OTP logins.",
-			"documentationUrl": "https://guide.postman.gov.sg/api-guide/generate-your-api-key"
-		}
-	},
+  "secrets": {
+    "POSTMAN_API_KEY": {
+      "description": "Your API key from Postman to send emails. Required for OTP logins.",
+      "documentationUrl": "https://guide.postman.gov.sg/api-guide/generate-your-api-key"
+    }
+  },
 
-	// Features to add to the dev container. More info: https://containers.dev/features.
-	// "features": {},
+  // Features to add to the dev container. More info: https://containers.dev/features.
+  // "features": {},
 
-	// Use 'forwardPorts' to make a list of ports inside the container available locally.
-	// This can be used to network with other containers or with the host.
-	"forwardPorts": [3000, 5432, 8080],
+  // Use 'forwardPorts' to make a list of ports inside the container available locally.
+  // This can be used to network with other containers or with the host.
+  "forwardPorts": [3000, 5432, 8080],
 
-	// Use 'postCreateCommand' to run commands after the container is created.
-	"postCreateCommand": "npm install && sed s/SESSION_SECRET=random_session_secret_that_is_at_least_32_characters/SESSION_SECRET=`npx uuid`/ .env.example  | sed s/POSTMAN_API_KEY=// > .env.development.local && export $(grep DATABASE_URL .env.development.local | xargs) && npm run migrate"
+  // Use 'postCreateCommand' to run commands after the container is created.
+  "postCreateCommand": "npm install && sed s/SESSION_SECRET=random_session_secret_that_is_at_least_32_characters/SESSION_SECRET=`npx uuid`/ .env.example  | sed s/POSTMAN_API_KEY=// > .env.development.local && export $(grep DATABASE_URL .env.development.local | xargs) && npm run migrate"
 
-	// Configure tool-specific properties.
-	// "customizations": {},
+  // Configure tool-specific properties.
+  // "customizations": {},
 
-	// Uncomment to connect as root instead. More info: https://aka.ms/dev-containers-non-root.
-	// "remoteUser": "root"
+  // Uncomment to connect as root instead. More info: https://aka.ms/dev-containers-non-root.
+  // "remoteUser": "root"
 }

.eslintrc.cjs

@@ -13,8 +13,8 @@ const config = {
     'plugin:@typescript-eslint/recommended',
     'plugin:react/recommended',
     'plugin:react-hooks/recommended',
-    'plugin:prettier/recommended',
     'plugin:storybook/recommended',
+    'plugin:prettier/recommended',
   ],
   rules: {
     // Place to specify ESLint rules. Can be used to overwrite rules specified from the extended configs
@@ -37,7 +37,13 @@ const config = {
             message:
               'Please use Suspense from /components instead. Default React 18 Suspense is not supported for SSR',
           },
+          {
+            name: 'lodash',
+            message:
+              "Please use `import [package] from 'lodash/[package]'` for better tree-shaking instead.",
+          },
         ],
+        patterns: ['!lodash/*'],
       },
     ],
     '@typescript-eslint/no-floating-promises': 'error',
@@ -50,6 +56,27 @@ const config = {
       },
     ],
   },
+  overrides: [
+    {
+      files: ['**/*.tsx', '**/*.jsx'],
+      rules: {
+        '@typescript-eslint/no-restricted-imports': [
+          'error',
+          {
+            paths: [
+              {
+                name: '~/env.mjs',
+                importNames: ['env'],
+                allowTypeImports: true,
+                message:
+                  'Please use `hooks/useEnv` hook instead. This prevents unusable env variables in client-side code.',
+              },
+            ],
+          },
+        ],
+      },
+    },
+  ],
   ignorePatterns: ['webpack.config.js'],
 }
 module.exports = config

.github/workflows/ci.yml

@@ -26,6 +26,14 @@ jobs:
       - name: Lint
         run: npm run lint
 
+  format:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: ./.github/actions/setup
+      - name: Lint
+        run: npm run format
+
   unit-integration-tests:
     name: Unit & integration tests
     needs:
@@ -90,7 +98,7 @@ jobs:
           DD_SERVICE_NAME: ${{ secrets.DD_SERVICE_NAME }}
           DD_API_KEY: ${{ secrets.DD_API_KEY }}
         if: env.DD_SERVICE_NAME != '' && env.DD_API_KEY != ''
-        uses: datadog/test-visibility-github-action@v1
+        uses: datadog/test-visibility-github-action@v2
         with:
           languages: js
           service: ${{ secrets.DD_SERVICE_NAME }}

.prettierignore

@@ -0,0 +1,63 @@
+**/.eslintrc.cjs
+**/*.config.js
+**/*.config.cjs
+.next
+dist
+node_modules
+package-lock.json
+pnpm-lock.yaml
+**/*.tsbuildinfo
+build
+**/public/locales
+tsconfig.json
+README.md
+
+# ==================== START OF COPY PASTE FROM .gitignore =========================
+
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+**/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# vercel
+.vercel
+
+*.db
+*.db-journal
+
+
+# testing
+playwright/test-results
+
+# env
+.env
+
+# storybook
+build-storybook.log

.prettierrc.cjs

@@ -0,0 +1,31 @@
+/** @typedef  {import("prettier").Config} PrettierConfig */
+/** @typedef  {import("@ianvs/prettier-plugin-sort-imports").PluginConfig} SortImportsConfig */
+
+/** @type { PrettierConfig | SortImportsConfig } */
+const config = {
+  plugins: ['@ianvs/prettier-plugin-sort-imports'],
+  importOrder: [
+    '^(react/(.*)$)|^(react$)',
+    '^(next/(.*)$)|^(next$)',
+    '<THIRD_PARTY_MODULES>',
+    '',
+    '~([a-zA-Z0-9]+)/(.*)$',
+    '',
+    '^~/utils/(.*)$',
+    '^~/components/(.*)$',
+    '^~/(.*)$',
+    '^src/(.*)$',
+    '^[./]',
+  ],
+  importOrderParserPlugins: [
+    'typescript',
+    'jsx',
+    'decorators-legacy',
+    'explicitResourceManagement',
+  ],
+  importOrderTypeScriptVersion: '5.2.2',
+  singleQuote: true,
+  semi: false,
+}
+
+module.exports = config

.storybook/main.ts

@@ -1,4 +1,5 @@
 import type { StorybookConfig } from '@storybook/nextjs'
+
 const config: StorybookConfig = {
   stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
   addons: [

.storybook/preview.tsx

@@ -1,25 +1,28 @@
 import '@fontsource/ibm-plex-mono'
 import 'inter-ui/inter.css'
 
-import { withThemeFromJSXProvider } from '@storybook/addon-themes'
-import { Loader, type Args, type Decorator, type ReactRenderer } from '@storybook/react'
-import mockdate from 'mockdate'
-import { ErrorBoundary } from 'react-error-boundary'
-
+import { useCallback, useMemo, useState } from 'react'
+import { Box, Skeleton } from '@chakra-ui/react'
 import { ThemeProvider } from '@opengovsg/design-system-react'
+import { withThemeFromJSXProvider } from '@storybook/addon-themes'
+import {
+  type Args,
+  type Decorator,
+  type Loader,
+  type Parameters,
+  type ReactRenderer,
+} from '@storybook/react'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { httpBatchLink } from '@trpc/client'
 import { createTRPCReact } from '@trpc/react-query'
-import { useCallback, useMemo, useState } from 'react'
-import superjson from 'superjson'
-import { type AppRouter } from '~/server/modules/_app'
-import { theme } from '~/theme'
-
-import { Box, Skeleton } from '@chakra-ui/react'
 import { format } from 'date-fns/format'
-import { merge } from 'lodash'
+import merge from 'lodash/merge'
+import mockdate from 'mockdate'
 import { initialize, mswLoader } from 'msw-storybook-addon'
+import { ErrorBoundary } from 'react-error-boundary'
+import superjson from 'superjson'
 import { z } from 'zod'
+
 import {
   EnvProvider,
   FeatureContext,
@@ -29,6 +32,10 @@ import { DefaultFallback } from '~/components/ErrorBoundary'
 import Suspense from '~/components/Suspense'
 import { env } from '~/env.mjs'
 import { LoginStateContext } from '~/features/auth'
+import { type AppRouter } from '~/server/modules/_app'
+import { withChromaticModes } from '~/stories/utils/chromatic'
+import { viewport } from '~/stories/utils/viewports'
+import { theme } from '~/theme'
 
 // Initialize MSW
 initialize({
@@ -45,7 +52,7 @@ const StorybookEnvDecorator: Decorator = (story) => {
       NEXT_PUBLIC_ENABLE_SGID: false,
       NEXT_PUBLIC_ENABLE_STORAGE: false,
     },
-    env
+    env,
   )
   return <EnvProvider env={mockEnv}>{story()}</EnvProvider>
 }
@@ -60,13 +67,13 @@ const SetupDecorator: Decorator = (story) => {
           refetchOnWindowFocus: false,
         },
       },
-    })
+    }),
   )
   const [trpcClient] = useState(() =>
     trpc.createClient({
       links: [httpBatchLink({ url: '' })],
       transformer: superjson,
-    })
+    }),
   )
   return (
     <ErrorBoundary FallbackComponent={DefaultFallback}>
@@ -105,7 +112,7 @@ const WithLayoutDecorator: Decorator = (Story, { parameters }) => {
 
 export const MockFeatureFlagsDecorator: Decorator<Args> = (
   story,
-  { parameters }
+  { parameters },
 ) => {
   const featureSchema = z
     .object({
@@ -126,7 +133,7 @@ export const MockFeatureFlagsDecorator: Decorator<Args> = (
 
 const LoginStateDecorator: Decorator<Args> = (story, { parameters }) => {
   const [hasLoginStateFlag, setLoginStateFlag] = useState(
-    Boolean(parameters.loginState)
+    Boolean(parameters.loginState ?? true),
   )
 
   const setHasLoginStateFlag = useCallback(() => {
@@ -195,6 +202,25 @@ export const decorators: Decorator[] = [
   MockDateDecorator,
 ]
 
-export const tags = ['autodocs'];
-
-export const loaders: Loader[] = [mswLoader]
+export const loaders: Loader[] = [mswLoader]
+
+export const parameters: Parameters = {
+  // More on how to position stories at: https://storybook.js.org/docs/react/configure/story-layout
+  layout: 'fullscreen',
+  viewport,
+  /**
+   * If tablet view is needed, add it on a per-story basis.
+   * @example
+   * ```
+   * export const SomeStory: Story = {
+   *   parameters: {
+   *     chromatic: withChromaticModes(["gsib", "desktop", "tablet"]),
+   *   }
+   * }
+   * ```
+   */
+  chromatic: {
+    ...withChromaticModes(['desktop']),
+    prefersReducedMotion: 'reduce',
+  },
+}

.vscode/settings.json

@@ -1,4 +1,11 @@
 {
   "typescript.tsdk": "node_modules/typescript/lib",
-  "javascript.validate.enable": true
+  "javascript.validate.enable": true,
+  "editor.formatOnSave": true,
+  "prettier.configPath": ".prettierrc.cjs",
+  "eslint.workingDirectories": [{ "mode": "auto" }],
+  "editor.formatOnPaste": false,
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": "explicit"
+  }
 }

next-env.d.ts

@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/pages/building-your-application/configuring/typescript for more information.