chore(atomic): add index & lazy-index file in every use case (#4927)

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

This PR adds the index.ts & lazy-index.ts file in every sub package of
atomic.

It was also required to change how some headless import worked in
insight & recommendations to clean up the index files.

@coveo/service-integration @coveo/service-core We need an index.ts & a
lazy-index.ts file for every sub package of atomic (commerce, insight,
ipx, ...) for the Lit migration and for going forward with Lit. This
will enable us to better organize the code and also make it possible for
implementers to only import a sub package specifically by doing `import
'@coveo/atomic/insight'` for example.

For insight and recommendations, there were special exports in the
index.ts file. I took the time to remove them and rework the imports in
the files affected. No functionality is lost, only small refactor.

Author: alexprudhomme

packages/atomic/src/components.d.ts

@@ -21,7 +21,7 @@ import { unknown as AnyBindings, ItemDisplayBasicLayout as ItemDisplayBasicLayou
 import { AnyBindings as AnyBindings1 } from "./components/common/interface/bindings";
 import { NumberInputType } from "./components/common/facets/facet-number-input/number-input-type";
 import { NumericFilter, NumericFilterState, RelativeDateUnit } from "./components/common/types";
-import { InsightEngine, FacetSortCriterion as InsightFacetSortCriterion, FoldedResult as InsightFoldedResult, InteractiveResult as InsightInteractiveResult, LogLevel as InsightLogLevel, RangeFacetRangeAlgorithm as InsightRangeFacetRangeAlgorithm, RangeFacetSortCriterion as InsightRangeFacetSortCriterion, Result as InsightResult, ResultTemplate as InsightResultTemplate, ResultTemplateCondition as InsightResultTemplateCondition, UserAction as IUserAction } from "./components/insight";
+import { InsightEngine, FacetSortCriterion as InsightFacetSortCriterion, FoldedResult as InsightFoldedResult, InteractiveResult as InsightInteractiveResult, LogLevel as InsightLogLevel, RangeFacetRangeAlgorithm as InsightRangeFacetRangeAlgorithm, RangeFacetSortCriterion as InsightRangeFacetSortCriterion, Result as InsightResult, ResultTemplate as InsightResultTemplate, ResultTemplateCondition as InsightResultTemplateCondition, UserAction as IUserAction } from "@coveo/headless/insight";
 import { InsightInitializationOptions } from "./components/insight/atomic-insight-interface/atomic-insight-interface";
 import { InsightStore } from "./components/insight/atomic-insight-interface/store";
 import { InsightResultActionClickedEvent } from "./components/insight/atomic-insight-result-action/atomic-insight-result-action";
@@ -31,8 +31,7 @@ import { CommerceStore } from "./components/commerce/atomic-commerce-interface/s
 import { CommerceRecommendationStore } from "./components/commerce/atomic-commerce-recommendation-interface/store";
 import { SelectChildProductEventArgs } from "./components/commerce/product-template-components/atomic-product-children/atomic-product-children";
 import { TruncateAfter } from "./components/common/expandable-text/expandable-text";
-import { RecommendationEngine } from "@coveo/headless/recommendation";
-import { InteractiveResult as RecsInteractiveResult, LogLevel as RecsLogLevel, Result as RecsResult, ResultTemplate as RecsResultTemplate, ResultTemplateCondition as RecsResultTemplateCondition } from "./components/recommendations";
+import { RecommendationEngine, InteractiveResult as RecsInteractiveResult, LogLevel as RecsLogLevel, Result as RecsResult, ResultTemplate as RecsResultTemplate, ResultTemplateCondition as RecsResultTemplateCondition } from "@coveo/headless/recommendation";
 import { RecsInitializationOptions } from "./components/recommendations/atomic-recs-interface/atomic-recs-interface";
 import { RecsStore } from "./components/recommendations/atomic-recs-interface/store";
 import { Bindings as Bindings1 } from "./components/search/atomic-search-interface/atomic-search-interface";
@@ -55,7 +54,7 @@ export { unknown as AnyBindings, ItemDisplayBasicLayout as ItemDisplayBasicLayou
 export { AnyBindings as AnyBindings1 } from "./components/common/interface/bindings";
 export { NumberInputType } from "./components/common/facets/facet-number-input/number-input-type";
 export { NumericFilter, NumericFilterState, RelativeDateUnit } from "./components/common/types";
-export { InsightEngine, FacetSortCriterion as InsightFacetSortCriterion, FoldedResult as InsightFoldedResult, InteractiveResult as InsightInteractiveResult, LogLevel as InsightLogLevel, RangeFacetRangeAlgorithm as InsightRangeFacetRangeAlgorithm, RangeFacetSortCriterion as InsightRangeFacetSortCriterion, Result as InsightResult, ResultTemplate as InsightResultTemplate, ResultTemplateCondition as InsightResultTemplateCondition, UserAction as IUserAction } from "./components/insight";
+export { InsightEngine, FacetSortCriterion as InsightFacetSortCriterion, FoldedResult as InsightFoldedResult, InteractiveResult as InsightInteractiveResult, LogLevel as InsightLogLevel, RangeFacetRangeAlgorithm as InsightRangeFacetRangeAlgorithm, RangeFacetSortCriterion as InsightRangeFacetSortCriterion, Result as InsightResult, ResultTemplate as InsightResultTemplate, ResultTemplateCondition as InsightResultTemplateCondition, UserAction as IUserAction } from "@coveo/headless/insight";
 export { InsightInitializationOptions } from "./components/insight/atomic-insight-interface/atomic-insight-interface";
 export { InsightStore } from "./components/insight/atomic-insight-interface/store";
 export { InsightResultActionClickedEvent } from "./components/insight/atomic-insight-result-action/atomic-insight-result-action";
@@ -65,8 +64,7 @@ export { CommerceStore } from "./components/commerce/atomic-commerce-interface/s
 export { CommerceRecommendationStore } from "./components/commerce/atomic-commerce-recommendation-interface/store";
 export { SelectChildProductEventArgs } from "./components/commerce/product-template-components/atomic-product-children/atomic-product-children";
 export { TruncateAfter } from "./components/common/expandable-text/expandable-text";
-export { RecommendationEngine } from "@coveo/headless/recommendation";
-export { InteractiveResult as RecsInteractiveResult, LogLevel as RecsLogLevel, Result as RecsResult, ResultTemplate as RecsResultTemplate, ResultTemplateCondition as RecsResultTemplateCondition } from "./components/recommendations";
+export { RecommendationEngine, InteractiveResult as RecsInteractiveResult, LogLevel as RecsLogLevel, Result as RecsResult, ResultTemplate as RecsResultTemplate, ResultTemplateCondition as RecsResultTemplateCondition } from "@coveo/headless/recommendation";
 export { RecsInitializationOptions } from "./components/recommendations/atomic-recs-interface/atomic-recs-interface";
 export { RecsStore } from "./components/recommendations/atomic-recs-interface/store";
 export { Bindings as Bindings1 } from "./components/search/atomic-search-interface/atomic-search-interface";

packages/atomic/src/components/commerce/index.ts

@@ -0,0 +1,5 @@
+// Export the class of the components migrated to Lit here, like this:
+//export {AtomicCommerceBreadbox} from './atomic-commerce-breadbox/atomic-commerce-breadbox.js';
+
+// TODO: Remove this line once at least one component is migrated to Lit.
+export {};

packages/atomic/src/components/commerce/lazy-index.ts

@@ -0,0 +1,6 @@
+export default {
+  // Add entries as such when new components are added/moved to Lit.
+  // 'atomic-commerce-breadbox': async () => await import('./atomic-commerce-breadbox/atomic-commerce-breadbox.js'),
+} as Record<string, () => Promise<unknown>>;
+
+export type * from './index.js';

packages/atomic/src/components/common/interface/analytics-config.ts

@@ -4,9 +4,9 @@ import {
   EngineConfiguration,
 } from '@coveo/headless';
 import {AnalyticsClientSendEventHook} from '@coveo/headless';
+import {InsightEngineConfiguration} from '@coveo/headless/insight';
+import {RecommendationEngineConfiguration} from '@coveo/headless/recommendation';
 import {getAtomicEnvironment} from '../../../global/environment';
-import {InsightEngineConfiguration} from '../../insight';
-import {RecommendationEngineConfiguration} from '../../recommendations';
 
 export type AnalyticsPayload = Parameters<AnalyticsClientSendEventHook>[1];
 

packages/atomic/src/components/common/interface/bindings.ts

@@ -1,10 +1,10 @@
 import type {SearchEngine} from '@coveo/headless';
 import {CommerceEngine} from '@coveo/headless/commerce';
+import {InsightEngine} from '@coveo/headless/insight';
 import type {RecommendationEngine} from '@coveo/headless/recommendation';
 import {i18n} from 'i18next';
 import {CommerceStore} from '../../commerce/atomic-commerce-interface/store';
 import {CommerceRecommendationStore} from '../../commerce/atomic-commerce-recommendation-interface/store';
-import {InsightEngine} from '../../insight';
 import {InsightStore} from '../../insight/atomic-insight-interface/store';
 import {RecsStore} from '../../recommendations/atomic-recs-interface/store';
 import {SearchStore} from '../../search/atomic-search-interface/store';

packages/atomic/src/components/common/interface/item.ts

@@ -1,6 +1,6 @@
 import {FoldedResult, Result} from '@coveo/headless';
 import {Product} from '@coveo/headless/commerce';
-import {InsightResult} from '../../insight';
+import {Result as InsightResult} from '@coveo/headless/insight';
 
 export type AnyItem = FoldedResult | AnyUnfoldedItem | Product;
 export type AnyUnfoldedItem = Result | InsightResult;

packages/atomic/src/components/index.ts

@@ -1 +1,5 @@
 export * from './search/index.js';
+export * from './insight/index.js';
+export * from './commerce/index.js';
+export * from './ipx/index.js';
+export * from './recommendations/index.js';

packages/atomic/src/components/insight/atomic-insight-facet/atomic-insight-facet.tsx

@@ -1,19 +1,19 @@
 import {FacetResultsMustMatch} from '@coveo/headless';
-import {Component, h, State, Prop, Element, VNode} from '@stencil/core';
 import {
-  buildInsightFacet,
-  buildInsightFacetConditionsManager,
-  buildInsightSearchStatus,
-  InsightCategoryFacetValueRequest,
-  InsightFacet,
-  InsightFacetConditionsManager,
-  InsightFacetOptions,
-  InsightFacetSortCriterion,
-  InsightFacetState,
-  InsightFacetValueRequest,
-  InsightSearchStatus,
-  InsightSearchStatusState,
-} from '..';
+  buildFacet as buildInsightFacet,
+  buildFacetConditionsManager as buildInsightFacetConditionsManager,
+  buildSearchStatus as buildInsightSearchStatus,
+  CategoryFacetValueRequest as InsightCategoryFacetValueRequest,
+  Facet as InsightFacet,
+  FacetConditionsManager as InsightFacetConditionsManager,
+  FacetOptions as InsightFacetOptions,
+  FacetSortCriterion as InsightFacetSortCriterion,
+  FacetState as InsightFacetState,
+  FacetValueRequest as InsightFacetValueRequest,
+  SearchStatus as InsightSearchStatus,
+  SearchStatusState as InsightSearchStatusState,
+} from '@coveo/headless/insight';
+import {Component, h, State, Prop, Element, VNode} from '@stencil/core';
 import {
   AriaLiveRegion,
   FocusTargetController,

packages/atomic/src/components/insight/atomic-insight-generated-answer/atomic-insight-generated-answer.tsx

@@ -1,13 +1,13 @@
-import {Component, Element, State, Prop, Watch} from '@stencil/core';
 import {
-  InsightSearchStatus,
-  InsightSearchStatusState,
-  buildInsightGeneratedAnswer,
-  buildInsightInteractiveCitation,
-  buildInsightSearchStatus,
-  InsightGeneratedAnswer,
-  InsightGeneratedAnswerState,
-} from '..';
+  SearchStatus as InsightSearchStatus,
+  SearchStatusState as InsightSearchStatusState,
+  buildGeneratedAnswer as buildInsightGeneratedAnswer,
+  buildInteractiveCitation as buildInsightInteractiveCitation,
+  buildSearchStatus as buildInsightSearchStatus,
+  GeneratedAnswer as InsightGeneratedAnswer,
+  GeneratedAnswerState as InsightGeneratedAnswerState,
+} from '@coveo/headless/insight';
+import {Component, Element, State, Prop, Watch} from '@stencil/core';
 import {AriaLiveRegion} from '../../../utils/accessibility-utils';
 import {debounce} from '../../../utils/debounce-utils';
 import {

packages/atomic/src/components/insight/atomic-insight-interface/analytics-config.ts

@@ -1,4 +1,7 @@
-import {InsightAnalyticsConfiguration, InsightEngineConfiguration} from '..';
+import {
+  AnalyticsConfiguration as InsightAnalyticsConfiguration,
+  EngineConfiguration as InsightEngineConfiguration,
+} from '@coveo/headless/insight';
 import {
   AnalyticsPayload,
   augmentAnalyticsWithAtomicVersion,

packages/atomic/src/components/insight/atomic-insight-interface/atomic-insight-interface.tsx

@@ -1,4 +1,11 @@
 import {loadFieldActions} from '@coveo/headless/insight';
+import {
+  LogLevel as InsightLogLevel,
+  InsightEngine,
+  InsightEngineConfiguration,
+  buildInsightEngine,
+  buildResultsPerPage as buildInsightResultsPerPage,
+} from '@coveo/headless/insight';
 import {
   Component,
   Element,
@@ -11,13 +18,6 @@ import {
   Watch,
 } from '@stencil/core';
 import i18next, {i18n} from 'i18next';
-import {
-  InsightLogLevel,
-  InsightEngine,
-  InsightEngineConfiguration,
-  buildInsightEngine,
-  buildInsightResultsPerPage,
-} from '..';
 import {InitializeEvent} from '../../../utils/initialization-utils';
 import {ArrayProp} from '../../../utils/props-utils';
 import {CommonBindings, NonceBindings} from '../../common/interface/bindings';

packages/atomic/src/components/insight/atomic-insight-numeric-facet/atomic-insight-numeric-facet.tsx

@@ -1,25 +1,25 @@
 import {Schema, StringValue} from '@coveo/bueno';
-import {Component, Element, h, Listen, Prop, State} from '@stencil/core';
 import {
-  buildInsightFacetConditionsManager,
-  buildInsightNumericFacet,
-  buildInsightNumericFilter,
-  buildInsightNumericRange,
-  buildInsightSearchStatus,
-  InsightCategoryFacetValueRequest,
-  InsightFacetConditionsManager,
-  InsightFacetValueRequest,
-  InsightNumericFacet,
-  InsightNumericFacetState,
-  InsightNumericFilter,
-  InsightNumericFilterState,
-  InsightNumericRangeRequest,
-  InsightRangeFacetRangeAlgorithm,
-  InsightRangeFacetSortCriterion,
-  InsightSearchStatus,
-  InsightSearchStatusState,
-  loadInsightNumericFacetSetActions,
-} from '..';
+  buildFacetConditionsManager as buildInsightFacetConditionsManager,
+  buildNumericFacet as buildInsightNumericFacet,
+  buildNumericFilter as buildInsightNumericFilter,
+  buildNumericRange as buildInsightNumericRange,
+  buildSearchStatus as buildInsightSearchStatus,
+  CategoryFacetValueRequest as InsightCategoryFacetValueRequest,
+  FacetConditionsManager as InsightFacetConditionsManager,
+  FacetValueRequest as InsightFacetValueRequest,
+  NumericFacet as InsightNumericFacet,
+  NumericFacetState as InsightNumericFacetState,
+  NumericFilter as InsightNumericFilter,
+  NumericFilterState as InsightNumericFilterState,
+  NumericRangeRequest as InsightNumericRangeRequest,
+  RangeFacetRangeAlgorithm as InsightRangeFacetRangeAlgorithm,
+  RangeFacetSortCriterion as InsightRangeFacetSortCriterion,
+  SearchStatus as InsightSearchStatus,
+  SearchStatusState as InsightSearchStatusState,
+  loadNumericFacetSetActions as loadInsightNumericFacetSetActions,
+} from '@coveo/headless/insight';
+import {Component, Element, h, Listen, Prop, State} from '@stencil/core';
 import {FocusTargetController} from '../../../utils/accessibility-utils';
 import {
   BindStateToController,

packages/atomic/src/components/insight/atomic-insight-pager/atomic-insight-pager.tsx

@@ -1,12 +1,12 @@
-import {Component, Event, EventEmitter, h, Prop, State} from '@stencil/core';
 import {
-  buildInsightPager,
-  buildInsightSearchStatus,
-  InsightPager,
-  InsightPagerState,
-  InsightSearchStatus,
-  InsightSearchStatusState,
-} from '../';
+  buildPager as buildInsightPager,
+  buildSearchStatus as buildInsightSearchStatus,
+  Pager as InsightPager,
+  PagerState as InsightPagerState,
+  SearchStatus as InsightSearchStatus,
+  SearchStatusState as InsightSearchStatusState,
+} from '@coveo/headless/insight';
+import {Component, Event, EventEmitter, h, Prop, State} from '@stencil/core';
 import ArrowLeftIcon from '../../../images/arrow-left-rounded.svg';
 import ArrowRightIcon from '../../../images/arrow-right-rounded.svg';
 import {FocusTargetController} from '../../../utils/accessibility-utils';

packages/atomic/src/components/insight/atomic-insight-refine-modal/atomic-insight-refine-modal.tsx

@@ -1,12 +1,12 @@
-import {Component, h, State, Prop, Element, Watch, Host} from '@stencil/core';
 import {
-  InsightQuerySummary,
-  InsightQuerySummaryState,
-  buildInsightQuerySummary,
-  InsightBreadcrumbManager,
-  InsightBreadcrumbManagerState,
-  buildInsightBreadcrumbManager,
-} from '..';
+  QuerySummary as InsightQuerySummary,
+  QuerySummaryState as InsightQuerySummaryState,
+  buildQuerySummary as buildInsightQuerySummary,
+  BreadcrumbManager as InsightBreadcrumbManager,
+  BreadcrumbManagerState as InsightBreadcrumbManagerState,
+  buildBreadcrumbManager as buildInsightBreadcrumbManager,
+} from '@coveo/headless/insight';
+import {Component, h, State, Prop, Element, Watch, Host} from '@stencil/core';
 import {rectEquals} from '../../../utils/dom-utils';
 import {
   BindStateToController,

packages/atomic/src/components/insight/atomic-insight-refine-toggle/atomic-insight-refine-toggle.tsx

@@ -1,12 +1,12 @@
-import {Component, h, State, Element} from '@stencil/core';
 import {
-  buildInsightBreadcrumbManager,
-  buildInsightSearchStatus,
-  InsightBreadcrumbManager,
-  InsightBreadcrumbManagerState,
-  InsightSearchStatus,
-  InsightSearchStatusState,
-} from '..';
+  buildBreadcrumbManager as buildInsightBreadcrumbManager,
+  buildSearchStatus as buildInsightSearchStatus,
+  BreadcrumbManager as InsightBreadcrumbManager,
+  BreadcrumbManagerState as InsightBreadcrumbManagerState,
+  SearchStatus as InsightSearchStatus,
+  SearchStatusState as InsightSearchStatusState,
+} from '@coveo/headless/insight';
+import {Component, h, State, Element} from '@stencil/core';
 import FilterIcon from '../../../images/filter.svg';
 import {
   InitializeBindings,

packages/atomic/src/components/insight/atomic-insight-result/atomic-insight-result.tsx

@@ -1,5 +1,9 @@
+import {
+  Result as InsightResult,
+  InteractiveResult as InsightInteractiveResult,
+  FoldedResult as InsightFoldedResult,
+} from '@coveo/headless/insight';
 import {Component, h, Prop, Element, Listen, Host} from '@stencil/core';
-import {InsightResult, InsightInteractiveResult, InsightFoldedResult} from '..';
 import {applyFocusVisiblePolyfill} from '../../../utils/initialization-utils';
 import {
   DisplayConfig,

packages/atomic/src/components/insight/atomic-insight-search-box/atomic-insight-search-box.tsx

@@ -1,11 +1,11 @@
 import {loadInsightSearchActions} from '@coveo/headless/insight';
-import {Component, Element, h, Prop, State} from '@stencil/core';
 import {
-  buildInsightSearchBox,
-  InsightSearchBox,
-  InsightSearchBoxState,
-  InsightSuggestion,
-} from '..';
+  buildSearchBox as buildInsightSearchBox,
+  SearchBox as InsightSearchBox,
+  SearchBoxState as InsightSearchBoxState,
+  Suggestion as InsightSuggestion,
+} from '@coveo/headless/insight';
+import {Component, Element, h, Prop, State} from '@stencil/core';
 import SearchSlimIcon from '../../../images/search-slim.svg';
 import {AriaLiveRegion} from '../../../utils/accessibility-utils';
 import {hasKeyboard, isMacOS} from '../../../utils/device-utils';

packages/atomic/src/components/insight/atomic-insight-tab/atomic-insight-tab.tsx

@@ -1,6 +1,10 @@
 import {Unsubscribe} from '@coveo/headless';
+import {
+  buildTab as buildInsightTab,
+  Tab as InsightTab,
+  TabState as InsightTabState,
+} from '@coveo/headless/insight';
 import {Component, h, Prop, State, Method, Element} from '@stencil/core';
-import {buildInsightTab, InsightTab, InsightTabState} from '..';
 import {
   BindStateToController,
   InitializableComponent,

packages/atomic/src/components/insight/atomic-insight-timeframe-facet/atomic-insight-timeframe-facet.tsx

@@ -1,23 +1,23 @@
-import {Component, Element, h, Listen, Prop, State} from '@stencil/core';
 import {
-  buildInsightDateFacet,
-  buildInsightDateFilter,
-  buildInsightDateRange,
-  buildInsightFacetConditionsManager,
-  buildInsightSearchStatus,
-  deserializeInsightRelativeDate,
-  InsightDateFacet,
-  InsightDateFacetState,
-  InsightDateFilter,
-  InsightDateFilterState,
-  InsightDateRangeRequest,
-  InsightSearchStatus,
-  InsightSearchStatusState,
-  loadInsightDateFacetSetActions,
-  InsightRangeFacetSortCriterion,
-  InsightFacetValueRequest,
-  InsightCategoryFacetValueRequest,
-} from '..';
+  buildDateFacet as buildInsightDateFacet,
+  buildDateFilter as buildInsightDateFilter,
+  buildDateRange as buildInsightDateRange,
+  buildFacetConditionsManager as buildInsightFacetConditionsManager,
+  buildSearchStatus as buildInsightSearchStatus,
+  deserializeRelativeDate as deserializeInsightRelativeDate,
+  DateFacet as InsightDateFacet,
+  DateFacetState as InsightDateFacetState,
+  DateFilter as InsightDateFilter,
+  DateFilterState as InsightDateFilterState,
+  DateRangeRequest as InsightDateRangeRequest,
+  SearchStatus as InsightSearchStatus,
+  SearchStatusState as InsightSearchStatusState,
+  loadDateFacetSetActions as loadInsightDateFacetSetActions,
+  RangeFacetSortCriterion as InsightRangeFacetSortCriterion,
+  FacetValueRequest as InsightFacetValueRequest,
+  CategoryFacetValueRequest as InsightCategoryFacetValueRequest,
+} from '@coveo/headless/insight';
+import {Component, Element, h, Listen, Prop, State} from '@stencil/core';
 import {FocusTargetController} from '../../../utils/accessibility-utils';
 import {
   BindStateToController,