@osdk/create-app 0.17.0-beta.2 → 0.17.0-beta.4

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

@@ -1,75 +0,0 @@
-:root {
-  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
-  line-height: 1.5;
-  font-weight: 400;
-
-  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;
-  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-aip-app/src/main.tsx

@@ -1,36 +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 />,
-    },
-  ],
-  { basename: import.meta.env.BASE_URL },
-);
-
-ReactDOM.createRoot(document.getElementById("root")!).render(
-  <RouterProvider router={router} />,
-);

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

@@ -1,187 +0,0 @@
-export interface MockProject {
-  $apiName: string;
-  $primaryKey: string;
-  id: string;
-  name: string;
-  description: string;
-  tasks: MockTask[];
-}
-
-export interface MockTask {
-  $apiName: string;
-  $primaryKey: string;
-  id: string;
-  title: string;
-  description: string;
-}
-
-const projects: MockProject[] = [
-  {
-    $apiName: "MockProject",
-    $primaryKey: "1",
-    id: "1",
-    name: "Mock project",
-    description: "This is a mock description",
-    tasks: [
-      {
-        $apiName: "MockTask",
-        $primaryKey: "1",
-        id: "1",
-        title: "Try to",
-        description: "task description 1",
-      },
-      {
-        $apiName: "MockTask",
-        $primaryKey: "2",
-        id: "2",
-        title: "Implement this",
-        description: "task description 2",
-      },
-      {
-        $apiName: "MockTask",
-        $primaryKey: "3",
-        id: "3",
-        title: "With the Ontology SDK!",
-        description: "task description 3",
-      },
-    ],
-  },
-  {
-    $apiName: "MockProject",
-    $primaryKey: "2",
-    id: "2",
-    name: "Yet another mock project",
-    description: "This is another mock description",
-    tasks: [
-      {
-        $apiName: "MockTask",
-        $primaryKey: "4",
-        id: "4",
-        title: "More tasks here",
-        description: "More task description",
-      },
-    ],
-  },
-];
-
-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,
-  description = "",
-}: {
-  name: string;
-  description?: string;
-}): Promise<MockProject["$primaryKey"]> {
-  await delay();
-  const id = randomId();
-  projects.push({
-    $apiName: "MockProject",
-    $primaryKey: id,
-    id,
-    name,
-    description,
-    tasks: [],
-  });
-  return id;
-}
-
-async function getRecommendedProjectDescription(
-  project: MockProject,
-): Promise<string> {
-  await delay();
-  if (project.tasks.length === 0) {
-    throw new Error("Project description recommendation requires tasks");
-  }
-  return `AIP Logic mock description for project`;
-}
-
-async function updateProjectDescription(
-  project: MockProject,
-  description: string,
-): Promise<void> {
-  await delay();
-  project.description = description;
-}
-
-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,
-  description = "",
-  projectId,
-}: {
-  title: string;
-  description: 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,
-    description,
-  });
-  return id;
-}
-
-async function getRecommendedTaskDescription(
-  taskName: string,
-): Promise<string> {
-  await delay();
-  if (taskName.length === 0) {
-    throw new Error("Task name must not be empty");
-  }
-  return `Mock AIP description for task`;
-}
-
-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,
-  getRecommendedProjectDescription,
-  deleteProject,
-  createTask,
-  deleteTask,
-  getRecommendedTaskDescription,
-  updateProjectDescription,
-};
-
-export default Mocks;

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

@@ -1,75 +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,
-    description: string,
-  ) => Promise<MockTask["$primaryKey"] | undefined> = useCallback(
-    async (title: string, description: string) => {
-      if (project == null) {
-        return undefined;
-      }
-      // Try to implement this with the Ontology SDK!
-      const id = await Mocks.createTask({
-        title,
-        description,
-        projectId: project.$primaryKey,
-      });
-      await mutate();
-      return id;
-    },
-    [project, mutate],
-  );
-
-  const deleteTask: (task: MockTask) => Promise<void> = useCallback(
-    async (task) => {
-      if (project == null) {
-        return;
-      }
-      await sleep(1000);
-      // Try to implement this with the Ontology SDK!
-      await Mocks.deleteTask(task.$primaryKey);
-      await mutate();
-    },
-    [project, mutate],
-  );
-
-  const getRecommendedTaskDescription: (taskName: string) => Promise<string> =
-    useCallback(
-      async (taskName: string) => {
-        // Try to implement this with the Ontology SDK!
-        const recommendedTaskDescription = await Mocks
-          .getRecommendedTaskDescription(taskName);
-        await mutate();
-        return recommendedTaskDescription;
-      },
-      [mutate],
-    );
-
-  return {
-    tasks: data,
-    isLoading,
-    isValidating,
-    isError: error,
-    createTask,
-    deleteTask,
-    getRecommendedTaskDescription,
-  };
-}
-
-function sleep(ms: number) {
-  return new Promise(resolve => setTimeout(resolve, ms));
-}

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

