kyd-shared-badge 0.3.70 → 0.3.71

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kyd-shared-badge",
-  "version": "0.3.70",
+  "version": "0.3.71",
   "private": false,
   "main": "./src/index.ts",
   "module": "./src/index.ts",
@@ -22,6 +22,7 @@
     "@chatscope/chat-ui-kit-react": "^2.1.1",
     "@chatscope/chat-ui-kit-styles": "^1.4.0",
     "ai": "5.0.47",
+    "framer-motion": "^12.23.24",
     "i18n-iso-countries": "^7.14.0",
     "lucide-react": "^0.545.0",
     "next-auth": "^4.24.11",

package/src/connect/ConnectAccounts.tsx

@@ -3,8 +3,10 @@ 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';
+import { CheckCircle, Link2, LinkIcon, Unlink, ArrowLeft, ExternalLink } from 'lucide-react';
+import { AnimatePresence, motion } from 'framer-motion';
+import { Button, Input, Spinner } from '../ui';
+import Link from 'next/link';
 
 function byPriority(a: string, b: string) {
   const pr = (id: string) => (id === 'github' ? 0 : id === 'linkedin' ? 1 : 2);
@@ -28,6 +30,8 @@ export function ConnectAccounts(props: ConnectAccountsProps) {
     onDisconnected,
     onError,
     className,
+    oauthClientIds,
+    providerPickCallback,
   } = props;
 
   const router = useRouter();
@@ -89,6 +93,11 @@ export function ConnectAccounts(props: ConnectAccountsProps) {
     }
   };
 
+  const setSelectedProviderIdAndCallback = (providerId: string | null) => {
+    setSelectedProviderId(providerId);
+    providerPickCallback(providerId);
+  };
+
   const onSubmitLink = async (providerId: string) => {
     const provider = providers.find(p => p.id.toLowerCase() === providerId.toLowerCase());
     if (!provider || !provider.endpoint) return;
@@ -106,7 +115,8 @@ export function ConnectAccounts(props: ConnectAccountsProps) {
       });
       const data = await res.json().catch(() => ({}));
       if (!res.ok) throw new Error(data?.error || `Failed to sync ${provider.name} profile.`);
