open-source-labs
diff --git a/‎README.md
Lines changed: 25 additions & 2 deletions b/‎README.md
Lines changed: 25 additions & 2 deletions
diff --git a/‎ReadMeGifs/Gifs/tRPC-UI.gif
581 KB b/‎ReadMeGifs/Gifs/tRPC-UI.gif
581 KB
diff --git a/‎ReadMeGifs/Gifs/tRPC-query.gif
757 KB b/‎ReadMeGifs/Gifs/tRPC-query.gif
757 KB
diff --git a/‎ReadMeGifs/Gifs/tRPC-subscription.gif
1.41 MB b/‎ReadMeGifs/Gifs/tRPC-subscription.gif
1.41 MB
diff --git a/‎package.json
Lines changed: 29 additions & 2 deletions b/‎package.json
Lines changed: 29 additions & 2 deletions
diff --git a/‎src/assets/style/base.scss
Lines changed: 18 additions & 1 deletion b/‎src/assets/style/base.scss
Lines changed: 18 additions & 1 deletion
diff --git a/‎src/client/components/App.tsx
Lines changed: 19 additions & 19 deletions b/‎src/client/components/App.tsx
Lines changed: 19 additions & 19 deletions
diff --git a/‎src/client/components/main/GRPCComposer.tsx
Lines changed: 1 addition & 1 deletion b/‎src/client/components/main/GRPCComposer.tsx
Lines changed: 1 addition & 1 deletion
diff --git a/‎src/client/components/main/GraphQLComposer.tsx
Lines changed: 1 addition & 1 deletion b/‎src/client/components/main/GraphQLComposer.tsx
Lines changed: 1 addition & 1 deletion
diff --git a/‎src/client/components/main/MainContainer.tsx
Lines changed: 21 additions & 15 deletions b/‎src/client/components/main/MainContainer.tsx
Lines changed: 21 additions & 15 deletions
diff --git a/‎src/client/components/main/OpenAPIComposer.tsx
Lines changed: 1 addition & 1 deletion b/‎src/client/components/main/OpenAPIComposer.tsx
Lines changed: 1 addition & 1 deletion
@@ -25,6 +25,7 @@ Swell is a one-stop shop for sending and monitoring your API requests:
 - Make API requests based on a range of provided options that conform to the specifications defined in OpenAPI documents.
 - Verify STUN and TURN server connectivity for WebRTC applications by generating an SDP (Session Description Protocol)
 - Diagnose and monitor your gRPC streaming connections
+- Make customizable requests to TypeScript Remote Procedure Call (tRPC) endpoints
 - View response timing information and history in an interactive chart for each request
 - Store workspaces of multiple requests for later use
 - Import, export, and share workspaces with other developers
@@ -49,6 +50,20 @@ Swell is a one-stop shop for sending and monitoring your API requests:
 - _gRPC_: Swell includes full support for all four streaming types of gRPC - unary, client stream, server stream, bidirectional stream.
   <img src="./ReadMeGifs/Gifs/gRPC-responses.gif" style="display: block;  margin: 10px auto 30px;" />
 
