@stackone/hub 0.1.0

package/src/modules/integration-picker/components/cardFooter.tsx

@@ -0,0 +1,88 @@
+import {
+    Button,
+    Flex,
+    FlexDirection,
+    FlexJustify,
+    FooterLinks,
+    Padded,
+    Spacer,
+} from '@stackone/malachite';
+import { useMemo } from 'react';
+import { Integration } from '../types';
+
+interface CardFooterProps {
+    selectedIntegration: Integration | null;
+    fullWidth?: boolean;
+    onBack?: () => void;
+    onNext: () => void;
+}
+
+const CardFooter: React.FC<CardFooterProps> = ({
+    fullWidth = true,
+    selectedIntegration,
+    onBack,
+    onNext,
+}) => {
+    const buttons = useMemo(() => {
+        if (!selectedIntegration) return [];
+
+        const buttons: Array<{
+            label: string;
+            type: 'outline' | 'filled';
+            onClick: () => void;
+            disabled: boolean;
+            loading: boolean;
+        }> = [
+            {
+                label: 'Next',
+                type: 'filled' as const,
+                onClick: onNext,
+                disabled: false,
+                loading: false,
+            },
+        ];
+
+        if (onBack) {
+            buttons.push({
+                label: 'Back',
+                type: 'outline' as const,
+                onClick: onBack,
+                disabled: false,
+                loading: false,
+            });
+        }
+
+        return buttons;
+    }, [selectedIntegration, onBack, onNext]);
+
+    if (buttons.length === 0) {
+        return <FooterLinks fullWidth={fullWidth} />;
+    }
+
+    return (
+        <Spacer direction="horizontal" size={0} justifyContent="space-between">
+            <FooterLinks fullWidth={fullWidth} />
+            <Padded vertical="medium" horizontal="medium" fullHeight={false}>
+                <Flex direction={FlexDirection.Horizontal} justify={FlexJustify.Right}>
+                    <Spacer direction="horizontal" size={10}>
+                        {buttons.map((button) => (
+                            <Button
+                                key={button.label}
+                                size="small"
+                                type={button.type}
+                                onClick={button.onClick}
+                                disabled={button.disabled}
+                                loading={button.loading}
+                                iconPosition="end"
+                            >
+                                {button.label}
+                            </Button>
+                        ))}
+                    </Spacer>
+                </Flex>
+            </Padded>
+        </Spacer>
+    );
+};
+
+export default CardFooter;

package/src/modules/integration-picker/components/cardTitle.tsx

@@ -0,0 +1,51 @@
+import {
+    Button,
+    Flex,
+    FlexAlign,
+    FlexDirection,
+    FlexGapSize,
+    FlexJustify,
+    Typography,
+} from '@stackone/malachite';
+import { Integration } from '../types';
+
+interface CardTitleProps {
+    selectedIntegration: Integration;
+    onBack?: () => void;
+    guide?: { supportLink?: string; description: string };
+}
+
+const CardTitle: React.FC<CardTitleProps> = ({ selectedIntegration, onBack, guide }) => {
+    return (
+        <Flex
+            direction={FlexDirection.Horizontal}
+            align={FlexAlign.Center}
+            gapSize={FlexGapSize.Small}
+            justify={FlexJustify.SpaceBetween}
+        >
+            <Flex
+                direction={FlexDirection.Horizontal}
+                align={FlexAlign.Center}
+                gapSize={FlexGapSize.Small}
+                justify={FlexJustify.Left}
+            >
+                {onBack && <Button type="ghost" onClick={onBack} icon="←" size="small" />}
+                <img
+                    src={`https://app.stackone.com/assets/logos/${selectedIntegration.provider}.png`}
+                    alt={selectedIntegration.provider}
+                    style={{ width: '24px', height: '24px' }}
+                />
+                <Typography.Text fontWeight="semi-bold" size="large">
+                    {selectedIntegration.name}
+                </Typography.Text>
+            </Flex>
+            <Typography.Link href={guide?.supportLink} target="_blank">
+                <Button type="outline" size="medium">
+                    Connection guide
+                </Button>
+            </Typography.Link>
+        </Flex>
+    );
+};
+
+export default CardTitle;

package/src/modules/integration-picker/components/views/ErrorView.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+interface ErrorViewProps {
+    message: string;
+}
+
+export const ErrorView: React.FC<ErrorViewProps> = ({ message }) => {
+    return <div>Error: {message}</div>;
+};