@@ -1,58 +0,0 @@
-import { useCallback } from "react";
-import useSWR from "swr";
-import type { MockProject } from "./mocks";
-import Mocks 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: string) => {
-      // Try to implement this with the Ontology SDK!
-      const id = await Mocks.createProject({ name });
-      await mutate();
-      return id;
-    },
-    [mutate],
-  );
-
-  const updateProjectDescription: (
-    project: MockProject,
-  ) => Promise<void> = useCallback(
-    async (project) => {
-      // Try to implement this with the Ontology SDK!
-      const description = await Mocks.getRecommendedProjectDescription(project);
-      await Mocks.updateProjectDescription(project, description);
-      await mutate();
-    },
-    [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,
-    updateProjectDescription,
-  };
-}
-
-export default useProjects;

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

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

package/templates/template-tutorial-todo-aip-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" }]
-}

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

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

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

@@ -1,19 +0,0 @@
-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}}
-  },
-});

package/templates/template-tutorial-todo-app/.eslintrc.cjs

@@ -1,18 +0,0 @@
-module.exports = {
-  root: true,
-  env: { browser: true, es2020: true },
-  extends: [
-    "eslint:recommended",
-    "plugin:@typescript-eslint/recommended",
-    "plugin:react-hooks/recommended",
-  ],
-  ignorePatterns: ["dist", ".eslintrc.cjs"],
-  parser: "@typescript-eslint/parser",
-  plugins: ["react-refresh"],
-  rules: {
-    "react-refresh/only-export-components": [
-      "warn",
-      { allowConstantExport: true },
-    ],
-  },
-};

package/templates/template-tutorial-todo-app/README.md.hbs

