open-index/open-npm huggingface dataset:
npm package: @granite-elements/granite-qrcode-scanner
Description: An element to scan a QR Code using the device camera
Author: Horacio Gonzalez
Latest version: 4.0.1

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

# granite-qrcode-scanner

> A webcomponent to scan a QR Codes,
> using [a modified version](https://github.com/LostInBrittany/jsqrcode) of [Lazersoft's jsqrcode](https://github.com/LazerSoft/jsqrcode) library, to allow `jsqrcode` to deal with ShadowDOM
>
>
> Built on [lit-element](https://github.com/Polymer/lit-element)
>
> The old Polymer 2.x-1.x version is available on the [`polymer-hybrid` branch](https://github.com/LostInBrittany/granite-qrcode-decoder/tree/polymer-hybrid).

## Doc & demo

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


## Usage example

<!--
```
<custom-element-demo>
  <template>
    <script src="@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
    <script src="@granite-elements/granite-qrcode-decoder/granite-qrcode-scanner.js"></script>
    <next-code-block></next-code-block>
  </template>
</custom-element-demo>
```
-->
```html
<granite-qrcode-scanner active continuous></granite-qrcode-scanner>
```

## Install



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

```sh
$ npm i @granite-elements/granite-qrcode-scanner 
```

Once installed, import it in your application:

```js
import '@granite-elements/granite-qrcode-scanner/granite-qrcode-scanner.js';
```

### Dependencies

This component has no external dependencies. All icons are included as SVG directly in the component.


## Running demos and tests in browser

1. Fork the `granite-qrcode-scanner` repository and clone it locally.

1. Make sure you have [npm](https://www.npmjs.com/) 
and the [Polymer CLI](https://www.polymer-project.org/3.0/docs/tools/polymer-cli) installed.

1. When in the `granite-qrcode-scanner` directory, run `npm install` to install dependencies.

1. Serve the project using Polyumer CLI:

    `polymer serve --npm`

1. Open the demo in the browser

    - http://127.0.0.1:8080/components/@greanite-elements/granite-qrcode-scanner/demo


## 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-spinner
Description: Pure CSS spinner web component
Author: Horacio Gonzalez
Latest version: 3.0.0

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

# granite-spinner #

A simple, lightweight spinner web component.


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



## Doc & demo

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


## Usage example

<!---
```
<custom-element-demo>
  <template>
    <script src="@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
    <script src="@granite-elements/granite-spinner/granite-spinner.js"></script>
    <next-code-block></next-code-block>
  </template>
</custom-element-demo>
```
-->
```html
<granite-spinner
    color="#ff4081" 
    line-width="2em" 
    active></granite-spinner>
```


## Install


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

```sh
$ npm i @granite-elements/granite-spinner 
```

Once installed, import it in your application:

import '@granite-elements/granite-spinner/granite-spinner.js';



## Running demos and tests in browser

1. Fork the `granite-spinner` repository and clone it locally.

1. Make sure you have [npm](https://www.npmjs.com/) 
and the [Polymer CLI](https://www.polymer-project.org/3.0/docs/tools/polymer-cli) installed.

1. When in the `granite-spinner` directory, run `npm install` to install dependencies.

1. Serve the project using Polyumer CLI:

    `polymer serve --npm`

1. Open the demo in the browser

    - http://127.0.0.1:8080/components/@greanite-elements/granite-spinner/demo


## Attributes

Attribute     | Type      | Default  | Description
---                 | ---       | ---       | ---
`active`            | *Boolean* | false     | When true, the spinner is shown
`hover`             | *Boolean* | false     | When true, the spinner hovers over the underlaying content
`size`              | *Number*  | `100px`   | The size of the spinner
`color`             | *String*  | `#28b6d8` | The color of the moving part of the spinner
`lineWidth`         | *String*  | `1.5em`   | The spinning element line width
`containerHeight`  | *Number*  | `150px`   | The size of the spinner container 


## 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-timeline
Description: A timeline rendering element using d3 and d3-timelines plugin
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-timeline)

# granite-timeline

A timeline rendering element using d3 and d3-timeline plugin

> Based on Polymer 2.x.



## Doc & demo

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


## Usage

<!---
```
<custom-element-demo>
  <template>
    <script src="../webcomponentsjs/webcomponents-lite.js"></script>
    <link rel="import" href="granite-timeline.html">
    <next-code-block></next-code-block>
  </template>
</custom-element-demo>
```
-->
```html
<granite-timeline 
    data='[{"times":[{"starting_time":1355752800000,"ending_time":1355759900000}, {"starting_time":1355767900000,"ending_time":1355774400000}]},{"times":[{"starting_time":1355759910000,"ending_time":1355761900000}]},{"times":[{"starting_time":1355761910000,"ending_time":1355763910000}]}]'          
    debug></granite-timeline>
```

## Install

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

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

Or [download as ZIP](https://github.com/LostInBrittany/granite-timeline/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-timeline/granite-timeline.html">
    ```

3. Start using it!

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

## 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: @granitewall/react-native-api
Description: Adaptation of Urbit http-api for React Native.
Author: fabnev-hinmur
Latest version: 0.1.1

# Uqbar HTTP API for React Native

## Description

This is a modification of the @urbit/http-api package that can run in React Native.

The key difference is that the urbit-auth cookie was already be present to use this API.

See https://github.com/land/escape-app/blob/master/src/screens/Login.tsx for an example of handling urbit login.
npm package: @grantcodes/commit
Description: A personal commitizen setup to help with creating lovely, consistent, organized commits
Author: grantcodes
Latest version: 2.0.0

# @grantcodes/commit

A personal Commitizen config to help me create lovely, consistent, organized commits.

## Usage

### In another project

1. Install with `npm install @grantcodes/commit --save-dev`
2. Run `npx @grantcodes/commit install` to setup the automatic git hooks
3. Stage changes as usual
4. Run `git commit` when creating a commit and a nice UI should appear to help format commits

### Standalone

1. Install globally with `npm install @grantcodes/commit -g`
2. Run `npx @grantcodes/commit` to generate a commit message
npm package: @grantcodes/footprint
Description: Estimate the carbon footprint of web page resources
Author: grantcodes
Latest version: 1.0.9

# Footprint

A small tool to estimate the CO2 output of every resource on a webpage using [CO2.js](https://developers.thegreenwebfoundation.org/co2js/overview/) and the [performance API](https://developer.mozilla.org/en-US/docs/Web/API/Performance_API).

## Installation

```bash
npm install @grantcodes/footprint
```

## Usage

```js
import { Footprint } from "@grantcodes/footprint";

const footprint = new Footprint(performance);

// Get an array of all loaded resources. 
const resources = footprint.resources;
resources.foreach(result => console.log(result.name, result.co2));

// Can also get results for a specific category ("media" | "js" | "css" | "html" | "other").
const cssResources = footprint.getByCategory("css");

// And get totals for the resources
console.log(`The ${cssResources.totalBytes} bytes of css resources on this page are estimated to generate ${cssResources.totalCo2} of CO2`);
```
npm package: @grantcodes/ui
Description: A personal component system built with Lit web components
Author: grantcodes
Latest version: 2.8.1

# grant.codes UI

A personal component system.

Components are built with Lit web components using CSS modules for styles with theming provided by my custom style dictionary.

## Installing

In the future it should be something like `npm install @grantcodes/ui`.

## Usage

Everything should mostly just work out of the box, without much setup 🤞.

Components can be used directly in HTML or imported as ES modules.

```html
<grantcodes-button>Click me</grantcodes-button>
```

```javascript
import { GrantCodesButton } from '@grantcodes/ui/components/button';
```

## Creating a new component

To create a new component run `npm run generate`. Uses plop.js for scaffolding.