kyd-shared-badge 0.3.68 → 0.3.70

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kyd-shared-badge",
-  "version": "0.3.68",
+  "version": "0.3.70",
   "private": false,
   "main": "./src/index.ts",
   "module": "./src/index.ts",
@@ -23,6 +23,7 @@
     "@chatscope/chat-ui-kit-styles": "^1.4.0",
     "ai": "5.0.47",
     "i18n-iso-countries": "^7.14.0",
+    "lucide-react": "^0.545.0",
     "next-auth": "^4.24.11",
     "react-hot-toast": "^2.6.0",
     "react-icons": "^5.5.0",

package/src/connect/ConnectAccounts.tsx

@@ -0,0 +1,262 @@
+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';
+import { CheckCircle, Link2, LinkIcon, Unlink } from 'lucide-react';
+import { Button, Input, Spinner, Card, CardHeader, CardContent, CardFooter } from '../ui';
+
+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}>
+      {(() => {
+        const oauthList = list.filter(p => p.connectionType === 'oauth');
+        const urlList = list.filter(p => (p.connectionType || 'url') === 'url' || p.connectionType === 'link');
+
+        const Row = (provider: typeof list[number]) => {
+          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 transform transition-transform hover:-translate-y-px">
+              <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)'}}>
+                    {/* CheckCircle icon (inline SVG) */}
+                    <CheckCircle className="size-3 sm:size-4" />
+                    <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 hover:underline"
+                    >
+                      {/* Unlink icon (inline SVG) */}
+                      <Unlink className="size-3 sm:size-4" />
+                      <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-lg flex items-center gap-2"
+                      >
+                        {/* OAuth/URL leading icon */}
+                        {isOauth ? (
+                          <Link2 className="size-3 sm:size-4" />
+                        ) : (
+                          <LinkIcon className="size-3 sm:size-4" />
+                        )}
+                        <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)'}}
+                        >
+                          {/* Unlink icon (inline SVG) */}
+                          <Unlink className="size-3 sm:size-4" />
+                          <span>Remove</span>
+                        </Button>
+                      )}
+                    </>
+                  )}
+                </div>
+              )}
+            </div>
+          );
+        };
+
+        return (
+          <>
+            {oauthList.length ? (
+              <>
+                <div className="flex items-center my-2">
+                  <div className="flex-1 border-t" style={{ borderColor: 'var(--icon-button-secondary)', opacity: 0.3 }} />
+                  <span className="mx-3 text-[10px] sm:text-xs uppercase tracking-wide" style={{ color: 'var(--text-secondary)'}}>OAuth</span>
+                  <div className="flex-1 border-t" style={{ borderColor: 'var(--icon-button-secondary)', opacity: 0.3 }} />
+                </div>
+                {oauthList.map(p => Row(p))}
+              </>
+            ) : null}
+
+            {urlList.length ? (
+              <>
+                <div className="flex items-center my-2">
+                  <div className="flex-1 border-t" style={{ borderColor: 'var(--icon-button-secondary)', opacity: 0.3 }} />
+                  <span className="mx-3 text-[10px] sm:text-xs uppercase tracking-wide" style={{ color: 'var(--text-secondary)'}}>Public Urls</span>
+                  <div className="flex-1 border-t" style={{ borderColor: 'var(--icon-button-secondary)', opacity: 0.3 }} />
+                </div>
+                {urlList.map(p => Row(p))}
+              </>
+            ) : null}
+          </>
+        );
+      })()}
+    </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;

package/src/ui/button.tsx

@@ -0,0 +1,57 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default:
+          "bg-primary text-primary-foreground shadow hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
+        outline:
+          "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
+        secondary:
+          "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2",
+        sm: "h-8 rounded-md px-3 text-xs",
+        lg: "h-10 rounded-md px-8",
+        icon: "h-9 w-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button"
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Button.displayName = "Button"
+
+export { Button, buttonVariants }

package/src/ui/card.tsx

@@ -0,0 +1,76 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Card = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      "rounded-lg border bg-card text-card-foreground shadow",
+      className
+    )}
+    {...props}
+  />
+))
+Card.displayName = "Card"
+
+const CardHeader = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex flex-col sm:p-4 p-4", className)}
+    {...props}
+  />
+))
+CardHeader.displayName = "CardHeader"
+
+const CardTitle = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("font-semibold leading-none tracking-tight", className)}
+    {...props}
+  />
+))
+CardTitle.displayName = "CardTitle"
+
+const CardDescription = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+CardDescription.displayName = "CardDescription"
+
+const CardContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("sm:pt-2 sm:pb-4 sm:px-4 pb-3 px-4 pt-0", className)} {...props} />
+))
+CardContent.displayName = "CardContent"
+
+const CardFooter = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex items-center sm:p-6 p-2 pt-0", className)}
+    {...props}
+  />
+))
+CardFooter.displayName = "CardFooter"
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }

package/src/ui/index.ts

@@ -0,0 +1,4 @@
+export * from './button';
+export * from './card';
+export * from './input';
+export * from './spinner';

package/src/ui/input.tsx

@@ -0,0 +1,22 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
+  ({ className, type, ...props }, ref) => {
+    return (
+      <input
+        type={type}
+        className={cn(
+          "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm text-xs",
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Input.displayName = "Input"
+
+export { Input }

package/src/ui/spinner.tsx

@@ -0,0 +1,12 @@
+'use client'
+import React from 'react'
+
+export function Spinner() {
+  return (
+    <div className="animate-spin rounded-full h-6 w-6 border-b-2 border-[var(--icon-accent-hover)]"></div>
+  )
+}
+
+export default Spinner
+
+