Merge pull request #85 from franklinjavier/chore-eslint

chore: improve eslint, prettier, husky

.eslintrc.cjs

@@ -1,6 +1,11 @@
 /** @type {import('eslint').Linter.Config} */
 module.exports = {
-  extends: ['@remix-run/eslint-config', '@remix-run/eslint-config/node', 'prettier'],
+  extends: [
+    '@remix-run/eslint-config',
+    '@remix-run/eslint-config/node',
+    'prettier',
+  ],
+  plugins: ['prettier'],
   rules: {
     'import/default': 'error',
     'import/export': 'error',
@@ -22,7 +27,22 @@ module.exports = {
         ],
       },
     ],
-    'react/jsx-sort-props': ['error', { shorthandLast: true, callbacksLast: true, ignoreCase: true }],
+    'react/jsx-sort-props': [
+      'error',
+      { shorthandLast: true, callbacksLast: true, ignoreCase: true },
+    ],
     'sort-imports': ['error', { ignoreDeclarationSort: true }],
+    'prettier/prettier': [
+      'error',
+      {
+        printWidth: 80,
+        tabWidth: 2,
+        singleQuote: true,
+        trailingComma: 'all',
+        arrowParens: 'always',
+        semi: false,
+        endOfLine: 'auto',
+      },
+    ],
   },
 }

.github/workflows/ci.yml

@@ -21,7 +21,7 @@ jobs:
       - name: Set up Node
         uses: actions/setup-node@v4
         with:
-          node-version-file: '.nvmrc'
+          node-version-file: ".nvmrc"
 
       - uses: pnpm/action-setup@v3
         name: Install pnpm
@@ -43,10 +43,13 @@ jobs:
             ${{ runner.os }}-pnpm-store-
 
       - name: Install dependencies
-        run: pnpm install
+        run: pnpm i
 
       - name: Run ESLint
         run: pnpm lint
 
+      - name: Run Typecheck
+        run: pnpm tsc
+
       - name: Run Tests
-        run: pnpm test
+        run: pnpm t

.gitignore

@@ -10,6 +10,5 @@ node_modules
 /build/
 /api/*
 /coverage
-.jest/
 .DS_Store
 tailwind.css

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname "$0")/_/husky.sh"
+
+npx lint-staged

.lintstagedrc.js

@@ -0,0 +1,24 @@
+import { quote as escape } from 'shell-quote'
+import { ESLint } from 'eslint'
+
+const eslint = new ESLint()
+const isWin = process.platform === 'win32'
+
+const escapeFileNamesForPrettier = (filenames) =>
+  filenames
+    .map((filename) => `"${isWin ? filename : escape([filename])}"`)
+    .join(' ')
+
+export default {
+  '**/*.{js,jsx,ts,tsx}': (filenames) => {
+    return [
+      `pnpm lint --fix ${filenames
+        .filter((file) => !eslint.isPathIgnored(file))
+        .map((f) => `"${f}"`)
+        .join(' ')}`,
+    ]
+  },
+  '**/*.{json,md,mdx,css,html,yml,yaml,scss}': (filenames) => {
+    return [`prettier --write ${escapeFileNamesForPrettier(filenames)}`]
+  },
+}

.prettierrc

@@ -1,10 +1,5 @@
 {
-  "tabWidth": 2,
-  "printWidth": 110,
-  "endOfLine": "auto",
-  "arrowParens": "always",
-  "trailingComma": "all",
-  "semi": false,
-  "singleQuote": true,
-  "bracketSpacing": true
-}
+  "plugins": [
+    "prettier-plugin-tailwindcss"
+  ]
+}

.vscode/extensions.json

@@ -1,17 +1,9 @@
 {
   "recommendations": [
-    "dbaeumer.vscode-eslint",
     "editorconfig.editorconfig",
     "codeandstuff.package-json-upgrade",
-    "esbenp.prettier-vscode",
     "mattpocock.ts-error-translator",
-    "wix.vscode-import-cost",
-    "adpyke.codesnap",
     "mikestead.dotenv",
-    "prisma.prisma",
-    "gruntfuggly.todo-tree",
-    "ms-vsliveshare.vsliveshare-pack",
-    "chakrounanas.turbo-console-log",
     "bradlc.vscode-tailwindcss"
   ]
 }

.vscode/settings.json

@@ -1,11 +1,14 @@
 {
+  "editor.formatOnSave": false,
   "editor.codeActionsOnSave": {
     "source.fixAll.eslint": "explicit"
   },
-  "editor.formatOnPaste": true,
-  "editor.formatOnSave": true,
-  "editor.defaultFormatter": "esbenp.prettier-vscode",
-  "eslint.format.enable": true,
-  "eslint.validate": ["typescript", "typescriptreact", "javascript", "javascriptreact"],
-  "eslint.packageManager": "pnpm"
+  "tailwindCSS.experimental.classRegex": [":\\s*?[\"'`]([^\"'`]*).*?,"],
+  "explorer.fileNesting.enabled": true,
+  "explorer.fileNesting.patterns": {
+    "package.json": ".eslint*, prettier*, tsconfig*, vite*, pnpm-lock*, bun.lockb, nest*, biome*, .editorconfig*, .nvmrc*, .gitignore*",
+    "tailwind.config.*": "tailwind.config*, postcss.config*",
+    ".env.local": ".env*",
+    ".env": ".env*"
+  }
 }

