npm - @stackone/hub - Versions diffs - 0.1.0 - Mend

@stackone/hub 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (48) hide show

package/.github/workflows/node-ci.yml +20 -0
package/.github/workflows/release-please.yml +37 -0
package/.github/workflows/semantic-pull-request.yml +31 -0
package/.nvmrc +1 -0
package/.release-please-manifest.json +1 -0
package/.yalc/@stackone/malachite/README.md +1 -0
package/.yalc/@stackone/malachite/package.json +37 -0
package/.yalc/@stackone/malachite/yalc.sig +1 -0
package/CHANGELOG.md +30 -0
package/README.md +225 -0
package/biome.json +77 -0
package/dev/index.html +11 -0
package/dev/main.css +80 -0
package/dev/main.tsx +96 -0
package/dev/vite-env.d.ts +15 -0
package/index.html +14 -0
package/package.json +44 -0
package/release-please-config.json +5 -0
package/rollup.config.mjs +72 -0
package/src/StackOneHub.tsx +99 -0
package/src/WebComponentWrapper.tsx +14 -0
package/src/index.ts +1 -0
package/src/modules/csv-importer.tsx/CsvImporter.tsx +35 -0
package/src/modules/integration-picker/IntegrationPicker.tsx +89 -0
package/src/modules/integration-picker/components/IntegrationFields.tsx +115 -0
package/src/modules/integration-picker/components/IntegrationList.tsx +71 -0
package/src/modules/integration-picker/components/IntegrationPickerContent.tsx +107 -0
package/src/modules/integration-picker/components/cardFooter.tsx +88 -0
package/src/modules/integration-picker/components/cardTitle.tsx +51 -0
package/src/modules/integration-picker/components/views/ErrorView.tsx +9 -0
package/src/modules/integration-picker/components/views/IntegrationFormView.tsx +22 -0
package/src/modules/integration-picker/components/views/IntegrationListView.tsx +19 -0
package/src/modules/integration-picker/components/views/LoadingView.tsx +11 -0
package/src/modules/integration-picker/components/views/SuccessView.tsx +10 -0
package/src/modules/integration-picker/components/views/index.ts +5 -0
package/src/modules/integration-picker/hooks/useIntegrationPicker.ts +221 -0
package/src/modules/integration-picker/queries.ts +78 -0
package/src/modules/integration-picker/types.ts +60 -0
package/src/shared/categories.ts +55 -0
package/src/shared/components/error.tsx +33 -0
package/src/shared/components/errorBoundary.tsx +31 -0
package/src/shared/components/loading.tsx +30 -0
package/src/shared/components/success.tsx +33 -0
package/src/shared/httpClient.ts +79 -0
package/src/types/types.ts +1 -0
package/tsconfig.json +19 -0
package/vite.config.ts +11 -0
package/yalc.lock +9 -0

package/index.html ADDED Viewed

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <script src="dist/webcomponent/StackOneHub.web.js"></script>
+  </head>
+  <body>
+    <!-- Add a  -->
+    <stackone-hub
+      token="eyJyZWdpb25fc2x1ZyI6ImV1IiwidG9rZW4iOiJzclgzU0xUemttcmpWQWQtWTdNZXFUTUh3OV9KaVdNRFk3M3RaenRwdVZIVV9EZERmQU14NGF3X3hWb09wdXZuRkQ1OW11WlJjZlZBRDRQMUxRcmVRdyJ9"
+      base-url="http://localhost:4000"
+      mode="integration-picker"
+    ></stackone-hub>
+  </body>
+</html>

package/package.json ADDED Viewed

