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

package/templates/template-react/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-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-aip-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-aip-app/README.md.hbs

@@ -1,34 +0,0 @@
-# {{project}}
-
-
-This project was generated with `@osdk/create-app` and is intended to be used alongside the Developer Console tutorial for creating an AIP Logic backed 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-aip-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-aip-app.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Ontology SDK Tutorial - To do AIP 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-aip-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.16.0",
-    "@typescript-eslint/parser": "^7.16.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-aip-app/public/aip-icon.svg

@@ -1,3 +0,0 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M7.99949 1H2.06186C0.477294 1 -0.513276 2.66624 0.278565 3.99968L2.65409 8L0.278565 12.0003C-0.513276 13.3338 0.477295 15 2.06186 15H13.9381C15.5227 15 16.5133 13.3338 15.7214 12.0003L13.3459 8L15.7214 3.99968C16.5133 2.66624 15.5227 1 13.9381 1H8.00051H7.99949ZM6.21704 2.00008H2.06186C1.26957 2.00008 0.774289 2.8332 1.17021 3.49992L3.2483 6.99937L6.21704 2.00008ZM3.2483 9.00063L1.17021 12.5001C0.77429 13.1668 1.26957 13.9999 2.06186 13.9999H6.21704L3.2483 9.00063ZM9.78296 13.9999H13.9381C14.7304 13.9999 15.2257 13.1668 14.8298 12.5001L12.7517 9.00063L9.78296 13.9999ZM12.1575 8L8.89164 13.4996C8.4955 14.1667 7.5045 14.1667 7.10836 13.4996L3.84251 8L7.10836 2.5004C7.5045 1.83331 8.49551 1.83331 8.89165 2.5004L12.1575 8ZM12.7517 6.99936L14.8298 3.49992C15.2257 2.8332 14.7304 2.00008 13.9381 2.00008H9.78296L12.7517 6.99936Z" fill="white"/>
-</svg>

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

@@ -1,19 +0,0 @@
-<svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_3572_62195)">
-<rect opacity="0.1" width="50" height="50" fill="#9881F3"/>
-<rect x="7" y="11" width="12" height="12" rx="2" fill="#7961DB"/>
-<rect x="7.5" y="11.5" width="11" height="11" rx="1.5" stroke="white" stroke-opacity="0.1"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M16 14.375C15.79 14.375 15.6025 14.4575 15.4675 14.5925L12.25 17.8175L10.5325 16.0925C10.3975 15.9575 10.21 15.875 10 15.875C9.5875 15.875 9.25 16.2125 9.25 16.625C9.25 16.835 9.3325 17.0225 9.4675 17.1575L11.7175 19.4075C11.8525 19.5425 12.04 19.625 12.25 19.625C12.46 19.625 12.6475 19.5425 12.7825 19.4075L16.5325 15.6575C16.6675 15.5225 16.75 15.335 16.75 15.125C16.75 14.7125 16.4125 14.375 16 14.375Z" fill="white"/>
-<rect opacity="0.5" x="22" y="15" width="12" height="5" rx="2.5" fill="#634DBF"/>
-<rect opacity="0.5" x="36" y="15" width="9" height="5" rx="2.5" fill="#634DBF"/>
-<rect x="7.5" y="28.5" width="11" height="11" rx="1.5" fill="#A79BDA" fill-opacity="0.1"/>
-<rect x="7.5" y="28.5" width="11" height="11" rx="1.5" stroke="#A39CC1"/>
-<rect opacity="0.5" x="23" y="32" width="6" height="5" rx="2.5" fill="#634DBF"/>
-<path opacity="0.5" d="M31 34.5C31 33.1193 32.3228 32 33.9545 32H41.0455C42.6772 32 44 33.1193 44 34.5C44 35.8807 42.6772 37 41.0455 37H33.9545C32.3228 37 31 35.8807 31 34.5Z" fill="#634DBF"/>
-</g>
-<defs>
-<clipPath id="clip0_3572_62195">
-<rect width="50" height="50" rx="4" fill="white"/>
-</clipPath>
-</defs>
-</svg>

