Add stub examples/nextjs-import-airbyte-github-export-seafowl/

Author: milesrichardson

examples/nextjs-import-airbyte-github-export-seafowl/.gitignore

@@ -0,0 +1 @@
+.next

examples/nextjs-import-airbyte-github-export-seafowl/README.md

@@ -0,0 +1,26 @@
+# End-to-End Example: Use `airbyte-github` to import GitHub repository into Splitgraph, then export it to Seafowl, via Next.js API routes
+
+This is a full end-to-end example demonstrating importing data to Splitgraph
+(using the `airbyte-github` plugin), exporting it to Seafowl (using the
+`export-to-seafowl` plugin), and then querying it (with `DbSeafowl` and React
+hooks from `@madatdata/react`). The importers and exporting of data is triggered
+by backend API routes (e.g. the Vecel runtime), which execute in an environment
+with secrets (an `API_SECRET` for Splitgraph, and a GitHub access token for
+`airbyte-github`). The client side queries Seafowl directly by sending raw SQL
+queries in HTP requests, which is what Seafowl is ultimately designed for.
+
+## Try Now
+
+### Preview Immediately
+
+_No signup required, just click the button!_
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/splitgraph/madatdata/tree/main/examples/nextjs-import-airbyte-github-export-seafowl?file=pages/index.tsx)
+
+[![Open with CodeSandbox](https://assets.codesandbox.io/github/button-edit-lime.svg)](https://codesandbox.io/p/sandbox/github/splitgraph/madatdata/main/examples/nextjs-import-airbyte-github-export-seafowl?file=pages/index.tsx&hardReloadOnChange=true&startScript=dev&node=16&port=3000)
+
+### Or, deploy to Vercel (signup required)
+
+_Signup, fork the repo, and import it_
+
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/splitgraph/madatdata/tree/main/examples/nextjs-import-airbyte-github-export-seafowl&project-name=madatdata-basic-hooks&repository-name=madatdata-nextjs-basic-hooks)

examples/nextjs-import-airbyte-github-export-seafowl/next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

examples/nextjs-import-airbyte-github-export-seafowl/package.json

@@ -0,0 +1,20 @@
+{
+  "private": true,
+  "scripts": {
+    "dev": "yarn next",
+    "build": "yarn next build",
+    "start": "yarn next start"
+  },
+  "dependencies": {
+    "@madatdata/core": "latest",
+    "@madatdata/react": "latest",
+    "next": "latest",
+    "react": "18.2.0",
+    "react-dom": "18.2.0"
+  },
+  "devDependencies": {
+    "@types/node": "^18.0.0",
+    "@types/react": "^18.0.14",
+    "typescript": "^4.7.4"
+  }
+}

examples/nextjs-import-airbyte-github-export-seafowl/pages/index.tsx

@@ -0,0 +1,67 @@
+import {
+  SqlProvider,
+  useSql,
+  makeSplitgraphHTTPContext,
+} from "@madatdata/react";
+import { useMemo } from "react";
+
+const ExampleComponentUsingSQL = () => {
+  const { loading, error, response } = useSql<{
+    origin_airport: string;
+    destination_airport: string;
+    origin_city: string;
+    destination_city: string;
+    passengers: number;
+    seats: number;
+    flights: number;
+    distance: number;
+    fly_month: string;
+    origin_pop: number;
+    destination_pop: number;
+    id: number;
+  }>(
+    `SELECT
+    "origin_airport",
+    "destination_airport",
+    "origin_city",
+    "destination_city",
+    "passengers",
+    "seats",
+    "flights",
+    "distance",
+    "fly_month",
+    "origin_pop",
+    "destination_pop",
+    "id"
+FROM
+    "splitgraph/domestic_us_flights:latest"."flights"
+LIMIT 100;`
+  );
+
+  return (
+    <pre
+      style={{ minWidth: "100%", minHeight: 500 }}
+      data-testid={`result-pre-${
+        loading ? "loading" : response ? "pass" : error ? "fail" : "unknown"
+      }`}
+    >
+      {JSON.stringify({ loading, error, response }, null, 2)}
+    </pre>
+  );
+};
+
+const SplitgraphSampleQuery = () => {
+  const splitgraphDataContext = useMemo(
+    () => makeSplitgraphHTTPContext({ credential: null }),
+    []
+  );
+
+  // Uses splitgraph.com by default (anon access supported for public data)
+  return (
+    <SqlProvider dataContext={splitgraphDataContext}>
+      <ExampleComponentUsingSQL />
+    </SqlProvider>
+  );
+};
+
+export default SplitgraphSampleQuery;

examples/nextjs-import-airbyte-github-export-seafowl/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": false,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "incremental": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "resolveJsonModule": true,
+    "moduleResolution": "Node",
+    "isolatedModules": true,
+    "jsx": "preserve"
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"]
+}

examples/yarn.lock

@@ -533,7 +533,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@madatdata/core@npm:0.0.11":
+"@madatdata/core@npm:0.0.11, @madatdata/core@npm:latest":
   version: 0.0.11
   resolution: "@madatdata/core@npm:0.0.11"
   dependencies:
@@ -1894,6 +1894,21 @@ __metadata:
   languageName: node
   linkType: hard
 
+"nextjs-import-airbyte-github-export-seafowl-acabed@workspace:nextjs-import-airbyte-github-export-seafowl":
+  version: 0.0.0-use.local
+  resolution: "nextjs-import-airbyte-github-export-seafowl-acabed@workspace:nextjs-import-airbyte-github-export-seafowl"
+  dependencies:
+    "@madatdata/core": latest
+    "@madatdata/react": latest
+    "@types/node": ^18.0.0
+    "@types/react": ^18.0.14
+    next: latest
+    react: 18.2.0
+    react-dom: 18.2.0
+    typescript: ^4.7.4
+  languageName: unknown
+  linkType: soft
+
 "node-fetch@npm:2.6.7":
   version: 2.6.7
   resolution: "node-fetch@npm:2.6.7"