Merge pull request #22 from sigmacomputing/embed-sdk-react

Embed SDK react

embed-sdk-react/.changeset/README.md

@@ -0,0 +1,8 @@
+# Changesets
+
+Hello and welcome! This folder has been automatically generated by `@changesets/cli`, a build tool that works
+with multi-package repos, or single-package repos to help you version and publish your code. You can
+find the full documentation for it [in our repository](https://github.com/changesets/changesets)
+
+We have a quick list of common questions to get you started engaging with this project in
+[our documentation](https://github.com/changesets/changesets/blob/main/docs/common-questions.md)

embed-sdk-react/.changeset/config.json

@@ -0,0 +1,12 @@
+{
+  "$schema": "https://unpkg.com/@changesets/[email protected]/schema.json",
+  "changelog": "@changesets/cli/changelog",
+  "commit": false,
+  "fixed": [],
+  "linked": [],
+  "access": "restricted",
+  "baseBranch": "main",
+  "updateInternalDependencies": "patch",
+  "ignore": ["@sigmacomputing/basic-examples"],
+  "privatePackages": false
+}

embed-sdk-react/.github/workflows/build.yml

@@ -0,0 +1,29 @@
+name: Build Check
+
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+    branches:
+      - main
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+
+      - name: Use Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: "20.x"
+          cache: "pnpm"
+
+      - run: pnpm install
+
+      - run: pnpm run build

embed-sdk-react/.github/workflows/release.yml

@@ -0,0 +1,43 @@
+name: Changesets
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  version:
+    timeout-minutes: 15
+    runs-on: ubuntu-latest
+    steps:
+      - id: create_token
+        uses: actions/create-github-app-token@v1
+        with:
+          app-id: ${{ secrets.EMBED_SDK_BOT_APP_ID }}
+          private-key: ${{ secrets.EMBED_SDK_BOT_TOKEN }}
+
+      - name: checkout code repository
+        uses: actions/checkout@v4
+        with:
+          token: ${{ steps.create_token.outputs.token }}
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+
+      - name: Use Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: "20.x"
+          cache: "pnpm"
+
+      - name: install dependencies
+        run: pnpm install
+
+      - name: create and publish versions
+        uses: changesets/action@v1
+        with:
+          version: pnpm ci:version
+          publish: pnpm ci:release
+          title: "chore: publish new package versions"
+        env:
+          GITHUB_TOKEN: ${{ steps.create_token.outputs.token }}
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}

embed-sdk-react/.github/workflows/semgrep.yml

@@ -0,0 +1,19 @@
+name: Semgrep
+on:
+  pull_request:
+  workflow_dispatch:
+
+jobs:
+  semgrep:
+    name: Run Semgrep
+    runs-on: ubuntu-latest
+    timeout-minutes: 30
+    container:
+      # A Docker image with Semgrep installed. Do not change this.
+      image: returntocorp/semgrep
+    if: (github.actor != 'dependabot[bot]')
+    steps:
+      - uses: actions/checkout@v4
+      - run: semgrep ci
+        env:
+          SEMGREP_APP_TOKEN: ${{ secrets.SEMGREP_APP_TOKEN_PUBLIC }}

embed-sdk-react/.gitignore

@@ -0,0 +1,3 @@
+node_modules
+**/.turbo
+**/dist

embed-sdk-react/.prettierrc

@@ -0,0 +1 @@
+{}

embed-sdk-react/README.md

@@ -0,0 +1,39 @@
+# embed-sdk
+
+SDK for Sigma Computing Embeds. They are a wrapper over postmessage APIs.
+
+## Getting Started
+
+This repo uses pnpm and node18+. To get started
+
+```sh
+corepack enable
+pnpm i
+```
+
+The repo uses turbo for its build system. It currently has 3 packages:
+
+- embed-sdk: "barebones" wrappers over postMessages
+- react-embed-sdk: React hooks to easily use the embed-sdk
+- docs: Some barebone documentation / examples.
+
+To build:
+
+```
+pnpm run build
+```
+
+## Publish flow:
+
+Publishes are handled by changesets. To add a changeset, in your PR run:
+
+```
+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
+
+- [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.

embed-sdk-react/docs/README.md

@@ -0,0 +1 @@
+This is where some examples will be placed.

embed-sdk-react/docs/basic-examples/.eslintrc.js

@@ -0,0 +1,10 @@
+/** @type {import("eslint").Linter.Config} */
+module.exports = {
+  root: true,
+  extends: ["@sigmacomputing/eslint-config/next.js"],
+  parser: "@typescript-eslint/parser",
+  parserOptions: {
+    project: true,
+  },
+  ignorePatterns: ["next.config.mjs"],
+};

embed-sdk-react/docs/basic-examples/.gitignore

@@ -0,0 +1,36 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

embed-sdk-react/docs/basic-examples/README.md

@@ -0,0 +1,36 @@
+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.

embed-sdk-react/docs/basic-examples/app/examples/basic-example/basic-example-embed.tsx

@@ -0,0 +1,19 @@
+"use client";
+import { useSigmaIframe } from "@sigmacomputing/react-embed-sdk";
+
+export default function BasicExample({ src }: { src: string }) {
+  const { iframeRef, loading, error } = useSigmaIframe();
+  return (
+    <>
+      <p className={loading ? "show" : "hidden"}> Loading...</p>
+      <p className={error ? "show" : "hidden"}> Error loading iframe</p>
+      <iframe
+        src={src}
+        ref={iframeRef}
+        className={loading || error ? "hidden" : "show"}
+        width={"100%"}
+        height={"100%"}
+      />
+    </>
+  );
+}

embed-sdk-react/docs/basic-examples/app/examples/basic-example/basic-example-wrapper.tsx

@@ -0,0 +1,9 @@
+import { signEmbedUrl } from "@/lib/utils";
+import BasicExample from "./basic-example-embed";
+
+export default async function SignedIframe() {
+  const src =
+    "process.env.EMBED_URL;";
+  const signedSrc = await signEmbedUrl(src);
+  return <BasicExample src={signedSrc} />;
+}

embed-sdk-react/docs/basic-examples/app/examples/basic-example/page.mdx

@@ -0,0 +1,28 @@
+import BasicExample from "./basic-example-wrapper";
+
+<section>
+```tsx
+import { useSigmaIframe } from "@sigmacomputing/react-embed-sdk";
+function BasicExample({ src }: { src: string }) {
+  const { iframeRef, loading, error } = useSigmaIframe(); // [!code highlight]
+  return (
+    <>
+      <p className={loading ? "show" : "hidden"}> Loading...</p> // [!code highlight]
+      <p className={error ? "show" : "hidden"}> Error loading iframe</p> // [!code highlight]
+      <iframe
+        src={src}
+        ref={iframeRef} // [!code highlight]
+        className={loading || error ? "hidden" : "show"} // [!code highlight]
+        width={"100%"}
+        height={"100%"}
+      />
+    </>
+  );
+}
+```
+</section>
+
+<section>
+
+<BasicExample src="https://staging.sigmacomputing.io/embed/1-156WHbeEOtenyfjDhfsnjY" />
+</section>

embed-sdk-react/docs/basic-examples/app/examples/layout.tsx

@@ -0,0 +1,11 @@
+export default function ExampleLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <main className="container mx-auto">
+      <div className="grid grid-cols-2 gap-8 p-8">{children}</div>
+    </main>
+  );
+}

embed-sdk-react/docs/basic-examples/app/globals.css

@@ -0,0 +1,23 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  --line-highlight: rgba(160, 130, 170, .14);
+}
+body {
+  color: #292929;
+  background: #F0F0F0;
+}
+
+.highlighted {
+  background-color: var(--line-highlight);
+  width: calc(100%);
+  display: inline-block;
+}
+
+@layer utilities {
+  .text-balance {
+    text-wrap: balance;
+  }
+}

embed-sdk-react/docs/basic-examples/app/layout.tsx

@@ -0,0 +1,28 @@
+import type { Metadata } from "next";
+import { Inter } from "next/font/google";
+import "./globals.css";
+import { SiteHeader } from "@/components/site-header";
+
+const inter = Inter({ subsets: ["latin"] });
+
+export const metadata: Metadata = {
+  title: "Sigma Computing Embed Docs",
+  description: "Documentation site for Sigma Computing Embed SDK",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <body className={inter.className}>
+        <div className="relative flex flex-col h-screen">
+          <SiteHeader />
+          <div className="flex-1">{children}</div>
+        </div>
+      </body>
+    </html>
+  );
+}

embed-sdk-react/docs/basic-examples/app/page.mdx

@@ -0,0 +1,13 @@
+<main className="container mx-auto">
+  <div className="grid grid-cols-2 gap-8 p-8">
+    <section>
+      <h1 className="text-[4.25rem] leading-[4.3rem]">Sigma Computing <br /> Embed Docs <br /> </h1>
+    </section>
+    <section>
+      <p className="text-lg leading-[64px]">
+        Get started by editing <code>pages/index.tsx</code>
+      </p>
+    </section>
+  </div>
+</main>
+