@osdk/create-app 0.17.0-main-20240529132607 → 0.17.0

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

@@ -1,62 +0,0 @@
-import { useCallback, useEffect, useState } from "react";
-import CreateProjectButton from "./CreateProjectButton";
-import CreateTaskButton from "./CreateTaskButton";
-import DeleteProjectButton from "./DeleteProjectButton";
-import css from "./Home.module.css";
-import Layout from "./Layout";
-import { MockProject } from "./mocks";
-import ProjectSelect from "./ProjectSelect";
-import TaskList from "./TaskList";
-import useProjects from "./useProjects";
-
-function Home() {
-  const [projectId, setProjectId] = useState<string | undefined>(undefined);
-  const { projects } = useProjects();
-  const project = projects?.find((p) => p.id === projectId);
-
-  const handleSelectProject = useCallback(
-    (p: MockProject) => setProjectId(p.id),
-    [],
-  );
-
-  useEffect(() => {
-    if (project == null && projects != null && projects.length > 0) {
-      setProjectId(projects[0].id);
-    }
-  }, [project, projects]);
-
-  return (
-    <Layout>
-      <div className={css.tutorialBannerWrapper}>
-        <div className={css.tutorialBanner}>
-          <p className={css.tutorialBannerTitle}>
-            💡 Welcome to this tutorial!
-          </p>
-          <p>
-            The Todo App below has been implemented with fake in memory data.
-            Can you solve how to switch it to use the Ontology SDK instead?
-          </p>
-        </div>
-      </div>
-      <div className={css.projectSelect}>
-        <span>Project:</span>
-        <ProjectSelect
-          project={project}
-          projects={projects ?? []}
-          onSelectProject={handleSelectProject}
-        />
-        <CreateProjectButton onProjectCreated={setProjectId} />
-        {project != null && <DeleteProjectButton project={project} />}
-      </div>
-      {project != null && (
-        <div className={css.projectCard} key={project.id}>
-          <h1 className={css.projectTitle}>{project.name}</h1>
-          <TaskList project={project} />
-          <CreateTaskButton project={project} />
-        </div>
-      )}
-    </Layout>
-  );
-}
-
-export default Home;

package/templates/template-tutorial-todo-app/src/Layout.module.css

@@ -1,16 +0,0 @@
-.header {
-  display: flex;
-  align-items: center;
-  margin: 2em;
-}
-
-.logo {
-  height: 4em;
-  align-items: center;
-  margin-right: 1em;
-}
-
-.title {
-  font-weight: 600;
-  font-size: 1.5em;
-}

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

@@ -1,21 +0,0 @@
-import todoAppLogo from "/todo-app.svg";
-import React from "react";
-import css from "./Layout.module.css";
-
-interface LayoutProps {
-  children?: React.ReactNode;
-}
-
-function Layout({ children }: LayoutProps) {
-  return (
-    <>
-      <div className={css.header}>
-        <img src={todoAppLogo} className={css.logo} alt="Todo App logo" />
-        <div className={css.title}>Ontology SDK Tutorial - Todo App</div>
-      </div>
-      {children}
-    </>
-  );
-}
-
-export default Layout;

package/templates/template-tutorial-todo-app/src/Login.module.css

@@ -1,5 +0,0 @@
-.loginButton {
-  display: flex;
-  justify-content: center;
-  margin: 2em;
-}

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

@@ -1,42 +0,0 @@
-import { useCallback, useState } from "react";
-import { Navigate } from "react-router-dom";
-import client from "./client";
-import Layout from "./Layout";
-import css from "./Login.module.css";
-
-function Login() {
-  const [isLoggingIn, setIsLoggingIn] = useState(false);
-  const [error, setError] = useState<string | undefined>(undefined);
-  const token = client.auth.token;
-
-  const handleLogin = useCallback(async () => {
-    setIsLoggingIn(true);
-    try {
-      // Initiate the OAuth flow, which will redirect the user to log into Foundry
-      // Once the login has completed, the user will be redirected back to the route defined via the
-      // FOUNDRY_REDIRECT_URL variable in .env.development
-      await client.auth.signIn();
-    } catch (e: unknown) {
-      console.error(e);
-      setError((e as Error).message ?? e);
-    }
-  }, []);
-
-  // If the token exists but a user tries to load /login, redirect to the home page instead
-  if (token != null) {
-    return <Navigate to="/" replace={true} />;
-  }
-
-  return (
-    <Layout>
-      <div className={css.loginButton}>
-        <button onClick={handleLogin}>
-          {isLoggingIn ? "Logging in…" : "Log in "}
-        </button>
-      </div>
-      {error && <div>Unable to log in: {error}</div>}
-    </Layout>
-  );
-}
-
-export default Login;

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