@@ -0,0 +1,44 @@
+{
+    "name": "@stackone/hub",
+    "version": "0.1.0",
+    "description": "StackOne HUB",
+    "main": "index.js",
+    "scripts": {
+        "test": "echo \"Error: no test specified\" && exit 1",
+        "build": "rollup -c",
+        "dev": "vite",
+        "code:format": "biome format ./src ./dev",
+        "code:format:fix": "biome format --write ./src ./dev",
+        "lint": "biome lint --error-on-warnings ./src ./dev && biome check ./src ./dev",
+        "lint:fix": "biome lint --write ./src ./dev && biome check --write ./src ./dev",
+        "publish-release": "npm publish --access=public"
+    },
+    "author": "StackOne",
+    "license": "MIT",
+    "dependencies": {
+        "@stackone/malachite": "^0.1.1",
+        "@tanstack/react-query": "^5.77.2",
+        "react": "^18.0.0",
+        "react-dom": "^18.1.0"
+    },
+    "devDependencies": {
+        "@biomejs/biome": "1.9.4",
+        "@rollup/plugin-commonjs": "^28.0.3",
+        "@rollup/plugin-node-resolve": "^16.0.1",
+        "@rollup/plugin-replace": "^6.0.2",
+        "@rollup/plugin-terser": "^0.4.4",
+        "@rollup/plugin-typescript": "^12.1.2",
+        "@types/node": "^22.15.17",
+        "@types/react": "^18.0.0",
+        "@types/react-dom": "^18.0.0",
+        "@vitejs/plugin-react-swc": "^3.9.0",
+        "react-to-webcomponent": "^2.0.1",
+        "rollup": "^4.40.2",
+        "rollup-plugin-delete": "^3.0.1",
+        "rollup-plugin-dts": "^6.2.1",
+        "rollup-plugin-peer-deps-external": "^2.2.4",
+        "rollup-plugin-postcss": "^4.0.2",
+        "tslib": "^2.8.1",
+        "typescript": "^5.8.3"
+    }
+}

package/release-please-config.json ADDED Viewed

@@ -0,0 +1,5 @@
+{
+    "packages": {
+        ".": {}
+    }
+}

package/rollup.config.mjs ADDED Viewed

@@ -0,0 +1,72 @@
+import commonjs from "@rollup/plugin-commonjs";
+import resolve from "@rollup/plugin-node-resolve";
+import replace from "@rollup/plugin-replace";
+import terser from "@rollup/plugin-terser";
+import typescript from "@rollup/plugin-typescript";
+import del from "rollup-plugin-delete";
+import dts from "rollup-plugin-dts";
+import external from "rollup-plugin-peer-deps-external";
+import postcss from "rollup-plugin-postcss";
+export default [
+  // React Component Bundle (external React)
+  {
+    input: "src/index.ts",
+    output: [
+      {
+        file: "dist/react/StackOneHub.esm.js",
+        format: "esm",
+      },
+      {
+        file: "dist/react/StackOneHub.cjs.js",
+        format: "cjs",
+      },
+    ],
+    plugins: [
+      del({ targets: "dist/react/*" }),
+      external(),
+      resolve(),
+      commonjs(),
+      typescript({ tsconfig: "./tsconfig.json" }),
+      postcss(),
+      terser(),
+      replace({
+        preventAssignment: true,
+        "process.env.NODE_ENV": JSON.stringify("production"),
+      }),
+    ],
+  },
+  // Web Component Bundle (bundled React)
+  {
+    input: "src/WebComponentWrapper.tsx",
+    output: {
+      file: "dist/webcomponent/StackOneHub.web.js",
+      format: "iife",
+      name: "StackOneHubWebComponent",
+      sourcemap: true,
+    },
+    plugins: [
+      del({ targets: "dist/webcomponent/*" }), // Clean the dist folder before each build
+      resolve(),
+      commonjs(),
+      typescript({ tsconfig: "./tsconfig.json" }),
+      postcss(),
+      terser(),
+      replace({
+        preventAssignment: true,
+        "process.env.NODE_ENV": JSON.stringify("production"),
+      }),
+    ],
+  },
+  // Declaration file bundle
+  {
+    input: "src/index.ts",
+    output: {
+      file: "dist/index.d.ts",
+      format: "es",
+    },
+    plugins: [del({ targets: "dist/index.d.ts" }), dts()],
+  },
+];

