kyd-shared-badge 0.3.105 → 0.3.107

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/package.json +1 -1
  2. package/src/components/SkillsBubble.tsx +86 -69
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "kyd-shared-badge",
3
- "version": "0.3.105",
3
+ "version": "0.3.107",
4
4
  "private": false,
5
5
  "main": "./src/index.ts",
6
6
  "module": "./src/index.ts",
package/src/components/SkillsBubble.tsx CHANGED
@@ -4,7 +4,7 @@ import React, { useMemo, useRef, useState, useEffect } from 'react';
4
4
  import { BubbleChart } from '@knowyourdeveloper/react-bubble-chart';
5
5
  import '@knowyourdeveloper/react-bubble-chart/style.css';
6
6
  import { green1, green2, green3, green4, green5 } from '../colors';
7
- import { ProviderIcon } from '../utils/provider';
7
+ import { ProviderIcon, getProviderDisplayName } from '../utils/provider';
8
8
  import { providers } from '../types';
9
9
 
10
10
  type SkillsRadarPoint = {
@@ -252,75 +252,92 @@ export default function SkillsBubble({ skillsCategoryRadar, skillsByCategory, sk
252
252
  const columnComponent = (entry: { label: string; years?: number; presence?: string; presenceTypes?: Array<'certified' | 'observed' | 'self-reported'>; sources?: string[] } | '', idx: number, isLeft: boolean) => {
253
253
  return (
254
254
  <div key={idx} className="flex items-stretch justify-between gap-3 min-w-0">
255
- <div className="flex flex-col min-w-0 justify-center">
256
- <div className="flex items-center gap-2 min-w-0 text-lg text-[var(--text-main)]">
257
- {entry ? <span className="shrink-0 opacity-70 ">{idx + (isLeft ? 1 : 6)}.</span> : <span className="opacity-0 whitespace-nowrap">\u00A0</span>}
258
- {entry && typeof entry !== 'string' ? (
259
- <span className="truncate" title={entry.label}>
260
- {entry.label}
261
- {/* Evidence count bullet */}
262
- {(() => {
263
- const meta = skillsMeta?.[entry.label];
264
- const count = Number((meta as any)?.evidenceCount || 0);
265
- return count > 0 ? (
266
- <>
267
- {' '}<span className="opacity-60">•</span>{' '}
268
- <span
269
- className="underline decoration-dotted underline-offset-2 cursor-help opacity-80"
270
- onMouseEnter={(e) =>
271
- showLegendTooltipAt(
272
- e.currentTarget,
273
- 'Evidence count',
274
- 'Total number of sources across observed, certified, and self-reported evidence for this skill.'
275
- )
255
+ <div className="flex flex-row w-1/2 items-start gap-8">
256
+ {entry ? <span className="shrink-0 opacity-70 text-base items-center flex h-full">{idx + (isLeft ? 1 : 6)}.</span> : <span className="opacity-0 whitespace-nowrap">\u00A0</span>}
257
+
258
+ <div className="flex flex-col min-w-0 justify-center leading-tight">
259
+ <div className="flex items-center gap-2 min-w-0 text-lg text-[var(--text-main)]">
260
+ {entry && typeof entry !== 'string' ? (
261
+ <span className="truncate font-semibold" title={entry.label}>
262
+ {entry.label}
263
+ {/* Evidence count bullet */}
264
+ {(() => {
265
+ console.log('entry', entry);
266
+ const meta = skillsMeta?.[entry.label];
267
+ const count = Number((meta as any)?.evidenceCount || 0);
268
+ return count > 0 ? (
269
+ <>
270
+ {' '}<span className="opacity-60">•</span>{' '}
271
+ <span
272
+ className="underline decoration-dotted underline-offset-2 cursor-help opacity-80"
273
+ onMouseEnter={(e) =>
274
+ showLegendTooltipAt(
275
+ e.currentTarget,
276
+ 'Evidence count',
277
+ 'Total number of sources across observed, certified, and self-reported evidence for this skill.'
278
+ )
279
+ }
280
+ onMouseLeave={hideLegendTooltip}
281
+ >
282
+ {count}
283
+ </span>
284
+ </>
285
+ ) : null;
286
+ })()}
287
+ </span>
288
+ ) : (
289
+ <span className="truncate">{typeof entry === 'string' ? entry : '\u00A0'}</span>
290
+ )}
291
+ </div>
292
+ <span className="text-xs text-[var(--text-secondary)] flex flex-wrap items-center gap-1">
293
+ {entry && typeof entry !== 'string' ? (
294
+ <>
295
+ <span
296
+ className="cursor-help"
297
+ onMouseEnter={(e) => showLegendTooltipAt(e.currentTarget, 'Sources', 'The source where we observed this skill.')}
298
+ onMouseLeave={hideLegendTooltip}
299
+ >
300
+ Sources:
301
+ </span>
302
+ {Array.isArray((entry as any).sources) && (entry as any).sources.length > 0 ? (
303
+ (() => {
304
+ const sourceProviders: string[] = ((entry as any).sources as string[]).map((src: string) => {
305
+ const str = String(src);
306
+ let provider = str.split(':')[0] || '';
307
+ if (!provider || provider === str) {
308
+ // If split(':')[0] didn't find a delimiter or provider (i.e., no ':'), try split('.')
309
+ provider = str.split('.')[0] || '';
276
310
  }
277
- onMouseLeave={hideLegendTooltip}
278
- >
279
- {count}
280
- </span>
281
- </>
282
- ) : null;
283
- })()}
284
- </span>
285
- ) : (
286
- <span className="truncate">{typeof entry === 'string' ? entry : '\u00A0'}</span>
287
- )}
311
+ return provider.toLowerCase();
312
+ });
313
+ const uniqueProviders = Array.from(new Set<string>(sourceProviders));
314
+ const filteredProviders = uniqueProviders.filter((provider) =>
315
+ providers.includes(provider.toLowerCase())
316
+ );
317
+ return filteredProviders.map((provider) => (
318
+ <span
319
+ key={provider}
320
+ onMouseEnter={(e) =>
321
+ showLegendTooltipAt(
322
+ e.currentTarget,
323
+ undefined,
324
+ getProviderDisplayName(provider)
325
+ )
326
+ }
327
+ onMouseLeave={hideLegendTooltip}
328
+ className="inline-flex items-center"
329
+ >
330
+ <ProviderIcon name={provider} />
331
+ </span>
332
+ ));
333
+ })()
334
+ ) : null}
335
+ </>
336
+ ) : (
337
+ <span className="opacity-0 whitespace-nowrap">'\u00A0'</span>
338
+ )}
339
+ </span>
288
340
  </div>
289
- <span className="text-xs text-[var(--text-secondary)] flex flex-wrap items-center gap-1">
290
- {entry && typeof entry !== 'string' ? (
291
- <>
292
- <span
293
- className="cursor-help"
294
- onMouseEnter={(e) => showLegendTooltipAt(e.currentTarget, 'Sources', 'The source where we observed this skill.')}
295
- onMouseLeave={hideLegendTooltip}
296
- >
297
- Sources:
298
- </span>
299
- {Array.isArray((entry as any).sources) && (entry as any).sources.length > 0 ? (
300
- (() => {
301
- const sourceProviders: string[] = ((entry as any).sources as string[]).map((src: string) => {
302
- const str = String(src);
303
- let provider = str.split(':')[0] || '';
304
- if (!provider || provider === str) {
305
- // If split(':')[0] didn't find a delimiter or provider (i.e., no ':'), try split('.')
306
- provider = str.split('.')[0] || '';
307
- }
308
- return provider.toLowerCase();
309
- });
310
- const uniqueProviders = Array.from(new Set<string>(sourceProviders));
311
- const filteredProviders = uniqueProviders.filter((provider) =>
312
- providers.includes(provider.toLowerCase())
313
- );
314
- return filteredProviders.map((provider) => (
315
- <ProviderIcon key={provider} name={provider} />
316
- ));
317
- })()
318
- ) : null}
319
- </>
320
- ) : (
321
- <span className="opacity-0 whitespace-nowrap">'\u00A0'</span>
322
- )}
323
- </span>
324
341
  </div>
325
342
  {entry && typeof entry !== 'string' ? (
326
343
  <div
@@ -461,7 +478,7 @@ export default function SkillsBubble({ skillsCategoryRadar, skillsByCategory, sk
461
478
  </span>
462
479
  ) : null}
463
480
  </div>
464
- <div className="grid grid-cols-2 gap-x-8 text-xs" style={{ color: 'var(--text-secondary)', minHeight: 250 }}>
481
+ <div className="grid grid-cols-2 gap-x-20 text-xs" style={{ color: 'var(--text-secondary)', minHeight: 250 }}>
465
482
  <div className="grid gap-3">
466
483
  {leftColumnGrid.map((entry, idx) => (
467
484
  columnComponent(entry, idx, true)