@@ -1,40 +0,0 @@
-import { ChangeEvent, useCallback } from "react";
-import { MockProject } from "./mocks";
-
-interface ProjectSelectProps {
-  project: MockProject | undefined;
-  projects: MockProject[];
-  onSelectProject: (project: MockProject) => void;
-}
-
-function ProjectSelect({
-  project,
-  projects,
-  onSelectProject,
-}: ProjectSelectProps) {
-  const handleSelect = useCallback(
-    (e: ChangeEvent<HTMLSelectElement>) => {
-      const nextProject = projects.find((p) => `${p.id}` === e.target.value);
-      if (nextProject != null) {
-        onSelectProject(nextProject);
-      }
-    },
-    [projects, onSelectProject],
-  );
-
-  return (
-    <select value={project?.id} onChange={handleSelect}>
-      <option hidden disabled selected>
-        -- select a project --
-      </option>
-
-      {projects.map((p) => (
-        <option key={p.id} value={p.id}>
-          {p.name}
-        </option>
-      ))}
-    </select>
-  );
-}
-
-export default ProjectSelect;

package/templates/template-tutorial-todo-app/src/TaskList.module.css

@@ -1,6 +0,0 @@
-.taskList {
-  list-style: none;
-  padding: 0;
-  margin-top: 1em;
-  margin-bottom: 1em;
-}

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

@@ -1,38 +0,0 @@
-import { MockProject } from "./mocks";
-import css from "./TaskList.module.css";
-import TaskListItem from "./TaskListItem";
-import { useProjectTasks } from "./useProjectTasks";
-
-interface TaskListProps {
-  project: MockProject;
-}
-
-function TaskList({ project }: TaskListProps) {
-  const {
-    tasks,
-    isLoading: isLoadingTasks,
-    isError: isErrorTasks,
-    deleteTask,
-  } = useProjectTasks(project);
-
-  if (isErrorTasks) {
-    return <div className={css.taskList}>Error loading tasks!</div>;
-  } else if (isLoadingTasks) {
-    return null;
-  }
-
-  const data = tasks ?? [];
-  if (data.length === 0) {
-    return <div className={css.taskList}>No tasks found</div>;
-  }
-
-  return (
-    <ul className={css.taskList}>
-      {data.map((task) => (
-        <TaskListItem key={task.id} task={task} deleteTask={deleteTask} />
-      ))}
-    </ul>
-  );
-}
-
-export default TaskList;

package/templates/template-tutorial-todo-app/src/TaskListItem.module.css

@@ -1,3 +0,0 @@
-.label {
-  margin-left: 0.5em;
-}

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

@@ -1,37 +0,0 @@
-import { useCallback, useState } from "react";
-import { MockTask } from "./mocks";
-import css from "./TaskListItem.module.css";
-
-interface TaskListItemProps {
-  task: MockTask;
-  deleteTask: (task: MockTask) => Promise<void>;
-}
-
-function TaskListItem({ task, deleteTask }: TaskListItemProps) {
-  const [isDeleting, setIsDeleting] = useState(false);
-  const handleClick = useCallback(async () => {
-    setIsDeleting(true);
-    try {
-      await deleteTask(task);
-    } finally {
-      setIsDeleting(false);
-    }
-  }, [deleteTask, task]);
-
-  return (
-    <li>
-      <input
-        id={`${task.id}`}
-        type="checkbox"
-        onClick={handleClick}
-        checked={isDeleting}
-        disabled={isDeleting}
-      />
-      <label className={css.label} htmlFor={`${task.id}`}>
-        {task.title}
-      </label>
-    </li>
-  );
-}
-
-export default TaskListItem;

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

