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

package/templates/template-react/src/index.css

@@ -1,81 +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: 0 auto;
-  padding: 2rem;
-  text-align: center;
-}
-
-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-react/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-react/src/vite-env.d.ts

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

package/templates/template-react/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-react/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-react/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 Todo 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_USE_FLAT_CONFIG=false 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;

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

@@ -1,56 +0,0 @@
-import { ChangeEvent, useCallback, useEffect, useState } from "react";
-import Dialog from "./Dialog";
-import useProjects from "./useProjects";
-
-interface CreateProjectDialogProps {
-  isOpen: boolean;
-  onClose: () => void;
-  onProjectCreated?: (projectId: string) => void;
-}
-
-function CreateProjectDialog({
-  isOpen,
-  onClose,
-  onProjectCreated,
-}: CreateProjectDialogProps) {
-  const { createProject } = useProjects();
-
-  const [name, setName] = useState<string>("New project");
-  const handleChange = useCallback(
-    (e: ChangeEvent<HTMLInputElement>) => setName(e.target.value),
-    [],
-  );
-
-  useEffect(() => setName("New project"), [isOpen]);
-
-  const [isCreating, setIsCreating] = useState(false);
-  const handleSubmit = useCallback(async () => {
-    setIsCreating(true);
-    try {
-      const projectId = await createProject(name);
-      onProjectCreated?.(projectId);
-    } finally {
-      setIsCreating(false);
-      onClose();
-    }
-  }, [onProjectCreated, onClose, createProject, name]);
-
-  return (
-    <Dialog
-      isOpen={isOpen}
-      buttons={[
-        <button disabled={isCreating} onClick={handleSubmit}>
-          Create project
-        </button>,
-        <button disabled={isCreating} onClick={onClose}>
-          Cancel
-        </button>,
-      ]}
-    >
-      <label>
-        Project name: <input type="text" value={name} onChange={handleChange} />
-      </label>
-    </Dialog>
-  );
-}
-export default CreateProjectDialog;

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

@@ -1,35 +0,0 @@
-import { useCallback, useState } from "react";
-import CreateTaskDialog from "./CreateTaskDialog";
-import { MockProject } from "./mocks";
-import { useProjectTasks } from "./useProjectTasks";
-
-interface CreateTaskButtonProps {
-  project: MockProject;
-}
-
-function CreateTaskButton({ project }: CreateTaskButtonProps) {
-  const { isLoading: isLoadingTasks, isError: isErrorTasks } = useProjectTasks(
-    project,
-  );
-
-  const [isOpen, setIsOpen] = useState(false);
-  const handleOpen = useCallback(() => setIsOpen(true), []);
-  const handleClose = useCallback(() => setIsOpen(false), []);
-
-  if (isLoadingTasks || isErrorTasks) {
-    return null;
-  }
-
-  return (
-    <>
-      <button onClick={handleOpen}>Create Task</button>
-      <CreateTaskDialog
-        project={project}
-        isOpen={isOpen}
-        onClose={handleClose}
-      />
-    </>
-  );
-}
-
-export default CreateTaskButton;

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

@@ -1,52 +0,0 @@
-import { ChangeEvent, useCallback, useEffect, useState } from "react";
-import Dialog from "./Dialog";
-import { MockProject } from "./mocks";
-import { useProjectTasks } from "./useProjectTasks";
-
-interface CreateTaskDialogProps {
-  project: MockProject;
-  isOpen: boolean;
-  onClose: () => void;
-}
-
-function CreateTaskDialog({ project, isOpen, onClose }: CreateTaskDialogProps) {
-  const { createTask } = useProjectTasks(project);
-
-  const [name, setName] = useState<string>("New task");
-  const handleChange = useCallback(
-    (e: ChangeEvent<HTMLInputElement>) => setName(e.target.value),
-    [],
-  );
-
-  useEffect(() => setName("New task"), [isOpen]);
-
-  const [isCreating, setIsCreating] = useState(false);
-  const handleSubmit = useCallback(async () => {
-    setIsCreating(true);
-    try {
-      await createTask(name);
-    } finally {
-      setIsCreating(false);
-      onClose();
-    }
-  }, [onClose, createTask, name]);
-
-  return (
-    <Dialog
-      isOpen={isOpen}
-      buttons={[
-        <button disabled={isCreating} onClick={handleSubmit}>
-          Create task
-        </button>,
-        <button disabled={isCreating} onClick={onClose}>
-          Cancel
-        </button>,
-      ]}
-    >
-      <label>
-        Task name: <input type="text" value={name} onChange={handleChange} />
-      </label>
-    </Dialog>
-  );
-}
-export default CreateTaskDialog;

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