+- _tRPC_: Swell includes full support for all methods of TypeScript Remote Procedure Calls including batch call support for queries and mutations.
+  <img src="./ReadMeGifs/Gifs/tRPC-query.gif" style="display: block; margin: 10px auto 30px;" />
+  <img src="./ReadMeGifs/Gifs/tRPC-subscription.gif" style="display: block; margin: 10px auto 30px;" />
+
+  Calls are currently being made using Swell's own TRPCProxyClient generated from the URL provided by the user.
+  Batch requests must be entered one request per line. Swell will treat each line of code entered into the editor as a separate request before batching and returning responses.
+  Each request must follow the general format client.procedure.querytype(). For example:
+
+  ```js
+  client.getUser.query({ name: 'Luke Skywalker' });
+  ```
+
+  See [tRPC docs](https://trpc.io/docs/) for more information on sending tRPC requests or setting up a tRPC server.
+
 - _OpenAPI_: Swell supports the enumeration and execution of REST and RPC API requests as defined in a user-provided OpenAPI document.
   <img src="./ReadMeGifs/Gifs/openapi.gif" style="display: block; margin: 10px auto 30px;" />
 
@@ -97,10 +112,12 @@ Swell is a one-stop shop for sending and monitoring your API requests:
 - _Webhooks_: Swell includes user-defined HTTP callback connection testing designed to test other server's connection to the web and ability to send data. The test insures that when an event occurs, the source site makes an HTTP request to the URL configured for the webhook.
   <img src="./ReadMeGifs/Gifs/Webhook.gif" style="float: left; margin-right: 10px;margin-bottom : 30px; margin-top : 10px;" />
 
-- _Added in Dev Version 1.10.2!_ _UI Updates_: Built with Material UI, a smoother, more intutive interface for enhanced user experience.
+- _UI Updates_: Built with Material UI, a smoother, more intuitive interface for enhanced user experience.
   <img src="./ReadMeGifs/Gifs/NewUI.png" style="float: left; margin-right: 10px;margin-bottom : 30px; margin-top : 10px;" />
+  Added in version 1.12.0: resizable panels between composer, response, and workspace and visual feedbackfor when users is selecting different communication protocols.
+  <img src="./ReadMeGifs/Gifs/tRPC-UI.gif" style="float: left; margin-right: 10px;margin-bottom : 30px; margin-top : 10px;" />
 
-- _Added in Dev Version 1.10.2!_ _Github Integration + Import/Export Workspaces_: Swell allows you to import and export workspaces, making it easy to share collections with your team. You can even register with Github to save your workspaces directly into your repository!
+- _Github Integration + Import/Export Workspaces_: Swell allows you to import and export workspaces, making it easy to share collections with your team. You can even register with Github to save your workspaces directly into your repository!
   <img src="./ReadMeGifs/Gifs/GithubIntegration.gif" style="float: left; margin-right: 10px;margin-bottom : 30px; margin-top : 10px;" />
 
 ## Built With
@@ -113,6 +130,7 @@ Swell is a one-stop shop for sending and monitoring your API requests:
 - Apollo Client
 - Websockets
 - gRPC-js
+- tRPC
 - VM2
 - Chart.js
 - Bulma
@@ -123,6 +141,11 @@ Swell is a one-stop shop for sending and monitoring your API requests:
 
 ## Authors
 
+- **Jack Sonoda** - [jackksono](https://github.com/jackksono)
+- **Jaden Nguyen** - [jaden-nguyen](https://github.com/jaden-nguyen)
+- **Taner Malmedal** - [tannermalmedal](https://github.com/tannermalmedal)
+- **Mihran Baytaryan** - [mihran-baytaryan](https://github.com/mihran-baytaryan)
+- **David Beame** - [KingzandBean](https://github.com/KingzandBean)
 - **Grace Kim** - [gracekiim](https://github.com/gracekiim)
 - **Alex Sanhueza** - [alexsanhueza](https://github.com/alexsanhueza)
 - **Wyatt Bell** - [wcbell51](https://github.com/wcbell51)
 
@@ -1,6 +1,6 @@
 {
   "name": "swell",
-  "version": "1.11.0",
+  "version": "1.12.0",
   "description": "Swell",
   "main": "main.js",
   "repository": "https://github.com/open-source-labs/Swell",
@@ -122,6 +122,7 @@
     "@jest-runner/electron": "^3.0.1",
     "@redux-devtools/extension": "^3.2.2",
     "@reduxjs/toolkit": "^1.8.1",
+    "@trpc/client": "^10.10.0",
     "@uiw/react-codemirror": "4.7.0",
     "apollo-server-express": "^3.6.7",
     "axios": "^0.27.1",
@@ -158,6 +159,7 @@
     "js-cookie": "^3.0.1",
     "mali": "^0.46.1",
     "ngrok": "^4.3.1",
+    "node-fetch": "^3.3.0",
     "npm": "^8.7.0",
     "octokit": "^1.7.1",
     "patch-package": "^6.4.7",
@@ -170,6 +172,7 @@
     "react-github-btn": "^1.2.2",
     "react-redux": "^8.0.1",
     "react-router-dom": "^6.3.0",
+    "react-split": "^2.0.14",
     "react-spring": "^9.4.4",
     "redux": "^4.2.0",
     "resize-observer-polyfill": "^1.5.1",
@@ -258,6 +261,31 @@
     "url": "http://www.getswell.io"
   },
   "contributors": [
+    {
+      "name": "Jack Sonoda",
+      "email": "[email protected]",
+      "url": "https://github.com/jackksono"
+    },
+    {
+      "name": "Tanner Malmedal",
+      "email": "[email protected]",
+      "url": "https://github.com/tannermalmedal"
+    },
+    {
+      "name": "Jaden Nguyen",
+      "email": "[email protected]",
+      "url": "https://github.com/jaden-nguyen"
+    },
+    {
+      "name": "Mihran Baytaryan",
+      "email": "[email protected]",
+      "url": "https://github.com/mihran-baytaryan"
+    },
+    {
+      "name": "David Beame",
+      "email": "[email protected]",
+      "url": "https://github.com/KingzandBean"
+    },
     {
       "name": "Kyle Combs",
       "email": "[email protected]",
@@ -477,4 +505,3 @@
     }
   ]
 }
-
 
@@ -32,7 +32,7 @@ input:focus {
 
 #update-modal {
   position: relative;
-  width: 100%; 
+  width: 100%;
   background-color: $neutral-500;
   color: $neutral-100;
   display: flex;
@@ -92,3 +92,20 @@ $switch-focus: 5px solid red;
 .add-vertical-scroll {
   overflow-y: auto !important;
 }
+
+.gutter {
+  background-color: $primary-500;
+  background-position: 50%;
+}
+
+// cursorStyles not working
+.gutter.gutter-horizontal {
+  height: 100%;
+}
+
+.gutter.gutter-horizontal:hover {
+  cursor: col-resize;
+}
+.gutter.gutter-vertical:hover {
+  cursor: row-resize;
+}
@@ -15,7 +15,7 @@ import { WindowExt } from '../../types';
 
 // Material UI components
 import { Box, Divider } from '@mui/material';
-
+import Split from "react-split";
 // Error handling
 import ErrorBoundary from './utilities/ErrorBoundary/ErrorBoundary';
 
@@ -63,26 +63,26 @@ const App = () => {
           <NavBarContainer />
         </ErrorBoundary>
 
-        <Box sx={{ height: '100%', display: 'flex' }}>
+        {/* <Box sx={{ height: '100%', display: 'flex' }}> */}
           {/* Workspace. Left side of the application. */}
+          <Split direction="horizontal" gutterSize={5} style={{ width: '100%', height: '100%', display: 'flex'}}>
+              <ErrorBoundary>
+                <HistoryOrWorkspaceContainer
+                  currentWorkspaceId={currentWorkspaceId}
+                  setWorkspace={setWorkspace}
+                />
+              </ErrorBoundary>
+            {/* <Divider
+              orientation="vertical"
+              sx={{ borderRightWidth: 2, background: '#51819b' }}
+            /> */}
 
-          <ErrorBoundary>
-            <HistoryOrWorkspaceContainer
-              currentWorkspaceId={currentWorkspaceId}
-              setWorkspace={setWorkspace}
-            />
-          </ErrorBoundary>
-
-          <Divider
-            orientation="vertical"
-            sx={{ borderRightWidth: 2, background: '#51819b' }}
-          />
-
-          {/* Main container. Contains the composer and response panes. */}
-          <ErrorBoundary>
-            <MainContainer currentWorkspaceId={currentWorkspaceId} />
-          </ErrorBoundary>
-        </Box>
+            {/* Main container. Contains the composer and response panes. */}
+            <ErrorBoundary>
+              <MainContainer currentWorkspaceId={currentWorkspaceId} />
+            </ErrorBoundary>
+          </Split>
+        {/* </Box> */}
 
         <ErrorBoundary>
           <UpdatePopUpContainer />
 
@@ -183,7 +183,7 @@ export default function GRPCComposer(props) {
     <Box
       className="is-flex-grow-3 add-vertical-scroll"
       sx={{
-        height: '40%',
+        height: '100%',
         px: 1,
         overflowX: 'scroll',
         overflowY: 'scroll',
 
@@ -256,7 +256,7 @@ export default function GraphQLComposer(props: $TSFixMe) {
     <Box
       className="is-flex-grow-3 add-vertical-scroll"
       sx={{
-        height: '40%',
+        height: '100%',
         px: 1,
         overflowX: 'scroll',
         overflowY: 'scroll',
 
@@ -31,12 +31,13 @@ import WebSocketComposer from './WebSocketComposer';
 import WebRTCComposer from './WebRTCComposer';
 import OpenAPIComposer from './OpenAPIComposer';
 import WebhookComposer from './WebhookComposer';
+import TRPCComposer from './TRPCComposer';
 import ResponsePaneContainer from './response/ResponsePaneContainer';
 
 // Import MUI components
 import { Box, Divider } from '@mui/material';
 import { AppDispatch, RootState } from '../../toolkit-refactor/store';
-
+import Split from "react-split";
 /**@todo switch to hooks? */
 const mapStateToProps = (store: RootState) => {
   return {
@@ -106,20 +107,25 @@ function MainContainer(props: $TSFixMeObject) {
         // flexDirection: 'column'
       }}
     >
-      <Routes>
-        <Route path="/" element={<Http2Composer {...props} />} />
-        <Route path="/graphql" element={<GraphQLComposer {...props} />} />
-        <Route path="/grpc" element={<GRPCComposer {...props} />} />
-        <Route path="/websocket" element={<WebSocketComposer {...props} />} />
-        <Route path="/webrtc" element={<WebRTCComposer {...props} />} />
-        <Route path="/openapi" element={<OpenAPIComposer {...props} />} />
-        <Route path="/webhook" element={<WebhookComposer {...props} />} />
-      </Routes>
-      <Divider
-        orientation="horizontal"
-        sx={{ borderBottomWidth: 2, background: '#51819b' }}
-      />
-      <ResponsePaneContainer />
+      <Split direction='vertical' gutterSize={5} style={{height: '100%'}}>
+          <Box sx={{display: 'flex'}}>
+            <Routes>
+              <Route path="/" element={<Http2Composer {...props} />} />
+              <Route path="/graphql" element={<GraphQLComposer {...props} />} />
+              <Route path="/grpc" element={<GRPCComposer {...props} />} />
+              <Route path="/websocket" element={<WebSocketComposer {...props} />} />
+              <Route path="/webrtc" element={<WebRTCComposer {...props} />} />
+              <Route path="/openapi" element={<OpenAPIComposer {...props} />} />
+              <Route path="/webhook" element={<WebhookComposer {...props} />} />
+              <Route path="/trpc" element={<TRPCComposer {...props} />} />
+            </Routes>
+          </Box>
+          {/* <Divider
+            orientation="horizontal"
+            sx={{ borderBottomWidth: 2, background: '#51819b' }}
+          /> */}
+          <ResponsePaneContainer />
+      </Split>
     </Box>
   );
 }
 
@@ -127,7 +127,7 @@ export default function OpenAPIComposer(props) {
     <Box
       className="is-flex-grow-3 add-vertical-scroll"
       sx={{
-        height: '40%',
+        height: '100%',
         px: 1,
         overflowX: 'scroll',
         overflowY: 'scroll',