@osdk/create-app 0.13.0-next-20240426195134 → 0.14.0-main-20240503113403

package/templates/template-tutorial-todo-app/src/client.ts.hbs

@@ -0,0 +1,31 @@
+import { FoundryClient, PublicClientAuth } from "{{osdkPackage}}";
+
+const url = import.meta.env.VITE_FOUNDRY_API_URL;
+const clientId = import.meta.env.VITE_FOUNDRY_CLIENT_ID;
+const redirectUrl = import.meta.env.VITE_FOUNDRY_REDIRECT_URL;
+checkEnv(url, "VITE_FOUNDRY_API_URL");
+checkEnv(clientId, "VITE_FOUNDRY_CLIENT_ID");
+checkEnv(redirectUrl, "VITE_FOUNDRY_REDIRECT_URL");
+
+function checkEnv(
+  value: string | undefined,
+  name: string,
+): asserts value is string {
+  if (value == null) {
+    throw new Error(`Missing environment variable: ${name}`);
+  }
+}
+
+/**
+ * Initialize the client to interact with the Ontology SDK
+ */
+const client = new FoundryClient({
+  url,
+  auth: new PublicClientAuth({
+    clientId,
+    url,
+    redirectUrl,
+  }),
+});
+
+export default client;

package/templates/template-tutorial-todo-app/src/index.css

@@ -0,0 +1,73 @@
+:root {
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+#root {
+  max-width: 1280px;
+  margin: 2rem auto;
+  padding: 2rem;
+}
+
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+a:hover {
+  color: #535bf2;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+button:hover {
+  border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+  a:hover {
+    color: #747bff;
+  }
+  button {
+    background-color: #f9f9f9;
+  }
+}

package/templates/template-tutorial-todo-app/src/main.tsx

@@ -0,0 +1,33 @@
+import ReactDOM from "react-dom/client";
+import { createBrowserRouter, RouterProvider } from "react-router-dom";
+import AuthCallback from "./AuthCallback";
+import AuthenticatedRoute from "./AuthenticatedRoute";
+import Home from "./Home";
+import Login from "./Login";
+import "./index.css";
+
+const router = createBrowserRouter([
+  {
+    path: "/",
+    element: <AuthenticatedRoute />,
+    children: [
+      {
+        path: "/",
+        element: <Home />,
+      },
+    ],
+  },
+  {
+    path: "/login",
+    element: <Login />,
+  },
+  {
+    // This is the route defined in your application's redirect URL
+    path: "/auth/callback",
+    element: <AuthCallback />,
+  },
+]);
+
+ReactDOM.createRoot(document.getElementById("root")!).render(
+  <RouterProvider router={router} />,
+);

package/templates/template-tutorial-todo-app/src/mocks.ts.hbs