package/src/StackOneHub.tsx ADDED Viewed

@@ -0,0 +1,99 @@
+import {
+    Card,
+    Flex,
+    FlexAlign,
+    FlexJustify,
+    FooterLinks,
+    ThemeProvider,
+    Typography,
+} from '@stackone/malachite';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { CsvImporter } from './modules/csv-importer.tsx/CsvImporter';
+import { IntegrationPicker } from './modules/integration-picker/IntegrationPicker';
+import ErrorContainer from './shared/components/error';
+import ErrorBoundary from './shared/components/errorBoundary';
+import { HubModes } from './types/types';
+interface StackOneHubProps {
+    mode?: HubModes;
+    token?: string;
+    baseUrl?: string;
+    height?: string;
+    theme?: 'light' | 'dark';
+    accountId?: string;
+    onSuccess?: () => void;
+    onClose?: () => void;
+    onCancel?: () => void;
+}
+export const StackOneHub: React.FC<StackOneHubProps> = ({
+    mode,
+    token,
+    baseUrl,
+    height = '500px',
+    theme = 'light',
+    accountId,
+    onSuccess,
+    onClose,
+    onCancel,
+}) => {
+    const defaultBaseUrl = 'https://api.stackone.com';
+    const apiUrl = baseUrl ?? defaultBaseUrl;
+    const queryClient = new QueryClient({
+        defaultOptions: {
+            queries: {
+                refetchOnWindowFocus: false,
+                retry: 1,
+                retryDelay: 500,
+                refetchOnMount: false,
+                retryOnMount: false,
+            },
+        },
+    });
+    if (!token) {
+        return (
+            <Card height={height} footer={<FooterLinks />}>
+                <Flex justify={FlexJustify.Center} align={FlexAlign.Center} fullHeight>
+                    <Typography.PageTitle>No token provided</Typography.PageTitle>
+                </Flex>
+            </Card>
+        );
+    }
+    if (!mode) {
+        return (
+            <Card height={height} footer={<FooterLinks />}>
+                <Flex justify={FlexJustify.Center} align={FlexAlign.Center} fullHeight>
+                    <Typography.PageTitle>No mode selected</Typography.PageTitle>
+                </Flex>
+            </Card>
+        );
+    }
+    return (
+        <ThemeProvider theme={theme}>
+            <ErrorBoundary
+                fallback={
+                    <Card height={height}>
+                        <ErrorContainer />
+                    </Card>
+                }
+            >
+                <QueryClientProvider client={queryClient}>
+                    {mode === 'integration-picker' && (
+                        <IntegrationPicker
+                            token={token}
+                            baseUrl={apiUrl}
+                            height={height}
+                            onSuccess={onSuccess}
+                            onClose={onClose}
+                            onCancel={onCancel}
+                            accountId={accountId}
+                        />
+                    )}
+                </QueryClientProvider>
+            </ErrorBoundary>
+        </ThemeProvider>
+    );
+};

package/src/WebComponentWrapper.tsx ADDED Viewed

@@ -0,0 +1,14 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import reactToWebComponent from 'react-to-webcomponent';
+import { StackOneHub } from './StackOneHub';
+const WebComponent = reactToWebComponent(StackOneHub, React, ReactDOM, {
+    props: {
+        token: 'string',
+        baseUrl: 'string',
+        mode: 'string',
+    },
+});
+customElements.define('stackone-hub', WebComponent);

package/src/index.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export { StackOneHub } from './StackOneHub';

package/src/modules/csv-importer.tsx/CsvImporter.tsx ADDED Viewed

