refactor(atomic): migrate atomic-insight-numeric-facet from Stencil to Lit

[Copilot]

✅ Checklist

• 🧪 The component is unit tested
• 🧪 The component includes E2E tests
• 🗑️ Old Cypress tests exclusive to the component are removed
• 📖 The component is documented in storybook with an .mdx file
• ♿ The component complies with the Web Content Accessibility Guidelines.
• 🌐 All strings intended for humans or assistive technology must be localized with i18n.
• 📦 The Lit component is exported in the appropriate index.ts and lazy-index.ts files.
• 🎨 CSS parts are documented still accessible.
• 🦥 Slotted Content, public methods and properties are documented
• 🔄 The component outputs the same Angular output as before with Stencil
• 🏷️ The component declares the component type in the HTMLElementTagNameMap

https://coveord.atlassian.net/browse/KIT-4854

Description

Migrated atomic-insight-numeric-facet from Stencil to Lit following the patterns established in atomic-numeric-facet (search use case). The migration includes complete test coverage, Storybook stories with MSW API mocking, Playwright E2E tests, and full documentation.

Changes

Component Migration

• New file: atomic-insight-numeric-facet.ts (648 lines)
• Converted decorators: @Component → @customElement, @Prop() → @property(), @State() → @state()
• Converted JSX to Lit html templates with when directive for conditional rendering
• Migrated lifecycle: Stencil init → initialize(), proper connectedCallback/disconnectedCallback with cleanup
• All imports use @/ path aliases (no relative ../ imports)
• Event listeners registered in connectedCallback, removed in disconnectedCallback
• Uses shared Tailwind CSS from numeric-facet-common.tw.css
• Deleted files: Removed atomic-insight-numeric-facet.tsx (old Stencil) and atomic-insight-numeric-facet.pcss (old CSS)
• Removed @internal JSDoc tag to ensure component appears in Storybook manifest

Unit Tests

• New file: atomic-insight-numeric-facet.spec.ts (1024 lines)
• Adapted from search version, removed tabs-related tests (insight has no tabs)
• Uses renderInAtomicInsightInterface with search controller fixtures (compatible)
• Covers props, controller integration, rendering, lifecycle, interactions
• Uses mockConsole utility for console mocking following best practices

Storybook Stories

• New file: atomic-insight-numeric-facet.new.stories.tsx
• Uses MockInsightApi with MSW handlers for API mocking
• Includes 5 stories: Default, WithInputInteger, DisplayAsLink, Collapsed, WithSelectedValue
• Full integration with Insight interface wrapper

Documentation

• New file: atomic-insight-numeric-facet.mdx
• Component overview and usage examples with atomic-insight-interface
• UX best practices for checkboxes vs links
• Reference to facet design guidelines

Playwright E2E Tests

• New files: e2e/fixture.ts, e2e/page-object.ts, e2e/atomic-insight-numeric-facet.e2e.ts
• Comprehensive E2E test coverage including:
  • Essential parts rendering
  • Collapse/expand functionality
  • Selected value display with clear button
  • Input fields rendering and interaction
  • Link display mode
• All tests consolidated into single describe block per test guidelines
• Also updated atomic-numeric-facet.e2e.ts to follow same pattern (consolidated from 5 describe blocks to 1)

Key Differences from Search Version

• No tabsIncluded/tabsExcluded props (insight doesn't use tabs)
• No TabManager controller
• Uses @coveo/headless/insight imports
• Insight-specific bindings interface

Notes

• No Cypress tests existed for this component
• Styles verified: old .pcss only imported common styles, now using numeric-facet-common.tw.css in Lit component
• E2E test structure updated to follow guidelines with single describe block per file
• Console mocking in unit tests follows the project's mockConsole utility pattern

Original prompt

---

This section details on the original issue you should resolve

<issue_title>KIT-4854: Migrate atomic-insight-numeric-facet from Stencil to Lit</issue_title>
<issue_description>### Task Description

See already migrated packages/atomic/src/components/search/atomic-numeric-facet component. Patterns (including test patterns) should be very similar.

Acceptance Criteria

• atomic-insight-numeric-facet has been migrated from Stencil to Lit
• Unit tests have been added (atomic-insight-numeric-facet.spec.ts)
• Stories have been added
• Stories use MSW for mocking network calls
• Happy path Playwright e2e tests have been added
• There are no more Cypress tests for the atomic-insight-numeric-facet
• The project builds without error
• All tests pass

Technical Notes

No response

Jira Ticket

https://coveord.atlassian.net/browse/KIT-4854</issue_description>

Comments on the Issue (you are @copilot in this section)

Custom agent used: StencilToLitMigrationV1
Specialized agent for migrating Atomic Stencil code to Lit (components, functional components, and utils)

• Fixes KIT-4854: Migrate atomic-insight-numeric-facet from Stencil to Lit #6973

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

[fbeaudoincoveo]

@copilot Delete the atomic-insight-numeric-facet.tsx.

Verify that all styles in .pcss have been properly converted into the static styles property of the migrated component, then delete the old .pcss file.

Once this is done, proceed to the next step (storybook, e2e tests).

You can skip documentation: Insight components are considered "interna".

[Copilot]

@copilot Delete the atomic-insight-numeric-facet.tsx.

Verify that all styles in .pcss have been properly converted into the static styles property of the migrated component, then delete the old .pcss...

Completed in commits fa6bf81 and f765854:

✅ Deleted files:

• atomic-insight-numeric-facet.tsx (old Stencil component)
• atomic-insight-numeric-facet.pcss (old CSS - only imported common styles, now using numeric-facet-common.tw.css)

✅ Created Storybook stories with MSW API mocking:

• atomic-insight-numeric-facet.new.stories.tsx
• Uses MockInsightApi with proper handlers
• Stories: Default, WithInputInteger, DisplayAsLink, Collapsed, WithSelectedValue

✅ Created Playwright E2E tests:

• e2e/fixture.ts - test fixture
• e2e/page-object.ts - page object with locators
• e2e/atomic-insight-numeric-facet.e2e.ts - comprehensive tests covering happy path and accessibility

Documentation skipped as noted (Insight components are internal).

[fbeaudoincoveo]

@copilot I looked at patterns for other components that were migrated in the Insight use case.

I changed my mind, let's remove the @internal tag from the JSDoc (otherwise the Stories won't even render as the component won't be in the manifest). Let's also generate an mdx file. It should be fairly similar to the one we have for atomic-numeric-facet

I noticed something else while looking at the way the e2e tests are organized. According to our test guidelines, all tests in the file should be grouped under a single describe block. Rework the .e2e.ts file accordingly. For the sake of consistency, also rework the atomic-numeric-facet.e2e.ts file in the same fashion (out of scope, but acceptable scope creep).

[Copilot]

@copilot I looked at patterns for other components that were migrated in the Insight use case.

I changed my mind, let's remove the @internal tag from the JSDoc (otherwise the Stories won't even rende...

Completed in commit b842ad4:

✅ Removed @internal tag from JSDoc in atomic-insight-numeric-facet.ts - component will now appear in Storybook manifest

✅ Created MDX documentation: atomic-insight-numeric-facet.mdx

• Follows same pattern as atomic-numeric-facet
• Includes usage examples with atomic-insight-interface
• Documents UX best practices and checkboxes vs links

✅ Consolidated E2E tests to single describe block:

• Reworked atomic-insight-numeric-facet.e2e.ts - all tests now in one test.describe('atomic-insight-numeric-facet') block
• Also reworked atomic-numeric-facet.e2e.ts (search component) - consolidated from 5 describe blocks to 1

All tests maintain same coverage, just reorganized per test guidelines.

[SimonMilord]

lgtm!