open-index/open-npm huggingface dataset:
npm package: @grandrounds/react-scripts
Description: Configuration and scripts for Create React App.
Latest version: 2.0.1

# react-scripts

This package includes scripts and configuration used by [Create React App](https://github.com/facebook/create-react-app).<br>
Please refer to its documentation:

* [Getting Started](https://github.com/facebook/create-react-app/blob/master/README.md#getting-started) – How to create a new app.
* [User Guide](https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md) – How to develop apps bootstrapped with Create React App.
npm package: @granite-elements/granite-alarmlight
Description: a green-amber-red status indicator
Latest version: 2.1.4

[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/LostInBrittany/granite-alarmlight)

# granite-alarmlight

A green-amber-red status indicator custom element

## Usage

```html
 <granite-alarmlight status="1"></granite-alarmlight>
 <granite-alarmlight status="0"></granite-alarmlight>
 <granite-alarmlight status="-1"></granite-alarmlight>
 <granite-alarmlight status="1" linear></granite-alarmlight>
 <granite-alarmlight status="0.75" linear></granite-alarmlight>
 <granite-alarmlight status="0.5" linear></granite-alarmlight>
 <granite-alarmlight status="0.25" linear></granite-alarmlight>
 <granite-alarmlight status="0" linear></granite-alarmlight>
 <granite-alarmlight ok="-1.0" warn="0.0" ko="1.0" status="0.75" linear></granite-alarmlight>
 <granite-alarmlight ok="-10.0" warn="0.0" ko="10.0" status="7.5" linear></granite-alarmlight>
```

## Install the Polymer-CLI

First, make sure you have the [Polymer CLI](https://www.npmjs.com/package/polymer-cli) installed. Then run `polymer serve` to serve your element locally.

## Viewing Your Element

```
$ polymer serve
```

## Running Tests

```
$ polymer test
```

Your application is already set up to be tested via [web-component-tester](https://github.com/Polymer/web-component-tester). Run `polymer test` to run your application's test suite locally.
npm package: @granite-elements/granite-app-media-periodic-image-capture
Description: An element extending app-media-image-capture allowing a periodic image capture (i.e. x images per second)
Author: Horacio Gonzalez
Latest version: 2.0.0

[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/LostInBrittany/granite-app-media-periodic-image-capture)

# granite-app-media-periodic-image-capture

> An element extending [`app-media-image-capture`](https://www.webcomponents.org/element/PolymerElements/app-media/elements/app-media-image-capture) allowing a periodic image capture (i.e. x images per second)
>
> Polymer 2.x element


## Doc & demo

It works like [`app-media-image-capture`](https://www.webcomponents.org/element/PolymerElements/app-media/elements/app-media-image-capture) but allowing periodic image capture using `frequency` property to fix the number of capture images per second and `capture` boolean property to activate or desactivate periodical capture.

You can see a full example on the demo.

[https://lostinbrittany.github.io/granite-app-media-periodic-image-capture](https://lostinbrittany.github.io/granite-app-media-periodic-image-capture)



## Install

Install the component using [Bower](http://bower.io/):

```sh
$ bower install LostInBrittany/granite-app-media-periodic-image-capture --save
```

Or [download as ZIP](https://github.com/LostInBrittany/granite-app-media-periodic-image-capture/archive/gh-pages.zip).## Usage

1. Import Web Components' polyfill (if needed):

    ```html
    <script src="bower_components/webcomponentsjs/webcomponents.min.js"></script>
    ```

2. Import Custom Element:

    ```html
    <link rel="import" href="bower_components/granite-qrcode-scanner/granite-app-media-periodic-image-capture.html">
    ```

3. Start using it!

    ```html
    <granite-app-media-periodic-image-capture>
    </granite-app-media-periodic-image-capture>
    ```


## Contributing

1. Fork it!
2. Create your feature branch: `git checkout -b my-new-feature`
3. Commit your changes: `git commit -m 'Add some feature'`
4. Push to the branch: `git push origin my-new-feature`
5. Submit a pull request :D

## License

[MIT License](http://opensource.org/licenses/MIT)
npm package: @granite-elements/granite-c3
Description: A lightweight element wrapping-up C3.js, D3-based chart library.
Author: Horacio Gonzalez
Latest version: 3.2.0

[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/LostInBrittany/granite-c3)
![Vaadin Directory availability](https://img.shields.io/badge/Vaadin%20Directory-available-green.svg?style=flat-square&colorB=00b4f0&link=https://vaadin.com/directory)

# granite-c3

A lightweight element wrapping-up [C3.js](http://c3js.org/), D3-based chart library

> Based on Polymer 3.x.
> The legacy Polymer 2.x version is available [here](https://www.webcomponents.org/element/LostInBrittany/granite-c3/)

## Doc & demo

[https://lostinbrittany.github.io/granite-c3](https://lostinbrittany.github.io/granite-c3)


## Usage

<!---
```
<custom-element-demo>
  <template>
    <script src="../webcomponentsjs/webcomponents-lite.js"></script>
    <link rel="import" href="granite-c3.html">
    <next-code-block></next-code-block>
  </template>
</custom-element-demo>
```
-->
```html
<granite-c3 data='{"x": "x", "columns": [["x", "2013-01-01", "2013-01-02", "2013-01-03", "2013-01-04", "2013-01-05", "2013-01-06"],["data1", 30, 200, 100, null, 150, 250],["data2",130, 340, 200, null, 200, 350]],"type": "step"}' axis='{ "x": {"type": "timeseries", "tick": { "format": "%Y-%m-%d"} } }'></granite-c3>
```

## Install

Install the component using [Bower](http://bower.io/):

```sh
$ bower install LostInBrittany/granite-c3 --save
```

Or [download as ZIP](https://github.com/LostInBrittany/granite-c3/archive/gh-pages.zip).

## Usage

1. Import Web Components' polyfill (if needed):

    ```html
    <script src="bower_components/webcomponentsjs/webcomponents.min.js"></script>
    ```

2. Import Custom Element:

    ```html
    <link rel="import" href="bower_components/granite-c3/granite-c3.html">
    ```

3. Start using it!

    ```html
    <granite-c3 data="{{data}}" axis="{{axis}}"></granite-c3>
    ```

## Contributing

1. Fork it!
2. Create your feature branch: `git checkout -b my-new-feature`
3. Commit your changes: `git commit -m 'Add some feature'`
4. Push to the branch: `git push origin my-new-feature`
5. Submit a pull request :D

## License

[MIT License](http://opensource.org/licenses/MIT)
npm package: @granite-elements/granite-clipboard
Description: A lightweight element wrapping-up clipboard.js
Author: Horacio Gonzalez
Latest version: 4.1.2

[![Published on Vaadin  Directory](https://img.shields.io/badge/Vaadin%20Directory-published-00b4f0.svg)](https://vaadin.com/directory/component/LostInBrittanygranite-clipboard)
[![Stars on vaadin.com/directory](https://img.shields.io/vaadin-directory/star/LostInBrittanygranite-clipboard.svg)](https://vaadin.com/directory/component/LostInBrittanygranite-clipboard)

# \<granite-clipboard>

A simple, lightweight element wrapping-up [clipboard.js](https://clipboardjs.com/).

Built on [lit-element](https://github.com/Polymer/lit-element) following the [open-wc](https://github.com/open-wc/open-wc) recommendation.

> The old Polymer 2.x-1.x version is available on the [`polymer-hybrid-1.x-2.x` branch](https://github.com/LostInBrittany/granite-clipboard/tree/polymer-hybrid-1.x-2.x).


## Installation
```bash
npm i granite-clipboard
```

## Usage
```html
<script type="module">
  import 'granite-clipboard/granite-clipboard.js';
</script>

<granite-clipboard text="Text to be copied">
    <div style="width:250px;height:50px;border-radius:5px;background-color:#aaaaff;cursor:pointer;">Click here</div>
</granite-clipboard> 
```

## Linting with ESLint, Prettier, and Types
To scan the project for linting errors, run
```bash
npm run lint
```

You can lint with ESLint and Prettier individually as well
```bash
npm run lint:eslint
```
```bash
npm run lint:prettier
```

To automatically fix many linting errors, run
```bash
npm run format
```

You can format using ESLint and Prettier individually as well
```bash
npm run format:eslint
```
```bash
npm run format:prettier
```

## Testing with Karma
To run the suite of karma tests, run
```bash
npm run test
```

To run the tests in watch mode (for <abbr title="test driven development">TDD</abbr>, for example), run

```bash
npm run test:watch
```

## Demoing with Storybook
To run a local instance of Storybook for your component, run
```bash
npm run storybook
```

To build a production version of Storybook, run
```bash
npm run storybook:build
```


## Tooling configs

For most of the tools, the configuration is in the `package.json` to reduce the amount of files in your project.

If you customize the configuration a lot, you can consider moving them to individual files.

## Local Demo with `es-dev-server`
```bash
npm start
```
To run a local development server that serves the basic demo located in `demo/index.html`


## Contributing

1. Fork it!
2. Create your feature branch: `git checkout -b my-new-feature`
3. Commit your changes: `git commit -m 'Add some feature'`
4. Push to the branch: `git push origin my-new-feature`
5. Submit a pull request :D

## License

[MIT License](http://opensource.org/licenses/MIT)
npm package: @granite-elements/granite-fate-roller
Description: A Fate RPG dice roller web component
Author: Horacio Gonzalez
Latest version: 2.0.0

# granite-fate-roller

A Fate RPG dice roller web component

![granite-fate-roller](./assets/fate-dice-roller-2.0.0.png)

## Using `granite-fate-roller`

To use *granite-fate-roller* in an element:


### 1. Install `granite-fate-roller`


Install the component using [npm](https://www.npmjs.com/):

```sh
$ npm i @granite-elements/granite-fate-roller
```


### 2. Import *granite-fate-roller* in the element where you want to use it


Once installed, import it in your application. Usually you will simply want to import `granite-fate-roller.js` (wrap around `spectre.css`) or `granite-fate-roller-min.js` (wrap around `spectre.min.css`).

Supposing you want to import `granite-fate-roller.js`:
 
```
import {spectreStyles} from '@granite-elements/granite-fate-roller/granite-fate-roller.js';
``` 

### 3. Use the \<granite-fate-roller> tag in your HTML


```html
<granite-fate-roller skill="Flashy" bonus="2"></granite-fate-roller>
```

## Contributing

1. Fork it!
2. Create your feature branch: `git checkout -b my-new-feature`
3. Commit your changes: `git commit -m 'Add some feature'`
4. Push to the branch: `git push origin my-new-feature`
5. Submit a pull request :D

## License

[MIT License](http://opensource.org/licenses/MIT)