@@ -0,0 +1,208 @@
+import { OsdkTodoProject, OsdkTodoTask } from "{{osdkPackage}}/ontology/objects";
+import { LocalDate } from "{{osdkPackage}}";
+
+interface MockProject {
+  id: string;
+  name: string;
+  tasks: MockTask[];
+}
+
+interface MockTask {
+  id: string;
+  name: string;
+}
+
+const projects: MockProject[] = [
+  {
+    id: "1",
+    name: "Fake Project",
+    tasks: [
+      {
+        id: "1",
+        name: "Try to",
+      },
+      {
+        id: "2",
+        name: "Implement this",
+      },
+      {
+        id: "3",
+        name: "With the Ontology SDK!",
+      },
+    ],
+  },
+  {
+    id: "2",
+    name: "Yet Another Fake Project",
+    tasks: [
+      {
+        id: "4",
+        name: "More tasks here",
+      },
+    ],
+  },
+];
+
+async function delay(): Promise<void> {
+  return new Promise((resolve) =>
+    setTimeout(() => resolve(), 500 + Math.random() * 1000)
+  );
+}
+
+// Good enough random id for mocks
+function randomId(): string {
+  return `${Math.floor(Math.random() * 2 ** 31)}`;
+}
+
+async function getProjects(): Promise<OsdkTodoProject[]> {
+  await delay();
+  const result = [...projects];
+  result.sort((p1, p2) => p1.name.localeCompare(p2.name));
+  return result.map(project);
+}
+
+async function createProject({
+  name,
+}: {
+  name: string;
+}): Promise<OsdkTodoProject["__primaryKey"]> {
+  await delay();
+  const id = randomId();
+  projects.push({ id, name, tasks: [] });
+  return id;
+}
+
+async function deleteProject(id: string): Promise<void> {
+  await delay();
+  const idx = projects.findIndex((p) => p.id === id);
+  if (idx !== -1) {
+    projects.splice(idx, 1);
+  }
+}
+
+async function createTask({
+  name,
+  projectId,
+}: {
+  name: string;
+  projectId: string;
+}): Promise<OsdkTodoTask["__primaryKey"]> {
+  await delay();
+  const project = projects.find((p) => p.id === projectId);
+  if (project == null) {
+    throw new Error(`Project ${projectId} not found!`);
+  }
+  const id = randomId();
+  project.tasks.unshift({ id, name });
+  return id;
+}
+
+async function deleteTask(id: string): Promise<void> {
+  await delay();
+  for (const project of projects) {
+    const idx = project.tasks.findIndex((t) => t.id === id);
+    if (idx !== -1) {
+      project.tasks.splice(idx, 1);
+    }
+  }
+}
+
+function project(mockProject: MockProject): OsdkTodoProject {
+  return {
+    __apiName: "OsdkTodoProject",
+    __primaryKey: mockProject.id,
+    __rid: `${mockProject.id}`,
+    $apiName: "OsdkTodoProject",
+    $primaryKey: mockProject.id,
+    $rid: `${mockProject.id}`,
+    id: mockProject.id,
+    name: mockProject.name,
+    osdkTodoTasks: {
+      all: async () => ({
+        type: "ok",
+        value: mockProject.tasks.map((mockTask) => task(mockProject, mockTask)),
+      }),
+      get: async () => ({
+        type: "error",
+        error: {
+          errorType: "UNKNOWN",
+          errorName: "UnknownError",
+          originalError: "",
+          name: "Error",
+          message: "Not implemented!",
+        },
+      }),
+      page: async () => ({
+        type: "error",
+        error: {
+          errorType: "UNKNOWN",
+          errorName: "UnknownError",
+          originalError: "",
+          name: "Error",
+          message: "Not implemented!",
+        },
+      }),
+      asyncIter: () => {
+        throw new Error("Function not implemented.");
+      },
+      fetchPage: () => {
+        throw new Error("Function not implemented.");
+      },
+      fetchPageWithErrors: () => {
+        throw new Error("Function not implemented.");
+      },
+      fetchOneWithErrors: () => {
+        throw new Error("Function not implemented.");
+      },
+      fetchOne: () => {
+        throw new Error("Function not implemented.");
+      },
+    },
+    budget: undefined,
+    description: undefined,
+    document: undefined,
+  };
+}
+
+function task(mockProject: MockProject, mockTask: MockTask): OsdkTodoTask {
+  return {
+    __apiName: "OsdkTodoTask",
+    __primaryKey: mockTask.id,
+    __rid: `${mockTask.id}`,
+    $apiName: "OsdkTodoTask",
+    $primaryKey: mockTask.id,
+    $rid: `${mockTask.id}`,
+    id: mockTask.id,
+    title: mockTask.name,
+    startDate: LocalDate.now(),
+    dueDate: LocalDate.now().plusWeeks(1),
+    status: "IN PROGRESS",
+    projectId: mockProject.id,
+    osdkTodoProject: {
+      get: async () => ({
+        type: "ok",
+        value: project(mockProject),
+      }),
+      fetchOneWithErrors: () => {
+        throw new Error("Function not implemented.");
+      },
+      fetchOne: () => {
+        throw new Error("Function not implemented.");
+      },
+    },
+    description: undefined,
+    assignedTo: undefined,
+    createdAt: undefined,
+    createdBy: undefined,
+  };
+}
+
+const Mocks = {
+  getProjects,
+  createProject,
+  deleteProject,
+  createTask,
+  deleteTask,
+};
+
+export default Mocks;