@@ -0,0 +1,35 @@
+import {
+    Card,
+    Flex,
+    FlexDirection,
+    FlexGapSize,
+    FooterLinks,
+    Typography,
+} from '@stackone/malachite';
+interface CsvImporterProps {
+    height?: string;
+}
+export const CsvImporter: React.FC<CsvImporterProps> = ({ height }) => {
+    return (
+        <Card
+            title={
+                <Typography.Text fontWeight="semi-bold" size="large">
+                    CSV Importer
+                </Typography.Text>
+            }
+            footer={<FooterLinks />}
+            height={height}
+        >
+            <Flex direction={FlexDirection.Vertical} gapSize={FlexGapSize.Small} fullHeight>
+                <Typography.Text fontWeight="bold" size="large">
+                    CSV Importer
+                </Typography.Text>
+                <Typography.SecondaryText>
+                    This is the CSV importer module.
+                </Typography.SecondaryText>
+            </Flex>
+        </Card>
+    );
+};

package/src/modules/integration-picker/IntegrationPicker.tsx ADDED Viewed

@@ -0,0 +1,89 @@
+import { Card } from '@stackone/malachite';
+import { IntegrationPickerContent } from './components/IntegrationPickerContent';
+import CardFooter from './components/cardFooter';
+import CardTitle from './components/cardTitle';
+import { useIntegrationPicker } from './hooks/useIntegrationPicker';
+interface IntegrationPickerProps {
+    token: string;
+    baseUrl: string;
+    height: string;
+    accountId?: string;
+    onSuccess?: () => void;
+    onClose?: () => void;
+    onCancel?: () => void;
+}
+export const IntegrationPicker: React.FC<IntegrationPickerProps> = ({
+    token,
+    baseUrl,
+    height,
+    accountId,
+    onSuccess,
+}) => {
+    const {
+        // Data
+        hubData,
+        accountData,
+        connectorData,
+        selectedIntegration,
+        fields,
+        guide,
+        // State
+        connectionState,
+        isLoading,
+        hasError,
+        // Errors
+        errorHubData,
+        errorConnectorData,
+        // Actions
+        setSelectedIntegration,
+        setFormData,
+        handleConnect,
+    } = useIntegrationPicker({
+        token,
+        baseUrl,
+        accountId,
+        onSuccess,
+    });
+    return (
+        <Card
+            footer={
+                <CardFooter
+                    selectedIntegration={selectedIntegration}
+                    onBack={accountData ? undefined : () => setSelectedIntegration(null)}
+                    onNext={handleConnect}
+                />
+            }
+            title={
+                selectedIntegration && (
+                    <CardTitle
+                        selectedIntegration={selectedIntegration}
+                        onBack={accountData ? undefined : () => setSelectedIntegration(null)}
+                        guide={guide}
+                    />
+                )
+            }
+            height={height}
+        >
+            <IntegrationPickerContent
+                isLoading={isLoading}
+                hasError={hasError}
+                connectionState={connectionState}
+                selectedIntegration={selectedIntegration}
+                connectorData={connectorData ?? null}
+                hubData={hubData ?? null}
+                fields={fields}
+                guide={guide}
+                errorHubData={errorHubData}
+                errorConnectorData={errorConnectorData}
+                onSelect={setSelectedIntegration}
+                onChange={setFormData}
+            />
+        </Card>
+    );
+};

package/src/modules/integration-picker/components/IntegrationFields.tsx ADDED Viewed

