Polish PR: Minor Refactoring & Formatting Improvements (#812)

* Polish Commit: Minor updates to improve upon the repo

- Organize variables and scripts across packages alphabetically
- Replace broken link in `.github/ISSUE_TEMPLATE/feature_request.yml`
- Minor formatting improvements

* Minor Refactoring and Improvements

- Add `prettier` to the `eslint` package; it currently doesn't have it installed

- Remove unnecessary `React` import from `apps/expo/src/app/_layout.tsx`
- Standardize function format across `expo` app
- Import `useState` instead of the whole `React` object

- Organize recommended extensions so they appear in the Extensions Tab in alphabetical order

.github/ISSUE_TEMPLATE/feature_request.yml

@@ -1,5 +1,5 @@
 # This template is heavily inspired by the Next.js's template:
-# See here: https://github.com/vercel/next.js/blob/canary/.github/ISSUE_TEMPLATE/3.feature_request.yml
+# See here: https://github.com/vercel/next.js/tree/canary/.github/ISSUE_TEMPLATE
 
 name: 🛠 Feature Request
 description: Create a feature request for the core packages
@@ -26,4 +26,3 @@ body:
     attributes:
       label: Additional information
       description: Add any other information related to the feature here. If your feature request is related to any issues or discussions, link them here.
-

.github/workflows/ci.yml

@@ -15,8 +15,8 @@ concurrency:
 # @link https://turborepo.org/docs/core-concepts/remote-caching#remote-caching-on-vercel-builds
 env:
   FORCE_COLOR: 3
-  TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
   TURBO_TEAM: ${{ vars.TURBO_TEAM }}
+  TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
 
 jobs:
   lint:
@@ -54,4 +54,4 @@ jobs:
         uses: ./tooling/github/setup
 
       - name: Typecheck
-        run: turbo typecheck
+        run: pnpm typecheck

.vscode/extensions.json

@@ -1,9 +1,9 @@
 {
   "recommendations": [
-    "bradlc.vscode-tailwindcss",
     "dbaeumer.vscode-eslint",
-    "esbenp.prettier-vscode",
     "expo.vscode-expo-tools",
-    "yoavbls.pretty-ts-errors"
+    "esbenp.prettier-vscode",
+    "yoavbls.pretty-ts-errors",
+    "bradlc.vscode-tailwindcss"
   ]
 }

.vscode/settings.json

@@ -1,7 +1,5 @@
 {
-  "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": "explicit"
-  },
+  "editor.codeActionsOnSave": { "source.fixAll.eslint": "explicit" },
   "editor.defaultFormatter": "esbenp.prettier-vscode",
   "editor.formatOnSave": true,
   "eslint.rules.customizations": [{ "rule": "*", "severity": "warn" }],
@@ -12,9 +10,9 @@
   ],
   "tailwindCSS.experimental.configFile": "./tooling/tailwind/index.ts",
   "typescript.enablePromptUseWorkspaceTsdk": true,
-  "typescript.tsdk": "node_modules/typescript/lib",
   "typescript.preferences.autoImportFileExcludePatterns": [
     "next/router.d.ts",
     "next/dist/client/router.d.ts"
-  ]
+  ],
+  "typescript.tsdk": "node_modules/typescript/lib"
 }

apps/expo/package.json

@@ -8,11 +8,11 @@
     "dev": "expo start --ios",
     "dev:android": "expo start --android",
     "dev:ios": "expo start --ios",
-    "lint": "eslint .",
-    "format": "prettier --check . --ignore-path ../../.gitignore",
-    "typecheck": "tsc --noEmit",
     "android": "expo run:android",
