@coveo/atomic

Atomic

A web-component library for building modern UIs interfacing with the Coveo platform. Atomic web-components are built with Stencil. They are self-encapsulated, composable, and light-weight.

Getting Started

Once you have cloned the repo, follow the instructions in the top-level README.md to install dependencies and link packages.

To start the project in development mode, run:

npm start

To build the library for production, run:

npm run build

To run the unit tests for the components, run:

npm test

Using the components

Script tag

• Put a script tag similar to this <script src='https://unpkg.com/my-component@0.0.1/dist/mycomponent.js'></script> in the head of your index.html
• Then you can use the element anywhere in your template, JSX, html etc

Initialization

• To initialize the atomic-search-interface component, you have to add a script tag calling initialize(...) on it once the custom element is defined:

<script>
  (async () => {
    await customElements.whenDefined('atomic-search-interface');
    document.querySelector('atomic-search-interface').initialize({
      accessToken: 'my_token',
      organizationId: 'my_org',
    });
  })();
</script>

• All other components have to be the child of an initialized atomic-search-interface to work properly.
• For testing or demo purposes, adding the sample attribute on the atomic-search-interface element is sufficient and will bypass initialization.

Node Modules

• Run npm install @coveo/atomic --save
• Put a script tag similar to this <script src='node_modules/@coveo/atomic/dist/mycomponent.js'></script> in the head of your index.html
• Then you can use the element anywhere in your template, JSX, html etc

In your app

• Run npm install @coveo/atomic --save
• Add an import to the npm packages import '@coveo/atomic';
• Then you can use the element anywhere in your template, JSX, html etc

Run Cypress for Atomic components

Ref: https://docs.cypress.io/

• All the tests will need to be under folder cypress\integration

Open

To open cypress, run:

npm run cypressopen

To run all the test, run:

npm run cypresstest