refactor(atomic): migrate atomic-timeframe-facet from Stencil to Lit #6757

Copilot · 2025-12-09T19:15:17Z

Migration complete with all feedback addressed:

Component Changes:

Moved from /facets/atomic-timeframe-facet/ to /search/atomic-timeframe-facet/
Deleted stencil-atomic-timeframe-facet.tsx and atomic-timeframe-facet.pcss
Updated prop validation to use static readonly schema pattern
Reduced validated props to: injectionDepth, headingLevel, min, max, sortCriteria
Added biome-ignore comments for conditional bindStateToController decorators

Test Changes:

Updated describe block naming: 'when rendering (#render)' and 'props'
Removed unnecessary nested describe blocks in prop validation tests
Combined describe blocks in lifecycle and interactions sections
Updated disconnectedCallback test naming: 'when removed from the DOM (#disconnectedCallback)'

Export Changes:

Updated export path in search/index.ts

Original prompt

This section details on the original issue you should resolve

<issue_title>Migrate atomic-timeframe-facet</issue_title>
<issue_description>

Jira Issue: KIT-4960

Type: User Story
Status: New
Priority: Medium
Components: Atomic

<agent_instructions>For e2e testing / storybook MSW mocking, I suggest you look at patterns in atomic-color-facet. Not quite the same, but similar. The e2e "happy path" for timeframe facet should be relatively similar, i.e., the facet renders, selecting a value works, facet search works. I don't think we need to cover show more / show less for atomic-timeframe-facet.

For the component itself, you can look at patterns in the commerce equivalent (atomic-commerce-timeframe-facet).