package/templates/template-tutorial-todo-aip-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-aip-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-aip-app/src/CreateProjectButton.module.css

@@ -1,3 +0,0 @@
-.button {
-  border: 1px solid #ccc;
-}

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

@@ -1,36 +0,0 @@
-import { useCallback, useState } from "react";
-import css from "./CreateProjectButton.module.css";
-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} className={css.button}>
-        Create Project
-      </button>
-      <CreateProjectDialog
-        isOpen={isOpen}
-        onClose={handleClose}
-        onProjectCreated={onProjectCreated}
-      />
-    </>
-  );
-}
-
-export default CreateProjectButton;

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

@@ -1,15 +0,0 @@
-.project {
-    display: flex;
-    flex-direction: column;
-    align-content: space-between;
-    gap: 10px;
-}
-.label {
-  display: flex;
-  justify-content: space-between;
-  gap: 5px;
-}
-
-.button {
-  border: 1px solid #ccc;
-}

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

@@ -1,74 +0,0 @@
-import type { ChangeEvent } from "react";
-import { useCallback, useEffect, useState } from "react";
-import css from "./CreateProjectDialog.module.css";
-
-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 handleChangeProjectName = 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={onClose}
-          key="cancel"
-          className={css.button}
-        >
-          Cancel
-        </button>,
-        <button
-          disabled={isCreating}
-          onClick={handleSubmit}
-          key="create"
-          className={css.button}
-        >
-          Create project
-        </button>,
-      ]}
-    >
-      <div className={css.project}>
-        <label className={css.label}>
-          Project name:{" "}
-          <input type="text" value={name} onChange={handleChangeProjectName} />
-        </label>
-      </div>
-    </Dialog>
-  );
-}
-export default CreateProjectDialog;

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

@@ -1,3 +0,0 @@
-.button {
-  border: 1px solid #ccc;
-}

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

@@ -1,38 +0,0 @@
-import { useCallback, useState } from "react";
-import css from "./CreateTaskButton.module.css";
-import CreateTaskDialog from "./CreateTaskDialog";
-import type { MockProject } from "./mocks";
-import { useProjectTasks } from "./useProjectTasks";
-
-interface CreateTaskButtonProps {
-  project: MockProject;
-  onTaskCreated: (taskId: string) => void;
-}
-
-function CreateTaskButton({ project, onTaskCreated }: 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} className={css.button}>Create Task</button>
-      <CreateTaskDialog
-        project={project}
-        isOpen={isOpen}
-        onClose={handleClose}
-        onTaskCreated={onTaskCreated}
-      />
-    </>
-  );
-}
-
-export default CreateTaskButton;

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

