kyd-shared-badge 0.3.68 → 0.3.69

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kyd-shared-badge",
-  "version": "0.3.68",
+  "version": "0.3.69",
   "private": false,
   "main": "./src/index.ts",
   "module": "./src/index.ts",

package/src/connect/ConnectAccounts.tsx

@@ -0,0 +1,221 @@
+import React, { useMemo, useState } from 'react';
+import { useRouter } from 'next/navigation';
+import { ProviderIcon } from '../utils/provider';
+import { normalizeLinkedInInput } from './linkedin';
+import type { ConnectAccountsProps } from './types';
+
+function byPriority(a: string, b: string) {
+  const pr = (id: string) => (id === 'github' ? 0 : id === 'linkedin' ? 1 : 2);
+  const da = pr(a.toLowerCase());
+  const db = pr(b.toLowerCase());
+  return da - db;
+}
+
+export function ConnectAccounts(props: ConnectAccountsProps) {
+  const {
+    providers,
+    connected,
+    idToken,
+    apiGatewayUrl,
+    companyId,
+    needsReconnectIds,
+    sort = true,
+    buildOAuthState,
+    redirectUriOverrides,
+    onConnected,
+    onDisconnected,
+    onError,
+    className,
+  } = props;
+
+  const router = useRouter();
+  const [selectedProviderId, setSelectedProviderId] = useState<string | null>(null);
+  const [linkUrl, setLinkUrl] = useState('');
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const apiBase = apiGatewayUrl || (typeof process !== 'undefined' ? (process.env.NEXT_PUBLIC_API_GATEWAY_URL as string) : '');
+  const connectedIds = useMemo(() => new Set((connected || []).map(c => c.id.toLowerCase())), [connected]);
+  const reconnectIds = useMemo(() => new Set((needsReconnectIds || []).map(id => id.toLowerCase())), [needsReconnectIds]);
+
+  const list = useMemo(() => {
+    const arr = [...providers];
+    if (!sort) return arr;
+    return arr.sort((a, b) => {
+      const pr = byPriority(a.id, b.id);
+      if (pr !== 0) return pr;
+      return a.name.localeCompare(b.name);
+    });
+  }, [providers, sort]);
+
+  const getRedirectUri = (providerId: string) => {
+    if (redirectUriOverrides && redirectUriOverrides[providerId as keyof typeof redirectUriOverrides]) {
+      return redirectUriOverrides[providerId as keyof typeof redirectUriOverrides] as string;
+    }
+    if (typeof window !== 'undefined') {
+      const origin = window.location.origin;
+      return `${origin}/api/auth/${providerId}/callback`;
+    }
+    return '';
+  };
+
+  const buildState = () => {
+    const baseStateObj: Record<string, string> = {};
+    if (companyId) baseStateObj.companyId = companyId;
+    const extra = typeof buildOAuthState === 'function' ? buildOAuthState() : undefined;
+    if (typeof extra === 'string') return extra;
+    const obj = { ...baseStateObj, ...(extra || {}) } as Record<string, string | number | boolean>;
+    // default to JSON string for safety across providers
+    try { return JSON.stringify(obj); } catch { return ''; }
+  };
+
+  const onDisconnect = async (providerId: string) => {
+    try {
+      const res = await fetch(`${apiBase}/user/disconnect`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          'Authorization': `Bearer ${idToken}`,
+        },
+        body: JSON.stringify({ provider: providerId, companyId })
+      });
+      const data = await res.json().catch(() => ({}));
+      if (!res.ok) throw new Error(data?.error || `Failed to disconnect ${providerId}.`);
+      if (onDisconnected) onDisconnected(providerId);
+    } catch (e) {
+      const err = e as Error;
+      if (onError) onError(err.message || 'Failed to disconnect');
+    }
+  };
+
+  const onSubmitLink = async (providerId: string) => {
+    const provider = providers.find(p => p.id.toLowerCase() === providerId.toLowerCase());
+    if (!provider || !provider.endpoint) return;
+    if (!linkUrl) return onError && onError(`Please enter your ${provider.name} profile URL.`);
+    try {
+      setIsSubmitting(true);
+      const urlToSend = provider.id.toLowerCase() === 'linkedin' ? normalizeLinkedInInput(linkUrl) : linkUrl;
+      const res = await fetch(`${apiBase}${provider.endpoint}`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          'Authorization': `Bearer ${idToken}`,
+        },
+        body: JSON.stringify(companyId ? { profileUrl: urlToSend, companyId } : { profileUrl: urlToSend })
+      });
+      const data = await res.json().catch(() => ({}));
+      if (!res.ok) throw new Error(data?.error || `Failed to sync ${provider.name} profile.`);
+      setSelectedProviderId(null);
+      setLinkUrl('');
+      if (onConnected) onConnected(providerId);
+    } catch (e) {
+      const err = e as Error;
+      if (onError) onError(err.message || 'Failed to connect');
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  const onOAuth = (providerId: string) => {
+    const id = providerId.toLowerCase();
+    const redirectUri = getRedirectUri(id);
+    const state = buildState();
+    // Lazy import builder to avoid circular deps
+    // eslint-disable-next-line @typescript-eslint/no-var-requires
+    const { buildOAuthUrl } = require('./oauth');
+    const url = buildOAuthUrl({ providerId: id, redirectUri, state });
+    if (url) router.push(url);
+  };
+
+  return (
+    <div className={className}>
+      {list.map((provider) => {
+        const providerId = provider.id;
+        const isConnected = connectedIds.has(providerId.toLowerCase());
+        const needsReconnect = reconnectIds.has(providerId.toLowerCase());
+        const isUrl = (provider.connectionType || 'url') === 'url' || provider.connectionType === 'link';
+        const isOauth = provider.connectionType === 'oauth';
+        return (
+          <div key={providerId} className="group flex items-center justify-between p-2 rounded-lg transition-colors hover:bg-[var(--icon-button-secondary)]/10">
+            <div className="flex items-center gap-3">
+              <ProviderIcon name={providerId} className={`sm:size-7 size-5 ${provider.iconColor || 'text-gray-500'}`} />
+              <span className="font-medium sm:text-base text-sm" style={{ color: 'var(--text-main)'}}>{provider.name}</span>
+              {provider.beta ? (
+                <span
+                  className="ml-2 inline-block rounded-full px-2 py-0.5 text-xs font-semibold bg-blue-100 text-blue-700 border border-blue-200"
+                  style={{ verticalAlign: 'middle', letterSpacing: '0.05em' }}
+                >
+                  Beta
+                </span>
+              ) : null}
+            </div>
+
+            {isConnected ? (
+              <div className="relative flex items-center">
+                <div className="flex items-center gap-2 transition-opacity group-hover:opacity-0" style={{ color: 'var(--success-green)'}}>
+                  {/* Check icon via CSS/emoji to avoid extra deps */}
+                  <span className="w-4 h-4 inline-block">✔</span>
+                  <span className="text-sm font-medium">Connected</span>
+                </div>
+                <div className="absolute right-0 opacity-0 transition-opacity group-hover:opacity-100">
+                  <button
+                    onClick={() => onDisconnect(providerId)}
+                    className="inline-flex items-center gap-1.5 px-3 py-1.5 text-sm text-red-600 hover:text-red-700"
+                  >
+                    <span className="w-3 h-3 inline-block">✕</span>
+                    <span>Disconnect</span>
+                  </button>
+                </div>
+              </div>
+            ) : (
+              <div className="flex items-center gap-2">
+                {selectedProviderId === providerId && isUrl ? (
+                  <form onSubmit={(e) => { e.preventDefault(); onSubmitLink(providerId); }} className="flex items-center gap-2">
+                    <div className="relative">
+                      <input
+                        type="url"
+                        value={linkUrl}
+                        onChange={(e) => setLinkUrl(e.target.value)}
+                        placeholder={provider.placeholder || 'https://example.com/your-profile'}
+                        required
+                        className="w-72 border bg-transparent p-2 text-sm rounded"
+                        style={{ color: 'var(--text-main)', borderColor: 'var(--icon-button-secondary)'}}
+                        onPaste={providerId === 'linkedin' ? (e) => { const text = e.clipboardData.getData('text'); setLinkUrl(normalizeLinkedInInput(text)); e.preventDefault(); } : undefined}
+                        onBlur={providerId === 'linkedin' ? (() => setLinkUrl(normalizeLinkedInInput(linkUrl))) : undefined}
+                      />
+                    </div>
+                    <button type="submit" disabled={isSubmitting} className="px-3 py-2 rounded bg-[var(--icon-accent)] text-white">
+                      {isSubmitting ? 'Connecting…' : 'Connect'}
+                    </button>
+                  </form>
+                ) : (
+                  <>
+                    <button
+                      onClick={() => (isOauth ? onOAuth(providerId) : setSelectedProviderId(providerId))}
+                      className="bg-[var(--icon-button-secondary)] text-[var(--text-main)] hover:bg-[var(--icon-accent)] hover:text-white border-0 sm:px-4 px-3 py-1 sm:py-2 rounded"
+                    >
+                      <span className="sm:text-base text-sm">Connect</span>
+                    </button>
+                    {needsReconnect && (
+                      <button
+                        onClick={() => onDisconnect(providerId)}
+                        className="inline-flex items-center justify-center gap-1.5 px-4 py-2 text-sm rounded border"
+                        style={{ color: 'var(--text-main)', borderColor: 'var(--icon-button-secondary)'}}
+                      >
+                        <span className="w-3 h-3 inline-block">✕</span>
+                        <span>Remove</span>
+                      </button>
+                    )}
+                  </>
+                )}
+              </div>
+            )}
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+export default ConnectAccounts;
+
+

package/src/connect/linkedin.ts

@@ -0,0 +1,48 @@
+export function normalizeLinkedInInput(raw: string): string {
+  let working = (raw || '').trim();
+  if (!working) return '';
+  working = working.replace(/^['"]|['"]$/g, '');
+  const lower = working.toLowerCase();
+
+  const buildFromHandle = (handleRaw: string) => {
+    let handle = (handleRaw || '').trim();
+    handle = handle.replace(/^@+/, '');
+    handle = handle.replace(/^in\//i, '');
+    handle = handle.replace(/^\/+/, '');
+    handle = handle.split('?')[0].split('#')[0];
+    handle = handle.replace(/[^a-zA-Z0-9._-]/g, '-');
+    handle = handle.replace(/-+/g, '-').replace(/^-+|-+$/g, '');
+    return handle ? `https://www.linkedin.com/in/${handle}` : 'https://www.linkedin.com/';
+  };
+
+  if (lower.includes('linkedin.com')) {
+    let urlStr = working;
+    if (!/^https?:\/\//i.test(urlStr)) {
+      urlStr = 'https://' + urlStr.replace(/^\/+/, '');
+    }
+    try {
+      const u = new URL(urlStr);
+      const parts = (u.pathname || '').split('/').filter(Boolean);
+      const reserved = new Set(['pub', 'mwlite', 'profile', 'redir', 'sales', 'company', 'school', 'feed', 'posts', 'pulse']);
+      let handle = '';
+      const inIndex = parts.findIndex(p => p.toLowerCase() === 'in');
+      if (inIndex >= 0 && parts[inIndex + 1]) {
+        handle = parts[inIndex + 1];
+      } else {
+        const candidates = parts.filter(p => !reserved.has(p.toLowerCase()));
+        handle = candidates[candidates.length - 1] || '';
+      }
+      return buildFromHandle(handle);
+    } catch {
+      // fall through to handle mode
+    }
+  }
+
+  if (/^https?:\/\//i.test(working) || /^www\./i.test(working)) {
+    return working;
+  }
+
+  return buildFromHandle(working);
+}
+
+

package/src/connect/oauth.ts

@@ -0,0 +1,44 @@
+type KnownProvider = 'github' | 'gitlab' | 'stackoverflow';
+
+const env = (key: string): string | undefined => {
+  // Access process.env directly; Next.js will inline NEXT_PUBLIC_* at build time
+  try { return (process.env as any)[key]; } catch { return undefined; }
+};
+
+const CLIENT_IDS: Record<KnownProvider, string | undefined> = {
+  github: env('NEXT_PUBLIC_GITHUB_CLIENT_ID'),
+  gitlab: env('NEXT_PUBLIC_GITLAB_CLIENT_ID'),
+  stackoverflow: env('NEXT_PUBLIC_STACKOVERFLOW_CLIENT_ID'),
+};
+
+const DEFAULT_SCOPES: Record<KnownProvider, string> = {
+  github: 'read:user,repo',
+  gitlab: 'read_api read_user read_repository openid profile email',
+  stackoverflow: '',
+};
+
+export function buildOAuthUrl(params: {
+  providerId: KnownProvider | string;
+  redirectUri: string;
+  state?: string;
+  scopeOverride?: string;
+}): string {
+  const id = (params.providerId || '').toLowerCase() as KnownProvider;
+  const clientId = CLIENT_IDS[id as KnownProvider];
+  const scope = params.scopeOverride ?? DEFAULT_SCOPES[id as KnownProvider] ?? '';
+  const redirect = encodeURIComponent(params.redirectUri);
+  const state = params.state ? `&state=${encodeURIComponent(params.state)}` : '';
+
+  if (id === 'github') {
+    return `https://github.com/login/oauth/authorize?client_id=${clientId}&redirect_uri=${redirect}${scope ? `&scope=${encodeURIComponent(scope)}` : ''}${state}`;
+  }
+  if (id === 'gitlab') {
+    return `https://gitlab.com/oauth/authorize?client_id=${clientId}&redirect_uri=${redirect}&response_type=code&scope=${encodeURIComponent(scope)}${state}`;
+  }
+  if (id === 'stackoverflow') {
+    return `https://stackoverflow.com/oauth?client_id=${clientId}&redirect_uri=${redirect}${scope ? `&scope=${encodeURIComponent(scope)}` : ''}${state}`;
+  }
+  return '';
+}
+
+

package/src/connect/types.ts

@@ -0,0 +1,36 @@
+export type ConnectedAccountLite = {
+  id: string;
+  url?: string | null;
+};
+
+export type RedirectUriOverrides = Partial<Record<'github' | 'gitlab' | 'stackoverflow', string>>;
+
+export type StateFormat = 'query' | 'json';
+
+export interface ConnectAccountsProps {
+  providers: Array<{
+    id: string;
+    name: string;
+    connectionType?: 'oauth' | 'url' | 'link';
+    iconColor?: string;
+    endpoint?: string; // required for url/link providers
+    placeholder?: string;
+    copy?: string;
+    beta?: boolean;
+  }>;
+  connected: ConnectedAccountLite[];
+  idToken: string;
+  apiGatewayUrl?: string;
+  companyId?: string;
+  needsReconnectIds?: string[];
+  sort?: boolean;
+  buildOAuthState?: () => Record<string, string | number | boolean> | string | undefined;
+  stateFormat?: StateFormat;
+  redirectUriOverrides?: RedirectUriOverrides;
+  onConnected?: (providerId: string) => void;
+  onDisconnected?: (providerId: string) => void;
+  onError?: (message: string) => void;
+  className?: string;
+}
+
+

package/src/index.ts

@@ -8,4 +8,7 @@ export { getBadgeImageUrl } from './components/ReportHeader';
 
 export * from './components/charts/ChartTooltip';
 export * from './components/charts/ChartEmptyState';
-export * from './components/charts/ChartLegend';
+export * from './components/charts/ChartLegend';
+export { default as ConnectAccounts } from './connect/ConnectAccounts';
+export * from './connect/types';
+export { normalizeLinkedInInput } from './connect/linkedin';

package/src/types.ts

@@ -2,7 +2,7 @@ export type Provider = {
   id: string;
   name: string;
   authUrl?: string;
-  connectionType?: 'oauth' | 'url';
+  connectionType?: 'oauth' | 'url' | 'link';
   iconColor?: string;
   colors: {
     bg: string;