Merge pull request #51 from gabledata/ts_tutorial

Initial TypeScript tutorial

typescript/.gitignore

@@ -0,0 +1,6 @@
+
+.idea
+.gradle
+server/node_modules/
+.venv
+node_modules

typescript/README.md

@@ -0,0 +1,42 @@
+# TypeScript Tutorial
+
+This tutorial demonstrates registering events defined as inline TypeScript interfaces, and published to Segment using their NodeJS and web browser SDKs. You can browse the `app` directory for [examples](./app/src/Component/HelpPopover.tsx#L19-L25) of events published using the web SDK, and the `server` directory for [examples](./server/cart.ts#L8-L12) published using their NodeJS SDK.
+
+  *Note: This example project was originally based on [kopi-cloud/cabbage](https://github.com/kopi-cloud/cabbage)*
+## Setup
+
+From the `typescript` folder
+
+1. Install the `gable` CLI
+
+    You can install Gable's Python CLI using pip
+
+    ```bash
+    pip install gable --upgrade
+    ```
+
+    afterwards, confirm the version is at least `0.9.0`
+
+    ```bash
+    gable --version
+      gable, version 0.9.0
+    ```
+
+2. Set your Gable API Key
+
+    Log into Gable at `https://sandbox.<company>.gable.ai/`, and navigate to `Settings -> API Keys` from the side panel. Copy the API endpoint & API key values, and run the following in your terminal window
+
+    ```bash
+    export GABLE_API_ENDPOINT=<copied_api_endpoint>
+    export GABLE_API_KEY=<copied_api_key>
+    ```
+
+## Register Segment Events
+
+Once the setup is complete, you're ready to register the backend and frontend events defined in this project as data assets in Gable!
+
+From the `typescript` folder run the below command to print out the list of events that will be registered as data assets in Gable. To register the events, remove the `--dry-run` flag.
+
+```bash
+gable data-asset register --source-type typescript --library segment --dry-run
+```

typescript/app/.env

@@ -0,0 +1,15 @@
+
+
+PORT=6042
+
+# https://github.com/facebook/create-react-app/issues/9904
+# FAST_REFRESH=true
+
+# indicate to c-r-a we're using custom rules, see package.json
+EXTEND_ESLINT=true
+
+# default to using local config, override via environment variable
+REACT_APP_CABBAGE_ENV=dev
+
+# do not popup a browser window
+BROWSER=none

typescript/app/.gitignore

@@ -0,0 +1,28 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+/.eslintcache
+
+# Below here is non create-react-app stuff, i.e. Cabbage stuff
+

typescript/app/app-build/get-definitions.js

@@ -0,0 +1,46 @@
+
+const axios = require('axios');
+const assert = require("assert");
+const log = console;
+
+async function getGoogle(){
+  // console.log("args", process.argv);
+  const sbUrl = process.argv[2];
+  assert(sbUrl, "supabase DB url must be provided, including apikey");
+
+  // don't print the key
+  log.debug("sbUrl", sbUrl.substring(0, sbUrl.indexOf("?")))
+
+  let json = await axios.get(sbUrl);
+
+  if( json.status !== 200 ){
+    log.error("supbase get result", json);
+    throw new Error("error status returned from supabase, see log");
+  }
+
+  if( json?.data?.info?.title !== "PostgREST API" ){
+    log.error("supbase get result", json);
+    throw new Error("unexpected result from supabase, see log");
+  }
+
+  console.log("paths", Object.keys(json.data.paths));
+  console.log("definitions...");
+  console.log(JSON.stringify(json.data.definitions, null, 2));
+}
+
+getGoogle().
+then(()=>{console.log("completed successfully")}).
+catch(error => {
+  console.log("failed", error);
+});
+
+
+// axios.get('https://google.com')
+//   .then(response => {
+//     console.log(response.headers);
+//     // console.log(response.data.explanation);
+//   })
+//   .catch(error => {
+//     console.log(error);
+//   });
+//

typescript/app/app-build/readme.md

@@ -0,0 +1,16 @@
+I'm planning that this is where I will write my own code to generate
+types into `/src/Generated` since openapi-typescript is not very useful.
+
+Ideally, I'd like this directory to be an NPM project itself, so it can
+use library dependencies and even it's own build step so it could be written
+in typescript.
+
+What I'm trying to achieve here is a solution similar to the gradle buildSrc
+idea of a special "sub-project" that gets built before and can be used by
+the real app's actual build process.
+https://docs.gradle.org/current/userguide/organizing_gradle_projects.html#sec:build_sources
+
+What I don't want to do though, is go the whole way to publishing a
+standalone project to NPM. I don't want to build a whole standlone product,
+I just want a place to write some "build logic".
+