-    "ios": "expo run:ios"
+    "ios": "expo run:ios",
+    "format": "prettier --check . --ignore-path ../../.gitignore",
+    "lint": "eslint .",
+    "typecheck": "tsc --noEmit"
   },
   "dependencies": {
     "@expo/metro-config": "^0.10.7",

apps/expo/src/app/_layout.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { Stack } from "expo-router";
 import { StatusBar } from "expo-status-bar";
 
@@ -8,13 +7,13 @@ import "../styles.css";
 
 // This is the main layout of the app
 // It wraps your pages with the providers they need
-const RootLayout = () => {
+export default function RootLayout() {
   return (
     <TRPCProvider>
       {/*
-        The Stack component displays the current page.
-        It also allows you to configure your screens 
-      */}
+          The Stack component displays the current page.
+          It also allows you to configure your screens 
+        */}
       <Stack
         screenOptions={{
           headerStyle: {
@@ -25,6 +24,4 @@ const RootLayout = () => {
       <StatusBar />
     </TRPCProvider>
   );
-};
-
-export default RootLayout;
+}

apps/expo/src/app/index.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import { useState } from "react";
 import { Button, Pressable, Text, TextInput, View } from "react-native";
 import { SafeAreaView } from "react-native-safe-area-context";
 import { Link, Stack } from "expo-router";
@@ -39,8 +39,8 @@ function PostCard(props: {
 function CreatePost() {
   const utils = api.useUtils();
 
-  const [title, setTitle] = React.useState("");
-  const [content, setContent] = React.useState("");
+  const [title, setTitle] = useState("");
+  const [content, setContent] = useState("");
 
   const { mutate, error } = api.post.create.useMutation({
     async onSuccess() {
@@ -96,7 +96,7 @@ function CreatePost() {
   );
 }
 
-const Index = () => {
+export default function Index() {
   const utils = api.useUtils();
 
   const postQuery = api.post.all.useQuery();
@@ -142,6 +142,4 @@ const Index = () => {
       </View>
     </SafeAreaView>
   );
-};
-
-export default Index;
+}

apps/expo/src/utils/api.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import { useState } from "react";
 import Constants from "expo-constants";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { httpBatchLink, loggerLink } from "@trpc/client";
@@ -26,7 +26,6 @@ const getBaseUrl = () => {
    * **NOTE**: This is only for development. In production, you'll want to set the
    * baseUrl to your production API URL.
    */
-
   const debuggerHost = Constants.expoConfig?.hostUri;
   const localhost = debuggerHost?.split(":")[0];
 
@@ -43,10 +42,9 @@ const getBaseUrl = () => {
  * A wrapper for your app that provides the TRPC context.
  * Use only in _app.tsx
  */
-
 export function TRPCProvider(props: { children: React.ReactNode }) {
-  const [queryClient] = React.useState(() => new QueryClient());
-  const [trpcClient] = React.useState(() =>
+  const [queryClient] = useState(() => new QueryClient());
+  const [trpcClient] = useState(() =>
     api.createClient({
       transformer: superjson,
       links: [

apps/nextjs/next.config.js

@@ -5,8 +5,10 @@ import "@acme/auth/env";
 /** @type {import("next").NextConfig} */
 const config = {
   reactStrictMode: true,
+
   /** Enables hot reloading for local packages without a build step */
   transpilePackages: ["@acme/api", "@acme/auth", "@acme/db"],
+
   /** We already do linting and typechecking as separate tasks in CI */
   eslint: { ignoreDuringBuilds: true },
   typescript: { ignoreBuildErrors: true },

apps/nextjs/package.json

@@ -7,8 +7,8 @@
     "build": "pnpm with-env next build",
     "clean": "git clean -xdf .next .turbo node_modules",
     "dev": "pnpm with-env next dev",
-    "lint": "dotenv -v SKIP_ENV_VALIDATION=1 next lint",
     "format": "prettier --check . --ignore-path ../../.gitignore",
+    "lint": "dotenv -v SKIP_ENV_VALIDATION=1 next lint",
     "start": "pnpm with-env next start",
     "typecheck": "tsc --noEmit",
     "with-env": "dotenv -e ../../.env --"

apps/nextjs/src/env.js

@@ -14,14 +14,14 @@ export const env = createEnv({
     PORT: z.coerce.number().default(3000),
   },
   /**
-   * Specify your server-side environment variables schema here. This way you can ensure the app isn't
-   * built with invalid env vars.
+   * Specify your server-side environment variables schema here.
+   * This way you can ensure the app isn't built with invalid env vars.
    */
   server: {
-    DB_USERNAME: z.string(),
-    DB_PASSWORD: z.string(),
     DB_HOST: z.string(),
     DB_NAME: z.string(),
+    DB_PASSWORD: z.string(),
+    DB_USERNAME: z.string(),
   },
   /**
    * Specify your client-side environment variables schema here.
@@ -34,12 +34,13 @@ export const env = createEnv({
    * Destructure all variables from `process.env` to make sure they aren't tree-shaken away.
    */
   runtimeEnv: {
-    VERCEL_URL: process.env.VERCEL_URL,
-    PORT: process.env.PORT,
-    DB_USERNAME: process.env.DB_USERNAME,
-    DB_PASSWORD: process.env.DB_PASSWORD,
     DB_HOST: process.env.DB_HOST,
     DB_NAME: process.env.DB_NAME,
+    DB_PASSWORD: process.env.DB_PASSWORD,
+    DB_USERNAME: process.env.DB_USERNAME,
+    PORT: process.env.PORT,
+    VERCEL_URL: process.env.VERCEL_URL,
+
     // NEXT_PUBLIC_CLIENTVAR: process.env.NEXT_PUBLIC_CLIENTVAR,
   },
   skipValidation:

apps/nextjs/tsconfig.json

@@ -5,11 +5,7 @@
     "paths": {
       "~/*": ["./src/*"]
     },
-    "plugins": [
-      {
-        "name": "next"
-      }
-    ],
+    "plugins": [{ "name": "next" }],
     "tsBuildInfoFile": "node_modules/.cache/tsbuildinfo.json"
   },
   "include": [".", ".next/types/**/*.ts"],

package.json

@@ -9,7 +9,6 @@
     "build": "turbo build",
     "clean": "git clean -xdf node_modules",
     "clean:workspaces": "turbo clean",
-    "postinstall": "pnpm lint:ws",
     "db:push": "pnpm -F db push",
     "db:studio": "pnpm -F db studio",
     "dev": "turbo dev --parallel",
@@ -18,6 +17,7 @@
     "lint": "turbo lint --continue -- --cache --cache-location node_modules/.cache/.eslintcache",
     "lint:fix": "turbo lint --continue -- --fix --cache --cache-location node_modules/.cache/.eslintcache",
     "lint:ws": "pnpm dlx sherif@latest",
+    "postinstall": "pnpm lint:ws",
     "typecheck": "turbo typecheck"
   },
   "devDependencies": {

packages/api/package.json

@@ -9,8 +9,8 @@
   "license": "MIT",
   "scripts": {
     "clean": "rm -rf .turbo node_modules",
-    "lint": "eslint .",
     "format": "prettier --check . --ignore-path ../../.gitignore",
+    "lint": "eslint .",
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {

packages/auth/package.json

@@ -10,8 +10,8 @@
   "license": "MIT",
   "scripts": {
     "clean": "rm -rf .turbo node_modules",
-    "lint": "eslint .",
     "format": "prettier --check . --ignore-path ../../.gitignore",
+    "lint": "eslint .",
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {

packages/db/package.json

@@ -9,8 +9,8 @@
   "license": "MIT",
   "scripts": {
     "clean": "rm -rf .turbo node_modules",
-    "lint": "eslint .",
     "format": "prettier --check . --ignore-path ../../.gitignore",
+    "lint": "eslint .",
     "push": "drizzle-kit push:mysql",
     "studio": "drizzle-kit studio",
     "typecheck": "tsc --noEmit"

packages/db/src/schema/_table.ts

@@ -1,8 +1,8 @@
 import { mysqlTableCreator } from "drizzle-orm/mysql-core";
 
 /**
- * This is an example of how to use the multi-project schema feature of Drizzle ORM. Use the same
- * database instance for multiple projects.
+ * This is an example of how to use the multi-project schema feature of Drizzle ORM.
+ * Use the same database instance for multiple projects.
  *
  * @see https://orm.drizzle.team/docs/goodies#multi-project-schema
  */

tooling/eslint/base.js

@@ -12,9 +12,7 @@ const config = {
     node: true,
   },
   parser: "@typescript-eslint/parser",
-  parserOptions: {
-    project: true,
-  },
+  parserOptions: { project: true },
   plugins: ["@typescript-eslint", "import"],
   rules: {
     "turbo/no-undeclared-env-vars": "off",
@@ -33,9 +31,9 @@ const config = {
     "import/consistent-type-specifier-style": ["error", "prefer-top-level"],
   },
   ignorePatterns: [
-    "**/.eslintrc.cjs",
     "**/*.config.js",
     "**/*.config.cjs",
+    "**/.eslintrc.cjs",
     ".next",
     "dist",
     "pnpm-lock.yaml",

tooling/eslint/package.json

@@ -10,8 +10,8 @@
   ],
   "scripts": {
     "clean": "rm -rf .turbo node_modules",
-    "lint": "eslint .",
     "format": "prettier --check . --ignore-path ../../.gitignore",
+    "lint": "eslint .",
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
@@ -26,10 +26,11 @@
     "eslint-plugin-react-hooks": "^4.6.0"
   },
   "devDependencies": {
-    "@types/eslint": "^8.44.7",
     "@acme/prettier-config": "workspace:^0.1.0",
     "@acme/tsconfig": "workspace:^0.1.0",
+    "@types/eslint": "^8.44.7",
     "eslint": "^8.56.0",
+    "prettier": "^3.1.1",
     "typescript": "^5.3.3"
   },
   "eslintConfig": {

tooling/prettier/index.js

@@ -1,8 +1,8 @@
 import { fileURLToPath } from "url";
 
-/** @typedef  {import("prettier").Config} PrettierConfig */
+/** @typedef {import("prettier").Config} PrettierConfig */
 /** @typedef {import("prettier-plugin-tailwindcss").PluginOptions} TailwindConfig */
-/** @typedef  {import("@ianvs/prettier-plugin-sort-imports").PluginConfig} SortImportsConfig */
+/** @typedef {import("@ianvs/prettier-plugin-sort-imports").PluginConfig} SortImportsConfig */
 
 /** @type { PrettierConfig | SortImportsConfig | TailwindConfig } */
 const config = {

tooling/tailwind/package.json

@@ -9,8 +9,8 @@
   "license": "MIT",
   "scripts": {
     "clean": "rm -rf .turbo node_modules",
-    "lint": "eslint .",
     "format": "prettier --check . --ignore-path ../../.gitignore",
+    "lint": "eslint .",
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {

turbo/generators/templates/package.json.hbs

@@ -9,8 +9,8 @@
   "license": "MIT",
   "scripts": {
     "clean": "rm -rf .turbo node_modules",
-    "lint": "eslint .",
     "format": "prettier --check . --ignore-path ../../.gitignore",
+    "lint": "eslint .",
     "typecheck": "tsc --noEmit"
   },
   "devDependencies": {