package/templates/template-tutorial-todo-app/src/useProjectTasks.ts.hbs

@@ -0,0 +1,59 @@
+import { OsdkTodoProject, OsdkTodoTask } from "{{osdkPackage}}/ontology/objects";
+import { useCallback } from "react";
+import useSWR from "swr";
+import Mocks from "./mocks";
+
+export function useProjectTasks(project: OsdkTodoProject | undefined) {
+  const { data, isLoading, isValidating, error, mutate } = useSWR<OsdkTodoTask[]>(
+    project != null ? `projects/${project.id}/tasks` : null,
+    async () => {
+      if (project == null) {
+        return [];
+      }
+      const result = await project.osdkTodoTasks.all();
+      if (result.type !== "ok") {
+        throw result.error;
+      }
+      return result.value;
+    }
+  );
+
+  const createTask: (
+    name: string
+  ) => Promise<OsdkTodoTask["__primaryKey"] | undefined> = useCallback(
+    async (name) => {
+      if (project == null) {
+        return undefined;
+      }
+      // Try to implement this with the Ontology SDK!
+      const id = await Mocks.createTask({
+        name,
+        projectId: project.__primaryKey,
+      });
+      await mutate();
+      return id;
+    },
+    [project, mutate]
+  );
+
+  const deleteTask: (task: OsdkTodoTask) => Promise<void> = useCallback(
+    async (task) => {
+      if (project == null) {
+        return;
+      }
+      // Try to implement this with the Ontology SDK!
+      await Mocks.deleteTask(task.__primaryKey);
+      await mutate();
+    },
+    [project, mutate]
+  );
+
+  return {
+    tasks: data,
+    isLoading,
+    isValidating,
+    isError: error,
+    createTask,
+    deleteTask,
+  };
+}

package/templates/template-tutorial-todo-app/src/useProjects.ts.hbs

@@ -0,0 +1,44 @@
+import { OsdkTodoProject } from "{{osdkPackage}}/ontology/objects";
+import { useCallback } from "react";
+import useSWR from "swr";
+import Mocks from "./mocks";
+
+function useProjects() {
+  const { data, isLoading, isValidating, error, mutate } = useSWR<
+    OsdkTodoProject[]
+  >("projects", async () => {
+    // Try to implement this with the Ontology SDK!
+    return Mocks.getProjects();
+  });
+
+  const createProject: (name: string) => Promise<OsdkTodoProject["__primaryKey"]> =
+    useCallback(
+      async (name) => {
+        // Try to implement this with the Ontology SDK!
+        const id = await Mocks.createProject({ name });
+        await mutate();
+        return id;
+      },
+      [mutate]
+    );
+
+  const deleteProject: (project: OsdkTodoProject) => Promise<void> = useCallback(
+    async (project) => {
+      // Try to implement this with the Ontology SDK!
+      await Mocks.deleteProject(project.__primaryKey);
+      await mutate();
+    },
+    [mutate]
+  );
+
+  return {
+    projects: data,
+    isLoading,
+    isValidating,
+    isError: error,
+    createProject,
+    deleteProject,
+  };
+}
+
+export default useProjects;

package/templates/template-tutorial-todo-app/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/templates/template-tutorial-todo-app/tsconfig.json

@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}

package/templates/template-tutorial-todo-app/tsconfig.node.json

@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}

package/templates/template-tutorial-todo-app/vite.config.ts.hbs

@@ -0,0 +1,19 @@
+import react from "@vitejs/plugin-react";
+import { defineConfig } from "vite";
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+  server: {
+    port: 8080,
+    {{#if corsProxy}}
+    proxy: {
+      "^(/multipass/api|/api)": {
+        target: "{{foundryUrl}}",
+        changeOrigin: true,
+        secure: true,
+      },
+    },
+    {{/if}}
+  },
+});