open-index/open-npm huggingface dataset:
npm package: @snigo.dev/carousel
Description: Carousel react component
Author: snigo
Latest version: 1.0.2

## Carousel

Zero-dependencies awesome carousel react component for everyday use. Demo: https://carousel.snigo.dev

### Usage

1. Install the package
```

npm i @snigo.dev/carousel

```

2. Wrap stuff with Carousel component
```js

<main>
  <Carousel
    onApproach={() => { /** Load more images */}}
    onChange={(from, to) => { /** Keep track of the current slide showing */ }}
  >
    {
      images.map((imageId: string) => (
        <Image src={`https://source.unsplash.com/${imageId}/960x600`} width={960} height={600} key={imageId} />
      ))
    }
  </Carousel>
</main>
```

3. Enjoy the ride

![Carousel screenshot](__screenshots__/carousel.png)

### Features

* Supports swiping by both mouse and touch interactions
* No configuration required to start, just wrap any number of components
* Slides can have interactive elements
* Url to particular slide can be passed as `https://myapp.com/#slides3`

### Props

| **Prop name**  | **Type**   | **Default value** | **Description**                                                 |
|----------------|------------|-------------------|-----------------------------------------------------------------|
| `start`        | `number`   | 0                 | Starting index of the slide                                     |
| `loop`         | `boolean`  | false             | Restarts the carousel after the last slide                      |
| `autoplay`     | `number`   | 0                 | Number of seconds to autoshow next slide or `0` to disable      |
| `threshold`    | `number`   | 40                | Number of pixels slided to trigger navigation to the next slide |
| `showDots`     | `boolean`  | true              | Shows dots at the bottom of the carousel                        |
| `showArrows`   | `boolean`  | true              | Shows arrows on both sides of the carousel                      |
| `allowSwipe`   | `boolean`  | true              | Allows swipe either by mouse or touch interaction               |
| `allowDotClick`| `boolean`  | true              | Allows navigation by clicking on the dot                        |
| `onStart`      | `function` |                   | Callback to be called when carousel is rendered on the screen   |
| `onEnd`        | `function` |                   | Callback to be called on the last slide                         |
| `onApproach`   | `function` |                   | Callback to be called slides are approaching the end            |
| `onChange`     | `function` |                   | Callback to be called on every slide change                     |

### Dimensions

Carousel is designed to be contained by parent, meaning it will always take full width and full height of the container. Same applies to the default slide size.
npm package: @snigo.dev/cf
Description: Compare functions
Latest version: 0.0.6

# `@snigo.dev/cf`

Collection of compare functions for everyday use, providing three different methods of sorting:
- Alphanumeric: standard sorting by character code
- Numeric: numbers sorted before any textual content
- DateTime: sorting by parsable date (based on `Date.parse`)

## Usage

```js
import { cfDateTimeBy } from '@snigo.dev/cf';

const users = [
  { name: 'Jeff', dob: 'January 12, 1964' },
  { name: 'Elon', dob: 'June 28, 1971' },
  { name: 'Bill', dob: 'October 28, 1955' },
  { name: 'Mark', dob: 'May 14, 1984' },
];

[...users].sort(cfDateTimeBy('dob', 'desc'));
/**
 * => [
 *   { name: 'Mark', dob: 'May 14, 1984' },
 *   { name: 'Elon', dob: 'June 28, 1971' },
 *   { name: 'Jeff', dob: 'January 12, 1964' },
 *   { name: 'Bill', dob: 'October 28, 1955' },
 * ]
 * /
```

## Motivation

Provide higher comparing abstraction for sorting methods.

## API
npm package: @snigo.dev/color
Description: Color functions
Latest version: 0.0.6

# color

Greatly missing color functions and types for JavaScript.
- Supports four color spaces: *sRGB*, *Display P3*, *CIELab* and *CIEXYZ* with precise conversion between them.
- Parser doesn’t rely on browsers to parse color strings and could be used in any environment.
- Understands all CSS colors and many more cool features!

## Usage

In the terminal:
```

% npm install @snigos/color

```

Then in the module:
```js

// JavaScript modules
import { color, contrast } from '@snigos/color';

const bgColor = color('#fdfeff');
const bgContrast = contrast(bgColor);

const badPrimaryColor = 'hsl(134deg 80% 50%)';

bgContrast(badPrimaryColor); // 1.67
bgContrast.validate(badPrimaryColor);
/* {
  wcag-aa-normal-text: false,
  wcag-aa-large-text: false,
  wcag-aa-ui: false,
  wcag-aaa-normal-text: false,
  wcag-aaa-large-text: false,
} */

const [goodPrimaryColor] = bgContrast.find({
  hue: 134,
  saturation: 0.8,
  targetContrast: 4.5,
});

bgContrast(goodPrimaryColor); // 4.54
goodPrimaryColor.toHslString(); // hsl(134deg 80% 29.7%)
goodPrimaryColor.toHexString(); // #0f882b
goodPrimaryColor.toLab().toLchString(); // lch(49.378% 60.817 140.041deg)
goodPrimaryColor.copyWith({ lightness: goodPrimaryColor.lightness + 0.05 });
/*
  sRGBColor {
    red: 18,
    green: 159,
    blue: 51,
    hue: 134,
    saturation: 0.8,
    lightness: 0.346875,
    alpha: 1,
    ...
  }
*/
```

## Motivation

Whether you like it or not, but merging between CSS and JavaScript and using JavaScript for styling in non-CSS environments, like mobile development, is here and most likely will stay for quite a while. The need of JavaScript representations of CSS units is inevitable, especially in a color as things there are about to change with introduction of CIELab color space in modern browsers that is pretty much around the corner. You can read [this article](https://lea.verou.me/2020/04/lch-colors-in-css-what-why-and-how/) by [Lea Verou](https://twitter.com/leaverou) explaining why Lab colors are pretty cool.

Color package consists of several perfectly tree-shakeable modules:
- color function: color parcer that converts strings like this: #da34e1 into JavaScript object, an sRGBColor instance in this case
- sRGBColor class whos instances store vital information about the color in sRGB color space
- LabColor class that does the same for Lab color space
- XYZColor class that store information about the color in CIEXYZ color space
- contrast function: calculates, validates and generates color in given hue with desired target contrast
- mix and mixLab functions: well, they mix colors either in sRGB or Lab color space