@@ -1,66 +0,0 @@
-.task {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    grid-template-rows: auto min-content;
-    gap: 10px;
-    width: 500px;
-}
-.label {
-  display: flex;
-  gap: 5px;
-  resize: none;
-}
-
-.input {
-  width: 300px;
-  border: 1px solid gray;
-  border-radius: 5px;
-}
-
-.textArea {
-  width: 300px;
-  resize: vertical;
-  border: 1px solid gray;
-  border-radius: 5px;
-  padding: 5px;
-}
-
-.aip {
-  background-color: #7961DB;
-  border: 1px solid #ccc;
-  padding: 2px 5px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.processing {
-  cursor: progress;
-}
-
-.image {
-  width: 16px;
-  height: 16px;
-}
-
-.container {
-  display: flex;
-  align-items:flex-start;
-  gap: 5px;
-}
-
-.dialogContainer {
-  position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  background-color: rgba(0, 0, 0, 0.5); /* Optional: for dimmed background */
-}
-
-.button {
-  border: 1px solid #ccc;
-}

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

@@ -1,140 +0,0 @@
-import aipLogo from "/aip-icon.svg";
-import type { ChangeEvent } from "react";
-import { useCallback, useEffect, useRef, useState } from "react";
-import css from "./CreateTaskDialog.module.css";
-import Dialog from "./Dialog";
-import type { MockProject } from "./mocks";
-import { useProjectTasks } from "./useProjectTasks";
-
-interface CreateTaskDialogProps {
-  project: MockProject;
-  isOpen: boolean;
-  onClose: () => void;
-  onTaskCreated: (taskId: string) => void;
-}
-
-function CreateTaskDialog(
-  { project, isOpen, onClose, onTaskCreated }: CreateTaskDialogProps,
-) {
-  const { createTask, getRecommendedTaskDescription } = useProjectTasks(
-    project,
-  );
-
-  const [name, setName] = useState<string>("New task");
-  const [description, setDescription] = useState<string>("");
-  const [isProcessing, setIsProcessing] = useState<boolean>(false);
-  const [isCreating, setIsCreating] = useState(false);
-  const textAreaRef = useRef<HTMLTextAreaElement>(null);
-
-  const handleChangeTaskName = useCallback(
-    (e: ChangeEvent<HTMLInputElement>) => setName(e.target.value),
-    [],
-  );
-
-  const handleChangeTaskDescription = useCallback(
-    (e: ChangeEvent<HTMLTextAreaElement>) => setDescription(e.target.value),
-    [],
-  );
-
-  const handleTaskDescriptionRecommendation = useCallback(async () => {
-    setIsProcessing(true);
-    const recommendedDescription = await getRecommendedTaskDescription(name);
-    setDescription(recommendedDescription);
-    setIsProcessing(false);
-  }, [getRecommendedTaskDescription, name]);
-
-  useEffect(() => {
-    setName("New task");
-    setDescription("");
-  }, [isOpen]);
-  useEffect(() => {
-    if (textAreaRef.current) {
-      const textArea = textAreaRef.current;
-      textArea.style.height = "auto";
-      textArea.style.height = `${textArea.scrollHeight}px`;
-    }
-  }, [description]);
-
-  const handleSubmit = useCallback(async () => {
-    setIsCreating(true);
-    try {
-      const taskId = await createTask(name, description);
-      if (taskId != null) {
-        onTaskCreated(taskId);
-      }
-    } finally {
-      setIsCreating(false);
-      onClose();
-    }
-  }, [onClose, createTask, onTaskCreated, name, description]);
-
-  return (
-    <>
-      {isOpen && (
-        <div className={css.dialogContainer}>
-          <Dialog
-            isOpen={isOpen}
-            buttons={[
-              <button
-                disabled={isCreating}
-                onClick={onClose}
-                key="cancel"
-                className={css.button}
-              >
-                Cancel
-              </button>,
-              <button
-                disabled={isCreating}
-                onClick={handleSubmit}
-                key="create"
-                className={css.button}
-              >
-                Create task
-              </button>,
-            ]}
-          >
-            <div className={css.task}>
-              <label className={css.label}>
-                Task name:{" "}
-              </label>
-              <input
-                type="text"
-                value={name}
-                onChange={handleChangeTaskName}
-                className={css.input}
-              />
-
-              <label className={css.label}>
-                Task description:{" "}
-              </label>
-              <div className={css.container}>
-                <textarea
-                  ref={textAreaRef}
-                  value={description}
-                  onChange={handleChangeTaskDescription}
-                  className={css.textArea}
-                  rows={2}
-                />
-                <button
-                  disabled={isProcessing}
-                  className={`${css.aip} ${isProcessing ? css.processing : ""}`}
-                  title="Click here to get AIP task description recommendation"
-                  type="button"
-                  onClick={handleTaskDescriptionRecommendation}
-                >
-                  <img
-                    src={aipLogo}
-                    alt="AIP"
-                    className={css.image}
-                  />
-                </button>
-              </div>
-            </div>
-          </Dialog>
-        </div>
-      )}
-    </>
-  );
-}
-
-export default CreateTaskDialog;

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

@@ -1,3 +0,0 @@
-.button {
-  border: 1px solid #ccc;
-}