open-index/open-npm huggingface dataset:
npm package: @marekskopal/ng-scroll-shadow
Description: Angular directive for adding a shadow to scrollable container.
Author: Marek Skopal
Latest version: 4.0.0

# NgScrollShadow

Angular `[scrollShadow]` directive for adding a shadow to begin and end of a vertical scrollable container.

Unlike the pure CSS solution, this solution uses a wrapper and absolutely positioned shadows that work even if the container contains block elements.

## Install

```bash
npm install @marekskopal/ng-scroll-shadow
```

## Usage

Import the styles to your `styles.scss`:

```scss
@import '@marekskopal/ng-scroll-shadow';
```

Import the `ScrollShadowDirective` directive in your module or component:

```typescript
import {ScrollShadowDirective} from "@marekskopal/ng-scroll-shadow";
```


Add the `scrollShadow` directive to the scrollable container:

```html
<!-- example -->
<div style="width: 400px">
    <div style="height: 200px; overflow-y: auto;" scrollShadow>
        <div style="height: 200px; width: 800px; background: red">
            <!-- content -->
        </div>
    </div>
</div>
```
npm package: @marekzelinka/streak-counter
Description: a streak counter inspired by Duolingo
Author: Marek Zelinka
Latest version: 1.0.2

# `@marekzelinka/streak-counter` - a basic streak counter

This is a basic streak counter - inspired by Duolingo - written in TypeScript and meant for the browser (uses `localStorage`).

## Install

```shell
npm install @marekzelinka/streak-counter
```

### Usage

```typescript
import { streakCounter } from "@marekzelinka/streak-counter";

const today = new Date();
const streak = streakCounter(localStorage, today);
// streak returns an object:
// {
//    currentCount: 1,
//    lastLoginDate: "11/11/2021",
//    startDate: "11/11/2021",
// }
```

