open-index/open-npm huggingface dataset:
npm package: @mikhaelesa/cerulean
Description: Design system turned into component library that will make your slicing work easier.
Author: Mikhael Esa
Latest version: 0.2.1

# Cerulean Design System

> A design system made for convenience without compromising aesthetics.

**Cerulean Design System** will help you through creating a [React](https://reactjs.org/) based website faster and easier with our ready to use components and minimal configurations.

## Getting Started

Install cerulean-design-system

```bash
# With npm
npm i @mikhaelesa/cerulean
# With yarn
yarn add @mikhaelesa/cerulean
# With pnpm
pnpm add @mikhaelesa/cerulean
```

Import CSS to your root `jsx` or `tsx` file

```javascript
// main.tsx
import "@mikhaelesa/cerulean/dist/style.css";
```

Now use any component in your project

```jsx
const Home = () => {
	return (
		<>
			<p>
				<Typography>Hello</Typography>
			</p>
			<Button>Click me!</Button>
			<Icon iconName="IcCheck" />
		</>
	);
};
```

Test out the design system by using any component available and see if it's working

## Typography

For typography we use Poppins as our font-family. You can use [@fontsource/poppins](https://www.npmjs.com/package/@fontsource/poppins) to activate the fonts.

```bash
yarn add @fontsource/poppins
```

`import` `@fontsource/poppins` in your main file

```tsx
import "@fontsource/poppins/400.css";
import "@fontsource/poppins/500.css";
import "@fontsource/poppins/600.css";
import "@fontsource/poppins/700.css";
```

## Documentation

For now, all component documentation is in each component folder

- [Badge Documentation](https://github.com/mikhaelesa/cerulean/tree/main/src/components/Badge#readme)
- [Button Documentation](https://github.com/mikhaelesa/cerulean/tree/main/src/components/Button#readme)
- [Checkbox Documentation](https://github.com/mikhaelesa/cerulean/tree/main/src/components/Checkbox#readme)
- [Grid Documentation](https://github.com/mikhaelesa/cerulean/tree/main/src/components/Grid#readme)
- [Icon Documentation](https://github.com/mikhaelesa/cerulean/tree/main/src/components/Icon#readme)
- [Input Documentation](https://github.com/mikhaelesa/cerulean/tree/main/src/components/Input#readme)
- [Radio Documentation](https://github.com/mikhaelesa/cerulean/tree/main/src/components/Radio#readme)
- [Switch Documentation](https://github.com/mikhaelesa/cerulean/tree/main/src/components/Switch#readme)
- [Textarea Documentation](https://github.com/mikhaelesa/cerulean/tree/main/src/components/Switch#readme)
- [Typography Documentation](https://github.com/mikhaelesa/cerulean/tree/main/src/components/Typography#readme)
npm package: @mikhail-g/node-resemble-js
Description: Image analysis and comparison for nodejs
Author: Mykhailo Hariachyi
Latest version: 1.3.0

# @mikhail-g/node-resemble-js

Analyse and compare images with Javascript. This project does not need canvas or any other binary dependencies.
It is a modification of [Resemble.js](https://github.com/Huddle/Resemble.js)

## Installation

`npm install @mikhail-g/node-resemble-js`

## Example

### Retrieve basic analysis on image

```javascript
const resemble = require('@mikhail-g/node-resemble-js');

resemble(fileData)
  .onComplete(function(data){
    console.log(data);
  });
```

output for a blank white image:

```javascript
 {
   red: 255,
   green: 255,
   blue: 255,
   brightness: 255
 }
```

### Use resemble to compare two images

```javascript
var diff = resemble(file)
  .compareTo(file2)
  .ignoreColors()
  .onComplete(function(data){
    console.log(data);
});
```

output:

```javascript
 {
   misMatchPercentage : 100, // %, when all pixels are different in 2 images
   isSameDimensions: false, // is width and height of 2 images are the same
   dimensionDifference: { width: 0, height: -1 }, // defined if dimensions are not the same
   getImageDataUrl: function(){}
 }
```

### Configuration

You can change the comparison method after the first analysis or before `onComplete()`.

```javascript
diff.ignoreNothing(); // any change in pixel color or brightness will increase misMatchPercentage
diff.ignoreColors(); // compares only brightness of pixels ignoring colors
diff.ignoreAntialiasing(); 
```

And change the output display style.

```javascript
resemble.outputSettings({
  errorColor: {
    red: 255,
    green: 0,
    blue: 255
  },
  errorType: 'movement',
  transparency: 0.3
});
// resembleControl.repaint();
```

--------------------------------------

### Usuage in cucumber step definition

``` javascript
     this.Then(/^Screenshot should match image "(.*)"$/, function (image, callback) {
        browser.takeScreenshot().then(function(pngString) {
          var screenshot = new Buffer(pngString, 'base64');
     
          resemble(image)
            .compareTo(screenshot)
            .onComplete(function(data){
     
              if (Number(data.misMatchPercentage) <= 0.01) {
                callback();
              } else {
                data.getDiffImage().pack().pipe(fs.createWriteStream(image + 'diff.png'));
                callback.fail(new Error("Screenshot '" + image+  "' differ " + data.misMatchPercentage + "%"));
              }
            });
        });
      })
```

--------------------------------------

## Credits

* Created by [James Cryer](https://github.com/jamescryer) and the Huddle development team.
* [Lukas Svoboda](https://github.com/lksv) - modification for node.js
* [Mirza Zeyrek](https://github.com/mirzazeyrek) - jpeg support
* [LarryG](https://github.com/larryg01) - dependency updates
* [Mykhailo Hariachyi](https://github.com/mikhail-g) - fix for ignoreNothing() function