open-index/open-npm huggingface dataset:
npm package: @netsells/nuxt-auth-module
Description: Authentication module for Nuxt.js
Latest version: 5.0.5

<h1 align="center" >🔑 Auth Module</h1>
<p align="center">Zero-boilerplate authentication support for Nuxt.js!</p>

<p align="center">
<a href="https://david-dm.org/nuxt-community/auth-module">
    <img alt="" src="https://david-dm.org/nuxt-community/auth-module/status.svg?style=flat-square">
</a>
<a href="https://standardjs.com">
    <img alt="" src="https://img.shields.io/badge/code_style-standard-brightgreen.svg?style=flat-square">
</a>
<a href="https://circleci.com/gh/nuxt-community/auth-module">
    <img alt="" src="https://img.shields.io/circleci/project/github/nuxt-community/auth-module.svg?style=flat-square">
</a>
<a href="https://codecov.io/gh/nuxt-community/auth-module">
    <img alt="" src="https://img.shields.io/codecov/c/github/nuxt-community/auth-module.svg?style=flat-square">
</a>
<br>
<a href="https://npmjs.com/package/@nuxtjs/auth-next">
    <img alt="" src="https://img.shields.io/npm/v/@nuxtjs/auth-next/latest.svg?style=flat-square">
</a>
<a href="https://npmjs.com/package/@nuxtjs/auth">
    <img alt="" src="https://img.shields.io/npm/dt/@nuxtjs/auth-next.svg?style=flat-square">
</a>
</p>

<p align="center">
<a href="https://auth.nuxtjs.org">Read Documentation</a>
</p>