@@ -0,0 +1,115 @@
+import { Alert, Form, Input, Spacer, Typography } from '@stackone/malachite';
+import { useEffect, useState } from 'react';
+import { ConnectorConfigField } from '../types';
+interface IntegrationFieldsProps {
+    fields: Array<ConnectorConfigField>;
+    guide?: { supportLink?: string; description: string };
+    error?: {
+        message: string;
+        provider_response: string;
+    };
+    onChange: (data: Record<string, string>) => void;
+}
+export const IntegrationForm: React.FC<IntegrationFieldsProps> = ({
+    fields,
+    guide,
+    onChange,
+    error,
+}) => {
+    // Initialize formData with default values from fields
+    const [formData, setFormData] = useState<Record<string, string>>(() => {
+        const initialData: Record<string, string> = {};
+        fields.forEach((field) => {
+            if (field.value !== undefined) {
+                initialData[field.key] = field.value.toString();
+            }
+        });
+        return initialData;
+    });
+    useEffect(() => {
+        const updatedData: Record<string, string> = {};
+        fields.forEach((field) => {
+            if (field.value !== undefined) {
+                updatedData[field.key] = field.value.toString();
+            }
+        });
+        const hasChanges =
+            Object.keys(updatedData).some((key) => updatedData[key] !== formData[key]) ||
+            Object.keys(formData).some((key) => !updatedData.hasOwnProperty(key));
+        if (hasChanges) {
+            setFormData((prev) => ({ ...prev, ...updatedData }));
+        }
+    }, [fields, formData]);
+    useEffect(() => {
+        onChange(formData);
+    }, [formData, onChange]);
+    const handleFieldChange = (key: string, value: string) => {
+        setFormData((prev) => ({
+            ...prev,
+            [key]: value,
+        }));
+    };
+    return (
+        <div>
+            <Spacer direction="vertical" size={8}>
+                {guide && <Alert type="info" message={guide?.description} hasMargin={false} />}
+                {error && <Alert type="error" message={error.message} hasMargin={false} />}
+                {error && <Typography.CodeText>{error.provider_response}</Typography.CodeText>}
+                <Form>
+                    <Spacer direction="vertical" size={20}>
+                        {fields.map((field) => {
+                            return (
+                                <div key={field.key}>
+                                    {(field.type === 'text' ||
+                                        field.type === 'number' ||
+                                        field.type === 'password' ||
+                                        field.type === 'text_area') && (
+                                        <Input
+                                            name={field.key}
+                                            required={field.required}
+                                            placeholder={field.placeholder}
+                                            defaultValue={field.value?.toString()}
+                                            onChange={(value) =>
+                                                handleFieldChange(field.key, value)
+                                            }
+                                            disabled={field.readOnly}
+                                            label={field.label}
+                                            tooltip={field.guide?.tooltip}
+                                            description={field.guide?.description}
+                                        />
+                                    )}
+                                    {field.type === 'select' && (
+                                        <select
+                                            name={field.key}
+                                            required={field.required}
+                                            value={formData[field.key] || ''}
+                                            onChange={(e) =>
+                                                handleFieldChange(field.key, e.target.value)
+                                            }
+                                            disabled={field.readOnly}
+                                        >
+                                            {field.options?.map((option) => (
+                                                <option key={option.value} value={option.value}>
+                                                    {option.label}
+                                                </option>
+                                            ))}
+                                        </select>
+                                    )}
+                                </div>
+                            );
+                        })}
+                    </Spacer>
+                </Form>
+            </Spacer>
+        </div>
+    );
+};

package/src/modules/integration-picker/components/IntegrationList.tsx ADDED Viewed

@@ -0,0 +1,71 @@
+import {
+    ButtonList,
+    Flex,
+    FlexAlign,
+    FlexDirection,
+    FlexGapSize,
+    FlexJustify,
+    Padded,
+    Typography,
+} from '@stackone/malachite';
+import { CATEGORIES_WITH_LABELS } from '../../../shared/categories';
+import { Integration } from '../types';
+interface IntegrationRowProps {
+    integration: Integration;
+}
+const IntegrationRow: React.FC<IntegrationRowProps> = ({ integration }) => {
+    return (
+        <Flex
+            direction={FlexDirection.Horizontal}
+            align={FlexAlign.Center}
+            gapSize={FlexGapSize.Small}
+            justify={FlexJustify.SpaceBetween}
+            width="100%"
+        >
+            <Flex
+                direction={FlexDirection.Horizontal}
+                align={FlexAlign.Center}
+                gapSize={FlexGapSize.Small}
+                justify={FlexJustify.Left}
+                width="100%"
+            >
+                <img
+                    src={`https://app.stackone.com/assets/logos/${integration.provider}.png`}
+                    alt={integration.provider}
+                    style={{ width: '24px', height: '24px' }}
+                />
+                <Typography.Text>{integration.name ?? 'N/A'}</Typography.Text>
+            </Flex>
+            <Typography.SecondaryText>
+                {
+                    CATEGORIES_WITH_LABELS.find((category) => category.value === integration.type)
+                        ?.label
+                }
+            </Typography.SecondaryText>
+        </Flex>
+    );
+};
+export const IntegrationList: React.FC<{
+    integrations: Integration[];
+    onSelect: (integration: Integration) => void;
+}> = ({ integrations, onSelect }) => {
+    return (
+        <>
+            <Padded vertical="medium" horizontal="small" fullHeight={false}>
+                <Typography.SecondaryText>Select integration</Typography.SecondaryText>
+            </Padded>
+            <ButtonList
+                buttons={integrations
+                    ?.filter((integration) => integration.active && integration.name)
+                    .map((integration) => ({
+                        key: integration.provider,
+                        children: <IntegrationRow integration={integration} />,
+                        onClick: () => onSelect(integration),
+                    }))}
+            />
+        </>
+    );
+};