@@ -1,33 +0,0 @@
-# {{project}}
-
-This project was generated with `@osdk/create-app` and is intended to be used alongside the Developer Console tutorial for creating a To Do App against a reference Ontology.
-
-## Developing
-
-Run the following command or equivalent with your preferred package manager to start a local development server on `http://localhost:8080`:
-
-```sh
-npm run dev
-```
-
-Development configuration is stored in `.env.development`.
-
-{{#if corsProxy}}
-In order to make API requests to Foundry, a CORS proxy has been set up for local development which may be removed if the stack is configured to allow `http://localhost:8080` to load resources. The configured OAuth client must also allow `http://localhost:8080/auth/callback` as a redirect URL.
-{{else}}
-In order to make API requests to Foundry, CORS must be configured for the stack to allow `http://localhost:8080` to load resources. The configured OAuth client must also allow `http://localhost:8080/auth/callback` as a redirect URL.
-{{/if}}
-
-## Deploying
-
-Run the following command or equivalent with your preferred package manager to create a production build of your application:
-
-```sh
-npm run build
-```
-
-Production configuration is stored in `.env.production`.
-
-If you did not fill in the URL your production application will be hosted on you will need to fill in the `VITE_FOUNDRY_REDIRECT_URL` in `.env.production`.
-
-In order to make API requests to Foundry, CORS must be configured for the stack to allow the production origin to load resources. The configured OAuth client must also allow the production origin auth callback as a redirect URL.

package/templates/template-tutorial-todo-app/index.html

@@ -1,15 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/todo-app.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Ontology SDK Tutorial - Todo App</title>
-  </head>
-  <body>
-    <div id="root-container">
-      <div id="root"></div>
-    </div>
-    <script type="module" src="/src/main.tsx"></script>
-  </body>
-</html>

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

@@ -1,31 +0,0 @@
-{
-  "name": "{{project}}",
-  "private": true,
-  "version": "0.0.0",
-  "type": "module",
-  "scripts": {
-    "dev": "vite",
-    "build": "tsc && vite build",
-    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
-    "preview": "vite preview"
-  },
-  "dependencies": {
-    "{{osdkPackage}}": "latest",
-    "react": "^18",
-    "react-dom": "^18",
-    "react-router-dom": "^6.23.1",
-    "swr": "^2.2.5"
-  },
-  "devDependencies": {
-    "@types/react": "^18",
-    "@types/react-dom": "^18",
-    "@typescript-eslint/eslint-plugin": "^7.8.0",
-    "@typescript-eslint/parser": "^7.8.0",
-    "@vitejs/plugin-react": "^4.2.0",
-    "eslint": "^8.57.0",
-    "eslint-plugin-react-hooks": "^4.6.2",
-    "eslint-plugin-react-refresh": "^0.4.6",
-    "typescript": "^5.2.2",
-    "vite": "^5.2.11"
-  }
-}

package/templates/template-tutorial-todo-app/public/todo-app.svg

@@ -1,4 +0,0 @@
-<svg width="128" height="128" viewBox="0 0 128 128" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect width="128" height="128" rx="16" fill="#FBB360"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M28 82V94H40V82H28ZM22 70H46C49.3 70 52 72.7 52 76V100C52 103.3 49.3 106 46 106H22C18.7 106 16 103.3 16 100V76C16 72.7 18.7 70 22 70ZM76 34H106C109.3 34 112 36.7 112 40C112 43.3 109.3 46 106 46H76C72.7 46 70 43.3 70 40C70 36.7 72.7 34 76 34ZM52 22C55.3 22 58 24.7 58 28C58 29.68 57.34 31.18 56.26 32.26L38.26 56.26C37.18 57.34 35.68 58 34 58C32.32 58 30.82 57.34 29.74 56.26L17.74 44.26C16.66 43.18 16 41.68 16 40C16 36.7 18.7 34 22 34C23.68 34 25.18 34.66 26.26 35.74L34 43.54L47.74 23.74C48.82 22.66 50.32 22 52 22ZM76 82H106C109.3 82 112 84.7 112 88C112 91.3 109.3 94 106 94H76C72.7 94 70 91.3 70 88C70 84.7 72.7 82 76 82Z" fill="#77450D"/>
-</svg>

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

@@ -1,24 +0,0 @@
-import { useEffect, useState } from "react";
-import { useNavigate } from "react-router-dom";
-import client from "./client";
-
-/**
- * Component to render at `/auth/callback`
- * This calls signIn() again to save the token, and then navigates the user back to the home page.
- */
-function AuthCallback() {
-  const [error, setError] = useState<string | undefined>(undefined);
-  const navigate = useNavigate();
-
-  // This effect conflicts with React 18 strict mode in development
-  // https://react.dev/learn/synchronizing-with-effects#how-to-handle-the-effect-firing-twice-in-development
-  useEffect(() => {
-    client.auth
-      .signIn()
-      .then(() => navigate("/", { replace: true }))
-      .catch((e: unknown) => setError((e as Error).message ?? e));
-  }, [navigate]);
-  return <div>{error != null ? error : "Authenticating…"}</div>;
-}
-
-export default AuthCallback;

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

@@ -1,33 +0,0 @@
-import { useEffect, useState } from "react";
-import { Outlet, useNavigate } from "react-router-dom";
-import client from "./client";
-
-/**
- * A component that can be used to wrap routes that require authentication.
- * Nested routes may assume that a valid token is present.
- */
-function AuthenticatedRoute() {
-  const navigate = useNavigate();
-  const [token, setToken] = useState(client.auth.token);
-  useEffect(() => {
-    if (client.auth.token == null || client.auth.token.isExpired) {
-      client.auth
-        .refresh()
-        .then(() => {
-          setToken(client.auth.token);
-        })
-        .catch(() => {
-          // If we cannot refresh the token (i.e. the user is not logged in) we redirect to the login page
-          navigate("/login");
-        });
-    }
-  }, [navigate]);
-
-  if (token == null || token.isExpired) {
-    return null;
-  }
-
-  return <Outlet />;
-}
-
-export default AuthenticatedRoute;

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

@@ -1,33 +0,0 @@
-import { useCallback, useState } from "react";
-import CreateProjectDialog from "./CreateProjectDialog";
-import useProjects from "./useProjects";
-
-interface CreateProjectButtonProps {
-  onProjectCreated?: (projectId: string) => void;
-}
-
-function CreateProjectButton({ onProjectCreated }: CreateProjectButtonProps) {
-  const { isLoading: isLoadingProjects, isError: isErrorProjects } =
-    useProjects();
-
-  const [isOpen, setIsOpen] = useState(false);
-  const handleOpen = useCallback(() => setIsOpen(true), []);
-  const handleClose = useCallback(() => setIsOpen(false), []);
-
-  if (isLoadingProjects || isErrorProjects) {
-    return null;
-  }
-
-  return (
-    <>
-      <button onClick={handleOpen}>Create Project</button>
-      <CreateProjectDialog
-        isOpen={isOpen}
-        onClose={handleClose}
-        onProjectCreated={onProjectCreated}
-      />
-    </>
-  );
-}
-
-export default CreateProjectButton;