**🚧 please see [status page](http://auth.nuxtjs.org/status) in documentation.**

## Development

Running demo for development:

```bash
$ yarn install
$ yarn dev
```

## License

[MIT License](./LICENSE) - Copyright (c) Nuxt Community
npm package: @netsells/nuxt-bootstrap-vue-lazyloader
Description: Nuxt module for lazyloading bootstrap-vue components
Author: Sam Turrell
Latest version: 0.3.0

# Nuxt Bootstrap-vue Lazy Loader

This module exposes an additional `lazyComponents` property in the `bootstrap-vue` config. Any components referenced here will be converted to lazy-loaded imports instead of being bundled into the main runtime chunk. This will greatly improve performance.

## Installation

Add the module to your nuxt application:

```sh
$ yarn add @netsells/nuxt-bootstrap-vue-lazyloader
```

Add the module to your nuxt config:

```js
module.exports = {
    modules: [
        '@netsells/nuxt-bootstrap-vue-lazyloader',
    ],
};
```


## Usage 

Add the `lazyComponents` property to your `bootstrap-vue` config. Usage may vary depending on how your are defining the config, but take the following for example:

```js
module.exports = {
    bootstrapVue: {
        components: [
            'BRow',
            'BCol',
        ],
        lazyComponents: [
            'BCollapse',
        ],
    },
};
```
npm package: @netsells/nuxt-env
Description: This module will allow you to update env variables without doing an entire re-build and deploy of your application. This package is a wrapper around [@koumoul/nuxt-config-inject](http://npmjs.com/package/@koumoul/nuxt-config-inject), but based on env vars
Author: Sam Turrell
Latest version: 0.1.0

# Nuxt Env Vars

This module will allow you to update env variables without doing an entire re-build and deploy of your application. This package is a wrapper around [@koumoul/nuxt-config-inject](http://npmjs.com/package/@koumoul/nuxt-config-inject), but based on env vars.

The original package describes the problem:

> [Nuxt](https://fr.nuxtjs.org/) is neat, but it doesn't respect principles that we consider very important. We want to [store config in the environment](https://12factor.net/config), we want to build docker images meant to be used in as many environments as possible without additional build steps.
>
> [This issue](https://github.com/nuxt/nuxt.js/issues/5100) shows that the problem is not easily solved. There are code solutions for parts of the problem: [nuxt-env](https://github.com/samtgarson/nuxt-env), monkey-patching router base, defining `__webpack_public_path__`, etc. But we keep hitting roadblocks, incompatibility with some modules, regressions at upgrades.
>
> This module is an attempt to solve the problem in a more brute force way. At build time a pseudo-config is transformed so that all values contain easily recognizable placeholders. Then at runtime all the files in `.nuxt` and `dist` directories are read and the placeholders are replaced with actual values from current environment. This solution is kinda ugly and it certainly has limitations, but early tests are encouraging.
 
 This is mostly for our specific use case within docker, you may be perfectly fine using the original package.
 
 ## Usage
 
 ```sh
yarn add @netsells/nuxt-env 
```

At the top of your nuxt config add the following lines:

```js
const envVars = require('@netsells/nuxt-env');

envVars({
    vars: [
        'API_KEY_SECRET', // Example
        // Array of variables to replace 
    ],
});
```

When your application is built, the environment variables supplied will be replaced with placeholders. When your application is started, these variables will be dynamically replaced with your new environment variables.

```sh
yarn build
API_KEY_SECRET=abc123-456xyz yarn start
```
npm package: @netsells/nuxt-hatchly
Description: > Nuxt module for integrating with Hatchly-based web platforms
Latest version: 2.0.0

# @netsells/nuxt-hatchly

> Nuxt module for integrating with Hatchly-based web platforms

## Features

This module sets up the various official hatchly Nuxt integration modules:

* [@hatchly/nuxt-files-module](https://npmjs.com/package/@hatchly/nuxt-files-module)
* [@hatchly/nuxt-navigation-module](https://npmjs.com/package/@hatchly/nuxt-navigation-module)
* [@hatchly/nuxt-newsletter-module](https://npmjs.com/package/@hatchly/nuxt-newsletter-module)
* [@hatchly/nuxt-pages-module](https://npmjs.com/package/@hatchly/nuxt-pages-module)
* [@hatchly/nuxt-redirects-module](https://npmjs.com/package/@hatchly/nuxt-redirects-module)
* [@hatchly/nuxt-snippets-module](https://npmjs.com/package/@hatchly/nuxt-snippets-module)

## Usage

Install the dependencies using the following command:

```sh
yarn add @netsells/nuxt-hatchly
```

Add the module to your `modules` array in your nuxt config file:

```js
modules: [
    '@netsells/nuxt-hatchly',
],
```

By default it will register all of the modules, but you can make it only register specific modules using the `hatchly.modules` array in your nuxt config:

```js
hatchly: {
    modules: [
        'pages', 
        'snippets',
        // etc.
    ],
},
```

For module specific config options, check the various modules own documentation.
npm package: @netsells/nuxt-healthcheck
Description: Nuxt healthcheck module
Latest version: 1.0.1

# @netsells/nuxt-healthcheck

[![npm version][npm-version-src]][npm-version-href]
[![npm downloads][npm-downloads-src]][npm-downloads-href]
[![License][license-src]][license-href]

> Nuxt module to provide a healthcheck path

## Features

Inspired by the nuxt 2 module by [fukuiretu](https://github.com/fukuiretu/nuxt-healthcheck), this module provides a `/healthcheck` url to respond to health check requests. 

## Quick Setup

1. Add `@netsells/nuxt-healthcheck` dependency to your project

```bash
# Using pnpm
pnpm add -D @netsells/nuxt-healthcheck

# Using yarn
yarn add --dev @netsells/nuxt-healthcheck

# Using npm
npm install --save-dev @netsells/nuxt-healthcheck
```

2. Add `@netsells/nuxt-healthcheck` to the `modules` section of `nuxt.config.ts`

```js
export default defineNuxtConfig({
  modules: [
    '@netsells/nuxt-healthcheck'
  ]
})
```

That's it! You can now use @netsells/nuxt-healthcheck in your Nuxt app ✨

## Development

```bash
# Install dependencies
npm install

# Generate type stubs
npm run dev:prepare

# Develop with the playground
npm run dev

# Build the playground
npm run dev:build

# Run ESLint
npm run lint

# Run Vitest
npm run test
npm run test:watch

# Release new version
npm run release
```

<!-- Badges -->
[npm-version-src]: https://img.shields.io/npm/v/@netsells/nuxt-healthcheck/latest.svg?style=flat&colorA=18181B&colorB=28CF8D
[npm-version-href]: https://npmjs.com/package/@netsells/nuxt-healthcheck

[npm-downloads-src]: https://img.shields.io/npm/dm/@netsells/nuxt-healthcheck.svg?style=flat&colorA=18181B&colorB=28CF8D
[npm-downloads-href]: https://npmjs.com/package/@netsells/nuxt-healthcheck

[license-src]: https://img.shields.io/npm/l/@netsells/nuxt-healthcheck.svg?style=flat&colorA=18181B&colorB=28CF8D
[license-href]: https://npmjs.com/package/@netsells/nuxt-healthcheck
npm package: @netsells/nuxt-hotjar
Description: Nuxt hotjar plugin
Author: Neveena
Latest version: 0.1.3

# Nuxt Hotjar [![NPM version][npm-image]][npm-url] [![Dependency Status][daviddm-image]][daviddm-url] 
> Add nuxt hotjar to your nuxt.js application.

**Note:** nuxt hotjar is not enabled in dev mode.
You can set environment variable `NODE_ENV` to `production` for testing in dev mode.

## Setup
- Add `@netsells/nuxt-hotjar` dependency using yarn or npm to your project
- Add `@netsells/nuxt-hotjar` to `modules` section of `nuxt.config.js`
```js
modules: [
    ['@netsells/nuxt-hotjar', { 
        id: 'hjid', 
        sv: 'hjsv',
    }],
]
```

## Options

### `id`
- Required
- Hotjar ID

### `sv`
- Hotjar Snippet Version


## License

MIT © [Netsells](https://netsells.co.uk)


[npm-image]: https://badge.fury.io/js/%40netsells%2Fnuxt-hotjar.svg
[npm-url]: https://npmjs.org/package/@netsells/nuxt-hotjar
[travis-image]: https://travis-ci.org/netsells/nuxt-hotjar.svg?branch=master
[travis-url]: https://travis-ci.org/netsells/nuxt-hotjar
[daviddm-image]: https://david-dm.org/netsells/nuxt-hotjar.svg?theme=shields.io
[daviddm-url]: https://david-dm.org/netsells/nuxt-hotjar
[coveralls-image]: https://coveralls.io/repos/netsells/nuxt-hotjar/badge.svg
[coveralls-url]: https://coveralls.io/r/netsells/nuxt-hotjar
npm package: @netsells/nuxt-icons8
Description: A simple module to provide an Icons8 SVG spritesheet to your Nuxt app
Author: Sam Turrell
Latest version: 0.4.0

# Nuxt Icons8 Module

> A simple module to provide an Icons8 SVG spritesheet to your Nuxt app

This module aims to make it easier to integrate with Icons8 in a more uniform way, allowing you to simply pass in your SVG file and have it globally provided to your app.

## Why does this component use SVGs rather than font?

Fonts are inherently bad, and are penalised by tools such as Google PageSpeed and Lighthouse as they are an additional request. Add to this issues with accessibility and general size of these files, it's highly recommended to use SVGs for application icons.

## What does this module do?

A global component will be registered in your app, and this can be referenced using the `componentName` provided or `app-icon` by default.

```vue
<template>
    <app-icon name="email" />
</template>

<style lang="scss" scoped>
    // SVG "fill" will use the font colour provided, 
    // and will inherit the current colour if not set
    .app-icon {
        color: red;
    }
</style>
```

## Normalisation

If the `normaliseSpritesheet` option is set to `true` the sprite sheet will automatically have all `fill` attributes removed. This is because the `fill` on the icons will be enforced by the font `color` css value and inherited by `currentColor` in the component CSS.

If set to `false` for any reason, it can be enabled on a per-component basis using the `:normalise="false"` prop on the component.

## Usage

Install the module:

```bash
$ yarn add @netsells/nuxt-icons8
```

Add the module to your nuxt config:

```js
modules: {
    // Other modules
    '@netsells/nuxt-icons8',
}, 
```

[Configure](#options) the module to your needs:

```
icons8: {
    spritePath: '',
    componentName: '',
    normaliseSpritesheet: true,
},
```

## Options

### `spritePath`
> Path to your svg spritesheet in your application

* Default: `''`
* Type: `string`
* *Required*

### `componentName`
> The name of the global icon component

* Default: `'app-icon'`
* Type: `string`

### `normaliseSpritesheet`
> Whether to apply normalisation to the spritesheet. See above for details 

* Default: `true`
* Type: `boolean`

## Storybook

This component can be utilised in storybook by first doing a build of your nuxt app. This will generate the `.nuxt` folder with the generated component from this module. You can then register it globally in your storybook project by simply pulling in the generated file:

```js
import '../.nuxt/icons8/plugin';
```
npm package: @netsells/nuxt-meta-builder
Description: meta builder class so that you can build the meta object up in a more fluent way
Author: Martin Smith
Latest version: 3.0.1

# Nuxt Meta Builder 

[![NPM version][npm-image]][npm-url] [![Build Status][travis-image]][travis-url] [![Dependency Status][daviddm-image]][daviddm-url]

> A fluent approach to building up the meta data object within a Nuxt project

## Why?

The standard approach to building up the meta content powered by [vue-meta](https://www.npmjs.com/package/vue-meta) is to manually create an object with keys and values and is often a repeated mess across pages. This approach makes this a bit more readable via fluent methods.

## Installation

```sh
yarn add @netsells/nuxt-meta-builder
```

## Usage

Add the module to your nuxt config's `modules` array:

```js
module.exports = {
    ...
    modules: [
        '@netsells/nuxt-meta-builder',
    ],
    ...
};
```

You can then access the `$metaBuilder` function on the Vue instance:

```vue
<script>
    export default {
        // Basic usage
        head() {
            return this.$metaBuilder()
                .setTitle('My page title')
                .setDescription('The description for the current page')
                .make();
        },       
    };
</script>
```

## Available API Methods

| Method | Description | Arguments |
| --- | --- | --- |
| `setDescription` | Set both the `description` and the `og:description` meta data | `val` [required] - the description to set |
| `setTitle` | Set both the `title` and the `og:title` meta data | `hid` - the title to set<br><br> `content` [optional, default = false] - the title value to set |
| `addMeta` | Set specific meta values | `hid` [required] - the unique meta tag id to set. Can be a single `string` or an `array` of `string`s<br><br>`content` [required] - the meta value to set |
| `make` | Generate the resulting object | None. |

Note: All public API methods return the class instance and can be chained, other than the `make` command which returns the final meta object and should be called last.

## License

MIT © [Netsells](https://www.netsells.co.uk)


[npm-image]: https://badge.fury.io/js/%40netsells%2Fnuxt-meta-builder.svg
[npm-url]: https://npmjs.org/package/@netsells/nuxt-meta-builder
[travis-image]: https://travis-ci.org/netsells/nuxt-meta-builder.svg?branch=master
[travis-url]: https://travis-ci.org/netsells/nuxt-meta-builder
[daviddm-image]: https://david-dm.org/netsells/nuxt-meta-builder.svg?theme=shields.io
[daviddm-url]: https://david-dm.org/netsells/nuxt-meta-builder
npm package: @netsells/nuxt-slaask
Description: Nuxt Slaask plugin
Author: Sam Turrell
Latest version: 0.1.0

# Nuxt Slaask [![NPM version][npm-image]][npm-url] 
> Add nuxt slaask to your nuxt.js application.

## Installation

Add `@netsells/nuxt-slaask` to your project using yarn or npm. 

```sh
yarn add @netsells/nuxt-slaask
```

## Setup

Add `@netsells/nuxt-slaask` to `modules` section of `nuxt.config.js`.

```js
export default {
    modules: [
        ['@netsells/nuxt-slaask', {
            key: '{{ SLAASK KEY }}',
        }],
    ],

    // or
    
    modules: [
        '@netsells/nuxt-slaask',
    ],

    slaask: {
        key: '{{ SLAASK KEY }}',
    },

    // or

    modules: [
        '@netsells/nuxt-slaask',
    ],

    publicRuntimeConfig: {
        slaask: {
            key: process.env.SLAASK_KEY,
        },
    },
};
```

## Options

### `key`
- Required
- Slaask key

## License

MIT © [Netsells](https://netsells.co.uk)

[npm-image]: https://badge.fury.io/js/%40netsells%2Fnuxt-slaask.svg
[npm-url]: https://npmjs.org/package/@netsells/nuxt-slaask
npm package: @netsells/nuxt-sso
Description: [![NPM version][npm-image]][npm-url] [![Build Status][travis-image]][travis-url] [![Dependency Status][daviddm-image]][daviddm-url]
Author: Becca Anderton
Latest version: 1.3.0

# Nuxt Netsells SSO 

[![NPM version][npm-image]][npm-url] [![Build Status][travis-image]][travis-url] [![Dependency Status][daviddm-image]][daviddm-url]

> A module allowing google auth single sign on for internal Netsells projects.

## Why?

Currently for all Netsells internal tooling we would have to repeat the Single Sign On process for every tool. This allows us a centralised way of handling it across all tools, and ensure they all work in the same manner. Simplifies the process of anyone who wishes to build an internal tool.

## Installation

```sh
yarn add @netsells/nuxt-netsells-sso
```

## Usage

Add the module to your nuxt config's `modules` array:

```js
module.exports = {
    ...
    modules: [
        ['@netsells/nuxt-netsells-sso', {
            debug: false, // Enable logging
            endpoints: {
                me: 'api/me', // User lookup endpoint
            },
        }],
    ],
    ...
};
```

API requests use the `API_BASE` env value to determine the location of the API to handle the SSO authentication.

MIT © [Netsells](https://www.netsells.co.uk)


[npm-image]: https://badge.fury.io/js/%40netsells%2Fnuxt-sso.svg
[npm-url]: https://npmjs.org/package/@netsells/nuxt-sso
[travis-image]: https://travis-ci.org/netsells/nuxt-sso.svg?branch=master
[travis-url]: https://travis-ci.org/netsells/nuxt-sso
[daviddm-image]: https://david-dm.org/netsells/nuxt-sso.svg?theme=shields.io
[daviddm-url]: https://david-dm.org/netsells/nuxt-sso
npm package: @netsells/nuxt-store-builder
Description: This module exports a binary for generating the `./nuxt/store.js` file. This is especially useful if doing storybook builds in CI or similar, with components that require the store to be generated.
Author: Sam Turrell
Latest version: 0.2.0

# Nuxt Store Builder

This module exports a binary for generating the `./nuxt/store.js` file. This is especially useful if doing storybook builds in CI or similar, with components that require the store to be generated.

## Usage

```npx @netsells/nuxt-store-builder```
npm package: @netsells/nuxt-vwo
Description: Nuxt VWO plugin
Author: Sam Turrell
Latest version: 0.1.2

# Nuxt VWO [![NPM version][npm-image]][npm-url] [![Dependency Status][daviddm-image]][daviddm-url] 
> Add VWO to your nuxt.js application.

**Note:** VWO is not enabled in dev mode.

You can set environment variable `NODE_ENV` to `production` for testing in dev mode.

## Setup
- Add `@netsells/nuxt-vwo` dependency using yarn or npm to your project
- Add `@netsells/nuxt-vwo` to `modules` section of `nuxt.config.js`

```js
modules: [
    ['@netsells/nuxt-vwo', { 
        accountId: 1234,
        settingsTolerance: 1234, // Optional
        libraryTolerance: 1234, // Optional
    }],
]
```

## Options

### `accountId`
- Required
- VWO Account ID

### `settingsTolerance`
- VWO `settings_tolerance` value
- Default: `2000`

### `libraryTolerance`
- VWO `library_tolerance` value
- Default: `5000`

## License

MIT © [Netsells](https://netsells.co.uk)

[npm-image]: https://badge.fury.io/js/%40netsells%2Fnuxt-vwo.svg
[npm-url]: https://npmjs.org/package/@netsells/nuxt-vwo
[travis-image]: https://travis-ci.org/netsells/nuxt-vwo.svg?branch=master
[travis-url]: https://travis-ci.org/netsells/nuxt-vwo
[daviddm-image]: https://david-dm.org/netsells/nuxt-vwo.svg?theme=shields.io
[daviddm-url]: https://david-dm.org/netsells/nuxt-vwo
[coveralls-image]: https://coveralls.io/repos/netsells/nuxt-vwo/badge.svg
[coveralls-url]: https://coveralls.io/r/netsells/nuxt-vwo
npm package: @netsells/reg-suit-basic-git-hash-plugin
Description: This module is a plugin for reg-suit that provides basic functionality to set the Head and Base sha states for your reg-suit tests.
Author: Sam Turrell
Latest version: 0.2.1

# Reg Suit Basic Git Hash Plugin

This module is a plugin for reg-suit that provides basic functionality to set the Head and Base sha states for your reg-suit tests.

## Installation

```sh
$ yarn add -D @netsells/reg-suit-basic-git-hash-plugin
```

Add the plugin to your `regconfig.json`:

```
{
    "plugins": {
        "@netsells/reg-suit-basic-git-hash-plugin": {}
    }
}
```

## Usage

This plugin runs off of two env variables:

- `BASE_SHA` - the SHA of the commit that the current changes should be compared with
- `HEAD_SHA` - the SHA of the current commit to build your regression suit from

How you populate these variables is up to you. For github actions you would pass them as an `env` variable in your `reg-suit` step, e.g.:

```yml
-   name: Run Reg-suit
    env:
        AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
        AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
        BASE_SHA: ${{ github.event.pull_request.base.sha }}
        HEAD_SHA: ${{ github.event.pull_request.head.sha }}
    run: |
        yarn run reg-suit run
```

The above would populate the required env variables with the value from the `github` context and the `pull_request` even object.

If either of the SHA values are not provided they will fall back to the existing `reg-keygen-git-hash-plugin` plugin to try and infer these values from your current setup.
npm package: @netsells/storybook-decorators
Description: This module provides a few helper decorators for your stories.
Latest version: 0.2.0

# Netsells Storybook Decorators

This module provides a few helper decorators for your stories. 

## Decorators

The following decorators are available:

### VerticallyCenteredDecorator

Vertically centers your story markup in the view.

### HorizontallyCenteredDecorator

Horizontally centers your story markup in the view.

### ContainerDecorator

Wraps your story markup in a `.container` class.

## Installation

```sh
yarn add @netsells/storybook-decorators
```

## Usage

Enable globally:

```js
import { VerticallyCenteredDecorator } from '@netsells/storybook-decorators';
import { addDecorator } from '@storybook/vue';

addDecorator(VerticallyCenteredDecorator);
```

Enable in a single story:

```js
import { VerticallyCenteredDecorator } from '@netsells/storybook-decorators';
import MyComponent from '../../../components/MyComponent';

export const myComponent = () => ({
    components: { MyComponent },

    template: '<my-component />',
});

myComponent.story = {
    decorators: [VerticallyCenteredDecorator],
};
```
npm package: @netsells/storybook-directories
Description: A module for generating storybook stories based on directory structure.
Author: Sam Turrell
Latest version: 1.0.1

# Storybook Directories

A module for generating storybook stories based on directory structure.

## Why?

Organisation is key in your storybook, whether it's only visible internally or is part of a public-facing component reference. Keeping your stories categorised will mean you're able to find the components you're looking for a lot easier, and ultimately save time.

What also takes time is figuring out the structure you want, and updating multiple stories with the perfect structure that works for you. This is a lot of duplicate code, just for the sake of formatting.

This module solves this problem by allowing you to control this right from the drag and drop UI of your file system, meaning no code updates are required.

## Installation

```sh
yarn add @netsells/storybook-directories
```

## Usage

Import the package into your storybook config, and update your `configure` statement to pass in the `storybookDirectories` function with a `stories` parameter which matches your `require.context` call.

```js
import storybookDirectories from '@netsells/storybook-directories';

configure(
    storybookDirectories({
        stories: require.context('../stories', true, /\.stories\.js$/),
    }),
    module
);
```

Your stories now no longer need to specify a default export, although if you require it you can simply omit the `title` property. However, if you wish to override the directory structure for a story you can do this by simply specifying a title as you would normally.

Take the following directory structure:

```
stories/
│
├─ 0. Welcome/
│  └─ Welcome.stories.js
│
├─ 1. UI/
│  ├─ Typography.stories.js
│  ├─ Buttons.stories.js
│  └─ Icons.stories.js
│
├── 2. Forms/
│  ├─ Inputs/
│  │  ├─ TextInput.stories.js
│  │  └─ CheckboxInput.test.js
│  └─ ContactForm.stories.js
│
```

Would generate stories with titles in the following format:

```
0. Welcome|Welcome
1. UI|Buttons
1. UI|Icons
1. UI|Typography
2. Forms|Inputs/TextInput
2. Forms|Inputs/CheckboxInput
2. Forms|ContactForm
```

This format matches the Storybook separator formats, and would generator a storybook with grouped sections matching your directory structure.
npm package: @netsells/storybook-essentials
Description: A combined dependency of all storybook official packages used in our projects.
Author: Sam Turrell
Latest version: 6.5.16

# @netsells/storybook-essentials

A combined dependency of all storybook official packages used in our projects. 

Storybook packages follow a consistent versioning strategy, but the problem with this is that no matter what package gets updated, it will trigger a new version of each individual package.

This presents a problem for automatic dependency updates such as dependabot, especially when a project is set up with automated workflows, each package update will trigger a workflow run, causing 8 individual runs for essentially the same changes.

This module allows a single install and dependency update.
npm package: @netsells/storybook-essentials-vue3
Description: A combined dependency of all storybook official packages used in our projects.
Author: Sam Turrell
Latest version: 6.5.16

# @netsells/storybook-essentials-vue3

A combined dependency of all storybook official packages used in our projects. 

Storybook packages follow a consistent versioning strategy, but the problem with this is that no matter what package gets updated, it will trigger a new version of each individual package.

This presents a problem for automatic dependency updates such as dependabot, especially when a project is set up with automated workflows, each package update will trigger a workflow run, causing 8 individual runs for essentially the same changes.

This module allows a single install and dependency update.
npm package: @netsells/storybook-mockdate
Description: This package provides an easy and convenient way to lock your stories at a specific date. This is important in cases where you are performing automated Visual Regression Testing, and a change in date/time may cause false failures.
Author: Sam Turrell
Latest version: 0.3.3

# @netsells/storybook-mockdate

This package provides an easy and convenient way to lock your stories at a specific date. This is important in cases where you are performing automated Visual Regression Testing, and a change in date/time may cause false failures. 

Not only will this lock your stories at a specific date, it will also display that date as an overlay on your story to show the date being mocked.

This decorator is compatible with Vue and React stories.

## Installation

```sh
$ yarn add -D @netsells/storybook-mockdate
``` 

## Usage

### Setup

Provide the decorator in your storybook decorators config:

```js
import withMockdate from '@netsells/storybook-mockdate';

export default [
    withMockdate,
];
```

### Stories

To lock your stories at a specific date, you can simply provide the `mockdate` parameter with your date:

```js
export default {
    parameters: {
        mockdate: new Date('2020-01-14T15:47:18.502Z'), // Any date contructor format will work
    },
};
```

You can also provide a date to specific stories if required:

```js
story.parameters = {
    mockdate: new Date('2020-01-14T15:47:18.502Z'), // Any date contructor format will work
};
```
npm package: @netsells/storybook-nuxt-asyncdata
Description: This package allows you to provide `asyncData` in your stories to mock fetched data in your page components.
Author: Sam Turrell
Latest version: 0.1.2

# @netsells/storybook-nuxt-asyncdata

This package allows you to provide `asyncData` in your stories to mock fetched data in your page components.

## Installation

```sh
$ yarn add -D @netsells/storybook-nuxt-asyncdata
``` 

## Usage

### Stories

Simply import the function from the package and wrap your story definition, then you can provide an `asyncData` method to return your static data in the format you would in your page.

```js
import HomePage from './HomePage';
import mockAsyncData from '@netsells/storybook-nuxt-asyncdata';
import homepageData from '../../../tests/fixtures/homepage-data';
import latestArticles from '../../../tests/fixtures/latest-articles';

export default {
    component: HomePage,
};

export const homePage = (args = {}, { argTypes = {} }) => mockAsyncData({
    props: Object.keys({ ...args, ...argTypes }),

    components: { HomePage },

    asyncData() {
        return {
            page: homepageData,
            latestArticles: latestArticles,
        };
    },

    template: `
        <home-page v-bind="$props" />
    `,
});
```
npm package: @netsells/storybook-nuxt-auth
Description: This package provides an easy and convenient way to mock your nuxt auth state in your stories.
Author: Sam Turrell
Latest version: 0.1.0

# @netsells/storybook-nuxt-auth

This package provides an easy and convenient way to mock your nuxt auth state in your stories.

## Installation

```sh
$ yarn add -D @netsells/storybook-nuxt-auth
``` 

## Usage

### Setup

Provide the decorator in your storybook decorators config:

```js
import withNuxtAuth from '@netsells/storybook-nuxt-auth';

export default [
    withNuxtAuth,
];
```

### Stories

To mock a specific auth config in your stories, you can simply provide the `auth` parameter with your desired data:

```js
export default {
    parameters: {
        auth: {
            loggedIn: true,
            user: {
                first_name: 'Jane',
                last_name: 'Smith',
                email: 'jane.smith@example.com',
            },
        },
    },
};
```

You can also provide auth data to specific stories if required:

```js
story.parameters = {
    auth: {
        loggedIn: true,
        user: {
            first_name: 'Jane',
            last_name: 'Doe',
            email: 'jane.doe@example.com',
        },
    },
};
```

You can add any data here that you would expect to see in the actual `$auth` object provided by `@nuxtjs/auth` in your nuxt application, including callbacks such as `login()` and `loginWith()` if you need to mock auth functionality.

This decorator will wrap your stories in a `NuxtAuth` component, which can be inspected in Vue Dev Tools to see the currently applied auth config.
npm package: @netsells/storybook-router
Description: This package provides an easy and convenient way to provide routes to your Vue-based stories.
Author: Sam Turrell
Latest version: 1.3.0

# @netsells/storybook-router

This package provides an easy and convenient way to provide routes to your Vue-based stories.

## Installation

```sh
$ yarn add -D @netsells/storybook-router
``` 

## Usage

### Setup

Provide the decorator in your storybook decorators config:

```js
import withStorybookRouter from '@netsells/storybook-router';

export default [
    withStorybookRouter,
];
```

### Stories

To register a route for your stories, you can simply provide an array of routes to the `router.routes` parameter like so:

```js
export default {
    parameters: {
        router: {
            routes: [
                {
                    name: 'account',
                    path: '/account',
                },
            ],
        },
    },
};
```

You can also provide routes to specific stories if required: 

```js
story.parameters = {
    router: {
        routes: [
            {
                name: 'account',
                path: '/account',
            },
        ],
    },
};
```

#### Vue router config

You can adjust config values used in the set up of `VueRouter` by passing a `config` object in your parameters.

```js
export default {
    parameters: {
        router: {
            config: {
                mode: 'history',
            },
            routes: [],
        },
    },
};
```

### Testing

When used with the [@netsells/vue-storybook-test-utils](https://github.com/netsells/vue-storybook-test-utils) package, routes will automatically be registered for your tests based on the routes provided in this parameter. This means you don't have to maintain routes for both your tests and stories, and reduces the time spent setting up said tests.
npm package: @netsells/storybook-styled-wrapper
Description: This module allows you to add CSS styles to your story via [vue-styled-components](https://www.npmjs.com/package/vue-styled-components).
Latest version: 0.2.1

# Storybook Styled Wrapper Storybook Decorator

This module allows you to add CSS styles to your story via [vue-styled-components](https://www.npmjs.com/package/vue-styled-components).

## Installation

```sh
yarn add -D @netsells/storybook-styled-wrapper
```

## Usage

Enable globally:

```js
import styledWrapper from '@netsells/storybook-styled-wrapper';

export const decorators = [
    styledWrapper,
];
```

Enable on a per story basis:

```js
import styledWrapper from '@netsells/storybook-styled-wrapper';
import MyComponent from './MyComponent';

// Enable for all stories in this file
export default {
    decorators: [
        styledWrapper,
    ],
};

export const myComponent = () => ({
    // ...component
});

// Enable for single story
myComponent.decorators = [
    styledWrapper,
];
```

Add your CSS via the `wrapperStyles` parameter:

```js
myComponent.parameters = {
    wrapperStyles: `
        @media (min-width: 768px) {
            max-width: 300px;
        }
    `,
};
```

This will created a styled component wrapper around your component with the css you provided. It's recommended that you place this decorator last in your list of decorators in order for it to wrap your story markup itself.

If `wrapperStyles` is not provided for a story, the decorator will be skipped.
npm package: @netsells/storybook-theme
Description: A simple reusable theme module for storybooks included in Netsells projects.
Author: Sam Turrell
Latest version: 3.0.0

# Netsells Storybook Theme

A simple reusable theme module for storybooks included in Netsells projects.

## Usage

```sh
yarn add @netsells/storybook-theme
```

Pull into your storybook `manager.js`:

```js
import '@netsells/storybook-theme';
```
npm package: @netsells/storybook-vue-generate-arg-types
Description: This package provides a single function to generate your `argType` property on your storybook stories based on the props added to your component.
Author: Sam Turrell
Latest version: 1.2.1

# @netsells/storybook-vue-generate-arg-types

This package provides a single function to generate your `argType` property on your storybook stories based on the props added to your component.

## Installation

```bash
$ yarn add -D @netsells/storybook-vue-generate-arg-types
```

## Usage

```js
// MyComponent.stories.js
import MyComponent from './MyComponent';
import generateArgTypes from '@netsells/storybook-vue-generate-arg-types';

export default {
    // ...story config
    argTypes: generateArgTypes(MyComponent),
};
```

If for any reason you'd like to override an arg type, you can pass an additional parameter of overrides:

```js
// MyComponent.stories.js
import MyComponent from './MyComponent';
import generateArgTypes from '@netsells/storybook-vue-generate-arg-types';

export default {
    // ...story config
    argTypes: generateArgTypes(MyComponent, {
        myProp: {
            control: 'number',
            default: 5,
        },
    }),
};
```
npm package: @netsells/storycap-default-background
Description: This module syncs up the background of your project with the backgrounds selected in your stories parameters when used with [@storybook/addon-background](https://www.npmjs.com/package/@storybook/addon-backgrounds).
Latest version: 0.2.1

# Storycap Background Storybook Decorator

This module syncs up the background of your project with the backgrounds selected in your stories parameters when used with [@storybook/addon-background](https://www.npmjs.com/package/@storybook/addon-backgrounds). 

Follow the [@storybook/addon-background](https://www.npmjs.com/package/@storybook/addon-backgrounds) guide for settings up available backgrounds in your stories. This decorator will simply set the background to the value set as `default: true` in your background options when the story is captured by storycap.

## Installation

```sh
yarn add -D @netsells/storycap-default-background
```

## Usage

Enable globally:

```js
import withDefaultBackground from '@netsells/storycap-default-background';

export const decorators = [
    withDefaultBackground,
];
```

Enable on a per story basis:

```js
import withDefaultBackground from '@netsells/storycap-default-background';
import MyComponent from '../../../components/MyComponent';

// Enable for all stories in this file
export default {
    decorators: [
        withDefaultBackground,
    ],
};

export const myComponent = () => ({
    // ...component
});

// Enable for single story
myComponent.decorators = [
    withDefaultBackground,
];
```
npm package: @netsells/storycap-lazy-wait
Description: Helper function to ensure story images have loaded before capturing the story
Author: Sam Turrell
Latest version: 0.1.0

# Storycap Lazy Wait

> Helper function to ensure story images have loaded before capturing the story

When storycap captures a story it doesn't know if there is any lazy loading functionality in your application. Luckily storycap provides a `waitFor` option which can return a promise. The screenshot will not be taken until this promise resolves. This module provides this as a helper functon. It's built with `vue-lazyload` in mind, but can be expanded to be more configurable in future if required.

## Installation

```bash
$ yarn add @netsells/storycap-lazy-wait
```

## Usage

Register the storycap addon in your storybook config as outlined in the docs. Then pull in this module and return it in the storybook parameters `waitFor` option:

```js
import lazyWait from '@netsells/storycap-lazy-wait';

addParameters({
    screenshot: {
        waitFor() {
            return lazyWait();
        },
    },
});
```

If you already have logic in this method you can return a `Promise.all`:

```js
addParameters({
    screenshot: {
        waitFor() {
            const myWaitFunctionality = new Promise((resolve) => {
                // ...logic
            })

            return Promise.all([
                myWaitFunctionality,
                lazyWait(),
            ]);
        },
    },
});
```