Initial commit

Author: ashnaarya

.github/workflows/deploy.yml

@@ -0,0 +1,45 @@
+name: Deploy to GitHub Pages with Yarn
+
+# Run this workflow on pushes to the 'main' branch
+on:
+  push:
+    branches:
+      - main
+
+# Give the workflow permissions to write to the repository
+permissions:
+  contents: write
+
+# Define the job that will run
+jobs:
+  deploy:
+    runs-on: ubuntu-latest # Use the latest version of Ubuntu
+    steps:
+      # 1. Check out your repository's code
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      # 2. Set up Node.js for the build process
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: "24" # Specify your Node.js version
+          cache: "yarn" # Set the cache to use yarn
+
+      # 3. Install dependencies and build the app
+      - name: Install and Build
+        run: |
+          yarn install --frozen-lockfile
+          yarn run build
+        env:
+          # Dynamically set the public path using the repository name
+          # The ${{ github.event.repository.name }} variable is automatically
+          # provided by GitHub Actions and contains the name of the repo.
+          PUBLIC_URL: /${{ github.event.repository.name }}
+
+      # 4. Deploy the dist folder to the gh-pages branch
+      - name: Deploy to gh-pages
+        uses: peaceiris/actions-gh-pages@v4
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          publish_dir: ./dist # The directory to deploy

.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

README.md

@@ -0,0 +1,75 @@
+# Sigma Plugin Template (React + TypeScript + Vite)
+
+This template provides a starting point for developing custom data visualizations for the Sigma platform using React, TypeScript, and Vite. It includes a minimal setup with the necessary dependencies and project structure to get you started quickly.
+
+## Getting Started
+
+Follow these instructions to get the development environment up and running.
+
+### Prerequisites
+
+- Node.js (v24 or later recommended)
+- yarn
+
+### Installation
+
+1. **Create a new repository from this template:**
+   Click the "Use this template" button at the top of the repository page to create a new repository with the same structure and files.
+
+2. **Install dependencies:**
+   ```bash
+   yarn install
+   ```
+
+### Running the Development Server
+
+To start the Vite development server, run the following command:
+
+```bash
+yarn dev
+```
+
+This will start the development server, and you can view your plugin in the browser at the URL provided. The server supports Hot Module Replacement (HMR), so changes you make to the code will be reflected in the browser instantly.
+
+## Project Structure
+
+Here is an overview of the key files and directories in this template:
+
+- **`public/`**: Contains the static assets for the plugin, such as images and fonts.
+- **`src/`**: The main source code directory for the plugin.
+  - **`components/`**: Contains reusable React components.
+  - **`assets/`**: Contains assets that are imported directly into the source code.
+  - **`App.tsx`**: The main application component.
+  - **`main.tsx`**: The entry point of the application.
+- **`vite.config.ts`**: The configuration file for Vite.
+- **`package.json`**: The project manifest, containing dependencies and scripts.
+- **`README.md`**: This file.
+
+## Deployment
+
+This template includes a GitHub Actions workflow to automatically build and deploy the plugin to GitHub Pages. You will need to configure your repo to [deploy from the `gh-pages` branch](https://docs.github.com/en/pages/getting-started-with-github-pages/configuring-a-publishing-source-for-your-github-pages-site#publishing-from-a-branch).
+
+Alternatively, you can deploy to any cloud provider of your choice.
+
+### Manual Build
+
+To build the plugin for production, run the following command:
+
+```bash
+yarn build
+```
+
+This will create a `dist/` directory with the production-ready files.
+
+### Automated Deployment with GitHub Pages
+
+The repository is configured with a GitHub Actions workflow that automatically deploys the plugin to GitHub Pages whenever you push to the `main` branch. The deployment will be available at `https://<your-username>.github.io/<your-repo-name>/`.
+
+- Select the `gh-pages` branch to be the deploy target ( it may not exist until the first push )
+- Github Pages require either an Enterprise Github account, or the repository to be public.
+
+## Further Information
+
+For more detailed information on developing Sigma plugins, please refer to the official documentation:
+
+- [Sigma Plugin Development API](https://help.sigmacomputing.com/docs/plugin-development-api)

eslint.config.js

@@ -0,0 +1,23 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+import { globalIgnores } from 'eslint/config'
+
+export default tseslint.config([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      js.configs.recommended,
+      tseslint.configs.recommended,
+      reactHooks.configs['recommended-latest'],
+      reactRefresh.configs.vite,
+    ],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+  },
+])

index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Sigma Plugin Starter</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package.json

@@ -0,0 +1,31 @@
+{
+  "name": "sigma-plugin-template",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@sigmacomputing/plugin": "^1.0.9",
+    "react": "^19.1.1",
+    "react-dom": "^19.1.1"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.33.0",
+    "@types/node": "^24.3.1",
+    "@types/react": "^19.1.10",
+    "@types/react-dom": "^19.1.7",
+    "@vitejs/plugin-react-swc": "^4.0.0",
+    "eslint": "^9.33.0",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-react-refresh": "^0.4.20",
+    "globals": "^16.3.0",
+    "typescript": "~5.8.3",
+    "typescript-eslint": "^8.39.1",
+    "vite": "^7.1.2"
+  }
+}

public/vite.svg

@@ -0,0 +1,20 @@
+#root {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+.logo {
+  height: 4em;
+  padding: 1.5em;
+}
+
+.card {
+  padding: 2em;
+}
+
+.connection-status {
+  font-size: 2rem;
+  margin-top: 1rem;
+}

src/App.css

@@ -0,0 +1,35 @@
+import { client, SigmaClientProvider, useConfig } from "@sigmacomputing/plugin";
+import SigmaLogo from "./assets/sigma-black.svg";
+import "./App.css";
+import ConnectionStatus from "./components/ConnectionStatus";
+import DataTable from "./components/DataTable/DataTable";
+
+const TABLE_SOURCE_ID = "source";
+
+client.config.configureEditorPanel([
+  { name: TABLE_SOURCE_ID, type: "element" },
+  {
+    type: "column",
+    name: "Column Names",
+    allowMultiple: true,
+    source: TABLE_SOURCE_ID,
+  },
+]);
+
+function App() {
+  const config = useConfig();
+  return (
+    <SigmaClientProvider client={client}>
+      <div>
+        <a href="https://sigmacomputing.com" target="_blank">
+          <img src={SigmaLogo} className="logo" alt="Sigma logo" />
+        </a>
+      </div>
+      <h1>Plugin Starter</h1>
+      <ConnectionStatus />
+      {config.source && <DataTable configId={config.source} />}
+    </SigmaClientProvider>
+  );
+}
+
+export default App;