@stackone/hub 0.1.0

package/src/shared/components/errorBoundary.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+
+class ErrorBoundary extends React.Component<
+    { fallback: React.ReactNode; children: React.ReactNode },
+    { hasError: boolean }
+> {
+    constructor(props: { fallback: React.ReactNode; children: React.ReactNode }) {
+        super(props);
+        this.state = { hasError: false };
+    }
+
+    static getDerivedStateFromError(_error: Error) {
+        // Update state so the next render will show the fallback UI.
+        return { hasError: true };
+    }
+
+    componentDidCatch(_error: Error, _info: React.ErrorInfo) {
+        // TODO: Log error to Sentry
+    }
+
+    render() {
+        if (this.state.hasError) {
+            // You can render any custom fallback UI
+            return this.props.fallback;
+        }
+
+        return this.props.children;
+    }
+}
+
+export default ErrorBoundary;

package/src/shared/components/loading.tsx

@@ -0,0 +1,30 @@
+import {
+    Flex,
+    FlexAlign,
+    FlexDirection,
+    FlexGapSize,
+    FlexJustify,
+    Spinner,
+    Typography,
+} from '@stackone/malachite';
+
+export const Loading: React.FC<{
+    title: string;
+    description: string;
+}> = ({ title, description }) => {
+    return (
+        <Flex
+            justify={FlexJustify.Center}
+            align={FlexAlign.Center}
+            direction={FlexDirection.Vertical}
+            gapSize={FlexGapSize.Small}
+            fullHeight
+        >
+            <Spinner size="xxxsmall" />
+            <Typography.Text fontWeight="bold" size="large">
+                {title}
+            </Typography.Text>
+            <Typography.SecondaryText>{description}</Typography.SecondaryText>
+        </Flex>
+    );
+};

package/src/shared/components/success.tsx

@@ -0,0 +1,33 @@
+import {
+    CustomIcons,
+    Flex,
+    FlexAlign,
+    FlexDirection,
+    FlexGapSize,
+    FlexJustify,
+    Typography,
+} from '@stackone/malachite';
+
+interface SuccessProps {
+    integrationName: string;
+}
+
+const Success: React.FC<SuccessProps> = ({ integrationName }) => (
+    <Flex
+        justify={FlexJustify.Center}
+        align={FlexAlign.Center}
+        direction={FlexDirection.Vertical}
+        gapSize={FlexGapSize.Small}
+        fullHeight
+    >
+        <CustomIcons.CheckCircleFilledIcon />
+        <Typography.Text fontWeight="bold" size="large">
+            Connection Successful
+        </Typography.Text>
+        <Typography.SecondaryText>
+            Account successfully connected to {integrationName}
+        </Typography.SecondaryText>
+    </Flex>
+);
+
+export default Success;

package/src/shared/httpClient.ts

@@ -0,0 +1,79 @@
+export interface ErrorDetails {
+    message: string;
+    statusCode: number;
+}
+
+export const isErrorsDetails = (error: unknown): error is ErrorDetails => {
+    return (error as ErrorDetails).statusCode !== undefined;
+};
+
+export interface RequestParams {
+    url: string;
+    body?: Record<string, unknown>;
+    headers?: Record<string, string>;
+    requestFn?: typeof fetch;
+    logger?: Console;
+}
+
+const isTokenExpired = (response: Response): boolean => {
+    if (response?.status === 401 || response?.status === 403) {
+        return true;
+    }
+    return false;
+};
+
+export async function request<T>({
+    url,
+    body,
+    headers,
+    method,
+    requestFn = fetch,
+    logger = console,
+}: RequestParams & { method: 'PATCH' | 'POST' | 'DELETE' | 'GET' }): Promise<T | null> {
+    try {
+        const response = await requestFn(url, {
+            method,
+            headers,
+            body: JSON.stringify(body),
+        });
+
+        if (isTokenExpired(response)) {
+            logger.warn('Token expired');
+            return null;
+        } else {
+            if (!response.ok) {
+                const errorResponse = (await response.json()) as ErrorDetails;
+                if (errorResponse && isErrorsDetails(errorResponse)) {
+                    throw new Error(
+                        JSON.stringify({
+                            status: errorResponse.statusCode,
+                            message: errorResponse.message,
+                        }),
+                    );
+                }
+            }
+
+            return (await response.json()) as T;
+        }
+    } catch (error) {
+        logger.error(`Error making request to ${url}`, error);
+
+        throw error;
+    }
+}
+
+export async function postRequest<T>(params: RequestParams): Promise<T | null> {
+    return request<T>({ ...params, method: 'POST' });
+}
+
+export async function patchRequest<T>(params: RequestParams): Promise<T | null> {
+    return request<T>({ ...params, method: 'PATCH' });
+}
+
+export async function deleteRequest<T>(params: RequestParams): Promise<T | null> {
+    return request<T>({ ...params, method: 'DELETE' });
+}
+
+export async function getRequest<T>(params: RequestParams): Promise<T | null> {
+    return request<T>({ ...params, method: 'GET' });
+}

package/src/types/types.ts

@@ -0,0 +1 @@
+export type HubModes = 'integration-picker' | 'csv-importer';

package/tsconfig.json

@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "target": "ES6",
+    "module": "ESNext",
+    "jsx": "react-jsx",
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "moduleResolution": "Node",
+    "declaration": false,
+    "outDir": "dist",
+    "sourceMap": true,
+    "jsxImportSource": "react",
+    "forceConsistentCasingInFileNames": true
+  },
+  "include": ["src"],
+  "exclude": ["**/*.d.ts"],
+  "files": ["src/index.ts"]
+}

package/vite.config.ts

@@ -0,0 +1,11 @@
+import react from '@vitejs/plugin-react-swc';
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+    plugins: [react()],
+    server: {
+        port: 3000,
+        // hmr: true,
+    },
+    root: 'dev',
+});

package/yalc.lock

@@ -0,0 +1,9 @@
+{
+  "version": "v1",
+  "packages": {
+    "@stackone/malachite": {
+      "signature": "b3621bd0c8195b6fd4451f514c72a618",
+      "file": true
+    }
+  }
+}