Skip to content

Latest commit

 

History

History
74 lines (56 loc) · 2.13 KB

README.md

File metadata and controls

74 lines (56 loc) · 2.13 KB
Raw

temba-components is a suite of ui widgets used by various RapidPro projects.

Some of the components:

  • <temba-select/> Advanced select widget with support for remote fetching and filtering. Also supports multi selection with the ability to enter expressions.

  • <temba-completion/> Completion widget for completing RP-style expressions

  • <temba-textinput/> - Standard text field with baked in support for date picking

  • <temba-charcount/> - SMS segment counter attachable to elements for monitoring

  • <temba-store/> - In page cache for RP core data types

  • <temba-options/> - Generic option list with configurable rendering, remote list paging, and keyboard support. Used by temba-select, temba-completion, and temba-list

  • <temba-list/> - Block rendered option list

  • <temba-dialog/> - Basic modal

  • <temba-modax/> - Fancier modal that fetches and submits html rendered forms and is triggered by a slot element

  • .. and many more

Install

We use yarn, so you'll want to install with that if you care about our lock file.

% yarn install

Demo

To view the interactive demo, use start.

% yarn start

Testing

All tests live under /test. When running tests, some tests capture screenshots for pixel comparision under /screenshots. Running tests requires that you have Chromium installed.

% yarn test

Usage

Simply include the built file as a module and you should be off to the races!

<html>
  <head>
    <script type="module">
      import '../out-tsc/temba-components.js';
    </script>
  </head>
  <body>
    <temba-select name="color">
      <temba-option name="Red" value="r"></temba-option>
      <temba-option name="Green" value="g"></temba-option>
      <temba-option name="Blue" value="b"></temba-option>
    </temba-select>
  </body>
</html>

To interactively work with components whilst embedded in another project, it can easily be done with a couple nginx rules.

  location ~ /out-tsc/(.*) {
      proxy_pass http://localhost:3010/out-tsc/$1;
  }

  location ~ /node_modules/(.*) {
      proxy_pass http://localhost:3010/node_modules/$1;
  }