npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

test-lwc-19

v1.18.13

Published

A Salesforce Lightning Web Component (LWC) library for building modern UIs interfacing with the Coveo platform

Downloads

154

Readme

Coveo Quantic

Using the Library

How to use the Coveo Quantic Library

Install Coveo Quantic as a Salesforce unlocked package

Contributing

Create a Salesforce Developer Organization

  • Sign up
  • Use your @coveo.com email account. The username can be anything.

Setup SFDX CLI

SFDX cli

Update SFDX CLI Plugins

  • Run sfdx plugins:install @salesforce/lwc-dev-server
  • Run sfdx plugins:update

Install VSCode Extension

vscode Salesforce Extension Pack

Note Make sure you open the quantic project at the root (/packages/quantic/) in vscode in order for the entension to work properly.

Enable Dev Hub in Your Salesforce Organization

  • Connect to your salesforce developer organization login
  • From Setup, enter Dev Hub in the Quick Find box and select Dev Hub.
  • To enable Dev Hub, click Enable

Authorize Your Dev Hub

  • In VS Code, press Command + Shift P, enter sfdx, and select SFDX: Authorize a Dev Hub.
  • You can also run this command from the command line. sfdx force:auth:web:login -d -a LWC-Hub
  • Running this command opens a browser to the Salesforce login page. Enter your Salesforce username and password. Authorize only once, not every time you work on your project.

Create a Default Scratch Org

  • In VS Code, press Command + Shift P, enter sfdx, and select SFDX: Create a Default Scratch Org.
  • You can also run this command from the command line. sfdx force:org:create -s -f config/project-scratch-def.json -a "LWC"
  • LWC is an alias for the scratch org that you can use in other Salesforce CLI commands. You can create any alias that you like.

Start the Local Development Server

Start the server.

  • Run npm run start
  • You can also run this command from the command line. sfdx force:lightning:lwc:start
  • View the server at http://localhost:3334/.

Testing

Deploy the Quantic Examples Community

Example components are available as a Salesforce community (Digital Experience) allowing you to experiment with Quantic components.

To setup the community in the LWC scratch org, run:

npm run setup:examples

This script creates, configures, and deploys everything required to have fully working examples. The community URL is provided at the end of the script output, as in the following example:

...

The 'Quantic Examples' community is ready, you can access it at the following URL:
https://your-salesforce-scratch-org-instance.force.com/examples

To open Cypress, run:
npm run cypress:open

Once the community has been deployed, you can deploy the main or example components only when needed. To do so, run:

npm run deploy:main
npm run deploy:examples

Run Cypress for Quantic Components

Note Before attempting to run Cypress tests, make sure the Quantic Examples community is deployed as described in the previous section.

To learn how to add tests, see adding tests.

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

To open Cypress in browser mode, run:

npm run cypress:open

To run Cypress tests directly in your console, run:

npm run cypress:test

To get the detailed report, run:

npm run cypress:test:detailed

Use Quantic From Source

After you have cloned the repository and have run npm install, run the following commands:

  • npm run copy:staticresources
  • sfdx force:source:deploy -m LightningComponentBundle

Other Useful Commands

  • -m LightningComponentBundle can be changed for different types of "resources". To know which name, check the related meta.xml file for each type of resource.
  • Create new web components. In VS Code, press Command + Shift P, enter sfdx, and select SFDX: Create Lightning Web Component.

Learn About LWC

  • lwc.dev
  • Components reference. Make sure you stay in the "Lightning web components section". Aura does not apply. Aura is the older UI library that is being deprecated by Salesforce.
  • Lightning design system. Reference for styling, CSS utilities, icons, and more.