@stackone/hub 0.1.0

package/.github/workflows/node-ci.yml

@@ -0,0 +1,20 @@
+name: Node.js CI
+
+on: [pull_request]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - name: Use Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '22.14.x'
+          cache: 'npm'
+      - name: Install dependencies
+        run: npm ci
+      - name: Build  
+        run: npm run build
+      - name: Lint  
+        run: npm run lint

package/.github/workflows/release-please.yml

@@ -0,0 +1,37 @@
+on:
+  push:
+    branches:
+      - main
+
+name: release-please
+jobs:
+  release-please:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: googleapis/release-please-action@v4
+        id: release
+        with:
+          token: ${{ secrets.REPO_GH_PAT }}
+          config-file: release-please-config.json
+          manifest-file: .release-please-manifest.json
+
+      - name: Checkout Repository
+        uses: actions/checkout@v4
+        if: steps.release.outputs.paths_released != '[]'
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        if: steps.release.outputs.paths_released != '[]'
+        with:
+          node-version: '22.14.x'
+          registry-url: 'https://registry.npmjs.org'
+      - name: Build
+        if: steps.release.outputs.paths_released != '[]'
+        run: |
+          npm install
+          npm run build
+      - name: Publish
+        if: steps.release.outputs.paths_released != '[]'
+        run: |
+          npm run publish-release
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

package/.github/workflows/semantic-pull-request.yml

@@ -0,0 +1,31 @@
+name: "Check PR title"
+
+on:
+  pull_request_target:
+    types:
+      - opened
+      - reopened
+      - edited
+      - synchronize
+
+permissions:
+  pull-requests: read
+
+jobs:
+  main:
+    name: Validate PR title
+    runs-on: ubuntu-latest
+    steps:
+      - uses: amannn/action-semantic-pull-request@v5
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        with:
+          scopes: |
+            ENG-\d+
+            deps
+            deps-dev
+            workflow
+          requireScope: false
+          ignoreLabels: |
+            autorelease: pending
+            dependencies

package/.nvmrc

@@ -0,0 +1 @@
+v22.14.0

package/.release-please-manifest.json

@@ -0,0 +1 @@
+{".":"0.1.0"}

package/.yalc/@stackone/malachite/README.md

@@ -0,0 +1 @@
+Coming soon

package/.yalc/@stackone/malachite/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "@stackone/malachite",
+  "version": "0.0.0",
+  "type": "module",
+  "module": "dist/index.js",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "require": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./style.css": "./dist/style.css"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b ./tsconfig.app.json && vite build",
+    "build:watch": "vite build --watch",
+    "build:hot": "concurrently \"tsc -b ./tsconfig.app.json --watch\" \"vite build --watch\"",
+    "lint:check": "biome lint",
+    "lint:fix": "biome lint --fix",
+    "preview": "vite preview",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0",
+    "react-dom": "^18.1.0"
+  },
+  "yalcSig": "b3621bd0c8195b6fd4451f514c72a618"
+}

package/.yalc/@stackone/malachite/yalc.sig

@@ -0,0 +1 @@
+b3621bd0c8195b6fd4451f514c72a618

package/CHANGELOG.md

