Now Particularly Misnamed

    @coveo/atomic
    TypeScript icon, indicating that this package has built-in type declarations

    2.15.0 • Public • Published

    npm version Built With Stencil

    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.

    Using the library: Coveo Atomic Library Official Documentation.

    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

    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 cypress:open

    To run all the test, run:

    npm run cypress:test

    To run all the test in Firefox:

    npm run cypress:test:firefox

    Separate test for Hosted Search Page

    To test the current Atomic build against the hosted search pages for Trials, use the following commands:

    npm run cypress-hsp:open
    npm run cypress-hsp:test
    npm run cypress-hsp:test:firefox

    Visual regression tests

    Visual regression test for the result templates use Applitools Eyes. Results can ve viewed at https://eyes.applitools.com/app/test-results/. Log in using the username developers@qa.coveo.com (password in Lastpass)

    In order to run these locally, you will need to set an environment variable containing the Applitools api key. This key can be found by logging in to Applitools and clicking on User (top right icon) > My Api Key.

    When using Mac or Linux use a command like this in your terminal, ~/.bash-profile or ~/.profile:

    export APPLITOOLS_API_KEY=*****

    Using Windows:

    setx APPLITOOLS_API_KEY *****

    Run the tests using either of these commands:

    npm run cypress-visual:open
    npm run cypress-visual:test

    Utilities

    Stencil decorators

    When building Atomic components, a series of decorators are used to make development faster.

    InitializeBindings & BindStateToController decorators

    InitializeBindings is a utility that automatically fetches the bindings from the parent atomic-search-interface or atomic-external component. This decorator has to be applied a property named bindings.

    Important In order for a component using this decorator to render properly, it should have an internal state bound to one of the properties from bindings. This is possible by using the BindStateToController decorator along with a State decorator.

    Here is a complete example:

    import {Component, State} from '@stencil/core';
    import {
      InitializeBindings,
      InitializableComponent,
      BindStateToController,
      Bindings,
    } from '@coveo/atomic';
    import {
      ControllerState,
      Controller,
      buildController,
    } from '@coveo/headless';
    
    @Component({
      tag: 'atomic-component',
    })
    export class AtomicComponent implements InitializableComponent {
      @InitializeBindings() public bindings!: Bindings;
      private controller!: Controller;
    
      // Automatically subscribes the `controllerState` to the state of the `controller`
      @BindStateToController('controller')
      @State()
      private controllerState!: ControllerState;
    
      // Method called after bindings are defined, where controllers should be initialized
      public initialize() {
        this.controller = buildController(this.bindings.engine);
      }
    
      render() {
        return [this.strings.value(), this.controllerState.value];
      }
    }

    ResultContext decorator

    ResultContext is a utility that automatically fetches the result from the parent component's rendered atomic-result. This utility is used inside of custom result template components.

    import {Component, State} from '@stencil/core';
    import {ResultContext} from '@coveo/atomic';
    
    @Component({
      tag: 'atomic-result-component',
    })
    export class AtomicResultComponent {
      @ResultContext() private result!: Result;
    
      @State() public error!: Error;
    
      public render() {
        return this.result.title;
      }
    }

    Keywords

    none

    Install

    npm i @coveo/atomic

    DownloadsWeekly Downloads

    2,442

    Version

    2.15.0

    License

    Apache-2.0

    Unpacked Size

    41.3 MB

    Total Files

    3551

    Last publish

    Collaborators

    • mmitiche
    • jkatofsky
    • agong-coveo
    • lrett
    • pixhel
    • ndlr
    • npmcoveo
    • camarois
    • lcoolen
    • coveo-organization
    • coveoit
    • olamothe
    • jfthibodeaucoveo
    • btaillon_cov
    • sssayegh
    • ylakhdar