@@ -1,34 +0,0 @@
-import { useCallback, useState } from "react";
-import DeleteProjectDialog from "./DeleteProjectDialog";
-import { MockProject } from "./mocks";
-import useProjects from "./useProjects";
-
-interface DeleteProjectButtonProps {
-  project: MockProject;
-}
-
-function DeleteProjectButton({ project }: DeleteProjectButtonProps) {
-  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}>Delete Project</button>
-      <DeleteProjectDialog
-        project={project}
-        isOpen={isOpen}
-        onClose={handleClose}
-      />
-    </>
-  );
-}
-
-export default DeleteProjectButton;

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

@@ -1,46 +0,0 @@
-import { useCallback, useState } from "react";
-import Dialog from "./Dialog";
-import { MockProject } from "./mocks";
-import useProjects from "./useProjects";
-
-interface DeleteProjectDialogProps {
-  project: MockProject;
-  isOpen: boolean;
-  onClose: () => void;
-}
-
-function DeleteProjectDialog({
-  project,
-  isOpen,
-  onClose,
-}: DeleteProjectDialogProps) {
-  const { deleteProject } = useProjects();
-
-  const [isDeleting, setIsDeleting] = useState(false);
-  const handleSubmit = useCallback(async () => {
-    setIsDeleting(true);
-    try {
-      await deleteProject(project);
-    } finally {
-      setIsDeleting(false);
-      onClose();
-    }
-  }, [deleteProject, onClose, project]);
-
-  return (
-    <Dialog
-      isOpen={isOpen}
-      buttons={[
-        <button disabled={isDeleting} onClick={handleSubmit}>
-          Delete
-        </button>,
-        <button disabled={isDeleting} onClick={onClose}>
-          Cancel
-        </button>,
-      ]}
-    >
-      Are you sure you want to delete this project?
-    </Dialog>
-  );
-}
-export default DeleteProjectDialog;

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

@@ -1,5 +0,0 @@
-.buttons {
-  display: flex;
-  gap: 1em;
-  margin-top: 1em;
-}

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

@@ -1,19 +0,0 @@
-import { PropsWithChildren } from "react";
-import css from "./Dialog.module.css";
-
-interface DialogProps {
-  isOpen: boolean;
-  buttons?: React.ReactElement[];
-}
-
-function Dialog({ children, isOpen, buttons }: PropsWithChildren<DialogProps>) {
-  return (
-    <dialog open={isOpen}>
-      {children}
-      {buttons != null && buttons.length > 0 && (
-        <div className={css.buttons}>{buttons}</div>
-      )}
-    </dialog>
-  );
-}
-export default Dialog;

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

@@ -1,35 +0,0 @@
-.tutorialBannerWrapper {
-  display: flex;
-  margin: 2em;
-}
-
-.tutorialBanner {
-  flex: 1;
-  width: 0;
-  background: #646cff;
-  color: #ffffff;
-  border-radius: 1em;
-  padding: 1em;
-  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
-}
-
-.tutorialBannerTitle {
-  margin-top: 0;
-  font-weight: 600;
-}
-
-.projectSelect {
-  display: flex;
-  align-items: center;
-  gap: 1em;
-  margin: 2em;
-  font-weight: 600;
-}
-
-.projectCard {
-  margin: 2em;
-}
-
-.projectTitle {
-  font-size: 1.5em;
-}