[![Edit streak-counter-demo](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/p/sandbox/streak-counter-demo-d3fg5l)
npm package: @marenaud/react-timeline-range-slider
Description: Fork of Time Slider component for React using sass instead of node-sass as a dependency
Author: Marc-André Renaud
Latest version: 1.4.1

### react-timeline-range-slider
![demo gif](./demo.gif)
### Installation

     npm i react-timeline-range-slider
### Props

| Prop | Type | Default | Description|
|--|--|--|--|
| timelineInterval | array |[startOfToday(), endOfToday()]|Interval to display|
|selectedInterval|array|[new Date(), addHours(new Date(), 1)]|Selected interval inside the timeline|
|disabledIntervals|array|[]|Array of disabled intervals inside the timeline|
|containerClassName|string||ClassName of the wrapping container|
|step|number|1800000|Number of milliseconds between steps (the default value is 30 minutes)|
|ticksNumber|number|48|Number of steps on the timeline (the default value is 30 minutes)|
|error|bool|false|Is the selected interval is not valid|
|mode|int/function|3|The interaction mode. Value of 1 will allow handles to cross each other. Value of 2 will keep the sliders from crossing and separated by a step. Value of 3 will make the handles pushable and keep them a step apart. ADVANCED: You can also supply a function that will be passed the current values and the incoming update. Your function should return what the state should be set as.|
|formatTick|function|ms => format(new Date(ms), 'HH:mm')|Function that determines the format in which the date will be displayed|
|onUpdateCallback|function|||
|onChangeCallback|function|||
### Example
[Live demo](https://codesandbox.io/s/react-timeline-range-slider-ve7w2?file=/src/App.js)
```javascript
import React from 'react'  
import { endOfToday, set } from 'date-fns' 
import TimeRange from 'react-timeline-range-slider'  

const now = new Date()
const getTodayAtSpecificHour = (hour = 12) =>
	set(now, { hours: hour, minutes: 0, seconds: 0, milliseconds: 0 })

const selectedStart = getTodayAtSpecificHour()
const selectedEnd = getTodayAtSpecificHour(14)

const startTime = getTodayAtSpecificHour(7)
const endTime = endOfToday()

const disabledIntervals = [
  { start: getTodayAtSpecificHour(16), end: getTodayAtSpecificHour(17) },
  { start: getTodayAtSpecificHour(7), end: getTodayAtSpecificHour(12) },
  { start: getTodayAtSpecificHour(20), end: getTodayAtSpecificHour(24) }
]

class App extends React.Component {  
  state = {  
    error: false,  
    selectedInterval: [selectedStart, selectedEnd],  
  }
	
  errorHandler = ({ error }) => this.setState({ error })  

  onChangeCallback = selectedInterval => this.setState({ selectedInterval })  

  render() {  
    const { selectedInterval, error } = this.state  
      return (  
        <TimeRange
          error={error}  
          ticksNumber={36}  
          selectedInterval={selectedInterval}  
          timelineInterval={[startTime, endTime]}  
          onUpdateCallback={this.errorHandler}  
          onChangeCallback={this.onChangeCallback}
          disabledIntervals={disabledIntervals}  
        />
      )  
  }  
}  

export default App
```
npm package: @mareuter/eslint-config
Description: ESLint configuration for projects
Author: Michael Reuter
Latest version: 0.1.0

# `@mareuter/eslint-config`

ESLint configuration for libraries and projects.

## Install

```
pnpm add -DE @mareuter/eslint-config
```

**Note**: To use this package you must install the peer dependencies. There are multiple configurations in this package.

For the ``base`` configuration:
```
pnpm add -DE eslint typescript-eslint eslint-config-prettier eslint-plugin-prettier eslint-plugin-only-warn @eslint/js
```

For the ``turbo`` configuration, install the ``base`` packages and then:
```
pnpm add -DE eslint-plugin-turbo
```

For the ``react`` configuration, install the ``base`` packages and then:
```
pnpm add -DE eslint-plugin-react eslint-plugin-react-hooks globals
```
npm package: @marfalkov/laravel-real-favicon
Description: favicon generation for laravel projects using realfavicongenerator api
Author: marfalkov
Latest version: 0.0.2-beta

# laravel-real-favicon
favicon generation using realfavicongenerator.net

## What does this package do?
### 1.
Upon installation it creates a new entry in your `package.json`'s `scripts` section:
```json

{
  "scripts": {
    "generate-favicon": "node node_modules/@marfalkov/laravel-real-favicon/index.js"
  },
}

```
### 2.
Once your single source image file is ready it will generate your favicons from it.

### 3.
It generates a partial in `resources/views/partials/favicon.blade.php`
### 4.
It inserts an include after your meta tags into `resources/views/app.blade.php`:
```php

@include('partials.favicon')

```
## The reasoning behind this package

When do you need to generate favicons for a site? Probably when you are in the early stage of development and have the original favicon source file ready. Then later when you want to change the favicon. A laravel mix task is not an ideal solution for this purpose, so I decided to  take a different approach. This task is a perfect match for an npm script that you can use only when you need it, instead of polluting your `webpack.mix.js`.

## Usage:
### 1.
```console

npm install --save-dev @marfalkov/laravel-real-favicon

```
### 2.
Put your single favicon source image file with .jpg, .png or .svg extension to `/resources/favicon/original/`

### 3.
 - Make sure you have an `app.blade.php` in `resources/views`
 - If you wish to have your main layout elsewhere or name other than `app.blade.php` you can change it in `resources/favicon/config/options.json`
### 4.
```console

npm run generate-favicon

```
### 5.
Enjoy your generated favicons!

## Credits

[shelljs](https://www.npmjs.com/package/shelljs "shelljs")

[npm-add-script](https://www.npmjs.com/package/npm-add-script "npm-add-script")

[gulp-real-favicon](https://www.npmjs.com/package/gulp-real-favicon "gulp-real-favicon")

## TODO's
- clean up code
- write test
- add git hooks
- add release-it

## Development
```console

npm install --ignore-scripts

```

License: [MIT](https://opensource.org/licenses/MIT "The MIT License")
npm package: @marfeel/react-native-sdk
Description: React Native bridge for Marfeel Compass SDK
Author: Marfeel
Latest version: 0.1.0

# @marfeel/react-native-sdk

React Native bridge for the Marfeel Compass SDK. Provides analytics tracking capabilities for React Native apps.

## Installation

```bash
npm install @marfeel/react-native-sdk
# or
yarn add @marfeel/react-native-sdk
```

### iOS

```bash
cd ios && pod install
```

### Android

No additional setup required. Autolinking handles everything.

## Usage

### Initialization

Initialize the SDK once at app startup:

```typescript
import { CompassTracking } from '@marfeel/react-native-sdk';

// In your App.tsx or entry point
useEffect(() => {
  CompassTracking.initialize('YOUR_ACCOUNT_ID');
}, []);
```

### Page Tracking

```typescript
import { CompassTracking, CompassScrollView } from '@marfeel/react-native-sdk';

function ArticleScreen({ article }) {
  useEffect(() => {
    CompassTracking.trackNewPage(article.url);
    return () => CompassTracking.stopTracking();
  }, [article.url]);

  return (
    <CompassScrollView>
      <Text>{article.title}</Text>
      <Text>{article.body}</Text>
    </CompassScrollView>
  );
}
```

### Screen Tracking (without URL)

```typescript
CompassTracking.trackScreen('HomeScreen');
```

### User Management

```typescript
import { CompassTracking, UserType } from '@marfeel/react-native-sdk';

CompassTracking.setSiteUserId('user-123');
CompassTracking.setUserType(UserType.Logged);

const userId = await CompassTracking.getUserId();
const rfv = await CompassTracking.getRFV();
```

### Conversions

```typescript
import { CompassTracking, ConversionScope } from '@marfeel/react-native-sdk';

// Simple conversion
CompassTracking.trackConversion('signup');

// With options
CompassTracking.trackConversion('purchase', {
  id: 'order-123',
  value: '99.99',
  meta: { currency: 'USD' },
  scope: ConversionScope.User,
});
```

### Custom Variables

```typescript
CompassTracking.setPageVar('author', 'John Doe');
CompassTracking.setPageMetric('wordCount', 1500);
CompassTracking.setSessionVar('campaign', 'summer2024');
CompassTracking.setUserVar('preferredLanguage', 'en');
```

### User Segments

```typescript
CompassTracking.addUserSegment('premium');
CompassTracking.setUserSegments(['premium', 'newsletter']);
CompassTracking.removeUserSegment('premium');
CompassTracking.clearUserSegments();
```

### Multimedia Tracking

```typescript
import { MultimediaTracking, MultimediaType, MultimediaEvent } from '@marfeel/react-native-sdk';

MultimediaTracking.initializeItem('video-1', 'youtube', 'abc123', MultimediaType.Video, {
  title: 'My Video',
  duration: 300,
});

MultimediaTracking.registerEvent('video-1', MultimediaEvent.Play, 0);
MultimediaTracking.registerEvent('video-1', MultimediaEvent.Pause, 45);
```

### Consent

```typescript
CompassTracking.setConsent(true);  // User gave consent
CompassTracking.setConsent(false); // User revoked consent
```

## License

MIT
npm package: @marfle/react-leaflet-nmscale
Description: Nautical mile scale for react-leaflet
Author: Marfle
Latest version: 3.0.1

# React-Leaflet-NmScale

[![npm (scoped)](https://img.shields.io/npm/v/@marfle/react-leaflet-nmscale.svg)](https://www.npmjs.com/package/@marfle/react-leaflet-nmscale)

React nautical mile scale component for [`React-Leaflet`](https://github.com/PaulLeCam/react-leaflet)

<img width="283" alt="screenshot_nmscale" src="https://user-images.githubusercontent.com/2248637/40827407-2664d240-6586-11e8-9d37-675437f4845f.png">

## Install

```bash
npm install @marfle/react-leaflet-nmscale
```

## Usage

Import:

```javascript
import { MapContainer, TileLayer } from 'react-leaflet';
import { NmScale } from '@marfle/react-leaflet-nmscale';
```

Use:

```jsx
<MapContainer center={[0, 0]} zoom={10}>
  <TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
  <TileLayer url="https://tiles.openseamap.org/seamark/{z}/{x}/{y}.png" />
  <NmScale />
</MapContainer>
```

## License

MIT
See [LICENSE](LICENSE) file.

## About us

[Marfle](https://www.marfle.com) makes software for workboat fleets
npm package: @marfle/winston-transport-datadog
Description: Datadog logging transport for winston
Author: Marfle
Latest version: 0.2.0
Deprecated: Package no longer supported

# winston-transport-datadog

[![npm (scoped)](https://img.shields.io/npm/v/@marfle/winston-transport-datadog.svg)](https://www.npmjs.com/package/@marfle/winston-transport-datadog) ![node (scoped)](https://img.shields.io/node/v/@marfle/winston-transport-datadog)

[`winston`](https://github.com/winstonjs/winston) transport for Datadog logging.

There are couple of winston transports for datadog. This one does buffering, error handling and uses tls-tcp instead of https.

## Install

```bash
npm install @marfle/winston-transport-datadog
```

## Usage

Use:

```javascript
const { createLogger } = require('winston');
const { DatadogTransport } = require('@marfle/winston-transport-datadog');

logger = createLogger({
  transports: [
    new DatadogTransport({
      apiKey: '<YOUR API KEY',
      // optional metadata which will be merged with log message
      metadata: {
        environment: process.env.NODE_ENV,
        service: 'myService'
      }
    })
  ]
});
```

## Options

| Name                | Default                       | Description                                                                                        |
| ------------------- | ----------------------------- | -------------------------------------------------------------------------------------------------- |
| `apiKey`            | `undefined`                   | api key from datadog                                                                               |
| `host`              | `'intake.logs.datadoghq.com'` | intake hostname                                                                                    |
| `port`              | `10516`                       | intake port                                                                                        |
| `bufferSize`        | `10000`                       | how many messages to buffer before discarding                                                      |
| `reconnectInterval` | `10000`                       |                                                                                                    |
| `socketOptions`     | `{ timeout: 10000 }`          | options passed to [`tls.socket`](https://nodejs.org/api/tls.html#tls_tls_connect_options_callback) |
| `metadata`          | `{ ddsource: 'winston' }`     | optional metadata which will be merged with log message                                            |

DatadogTransport extends Transport from [`winston-transport`](https://github.com/winstonjs/winston-transport), so it's options also apply.

## License

MIT
See [LICENSE](LICENSE) file.

## About us

[Marfle](https://www.marfle.com) makes software for workboat fleets
npm package: @marg51/fetch
Description: >
Author: marg51
Latest version: 0.0.2

# @marg51/fetch

> 

[![NPM](https://img.shields.io/npm/v/@marg51/fetch.svg)](https://www.npmjs.com/package/@marg51/fetch) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Install

```bash
npm install --save @marg51/fetch
```

## Usage

```jsx
import React, { Component } from 'react'

import MyComponent from '@marg51/fetch'

class Example extends Component {
  render () {
    return (
      <MyComponent />
    )
  }
}
```

## License

MIT © [marg51](https://github.com/marg51)
npm package: @marg51/lift-ui
Description: >
Author: marg51
Latest version: 0.0.15

# lift-ui

> 

[![NPM](https://img.shields.io/npm/v/lift-ui.svg)](https://www.npmjs.com/package/lift-ui) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Install

```bash
npm install --save lift-ui
```

## Usage

```jsx
import React, { Component } from 'react'

import MyComponent from 'lift-ui'

class Example extends Component {
  render () {
    return (
      <MyComponent />
    )
  }
}
```

## License

MIT © [marg51](https://github.com/marg51)
npm package: @marg51/react-forms
Description: >
Author: marg51
Latest version: 0.0.2-alpha.6

# react-forms

> 

[![NPM](https://img.shields.io/npm/v/react-forms.svg)](https://www.npmjs.com/package/react-forms) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Install

```bash
npm install --save react-forms
```

## Usage

```jsx
import React, { Component } from 'react'

import MyComponent from 'react-forms'

class Example extends Component {
  render () {
    return (
      <MyComponent />
    )
  }
}
```

## License

MIT © [marg51](https://github.com/marg51)
npm package: @marg51/react-forms-ui
Description: >
Author: marg51
Latest version: 0.1.10

# react-forms-ui

> 

[![NPM](https://img.shields.io/npm/v/react-forms-ui.svg)](https://www.npmjs.com/package/react-forms-ui) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Install

```bash
npm install --save react-forms-ui
```

## Usage

```jsx
import React, { Component } from 'react'

import MyComponent from 'react-forms-ui'

class Example extends Component {
  render () {
    return (
      <MyComponent />
    )
  }
}
```

## License

MIT © [marg51](https://github.com/marg51)
npm package: @marg51/react-ui
Description: ui components
Author: marg51
Latest version: 1.0.0-alpha.6

# @marg51/react-ui

> ui components

[![NPM](https://img.shields.io/npm/v/@marg51/react-ui.svg)](https://www.npmjs.com/package/@marg51/react-ui) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Install

```bash
npm install --save @marg51/react-ui
```

## Usage

```jsx
import React, { Component } from 'react'

import MyComponent from '@marg51/react-ui'

class Example extends Component {
  render () {
    return (
      <MyComponent />
    )
  }
}
```

## License

MIT © [marg51](https://github.com/marg51)