[oauth-app] Move to examples and convert to vite (#260)

* [oauth-app] Move to examples and convert to vite (#6504) All CRA removed from workspaces! 🎉 GitOrigin-RevId: ebdcec569f5f95f98b2f7281561b4b0de1fe8ca4 * [js] Resolve dep warnings (#6506) GitOrigin-RevId: ed8d59e4ff7f6ecad65239b036a19a85298f6146 * Update package.json to new concurrency (#6519) GitOrigin-RevId: f4993ca59d270f75447aa5840e83ba6357847361 * add job permissions * [oauth-app] Remove private dep * update permissions * fix permissions * fix dep --------- Co-authored-by: Corey Martin <[email protected]> Co-authored-by: Rohan Ramakrishnan <[email protected]>
lightsparkdev · Oct 3, 2023 · 32768cd · 32768cd
1 parent c76b83c
commit 32768cd
Show file tree

Hide file tree

Showing 65 changed files with 770 additions and 18,287 deletions.
diff --git a/.github/workflows/create-release-pr.yaml b/.github/workflows/create-release-pr.yaml
@@ -13,7 +13,9 @@ jobs:
   create-release-pr:
     name: Create or update release PR
     runs-on: ubuntu-latest
-
+    permissions:
+      contents: write
+      pull-requests: write
     steps:
       - name: Save branch name output
         shell: bash

diff --git a/.github/workflows/test-release-sync.yaml b/.github/workflows/test-release-sync.yaml
@@ -15,6 +15,9 @@ jobs:
     if: github.head_ref != 'changeset-release/main'
     name: "Update lock file for PRs before checks and build"
     runs-on: "ubuntu-22.04"
+    permissions:
+      contents: write
+      pull-requests: write
     outputs:
       VERIFIED_LOCK_COMMIT: ${{ steps.sync-lock-file.outputs.VERIFIED_LOCK_COMMIT }}
     steps:
@@ -162,6 +165,9 @@ jobs:
   release:
     name: Release
     needs: ["checks", "build"]
+    permissions:
+      contents: write
+      pull-requests: write
     if: "success() && github.event_name == 'push'"
     runs-on: ubuntu-latest
     environment: npm
@@ -261,6 +267,8 @@ jobs:
     if: "github.event_name == 'push'"
     runs-on: ubuntu-latest
     environment: npm
+    permissions:
+      contents: write
     steps:
       - name: Checkout Repo
         uses: actions/checkout@v3

diff --git a/apps/examples/oauth-app/.eslintrc.js b/apps/examples/oauth-app/.eslintrc.js
@@ -0,0 +1,13 @@
+module.exports = {
+  extends: ["@lightsparkdev/eslint-config/react-app"],
+
+  overrides: [
+    {
+      files: ["**/*.ts?(x)"],
+      parserOptions: {
+        /* Allow linting for ts files outside src with tsconfig-eslint: */
+        project: ["./tsconfig.json", "./tsconfig-eslint.json"],
+      },
+    },
+  ],
+};
diff --git a/...park-sdk/examples/oauth-example/README.md → apps/examples/oauth-app/README.md b/...park-sdk/examples/oauth-example/README.md → apps/examples/oauth-app/README.md
diff --git a/apps/examples/oauth-app/index.html b/apps/examples/oauth-app/index.html
@@ -0,0 +1,33 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="A demo of using oauth with the Lightspark JS SDK"
+    />
+    <link rel="apple-touch-icon" href="/logo192.png" />
+    <link rel="manifest" href="/manifest.json" />
+
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      rel="preload"
+      href="https://fonts.googleapis.com/css?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
+      as="style"
+    />
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
+    />
+
+    <title>Lightspark OAuth Demo</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <script type="module" src="/src/index.tsx"></script>
+  </body>
+</html>
diff --git a/apps/examples/oauth-app/package.json b/apps/examples/oauth-app/package.json
@@ -0,0 +1,43 @@
+{
+  "name": "@lightsparkdev/oauth-app",
+  "version": "0.0.0",
+  "private": true,
+  "dependencies": {
+    "@emotion/css": "^11.11.0",
+    "@emotion/react": "^11.11.0",
+    "@emotion/styled": "^11.11.0",
+    "@lightsparkdev/lightspark-sdk": "1.0.6",
+    "@lightsparkdev/oauth": "*",
+    "@lightsparkdev/ui": "*",
+    "qrcode.react": "^3.1.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.1.0",
+    "react-router-dom": "6.11.2",
+    "web-vitals": "^3.3.0"
+  },
+  "devDependencies": {
+    "@lightsparkdev/eslint-config": "*",
+    "@lightsparkdev/tsconfig": "*",
+    "@types/jest": "^29.5.3",
+    "@types/node": "^20.2.5",
+    "@types/react": "^18.2.12",
+    "@types/react-dom": "^18.0.0",
+    "@vitejs/plugin-react": "^4.0.1",
+    "eslint": "^8.3.0",
+    "eslint-watch": "^8.0.0",
+    "tsc-absolute": "^1.0.1",
+    "typescript": "^4.9.5",
+    "vite": "^4.3.9"
+  },
+  "scripts": {
+    "start": "yarn vite",
+    "build": "yarn tsc && yarn vite build",
+    "clean": "rm -rf .turbo && rm -rf dist",
+    "lint:fix": "eslint --fix .",
+    "lint:watch": "esw ./src -w --ext .ts,.tsx,.js --color",
+    "lint": "eslint .",
+    "test": "echo \"TODO\"",
+    "types:watch": "tsc-absolute --watch",
+    "types": "tsc"
+  }
+}
diff --git a/...examples/oauth-example/public/favicon.ico → apps/examples/oauth-app/public/favicon.ico b/...examples/oauth-example/public/favicon.ico → apps/examples/oauth-app/public/favicon.ico
diff --git a/...examples/oauth-example/public/logo192.png → apps/examples/oauth-app/public/logo192.png b/...examples/oauth-example/public/logo192.png → apps/examples/oauth-app/public/logo192.png
diff --git a/...examples/oauth-example/public/logo512.png → apps/examples/oauth-app/public/logo512.png b/...examples/oauth-example/public/logo512.png → apps/examples/oauth-app/public/logo512.png
diff --git a/...amples/oauth-example/public/manifest.json → apps/examples/oauth-app/public/manifest.json b/...amples/oauth-example/public/manifest.json → apps/examples/oauth-app/public/manifest.json
diff --git a/.../examples/oauth-example/public/robots.txt → apps/examples/oauth-app/public/robots.txt b/.../examples/oauth-example/public/robots.txt → apps/examples/oauth-app/public/robots.txt
diff --git a/...rk-sdk/examples/oauth-example/src/App.css → apps/examples/oauth-app/src/App.css b/...rk-sdk/examples/oauth-example/src/App.css → apps/examples/oauth-app/src/App.css
diff --git a/...rk-sdk/examples/oauth-example/src/App.tsx → apps/examples/oauth-app/src/App.tsx b/...rk-sdk/examples/oauth-example/src/App.tsx → apps/examples/oauth-app/src/App.tsx
diff --git a/apps/examples/oauth-app/src/Root.tsx b/apps/examples/oauth-app/src/Root.tsx
@@ -0,0 +1,14 @@
+import { Route, Routes } from "react-router-dom";
+import { MainRoutes } from "./routes";
+import DashboardPage from "./pages/DashboardPage";
+import LoginPage from "./pages/LoginPage";
+
+export function Root() {
+  return (
+    <Routes>
+      <Route path={MainRoutes.Base} element={<DashboardPage />} />
+      <Route path={MainRoutes.Login} element={<LoginPage />} />
+      <Route path={MainRoutes.Oauth} element={<LoginPage />} />
+    </Routes>
+  );
+}
diff --git a/...les/oauth-example/src/auth/AuthContext.ts → ...xamples/oauth-app/src/auth/AuthContext.ts b/...les/oauth-example/src/auth/AuthContext.ts → ...xamples/oauth-app/src/auth/AuthContext.ts
diff --git a/...s/oauth-example/src/auth/AuthProvider.tsx → ...mples/oauth-app/src/auth/AuthProvider.tsx b/...s/oauth-example/src/auth/AuthProvider.tsx → ...mples/oauth-app/src/auth/AuthProvider.tsx
@@ -1,7 +1,7 @@
 import { OAuthProvider as LsOauthProvider } from "@lightsparkdev/oauth";
 import React, { useState } from "react";
-import { useLightsparkClient } from "../lightsparkclient/LightsparkClientProvider";
-import AuthContextType from "./AuthContext";
+import { useLightsparkClient } from "src/lightsparkclient/LightsparkClientProvider";
+import type AuthContextType from "./AuthContext";
 import { OAuthProvider } from "./oauthProvider";
 
 const AuthContext = React.createContext<AuthContextType>(null!);

diff --git a/...es/oauth-example/src/auth/RequireAuth.tsx → ...amples/oauth-app/src/auth/RequireAuth.tsx b/...es/oauth-example/src/auth/RequireAuth.tsx → ...amples/oauth-app/src/auth/RequireAuth.tsx
@@ -1,16 +1,20 @@
-import { Navigate, useLocation } from "react-router-dom";
+import { useLocation } from "react-router-dom";
 import { useAuth } from "./AuthProvider";
+import { Navigate } from "src/components/router";
+import { MainRoutes } from "src/routes";
 
 function RequireAuth({ children }: { children: JSX.Element }) {
-  let auth = useAuth();
-  let location = useLocation();
+  const auth = useAuth();
+  const location = useLocation();
 
   if (!auth.isAuthorized()) {
     // Redirect them to the /login page, but save the current location they were
     // trying to go to when they were redirected. This allows us to send them
     // along to that page after they login, which is a nicer user experience
     // than dropping them off on the home page.
-    return <Navigate to="/login" state={{ from: location }} replace />;
+    return (
+      <Navigate to={MainRoutes.Login} state={{ from: location }} replace />
+    );
   }
 
   return children;

diff --git a/...s/oauth-example/src/auth/oauthProvider.ts → ...mples/oauth-app/src/auth/oauthProvider.ts b/...s/oauth-example/src/auth/oauthProvider.ts → ...mples/oauth-app/src/auth/oauthProvider.ts
diff --git a/apps/examples/oauth-app/src/components/Button.tsx b/apps/examples/oauth-app/src/components/Button.tsx
@@ -0,0 +1,5 @@
+/* eslint-disable-next-line no-restricted-imports -- only use with typesafe routes */
+import { Button as ButtonBase } from "@lightsparkdev/ui/components";
+import { type RoutesType } from "src/routes";
+
+export const Button = ButtonBase<RoutesType>;
diff --git a/...auth-example/src/components/Dashboard.tsx → ...es/oauth-app/src/components/Dashboard.tsx b/...auth-example/src/components/Dashboard.tsx → ...es/oauth-app/src/components/Dashboard.tsx
@@ -1,12 +1,12 @@
 import styled from "@emotion/styled";
-import { Maybe } from "@lightsparkdev/core";
+import { type Maybe } from "@lightsparkdev/core";
 import {
-  CurrencyAmount as CurrencyAmountType,
+  type CurrencyAmount as CurrencyAmountType,
   CurrencyUnit,
-  SingleNodeDashboard,
-  Transaction,
+  type SingleNodeDashboard,
+  type Transaction,
 } from "@lightsparkdev/lightspark-sdk";
-import CurrencyAmount from "./CurrencyAmount";
+import { CurrencyAmount } from "@lightsparkdev/ui/components";
 import { Table, Td, Th, Tr } from "./Table";
 
 const Dashboard = ({ data }: { data: SingleNodeDashboard }) => {

diff --git a/...es/oauth-example/src/components/Table.tsx → ...amples/oauth-app/src/components/Table.tsx b/...es/oauth-example/src/components/Table.tsx → ...amples/oauth-app/src/components/Table.tsx
diff --git a/apps/examples/oauth-app/src/components/router.tsx b/apps/examples/oauth-app/src/components/router.tsx
@@ -0,0 +1,24 @@
+/* eslint-disable no-restricted-imports -- only allow in this file */
+import {
+  Link as LinkBase,
+  Navigate as NavigateBase,
+  replaceParams as replaceParamsBase,
+  useCurrentRoute as useCurrentRouteBase,
+  useFindMatchingRoute as useFindMatchingRouteBase,
+  useMatchRoute as useMatchRouteBase,
+  useMatchRoutes as useMatchRoutesBase,
+  useNavigate as useNavigateBase,
+  type LinkProps as LinkPropsBase,
+} from "@lightsparkdev/ui/router";
+import type { RoutesType } from "src/routes";
+/* eslint-enable no-restricted-imports */
+
+export const replaceParams = replaceParamsBase<RoutesType>;
+export const Link = LinkBase<RoutesType>;
+export const Navigate = NavigateBase<RoutesType>;
+export const useNavigate = useNavigateBase<RoutesType>;
+export const useMatchRoutes = useMatchRoutesBase<RoutesType>;
+export const useFindMatchingRoute = useFindMatchingRouteBase<RoutesType>;
+export const useMatchRoute = useMatchRouteBase<RoutesType>;
+export const useCurrentRoute = useCurrentRouteBase<RoutesType>;
+export type LinkProps = LinkPropsBase<RoutesType>;
diff --git a/...auth-example/src/hooks/useAccountInfo.tsx → ...es/oauth-app/src/hooks/useAccountInfo.tsx b/...auth-example/src/hooks/useAccountInfo.tsx → ...es/oauth-app/src/hooks/useAccountInfo.tsx
@@ -1,6 +1,6 @@
-import { Account } from "@lightsparkdev/lightspark-sdk";
+import { type Account } from "@lightsparkdev/lightspark-sdk";
 import { useEffect, useState } from "react";
-import { useLightsparkClient } from "../lightsparkclient/LightsparkClientProvider";
+import { useLightsparkClient } from "src/lightsparkclient/LightsparkClientProvider";
 
 const useAccountInfo = () => {
   const clientProvider = useLightsparkClient();

diff --git a/...-sdk/examples/oauth-example/src/index.css → apps/examples/oauth-app/src/index.css b/...-sdk/examples/oauth-example/src/index.css → apps/examples/oauth-app/src/index.css
diff --git a/...-sdk/examples/oauth-example/src/index.tsx → apps/examples/oauth-app/src/index.tsx b/...-sdk/examples/oauth-example/src/index.tsx → apps/examples/oauth-app/src/index.tsx
@@ -1,19 +1,27 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
 import { BrowserRouter } from "react-router-dom";
+import { GlobalStyles } from "@lightsparkdev/ui/styles/global";
 import App from "./App";
 import "./index.css";
 import reportWebVitals from "./reportWebVitals";
-import routes from "./routes";
+import { Root } from "./Root";
+import { ThemeProvider } from "@emotion/react";
+import { themes } from "@lightsparkdev/ui/styles/colors";
 
 const root = ReactDOM.createRoot(
   document.getElementById("root") as HTMLElement
 );
 root.render(
   <React.StrictMode>
-    <BrowserRouter basename={process.env.PUBLIC_URL}>
-      <App>{routes}</App>
-    </BrowserRouter>
+    <ThemeProvider theme={themes.light}>
+      <GlobalStyles />
+      <BrowserRouter>
+        <App>
+          <Root />
+        </App>
+      </BrowserRouter>
+    </ThemeProvider>
   </React.StrictMode>
 );
 

diff --git a/...ghtsparkclient/LightsparkClientContext.ts → ...ghtsparkclient/LightsparkClientContext.ts b/...ghtsparkclient/LightsparkClientContext.ts → ...ghtsparkclient/LightsparkClientContext.ts
@@ -1,5 +1,5 @@
-import { AuthProvider } from "@lightsparkdev/core";
-import { LightsparkClient } from "@lightsparkdev/lightspark-sdk";
+import { type AuthProvider } from "@lightsparkdev/core";
+import { type LightsparkClient } from "@lightsparkdev/lightspark-sdk";
 
 interface LightsparkClientContextType {
   getClient: () => LightsparkClient;

diff --git a/...tsparkclient/LightsparkClientProvider.tsx → ...tsparkclient/LightsparkClientProvider.tsx b/...tsparkclient/LightsparkClientProvider.tsx → ...tsparkclient/LightsparkClientProvider.tsx
@@ -1,9 +1,9 @@
-import { AuthProvider } from "@lightsparkdev/core";
+import { type AuthProvider } from "@lightsparkdev/core";
 import { LightsparkClient } from "@lightsparkdev/lightspark-sdk";
 import React, { useState } from "react";
-import LightsparkClientContextType from "./LightsparkClientContext";
+import type LightsparkClientContextType from "./LightsparkClientContext";
 
-let LightsparkClientContext = React.createContext<LightsparkClientContextType>(
+const LightsparkClientContext = React.createContext<LightsparkClientContextType>(
   null!
 );
 
@@ -37,7 +37,7 @@ function LightsparkClientProvider({ children }: { children: React.ReactNode }) {
     }
   };
 
-  let value = { getClient, setAuthProvider, isAuthenticated };
+  const value = { getClient, setAuthProvider, isAuthenticated };
 
   return (
     <LightsparkClientContext.Provider value={value}>

diff --git a/...oauth-example/src/pages/DashboardPage.tsx → ...les/oauth-app/src/pages/DashboardPage.tsx b/...oauth-example/src/pages/DashboardPage.tsx → ...les/oauth-app/src/pages/DashboardPage.tsx
@@ -1,15 +1,15 @@
 import styled from "@emotion/styled";
 import {
   BitcoinNetwork,
-  SingleNodeDashboard,
+  type SingleNodeDashboard,
 } from "@lightsparkdev/lightspark-sdk";
 import { useEffect, useState } from "react";
-import { useAuth } from "../auth/AuthProvider";
-import RequireAuth from "../auth/RequireAuth";
-import { Button } from "../components/Button";
-import Dashboard from "../components/Dashboard";
-import useAccountInfo from "../hooks/useAccountInfo";
-import { useLightsparkClient } from "../lightsparkclient/LightsparkClientProvider";
+import { useAuth } from "src/auth/AuthProvider";
+import RequireAuth from "src/auth/RequireAuth";
+import Dashboard from "src/components/Dashboard";
+import useAccountInfo from "src/hooks/useAccountInfo";
+import { useLightsparkClient } from "src/lightsparkclient/LightsparkClientProvider";
+import { Button } from "src/components/Button";
 
 function DashboardPage() {
   const [loading, setLoading] = useState<boolean>(true);
@@ -47,12 +47,11 @@ function DashboardPage() {
         <Header>
           <Button
             primary
+            text="Sign out"
             onClick={() => {
               auth.signout();
             }}
-          >
-            Sign out
-          </Button>
+          />
         </Header>
         <Dashboard data={dashboard} />
       </div>

diff --git a/...les/oauth-example/src/pages/LoginPage.tsx → ...xamples/oauth-app/src/pages/LoginPage.tsx b/...les/oauth-example/src/pages/LoginPage.tsx → ...xamples/oauth-app/src/pages/LoginPage.tsx
@@ -1,8 +1,10 @@
 import styled from "@emotion/styled";
 import { useEffect } from "react";
-import { useLocation, useNavigate } from "react-router-dom";
-import { useAuth } from "../auth/AuthProvider";
-import { Button } from "../components/Button";
+import { useLocation } from "react-router-dom";
+import { useAuth } from "src/auth/AuthProvider";
+import { Button } from "src/components/Button";
+import { useNavigate } from "src/components/router";
+import { MainRoutes } from "src/routes";
 
 const LoginPage = () => {
   const navigate = useNavigate();
@@ -12,12 +14,11 @@ const LoginPage = () => {
   useEffect(() => {
     if (window.location.search.includes("code")) {
       const queryString = window.location.search.substring(1); // includes '?'
-      const path = ["/oauth", queryString].join("#");
-      navigate(path);
+      navigate(MainRoutes.Oauth, { query: queryString });
     }
     auth.checkAuth().then((isAuthorized: boolean) => {
       if (isAuthorized) {
-        navigate("/");
+        navigate(MainRoutes.Base);
       }
     });
   }, [auth, navigate]);
@@ -32,16 +33,14 @@ const LoginPage = () => {
       // when they get to the protected page and click the back button, they
       // won't end up back on the login page, which is also really nice for the
       // user experience.
-      navigate(from, { replace: true });
+      navigate(from, undefined, { replace: true });
     });
   }
 
   return (
     <Container>
       <Description>Log into your Lightspark account to continue</Description>
-      <Button primary onClick={handleLogin}>
-        Login
-      </Button>
+      <Button text="Login" primary onClick={handleLogin} />
     </Container>
   );
 };

diff --git a/...ples/oauth-example/src/reportWebVitals.ts → ...examples/oauth-app/src/reportWebVitals.ts b/...ples/oauth-example/src/reportWebVitals.ts → ...examples/oauth-app/src/reportWebVitals.ts
@@ -1,4 +1,4 @@
-import { ReportHandler } from "web-vitals";
+import { type ReportHandler } from "web-vitals";
 
 const reportWebVitals = (onPerfEntry?: ReportHandler) => {
   if (onPerfEntry && onPerfEntry instanceof Function) {