feat(atomic): migrate atomic-timeframe 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-5321

Description

Migrates atomic-timeframe from Stencil to Lit as part of the framework modernization effort. This is a light DOM data container component with no rendering logic or controller integration.

Changes Made

Component Migration

• Converted to Lit using LightDomMixin(LitElement) with @property decorators
• Implements Timeframe interface and LitElementWithError
• Properties: period, unit, amount, label (all reflected to attributes)
• Validation: Added Bueno schema validation (private static readonly) with ValidatePropsController
• Error Handling: Added error state property and validation that logs to console only
• Original Stencil file deleted: Removed atomic-timeframe.tsx

Testing

• Comprehensive unit tests (17 active tests + 4 skipped for v4)
• Validation tests: Using it.each and it.skip.each patterns from atomic-result-list.spec.ts
• Tests validation warnings: Verifies console warnings are logged for invalid prop values
• Tests all valid units: minute, hour, day, week, month, quarter, year
• Attribute reflection tests: Verifies all properties reflect to attributes
• Flattened describe blocks: Following tests-atomic.instructions.md conventions
• Simplified test patterns: Tests create elements with desired props directly following established codebase patterns

Documentation

• MDX documentation with usage examples (basic timeframes, custom amounts, future timeframes)
• Improved JSDoc comments: Clearer, more concise descriptions throughout
• Storybook stories with MSW mocking: Updated stories to use MockSearchApi for network call mocking
  • Added multiple story variants (WithPastPeriod, WithNextPeriod, MultipleTimeframes)
  • Moved decorator to meta-level for consistency
  • Follows pattern from atomic-sort-expression.new.stories.tsx

Exports

• Updated index.ts and lazy-index.ts for Lit component loading

Usage

<atomic-timeframe-facet field="date">
  <atomic-timeframe unit="day" amount="7" label="Last week"></atomic-timeframe>
  <atomic-timeframe unit="month" amount="3" label="Last quarter"></atomic-timeframe>
  <atomic-timeframe period="next" unit="week" label="Next week"></atomic-timeframe>
</atomic-timeframe-facet>

Notes

This component is a data container with no rendering logic or controller integration. E2E testing is handled through parent facet components (atomic-timeframe-facet, etc.). No component-specific Cypress tests exist for this component.

Original prompt

---

This section details on the original issue you should resolve

<issue_title>Migrate atomic-timeframe</issue_title>
<issue_description>Type: User Story
Status: New
Priority: Medium
Components: Atomic

Jira Ticket

KIT-5321</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 Migrate atomic-timeframe #6792

---

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.

[Copilot]

Pull request overview

This PR successfully migrates atomic-timeframe from Stencil to Lit as part of the framework modernization effort. The component is a light DOM data container that defines timeframe configurations for timeframe facet components. The migration follows established patterns for Lit components while preserving all functionality and adding comprehensive tests and documentation.

Key Changes

• Component rewrite: Complete conversion from Stencil .tsx to Lit .ts using LightDomMixin(LitElement) with property decorators and Bueno validation
• Test suite addition: New comprehensive unit test suite with 17 active tests covering property validation, attribute reflection, and error handling
• Storybook enhancement: Updated stories with MSW mocking for realistic facet integration examples, plus comprehensive MDX documentation

Reviewed changes

Copilot reviewed 10 out of 11 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
packages/atomic/src/components/common/atomic-timeframe/atomic-timeframe.tsx	Deleted original Stencil component implementation
packages/atomic/src/components/common/atomic-timeframe/atomic-timeframe.ts	New Lit implementation with property validation using ValidatePropsController
packages/atomic/src/components/common/atomic-timeframe/atomic-timeframe.spec.ts	New comprehensive unit test suite with property, validation, and attribute reflection tests
packages/atomic/src/components/common/atomic-timeframe/atomic-timeframe.new.stories.tsx	Enhanced stories with MSW mocking and multiple story variants (past/next periods, custom labels)
packages/atomic/src/components/common/atomic-timeframe/atomic-timeframe.mdx	New documentation with usage examples and related component links
packages/atomic/src/components/common/index.ts	Added export for Lit component
packages/atomic/src/components/common/lazy-index.ts	Added lazy loading entry for component
packages/atomic/src/utils/custom-element-tags.ts	Registered component tag in custom element set
packages/atomic/src/components.d.ts	Removed Stencil-generated type definitions (now handled by Lit)
packages/atomic-react/src/components/search/components.ts	Added React wrapper for search interfaces
packages/atomic-react/src/components/commerce/components.ts	Added React wrapper for commerce interfaces

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.