diff --git a/embed-sdk-react/.DS_Store b/embed-sdk-react/.DS_Store index 726ad08..f1f15a6 100644 Binary files a/embed-sdk-react/.DS_Store and b/embed-sdk-react/.DS_Store differ diff --git a/embed-sdk-react/README.md b/embed-sdk-react/README.md index dc94b75..8608a75 100644 --- a/embed-sdk-react/README.md +++ b/embed-sdk-react/README.md @@ -1,16 +1,26 @@ -# embed-sdk +# Sigma Embed-SDK for React +Sigma provides several methods to allow users and developers to interact with its systems including web-ui, REST API, Javascript Embed API and an SDK for the React framework. -SDK for Sigma Computing Embeds. They are a wrapper over postmessage APIs. +The Embed-SDK for React provides an addition avenue, targeted at software developers who prefer to use a software development kit (SDK), as opposed to using the Sigmas JavaScript Embed-API, which can require writing additional code. + +If the basic instructions below are not sufficient, please review the [QuickStart here.](https://quickstarts.sigmacomputing.com/guide/embedding_15_embed_sdk/index.html?index=..%2F..index#0) ## Getting Started +1: Clone the repository -This repo uses pnpm and node18+. To get started +2: Setup your local environment for project dependencies: +- Node.js (version 18+) +- pnpm +- corepack (needs to be enabled) -```sh -corepack enable -pnpm i +3: Start the development server +```code +pnpm run dev ``` +4: Browse to http://localhost:3000 + +## Building The repo uses turbo for its build system. It currently has 3 packages: - embed-sdk: "barebones" wrappers over postMessages @@ -18,22 +28,18 @@ The repo uses turbo for its build system. It currently has 3 packages: - docs: Some barebone documentation / examples. To build: - -``` +```code pnpm run build ``` ## Publish flow: - Publishes are handled by changesets. To add a changeset, in your PR run: - -``` +```code pnpm changeset ``` This will prompt you to add a changeset. Once merged, a PR will be opened to bump the version and publish the package. -## Add iframe events - +## Adding iframe events - [Example](https://github.com/sigmacomputing/embed-sdk/pull/31) for adding an inbound event - Add a changeset for both the embed-sdk and react-embed-sdk. diff --git a/embed-sdk-react/docs/.DS_Store b/embed-sdk-react/docs/.DS_Store new file mode 100644 index 0000000..0dda8fc Binary files /dev/null and b/embed-sdk-react/docs/.DS_Store differ diff --git a/embed-sdk-react/docs/README.md b/embed-sdk-react/docs/README.md deleted file mode 100644 index 59b3a53..0000000 --- a/embed-sdk-react/docs/README.md +++ /dev/null @@ -1 +0,0 @@ -This is where some examples will be placed. diff --git a/embed-sdk-react/docs/basic-examples/.env b/embed-sdk-react/docs/basic-examples/.env index 61fd994..beae65e 100644 --- a/embed-sdk-react/docs/basic-examples/.env +++ b/embed-sdk-react/docs/basic-examples/.env @@ -4,3 +4,4 @@ EMBED_URL={url path to embed} EMBED_CLIENT_ID={your client id} EMBED_SECRET=(your embed secret) +EMBED_EMAIL=embed_user@test.com \ No newline at end of file diff --git a/embed-sdk-react/docs/basic-examples/README.md b/embed-sdk-react/docs/basic-examples/README.md deleted file mode 100644 index c403366..0000000 --- a/embed-sdk-react/docs/basic-examples/README.md +++ /dev/null @@ -1,36 +0,0 @@ -This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app). - -## Getting Started - -First, run the development server: - -```bash -npm run dev -# or -yarn dev -# or -pnpm dev -# or -bun dev -``` - -Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. - -You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file. - -This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font. - -## Learn More - -To learn more about Next.js, take a look at the following resources: - -- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. -- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. - -You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome! - -## Deploy on Vercel - -The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js. - -Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details. diff --git a/embed-sdk-react/docs/basic-examples/app/examples/basic-example/TooltipComponent.tsx b/embed-sdk-react/docs/basic-examples/app/examples/basic-example/TooltipComponent.tsx new file mode 100644 index 0000000..3f76dc9 --- /dev/null +++ b/embed-sdk-react/docs/basic-examples/app/examples/basic-example/TooltipComponent.tsx @@ -0,0 +1,23 @@ +// TooltipComponent.tsx +import React from 'react'; + +interface TooltipProps { + text: string; // Text to display in the tooltip + children: React.ReactNode; // The content that triggers the tooltip +} + +const TooltipComponent: React.FC = ({ text, children }) => ( +
+ {/* Trigger Element */} + {children} + {/* Tooltip Box */} +
+ {text} +
+
+); + +export default TooltipComponent; \ No newline at end of file diff --git a/embed-sdk-react/docs/basic-examples/app/examples/basic-example/basic-example-embed.tsx b/embed-sdk-react/docs/basic-examples/app/examples/basic-example/basic-example-embed.tsx index 20ceb7a..e4a37d6 100644 --- a/embed-sdk-react/docs/basic-examples/app/examples/basic-example/basic-example-embed.tsx +++ b/embed-sdk-react/docs/basic-examples/app/examples/basic-example/basic-example-embed.tsx @@ -1,19 +1,31 @@ -"use client"; +// basic-example-embed.tsx +// Utilizes the Sigma Computing Embed SDK to integrate an iframe within a React application. + +"use client"; // Next.js directive to ensure this component runs only on the client-side. + +import React from "react"; +// Import the useSigmaIframe hook from the Sigma Computing React Embed SDK import { useSigmaIframe } from "@sigmacomputing/react-embed-sdk"; +// Define the BasicExample component, which receives a 'src' prop for the iframe URL export default function BasicExample({ src }: { src: string }) { + // Destructure the iframeRef, loading, and error values from the useSigmaIframe hook const { iframeRef, loading, error } = useSigmaIframe(); + return ( - <> -

Loading...

-

Error loading iframe

+ // Parent container with full height +
+ {/* Conditional rendering: Display loading text if the iframe is loading */} + {loading &&

Loading...

} + {/* Conditional rendering: Display error message if there is an error loading the iframe */} + {error &&

Error loading iframe

} + {/* Render the iframe, filling the parent container */}