open-index/open-npm huggingface dataset:
npm package: @t6rminaator/custom-components
Description: RIA Web Components based on VEERA
Latest version: 0.0.1

![Built With Stencil](https://img.shields.io/badge/-Built%20With%20Stencil-16161d.svg?logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjIuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MTIgNTEyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI%2BCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI%2BCgkuc3Qwe2ZpbGw6I0ZGRkZGRjt9Cjwvc3R5bGU%2BCjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik00MjQuNywzNzMuOWMwLDM3LjYtNTUuMSw2OC42LTkyLjcsNjguNkgxODAuNGMtMzcuOSwwLTkyLjctMzAuNy05Mi43LTY4LjZ2LTMuNmgzMzYuOVYzNzMuOXoiLz4KPHBhdGggY2xhc3M9InN0MCIgZD0iTTQyNC43LDI5Mi4xSDE4MC40Yy0zNy42LDAtOTIuNy0zMS05Mi43LTY4LjZ2LTMuNkgzMzJjMzcuNiwwLDkyLjcsMzEsOTIuNyw2OC42VjI5Mi4xeiIvPgo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNNDI0LjcsMTQxLjdIODcuN3YtMy42YzAtMzcuNiw1NC44LTY4LjYsOTIuNy02OC42SDMzMmMzNy45LDAsOTIuNywzMC43LDkyLjcsNjguNlYxNDEuN3oiLz4KPC9zdmc%2BCg%3D%3D&colorA=16161d&style=flat-square)

# RIA Web Components based on VEERA

## Development

```bash
npm install
npm start
```

To build the component for production, run:

```bash
npm run build
```

To run the unit tests for the components, run:

```bash
npm test
```

Need help? Check out Stencil docs [here](https://stenciljs.com/docs/my-first-component).

## Naming Components

When creating new component tags use the prefix `veera`.

## Using this component

### Script tag

- Put a script tag similar to this `<script src='https://unpkg.com/my-component@0.0.1/dist/mycomponent.js'></script>` in the head of your index.html
- Then you can use the element anywhere in your template, JSX, html etc

### Node Modules
- Run `npm install my-component --save`
- Put a script tag similar to this `<script src='node_modules/my-component/dist/mycomponent.js'></script>` in the head of your index.html
- Then you can use the element anywhere in your template, JSX, html etc

### In a stencil-starter app
- Run `npm install my-component --save`
- Add an import to the npm packages `import my-component;`
- Then you can use the element anywhere in your template, JSX, html etc
npm package: @t6rminaator/custom-components-angular
Description: RIA Web Components bridge for Angular
Latest version: 0.0.1

# Angular bridge for RIA Web Components

## Steps required to update it
* Have following project structure in your workspace
```
.
├── ee.eesti.microfrontends
├── ee.eesti.microfrontends.angular
```
* Build `ee.eesti.microfrontends` project
* Check, that all components, that you wish to export are present in `src/ria-component-library-module.ts`
  * `DECLARATIONS`
npm package: @t7/accordion-multi
Description: Create a React 'accordion' with multiple expansion style component from a single structure
Author: TandemSeven
Latest version: 0.0.9

# @t7/accordion-multi

Create a multi-select 'accordion' style React component from a single structure

This component functions similarly to `<Accordion/>` except that it allows for multiple areas to be expanded at a time.

By default, accordion areas are collapsed. To render an area open, pass an object with the corresponding index(es) set to `true`.

## Installation
```sh
npm install @t7/accordion-multi --save
```

## Usage
```js
import AccordionMulti, { AccordionPanel } from '@t7/accordion-multi'
import '@t7/accordion/dist/index.css'
```
```js
/* indicate the selected item(s) */
let selected = {
  0: true,
  1: true
}

/* create a "handler" if your appliction requires additional processing when tabs are selected */
const handleClick = (e, index, label, selected) => {
  <do something interesting>

  /*
    `e` is the event.

    `index` is the numeric position.

    `label` is the text itself.

    `selected` is the state object.
  */
}

.
.
.

/* create your accordion as a single logical grouping */
<AccordionMulti selected={selected} handleClick={handleClick}>
  <AccordionPanel label='Item 1'>
    <p>
      Content for "Item 1"
    </p>
  </AccordionPanel>
  <AccordionPanel label='Item 2'>
    <p>
      Content for "Item 2"
    </p>
  </AccordionPanel>
  <AccordionPanel label='Item 3'>
    <p>
      Content for "Item 3"
    </p>
  </AccordionPanel>
</AccordionMulti>

```
&nbsp;
&nbsp;

### Note regarding the use of the _required_ CSS
_*if your build process will not resolve the CSS in a module copy the file `@t7/accordion-multi/dist/index.css` from the node_modules folder and reference the copy with an HTML link *_

```xml
e.g.
<link rel="stylesheet" type="text/css" href="<your stylesheet folder>/@t7/accordion-multi/dist/index.css">
```
npm package: @t7/paging
Description: t7-react-paging React component
Author: TandemSeven
Latest version: 0.0.4

The **Pager** component provides a way to navigate paged data.

The component will calculate the page numbers to show based on the size
of the data set (`totalItems`) and the number of items per page (`pageSize`). 
The component has 2 layout modes.  The default calculates the number of pages
to show based on the container's width (`autoLayout`).  If `autoLayout` is false,
you can set the maximum number of buttons that will appear in the component
with the `maxButtons` property.  

The actual data handling is controlled by the parent and this component will
supply the current page via the `onPageChanged` property.  When a page changes, 
the current page number will be passed to the supplied function.  

```jsx static
import React, { Component } from 'react'
import Pager from '@t7/paging'

export class XComponent extends Component { 

  state = {
    pageIndex: 0
  }

  data = [
      { fake: true },
      { fake: true },
      { fake: true },
      { fake: true },
      { fake: true },
      { fake: true },
      { fake: true },
      { fake: true },
      { fake: true },
      { fake: true }
  ]

  handlePageChanged = (pageIndex) => {
      this.setState({pageIndex})
  }

  render() {
    const { data, handlePageChanged } = this
    const { pageIndex } = state

    return (
      <x-component>
        <Pager onPageChanged={handlePageChanged} totalItems={data.length} pageIndex={pageIndex} pageSize={3} />
      </x-component>
    )
  }
}
```
Note: `pageIndex` is 0-based.
npm package: @t7/render
Description: This React component conditionally renders its children.
Author: TandemSeven
Latest version: 0.0.17

# @t7/render

## Installation
```sh
npm i @t7/render
```

## Usage
```js
// ================
// TRUTHY EXAMPLES.
// ================

<Render if={true}>
  This renders.
</Render>

<Render if={somethingTruthy}>
  This renders.
</Render>

// ===============
// FALSY EXAMPLES.
// ===============

<Render if={false}>
  This does not render.
</Render>

<Render if={0 || '' || NaN || null || undefined}>
  This does not render.
</Render>
```