package/src/modules/integration-picker/components/IntegrationPickerContent.tsx ADDED Viewed

@@ -0,0 +1,107 @@
+import React from 'react';
+import { ConnectorConfig, ConnectorConfigField, HubData, Integration } from '../types';
+import { ErrorView } from './views/ErrorView';
+import { IntegrationFormView } from './views/IntegrationFormView';
+import { IntegrationListView } from './views/IntegrationListView';
+import { LoadingView } from './views/LoadingView';
+import { SuccessView } from './views/SuccessView';
+interface IntegrationPickerContentProps {
+    // State flags
+    isLoading: boolean;
+    hasError: boolean;
+    connectionState: {
+        loading: boolean;
+        success: boolean;
+        error?: {
+            message: string;
+            provider_response: string;
+        };
+    };
+    // Data
+    selectedIntegration: Integration | null;
+    connectorData: ConnectorConfig | null;
+    hubData: HubData | null;
+    fields: ConnectorConfigField[];
+    guide?: { supportLink?: string; description: string };
+    // Errors
+    errorHubData: Error | null;
+    errorConnectorData: Error | null;
+    // Actions
+    onSelect: (integration: Integration) => void;
+    onChange: (data: Record<string, string>) => void;
+}
+export const IntegrationPickerContent: React.FC<IntegrationPickerContentProps> = ({
+    isLoading,
+    hasError,
+    connectionState,
+    selectedIntegration,
+    connectorData,
+    hubData,
+    fields,
+    guide,
+    errorHubData,
+    errorConnectorData,
+    onSelect,
+    onChange,
+}) => {
+    // Loading states
+    if (isLoading) {
+        return (
+            <LoadingView
+                title="Loading integration data"
+                description="Please wait, this may take a moment."
+            />
+        );
+    }
+    if (connectionState.loading && selectedIntegration) {
+        return (
+            <LoadingView
+                title={`Connecting to ${selectedIntegration.name}`}
+                description="Please wait, this may take a moment."
+            />
+        );
+    }
+    // Error states
+    if (hasError) {
+        return (
+            <ErrorView
+                message={errorHubData?.message || errorConnectorData?.message || 'Unknown error'}
+            />
+        );
+    }
+    // Success state
+    if (connectionState.success && selectedIntegration) {
+        return <SuccessView integrationName={selectedIntegration.name} />;
+    }
+    // Integration selection flow
+    if (!selectedIntegration) {
+        if (!hubData?.integrations.length) {
+            return <ErrorView message="No integrations found." />;
+        }
+        return <IntegrationListView integrations={hubData.integrations} onSelect={onSelect} />;
+    }
+    // Form view (when integration is selected and connector data is available)
+    if (connectorData) {
+        return (
+            <IntegrationFormView
+                fields={fields}
+                error={connectionState.error}
+                onChange={onChange}
+                guide={guide}
+            />
+        );
+    }
+    // Fallback
+    return null;
+};