@nyaruka/temba-components NPM

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;
  }

@lit/localize color-hash croppie geojson image-size leaflet lit lit-element lit-html luxon remarkable serialize-javascript tiny-lru

@infinitebrahmanuniverse/nolb-_ny @everything-registry/sub-chunk-673 @zalastax/nolb-_ny

2 days ago

8 days ago

15 days ago

17 days ago

21 days ago

24 days ago

23 days ago

29 days ago

29 days ago

30 days ago

1 month ago

1 month ago

1 month ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

5 months ago

5 months ago

9 months ago

10 months ago

5 months ago

6 months ago

7 months ago

7 months ago

6 months ago

7 months ago

7 months ago

6 months ago

6 months ago

6 months ago

6 months ago

7 months ago

7 months ago

9 months ago

9 months ago

7 months ago

7 months ago

9 months ago

9 months ago

7 months ago

8 months ago

10 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

10 months ago

11 months ago

12 months ago

12 months ago

11 months ago

12 months ago

1 year ago

1 year ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago