kyd-shared-badge 0.3.106 → 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 +85 -81
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "kyd-shared-badge",
3
- "version": "0.3.106",
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
@@ -252,88 +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
- )
276
- }
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
- )}
288
- </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:
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
+ })()}
298
287
  </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
- <span
316
- key={provider}
317
- onMouseEnter={(e) =>
318
- showLegendTooltipAt(
319
- e.currentTarget,
320
- undefined,
321
- getProviderDisplayName(provider)
322
- )
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] || '';
323
310
  }
324
- onMouseLeave={hideLegendTooltip}
325
- className="inline-flex items-center"
326
- >
327
- <ProviderIcon name={provider} />
328
- </span>
329
- ));
330
- })()
331
- ) : null}
332
- </>
333
- ) : (
334
- <span className="opacity-0 whitespace-nowrap">'\u00A0'</span>
335
- )}
336
- </span>
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>
340
+ </div>
337
341
  </div>
338
342
  {entry && typeof entry !== 'string' ? (
339
343
  <div
@@ -474,7 +478,7 @@ export default function SkillsBubble({ skillsCategoryRadar, skillsByCategory, sk
474
478
  </span>
475
479
  ) : null}
476
480
  </div>
477
- <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 }}>
478
482
  <div className="grid gap-3">
479
483
  {leftColumnGrid.map((entry, idx) => (
480
484
  columnComponent(entry, idx, true)