Merge pull request #60 from iway1/dev-app-contributing

Dev app contributing

.prettierrc

@@ -1,3 +1,4 @@
 {
+  "printWidth": 80,
   "tabWidth": 2
 }

CONTRIBUTING.md

@@ -0,0 +1,33 @@
+# Contributing
+
+TRPC Panel welcomes and encourages open source contributions.
+
+## Local Development
+
+The repo is configured to work with yarn v1 workspaces. To install dependencies, run:
+
+```sh
+yarn
+```
+
+### Development App
+
+Included in this repo there is a development app that makes it easy to work on `trpc-panel` locally. It is a `next.js` app that will render the router included in the dev app. To run it, do:
+
+```sh
+cd packages/dev-app && yarn dev
+```
+
+This will run the app in your browser.
+
+To add / remove procedures from the dev app's panel, modify its router in `packages/dev-app/src/router.ts`. Please do not commit changes to this file.
+
+## Front end contributions
+
+The `trpc-panel` front end is just a bunch of react components. Any updates made to the react components should immediately be visible while running the `dev-app`.
+
+The React components are located in `packages/trpc-panel/src/react-app`.
+
+## Updating the parser
+
+For more advanced features, it may be required to update the parsing logic, which can be found in `packages/trpc-panel/parse`.

README.MD

