@empathyco/x-components 3.0.0-alpha.30 → 3.0.0-alpha.31

package/CHANGELOG.md

@@ -3,6 +3,43 @@
 All notable changes to this project will be documented in this file. See
 [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.0.0-alpha.31](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.30...@empathyco/x-components@3.0.0-alpha.31) (2021-11-25)
+
+### Features
+
+- **design-system:** add identifier result in suggestion component
+  ([d4ce3c2](https://github.com/empathyco/x/commit/d4ce3c2eb1188e38e55e466f65c9da165bf9bfe7)),
+  closes [EX-5065](https://searchbroker.atlassian.net/browse/EX-5065)
+- **identifier-results:** add extra params in the x-module
+  ([6afff42](https://github.com/empathyco/x/commit/6afff426081b645bb0e878c77915a4c319b847d2)),
+  closes [EX-5066](https://searchbroker.atlassian.net/browse/EX-5066)
+- **tagging:** `track` query
+  ([594c656](https://github.com/empathyco/x/commit/594c65649cbf08f586dc9912b367ea39d9da2fa6)),
+  closes [EX-4989](https://searchbroker.atlassian.net/browse/EX-4989)
+- **tagging:** add feature hardcoded values
+  ([ee6db3a](https://github.com/empathyco/x/commit/ee6db3a360228528a109fedc732bd552ad5d5a61)),
+  closes [EX-5003](https://searchbroker.atlassian.net/browse/EX-5003)
+
+### Testing
+
+- **e2e:** Reduce command timeout and number of retries.
+  ([5e1521f](https://github.com/empathyco/x/commit/5e1521f53aad1e4bfc8f60c7e705422ab2af052c)),
+  closes [EX-5015](https://searchbroker.atlassian.net/browse/EX-5015)
+- **e2e:** reorder mocked responses
+  ([8cab691](https://github.com/empathyco/x/commit/8cab691b553af31d9b5bc80130e16886877f1b60)),
+  closes [EX-4923](https://searchbroker.atlassian.net/browse/EX-4923)
+
+### Documentation
+
+- add new static docs.
+  ([8a40986](https://github.com/empathyco/x/commit/8a409865fea2cd67e0c2daa5d4464f553ff33a2b)),
+  closes [EX-5033](https://searchbroker.atlassian.net/browse/EX-5033)
+
+# Change Log
+
+All notable changes to this project will be documented in this file. See
+[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
 ## [3.0.0-alpha.30](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.29...@empathyco/x-components@3.0.0-alpha.30) (2021-11-22)
 
 ### Features

package/core/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/design-system/default-theme.css

@@ -1091,6 +1091,9 @@
 .x-list > .x-list__item--expand {
   flex: 1 1 auto; }
 
+.x-list > .x-list__item--no-expand {
+  flex: 0 0 auto; }
+
 .x-list.x-list--horizontal > .x-list__item--expand {
   min-width: 0; }
 
@@ -1888,7 +1891,7 @@
         margin-right: var(--x-size-gap-suggestion-default); } }
   .x-suggestion__query {
     flex: 1 1 auto; }
-  .x-suggestion__matching-part {
+  .x-suggestion__matching-part, .x-suggestion .x-identifier-result__matching-part {
     font-family: var(--x-font-family-suggestion-matching-part-default);
     font-size: var(--x-size-font-suggestion-matching-part-default);
     line-height: var(--x-size-line-height-suggestion-matching-part-default);
@@ -1902,6 +1905,8 @@
       --x-number-font-weight-suggestion-default-matching
     );
     --x-color-text-suggestion-default: var(--x-color-text-suggestion-default-matching); }
+  .x-suggestion > .x-identifier-result {
+    flex: none; }
 
 :root {
   --x-color-text-suggestion-default: var(--x-color-text-default);

package/design-system/full-theme.css

@@ -1474,6 +1474,9 @@
 .x-list > .x-list__item--expand {
   flex: 1 1 auto; }
 
+.x-list > .x-list__item--no-expand {
+  flex: 0 0 auto; }
+
 .x-list.x-list--horizontal > .x-list__item--expand {
   min-width: 0; }
 
@@ -2828,7 +2831,7 @@
         margin-right: var(--x-size-gap-suggestion-default); } }
   .x-suggestion__query {
     flex: 1 1 auto; }
-  .x-suggestion__matching-part {
+  .x-suggestion__matching-part, .x-suggestion .x-identifier-result__matching-part {
     font-family: var(--x-font-family-suggestion-matching-part-default);
     font-size: var(--x-size-font-suggestion-matching-part-default);
     line-height: var(--x-size-line-height-suggestion-matching-part-default);
@@ -2842,6 +2845,8 @@
       --x-number-font-weight-suggestion-default-matching
     );
     --x-color-text-suggestion-default: var(--x-color-text-suggestion-default-matching); }
+  .x-suggestion > .x-identifier-result {
+    flex: none; }
 
 :root {
   --x-color-text-suggestion-default: var(--x-color-text-default);

package/design-system/list-default.css

@@ -81,6 +81,9 @@
 .x-list > .x-list__item--expand {
   flex: 1 1 auto; }
 
+.x-list > .x-list__item--no-expand {
+  flex: 0 0 auto; }
+
 .x-list.x-list--horizontal > .x-list__item--expand {
   min-width: 0; }
 

package/design-system/suggestion-default.css

@@ -63,7 +63,7 @@
         margin-right: var(--x-size-gap-suggestion-default); } }
   .x-suggestion__query {
     flex: 1 1 auto; }
-  .x-suggestion__matching-part {
+  .x-suggestion__matching-part, .x-suggestion .x-identifier-result__matching-part {
     font-family: var(--x-font-family-suggestion-matching-part-default);
     font-size: var(--x-size-font-suggestion-matching-part-default);
     line-height: var(--x-size-line-height-suggestion-matching-part-default);
@@ -77,3 +77,5 @@
       --x-number-font-weight-suggestion-default-matching
     );
     --x-color-text-suggestion-default: var(--x-color-text-suggestion-default-matching); }
+  .x-suggestion > .x-identifier-result {
+    flex: none; }

package/docs/API-reference/api/x-components.identifierresultsactions.md

@@ -21,5 +21,4 @@ export interface IdentifierResultsActions
 |  [fetchIdentifierResults(request)](./x-components.identifierresultsactions.fetchidentifierresults.md) | Requests a new set of identifier results for the module query, and returns them. |
 |  [saveOrigin(originInit)](./x-components.identifierresultsactions.saveorigin.md) | Creates a [QueryOrigin](./x-components.queryorigin.md) and saves it. |
 |  [saveQuery(query)](./x-components.identifierresultsactions.savequery.md) | Stores the query in the module if it matches the regex. |
-|  [setUrlParams(urlParams)](./x-components.identifierresultsactions.seturlparams.md) | Checks if the url has a query on it and then updates the state with that value. |
 

package/docs/API-reference/api/x-components.identifierresultsmutations.md

@@ -19,5 +19,6 @@ export interface IdentifierResultsMutations extends StatusMutations
 |  --- | --- |
 |  [setIdentifierResults(identifierResults)](./x-components.identifierresultsmutations.setidentifierresults.md) | Sets the identifier results of the module. |
 |  [setOrigin(origin)](./x-components.identifierresultsmutations.setorigin.md) | Sets the origin of the module. |
+|  [setParams(params)](./x-components.identifierresultsmutations.setparams.md) | Sets the extra params of the module. |
 |  [setQuery(newQuery)](./x-components.identifierresultsmutations.setquery.md) | Sets the query of the module, which is used to retrieve the identifier-results. |
 

package/docs/API-reference/api/x-components.identifierresultsmutations.setparams.md

@@ -0,0 +1,24 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [IdentifierResultsMutations](./x-components.identifierresultsmutations.md) &gt; [setParams](./x-components.identifierresultsmutations.setparams.md)
+
+## IdentifierResultsMutations.setParams() method
+
+Sets the extra params of the module.
+
+<b>Signature:</b>
+
+```typescript
+setParams(params: Dictionary<unknown>): void;
+```
+
+## Parameters
+
+|  Parameter | Type | Description |
+|  --- | --- | --- |
+|  params | [Dictionary](./x-components.dictionary.md)<!-- -->&lt;unknown&gt; | The new extra params. |
+
+<b>Returns:</b>
+
+void
+

package/docs/API-reference/api/x-components.identifierresultsstate.md

@@ -20,5 +20,6 @@ export interface IdentifierResultsState extends StatusState
 |  [config](./x-components.identifierresultsstate.config.md) | [IdentifierResultsConfig](./x-components.identifierresultsconfig.md) | The configuration of the identifier results module. |
 |  [identifierResults](./x-components.identifierresultsstate.identifierresults.md) | Result\[\] | The list of the identifier results, related to the <code>query</code> property of the state. |
 |  [origin](./x-components.identifierresultsstate.origin.md) | [QueryOrigin](./x-components.queryorigin.md) \| null | The origin property of the request. |
+|  [params](./x-components.identifierresultsstate.params.md) | [Dictionary](./x-components.dictionary.md)<!-- -->&lt;unknown&gt; | The extra params property of the state. |
 |  [query](./x-components.identifierresultsstate.query.md) | string | The internal query of the module. Used to request the identifier results. |
 

package/docs/API-reference/api/x-components.identifierresultsstate.params.md

@@ -0,0 +1,13 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [IdentifierResultsState](./x-components.identifierresultsstate.md) &gt; [params](./x-components.identifierresultsstate.params.md)
+
+## IdentifierResultsState.params property
+
+The extra params property of the state.
+
+<b>Signature:</b>
+
+```typescript
+params: Dictionary<unknown>;
+```

package/docs/API-reference/api/x-components.md

@@ -480,6 +480,7 @@ X-Components is a library usable everywhere not only for search experiences.
 |  [setExtraParams](./x-components.setextraparams.md) | Sets the extra params of the [ExtraParamsXModule](./x-components.extraparamsxmodule.md)<!-- -->. |
 |  [setHistoryQueries](./x-components.sethistoryqueries.md) | Default implementation for the [HistoryQueriesActions.setHistoryQueries()](./x-components.historyqueriesactions.sethistoryqueries.md)<!-- -->. |
 |  [setHistoryQueriesQuery](./x-components.sethistoryqueriesquery.md) | Sets the query of the history queries module. Used for searching into the history queries. |
+|  [setIdentifierResultsExtraParams](./x-components.setidentifierresultsextraparams.md) | Sets the identifier result state <code>params</code>. |
 |  [setIdentifierResultsQuery](./x-components.setidentifierresultsquery.md) | Sets the identifier-results module query. |
 |  [setInitialExtraParams](./x-components.setinitialextraparams.md) | Sets the initial provided extra params. |
 |  [setName](./x-components.setname.md) | Sets the device of the [DeviceXModule](./x-components.devicexmodule.md)<!-- -->. |
@@ -526,6 +527,8 @@ X-Components is a library usable everywhere not only for search experiences.
 |  [throttleFunction](./x-components.throttlefunction.md) | Util function that returns a throttled version of the function passed as parameter. |
 |  [toggleRelatedTag](./x-components.togglerelatedtag.md) | Default implementation for the [RelatedTagsActions.toggleRelatedTag()](./x-components.relatedtagsactions.togglerelatedtag.md)<!-- -->. |
 |  [toggleRelatedTagWire](./x-components.togglerelatedtagwire.md) | Sets the selected related tags. |
+|  [track](./x-components.track.md) | Default implementation for the [TaggingActions.track()](./x-components.taggingactions.track.md)<!-- -->. |
+|  [trackWire](./x-components.trackwire.md) | Tracks the tagging of the query using a debounce which ends if the user accepts a query. |
 |  [TrashIcon](./x-components.trashicon.md) |  |
 |  [TrashOpenIcon](./x-components.trashopenicon.md) |  |
 |  [TrendingIcon](./x-components.trendingicon.md) |  |

package/docs/API-reference/api/x-components.setconsent.md

@@ -9,5 +9,5 @@ Sets the tagging state `consent`<!-- -->.
 <b>Signature:</b>
 
 ```typescript
-setConsent: import("../..").Wire<boolean>
+setConsent: import("../../wiring").Wire<boolean>
 ```

package/docs/API-reference/api/x-components.setidentifierresultsextraparams.md

@@ -0,0 +1,13 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [setIdentifierResultsExtraParams](./x-components.setidentifierresultsextraparams.md)
+
+## setIdentifierResultsExtraParams variable
+
+Sets the identifier result state `params`<!-- -->.
+
+<b>Signature:</b>
+
+```typescript
+setIdentifierResultsExtraParams: import("../..").Wire<import("../..").Dictionary<unknown>>
+```

package/docs/API-reference/api/x-components.setquerytaggingdebounce.md

@@ -9,5 +9,5 @@ Sets the tagging state config `queryTaggingDebounceMs`<!-- -->.
 <b>Signature:</b>
 
 ```typescript
-setQueryTaggingDebounce: import("../..").Wire<number>
+setQueryTaggingDebounce: import("../../wiring").Wire<number>
 ```

package/docs/API-reference/api/x-components.setsessionduration.md

@@ -9,5 +9,5 @@ Sets the tagging state `sessionTTLMs`<!-- -->.
 <b>Signature:</b>
 
 ```typescript
-setSessionDuration: import("../..").Wire<number>
+setSessionDuration: import("../../wiring").Wire<number>
 ```

package/docs/API-reference/api/x-components.taggingactions.md

@@ -11,3 +11,10 @@ Tagging store actions.
 ```typescript
 export interface TaggingActions 
 ```
+
+## Methods
+
+|  Method | Description |
+|  --- | --- |
+|  [track(tagging)](./x-components.taggingactions.track.md) | Tracks a user interaction. |
+

package/docs/API-reference/api/x-components.taggingactions.track.md

@@ -0,0 +1,24 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [TaggingActions](./x-components.taggingactions.md) &gt; [track](./x-components.taggingactions.track.md)
+
+## TaggingActions.track() method
+
+Tracks a user interaction.
+
+<b>Signature:</b>
+
+```typescript
+track(tagging: TaggingInfo | TaggingInfo[]): void;
+```
+
+## Parameters
+
+|  Parameter | Type | Description |
+|  --- | --- | --- |
+|  tagging | TaggingInfo \| TaggingInfo\[\] | The information of the event to track. |
+
+<b>Returns:</b>
+
+void
+

package/docs/API-reference/api/x-components.track.md

@@ -0,0 +1,13 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [track](./x-components.track.md)
+
+## track variable
+
+Default implementation for the [TaggingActions.track()](./x-components.taggingactions.track.md)<!-- -->.
+
+<b>Signature:</b>
+
+```typescript
+track: TaggingXStoreModule['actions']['track']
+```

package/docs/API-reference/api/x-components.trackwire.md

@@ -0,0 +1,13 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [trackWire](./x-components.trackwire.md)
+
+## trackWire variable
+
+Tracks the tagging of the query using a debounce which ends if the user accepts a query.
+
+<b>Signature:</b>
+
+```typescript
+trackWire: import("../../wiring").AnyWire
+```

package/docs/build-search-ui/README.md

@@ -0,0 +1,113 @@
+---
+id: x-components.README
+title: README
+sidebar_label: README
+---
+---
+title: Build your search UI for web
+tags:
+  - getting started
+  - x integration
+  - use x components
+  - x components
+  - interface x
+---
+
+::: slot left-intro-column
+
+## Getting started with Interface X Components
+
+Start building your search and discovery experience in a few simple steps:
+
+:::
+
+::: slot right-intro-column
+
+<img :src="$withBase('/assets/media/build-search-ui.svg')" alt="Build Your Search UI">
+
+:::
+
+- **Discover more about the
+  [Interface X ecosystem](/develop-empathy-platform/build-search-ui/README.md#the-interface-x-ecosystem)**
+  and how Interface&nbsp;X works.
+- **[Integrate the Interface X Components](/develop-empathy-platform/build-search-ui/README.md#integrate-x-components)**
+  in your store web application.
+- **[Use & configure the Interface X Components](/develop-empathy-platform/build-search-ui/README.md#use-configure-the-x-components)**
+  in your project.
+
+<!-- 3. Style your UI. 4. Translate your search experience-->
+<!-- HIDE VIDEO UNTIL CONTENT BOX FIXED <VideoContent title="Want to learn more?" :links="[{title:'How-to guide',link:'/develop-empathy-platform/build-search-ui/web-x-components-integration-guide'},{title:'Architecture',link:'/develop-empathy-platform/build-search-ui/x-architecture/'},{title:'UI reference',link:'/develop-empathy-platform/ui-reference/'}]"></VideoContent>-->
+
+## The Interface X ecosystem
+
+The Interface&nbsp;X ecosystem consists of libraries of components for web. These independent
+building blocks, with their own unique view and behavior, allows you to progressively build your
+search and discovery experience. The more you add, the more functionality you get. There are
+numerous components to choose from, and the catalog evolves quickly with new experiences.
+
+Check out the **[open source project in GitHub](https://github.com/empathyco/x)**.
+
+Interested in learning more about how Interface&nbsp;X works? Discover more about its
+**[architecture](/develop-empathy-platform/build-search-ui/x-architecture/)**.
+
+## Integrate Interface X Components
+
+You can use the X&nbsp;Components in a project in two ways:
+
+- using the separate **Interface&nbsp;X&nbsp;Archetype** project, an out-of-the-box project with all
+  you need to get up and running fast, or
+- integrating the individual **Interface&nbsp;X&nbsp;Components** library in your Vue project for a
+  more custom approach.
+
+::: note You can use Empathy Search API, Elasticsearch, or Solr endpoints with both approaches. :::
+
+##### Integration via Interface X Archetype project
+
+The **[Interface&nbsp;X&nbsp;Archetype](https://github.com/empathyco/x-archetype)** project is the
+perfect combination of all the existing X&nbsp;Components. Instead of starting from a completely
+blank canvas, ramp up quickly with an already working search and discovery experience. This is the
+perfect solution for most cases. But don’t worry! It’s still super flexible! You’re still able to:
+
+- Change the default styles for styles that match your application through design tokens or custom
+  CSS.
+- Change configuration parameters such as the number of suggestions, enable, or disable instant
+  search.
+- Change the layout, position, or the number of the components used.
+- Use the individual X&nbsp;Component internationalization tool or use your own tool.
+- Create new components or modify the existing ones.
+
+To start using the X&nbsp;Archetype project, see
+**[Integrate Interface X Archetype project](web-archetype-integration-guide.md)**.
+
+##### Integration via Interface X Components library
+
+This is the more deep and flexible use of the
+**[Interface X Components library](https://github.com/empathyco/x/tree/main/packages/x-components)**,
+allowing you to import any components you desire into your Vue application. It lets you connect,
+customize, extend, style, or even create new components without any limitations. This is the way to
+go if you like to look under the hood!
+
+- Mix and match with other Vue components.
+- Implement in Vue or React projects.
+- Extend component behavior with your own development.
+- Determine styles using design tokens or custom CSS.
+
+To get started with the X Components library, check out
+**[Integrate Interface X Components in your Vue application](web-x-components-integration-guide.md)**.
+
+## Use & configure the Interface X Components
+
+Using the Interface&nbsp;X&nbsp;Components is a piece of cake! Just import and register the
+component, include it in your template, and you’re ready to go! What’s more, each component offers
+multiple configuration parameters to play around with, allowing you greater flexibility over the
+experience.
+
+Unsure how to start? Check out
+**[Use & configure Interface X Components in your project](web-use-x-components-guide.md)**.
+
+<!--
+## Style your UI
+
+## Translate your search experience
+
+-->

package/docs/build-search-ui/web-archetype-integration-guide.md

@@ -0,0 +1,183 @@
+---
+id: x-components.web-archetype-integration-guide
+title: Web Archetype Integration Guide
+sidebar_label: Web Archetype Integration Guide
+---
+---
+title: Integrate Interface X Archetype
+tags:
+  - integration
+  - archetype
+  - X Components archetype integration
+  - x integration
+  - interface x
+  - x components
+  - archetype integration
+---
+
+# Integrate Interface X Archetype
+
+In this tutorial, you’ll learn how to integrate the Interface X Archetype project in your
+store in a matter of minutes so you can develop a search interface layer based on predefined
+features and components.
+
+For this tutorial, the Empathy Search API is used, but you can use any search API. This guide
+requires knowledge of JavaScript and Vue.js.
+
+::: note Before you begin
+
+To integrate Interface X Archetype as a search UI layer, you need:
+
+- **Empathy Search API** (or any search API that you use to retrieve search data).
+- **Empathy Search Adapter** to communicate with the Empathy Search API (or any search adapter to
+  connect with the search API you are using).
+
+:::
+
+##### Steps to integrate X Archetype project:
+
+1. **Clone** the X Archetype project and **initialize** your repository.
+2. Install the **project dependencies** and execute the project.
+3. Configure the **search adapter**.
+4. Configure the **xPlugin**.
+
+## 1. Clone the project and initialize your repository
+
+Clone the [X Archetype project](https://github.com/empathyco/x-archetype.git) from the GitHub
+repository to your target folder. You need a non-initialized repository, so make sure you remove the
+git folder from the cloned project.
+
+```batch
+// Clone the X Archetype project from GitHub
+git clone --depth 1 https://github.com/empathyco/x-archetype.git <your-target-folder>
+
+// Remove the git folder
+rm -rf .git
+```
+
+::: develop
+
+You can use [Degit](https://github.com/Rich-Harris/degit) to clone the git repository without
+downloading the entire git history:
+`npx degit https://github.com/empathyco/x-archetype.git <your-target-folder>`.
+
+:::
+
+Once you have cloned the project and removed the git history from the project, initialize the
+repository from the root directory.
+
+```batch
+// Initialize the repository
+git init
+git remote add origin <your-repository-url>
+git add .
+git commit -m "Initial X-Components Setup"
+git push -u origin main
+```
+
+Then, replace the current repository name (`@empathyco/x-archetype`) with the name of your
+repository in the `package.json` file.
+
+```json
+// Define your repository
+{
+   "name": "<your-repo>",
+   "author": "Empathy Systems Corporation S.L.",
+   …
+ }
+
+```
+
+## 2. Install the dependencies and execute the project
+
+Install the project dependencies via `npm` in the root folder of your cloned repository. Then, you
+can run the project.
+
+```batch
+// Install the dependencies via npm
+npm install
+
+// Execute the project
+npm run serve
+```
+
+::: interact  
+For a full list of the project dependencies, check the
+[`package.json`](https://github.com/empathyco/x-archetype/blob/main/package.json) file in the
+Interface&nbsp;X&nbsp;Archetype repository. :::
+
+## 3. Configure the search adapter
+
+Before using your project, configure the Empathy Search Adapter in the
+`x-archetype/src/adapter/adapter.ts` file, using the Empathy Adapter Builder to make it work with
+the Empathy Search API. The Empathy Search Adapter contains a sample configuration for setup, global
+configurations, or mappers that points to a demo environment. You need to make some adjustments in
+the configuration according to the search features you use in your project.
+
+Export the required search adapter with your configuration as you will need it for the search
+[xPlugin configuration](web-archetype-integration-guide.md#_4-configure-the-plugin).
+
+::: interact For detailed information about other configuration options in the Empathy Search
+Adapter, go to the
+[x-adapter repository](https://github.com/empathyco/x/tree/main/packages/search-adapter). :::
+
+::: note Although you configure the values for the `instance`, `language`, `scope`, and `endpoint`
+options when integrating the project, you can still change these values when the project is
+deployed. Use the `/x-archetype/public/snippet-script.js` file to perform hot changes for `lang`,
+`store`, `device`, and `catalog` parameters.
+
+For example, you may configure the adapter to use EN as `lang` so that when you search, the results
+are displayed in English. However, if you want to deploy the application in Spain, you want the
+`lang` to be ES. You change these values in the `snippet-script.js` file.
+
+:::
+
+## 4. Configure the plugin
+
+The `xPlugin` initializes the properties needed by the X&nbsp;Components. It has key options that
+you can configure in the `/x-archetype/src/x-components/plugin.options.ts` file.
+
+Since the X&nbsp;Archetype project operates as a layer and is designed to be integrated on top of
+any kind of website regardless the chosen technology, the `XInstaller` utility and its
+`installXOptions` object are designed to install the xPlugin, adding the connection between the
+X&nbsp;Components and the search API and bootstrapping the entire application with powerful APIs
+that are available in the `window.X` object.
+
+To configure the xPlugin, run this code:
+
+```typescript
+import { InstallXOptions, XInstaller } from '@empathyco/x-components';
+import App from './App.vue';
+import store from './store';
+import { adapter } from '../adapter';
+
+export const installXOptions: InstallXOptions = {
+  adapter,
+  store,
+  app: App
+};
+
+new XInstaller(installXOptions).init({
+  instance: '<your-search-api-instance>',
+  lang: '<your-application-language>',
+  scope: '<your-application-scope>'
+});
+```
+
+---
+
+### Next steps
+
+Once you have integrated the Interface&nbsp;X&nbsp;Archetype in your store, you're ready to start
+using the X&nbsp;Archetype as is or extend the search and discovery experience to meet your business
+needs:
+
+- Change the configuration of [X Components](web-use-x-components-guide.md) or create new ones.
+- Adapt the
+  [design system](https://github.com/empathyco/x/blob/main/packages/x-components/contributing/design-system.md)
+  to your branding.
+- Manage
+  [internationalization options](https://github.com/empathyco/x-archetype/blob/main/docs/i18n.md) to
+  support different languages.
+
+<!-- add links to design system and internationalization content pages when ready-->