Use Twilio OpenAPI to generate resource/response models

.eslintrc.json

@@ -22,5 +22,8 @@
   },
   "plugins": [
     "unicorn"
+  ],
+  "ignorePatterns": [
+    "src/generated-twilio-api-models/"
   ]
 }

.prettierignore

@@ -0,0 +1 @@
+src/generated-twilio-api-models/

.vscode/settings.json

@@ -0,0 +1,10 @@
+{
+  "[typescript]": {
+    "editor.formatOnSave": false,
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[typescriptreact]": {
+    "editor.formatOnSave": false,
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+}

generate_twilio_api_models.sh

@@ -0,0 +1,24 @@
+#!/usr/bin/env bash
+
+OUTPUT_DIR=./src/generated-twilio-api-models
+JSON_PATH_PREFIX=https://raw.githubusercontent.com/twilio/twilio-oai/main/spec/json
+
+declare -a arr=(
+  "twilio_numbers_v2"
+  "twilio_accounts_v1"
+  "twilio_messaging_v1"
+  "twilio_api_v2010"
+)
+for NAME in "${arr[@]}"; do
+  # curl -O "$JSON_PATH_PREFIX/$NAME.json"
+  # rm -rf "$OUTPUT_DIR/$NAME"
+  # ./node_modules/.bin/openapi \
+  #   --input "$NAME.json" \
+  #   --output "$OUTPUT_DIR/$NAME" \
+  #   --exportCore false \
+  #   --exportServices false \
+  #   --useUnionTypes
+  npx openapi-typescript "$JSON_PATH_PREFIX/$NAME.json" \
+    -o "$OUTPUT_DIR/$NAME.schema.d.ts"
+  # rm -f "$NAME.json"
+done

package.json

@@ -31,7 +31,8 @@
     "lint": "web-ext lint && eslint 'src/**/*.{ts,tsx}'",
     "fix": "prettier --write src && eslint --fix 'src/**/*.{ts,tsx}'",
     "package": "web-ext build",
-    "submit:firefox": "web-ext sign --use-submission-api --channel=listed --amo-metadata=.amo-metadata.json --api-key=$AMO_JWT_ISSUER --api-secret=$AMO_JWT_SECRET"
+    "submit:firefox": "web-ext sign --use-submission-api --channel=listed --amo-metadata=.amo-metadata.json --api-key=$AMO_JWT_ISSUER --api-secret=$AMO_JWT_SECRET",
+    "generate-twilio-api-models": "./generate_twilio_api_models.sh"
   },
   "dependencies": {
     "-": "^0.0.1",

src/components/inspect-resource-button.tsx

@@ -7,7 +7,7 @@ import Modal from "./modal";
 import { GiMagicPortal } from "react-icons/gi";
 
 interface InspectResourceButtonProperties {
-  resource: TwilioResource;
+  resource: TwilioResource<unknown>;
 }
 
 const InspectResourceButton: React.FC<InspectResourceButtonProperties> = ({
@@ -32,7 +32,7 @@ const InspectResourceButton: React.FC<InspectResourceButtonProperties> = ({
 };
 
 interface ResourceDetailViewProperties {
-  resource: TwilioResource;
+  resource: TwilioResource<unknown>;
 }
 
 export const ResourceDetailView: React.FC<ResourceDetailViewProperties> = ({
@@ -109,7 +109,7 @@ export const ResourceDetailView: React.FC<ResourceDetailViewProperties> = ({
 };
 
 interface ResourceNameLabelProperties {
-  resource: TwilioResource;
+  resource: TwilioResource<unknown>;
 }
 
 const ResourceNameLabel: React.FC<ResourceNameLabelProperties> = ({