-      setSelectedProviderId(null);
+      setSelectedProviderIdAndCallback(null);
+
       setLinkUrl('');
       if (onConnected) onConnected(providerId);
     } catch (e) {
@@ -124,136 +134,242 @@ export function ConnectAccounts(props: ConnectAccountsProps) {
     // 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 });
+    const url = buildOAuthUrl({ providerId: id, redirectUri, state, clientIds: oauthClientIds });
     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 selectedProvider = useMemo(
+    () => (selectedProviderId ? providers.find(p => p.id.toLowerCase() === selectedProviderId.toLowerCase()) : null),
+    [selectedProviderId, providers]
+  );
 
-        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}
+  const handleConnectBack = () => {
+    setSelectedProviderIdAndCallback(null);
+    setLinkUrl('');
+  };
+
+  const fadeIn = {
+    hidden: { opacity: 0, y: 6 },
+    visible: { opacity: 1, y: 0, transition: { duration: 0.15 } },
+    exit: { opacity: 0, y: 6, transition: { duration: 0.1 } },
+  } as const;
+
+  return (
+    <>
+      {selectedProvider ? (
+        <AnimatePresence>
+          <motion.div
+            key="connect-card"
+            className="rounded-xl border max-w-xl w-full"
+            style={{ backgroundColor: 'var(--content-card-background)', borderColor: 'var(--icon-button-secondary)'}}
+            initial="hidden" animate="visible" exit="exit" variants={fadeIn}
+          >
+            <div className="sm:p-6 p-4">
+              <button onClick={handleConnectBack} className="flex items-center gap-2 text-sm text-[var(--text-secondary)] hover:text-[var(--text-main)] transition-colors mb-4">
+                <ArrowLeft className="w-4 h-4" />
+                Back
+              </button>
+              <div className="text-center">
+                <div className="flex justify-center mb-4">
+                  <ProviderIcon name={selectedProvider.id} className={`w-10 h-10 ${selectedProvider.iconColor || 'text-gray-500'}`} />
+                </div>
+                <h3 className="sm:text-lg text-base font-semibold" style={{ color: 'var(--text-main)'}}>
+                  {selectedProvider.connectionType === 'url' || (selectedProvider.connectionType || 'url') === 'link'
+                    ? `Use Public ${selectedProvider.name} Profile`
+                    : `Connect ${selectedProvider.name}`}
+                </h3>
+                <p className="sm:text-sm text-xs text-[var(--text-secondary)] mx-auto">
+                  {(selectedProvider.connectionType === 'url' || selectedProvider.connectionType === 'link')
+                    ? (selectedProvider.placeholder || 'Enter your public profile URL.')
+                    : `Authorize with ${selectedProvider.name} to connect your account.`}
+                </p>
               </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>
+              {(selectedProvider.connectionType === 'url' || selectedProvider.connectionType === 'link') ? (
+                <motion.form
+                  onSubmit={(e) => { e.preventDefault(); onSubmitLink(selectedProvider.id); }}
+                  className="mt-6 space-y-4"
+                  initial="hidden" animate="visible" variants={fadeIn}
+                >
+                  {selectedProvider.id === 'linkedin' && (
+                    <p className="sm:text-xs items-center text-[10px] text-[var(--text-secondary)] leading-relaxed max-w-xs mx-auto -mt-2">
+                      <Link
+                        href="https://www.linkedin.com/public-profile/settings"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className="underline"
+                        style={{ color: 'var(--icon-accent)' }}
+                      >
+                        LinkedIn <ExternalLink className="size-3 inline-block ml-1 underline-0" />
+                      </Link>
+                      . This opens your public profile settings (you’ll see your shareable URL if you’re signed in).
+                    </p>
+                  )}
+                  <div className="relative">
+                    <LinkIcon className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-[var(--text-secondary)]" />
+                    <Input
+                      type="url"
+                      value={linkUrl}
+                      onChange={(e) => setLinkUrl(e.target.value)}
+                      placeholder={selectedProvider.placeholder || 'https://example.com/your-profile'}
+                      required
+                      className="w-full border bg-transparent p-2 pl-9"
+                      style={{ color: 'var(--text-main)', borderColor: 'var(--icon-button-secondary)'}}
+                      onPaste={selectedProvider.id === 'linkedin' ? (e) => { const text = e.clipboardData.getData('text'); setLinkUrl(normalizeLinkedInInput(text)); e.preventDefault(); } : undefined}
+                      onBlur={selectedProvider.id === 'linkedin' ? (() => setLinkUrl(normalizeLinkedInInput(linkUrl))) : undefined}
+                    />
                   </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>
+                  <motion.div whileHover={{ scale: 1.02 }} whileTap={{ scale: 0.98 }}>
+                    <Button type="submit" className="w-full bg-[var(--icon-accent)] text-white hover:bg-[var(--icon-accent-hover)] transition-colors" disabled={isSubmitting}>
+                      {isSubmitting ? (
+                        <div className="flex items-center justify-center">
+                          <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white mr-2"></div>
+                          Connecting...
+                        </div>
+                      ) : (
+                        'Connect'
+                      )}
                     </Button>
-                  </div>
-                </div>
+                  </motion.div>
+                </motion.form>
               ) : (
-                <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 className="mt-6">
+                  <motion.div whileHover={{ scale: 1.02 }} whileTap={{ scale: 0.98 }}>
+                    <Button onClick={() => onOAuth(selectedProvider.id)} className="w-full bg-[var(--icon-accent)] text-white hover:bg-[var(--icon-accent-hover)] transition-colors">
+                      <ExternalLink className="w-4 h-4 mr-2" />
+                      Connect with {selectedProvider.name}
+                    </Button>
+                  </motion.div>
                 </div>
               )}
             </div>
-          );
-        };
+          </motion.div>
+        </AnimatePresence>
+      ) : (
+        <motion.div className="rounded-xl border max-w-lg" style={{ backgroundColor: 'var(--content-card-background)', borderColor: 'var(--icon-button-secondary)'}} initial="hidden" animate="visible" variants={fadeIn}>
+          <div className="sm:p-6 p-4">
+            <h2 className="sm:text-xl text-base font-semibold" style={{ color: 'var(--text-main)'}}>Connect accounts</h2>
+            <p className="mt-2 sm:text-sm text-xs" style={{ color: 'var(--text-secondary)'}}>
+              Each connected account adds verified signals to your report. Connect more accounts to strengthen your score—then disconnect anytime.
+            </p>
+          </div>
+          <motion.div className="sm:px-6 px-4 sm:pb-6 pb-4 space-y-2" initial="hidden" animate="visible" variants={fadeIn}>
+            <div className="space-y-2">
+              {(() => {
+                const oauthList = list.filter(p => p.connectionType === 'oauth');
+                const urlList = list.filter(p => (p.connectionType || 'url') === 'url' || p.connectionType === 'link');
 
-        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}
+                const Row = (provider: typeof list[number]) => {
+                  const providerId = provider.id;
+                  const isConnected = connectedIds.has(providerId.toLowerCase());
+                  const needsReconnect = reconnectIds.has(providerId.toLowerCase());
+                  const isOauth = provider.connectionType === 'oauth'
+                  const connectedUrl = connected.find(c => c.id.toLowerCase() === providerId.toLowerCase())?.url;
+                  const betaFlag = () => (
+                    <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>
+                  );
 
-            {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>
+                  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">
+
+                        {isConnected && connectedUrl ? (
+                          <Link href={connectedUrl} target="_blank" rel="noopener noreferrer" className="flex items-center gap-3 hover:underline">
+                            <ProviderIcon name={provider.id} 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>
+                          </Link>
+                        ) : (
+                          <div className="flex items-center gap-3">
+                            <ProviderIcon name={provider.id} 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>
+                          </div>
+                        )}
+                        {provider.beta ? betaFlag() : 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 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 className="size-3 sm:size-4" />
+                              <span>Disconnect</span>
+                            </button>
+                          </div>
+                        </div>
+                      ) : (
+                        <div className="flex items-center gap-2">
+                          <>
+                            <Button
+                              onClick={() => setSelectedProviderIdAndCallback(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"
+                            >
+                              {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 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>
+          </motion.div>
+        </motion.div>
+      )}
+    </>
   );
 }
 

package/src/connect/oauth.ts

@@ -1,15 +1,16 @@
 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; }
+  // Use globalThis to avoid hard dependency on Node 'process' types/environ
+  try {
+    const g = globalThis as unknown as { process?: { env?: Record<string, string | undefined> } };
+    return g?.process?.env?.[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'),
-};
+export type OAuthClientIds = Partial<Record<KnownProvider, string>>;
 
 const DEFAULT_SCOPES: Record<KnownProvider, string> = {
   github: 'read:user,repo',
@@ -22,9 +23,13 @@ export function buildOAuthUrl(params: {
   redirectUri: string;
   state?: string;
   scopeOverride?: string;
+  clientIds?: OAuthClientIds;
 }): string {
   const id = (params.providerId || '').toLowerCase() as KnownProvider;
-  const clientId = CLIENT_IDS[id as KnownProvider];
+  const clientId = (params.clientIds && params.clientIds[id]) || env(
+    id === 'github' ? 'NEXT_PUBLIC_GITHUB_CLIENT_ID' : id === 'gitlab' ? 'NEXT_PUBLIC_GITLAB_CLIENT_ID' : 'NEXT_PUBLIC_STACKOVERFLOW_CLIENT_ID'
+  );
+  // clientId should be inlined at build-time for NEXT_PUBLIC_*
   const scope = params.scopeOverride ?? DEFAULT_SCOPES[id as KnownProvider] ?? '';
   const redirect = encodeURIComponent(params.redirectUri);
   const state = params.state ? `&state=${encodeURIComponent(params.state)}` : '';

package/src/connect/types.ts

@@ -27,10 +27,12 @@ export interface ConnectAccountsProps {
   buildOAuthState?: () => Record<string, string | number | boolean> | string | undefined;
   stateFormat?: StateFormat;
   redirectUriOverrides?: RedirectUriOverrides;
+  oauthClientIds?: Partial<Record<'github' | 'gitlab' | 'stackoverflow', string>>;
   onConnected?: (providerId: string) => void;
   onDisconnected?: (providerId: string) => void;
   onError?: (message: string) => void;
   className?: string;
+  providerPickCallback: (providerId: string | null) => void;
 }