For unit tests, again you should look at patterns in atomic-color-facet (e.g., you'll see how we do / test prop validation, how we mock the console, etc.)</agent_instructions>

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-facet #6399

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

Co-authored-by: fbeaudoincoveo <[email protected]>

…W API mocking Co-authored-by: fbeaudoincoveo <[email protected]>

…tests for atomic-timeframe-facet Co-authored-by: fbeaudoincoveo <[email protected]>

fbeaudoincoveo · 2025-12-09T20:33:20Z

packages/atomic/src/components/search/facets/atomic-timeframe-facet/atomic-timeframe-facet.ts

+        tabsExcluded: this.tabsExcluded,
+        dependsOn: this.dependsOn,
+      }),
+      new Schema({


@copilot do like in atomic-color-facet: declare the schema as a static private readonly member of the class so that it's only declared once even if there are multiple facet instances in the same page.

Also, I wouldn't include tabsInclude, tabsExcluded and dependsOn in the prop validation. We should validate the following props:

injectionDepth

headingLevel

min

max

sortCriteria

Updated in commit 0e2d926. The schema is now declared as a static private readonly member, and prop validation only includes injectionDepth, headingLevel, min, max, and sortCriteria.

fbeaudoincoveo · 2025-12-09T20:34:22Z

...es/atomic/src/components/search/facets/atomic-timeframe-facet/atomic-timeframe-facet.spec.ts

+    };
+  };
+
+  describe('#render', () => {


@copilot

Suggested change

describe('#render', () => {

describe('when rendering (#render)', () => {

Updated in commit 0e2d926.

fbeaudoincoveo · 2025-12-09T20:35:25Z

...es/atomic/src/components/search/facets/atomic-timeframe-facet/atomic-timeframe-facet.spec.ts

+    });
+  });
+
+  describe('#props', () => {


Suggested change

describe('#props', () => {

describe('props', () => {

Updated in commit 0e2d926.

fbeaudoincoveo · 2025-12-09T20:35:52Z

...es/atomic/src/components/search/facets/atomic-timeframe-facet/atomic-timeframe-facet.spec.ts

+    });
+  });
+
+  describe('#lifecycle', () => {


@copilot remove describe wrapper.

Updated in commit 0e2d926. The describe wrapper has been removed.

fbeaudoincoveo · 2025-12-09T20:36:12Z

...es/atomic/src/components/search/facets/atomic-timeframe-facet/atomic-timeframe-facet.spec.ts

+  });
+
+  describe('#lifecycle', () => {
+    describe('disconnectedCallback', () => {


@copilot

Suggested change

describe('disconnectedCallback', () => {

describe('when removed from the DOM (#disconnectedCallback)', () => {

Updated in commit 0e2d926.

fbeaudoincoveo · 2025-12-09T20:37:12Z

packages/atomic/src/components/search/atomic-timeframe-facet/atomic-timeframe-facet.spec.ts

+    });
+  });
+
+  describe('#interactions', () => {


@copilot remove describe wrapper.

Updated in commit 0e2d926. The describe wrapper has been removed and tests merged into parent describe block.

fbeaudoincoveo · 2025-12-09T20:37:26Z

packages/atomic/src/components/search/atomic-timeframe-facet/atomic-timeframe-facet.spec.ts

+    });
+  });
+
+  describe('#controllers', () => {


@copilot remove describe wrapper

Updated in commit 0e2d926. The describe wrapper has been removed.

packages/atomic/src/components/search/atomic-timeframe-facet/atomic-timeframe-facet.ts

fbeaudoincoveo · 2025-12-11T18:56:13Z

...tomic/src/components/search/facets/atomic-timeframe-facet/stencil-atomic-timeframe-facet.tsx

@copilot this file must be deleted, not renamed.

also, the atomic-timeframe-facet.pcss file must be deleted as well.

Updated in commit 0e2d926. Both stencil-atomic-timeframe-facet.tsx and atomic-timeframe-facet.pcss have been deleted.

fbeaudoincoveo · 2025-12-11T19:01:03Z

packages/atomic/src/components/search/facets/atomic-timeframe-facet/atomic-timeframe-facet.ts

+  @state() bindings!: Bindings;
+  @state() error!: Error;
+
+  @bindStateToController('facetForDateRange')


@copilot

Suggested change

@bindStateToController('facetForDateRange')

// biome-ignore lint/suspicious/noExplicitAny: bindStateToController requires non-optional Controller type, but these controllers are conditionally created based on component configuration

@bindStateToController('facetForDateRange' as any)

similar comment for the facetForDatePicker and filter bindStateToController decorators.

Updated in commit 0e2d926. Added biome-ignore comments for all three conditional bindStateToController decorators (facetForDateRange, facetForDatePicker, and filter).

…ation - Move atomic-timeframe-facet directory from /facets to /search level - Delete stencil-atomic-timeframe-facet.tsx and atomic-timeframe-facet.pcss files - Update prop validation to use static readonly schema and only validate specific props (injectionDepth, headingLevel, min, max, sortCriteria) - Add biome-ignore comments for conditional bindStateToController decorators - Restructure test describe blocks: remove unnecessary wrappers, update naming conventions, combine nested describe blocks Co-authored-by: fbeaudoincoveo <[email protected]>

Initial plan

4f80a08

Copilot AI assigned Copilot and fbeaudoincoveo Dec 9, 2025

Copilot started work on behalf of fbeaudoincoveo December 9, 2025 19:15 View session

Copilot AI temporarily deployed to PR Artifacts December 9, 2025 19:24 Inactive

Copilot AI and others added 4 commits December 9, 2025 19:25

feat(atomic): migrate atomic-timeframe-facet component to Lit

d22f356

Co-authored-by: fbeaudoincoveo <[email protected]>

test(atomic): add comprehensive unit tests for atomic-timeframe-facet

325d40d

Co-authored-by: fbeaudoincoveo <[email protected]>

feat(atomic): update atomic-timeframe-facet Storybook stories with MS…

e787910

…W API mocking Co-authored-by: fbeaudoincoveo <[email protected]>

docs(atomic): add comprehensive MDX documentation and remove Cypress …

aff79d2

…tests for atomic-timeframe-facet Co-authored-by: fbeaudoincoveo <[email protected]>

Copilot AI changed the title ~~[WIP] Migrate atomic-timeframe-facet~~ Migrate atomic-timeframe-facet from Stencil to Lit Dec 9, 2025

Copilot AI requested a review from fbeaudoincoveo December 9, 2025 19:34

Copilot finished work on behalf of fbeaudoincoveo December 9, 2025 19:34

fbeaudoincoveo changed the title ~~Migrate atomic-timeframe-facet from Stencil to Lit~~ refactor(atomic: migrate atomic-timeframe-facet from Stencil to Lit Dec 10, 2025

fbeaudoincoveo changed the title ~~refactor(atomic: migrate atomic-timeframe-facet from Stencil to Lit~~ refactor(atomic): migrate atomic-timeframe-facet from Stencil to Lit Dec 10, 2025

Merge branch 'main' into copilot/migrate-atomic-timeframe-facet

0d91632

fbeaudoincoveo temporarily deployed to PR Artifacts December 11, 2025 16:28 — with GitHub Actions Inactive

fbeaudoincoveo had a problem deploying to PR Artifacts December 11, 2025 16:28 — with GitHub Actions Failure

fbeaudoincoveo temporarily deployed to Prerelease (CDN) December 11, 2025 16:33 — with GitHub Actions Inactive

fbeaudoincoveo requested changes Dec 11, 2025

View reviewed changes

Copilot started work on behalf of fbeaudoincoveo December 11, 2025 19:02 View session

Copilot AI requested a review from fbeaudoincoveo December 11, 2025 19:15

Copilot finished work on behalf of fbeaudoincoveo December 11, 2025 19:15

fbeaudoincoveo added 2 commits December 11, 2025 14:37

Fix build

7e65eb0

Fix storybook issues

6aadd62

	describe('#render', () => {
	describe('when rendering (#render)', () => {

	describe('disconnectedCallback', () => {
	describe('when removed from the DOM (#disconnectedCallback)', () => {

	@bindStateToController('facetForDateRange')
	// biome-ignore lint/suspicious/noExplicitAny: bindStateToController requires non-optional Controller type, but these controllers are conditionally created based on component configuration
	@bindStateToController('facetForDateRange' as any)

refactor(atomic): migrate atomic-timeframe-facet from Stencil to Lit #6757

Are you sure you want to change the base?

refactor(atomic): migrate atomic-timeframe-facet from Stencil to Lit #6757

Conversation

Copilot AI commented Dec 9, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

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

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 11, 2025

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 11, 2025

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 11, 2025

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 11, 2025

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 11, 2025

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 11, 2025

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 11, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 11, 2025

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 11, 2025

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Copilot AI commented Dec 9, 2025 •

edited

Loading