Skip to content

Commit

Permalink
Use @osdk/react in an example
Browse files Browse the repository at this point in the history
  • Loading branch information
ericanderson committed Nov 21, 2024
1 parent d48c76e commit e3eb40d
Show file tree
Hide file tree
Showing 13 changed files with 265 additions and 172 deletions.
3 changes: 3 additions & 0 deletions .monorepolint.config.mjs
Original file line number Diff line number Diff line change
Expand Up @@ -282,6 +282,7 @@ const formattedGeneratorHelper = (contents, ext) => async (context) => {
* outDir: string
* commonjs?: boolean
* singlePackageName?: string
* react?: boolean
* }} opts
* @returns {Parameters<import("@monorepolint/rules")["standardTsconfig"]>[0]["options"]}
*/
Expand All @@ -299,6 +300,7 @@ function getTsconfigOptions(baseTsconfigPath, opts) {
: {}),
rootDir: "src",
outDir: opts.outDir,
...(opts.react ? { jsx: "react" } : {}),
...(
opts.singlePackageName
? {
Expand Down Expand Up @@ -342,6 +344,7 @@ function standardPackageRules(shared, options) {
customTsconfigExcludes: options.customTsconfigExcludes,
skipTsconfigReferences: options.skipTsconfigReferences,
outDir: "build/esm",
react: options.vitestEnvironment === "happy-dom",
},
),
}),
Expand Down
1 change: 1 addition & 0 deletions examples/example-react-sdk-2.x/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@
"@osdk/client": "workspace:*",
"@osdk/e2e.generated.catchall": "workspace:*",
"@osdk/oauth": "workspace:*",
"@osdk/react": "workspace:*",
"react": "^18",
"react-dom": "^18",
"react-router-dom": "^6.23.1"
Expand Down
32 changes: 32 additions & 0 deletions examples/example-react-sdk-2.x/src/Home.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,39 @@ import { $Objects, $Actions, $Queries } from "@osdk/e2e.generated.catchall";
import css from "./Home.module.css";
import Layout from "./Layout";

// import { useOsdkClient } from "@osdk/react";
// import React from "react";
// import { Osdk } from "@osdk/client";

