feat(v1): TypeStripe + DetailCard slot (Phase 1 - Foundation PR 5)

[vitorvasc]

Contributes to #84 and #370.

What's in this PR

• New src/components/ui/type-stripe-colors.ts exporting the shared types and palette:
  • CollectorComponentType derived from CollectorComponent["type"] in src/types/collector.ts (the canonical union of receiver, processor, exporter, connector, extension)
  • TYPE_STRIPE_COLORS: Record<CollectorComponentType, string> HSL map (hardcoded HSL strings, not theme tokens)
• New <TypeStripe type="..." /> at src/components/ui/type-stripe.tsx. Renders an aria-hidden <span> with the matching background color inline, a type-stripe class hook, and a data-type attribute. Accepts className for sizing and positioning
• <DetailCard> accepts an optional typeStripe?: CollectorComponentType prop. When set, the card mounts <TypeStripe> with the Tailwind absolute inset-y-0 left-0 w-1 positioning class, so the stripe rendering lives in one place. Existing <DetailCard> consumers compile and render unchanged
• Tests run it.each across all five CollectorComponentType values and assert both the data-type attribute and the inline background color match the map

What's not in this PR

• No routes mount <TypeStripe> yet. The first consumers will be the list view and the detail header
• No .type-stripe CSS class is defined yet. The standalone <TypeStripe> sets only background-color inline, so callers must pass a sizing className to make it visible. <DetailCard>'s slot is self-contained via Tailwind, so this gap only matters for callers that want to mount the bare primitive

Verification

• bun run typecheck clean
• bun run lint clean
• bun run test src/components/ui/type-stripe.test.tsx passes 6/6
• bun run test passes 843/843
• bun run format no reformatting needed

---

Co-authored with Claude Opus 4.7.

[netlify]

✅ Deploy Preview for otel-ecosystem-explorer ready!

Name	Link
🔨 Latest commit	cade6b5
🔍 Latest deploy log	https://app.netlify.com/projects/otel-ecosystem-explorer/deploys/6a0633ce64866200080ee764
😎 Deploy Preview	https://deploy-preview-483--otel-ecosystem-explorer.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[Copilot]

Pull request overview

Introduces a reusable “TypeStripe” UI primitive (and shared color palette) to visually indicate OpenTelemetry Collector component type, and adds an optional slot on DetailCard to render that stripe in a consistent, centralized way as part of the V1 redesign foundation work.

Changes:

• Added TYPE_STRIPE_COLORS and CollectorComponentType (derived from CollectorComponent["type"]) for a single source of truth on stripe colors.
• Added <TypeStripe type="..." /> primitive that renders an aria-hidden colored stripe with a data-type attribute.
• Extended <DetailCard> with an optional typeStripe prop that mounts <TypeStripe> with standardized positioning styles, plus initial unit tests.

Reviewed changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated 2 comments.

File	Description
ecosystem-explorer/src/components/ui/type-stripe-colors.ts	Defines the canonical collector component type union alias and the shared HSL color map.
ecosystem-explorer/src/components/ui/type-stripe.tsx	Implements the standalone TypeStripe primitive rendering the inline background color + attributes.
ecosystem-explorer/src/components/ui/detail-card.tsx	Adds typeStripe prop to render TypeStripe in a consistent left-edge slot within DetailCard.
ecosystem-explorer/src/components/ui/type-stripe.test.tsx	Adds tests for TypeStripe and the exported color map (needs a stronger assertion for color correctness).