package/src/modules/integration-picker/components/views/IntegrationFormView.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { ConnectorConfigField } from '../../types';
+import { IntegrationForm } from '../IntegrationFields';
+
+interface IntegrationFormViewProps {
+    fields: ConnectorConfigField[];
+    error?: {
+        message: string;
+        provider_response: string;
+    };
+    guide?: { supportLink?: string; description: string };
+    onChange: (data: Record<string, string>) => void;
+}
+
+export const IntegrationFormView: React.FC<IntegrationFormViewProps> = ({
+    fields,
+    error,
+    guide,
+    onChange,
+}) => {
+    return <IntegrationForm fields={fields} error={error} onChange={onChange} guide={guide} />;
+};

package/src/modules/integration-picker/components/views/IntegrationListView.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { Integration } from '../../types';
+import { IntegrationList } from '../IntegrationList';
+
+interface IntegrationListViewProps {
+    integrations: Integration[];
+    onSelect: (integration: Integration) => void;
+}
+
+export const IntegrationListView: React.FC<IntegrationListViewProps> = ({
+    integrations,
+    onSelect,
+}) => {
+    if (!integrations.length) {
+        return <div>No integrations found.</div>;
+    }
+
+    return <IntegrationList integrations={integrations} onSelect={onSelect} />;
+};

package/src/modules/integration-picker/components/views/LoadingView.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { Loading } from '../../../../shared/components/loading';
+
+interface LoadingViewProps {
+    title: string;
+    description: string;
+}
+
+export const LoadingView: React.FC<LoadingViewProps> = ({ title, description }) => {
+    return <Loading title={title} description={description} />;
+};

package/src/modules/integration-picker/components/views/SuccessView.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import Success from '../../../../shared/components/success';
+
+interface SuccessViewProps {
+    integrationName: string;
+}
+
+export const SuccessView: React.FC<SuccessViewProps> = ({ integrationName }) => {
+    return <Success integrationName={integrationName} />;
+};

package/src/modules/integration-picker/components/views/index.ts

@@ -0,0 +1,5 @@
+export { IntegrationListView } from './IntegrationListView';
+export { IntegrationFormView } from './IntegrationFormView';
+export { LoadingView } from './LoadingView';
+export { ErrorView } from './ErrorView';
+export { SuccessView } from './SuccessView';

package/src/modules/integration-picker/hooks/useIntegrationPicker.ts

