open-index/open-npm huggingface dataset:
npm package: @mmgj/react-hover-tilt
Description: Tilt hover effect wrapper
Author: Martin Jacobsen
Latest version: 1.0.1

# @mmgj/react-hover-tilt
> Wrapper component for applying a tilty hover effect \
Based on [react-tilt](https://github.com/jonathandion/react-tilt) by [@jonathandion](https://github.com/jonathandion/).

![Effect Preview](./examples/src/assets/tilt_preview.gif)

## Usage

```shell
yarn add @mmgj/react-hover-tilt
```

```js
import Tilt from '@mmgj/react-hover-tilt';

// ...

<Tilt>
  <div style={{ height: 200, width: 150, padding: 15, background: 'tomato' }}>
    I am a tilty div!
  </div>
</Tilt>
```
npm package: @mmgj/react-invisibutton
Description: Accessible and invisible <button> wrapper element.
Author: Martin Jacobsen
Latest version: 1.0.2

# @mmgj/react-invisibutton
> Accessible yet invisible wrapper for blinged out clickables

Wraps a DOM element in &lt;button&gt; tags stripped of all visible styles.

## Install

```shell
  npm i @mmgj/react-invisibutton
```
or

```shell
  yarn add @mmgj/react-invisibutton
```

## Usage

```js
  import InvisiButton from '@mmgj/react-invisibutton';
  ...

  <InvisiButton onClick={clickHandler}>
    <div style={{ /* Crazy stuff here */}}> Click me!</div>
  </InvisiButton>
```

## Props
| Prop          | Type          | Default       | Description |
| ------------- |:-------------:| -------------:|------------:|
| `onClick`     | `func`        |`() => false;` | Click handler |
| `children`    | `node`        |`*required*`   | Any renderable element |
| `style`       | `object`      |`{}`           | Styles for the button element |
| `type`        | `'button', 'submit' or 'reset'`|`'button'`    | Override the button type |
| `className`   | `'string'`    | `''`          | Additional classes for button element <sup>1</sup>|

<sup>1</sup> The button element ships with the class name `invisibutton__reset` by default. I really hope this isn't your favorite class name.
npm package: @mmgj/triks
Description: Code I don't want to write again
Author: Martin Jacobsen
Latest version: 0.0.2

# @mmgj/triks

```bash
  npm i @mmgj/triks
```
```bash
  yarn add @mmgj/triks
```

## Usage
### humanList / thingCommaThingAndThing / tctat
Takes an array of strings and an optional config object and returns a human-readable string.
```javascript
  import { humanList } from '@mmgj/triks';
```
...or, if you prefer:
```javascript
  import { thingCommaThingAndThing } from '@mmgj/triks';
```

#### Usage
```javascript
  const betterList = humanList(array, { config });
```
#### Arguments:
**array (Array)** : an array of strings.
**config (Object)** : an optional config object. (see below)

Must be declared in the form of a config object. I.e. `{ oxford: true, andThen: '!' }`.

| Prop          | Type          | Default  | Description |
| ------------- |:-------------:| --------:|------------:|
| `oxford`      | `boolean`     | `false`   | Use [Oxford comma](https://en.wikipedia.org/wiki/Serial_comma)? (I.e 'thingCommaThingCommaAndThing')|
| `and`         | `string`      |`'and'`   | What's going in the 'and' place?|
| `andThen`     | `string`      |`''`      | What goes after the string? (A period or exclamation mark for example)|


#### Returns
**(String)** : a string more resembling what a human might write.

#### Examples
```javascript
humanList(['Tom', 'Dick', 'Harry']); // Tom, Dick and Harry
humanList(['Tom', 'Dick', 'Harry']); { oxford: true }); // Tom, Dick, and Harry
humanList(['Luke', 'Leia']); // Luke and Leia
humanList(['Luke', 'Leia'], { andThen: '!!!' }); // Luke and Leia!!!
humanList(['Pompel', 'Pilt'], { and: 'og' }); // Pompel og Pilt
humanList(['Stone', 'Scissors', 'Paper', 'Lizard', 'Spock'], { oxford: true, and: '', andThen: '!!!!'};
 // Stone, Scissors, Paper, Lizard, Spock!!!!
```
npm package: @mmgolden/storybook-design-system
Description: ## Install
Latest version: 2.0.0

# Storybook Design System

## Install

`npm install @mmgolden/storybook-design-system`

## Usage

```
// MyComponent.vue
import { Button } from '@mmgolden/storybook-design-system'
```

To override Sass variables, replace the default variables with your variables:

```
// assets/scss/main.scss
@use "@mmgolden/storybook-design-system/dist/components/button/Button.scss" with (
  $color-background-primary: $green,
  $color-background-primary-hovered: $dark-green
);
```
npm package: @mmieluch/nightwatch-helpers
Description: Helpers for the Nightwatch.js testing framework.
Author: Michał Mieluch
Latest version: 0.0.10

# nightwatch-helpers
Testing helpers for the Nightwatch.js framework

## Usage

### NPM
```bash
npm install --save-dev @mmieluch/nightwatch-helpers
```

### Yarn
```bash
yarn add --dev @mmieluch/nightwatch-helpers
```

In the Nightwatch config:

```js
custom_commands_path: [
  'node_modules/@mmieluch/nightwatch-helpers/dist/commands',
],
```

## Assertions

### `checked({string} selector, {string} [message = null])`

Assert a radio button is checked.

### `count({string} selector, {number} expected, {string} [message = null])`

Assert the number of elements found by `document.querySelectorAll(selector)` is equal to `expected`.

### `disabled({string} selector, {string} [message = null])`

Assert that the element is in disabled state.

### `enabled({string} selector, {string} [message = null])`

Assert that the element is in enabled state.

### `unchecked({string} selector, {string} [message = null])`

Assert a radio button is not checked.

## Commands

### `getBoundingClientRect({string} selector, {function} callback)`

Allows for quick accessing element's DOMRect object.

Usage:
```js
browser.getBoundingClientRect('#foo', result => {
  browser.assert.equals(100, result.value.top)
})
```

For me it comes especially handy when trying to compare vertical alignment of two elements:

```js
browser.perform(done => {
  let fooBottom = 0
  let barTop = 0
  
  browser.getBoundingClientRect('#foo', result => {
    fooBottom = result.value.bottom
  })
  
  browser.getAttribute('#bar', 'offsetTop', result => {
    barTop = parseInt(result.value)
  })
  
  browser.assert.strictEquals(fooBottom, barTop)
})
```

### `scrollTo({string} selector, {number} offset)`

Uses `window.scroll` to position an element in the view port. Use `offset` argument to adjust the position. Useful when you want to take a screenshot and WebDriver's mouse `move` just wont work.

### `takeScreenshot({string} prefix)`

Uses your config from the Nightwatch config file. Works only if screenshots are enabled in Nightwatch configuration, eg.:

```js
test_settings: {
  default: {
    screenshots: {
      enabled: true,
      path: '/Users/mmieluch/Code/important-project/screenshots',
    },
  },
},
```

The `takeScreenshot` command will take a screenshot and put it in a subtree constructed of module name and step name respectively.

Let's assume your current test file is located under `/Users/mmieluch/Code/important-project/tests/e2e/todos/index.js` and you're running a test case named "User can add a todo". The command will put the screenshot under `/Users/mmieluch/Code/important-project/screenshots/todos/index/user-can-add-a-todo/1495110229891.png`. 

The `1495110229891` bit is the current timestamp. You can add a prefix to the timestamp bit, calling the command like so:

```
browser.takeScreenshot('my-prefix')
```

which will result in a filename like this: `my-prefix-1495110229891.png`.