@@ -1,31 +0,0 @@
-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

@@ -1,80 +0,0 @@
-: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-container {
-  display: flex;
-  flex: 1;
-  align-items: center;
-}
-
-#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;
-  flex-direction: column;
-  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

@@ -1,33 +0,0 @@
-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

@@ -1,137 +0,0 @@
-export interface MockProject {
-  __apiName: string;
-  __primaryKey: string;
-  id: string;
-  name: string;
-  tasks: MockTask[];
-}
-
-export interface MockTask {
-  __apiName: string;
-  __primaryKey: string;
-  id: string;
-  title: string;
-}
-
-const projects: MockProject[] = [
-  {
-    __apiName: "MockProject",
-    __primaryKey: "1",
-    id: "1",
-    name: "Fake Project",
-    tasks: [
-      {
-        __apiName: "MockTask",
-        __primaryKey: "1",
-        id: "1",
-        title: "Try to",
-      },
-      {
-        __apiName: "MockTask",
-        __primaryKey: "2",
-        id: "2",
-        title: "Implement this",
-      },
-      {
-        __apiName: "MockTask",
-        __primaryKey: "3",
-        id: "3",
-        title: "With the Ontology SDK!",
-      },
-    ],
-  },
-  {
-    __apiName: "MockProject",
-    __primaryKey: "2",
-    id: "2",
-    name: "Yet Another Fake Project",
-    tasks: [
-      {
-        __apiName: "MockTask",
-        __primaryKey: "4",
-        id: "4",
-        title: "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<MockProject[]> {
-  await delay();
-  const result = [...projects];
-  result.sort((p1, p2) => p1.name.localeCompare(p2.name));
-  return result;
-}
-
-async function createProject({
-  name,
-}: {
-  name: string;
-}): Promise<MockTask["__primaryKey"]> {
-  await delay();
-  const id = randomId();
-  projects.push({
-    __apiName: "MockProject",
-    __primaryKey: id,
-    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({
-  title,
-  projectId,
-}: {
-  title: string;
-  projectId: string;
-}): Promise<MockTask["__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({ __apiName: "MockTask", __primaryKey: id, id, title });
-  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);
-    }
-  }
-}
-
-const Mocks = {
-  getProjects,
-  createProject,
-  deleteProject,
-  createTask,
-  deleteTask,
-};
-
-export default Mocks;

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

@@ -1,55 +0,0 @@
-import { useCallback } from "react";
-import useSWR from "swr";
-import Mocks, { MockProject, MockTask } from "./mocks";
-
-export function useProjectTasks(project: MockProject | undefined) {
-  const { data, isLoading, isValidating, error, mutate } = useSWR<MockTask[]>(
-    project != null ? `projects/${project.id}/tasks` : null,
-    // Try to implement this with the Ontology SDK!
-    async () => {
-      if (project == null) {
-        return [];
-      }
-      return project.tasks;
-    },
-  );
-
-  const createTask: (
-    title: string,
-  ) => Promise<MockTask["__primaryKey"] | undefined> = useCallback(
-    async (title) => {
-      if (project == null) {
-        return undefined;
-      }
-      // Try to implement this with the Ontology SDK!
-      const id = await Mocks.createTask({
-        title,
-        projectId: project.__primaryKey,
-      });
-      await mutate();
-      return id;
-    },
-    [project, mutate],
-  );
-
-  const deleteTask: (task: MockTask) => 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

@@ -1,43 +0,0 @@
-import { useCallback } from "react";
-import useSWR from "swr";
-import Mocks, { MockProject } from "./mocks";
-
-function useProjects() {
-  const { data, isLoading, isValidating, error, mutate } = useSWR<
-    MockProject[]
-  >("projects", async () => {
-    // Try to implement this with the Ontology SDK!
-    return Mocks.getProjects();
-  });
-
-  const createProject: (name: string) => Promise<MockProject["__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: MockProject) => 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

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

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

@@ -1,25 +0,0 @@
-{
-  "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" }]
-}