From a18be1f8fb0cb2cfb56d121258511d7f8cb59c1a Mon Sep 17 00:00:00 2001 From: pballai Date: Wed, 18 Sep 2024 10:35:26 -0400 Subject: [PATCH] add sample application --- embed-sdk-react/.DS_Store | Bin 6148 -> 10244 bytes embed-sdk-react/README.md | 32 +- embed-sdk-react/docs/.DS_Store | Bin 0 -> 8196 bytes embed-sdk-react/docs/README.md | 1 - embed-sdk-react/docs/basic-examples/.env | 1 + embed-sdk-react/docs/basic-examples/README.md | 36 -- .../basic-example/TooltipComponent.tsx | 23 + .../basic-example/basic-example-embed.tsx | 34 +- .../basic-example/basic-example-wrapper.tsx | 31 +- .../app/examples/basic-example/page.mdx | 91 ++- .../basic-examples/app/examples/layout.tsx | 11 - .../docs/basic-examples/app/globals.css | 33 + .../docs/basic-examples/app/layout.tsx | 25 +- .../docs/basic-examples/app/page.mdx | 52 +- .../components/example-link.tsx | 27 + .../basic-examples/components/main-nav.tsx | 47 +- .../basic-examples/components/site-header.tsx | 2 +- .../components/ui/plugs-icon.tsx | 588 ++++++++++++++++++ .../docs/basic-examples/lib/utils.ts | 2 +- embed-sdk-react/packages/.DS_Store | Bin 6148 -> 6148 bytes embed-sdk-react/tooling/.DS_Store | Bin 0 -> 6148 bytes 21 files changed, 887 insertions(+), 149 deletions(-) create mode 100644 embed-sdk-react/docs/.DS_Store delete mode 100644 embed-sdk-react/docs/README.md delete mode 100644 embed-sdk-react/docs/basic-examples/README.md create mode 100644 embed-sdk-react/docs/basic-examples/app/examples/basic-example/TooltipComponent.tsx delete mode 100644 embed-sdk-react/docs/basic-examples/app/examples/layout.tsx create mode 100644 embed-sdk-react/docs/basic-examples/components/example-link.tsx create mode 100644 embed-sdk-react/docs/basic-examples/components/ui/plugs-icon.tsx create mode 100644 embed-sdk-react/tooling/.DS_Store diff --git a/embed-sdk-react/.DS_Store b/embed-sdk-react/.DS_Store index 726ad08f672d434d57ac32cf19a8ccba7104515a..f1f15a65b68bc35e945b2abfa06b99fa8eca0def 100644 GIT binary patch literal 10244 zcmeHMYitx%6h3EK=*&Q2%CoZyUE1&vitRRqmX~ZF$g9}e2Yv9UyE|h$c6MgjncYQd zlg5Z93h|ft{;7%4@IylY6Ql8m(Zom8hJYrFUPs`embb~t^g#9 zso5*^uCN!9VP8glInE{ZP(kiWlDndR#X#;(?P1?8>dSF1xjUeL`9ObW^lvEW%}(Qo zJ#)Y)mq8sM5FjuU0d{vU1`TXTfKzyXkEcw-acgTYp-@yjXKqP}R5GvRNY}8P>vCgm z#%YeF4>7IVw#|6{Jr+M`=(#~Z-#H^>t%olDM?0W?Sdrh?%tPQ+yHV{}4dwv_+jR zT#@D^%s55JY$lg!4n?{Wb~42p@tui_Q~I223r}GbEz3i2*@r-sKdY0DSo3PDH(sBlsvP8^GWXzbWH<>0gcKTfXxXa!K96Rl{c!qU`o^lP_at`Wghh$Z>mW2x-ot?jQMdg|ewVSr?Y~9n=F;Ti; zp;ER;mInw-%QYT0^mI?o(A?qvn3K>g&9H`gvxZ~DO}*QSCG|4=Rgxx_EiW%sL+ai6 zuIVnKQYH3f;>NLz;Xdlkv9dyy4{H?Q0b66UXv#TJ@_MQ&RP_++X-Vr;Yoh2iuU)6g z-3~2RiTQ@r8)dnBgjk?B6aou8QYWiDW-P9oiY9Tl%?+~Jo8_xk_WO<7w##ZCeX}Gj z(J8}fzd72Zsz=$(Z867fPw5s#^|3$wF6tX_hGS{HJx4_JTlZ3{_tmJKIqlL6*Jhm_ zAQfu6DE6}fn>0<=CQ6r=FMF_)c_@aJHHi51DLDU?uS8L-imvBh#Y0wF!j;LI9cn66 zLOpDU4(O+CmV;C99GrpI;4EB(_u&)x5-!0N_y)d(AK@DO27kg|@HYZVxCkq76;@&u zR%0V>!L8VWdvG7_$2RQ20X&RH@F)&p5^YT3F+72f;}duipTuYJ1$-G_!B_EhJcsA; z0$#)q@iY7!zrf3Q6@S5N_&ffA*98=0VTDj3goRZ?rLaM$6(}jlijd!416iW@Ra*6L15;1AFw)&Z8 zQNLQgxv}A+rm6kfE&Ef$1xLbp?_`)HdA2KUnYJ}VaX1Ufi{XUvSw z!m|d1ntN_GKw5J?giObLqL0jpt61XY+6Sp8-6N6x{#WM_^_4L{)JAcmALE|9=20pWIpi delta 138 zcmZn(XfcprU|?W$DortDU=RQ@Ie-{MGqg`E6q~50D98+CGlIlYij#Aa^7C^h7HTsx zPrfH0F*!kJD 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 0000000000000000000000000000000000000000..0dda8fcc5caf19ea72f5f73525d578595769321b GIT binary patch literal 8196 zcmeHMYit!o6rQs!bar`dYbo90rB^FhN=qL=DG&Abflxq;+|n11%ig<7yJ7F{<<8z) zkPxe=zmS-y(L^Q2$4@Z`XhNdV#2BK+ABL!yXnZ8bM1S~$Uq;0)SYDJ z?3p=dX6Kvl?DX6cLZBmOG!s%u2%%WHRA*sxjl#!yy{bq-kBkz~pO6%3ASO9TbdtWx zI_wA$2oVSo2oVSo2obmu5WqW|7dpkgFGj;QL?A@qe~AG9K18u{84Ki?kp8Cw8$Sg= zS&ZF&!Dq|^e4l6_V}TqK(s#uR1gY>RnKO`n2P zR6Jv5Nr_xCt7Lb4#2t-$x|d@edUhw*dR^B}7M}HFpJk3F)bdW(@pQ{Ev%Z66m}s)A z-*OChw8PCg2J?O6VnCLuoKUL{A8u`Hs*g6btZ6z@A3faM(%f1fZEIb5Xmwo8u`ro#6|>=`&}iwP*QG0bfx? z0lv=z_^7PR()#+9!Gv0tM~r$hp5;2M&&)EE33VPrEW1;#vn^}#@&1%+=h6;KsHG|0 zPUURfGuv%DZryLP0na?>@uwl?X1z||FrlhBW^Omp&dQrzXw3#JoQ|87^9_tEAfKE) zKXU7mWlgKr-qp2f>$VGX=FU@$7=!y6gYS;}+_%NZWRgK|7;pJis{ zQmI+)b@a4(p<+R$s#R$>Pvu3`8aj|mS_g8LcSx*Jt=%H4XX!2jU+^B+;4>Qjh*qsF zrgSIo@64Lmif*M=tCLlo_A=aun4&>xlvO78?ngEW*A`_ZRSkKEttU-ebgfp_P<4yk zpBMOw&h^Tjv=r*)0X)<+?uUu)cCC}D=jk54_Ew#FJsHy}yj8olk^2yo_1Lsi}R94)#UDNP{EGKVa@Zf=q7*ao>l-9)R z#M$_u$~Cd3;HW6k$a1_AH<4W!oEdVI93#(@6XaF$26>yjM?NMO$rt2H@)h}x{6sF1 zU!WLfKnYMNg(_GG5m*GvU?r@AR_K5&uodow9_WSLum|>n4*S4`3}k`9A$SOm!Xxk~ z9EYdj8F&_+gIC}ryauP>b$Ay(fDhp#_zb>=Z{SAIL< z>$=z#S_vW+xHq2DK8+`k->0#E@{{?8(WO-_R3bZ&=jOr55m|^iwS+U8a_VW-Q6-|z zz(^44ZHrNziBTZbrFD^rDq-*mb$Me%QHwCNWZ!p19jXv0tJ@SsEyf@dW9#ogmGHP1 zdV2@X#6#vUkoOchN8Tal$ps|u_vA|qVHo!*c zhRsOdUg(1X7=$56feFJf0v3|jgB;}H0eBDz{4i4ZI6Mwdz?1M4oPZbLMR*Bb_Njat z&P*cb=85Elx27X!+U@EJZb$mVua&KBtKV;*-pBaUKADkm*UpJ`+okP%C-DDH}P@q2ixPlbeIQLKBh^1|)Lg!Emo r;U>J_PsdSS`G+AsM}x6gAjgEn5iI}s4*`GQU(n(GAKw4}n*09`h~>1U literal 0 HcmV?d00001 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 */}