@@ -0,0 +1,30 @@
+# Changelog
+
+## [0.1.0](https://github.com/StackOneHQ/hub/compare/hub-v0.0.1...hub-v0.1.0) (2025-07-11)
+
+
+### Features
+
+* account editing flow ([0cf3a54](https://github.com/StackOneHQ/hub/commit/0cf3a545d5b85d5422f02e4a0b990239979066c4))
+* add error boundary ([2f5e457](https://github.com/StackOneHQ/hub/commit/2f5e457743674307bf201606c136109c3bba6ff8))
+* add events ([0ac44e3](https://github.com/StackOneHQ/hub/commit/0ac44e39bc1a30c3897838ee4fa82a62fe1ed5d8))
+* add hub modes ([d74c6f7](https://github.com/StackOneHQ/hub/commit/d74c6f78ac597842034e52022ae958331bc15a28))
+* add suppor for new props in webcomponent ([cd718d8](https://github.com/StackOneHQ/hub/commit/cd718d8392feb47180d38846f426f87e16240e69))
+* back to antd ([6921d6d](https://github.com/StackOneHQ/hub/commit/6921d6dacec9f692e4145e061f7b5a51dabefe89))
+* error handling and better rendering ([2aec2a3](https://github.com/StackOneHQ/hub/commit/2aec2a3e75b53ac0b814eee63eac73c2169befba))
+* fetch integration list ([50d3226](https://github.com/StackOneHQ/hub/commit/50d3226435e84f8e000decaed52ce3fdb728e481))
+* handle expired tokens ([2dc60c8](https://github.com/StackOneHQ/hub/commit/2dc60c857b9612f886193a5efb748ab2b2cc56ed))
+* initialise repo with react and webcomponent build ([1e719ae](https://github.com/StackOneHQ/hub/commit/1e719aef846582699d01a06e01c5a3c2e4e8ed91))
+* loading states ([21e1ad5](https://github.com/StackOneHQ/hub/commit/21e1ad5e0f8f91ff75e90a9a01e385ddb3cf854a))
+* more design updates ([0293dfe](https://github.com/StackOneHQ/hub/commit/0293dfe92a8decfbe263c87aa274b811b7c5710b))
+* react query and better components ([ce2d084](https://github.com/StackOneHQ/hub/commit/ce2d08477d02c92da1fb4f5d2fa05bdbe286371b))
+* rudimentary account linking ([56a27a4](https://github.com/StackOneHQ/hub/commit/56a27a440992751a584de2c7fb3a4c7adf946190))
+* use malachite components locally ([b362c65](https://github.com/StackOneHQ/hub/commit/b362c657aed377cf4b5913e3ebe3794cea8498eb))
+
+
+### Bug Fixes
+
+* hub form ([d4c9898](https://github.com/StackOneHQ/hub/commit/d4c989810ce25ea79368f22f0cfd5df8140abec2))
+* lint ([110eb98](https://github.com/StackOneHQ/hub/commit/110eb98e5ab6442b6c1000a2f72c07a84b3e1512))
+* release please ([e11cd2c](https://github.com/StackOneHQ/hub/commit/e11cd2c8f1f5ba1c2bcbbc661b9a3f3fd0866e10))
+* release please and package dependency ([d2a57bc](https://github.com/StackOneHQ/hub/commit/d2a57bcc7db27c7b4348db253d816141ccc99d03))

package/README.md

@@ -0,0 +1,225 @@
+# StackOne HUB
+
+> ⚠️ **ALPHA SOFTWARE** ⚠️  
+> This project is currently in **alpha stage**. Features are incomplete, and may break without notice. Use in production environments is not recommended.
+
+![License](https://img.shields.io/badge/license-MIT-blue.svg)
+![Status](https://img.shields.io/badge/status-alpha-orange.svg)
+![Node Version](https://img.shields.io/badge/node-%3E%3D22.14.0-brightgreen.svg)
+
+StackOne HUB is a React-based integration component library that provides a web component wrapper for seamless integration into any web application. It enables developers to easily embed StackOne's integrations hub.
+
+## 📋 Table of Contents
+
+- [StackOne HUB](#stackone-hub)
+  - [📋 Table of Contents](#-table-of-contents)
+  - [⚠️ Alpha Notice](#️-alpha-notice)
+  - [🚀 Quick Start](#-quick-start)
+  - [📦 Installation](#-installation)
+    - [Prerequisites](#prerequisites)
+    - [Setup](#setup)
+  - [🛠️ Development](#️-development)
+    - [Environment Setup](#environment-setup)
+  - [🏗️ Build](#️-build)
+    - [Build Output](#build-output)
+  - [📖 Usage](#-usage)
+    - [🌐 Web Component Integration](#-web-component-integration)
+    - [⚛️ React Component Integration](#️-react-component-integration)
+    - [💻 Local Development Usage](#-local-development-usage)
+      - [Web Component (Local)](#web-component-local)
+      - [React Component (Local)](#react-component-local)
+  - [🔧 Environment Variables](#-environment-variables)
+    - [Example `.env` file:](#example-env-file)
+  - [🤝 Contributing](#-contributing)
+    - [Getting Started](#getting-started)
+  - [📄 License](#-license)
+
+## ⚠️ Alpha Notice
+
+**This software is in active development and should be considered alpha quality.** 
+
+- 🚧 **Breaking changes** may occur in any release
+- 🐛 **Bugs and incomplete features** are expected
+- 📚 **Documentation** may be outdated or incomplete
+- 🔄 **APIs are subject to change** without prior notice
+- ❌ **Not recommended for production use**
+
+Please report issues and provide feedback to help us improve!
+
+## 🚀 Quick Start
+
+```bash
+# Clone and setup
+git clone <repository-url>
+cd hub
+npm install
+npm run build
+
+# Start development
+npm run dev
+```
+
+## 📦 Installation
+
+### Prerequisites
+
+- [Node.js](https://nodejs.org/) v22.14.0 or higher
+- [npm](https://www.npmjs.com/) (comes with Node.js)
+
+### Setup
+
+1. **Clone the repository:**
+   ```bash
+   git clone <repository-url>
+   cd hub
+   ```
+
+2. **Install dependencies:**
+   ```bash
+   npm install
+   ```
+
+3. **Build the project:**
+   ```bash
+   npm run build
+   ```
+
+## 🛠️ Development
+
+### Environment Setup
+
+1. **Create environment file:**
+   ```bash
+   cp .env.example .env
+   ```
+
+2. **Configure your environment variables** (see [Environment Variables](#-environment-variables) section)
+
+3. **Start the development server:**
+   ```bash
+   npm run dev
+   ```
+
+The development server will start at [http://localhost:3000](http://localhost:3000) (default port).
+
+## 🏗️ Build
+
+To build the project for production:
+
+```bash
+npm run build
+```
+
+### Build Output
+
+The build generates multiple bundles in the `dist/` directory:
+
+| File | Description | Use Case |
+|------|-------------|----------|
+| `StackOneHub.esm.js` | ES module bundle | Modern React applications |
+| `StackOneHub.cjs.js` | CommonJS module | Node.js/legacy environments |
+| `StackOneHub.web.js` | Web component bundle | Vanilla HTML/JS integration |
+
+## 📖 Usage
+
+### 🌐 Web Component Integration
+
+For vanilla HTML/JavaScript applications:
+
+```html
+<!DOCTYPE html>
+<html>
+<head>
+    <title>StackOne HUB Integration</title>
+</head>
+<body>
+    <script src="<TBD>/StackOneHub.web.js"></script>
+    <my-component></my-component>
+</body>
+</html>
+```
+
+### ⚛️ React Component Integration
+
+For React applications:
+
+```tsx
+import StackOneHub from "@stackone/StackOneHub";
+
+function App() {
+  return (
+    <div className="app">
+      <h1>My Application</h1>
+      <StackOneHub />
+    </div>
+  );
+}
+
+export default App;
+```
+
+### 💻 Local Development Usage
+
+#### Web Component (Local)
+```html
+<script src="dist/StackOneHub.web.js"></script>
+<my-component></my-component>
+```
+
+#### React Component (Local)
+```tsx
+import StackOneHub from "dist/StackOneHub.esm";
+
+function App() {
+  return <StackOneHub />;
+}
+```
+
+## 🔧 Environment Variables
+
+Create a `.env` file in the `dev` directory with the following variables:
+
+| Variable | Description | Required |
+|----------|-------------|----------|
+| `STACKONE_API_KEY` | Your StackOne API key | ✅ |
+| `ORIGIN_OWNER_ID` | The origin owner identifier | ✅ |
+| `ORIGIN_OWNER_NAME` | Display name for the owner | ✅ |
+| `ORIGIN_USERNAME` | Username for authentication | ✅ |
+| `API_URL` | Backend API endpoint URL | ✅ |
+| `DASHBOARD_URL` | Dashboard application URL | ✅ |
+
+### Example `.env` file:
+```bash
+STACKONE_API_KEY=your_api_key_here
+ORIGIN_OWNER_ID=your_owner_id
+ORIGIN_OWNER_NAME=Your Company Name
+ORIGIN_USERNAME=your_username
+API_URL=https://api.stackone.com
+DASHBOARD_URL=https://dashboard.stackone.com
+```
+
+## 🤝 Contributing
+
+Since this project is in alpha, we welcome contributions and feedback! However, please keep in mind:
+
+- 🔄 **Frequent changes**: The codebase may change rapidly
+- 📋 **No formal process yet**: Contribution guidelines are still being established
+- 💬 **Communication is key**: Please open an issue before submitting large changes
+
+### Getting Started
+1. Fork the repository
+2. Create a feature branch
+3. Make your changes
+4. Test thoroughly
+5. Submit a pull request
+
+## 📄 License
+
+This project is licensed under the MIT License. See the [LICENSE](LICENSE) file for details.
+
+---
+
+<div align="center">
+  <p><strong>⚠️ Remember: This is alpha software - use at your own risk! ⚠️</strong></p>
+  <p>For questions or support, please open an issue on GitHub.</p>
+</div>

package/biome.json

@@ -0,0 +1,77 @@
+{
+  "$schema": "https://biomejs.dev/schemas/1.9.4/schema.json",
+  "vcs": {
+    "enabled": false,
+    "clientKind": "git",
+    "useIgnoreFile": false
+  },
+  "files": {
+    "ignoreUnknown": false,
+    "ignore": ["**/node_modules/**", "**/dist/**"]
+  },
+  "formatter": {
+    "enabled": true,
+    "useEditorconfig": true,
+    "formatWithErrors": false,
+    "indentStyle": "space",
+    "indentWidth": 4,
+    "lineEnding": "lf",
+    "lineWidth": 100,
+    "attributePosition": "auto",
+    "bracketSpacing": false
+  },
+  "organizeImports": {
+    "enabled": true
+  },
+  "linter": {
+    "enabled": true,
+    "rules": {
+      "recommended": false,
+      "complexity": {
+        "noBannedTypes": "error",
+        "noUselessThisAlias": "error",
+        "noUselessTypeConstraint": "error",
+        "useArrowFunction": "off"
+      },
+      "correctness": {
+        "noConstAssign": "error",
+        "noPrecisionLoss": "error",
+        "noUnusedVariables": "warn",
+        "useArrayLiterals": "off",
+        "useExhaustiveDependencies": "warn",
+        "useHookAtTopLevel": "error"
+      },
+      "style": {
+        "noInferrableTypes": "error",
+        "noNamespace": "error",
+        "noNonNullAssertion": "warn",
+        "useAsConstAssertion": "error",
+        "useBlockStatements": "off"
+      },
+      "suspicious": {
+        "noEmptyBlockStatements": "error",
+        "noEmptyInterface": "error",
+        "noExplicitAny": "error",
+        "noExtraNonNullAssertion": "error",
+        "noMisleadingInstantiator": "error",
+        "useNamespaceKeyword": "error"
+      },
+      "nursery": {
+        "useComponentExportOnlyModules": "off"
+      }
+    }
+  },
+  "javascript": {
+    "formatter": {
+      "jsxQuoteStyle": "double",
+      "quoteProperties": "asNeeded",
+      "trailingCommas": "all",
+      "semicolons": "always",
+      "arrowParentheses": "always",
+      "bracketSameLine": false,
+      "quoteStyle": "single",
+      "attributePosition": "auto",
+      "bracketSpacing": true
+    }
+  }
+}

package/dev/index.html

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Dev Preview</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="main.tsx"></script>
+  </body>
+</html>

package/dev/main.css

@@ -0,0 +1,80 @@
+body {
+    font-family: "Segoe UI", Arial, sans-serif;
+    background: #fafbfc;
+    margin: 0;
+    padding: 0;
+}
+
+.hub-container {
+    max-width: 600px;
+    margin: 40px auto;
+    background: #fff;
+    border-radius: 12px;
+    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.07);
+    padding: 32px 40px 40px 40px;
+}
+
+h1 {
+    font-size: 2.6rem;
+    margin-top: 32px;
+    margin-bottom: 24px;
+    font-weight: 700;
+    letter-spacing: -1px;
+}
+
+p {
+    font-size: 1.1rem;
+    margin-bottom: 12px;
+}
+
+.token-display {
+    word-break: break-all;
+    background: #f4f6f8;
+    border-radius: 6px;
+    padding: 8px 12px;
+    font-family: "Fira Mono", monospace;
+    font-size: 0.98rem;
+    margin-bottom: 18px;
+}
+
+.button-row {
+    display: flex;
+    gap: 12px;
+    margin-bottom: 28px;
+}
+
+button {
+    background: #2d72d9;
+    color: #fff;
+    border: none;
+    border-radius: 5px;
+    padding: 8px 18px;
+    font-size: 1rem;
+    cursor: pointer;
+    transition: background 0.18s;
+}
+button:hover {
+    background: #1b4e91;
+}
+
+@media (max-width: 600px) {
+    .hub-container {
+        padding: 16px 6px;
+    }
+    h1 {
+        font-size: 2rem;
+    }
+}
+
+.hub-container.dark {
+    background: #121212;
+    color: #fff;
+    .token-display {
+        background: #333;
+        color: #fff;
+    }
+}
+
+body {
+    background: goldenrod;
+}

package/dev/main.tsx

@@ -0,0 +1,96 @@
+import './main.css';
+import React, { useCallback, useEffect, useState } from 'react';
+import ReactDOM from 'react-dom/client';
+import { StackOneHub } from '../src/StackOneHub';
+import { request } from '../src/shared/httpClient';
+import { HubModes } from '../src/types/types';
+
+const HubWrapper: React.FC = () => {
+    const [mode, setMode] = useState<HubModes | undefined>(undefined);
+    const [loading, setLoading] = useState<boolean>(false);
+    const [error, setError] = useState<string>();
+    const [token, setToken] = useState<string>();
+    const apiUrl = import.meta.env.VITE_API_URL ?? 'https://api.stackone.com';
+    const [theme, setTheme] = useState<'light' | 'dark'>('light');
+    const [accountId, setAccountId] = useState<string>('46071458593115456017');
+
+    const fetchToken = useCallback(async () => {
+        try {
+            setLoading(true);
+            const apiKey = import.meta.env.VITE_STACKONE_API_KEY;
+            const encodedApiKey = btoa(apiKey ?? '');
+
+            const response = await request<{ token: string }>({
+                url: `${apiUrl}/connect_sessions`,
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                    Authorization: `Basic ${encodedApiKey}`,
+                },
+                body: {
+                    metadata: { source: 'hub' },
+                    origin_owner_id: import.meta.env.VITE_ORIGIN_OWNER_ID ?? 'dummy_customer_id',
+                    origin_owner_name:
+                        import.meta.env.VITE_ORIGIN_OWNER_NAME ?? 'dummy_customer_name',
+                    origin_username: import.meta.env.VITE_ORIGIN_USERNAME ?? 'dummy_username',
+                    account_id: accountId !== '' && accountId != null ? accountId : undefined,
+                },
+            });
+            if (!response) {
+                throw new Error('Failed to fetch token');
+            }
+
+            setToken(response.token);
+        } catch (error) {
+            console.error('Error fetching token:', error);
+            setError(error.message as string);
+        } finally {
+            setLoading(false);
+        }
+    }, [accountId]);
+
+    useEffect(() => {
+        fetchToken();
+    }, [fetchToken]);
+
+    return (
+        <div className={`hub-container ${theme}`}>
+            {loading && <p> Loading token...</p>}
+            {error && <p>Error loading token: {error}</p>}
+            {token && <p className="token-display">Token: {token}</p>}
+            <p>Current mode: {mode || 'No mode selected'}</p>
+            <div className="button-row">
+                <button onClick={fetchToken}>Get new token</button>
+                <button onClick={() => setMode('integration-picker')}>
+                    Set Integration Picker mode
+                </button>
+                <button onClick={() => setMode('csv-importer')}>Set CSV Importer mode</button>
+                <button onClick={() => setTheme((theme) => (theme === 'light' ? 'dark' : 'light'))}>
+                    {theme === 'light' ? '🌞' : '🌚'}
+                </button>
+            </div>
+            <input type="text" value={accountId} onChange={(e) => setAccountId(e.target.value)} />
+            <h1>StackOneHub Demo</h1>
+            <StackOneHub
+                mode={mode}
+                token={token}
+                baseUrl={apiUrl}
+                theme={theme}
+                onSuccess={() => {
+                    console.log('success');
+                    setMode(undefined);
+                }}
+                accountId={accountId}
+            />
+        </div>
+    );
+};
+
+const rootElement = document.getElementById('root');
+if (rootElement) {
+    ReactDOM.createRoot(rootElement).render(
+        <React.StrictMode>
+            <HubWrapper />
+        </React.StrictMode>,
+    );
+}

package/dev/vite-env.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+    readonly VITE_APP_TITLE: string;
+    readonly VITE_STACKONE_API_KEY: string;
+    readonly VITE_ORIGIN_OWNER_ID: string;
+    readonly VITE_ORIGIN_OWNER_NAME: string;
+    readonly VITE_ORIGIN_USERNAME: string;
+    readonly VITE_API_URL: string;
+    readonly VITE_DASHBOARD_URL: string;
+}
+
+export interface ImportMeta {
+    readonly env: ImportMetaEnv;
+}