Merge pull request #17 from iway1/feature/descriptions

Feature/descriptions
iway1 · Dec 18, 2022 · e792ea6 · e792ea6
2 parents 9f74097 + 67b65e3
commit e792ea6
Show file tree

Hide file tree

Showing 96 changed files with 1,597 additions and 839 deletions.
diff --git a/packages/dev-app/.gitignore b/packages/dev-app/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+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?
diff --git a/packages/dev-app/index.html b/packages/dev-app/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html class="h-full" lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + React + TS</title>
+  </head>
+  <body class="h-full">
+    <div class="flex flex-1 w-full h-full" id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/packages/dev-app/package.json b/packages/dev-app/package.json
@@ -0,0 +1,41 @@
+{
+  "name": "dev-app",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview"
+  },
+  "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.20.2"
+  },
+  "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"
+  },
+  "peerDependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "@trpc/react-query": "^10.5.0",
+    "@tanstack/react-query": "^4.20.4"
+  }
+}
diff --git a/packages/dev-app/postcss.config.cjs b/packages/dev-app/postcss.config.cjs
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};
diff --git a/packages/dev-app/public/vite.svg b/packages/dev-app/public/vite.svg
diff --git a/packages/dev-app/src/App.css b/packages/dev-app/src/App.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
diff --git a/packages/dev-app/src/App.tsx b/packages/dev-app/src/App.tsx
@@ -0,0 +1,19 @@
+import "./App.css";
+import { testRouter } from "../../test-app/src/router"
+import { parseRouterWithOptions } from "../../trpc-panel/src/parse/parseRouter";
+import { RootComponent } from "../../trpc-panel/src/react-app/Root";
+import { createTRPCReact } from "@trpc/react-query";
+
+const parse = parseRouterWithOptions(testRouter, { transformer: "superjson" });
+const trpc = createTRPCReact<any>();
+function App() {
+  return (
+    <RootComponent
+      rootRouter={parse}
+      options={{ url: "http://localhost:4000/trpc", transformer: "superjson" }}
+      trpc={trpc}
+    />
+  );
+}
+
+export default App;
diff --git a/packages/dev-app/src/assets/react.svg b/packages/dev-app/src/assets/react.svg
diff --git a/packages/dev-app/src/index.css b/packages/dev-app/src/index.css
diff --git a/packages/dev-app/src/main.tsx b/packages/dev-app/src/main.tsx
@@ -0,0 +1,10 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import App from './App'
+import './index.css'
+
+ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+)
diff --git a/packages/dev-app/src/router.ts b/packages/dev-app/src/router.ts
@@ -0,0 +1,243 @@
+
+import { initTRPC } from "@trpc/server";
+import { z } from "zod";
+
+import * as trpcExpress from "@trpc/server/adapters/express";
+import { TRPCError } from "@trpc/server";
+import { inferAsyncReturnType } from "@trpc/server";
+import superjson from "superjson";
+
+type TRPCMeta = Record<string, unknown>;
+type Meta<TMeta = TRPCMeta> = TMeta & {
+  cool?: string;
+};
+const t = initTRPC
+  .context<ContextType>()
+  .meta<Meta>()
+  .create({ transformer: superjson, isServer: true });
+
+async function createContext(opts: trpcExpress.CreateExpressContextOptions) {
+  const authHeader = opts.req.headers["authorization"];
+  return {
+    authorized: !!authHeader,
+  };
+}
+
+type ContextType = inferAsyncReturnType<typeof createContext>;
+
+const UserSchema = z.object({
+  id: z.string(),
+  username: z.string(),
+  interests: z.string().array(),
+});
+
+type User = z.infer<typeof UserSchema>;
+
+const IDSchema = z.object({
+  id: z.string(),
+});
+
+const fakeData: {
+  user: User;
+} = {
+  user: {
+    id: "f43cb448-1194-4528-80c7-b6f9287ad5fa",
+    username: "trpclover47",
+    interests: [
+      "type safety",
+      "using 'as any'",
+      "mindfulness meditation",
+      "mcu movies",
+    ],
+  },
+};
+
+const userRouter = t.router({
+  getUserById: t.procedure.input(IDSchema).query((old) => {
+    return fakeData.user;
+  }),
+  updateUser: t.procedure.input(UserSchema).mutation(({ input }) => {
+    return input;
+  }),
+  deleteUser: t.procedure.input(IDSchema).mutation(() => {
+    return {
+      message: "User deleted (not really)",
+    };
+  }),
+  getAllUsers: t.procedure.query(() => {
+    return [fakeData.user, fakeData.user, fakeData.user, fakeData.user];
+  }),
+});
+
+const postsRouter = t.router({
+  getAllPosts: t.procedure.query(() => {
+    return [
+      {
+        id: "asodifjaosdf",
+        text: "Post Id",
+      },
+      {
+        id: "asodifjaosdf",
+        text: "Post Id",
+      },
+      {
+        id: "asodifjaosdf",
+        text: "Post Id",
+      },
+    ];
+  }),
+  createPost: t.procedure
+    .input(
+      z.object({
+        text: z.string(),
+      })
+    )
+    .mutation(({ input }) => {
+      return {
+        id: "aoisdjfoasidjfasodf",
+        text: input.text,
+      };
+    }),
+});
+
+const utilityRouter = t.router({
+  getUsState: t.procedure.query(() => {
+    return [
+      {
+        stateCode: "NY",
+        stateName: "New York",
+        stateId: 0,
+      },
+    ];
+  }),
+});
+utilityRouter._def.procedures.getUsState._def.meta;
+
+const multiRouter = {
+  userRouter,
+  postsRouter,
+  utilityRouter,
+};
+
+export const testRouter = t.router({
+  userRouter: userRouter,
+  postsRouter: postsRouter,
+  utilityRouter: utilityRouter,
+  nestedRouters: t.router(multiRouter),
+  deeplyNestedRouter: t.router({
+    levelOne: t.router({
+      levelTwo: t.router({
+        levelThree: t.router(multiRouter),
+      }),
+    }),
+  }),
+  inputShowcaseRouter: t.router({
+    textInput: t.procedure
+      .input(z.object({ aTextInput: z.string() }))
+      .query(() => {
+        return "It's an input";
+      }),
+    numberInput: t.procedure
+      .input(z.object({ aNumberInput: z.number() }))
+      .query(() => {
+        return "It's an input";
+      }),
+    enumInput: t.procedure
+      .input(z.object({ aEnumInput: z.enum(["One", "Two"]) }))
+      .query(() => {
+        return "It's an input";
+      }),
+    stringArrayInput: t.procedure
+      .input(z.object({ aStringArray: z.string().array() }))
+      .query(() => {
+        return "It's an input";
+      }),
+    objectInput: t.procedure
+      .input(
+        z.object({
+          anObject: z.object({
+            numberArray: z.number().array(),
+          }),
+        })
+      )
+      .query(() => {
+        return "It's an input";
+      }),
+    discriminatedUnionInput: t.procedure
+      .input(
+        z.object({
+          aDiscriminatedUnion: z.discriminatedUnion("discriminatedField", [
+            z.object({
+              discriminatedField: z.literal("One"),
+              aFieldThatOnlyShowsWhenValueIsOne: z.string(),
+            }),
+            z.object({
+              discriminatedField: z.literal("Two"),
+              aFieldThatOnlyShowsWhenValueIsTwo: z.object({
+                someTextFieldInAnObject: z.string(),
+              }),
+            }),
+            z.object({
+              discriminatedField: z.literal("Three"),
+            }),
+          ]),
+        })
+      )
+      .query(() => {
+        return "It's an input";
+      }),
+    emailTextInput: t.procedure
+      .input(
+        z.object({
+          email: z.string().email("That's an invalid email (custom message)"),
+        })
+      )
+      .query(({ input }) => {
+        return "It's good";
+      }),
+  }),
+
+  anErrorThrowingRoute: t.procedure
+    .input(
+      z.object({
+        ok: z.string(),
+      })
+    )
+    .query(() => {
+      throw new TRPCError({
+        message: "It's pretty bad over here.",
+        code: "FORBIDDEN",
+      });
+    }),
+  allInputs: t.procedure
+    .input(
+      z.object({
+        obj: z.object({
+          string: z.string().optional(),
+        }),
+        stringMin5: z.string().min(5),
+        numberMin10: z.number().min(10),
+        stringOptional: z.string().optional(),
+        enum: z.enum(["One", "Two"]),
+        optionalEnum: z.enum(["Three", "Four"]).optional(),
+        stringArray: z.string().array(),
+        union: z.discriminatedUnion("disc", [
+          z.object({
+            disc: z.literal("one"),
+            oneProp: z.string(),
+          }),
+          z.object({
+            disc: z.literal("two"),
+            twoProp: z.enum(["one", "two"]),
+          }),
+        ]),
+      })
+    )
+    .query(() => ({ goodJob: "yougotthedata" })),
+  authorizedProcedure: t.procedure.mutation(({ ctx }) => {
+    if (!ctx.authorized) throw new TRPCError({ code: "UNAUTHORIZED" });
+    return {
+      is: "good",
+    };
+  }),
+});
diff --git a/packages/dev-app/src/vite-env.d.ts b/packages/dev-app/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/packages/dev-app/tailwind.config.cjs b/packages/dev-app/tailwind.config.cjs
@@ -0,0 +1,13 @@
+const config = require("../trpc-panel/tailwind.config.cjs");
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    "./App.{js,jsx,ts,tsx}",
+    "./src/**/*.{js,jsx,ts,tsx}",
+    "../trpc-panel/src/**/*",
+  ],
+  extend: {},
+  theme: {
+    colors: config.theme.colors,
+  },
+};