@stackone/hub 0.2.1 → 0.4.0

package/src/StackOneHub.tsx

@@ -1,138 +0,0 @@
-import {
-    Card,
-    Flex,
-    FlexAlign,
-    FlexJustify,
-    FooterLinks,
-    MalachiteContext,
-    PartialMalachiteTheme,
-    Typography,
-    applyDarkTheme,
-    applyLightTheme,
-    applyTheme,
-} from '@stackone/malachite';
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import { useEffect } from 'react';
-import { Hub } from './Hub';
-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;
-    appUrl?: string;
-    height?: string;
-    theme?: 'light' | 'dark' | PartialMalachiteTheme;
-    accountId?: string;
-    onSuccess?: () => void;
-    onClose?: () => void;
-    onCancel?: () => void;
-}
-
-export const StackOneHub: React.FC<StackOneHubProps> = ({
-    mode,
-    token,
-    baseUrl,
-    appUrl,
-    height = '500px',
-    theme = 'light',
-    accountId,
-    onSuccess,
-    onClose,
-    onCancel,
-}) => {
-    const defaultBaseUrl = 'https://api.stackone.com';
-    const apiUrl = baseUrl ?? defaultBaseUrl;
-    const defaultDashboardUrl = 'https://app.stackone.com';
-    const dashboardUrl = appUrl ?? defaultDashboardUrl;
-    useEffect(() => {
-        if (theme === 'dark') {
-            applyDarkTheme();
-        } else if (theme === 'light') {
-            applyLightTheme();
-        } else {
-            applyTheme(theme);
-        }
-    }, [theme]);
-
-    const queryClient = new QueryClient({
-        defaultOptions: {
-            queries: {
-                refetchOnWindowFocus: false,
-                retry: 1,
-                retryDelay: 500,
-                refetchOnMount: false,
-                retryOnMount: false,
-            },
-        },
-    });
-
-    if (!token) {
-        return (
-            <MalachiteContext>
-                <ErrorBoundary
-                    fallback={
-                        <Card height={height}>
-                            <ErrorContainer />
-                        </Card>
-                    }
-                >
-                    <Card height={height} footer={<FooterLinks />}>
-                        <Flex justify={FlexJustify.Center} align={FlexAlign.Center} fullHeight>
-                            <Typography.PageTitle>No token provided</Typography.PageTitle>
-                        </Flex>
-                    </Card>
-                </ErrorBoundary>
-            </MalachiteContext>
-        );
-    }
-    if (!mode) {
-        return (
-            <MalachiteContext>
-                <ErrorBoundary
-                    fallback={
-                        <Card height={height}>
-                            <ErrorContainer />
-                        </Card>
-                    }
-                >
-                    <Card height={height} footer={<FooterLinks />}>
-                        <Flex justify={FlexJustify.Center} align={FlexAlign.Center} fullHeight>
-                            <Typography.PageTitle>No mode selected</Typography.PageTitle>
-                        </Flex>
-                    </Card>
-                </ErrorBoundary>
-            </MalachiteContext>
-        );
-    }
-
-    return (
-        <MalachiteContext>
-            <ErrorBoundary
-                fallback={
-                    <Card height={height}>
-                        <ErrorContainer />
-                    </Card>
-                }
-            >
-                <QueryClientProvider client={queryClient}>
-                    <Hub
-                        mode={mode}
-                        token={token}
-                        apiUrl={apiUrl}
-                        dashboardUrl={dashboardUrl}
-                        height={height}
-                        onSuccess={onSuccess}
-                        accountId={accountId}
-                        onClose={onClose}
-                        onCancel={onCancel}
-                    />
-                </QueryClientProvider>
-            </ErrorBoundary>
-        </MalachiteContext>
-    );
-};

package/src/WebComponentWrapper.tsx

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

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

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

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