README.md

@@ -2,7 +2,7 @@
 
 - Remix ❤️ Vite
 - Tailwind
-- Jest
+- Vitest
 - Eslint
 - Prettier
 - Typescript

app/components/title.test.tsx → app/components/__tests__/title.spec.tsx

@@ -1,6 +1,6 @@
 import { render, screen } from '@testing-library/react'
 
-import { Title } from './title'
+import { Title } from '../title'
 
 describe('<Title />', () => {
   it('should render Title component', () => {

app/components/title.tsx

@@ -1,8 +1,13 @@
-import { classNames } from '~/lib/class-names'
+import { cn } from '~/lib/cn'
 
 type TitleProps = React.ComponentProps<'h1'>
 export function Title({ className, ...props }: TitleProps) {
   return (
-    <h1 className={classNames('text-4xl font-bold tracking-tight text-gray-900 sm:text-6xl')} {...props} />
+    <h1
+      className={cn(
+        'text-4xl font-bold tracking-tight text-gray-900 sm:text-6xl',
+      )}
+      {...props}
+    />
   )
 }

app/hooks/useQueryString.ts

@@ -18,11 +18,17 @@ type QueryStringProps = [
  * @returns {function} Function to change query string programatically
  * @returns {string} The query string (same as location.search), eg: `?search=foo`
  */
-export function useQueryString(key: string, defaultValue?: string): QueryStringProps {
+export function useQueryString(
+  key: string,
+  defaultValue?: string,
+): QueryStringProps {
   const [searchParams, setSearchParams] = useSearchParams()
   const paramValue = searchParams.get(key)
 
-  const value = React.useMemo(() => paramValue ?? defaultValue ?? '', [paramValue, defaultValue])
+  const value = React.useMemo(
+    () => paramValue ?? defaultValue ?? '',
+    [paramValue, defaultValue],
+  )
 
   const setValue = React.useCallback(
     (newValue: string, options?: NavigateOptions) => {

app/lib/__tests__/cn.spec.ts

@@ -0,0 +1,34 @@
+import { cn } from '../cn'
+
+describe('cn', () => {
+  it('returns empty string for no parameters', () => {
+    expect(cn()).toBe('')
+  })
+  it('returns a string to be used as html classNames', () => {
+    expect(cn('base', 'another', 'yet-another class')).toBe(
+      'base another yet-another class',
+    )
+  })
+
+  it('filters out nil values', () => {
+    expect(cn('base', undefined, null, 'another')).toBe('base another')
+  })
+
+  it('merge classes', () => {
+    expect(cn('w-full p-0', 'p-6')).toBe('w-full p-6')
+  })
+
+  it('filters out booleans accepting ternary, && and || operators', () => {
+    const yup = true
+    const no = false
+    expect(
+      cn(
+        'base',
+        yup ? 'valid' : 'invalid',
+        yup && 'yes',
+        yup || 'no',
+        no || 'appear',
+      ),
+    ).toBe('base valid yes appear')
+  })
+})

app/lib/cn.ts

@@ -0,0 +1,10 @@
+import { twMerge } from 'tailwind-merge'
+
+export function cn(...args: unknown[]): string {
+  return twMerge(
+    args
+      .flat()
+      .filter((x) => typeof x === 'string')
+      .join(' '),
+  )
+}

app/root.tsx

@@ -1,5 +1,11 @@
 import type { LinksFunction } from '@remix-run/node'
-import { Links, LiveReload, Meta, Outlet, Scripts, ScrollRestoration } from '@remix-run/react'
+import {
+  Links,
+  Meta,
+  Outlet,
+  Scripts,
+  ScrollRestoration,
+} from '@remix-run/react'
 
 import './globals.css'
 
@@ -32,7 +38,6 @@ export default function App() {
         />
         <Outlet />
         <ScrollRestoration />
-        <LiveReload />
         <Scripts />
       </body>
     </html>

app/routes/_index.tsx

@@ -2,7 +2,10 @@ import { type MetaFunction } from '@remix-run/node'
 import { Title } from '~/components/title'
 
 export const meta: MetaFunction = () => {
-  return [{ title: 'Remix Starter Template' }, { name: 'description', content: 'Remix Starter Template' }]
+  return [
+    { title: 'Remix Starter Template' },
+    { name: 'description', content: 'Remix Starter Template' },
+  ]
 }
 
 export default function Index() {
@@ -12,8 +15,9 @@ export default function Index() {
         <div className="text-center">
           <Title>Remix Starter Template</Title>
           <p className="mt-6 text-lg leading-8 text-gray-600">
-            Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo. Elit
-            sunt amet fugiat veniam occaecat fugiat aliqua.
+            Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui
+            lorem cupidatat commodo. Elit sunt amet fugiat veniam occaecat
+            fugiat aliqua.
           </p>
         </div>
       </div>