open-index/open-npm huggingface dataset:
npm package: @lrtcl/react-components-library
Description: An unopinionated and accessible library of React components. Still very work in progress, DO NOT USE YET.
Author: Laurent Clavier
Latest version: 0.1.1

# component-library
An unopinionated and accessible library of React components. Still very work in progress, DO NOT USE YET.

[Link to the associated Storybook](https://master--602ba6b59b6ce700236b2ad6.chromatic.com)

## Available Scripts

In the project directory, you can run:

### `yarn install`
Install all dependencies

### `yarn storybook`

Runs Storybook in the development mode.<br />
Open [http://localhost:6006](http://localhost:6006) to view it in the browser.

### `npx sb@latest upgrade`
Upgrade Storybook to the latest version

# Storybook design system tutorial

The Storybook design system tutorial is a subset of the full [Storybook design system](https://github.com/storybookjs/design-system/), created as a learning resource for those interested in learning how to write and publish a design system using best in practice techniques.

Learn more in [Storybook tutorials](https://storybook.js.org/tutorials/).
npm package: @lruij/well-ui
Description: well-ui，A Vue.js UI
Author: reejli
Latest version: 1.0.0

# vue-hello

> A Vue.js project

## Build Setup

``` bash
# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build
```

For detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader).
npm package: @ls-age/args-parser
Description: parses command line arguments passed to node.js
Author: Lukas Hechenberger
Latest version: 0.1.0

# args-parser

Parses command line arguments passed to node.js.

[![CircleCI](https://circleci.com/gh/ls-age/args-parser.svg?style=shield)](https://circleci.com/gh/ls-age/args-parser)
[![codecov](https://codecov.io/gh/ls-age/args-parser/branch/master/graph/badge.svg)](https://codecov.io/gh/ls-age/args-parser)
[![ESDoc](https://doc.esdoc.org/github.com/ls-age/args-parser/badge.svg)](https://doc.esdoc.org/github.com/ls-age/args-parser)

**Note that this package is still under heavy development.**

## Installation

Run `npm install [--save[-dev]] @ls-age/args-parser` to install this module.

## Usage

Basic usage:

```javascript
import parseArgs from '@ls-age/parse-args';

const args = parseArgs(
  ['non-option', '--number', '13', '--bool'],
  {
    options: {
      number: { type: 'number' },
      bool: 'Description of "bool" option'
    }
  }
);

console.log(args._); // logs ['non-option']
console.log(args.number); // logs `13`
console.log(args.test); // logs `true`
```

Look at the [docs](https://doc.esdoc.org/github.com/ls-age/args-parser) and [tests](https://doc.esdoc.org/github.com/ls-age/args-parser/test.html) for more detailed usage examples.
npm package: @ls-age/babel-preset
Description: Babel preset used by ls-age
Author: Lukas Hechenberger
Latest version: 0.4.0

# @ls-age/babel-preset

> Babel preset used by ls-age

## Install

```sh
npm install --save-dev @ls-age/babel-preset
```

## Usage

### Via `.babelrc` / "babel" field in `package.json` (Recommended)

```json
{
  "presets": ["@ls-age/babel-preset"]
}
```

### Via CLI

```sh
babel script.js --presets @ls-age/babel-preset
```

### Via Node API

```javascript
require("@babel/core").transform("code", {
  presets: ["@ls-age/babel-preset"]
});
```

## Options

Options passed to the prefix can be a string or an object. When a string is given it is assumed to be the `target` option. Therefore

```json
{
  "presets": [
    ["@ls-age/babel-preset", "browser"]
  ]
}
```

equals

```json
{
  "presets": [
    ["@ls-age/babel-preset", { "target": "browser" }]
  ]
}
```

### `target`

`"node" | "browser"`, defaults to `"node"`

**All other options are passed directly to [babel-preset-env](https://github.com/babel/babel/tree/master/packages/babel-preset-env)**
npm package: @ls-age/commitlint-circle
Description: Lint all relevant commits for a change or PR on Circle CI
Author: Fathy Boundjadj
Latest version: 1.0.0

> Lint all relevant commits for a change or PR on Circle CI

# commitlint-circle

This package is a convenience wrapper around `commitlint`, 
providing zero-configuration linting of all relevant commits
for a given change/build combination.

## Getting started

```
yarn add commitlint-circle --dev
```

```yml
# .circleci/config.yml
- run: yarn commitlint-circle
```

## Screenshots

##### When building a PR

![PR Lookup](./.github/pr-lookup.png)

##### When building a change

![SHA Lookup](./.github/sha-lookup.png)
npm package: @ls-age/esdoc-coverage
Description: Check ESDoc coverage
Author: Lukas Hechenberger
Latest version: 0.1.6

# esdoc-coverage

> Check [ESDoc](https://esdoc.org) coverage

[![CircleCI](https://circleci.com/gh/ls-age/esdoc-coverage.svg?style=shield)](https://circleci.com/gh/ls-age/esdoc-coverage)
[![codecov](https://codecov.io/gh/ls-age/esdoc-coverage/branch/master/graph/badge.svg)](https://codecov.io/gh/ls-age/esdoc-coverage)
[![ESDoc](https://doc.esdoc.org/github.com/ls-age/esdoc-coverage/badge.svg)](https://doc.esdoc.org/github.com/ls-age/esdoc-coverage/)

**Please note that this module is still in early development.**

## Installation

> Requires node.js (version >= 6) to be installed

Run `npm install --save-dev @ls-age/esdoc-coverage` to install the package
 
## Usage

After running `esdoc` run `esdoc-coverage` with the same arguments.

For all available option run `esdoc-coverage --help`
npm package: @ls-age/eslint-config
Description: This package provides ls-age's ESLint configuration
Author: Lukas Hechenberger
Latest version: 0.9.2

# @ls-age/eslint-config

> This package provides ls-age's ESLint configuration.

Heavily inspired by [Airbnb's ESLint config](https://github.com/airbnb/javascript).

## Main differences to `eslint-config-airbnb`:

### `ava` sub-config

> A special config for linting [AVA](https://github.com/avajs/ava) test files.

**Usage via .eslintrc**

```json
{
  "extends": "@ls-age/eslint-config/ava"
}
```

### The *mocha* environment:

> This config contains an advanced mocha environment.
> **The following code is assumed to be in a mocha ESLint environment.**

**Non-arrow-callbacks are allowed**

```javascript
describe('This is valid', function() { ... })
```

**Importing devDependencies is allowed**

In other environments importing devDependencies is not allowed.

**Anonymous functions don't need a space before parenthesis:**

```javascript
// This is valid
doAync(function() { ... })

// while this is not
doAync(function () { ... })
```

### Dangling underscores in identifiers are allowed

This allows documentation generators to assume members are private.

### API docs are linted

API docs are linted using [eslint-plugin-jsdoc](https://github.com/LukasHechenberger/eslint-plugin-jsdoc).
npm package: @ls-age/logger
Description: Logging made easy
Author: Lukas Hechenberger
Latest version: 0.5.0

# @ls-age/logger

> Logging made easy

[![CircleCI](https://circleci.com/gh/ls-age/logger.svg?style=shield)](https://circleci.com/gh/ls-age/logger)
[![codecov](https://codecov.io/gh/ls-age/logger/branch/master/graph/badge.svg)](https://codecov.io/gh/ls-age/logger)
[![ESDoc](https://doc.esdoc.org/github.com/ls-age/logger/badge.svg)](https://doc.esdoc.org/github.com/ls-age/logger/)
[![Greenkeeper badge](https://badges.greenkeeper.io/ls-age/logger.svg)](https://greenkeeper.io/)

**This module is still under development and should not be used yet.**

## Installation

With [node](https://nodejs.org) (version 6 or later) installed run `npm install @lsage/logger`.

## Usage

```javascript
import Logger from '@ls-age/logger';

// Pipe all logs to stdout
Logger.pipe(process.stdout);

// This will print something like "[08:03:27] Hello World"
Logger.info('Hello World');
```
npm package: @ls-age/rollup-plugin-run
Description: Run a bundled node module while watching for changes
Author: Lukas Hechenberger
Latest version: 0.2.0

# @ls-age/rollup-plugin-run

> Run a bundled node module while watching for changes.

[![CircleCI](https://circleci.com/gh/ls-age/rollup-plugin-run.svg?style=svg)](https://circleci.com/gh/ls-age/workflows/rollup-plugin-run/)
[![Greenkeeper](https://badges.greenkeeper.io/ls-age/rollup-plugin-run.svg)](https://greenkeeper.io/)

## Installation

```
npm i --save-dev @ls-age/rollup-plugin-run
```

## Usage

Include the following in the rollup config:

```javascript
import run from '@ls-age/rollup-plugin-run';

export default {
  ...
  plugins: [
    run(/* options */),
  ],
  output: {
    file: './out/server.js',
    format: 'cjs',
  }
  ...
}
```

## Options

> For a full list of options browse the source code.

The plugin decides what command / module to run based on some options:

- `command` The command to run. Defaults to `'node'`.
- `args` An array with arguments to pass. Useful in combination with *command*.

- `run` The file to watch. If no *args* are passed *run* is passed to *command*. Defaults to the first file in the *output* configuration with *format* set to `'cjs'`.

## Hooks

- `onStart` Called when the process has been started, with the process passed.
- `onStop` Called when the process has been stopped.

**Examples:**

Assuming *output* is set to `{ file: './out/server.js', format: 'cjs' }` in the rollup configuration.

```javascript
run() // 'node ./out/server.js' is run after each build
run({ run: './another.js' }) // 'node ./another.js' is run
run({ command: 'echo' }) // 'echo ./out/server.js' is run
run({ command: 'micro-dev', args: [] }) // 'micro' is run
```
npm package: @ls-age/svelte-touch
Description: Touch events for svelte.js
Author: Lukas Hechenberger
Latest version: 0.2.0

# @ls-age/svelte-touch

> Touch events for [svelte.js](https://svelte.technology)

## Install

```bash
npm install --save[-dev] @ls-age/svelte-touch
```

## Usage

### Basic example

**In svelte component**

```html
<div on:swipe="handleSwipe(event)"></div>

<script>
  import { swipe } from '@ls-age/svelte-touch';

  export default {
    methods: {
      handleSwipe(event) {
        console.log(event);
        // Example output:
        // { type: 'swipe', originalEvent: [TouchEvent], direction: 'left', axis: 'x' }
      }
    },
    events: {
      swipe
    }
  }
</script>
```

**In regular browser environment**

```javascript
import { swipe } from '@ls-age/svelte-touch';

const elm = document.getElementById('swipe-target');

swipe(elm, event => {
  console.log(event);
});
```

### Customize gestures

All gestures can be customized by passing options to them. **Note that you'll have to import from the `./events` folder in this case.

**Example**

```javascript
import swipe from '@ls-age/svelte-touch/events/swipe';

// This handler requires a finger to move at least 50 pixels to the left to detect a swipe gesture
const customSwipe = swipe({
  threshold: 50,
});

// Use `customSwipe` just like `swipe` was used in the above examples
```

## Available events

### `tap`

A single tap.

**Options**

 - `maxDuration` (*number*=`150`) The maximum duration of the touch event in milliseconds.
 - `maxMovement` (*number*=`20`) The maximum distance of the touch event in pixels.

### `swipe`

A swipe gesture.

**Options**

 - `axis` (*SwipeAxis*=`SwipeAxis.all`) The axis to accept swipes on.
 - `direction` (*SwipeDirection*=`SwipeDirection.all`) The direction to accept swipes to.
 - `threshold` (*number*=`30`) The minimum distance a finger has to move until a swipe is recognized.

### `swipeUp`, `swipeRight`, `swipeDown`, `swipeLeft`, `swipeVertical`, `swipeHorizontal`

Shortcuts for swipe gestures restriced to specific directions or axis.

**More to come soon**
npm package: @ls-age/update-section
Description: Update a section of a file
Author: Lukas Hechenberger
Latest version: 0.5.0

# @ls-age/update-section

> Update a section of a file

## Installation

Run `npm install --save-dev @ls-age/update-section` as usual.

<!-- BEGIN overview -->

## Usage

`@ls-age/update-section` provides an easy way to update files that are party generated.

**Example:**

<!-- BEGIN readme-before -->
<!-- This section is generated, do not edit it! -->

```md
<!-- README.md -->

# My monorepo

## Packages

<!-- BEGIN packages -->
<!-- END packages -->
```

<!-- END readme-before -->

<!-- BEGIN sample-source -->
<!-- This section is generated, do not edit it! -->

```js
/* scripts/update-readme.js */

const Template = require('@ls-age/update-section');

// Update the packages list
const packages = [
  { name: 'First', description: 'My first package' },
  { name: 'Second', description: 'Another package' },
];

async function updateReadme() {
  // Generate a list of packages
  const packageList = packages.map((p) => `- **${p.name}** - ${p.description}`).join('\n');

  // ...and write it to the readme file
  await Template.updateSection('./README.md', 'packages', packageList);
}

updateReadme().catch((error) => {
  console.error(error);
  process.exitCode = 1;
});
```

<!-- END sample-source -->

Running `node scripts/update-readme.js` results in:

<!-- BEGIN sample-result -->
<!-- This section is generated, do not edit it! -->

```md
<!-- README.md -->

# My monorepo

## Packages

<!-- BEGIN packages -->
<!-- This section is generated, do not edit it! -->

- **First** - My first package
- **Second** - Another package

<!-- END packages -->
```

<!-- END sample-result -->

<!-- END overview -->

For a more advanced usage example, check out [this script](https://github.com/ls-age/devtools/blob/master/scripts/update-readme.js).

BTW: This readme was also created with _@ls-age/update-section_, [check it out on GitHub](https://github.com/ls-age/devtools/blob/master/packages/update-section/scripts/update-readme.ts).
npm package: @ls-age/xml
Description: Modify XML documents in node.js with ease
Author: Lukas Hechenberger
Latest version: 0.1.6

# @ls-age/xml

> Modify XML documents in node.js with ease

[![CircleCI](https://circleci.com/gh/ls-age/xml.svg?style=svg)](https://circleci.com/gh/ls-age/xml)

An XML parsing, manipulation and serialization library. Implements some very basic DOM APIs *(By far not complete)*.

## Installation

As always, run `npm install [--save] @ls-age/xml` to install.

## Usage

A basic example that parses an xml string, manipulates it and logs it's xml string again:

```javascript
import { parse, build } from '@ls-age/xml';

parse(`<?xml version="1.0" ?>
<root>
  <content>content</content>
</root>`)
  .then(doc => {
    doc.documentElement.getElementsByTagName('content')[0].setAttribute('test', 'value');
    doc.documentElement.appendChild(doc.createElement('another'));
    
    console.log(build(doc, {
      indent: ' ',
      newline: '\r\n',
    }));
  });

/* Prints:
<?xml version="1.0" ?>\r\n
<root>\r\n
 <content test="value">content</content>\r\n
 <another />\r\n
</root>
*/
```