@@ -1,98 +0,0 @@
-import { Card } from '@stackone/malachite';
-import useFeatureFlags from '../../shared/hooks/useFeatureFlags';
-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;
-    dashboardUrl?: string;
-    onSuccess?: () => void;
-    onClose?: () => void;
-    onCancel?: () => void;
-}
-
-export const IntegrationPicker: React.FC<IntegrationPickerProps> = ({
-    token,
-    baseUrl,
-    height,
-    accountId,
-    onSuccess,
-    dashboardUrl,
-}) => {
-    const isHubLinkAccountReleaseEnabled = useFeatureFlags('hub_link_account_release');
-
-    const {
-        // Data
-        hubData,
-        accountData,
-        connectorData,
-        selectedIntegration,
-        fields,
-        guide,
-
-        // State
-        connectionState,
-        isLoading,
-        hasError,
-
-        // Errors
-        errorHubData,
-        errorConnectorData,
-
-        // Actions
-        setSelectedIntegration,
-        setFormData,
-        handleConnect,
-    } = useIntegrationPicker({
-        token,
-        baseUrl,
-        accountId,
-        onSuccess,
-        dashboardUrl,
-    });
-
-    return (
-        <Card
-            footer={
-                <CardFooter
-                    selectedIntegration={selectedIntegration}
-                    isLoading={connectionState.loading}
-                    onBack={accountData ? undefined : () => setSelectedIntegration(null)}
-                    onNext={handleConnect}
-                />
-            }
-            title={
-                selectedIntegration && (
-                    <CardTitle
-                        selectedIntegration={selectedIntegration}
-                        onBack={accountData ? undefined : () => setSelectedIntegration(null)}
-                        guide={guide}
-                    />
-                )
-            }
-            height={height}
-        >
-            {isHubLinkAccountReleaseEnabled && (
-                <IntegrationPickerContent
-                    isLoading={isLoading}
-                    hasError={hasError}
-                    connectionState={connectionState}
-                    selectedIntegration={selectedIntegration}
-                    connectorData={connectorData?.config ?? 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

@@ -1,129 +0,0 @@
-import { Alert, Dropdown, Form, Input, Spacer, TextArea, 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;
-    });
-
-    // biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
-    useEffect(() => {
-        const updatedData: Record<string, string> = {};
-        fields.forEach((field) => {
-            if (field.value !== undefined) {
-                updatedData[field.key] = field.value.toString();
-            }
-        });
-
-        setFormData((prev) => {
-            const hasChanges =
-                Object.keys(updatedData).some((key) => updatedData[key] !== prev[key]) ||
-                Object.keys(prev).some((key) => !updatedData.hasOwnProperty(key));
-
-            if (hasChanges) {
-                return { ...prev, ...updatedData };
-            }
-            return prev;
-        });
-    }, [fields.length]);
-
-    useEffect(() => {
-        onChange(formData);
-    }, [formData, onChange]);
-
-    const handleFieldChange = (key: string, value: string) => {
-        setFormData((prev) => ({
-            ...prev,
-            [key]: value,
-        }));
-    };
-
-    return (
-        <Spacer direction="vertical" size={8} fullWidth>
-            {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>}
-            <Spacer direction="vertical" size={20} fullWidth>
-                {fields.map((field) => {
-                    const key =
-                        typeof field.key === 'object'
-                            ? JSON.stringify(field.key)
-                            : String(field.key);
-                    return (
-                        <div key={key} style={{ width: '100%' }}>
-                            {(field.type === 'text' ||
-                                field.type === 'number' ||
-                                field.type === 'password') && (
-                                <Input
-                                    name={key}
-                                    required={field.required}
-                                    placeholder={field.placeholder}
-                                    defaultValue={field.value?.toString()}
-                                    onChange={(value: string) => handleFieldChange(key, value)}
-                                    disabled={field.readOnly}
-                                    label={field.label}
-                                    tooltip={field.guide?.tooltip}
-                                    description={field.guide?.description}
-                                    type={field.type}
-                                />
-                            )}
-
-                            {field.type === 'text_area' && (
-                                <TextArea
-                                    name={key}
-                                    required={field.required}
-                                    defaultValue={formData[key] || ''}
-                                    placeholder={field.placeholder}
-                                    onChange={(value: string) => handleFieldChange(key, value)}
-                                    disabled={field.readOnly}
-                                    label={field.label}
-                                    tooltip={field.guide?.tooltip}
-                                />
-                            )}
-                            {field.type === 'select' && (
-                                <Dropdown
-                                    defaultValue={formData[key] || ''}
-                                    disabled={field.readOnly}
-                                    items={
-                                        field.options?.map((option) => ({
-                                            id: option.value,
-                                            label: option.label,
-                                        })) ?? []
-                                    }
-                                    onItemSelected={(value) => handleFieldChange(key, value ?? '')}
-                                    name={key}
-                                    label={field.label}
-                                    tooltip={field.guide?.tooltip}
-                                    description={field.guide?.description}
-                                />
-                            )}
-                        </div>
-                    );
-                })}
-            </Spacer>
-        </Spacer>
-    );
-};

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

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

@@ -1,107 +0,0 @@
-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;
-};

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

@@ -1,92 +0,0 @@
-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;
-    isLoading?: boolean;
-    onBack?: () => void;
-    onNext: () => void;
-}
-
-const CardFooter: React.FC<CardFooterProps> = ({
-    fullWidth = true,
-    selectedIntegration,
-    isLoading,
-    onBack,
-    onNext,
-}) => {
-    const buttons = useMemo(() => {
-        if (!selectedIntegration || isLoading) {
-            return [];
-        }
-
-        const buttons: Array<{
-            label: string;
-            type: 'outline' | 'filled';
-            onClick: () => void;
-            disabled: boolean;
-            loading: boolean;
-        }> = [];
-
-        if (onBack) {
-            buttons.push({
-                label: 'Back',
-                type: 'outline' as const,
-                onClick: onBack,
-                disabled: false,
-                loading: false,
-            });
-        }
-
-        buttons.push({
-            label: 'Confirm',
-            type: 'filled' as const,
-            onClick: onNext,
-            disabled: false,
-            loading: false,
-        });
-
-        return buttons;
-    }, [selectedIntegration, onBack, onNext, isLoading]);
-
-    if (buttons.length === 0) {
-        return <FooterLinks fullWidth={fullWidth} />;
-    }
-
-    return (
-        <Spacer direction="horizontal" size={0} justifyContent="space-between">
-            <FooterLinks fullWidth={fullWidth} />
-            <Padded vertical="none" 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"
-                                variant={button.type}
-                                onClick={button.onClick}
-                                disabled={button.disabled}
-                                loading={button.loading}
-                                iconPosition="end"
-                            >
-                                {button.label}
-                            </Button>
-                        ))}
-                    </Spacer>
-                </Flex>
-            </Padded>
-        </Spacer>
-    );
-};
-
-export default CardFooter;