@@ -0,0 +1,221 @@
+import { useQuery } from '@tanstack/react-query';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import {
+    connectAccount,
+    getAccountData,
+    getConnectorConfig,
+    getHubData,
+    updateAccount,
+} from '../queries';
+import { Integration } from '../types';
+
+const DUMMY_VALUE = 'totally-fake-value';
+
+interface UseIntegrationPickerProps {
+    token: string;
+    baseUrl: string;
+    accountId?: string;
+    onSuccess?: () => void;
+}
+
+export const useIntegrationPicker = ({
+    token,
+    baseUrl,
+    accountId,
+    onSuccess,
+}: UseIntegrationPickerProps) => {
+    const [selectedIntegration, setSelectedIntegration] = useState<Integration | null>(null);
+    const [formData, setFormData] = useState<Record<string, string>>({});
+    const [connectionState, setConnectionState] = useState<{
+        loading: boolean;
+        success: boolean;
+        error?: {
+            message: string;
+            provider_response: string;
+        };
+    }>({
+        loading: false,
+        success: false,
+    });
+
+    // Fetch account data for editing scenario
+    const {
+        data: accountData,
+        isLoading: isLoadingAccountData,
+        error: errorAccountData,
+    } = useQuery({
+        queryKey: ['accountData', accountId],
+        queryFn: async () => {
+            if (!accountId) return null;
+            return getAccountData(baseUrl, token, accountId);
+        },
+        enabled: !!accountId,
+    });
+
+    // Fetch hub data (list of integrations)
+    const {
+        data: hubData,
+        isLoading: isLoadingHubData,
+        error: errorHubData,
+    } = useQuery({
+        queryKey: ['hubData', accountData?.provider],
+        queryFn: () => {
+            // For account editing: fetch hub data with specific provider
+            if (accountData?.provider) {
+                return getHubData(token, baseUrl, accountData.provider);
+            }
+            // For new setup: fetch all integrations
+            return getHubData(token, baseUrl);
+        },
+        enabled: !accountId || !!accountData, // Enable when no accountId OR when we have account data
+    });
+
+    // Auto-select integration when editing an account
+    useEffect(() => {
+        if (accountData && hubData) {
+            const matchingIntegration = hubData.integrations.find(
+                (integration) => integration.provider === accountData.provider,
+            );
+            setSelectedIntegration(matchingIntegration ?? null);
+        }
+    }, [accountData, hubData]);
+
+    // Fetch connector configuration
+    const {
+        data: connectorData,
+        isLoading: isLoadingConnectorData,
+        error: errorConnectorData,
+    } = useQuery({
+        queryKey: ['connectorData', selectedIntegration?.provider, accountData?.provider],
+        queryFn: async () => {
+            if (selectedIntegration) {
+                return getConnectorConfig(baseUrl, token, selectedIntegration.provider);
+            }
+            if (accountData) {
+                return getConnectorConfig(baseUrl, token, accountData.provider);
+            }
+            return null;
+        },
+        enabled: Boolean(selectedIntegration) || Boolean(accountData),
+    });
+
+    // Extract fields and guide from connector config
+    const { fields, guide } = useMemo(() => {
+        if (!connectorData || !selectedIntegration) {
+            return { fields: [] };
+        }
+
+        const authConfig =
+            connectorData.authentication?.[selectedIntegration.authentication_config_key];
+        const authConfigForEnvironment = authConfig?.[selectedIntegration.environment];
+
+        const baseFields = authConfigForEnvironment?.fields || [];
+
+        const fieldsWithPrefilledValues = baseFields.map((field) => {
+            const setupValue = accountData?.setupInformation?.[field.key];
+
+            if (accountData && (field.secret || field.type === 'password')) {
+                return {
+                    ...field,
+                    value: DUMMY_VALUE,
+                };
+            }
+
+            return {
+                ...field,
+                value: setupValue !== undefined ? setupValue : field.value,
+            };
+        });
+
+        return {
+            fields: fieldsWithPrefilledValues,
+            guide: authConfigForEnvironment?.guide,
+        };
+    }, [connectorData, selectedIntegration, accountData]);
+
+    const handleConnect = useCallback(async () => {
+        if (!selectedIntegration) return;
+
+        setConnectionState({ loading: true, success: false });
+
+        try {
+            // Clean up dummy values for secret fields before submission
+            const cleanedFormData = { ...formData };
+            if (accountData) {
+                fields.forEach((field) => {
+                    if (
+                        (field.secret || field.type === 'password') &&
+                        cleanedFormData[field.key] === DUMMY_VALUE
+                    ) {
+                        delete cleanedFormData[field.key];
+                    }
+                });
+            }
+
+            if (accountId) {
+                await updateAccount(
+                    baseUrl,
+                    accountId,
+                    token,
+                    selectedIntegration.provider,
+                    cleanedFormData,
+                );
+            } else {
+                await connectAccount(baseUrl, token, selectedIntegration.provider, cleanedFormData);
+            }
+
+            setConnectionState({ loading: false, success: true });
+            setTimeout(() => {
+                onSuccess?.();
+            }, 2000);
+        } catch (error) {
+            const parsedError = JSON.parse((error as Error).message) as {
+                status: number;
+                message: string;
+            };
+
+            const doubleParsedError = JSON.parse(parsedError.message) as {
+                message: string;
+                provider_response: string;
+            };
+
+            setConnectionState({
+                loading: false,
+                success: false,
+                error: {
+                    message: doubleParsedError.message,
+                    provider_response: doubleParsedError.provider_response,
+                },
+            });
+        }
+    }, [baseUrl, token, selectedIntegration, formData, onSuccess, accountData, fields, accountId]);
+
+    const isLoading = isLoadingHubData || isLoadingConnectorData || isLoadingAccountData;
+    const hasError = !!(errorHubData || errorConnectorData || errorAccountData);
+
+    return {
+        // Data
+        hubData,
+        accountData,
+        connectorData,
+        selectedIntegration,
+        fields,
+        guide,
+
+        // State
+        formData,
+        connectionState,
+        isLoading,
+        hasError,
+
+        // Errors
+        errorHubData,
+        errorConnectorData,
+        errorAccountData,
+
+        // Actions
+        setSelectedIntegration,
+        setFormData,
+        handleConnect,
+    };
+};

package/src/modules/integration-picker/queries.ts