function Home() {

// const client = useOsdkClient();

// const [objects, setObjects] = React.useState<$Objects.Todo.OsdkInstance[]>();
// const [isLoading, setIsLoading] = React.useState(true);

// React.useEffect(() => {
// client($Objects.Todo).fetchPage().then((page) => {
// setObjects(page.data);
// setIsLoading(false);
// });
// }, []);

// if (isLoading) {
// return <Layout>Loading...</Layout>;
// } else {
// return (
// <Layout>
// <ul>
// {objects?.map((o) => (
// <li>{o.$primaryKey} - {o.$title}</li>
// ))}
// </ul>
// </Layout>
// )
// }


const objectApiNames = Object.keys($Objects);
const actionApiNames = Object.keys($Actions);
const queryApiNames = Object.keys($Queries);
Expand Down
49 changes: 49 additions & 0 deletions examples/example-react-sdk-2.x/src/createClientAndAuth.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
import "./index.css";
import type { Client } from "@osdk/client";
import { createClient } from "@osdk/client";
import { $ontologyRid } from "@osdk/e2e.generated.catchall";
import { createPublicOauthClient } from "@osdk/oauth";

function checkEnv(
value: string | undefined,
name: string,
): asserts value is string {
if (value == null) {
throw new Error(`Missing environment variable: ${name}`);
}
}

export default function createClientAndAuth() {
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;
const scopes = [
"api:ontologies-read",
"api:ontologies-write",
];

checkEnv(url, "VITE_FOUNDRY_API_URL");
checkEnv(clientId, "VITE_FOUNDRY_CLIENT_ID");
checkEnv(redirectUrl, "VITE_FOUNDRY_REDIRECT_URL");

const auth = createPublicOauthClient(
clientId,
url,
redirectUrl,
true,
undefined,
window.location.toString(),
scopes,
);

/**
* Initialize the client to interact with the Ontology SDK
*/
const client: Client = createClient(
url,
$ontologyRid,
auth,
);

return { client, auth }
}
26 changes: 8 additions & 18 deletions examples/example-react-sdk-2.x/src/main.tsx
Original file line number Diff line number Diff line change
@@ -1,24 +1,14 @@
import { OsdkProvider } from "@osdk/react";
import ReactDOM from "react-dom/client";
import { createBrowserRouter, RouterProvider } from "react-router-dom";
import AuthCallback from "./AuthCallback";
import Home from "./Home";
import { RouterProvider } from "react-router-dom";
import createClientAndAuth from "./createClientAndAuth";
import "./index.css";
import { router } from "./router";

const router = createBrowserRouter(
[
{
path: "/",
element: <Home />,
},
{
// This is the route defined in your application's redirect URL
path: "/auth/callback",
element: <AuthCallback />,
},
],
{ basename: import.meta.env.BASE_URL },
);
const { client } = createClientAndAuth();

ReactDOM.createRoot(document.getElementById("root")!).render(
<RouterProvider router={router} />,
<OsdkProvider client={client}>
<RouterProvider router={router} />,
</OsdkProvider>,
);
18 changes: 18 additions & 0 deletions examples/example-react-sdk-2.x/src/router.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
import { createBrowserRouter } from "react-router-dom";
import AuthCallback from "./AuthCallback";
import Home from "./Home";

export const router = createBrowserRouter(
[
{
path: "/",
element: <Home />,
},
{
// This is the route defined in your application's redirect URL
path: "/auth/callback",
element: <AuthCallback />,
},
],
{ basename: import.meta.env.BASE_URL },
);
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,8 @@
"dependencies": {
"{{osdkPackage}}": "latest",
"@osdk/client": "{{clientVersion}}",
"@osdk/oauth": "^1.0.0"
"@osdk/oauth": "^1.0.0",
"@osdk/react": "^0.2.1"
},
"devDependencies": {
"@types/node": "latest"
Expand Down
32 changes: 32 additions & 0 deletions packages/create-app.template.react.beta/templates/src/Home.tsx.hbs
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,39 @@ import { $Objects, $Actions, $Queries } from "{{osdkPackage}}";
import css from "./Home.module.css";
import Layout from "./Layout";

// import { useOsdkClient } from "@osdk/react";
// import React from "react";
// import { Osdk } from "@osdk/client";

function Home() {

// const client = useOsdkClient();

// const [objects, setObjects] = React.useState<$Objects.Todo.OsdkInstance[]>();
// const [isLoading, setIsLoading] = React.useState(true);

// React.useEffect(() => {
// client($Objects.Todo).fetchPage().then((page) => {
// setObjects(page.data);
// setIsLoading(false);
// });
// }, []);

// if (isLoading) {
// return <Layout>Loading...</Layout>;
// } else {
// return (
// <Layout>
// <ul>
// {objects?.map((o) => (
// <li>{o.$primaryKey} - {o.$title}</li>
// ))}
// </ul>
// </Layout>
// )
// }


const objectApiNames = Object.keys($Objects);
const actionApiNames = Object.keys($Actions);
const queryApiNames = Object.keys($Queries);
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
import "./index.css";
import type { Client } from "@osdk/client";
import { createClient } from "@osdk/client";
import { $ontologyRid } from "@osdk/e2e.generated.catchall";
import { createPublicOauthClient } from "@osdk/oauth";

function checkEnv(
value: string | undefined,
name: string,
): asserts value is string {
if (value == null) {
throw new Error(`Missing environment variable: ${name}`);
}
}

export default function createClientAndAuth() {
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;
{{#if scopes}}
const scopes = [
{{#each scopes}}
"{{this}}",
{{/each}}
];
{{/if}}

checkEnv(url, "VITE_FOUNDRY_API_URL");
checkEnv(clientId, "VITE_FOUNDRY_CLIENT_ID");
checkEnv(redirectUrl, "VITE_FOUNDRY_REDIRECT_URL");

const auth = createPublicOauthClient(
clientId,
url,
redirectUrl,
{{#if scopes}}
true,
undefined,
window.location.toString(),
scopes,
{{/if}}
);

/**
* Initialize the client to interact with the Ontology SDK
*/
const client: Client = createClient(
url,
$ontologyRid,
auth,
);

return { client, auth }
}
26 changes: 8 additions & 18 deletions packages/create-app.template.react.beta/templates/src/main.tsx
Original file line number Diff line number Diff line change
@@ -1,24 +1,14 @@
import { OsdkProvider } from "@osdk/react";
import ReactDOM from "react-dom/client";
import { createBrowserRouter, RouterProvider } from "react-router-dom";
import AuthCallback from "./AuthCallback";
import Home from "./Home";
import { RouterProvider } from "react-router-dom";
import createClientAndAuth from "./createClientAndAuth";
import "./index.css";
import { router } from "./router";

const router = createBrowserRouter(
[
{
path: "/",
element: <Home />,
},
{
// This is the route defined in your application's redirect URL
path: "/auth/callback",
element: <AuthCallback />,
},
],
{ basename: import.meta.env.BASE_URL },
);
const { client } = createClientAndAuth();

ReactDOM.createRoot(document.getElementById("root")!).render(
<RouterProvider router={router} />,
<OsdkProvider client={client}>
<RouterProvider router={router} />,
</OsdkProvider>,
);
18 changes: 18 additions & 0 deletions packages/create-app.template.react.beta/templates/src/router.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
import { createBrowserRouter } from "react-router-dom";
import AuthCallback from "./AuthCallback";
import Home from "./Home";

export const router = createBrowserRouter(
[
{
path: "/",
element: <Home />,
},
{
// This is the route defined in your application's redirect URL
path: "/auth/callback",
element: <AuthCallback />,
},
],
{ basename: import.meta.env.BASE_URL },
);
56 changes: 33 additions & 23 deletions packages/example-generator/src/run.ts
Original file line number Diff line number Diff line change
Expand Up @@ -255,29 +255,39 @@ const UPDATE_PACKAGE_JSON: Mutator = {
filePattern: "package.json",
mutate: (template, content, sdkVersion) => ({
type: "modify",
newContent: content.replace(
// Use locally generated SDK in the monorepo
"\"@osdk/e2e.generated.1.1.x\": \"latest\"",
"\"@osdk/e2e.generated.1.1.x\": \"workspace:*\"",
).replace(
// Use locally generated SDK in the monorepo
"\"@osdk/e2e.generated.catchall\": \"latest\"",
"\"@osdk/e2e.generated.catchall\": \"workspace:*\"",
).replace(
// Use locally generated SDK in the monorepo
/"@osdk\/client": "[\^~].*?"/,
`"@osdk/client": "workspace:*"`,
).replace(
// Use locally generated SDK in the monorepo
/"@osdk\/oauth": "\^.*?"/,
`"@osdk/oauth": "workspace:*"`,
).replace(
// Follow monorepo package naming convention
`"name": "${sdkVersionedTemplateExampleId(template, sdkVersion)}"`,
`"name": "@osdk/examples.${
sdkVersionedTemplateCanonicalId(template, sdkVersion)
}"`,
),
newContent: content
.replace(
// Use locally generated SDK in the monorepo
"\"@osdk/e2e.generated.1.1.x\": \"latest\"",
"\"@osdk/e2e.generated.1.1.x\": \"workspace:*\"",
)
.replace(
// Use locally generated SDK in the monorepo
"\"@osdk/e2e.generated.catchall\": \"latest\"",
"\"@osdk/e2e.generated.catchall\": \"workspace:*\"",
)
.replace(
// Use locally generated SDK in the monorepo
/"@osdk\/client": "[\^~].*?"/,
`"@osdk/client": "workspace:*"`,
)
.replace(
// Use locally generated SDK in the monorepo
/"@osdk\/react": "[\^~].*?"/,
`"@osdk/react": "workspace:*"`,
)
.replace(
// Use locally generated SDK in the monorepo
/"@osdk\/oauth": "\^.*?"/,
`"@osdk/oauth": "workspace:*"`,
)
.replace(
// Follow monorepo package naming convention
`"name": "${sdkVersionedTemplateExampleId(template, sdkVersion)}"`,
`"name": "@osdk/examples.${
sdkVersionedTemplateCanonicalId(template, sdkVersion)
}"`,
),
}),
};

Expand Down
Loading

0 comments on commit e3eb40d

Please sign in to comment.