Bcros Search Component

A framework-agnostic simple to use web component to handle business searches.

Installation

npm

npm i bcros-search

Usage

<script type="module">
  import "bcros-search";
</script>

<bcros-search></bcros-search>

Attributes

• url: The url from your proxy server. See this example{:target="_blank"} for an example on how this works using a Nuxt app.
• limit: The number of results returned per GET request. Ex: limit="5", Default "10".
• legalType: Filter the returned business type. Ex: legalType="BN,BEN", Default all.
• status: Filter the business status. Ex: status="active", Default "active,historical".
• width: Set a fixed width to the component. Ex: width="60rem", Default "100%"
• visualLabel: The input label users will see when using this component. Ex: visualLabel="My Input", Default "Business Name, Incorporation/Registration Number or CRA Business Number".
• a11yLabel: The accessible label for screen reader users. Ex: a11yLabel="Start typing to search for a business.", Default "'Start typing to search for ' + visualLabel".
• inputHint: The hint displayed under the input field. Ex: inputHint="New Hint", Default: 'Example: "Test Construction Inc.", "BC0000123", "987654321"'.
• columns: Customize the displayed columns in the dropdown. The order can also be altered using this attribute. Ex: columns="name,bn,identifier", Default "name,identifier,bn,legalType,status,goodStanding"

Events

• @select: A custom event to emit the selected business data from the dropdown. React uses 'onSelect'.

  <script type="module">
    import "bcros-search";
  </script>

  <bcros-search @select="handleSelect"></bcros-search>

  const handleSelect = (event: CustomEvent) => {
    console.log(event.detail)
  }

Frameworks

Vue/Nuxt

See the Vue Docs{:target="_blank"} for information on using custom elements.

import { BcrosSearch } from 'bcros-search';

<bcros-search @select="handleSelect"></bcros-search>

React

React currently requires a wrapper component to render correctly.

import { BcrosSearchReact } from 'bcros-search';

<BcrosSearchReact onSelect={handleSelect}/>

Linting and formatting

To run lint and prettier:

npm run lp:fix

Testing with Cypress

Current config only working with Vite 4.1.0 - Cypress may break when updating Vite

To run all Cypress tests from the terminal

npm run cy:run

To open Cypress component test runner in electron

npm run cy:open

Deployment

A '.env.production' file is required in the root folder to publish successfully. Also be sure to update the package.json version. If adding new components, a change to the tsconfig 'include' and vite.config 'entry' will be required. If changing the package name, must also update "exports: { "." : { "import": "package-name-here".js } }" in package.json.

npm run build

npm publish

Local Demo with vite

npm run dev

To run a local development server that serves the basic demo located in index.html

Built With

• Lit{:target="_blank"} - Component Framework
• Cypress{:target="_blank"} - Test Framework
• Vite{:target="_blank"} - Build Tool & Development Server

License

This project is licensed under the MIT License