open-index/open-npm huggingface dataset:
npm package: @ist-supsi/stratigraphy
Description: ReactJS module for stratigraphies representation
Author: SUPSI
Latest version: 1.0.6

# React Stratigraphy

A simple reactjs module for creating graphical representations of stratigraphies (used in geology to describe the vertical location of rock units).

Example:

<img src="assets/screenshot.gif" alt="Printscreen" width="250px">

## Installation

Install the module with npm:

```
npm install @ist-supsi/stratigraphy
```

or use yarn:

```
yarn add @ist-supsi/stratigraphy
```

## Usage

```javascript

import React from 'react';
import { Stratigraphy } from '@ist-supsi/stratigraphy';

const ExampleComponent = (props) => {
  return (
    <Stratigraphy
      data={
        [
          {
            id: 1,
            from: 0,
            to: 1.23,
            color: '#123456',
            pattern: 'assets/pattern-1.png',
            title: 'Jura des Juragebirges',
            subtitle: 'Dazit'
          }, {
            id: 2,
            from: 1.23,
            to: 1.77,
            color: '#789123',
            pattern: 'assets/pattern-2.png',
            title: 'Quartar, undifferenziert',
            subtitle: 'Phonolith'
          }, {
            id: 3,
            from: 1.77,
            to: 2.34,
            color: '#456789',
            pattern: 'assets/pattern-3.png',
            title: 'Altere Ablagerungen, undifferenziert',
            subtitle: 'Magmatit'
          }
        ]
      }
      onSelected={(layer)=>{
        console.log(layer);
      }}
      style={{
        height: '300px',
        width: '250px'
      }}
      unit='m'
    />
  );
};

export default ExampleComponent;

```
npm package: @ist402/dld-btn-1
Description: Webcomponent dld-btn following open-wc recommendations
Author: dld-btn
Latest version: 0.0.1

# \<dld-btn>

This webcomponent follows the [open-wc](https://github.com/open-wc/open-wc) recommendation.

## Installation

```bash
npm i dld-btn
```

## Usage

```html
<script type="module">
  import 'dld-btn/dld-btn.js';
</script>

<dld-btn></dld-btn>
```

## Linting and formatting

To scan the project for linting and formatting errors, run

```bash
npm run lint
```

To automatically fix linting and formatting errors, run

```bash
npm run format
```

## Testing with Web Test Runner

To execute a single test run:

```bash
npm run test
```

To run the tests in interactive watch mode 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 minimize 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 `web-dev-server`

```bash
npm start
```

To run a local development server that serves the basic demo located in `demo/index.html`