@@ -0,0 +1,78 @@
+import { getRequest, patchRequest, postRequest } from '../../shared/httpClient';
+import { AccountData, ConnectorConfig, HubData } from './types';
+
+export const getHubData = async (token: string, baseUrl: string, provider?: string) => {
+    const headers: Record<string, string> = {
+        'Content-Type': 'application/json',
+        'x-hub-session-token': token,
+    };
+
+    // Add provider header when filtering by specific provider
+    if (provider) {
+        headers['x-hub-provider'] = provider;
+    }
+
+    return await getRequest<HubData>({
+        url: `${baseUrl}/hub/connectors`,
+        headers,
+    });
+};
+
+export const getConnectorConfig = async (baseUrl: string, token: string, connectorKey: string) => {
+    return await getRequest<ConnectorConfig>({
+        url: `${baseUrl}/hub/connectors/${connectorKey}`,
+        headers: {
+            'Content-Type': 'application/json',
+            'x-hub-session-token': token,
+        },
+    });
+};
+
+export const connectAccount = async (
+    baseUrl: string,
+    token: string,
+    provider: string,
+    credentials: Record<string, unknown>,
+) => {
+    return await postRequest<ConnectorConfig>({
+        url: `${baseUrl}/hub/accounts`,
+        headers: {
+            'Content-Type': 'application/json',
+            'x-hub-session-token': token,
+        },
+        body: {
+            provider,
+            credentials,
+        },
+    });
+};
+
+export const updateAccount = async (
+    baseUrl: string,
+    accountId: string,
+    token: string,
+    provider: string,
+    credentials: Record<string, unknown>,
+) => {
+    return await patchRequest<ConnectorConfig>({
+        url: `${baseUrl}/hub/accounts/${accountId}`,
+        headers: {
+            'Content-Type': 'application/json',
+            'x-hub-session-token': token,
+        },
+        body: {
+            provider,
+            credentials,
+        },
+    });
+};
+
+export const getAccountData = async (baseUrl: string, token: string, accountId: string) => {
+    return await getRequest<AccountData>({
+        url: `${baseUrl}/hub/accounts/${accountId}`,
+        headers: {
+            'Content-Type': 'application/json',
+            'x-hub-session-token': token,
+        },
+    });
+};

package/src/modules/integration-picker/types.ts

@@ -0,0 +1,60 @@
+export interface Integration {
+    active: boolean;
+    name: string;
+    provider: string;
+    type: string;
+    version: string;
+    authentication_config_key: string;
+    environment: string;
+}
+
+export interface HubData {
+    integrations: Array<Integration>;
+}
+
+export interface ConnectorConfigField {
+    type?: 'text' | 'password' | 'number' | 'select' | 'text_area';
+    label: string;
+    key: string;
+    required: boolean;
+    readOnly: boolean;
+    secret: boolean;
+    placeholder: string;
+    options?: Array<{
+        label: string;
+        value: string;
+    }>;
+    guide?: {
+        description: string;
+        tooltip: string;
+    };
+    value?: string | number;
+    condition?: string;
+    validation?: {
+        type: 'html-pattern' | 'domain';
+        pattern: string;
+        error?: string;
+    };
+}
+
+export interface ConnectorConfig {
+    key: string;
+    name: string;
+    authentication: {
+        [authKey: string]: {
+            [environment: string]: {
+                fields: Array<ConnectorConfigField>;
+                guide?: {
+                    supportLink?: string;
+                    description: string;
+                };
+            };
+        };
+    };
+}
+
+export interface AccountData {
+    account_id: string;
+    provider: string;
+    setupInformation: Record<string, string>;
+}

package/src/shared/categories.ts

@@ -0,0 +1,55 @@
+export const CATEGORIES = [
+    'ats',
+    'crm',
+    'hris',
+    'marketing',
+    'iam',
+    'lms',
+    'documents',
+    'ticketing',
+    'screening',
+    'messaging',
+];
+
+export const CATEGORIES_WITH_LABELS = [
+    {
+        label: 'HRIS',
+        value: 'hris',
+    },
+    {
+        label: 'ATS',
+        value: 'ats',
+    },
+    {
+        label: 'CRM',
+        value: 'crm',
+    },
+    {
+        label: 'Marketing',
+        value: 'marketing',
+    },
+    {
+        label: 'IAM',
+        value: 'iam',
+    },
+    {
+        label: 'LMS',
+        value: 'lms',
+    },
+    {
+        label: 'Documents',
+        value: 'documents',
+    },
+    {
+        label: 'Ticketing',
+        value: 'ticketing',
+    },
+    {
+        label: 'Screening',
+        value: 'screening',
+    },
+    {
+        label: 'Messaging',
+        value: 'messaging',
+    },
+];

package/src/shared/components/error.tsx

@@ -0,0 +1,33 @@
+import {
+    CustomIcons,
+    Flex,
+    FlexAlign,
+    FlexDirection,
+    FlexGapSize,
+    FlexJustify,
+    Typography,
+    useTheme,
+} from '@stackone/malachite';
+
+const ErrorContainer: React.FC = () => {
+    const { colors } = useTheme();
+    return (
+        <Flex
+            justify={FlexJustify.Center}
+            align={FlexAlign.Center}
+            direction={FlexDirection.Vertical}
+            gapSize={FlexGapSize.Small}
+            fullHeight
+        >
+            <CustomIcons.RejectIcon style={{ color: colors.redForeground }} />
+            <Typography.Text fontWeight="bold" size="large">
+                Error
+            </Typography.Text>
+            <Typography.SecondaryText>
+                Something went wrong, our team has been notified.
+            </Typography.SecondaryText>
+        </Flex>
+    );
+};
+
+export default ErrorContainer;