@@ -43,6 +43,7 @@ app.use("/panel", (_, res) => {
 `trpc-panel` just renders as a string, so it can be used with any backend.
 
 ## NextJS / create-t3-app example
+
 In Nextjs you'd want to create an api route somewhere like `src/pages/api/panel.ts` and send a text response:
 
 ```ts
@@ -127,6 +128,10 @@ app.use("/panel", (_, res) => {
 });
 ```
 
+## Contributing
+
+`trpc-panel` welcomes and encourages open source contributions. Please see our [contributing](./CONTRIBUTING.md) guide for information on how to develop locally.
+
 ## Limitations
 
 Currently, tRPC panel only supports tRPC v10 and only works with zod input schemas. With it's current design it would be feasible to easily add support for other input types as well
@@ -156,7 +161,7 @@ The following are supported
 - String
 - Undefined
 
-Planning on adding additional support shortly for the following types:
+We would like to add the following types:
 
 - Union
 - Tuple
@@ -166,8 +171,3 @@ Planning on adding additional support shortly for the following types:
 - Set (superjson only)
 - Date (superjson only)
 - Any
-
-### Feature Roadmap
-
-You can view planned features roadmap here: https://trello.com/b/nflGRDxe/trpc-panel-featues-road-map
-

package.json

@@ -21,7 +21,9 @@
   },
   "workspaces": {
     "packages": [
-      "packages/*"
+      "packages/trpc-panel",
+      "packages/test-app",
+      "packages/dev-app"
     ],
     "nohoist": [
       "**/zod-to-json-schema",

packages/dev-app/.env.example

@@ -0,0 +1,14 @@
+# Since the ".env" file is gitignored, you can use the ".env.example" file to
+# build a new ".env" file when you clone the repo. Keep this file up-to-date
+# when you add new variables to `.env`.
+
+# This file will be committed to version control, so make sure not to have any
+# secrets in it. If you are cloning this repo, create a copy of this file named
+# ".env" and populate it with your secrets.
+
+# When adding additional environment variables, the schema in "/src/env.mjs"
+# should be updated accordingly.
+
+# Example:
+# SERVERVAR="foo"
+# NEXT_PUBLIC_CLIENTVAR="bar"

packages/dev-app/.eslintrc.cjs

@@ -0,0 +1,35 @@
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const path = require("path");
+
+/** @type {import("eslint").Linter.Config} */
+const config = {
+  overrides: [
+    {
+      extends: [
+        "plugin:@typescript-eslint/recommended-requiring-type-checking",
+      ],
+      files: ["*.ts", "*.tsx"],
+      parserOptions: {
+        project: path.join(__dirname, "tsconfig.json"),
+      },
+    },
+  ],
+  parser: "@typescript-eslint/parser",
+  parserOptions: {
+    project: path.join(__dirname, "tsconfig.json"),
+  },
+  plugins: ["@typescript-eslint"],
+  extends: ["next/core-web-vitals", "plugin:@typescript-eslint/recommended"],
+  rules: {
+    "@typescript-eslint/consistent-type-imports": [
+      "warn",
+      {
+        prefer: "type-imports",
+        fixStyle: "inline-type-imports",
+      },
+    ],
+    "@typescript-eslint/no-unused-vars": ["warn", { argsIgnorePattern: "^_" }],
+  },
+};
+
+module.exports = config;

packages/dev-app/.gitignore

@@ -1,24 +1,42 @@
-# Logs
-logs
-*.log
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# database
+/prisma/db.sqlite
+/prisma/db.sqlite-journal
+
+# next.js
+/.next/
+/out/
+next-env.d.ts
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
-pnpm-debug.log*
-lerna-debug.log*
-
-node_modules
-dist
-dist-ssr
-*.local
-
-# Editor directories and files
-.vscode/*
-!.vscode/extensions.json
-.idea
-.DS_Store
-*.suo
-*.ntvs*
-*.njsproj
-*.sln
-*.sw?
+.pnpm-debug.log*
+
+# local env files
+# do not commit any .env files to git, except for the .env.example file. https://create.t3.gg/en/usage/env-variables#using-environment-variables
+.env
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo

packages/dev-app/README.md

@@ -0,0 +1,3 @@
+# Dev App
+
+This app is for development of `trpc-panel`. See our [contributing](../../CONTRIBUTING.md) guide for more information.

packages/dev-app/next.config.mjs

@@ -0,0 +1,31 @@
+
+
+
+
+/**
+ * Run `build` or `dev` with `SKIP_ENV_VALIDATION` to skip env validation.
+ * This is especially useful for Docker builds.
+ */
+!process.env.SKIP_ENV_VALIDATION && (await import("./src/env.mjs"));
+
+/** @type {import("next").NextConfig} */
+const config = {
+  reactStrictMode: true,
+
+  /**
+   * If you have the "experimental: { appDir: true }" setting enabled, then you
+   * must comment the below `i18n` config out.
+   *
+   * @see https://github.com/vercel/next.js/issues/41980
+   */
+  i18n: {
+    locales: ["en"],
+    defaultLocale: "en",
+  },
+  experimental: {
+    externalDir: true,
+    esmExternals: true,
+  },
+
+};
+export default config;

packages/dev-app/package.json

@@ -1,38 +1,42 @@
 {
   "name": "dev-app",
+  "version": "0.1.0",
   "private": true,
-  "version": "0.0.0",
-  "type": "module",
   "scripts": {
-    "dev": "vite",
-    "build": "tsc && vite build",
-    "preview": "vite preview"
+    "build": "next build",
+    "dev": "next dev",
+    "lint": "next lint",
+    "start": "next start"
   },
   "dependencies": {
-    "@trpc/client": "^10.5.0",
-    "@trpc/server": "^10.5.0",
-    "fs": "^0.0.1-security",
-    "rollup-plugin-node-builtins": "^2.1.2",
-    "superjson": "^1.12.0",
-    "zod": "^3.19.1"
+    "@tanstack/react-query": "^4.28.0",
+    "@trpc/client": "^10.18.0",
+    "@trpc/next": "^10.18.0",
+    "@trpc/react-query": "^10.18.0",
+    "@trpc/server": "^10.18.0",
+    "autoprefixer": "^10.4.14",
+    "next": "^13.2.4",
+    "next-transpile-modules": "^10.0.0",
+    "postcss": "^8.4.21",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "superjson": "1.12.2",
+    "tailwindcss": "^3.3.1",
+    "ts-loader": "^9.4.2",
+    "zod": "^3.21.4"
   },
   "devDependencies": {
-    "@types/react": "^18.0.26",
-    "@types/react-dom": "^18.0.9",
-    "@vitejs/plugin-react": "^3.0.0",
-    "autoprefixer": "^10.4.13",
-    "css": "^3.0.0",
-    "postcss": "^8.4.20",
-    "react": "18.2.0",
-    "tailwind": "^4.0.0",
-    "tailwindcss": "^3.2.4",
-    "typescript": "^4.9.3",
-    "vite": "^4.0.0"
+    "@types/eslint": "^8.21.3",
+    "@types/node": "^18.15.5",
+    "@types/react": "^18.0.28",
+    "@types/react-dom": "^18.0.11",
+    "@typescript-eslint/eslint-plugin": "^5.56.0",
+    "@typescript-eslint/parser": "^5.56.0",
+    "eslint": "^8.36.0",
+    "eslint-config-next": "^13.2.4",
+    "typescript": "^5.0.2"
   },
-  "peerDependencies": {
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "@trpc/react-query": "^10.5.0",
-    "@tanstack/react-query": "^4.20.4"
+  "ct3aMetadata": {
+    "initVersion": "7.10.2"
   }
 }

packages/dev-app/postcss.config.cjs → packages/dev-app/postcss.config.js

@@ -3,4 +3,4 @@ module.exports = {
     tailwindcss: {},
     autoprefixer: {},
   },
-};
+}