open-index/open-npm huggingface dataset:
npm package: @mmckegg/mutant
Description: Renamed to "mutant".
Author: Matt McKegg
Latest version: 3.12.1

# mutant

Create observables and map them to DOM elements. Massively inspired by [hyperscript](https://github.com/dominictarr/hyperscript) and [`observ-*`](https://github.com/Raynos/observ).

No virtual DOM, just direct observable bindings. Unnecessary garbage collection is avoided by using mutable objects instead of blasting immutable junk all over the place.

## THIS PACKAGE HAS MOVED!

https://www.npmjs.com/package/mutant

(no further changes will be published to @mmckegg/mutant)
npm package: @mmckelvy/apply-migrations
Description: Simple, idempotent database migrations for node-pg
Author: Mark McKelvy
Latest version: 1.0.4

# Apply migrations
Simple, idempotent migrations for [node-pg](https://node-postgres.com/).

## Install
```
npm install @mmckelvy/apply-migrations --save-dev
```

## Suggested usage
For a full example, see the `examples` folder.

Create a directory called `migrations` and add a file called `index.js`.

Create a child directory called `src` and add your migrations to `src` as `.sql` files.  The naming convention for your files is as follows:

```
<order number>[separator]<migration name>.sql
```

Examples of valid filenames:

```
1_base-schema.sql <-- Best practice

2-adjust-column.sql
v003_drop-constraint.sql
4add-3-columns.sql
```

**The only thing that matters is the first number that appears in the filename.**  That will be used to sort the migration files in ascending order.  Using a separator such as `_` is optional, but encouraged for your own readability.

Include the following migration table at the top of your first migration file:

```
create table migration (
  migration_id integer primary key generated by default as identity,
  filename text not null,
  created_at timestamp with time zone default current_timestamp
);
```

The `migration` table will be used to check if a particular migration has already been applied.

Once you have your `src` directory with your migration files set up, import the `applyMigrations` function in `index.js` and apply your migrations:

```
const { Pool } = require('pg');
const applyMigrations = require('@mmckelvy/apply-migrations');

// an instance of a typical node-pg pool.
(async () => {
  const pool = new Pool({
    host: 'localhost',
    database: db,
    port: 5432,
    user: process.env.USER,
    password: null,
    max: 10
  });

  await applyMigrations({
    pool,
    src: `${__dirname}/src` // assumes your migration directory is called 'src'
  });

  await pool.end();
})();

```

## API
### applyMigrations({ pool, src })
Returns `void`.

Executes a sequence of `.sql` files (migrations) in ascending order.  Upon successful execution of each migration, records the migration in a `migration` table.

Notes:
* You will be responsible for instantiating and ending the pool, as well as creating the `migration` table (see suggested usage above).
* If a migration fails, `applyMigrations` will abort immediately.  No further migrations will be applied.

----
#### pool
Type: `object`

A node-pg [pool](https://node-postgres.com/features/pooling) instance.  Generally you'll want to use the same pool parameters as those from your app (i.e. same host, database, port, etc.).

Note that after the migrations run, you should `end` the pool by calling `pool.end()` (see suggested usage above).

#### src
Type: `string`

A path to the directory with your migrations.  It's generally easiest to make this directory a sibling to the script where you call `applyMigrations`.


## Test
```
npm test
```
npm package: @mmckelvy/diff-arrays
Description: Utility for diffing arrays.
Author: Mark McKelvy
Latest version: 1.0.1

# Diff Arrays
Simple utility to diff arrays. Handles arrays of primitives (e.g. strings, numbers) as well as arrays of objects. Can compute a simple difference or a symmetric difference (more on this below).

## Install

    npm install @mmckelvy/diff-arrays

## Usage
Compute a simple difference:

    const diffArrays = require('@mmckelvy/diff-arrays');

    const diffed = diffArrays([1, 2, 3], [2, 3, 4]);
    console.log(diffed); // [1]

Compute a symmetric difference:

    const diffed = diffArrays([1, 2, 3], [2, 3, 4], {symmetric: true});
    console.log(diffed); // [1, 4]

Works with arrays of objects.  Just pass the key on which you want to diff:

    const arr1 = [
      {id: 1, name: 'Joe'},
      {id: 2, name: 'Bill'},
      {id: 3, name: 'Jane'},
    ];

    const arr2 = [
      {id: 2, name: 'Bill'},
      {id: 3, name: 'Jane'},
      {id: 4, name: 'Linda'},
    ];

    const diffed = diffArrays(arr1, arr2, {key: 'id', symmetric: true});
    console.log(diffed); // [{id: 1, name: 'Joe'}, {id: 4, name: 'Linda'}];

## Diffing mechanics and symmetric difference
When diffing two arrays, order matters.  Suppose we have two arrays:

    const a = [1, 2, 3];
    const b = [2, 3, 4];

`diffArrays(a, b)` will return `[1]`, while `diffArrays(b, a)` will return `[4]`.  Why?  Because in the first case, we are asking "what is in array `a` that is not in array `b`?, while in the second case, we are asking "what is in array `b` that is not in array `a`?

If you are looking for the answer to *both* questions, you are looking for the *symmetric difference*: "what is in array `a` that is not in array `b` *and* what is in array `b` that is not in array `a`."  To get the symmetric difference with `diffArrays`, pass `{symmetric: true}` in the options object.

## API
#### diffArrays(arr1, arr2, options)
`arr1` and `arr2` can be arrays of primitives or objects.  If you pass arrays of objects, include the key you want to use for the diff in the `options` argument: `{key: 'someKey}`.  Returns an array with the diffed elements.

* `arr1 {string[] | number[] | Object[]}`
* `arr2 {string[] | number[] | Object[]}`
* `options {Object}`
* `options.key {string} - The key to use to diff an array of objects.`
* `options.symmetric {boolean} - Perform a symmetric diff.`

Returns `{string[] | number[] | Object[]}`

## Testing
This module uses [ava](https://github.com/avajs/ava) for testing.  To run the tests, make sure the dev dependencies are installed and then run:

    npm test

## License
### MIT
npm package: @mmckelvy/errors
Description: A collection of HTTP errors
Author: Mark McKelvy
Latest version: 1.0.4

# Errors
A collection of errors for use with Node / Express.

## Usage
Handle an error in a route handler.

```javascript
const { notFound } = require('@mmckelvy/errors');


async function getUser(req, res, next) {
  try {
    const user = await services.selectUser({userId});

    if (!user) {
      return next(notFound({
        message: `We couldn't find that user.`
      }));
    }

    return res.status(200).json({
      meta: {
        dataFormat: 'object'
      },
      data: user
    });

  } catch (err) {
    next(err);
  }
}

```

## Base HTTP Error Class

```javascript
module.exports = class HttpError extends Error {
  constructor({
    // Client facing props
    statusCode = 500,
    error = 'Internal server error',
    message = 'Something went wrong. Try again later.',

    // Private props (not to be shared with client)
    isOperational = false,
    detail = {}
  } = {}) {
    super();

    this.statusCode = statusCode;
    this.error = error;
    this.message = message;

    this.isOperational = isOperational;
    this.detail = detail;
  }
};
```

## PostgreSQL errors

```javascript
module.exports = {
  uniqueViolation(err) {
    return err.code && err.code === '23505';
  },
  checkViolation(err) {
    return err.code && err.code === '23514';
  },
  invalidDate(err) {
    return err.code && (err.code === '22008' || '22007');
  },
  syntaxError(err) {
    return err.code && err.code === '42601';
  },
  restrictViolation(err) {
    return err.code && err.code === '23001';
  },
  foreignKeyViolation(err) {
    return err.code && err.code === '23503';
  },
  notNullViolation(err) {
    return err.code && err.code === '23502';
  },
  dataException(err) {
    return err.code && /^22.+$/.test(err.code);
  },
  undefinedColumn(err) {
    return err.code && err.code === '42703';
  },
};
```
npm package: @mmckelvy/map-object
Description: Map over an object calling a function on each key / value pair.
Author: Mark McKelvy
Latest version: 1.0.3

# map-object
Map over an object calling a function on each key / val pair.

## Installation
```bash
npm install @mmckelvy/map-object
```

## Usage
```javascript
const mapObject = require('@mmckelvy/map-object');

const obj = {
  apple: 'fruit',
  green: 'color'
};

const mapped = mapObject(obj, (key, val) => {
  return [val, key];
});

/* ->
{
  fruit: 'apple',
  color: 'green'
}
*/
```

## API
### `mapObject(obj, fn, options)`

#### obj `object`

The source object.


#### fn `function`

A function to call on each key / val pair.

function signature is as follows:
#### `fn(key, value, source?)`

##### key `string`

##### value `any`

##### source `object`

The source object.

##### return
An array with `[targetKey, targetValue]` elements.


#### options `object`

##### options.recursive `boolean`

Map over nested objects.


#### return
`object` The mapped object.
npm package: @mmckelvy/psql-sheet
Description: Output psql results to a Google spreadsheet
Author: Mark McKelvy
Latest version: 1.0.1

# psql sheet

Output your psql queries to a Google spreadsheet.

# Usage

## Configure your Google account

1.  Create a Google Cloud Project:
    * Go to Google Cloud Console
    * Click "New Project" and create one
    * Note your Project ID

2.  Enable the necessary APIs:
    * In Cloud Console, go to "APIs & Services" > "Library"
    * Search for and enable:
    * Google Sheets API
    * Google Drive API

3.  Create Service Account credentials:
    * Go to "APIs & Services" > "Credentials"
    * Click "Create Credentials" > "Service Account"
    * Fill in service account details
    * Click "Create and Continue"
    * Click "Done"
    * Find the service account in the credentials page
    * Click on it and go to "Keys" tab
    * Add Key > Create new key > JSON
    * Download the JSON key file
    * Add the JSON key file to your project

## Set up a script to receive your psql query output

Create a .js file, make it an executable (`chmod +x your-file.js`) and instantiate `psqlSheet`.  Pass in the ID of the Sheet you want to use to capture your psql output along with the range and the path to your JSON key file.  Don't forget to add the shebang to the top of the file.

```javascript
#!/usr/bin/env node

const path = require('path');

const psqlSheet = require('psql-sheet');

(async function () {
  await psqlSheet({
    // The ID of your Google Sheet
    spreadsheetId: '1a11vRgR5uZ8oyX9oAgaYqyupnCLbw9ZULzMmuKC7lS4',
     // The range where you want the query results to populate.
    range: 'Sheet1!A1',
     // Your Google service account credentials.
    pathToKeyFile: path.join(__dirname, 'key.json')
  });
})();
```

## Pipe your psql output to your .js script.

```

# connect to your DB

psql -d your-db

# Set the output format to csv with no footers and pipe it to the file you just created.

[local]:5432 yourusername@your-db=# \pset footer off \a \f ',' \o |./your-file.js

```

## Share the Google Sheet with your service account email

Find your service account email under the `client_email` property in your JSON key file.

## Run your queries

```
[local]:5432 yourusername@your-db=# select * from my_table;
```

The results will show up in your spreadsheet.
npm package: @mmckelvy/run-pg-script
Description: Run sql scripts with psql via Node
Author: Mark McKelvy
Latest version: 1.0.1

# run-pg-script
Run Postgres scripts using `psql` the right way.

Applies the appropriate options for running scripts through psql.

## Installation
```bash
npm install @mmckelvy/run-pg-script
```

## Usage
```javascript
const runPgScript = require('run-pg-script');

runPgScript({
  dbName: 'my-db',
  file: `${__dirname}/schema/base-schema.sql`)
});
```

## Default options
Runs your scripts using the following `psql` options:

`--no-psqlrc`: No need for custom formatting if you're just running a script.

`--set ON_ERROR_STOP=1`: Stop the script if there's an error.

`--pset pager=off`: No need for a pager when we're running a script.

`--single-transaction`: Run the script as a single transaction.
npm package: @mmckelvy/serve-compressed
Description: Serve pre-compressed assets from an Node.js / Express server
Author: Mark McKelvy
Latest version: 1.0.1

# serve-compressed
serve-compressed is Express middleware that allows you to serve pre-compressed files.  This is different from the [compression middleware package](http://expressjs.com/en/resources/middleware/compression.html), which compresses files on the fly.  Serving pre-compressed files is faster and less memory intensive than compressing files on the fly, which means your Express server can devote resources to other, more important tasks.

# Install
```shell
npm install @mmckelvy/serve-compressed
```

# Usage
serve-compressed only works with pre-compressed files.  Compress your files during your build process using the [Webpack Compression Plugin](https://webpack.js.org/plugins/compression-webpack-plugin/) or a command line utility like `gzip`.  Once you have your compressed files in the appropriate directory, you can use serve-compressed like so:

```javascript
const path = require('path');
const express = require('express');
const serveCompressed = require('@mmckelvy/serve-compressed');

const app = express();

// Include serveCompressed BEFORE your middleware
app.use(serveCompressed({
  extensions: ['.js', '.css'],
  rootDir: __dirname
}));
app.use('/files', express.static(path.join(__dirname, 'files')));

module.exports = app;
```

Note that serve-compressed expects gzipped files (i.e. files with a `.gz` extension).

# API

## serveCompressed

### Parameters

**extensions** `string[]`

Default: `['.js', '.css']`. An array of file extensions to include when checking for compressed assets.  For example, if you pass `[.js', '.css']` (the default), serve-compressed will check for compressed versions of any .js or .css file requested.

---

**rootDir** `string`

Default: `process.cwd()`. The root directory where your compressed assets are located.


### Returns

`function`

An Express middleware function with the following signature:

```javascript
function serve(req, res, next)
```
npm package: @mmcodemark/css-in-js
Description: Toolset to transpile and use CSS on runtime
Author: Rocket.Chat
Latest version: 0.31.22

<!--header-->

<p align="center">
  <a href="https://rocket.chat" title="Rocket.Chat">
    <img src="https://github.com/RocketChat/Rocket.Chat.Artwork/raw/master/Logos/2020/png/logo-horizontal-red.png" alt="Rocket.Chat" />
  </a>
</p>

# `@mmcodemark/css-in-js`

> Toolset to transpile and use CSS on runtime

---

[![npm@latest](https://img.shields.io/npm/v/@mmcodemark/css-in-js/latest?style=flat-square)](https://www.npmjs.com/package/@mmcodemark/css-in-js/v/latest) [![npm@next](https://img.shields.io/npm/v/@mmcodemark/css-in-js/next?style=flat-square)](https://www.npmjs.com/package/@mmcodemark/css-in-js/v/next) ![npm downloads](https://img.shields.io/npm/dw/@mmcodemark/css-in-js?style=flat-square) ![License: MIT](https://img.shields.io/npm/l/@mmcodemark/css-in-js?style=flat-square)

![deps](https://img.shields.io/librariesio/release/npm/@mmcodemark/css-in-js?style=flat-square) ![npm bundle size](https://img.shields.io/bundlephobia/min/@mmcodemark/css-in-js?style=flat-square)

<!--/header-->

## Install

<!--install-->

Add `@mmcodemark/css-in-js` as a dependency:

```sh
npm i @mmcodemark/css-in-js

# or, if you are using yarn:

yarn add @mmcodemark/css-in-js
```

<!--/install-->

## Contributing

<!--contributing(msg)-->

Contributions, issues, and feature requests are welcome!<br />
Feel free to check the [issues](https://github.com/RocketChat/fuselage/issues).

<!--/contributing(msg)-->

### Building

As this package dependends on others in this monorepo, before anything run the following at the root directory:

<!--yarn(build)-->

```sh
yarn build
```

<!--/yarn(build)-->

### Linting

To ensure the source is matching our coding style, we perform [linting](<https://en.wikipedia.org/wiki/Lint_(software)>).
Before commiting, check if your code fits our style by running:

<!--yarn(lint)-->

```sh
yarn lint
```

<!--/yarn(lint)-->

Some linter warnings and errors can be automatically fixed:

<!--yarn(lint-and-fix)-->

```sh
yarn lint-and-fix
```

<!--/yarn(lint-and-fix)-->

### Running tests

Whenever possible, add tests to describe exactly what your code do. You can run them by yourself:

<!--yarn(test)-->

```sh
yarn test
```

<!--/yarn(test)-->
npm package: @mmcodemark/css-supports
Description: Memoized and SSR-compatible facade of CSS.supports API
Author: Rocket.Chat
Latest version: 0.31.22

<!--header-->

<p align="center">
  <a href="https://rocket.chat" title="Rocket.Chat">
    <img src="https://github.com/RocketChat/Rocket.Chat.Artwork/raw/master/Logos/2020/png/logo-horizontal-red.png" alt="Rocket.Chat" />
  </a>
</p>

# `@mmcodemark/css-supports`

> Memoized and SSR-compatible facade of CSS.supports API

---

[![npm@latest](https://img.shields.io/npm/v/@mmcodemark/css-supports/latest?style=flat-square)](https://www.npmjs.com/package/@mmcodemark/css-supports/v/latest) [![npm@next](https://img.shields.io/npm/v/@mmcodemark/css-supports/next?style=flat-square)](https://www.npmjs.com/package/@mmcodemark/css-supports/v/next) ![npm downloads](https://img.shields.io/npm/dw/@mmcodemark/css-supports?style=flat-square) ![License: MIT](https://img.shields.io/npm/l/@mmcodemark/css-supports?style=flat-square)

![deps](https://img.shields.io/librariesio/release/npm/@mmcodemark/css-supports?style=flat-square) ![npm bundle size](https://img.shields.io/bundlephobia/min/@mmcodemark/css-supports?style=flat-square)

<!--/header-->

## Install

<!--install-->

Add `@mmcodemark/css-supports` as a dependency:

```sh
npm i @mmcodemark/css-supports

# or, if you are using yarn:

yarn add @mmcodemark/css-supports
```

<!--/install-->

## Contributing

<!--contributing(msg)-->

Contributions, issues, and feature requests are welcome!<br />
Feel free to check the [issues](https://github.com/RocketChat/fuselage/issues).

<!--/contributing(msg)-->

### Building

As this package dependends on others in this monorepo, before anything run the following at the root directory:

<!--yarn(build)-->

```sh
yarn build
```

<!--/yarn(build)-->

### Linting

To ensure the source is matching our coding style, we perform [linting](<https://en.wikipedia.org/wiki/Lint_(software)>).
Before commiting, check if your code fits our style by running:

<!--yarn(lint)-->

```sh
yarn lint
```

<!--/yarn(lint)-->

Some linter warnings and errors can be automatically fixed:

<!--yarn(lint-and-fix)-->

```sh
yarn lint-and-fix
```

<!--/yarn(lint-and-fix)-->

### Running tests

Whenever possible, add tests to describe exactly what your code do. You can run them by yourself:

<!--yarn(test)-->

```sh
yarn test
```

<!--/yarn(test)-->
npm package: @mmcodemark/emitter
Description: Event Emitter by Rocket.Chat
Author: Rocket.Chat
Latest version: 0.31.22

<!--header-->

<p align="center">
  <a href="https://rocket.chat" title="Rocket.Chat">
    <img src="https://github.com/RocketChat/Rocket.Chat.Artwork/raw/master/Logos/2020/png/logo-horizontal-red.png" alt="Rocket.Chat" />
  </a>
</p>

# `@mmcodemark/emitter`

> Event Emitter by Rocket.Chat

---

[![npm@latest](https://img.shields.io/npm/v/@mmcodemark/emitter/latest?style=flat-square)](https://www.npmjs.com/package/@mmcodemark/emitter/v/latest) [![npm@next](https://img.shields.io/npm/v/@mmcodemark/emitter/next?style=flat-square)](https://www.npmjs.com/package/@mmcodemark/emitter/v/next) ![npm downloads](https://img.shields.io/npm/dw/@mmcodemark/emitter?style=flat-square) ![License: MIT](https://img.shields.io/npm/l/@mmcodemark/emitter?style=flat-square)

![deps](https://img.shields.io/librariesio/release/npm/@mmcodemark/emitter?style=flat-square) ![npm bundle size](https://img.shields.io/bundlephobia/min/@mmcodemark/emitter?style=flat-square)

<!--/header-->

## Install

<!--install-->

Add `@mmcodemark/emitter` as a dependency:

```sh
npm i @mmcodemark/emitter

# or, if you are using yarn:

yarn add @mmcodemark/emitter
```

<!--/install-->

## Contributing

<!--contributing(msg)-->

Contributions, issues, and feature requests are welcome!<br />
Feel free to check the [issues](https://github.com/RocketChat/fuselage/issues).

<!--/contributing(msg)-->

### Building

As this package dependends on others in this monorepo, before anything run the following at the root directory:

<!--yarn(build)-->

```sh
yarn build
```

<!--/yarn(build)-->

### Linting

To ensure the source is matching our coding style, we perform [linting](<https://en.wikipedia.org/wiki/Lint_(software)>).
Before commiting, check if your code fits our style by running:

<!--yarn(lint)-->

```sh
yarn lint
```

<!--/yarn(lint)-->

Some linter warnings and errors can be automatically fixed:

<!--yarn(lint-and-fix)-->

```sh
yarn lint-and-fix
```

<!--/yarn(lint-and-fix)-->

### Running tests

Whenever possible, add tests to describe exactly what your code do. You can run them by yourself:

<!--yarn(test)-->

```sh
yarn test
```

<!--/yarn(test)-->
npm package: @mmcodemark/eslint-config-alt
Description: ESLint configuration for Rocket.Chat repositories
Author: Rocket.Chat
Latest version: 0.32.0

<!--header-->

<p align="center">
  <a href="https://rocket.chat" title="Rocket.Chat">
    <img src="https://github.com/RocketChat/Rocket.Chat.Artwork/raw/master/Logos/2020/png/logo-horizontal-red.png" alt="Rocket.Chat" />
  </a>
</p>

# `@mmcodemark/eslint-config-alt`

> ESLint configuration for Rocket.Chat repositories

---

[![npm@latest](https://img.shields.io/npm/v/@mmcodemark/eslint-config-alt/latest?style=flat-square)](https://www.npmjs.com/package/@mmcodemark/eslint-config-alt/v/latest) [![npm@next](https://img.shields.io/npm/v/@mmcodemark/eslint-config-alt/next?style=flat-square)](https://www.npmjs.com/package/@mmcodemark/eslint-config-alt/v/next) ![npm downloads](https://img.shields.io/npm/dw/@mmcodemark/eslint-config-alt?style=flat-square) ![License: MIT](https://img.shields.io/npm/l/@mmcodemark/eslint-config-alt?style=flat-square)

![deps](https://img.shields.io/librariesio/release/npm/@mmcodemark/eslint-config-alt?style=flat-square) ![npm bundle size](https://img.shields.io/bundlephobia/min/@mmcodemark/eslint-config-alt?style=flat-square)

<!--/header-->

## Install

<!--install(dev)-->

Firstly, install the peer dependencies (prerequisites):

```sh
npm i -D @babel/eslint-parser eslint prettier

# or, if you are using yarn:

yarn add -D @babel/eslint-parser eslint prettier
```

Add `@mmcodemark/eslint-config-alt` as a dependency:

```sh
npm i -D @mmcodemark/eslint-config-alt

# or, if you are using yarn:

yarn add -D @mmcodemark/eslint-config-alt
```

<!--/install(dev)-->

## Contributing

<!--contributing(msg)-->

Contributions, issues, and feature requests are welcome!<br />
Feel free to check the [issues](https://github.com/RocketChat/fuselage/issues).

<!--/contributing(msg)-->

### Linting

To ensure the source is matching our coding style, we perform [linting](<https://en.wikipedia.org/wiki/Lint_(software)>).
Before commiting, check if your code fits our style by running:

<!--yarn(lint)-->

```sh
yarn lint
```

<!--/yarn(lint)-->

Some linter warnings and errors can be automatically fixed:

<!--yarn(lint-and-fix)-->

```sh
yarn lint-and-fix
```

<!--/yarn(lint-and-fix)-->
npm package: @mmcodemark/fuselage-hooks
Description: React hooks for Fuselage, Rocket.Chat's design system and UI toolkit
Author: Rocket.Chat
Latest version: 0.31.22

<!--header-->

<p align="center">
  <a href="https://rocket.chat" title="Rocket.Chat">
    <img src="https://github.com/RocketChat/Rocket.Chat.Artwork/raw/master/Logos/2020/png/logo-horizontal-red.png" alt="Rocket.Chat" />
  </a>
</p>

# `@mmcodemark/fuselage-hooks`

> React hooks for Fuselage, Rocket.Chat's design system and UI toolkit

---

[![npm@latest](https://img.shields.io/npm/v/@mmcodemark/fuselage-hooks/latest?style=flat-square)](https://www.npmjs.com/package/@mmcodemark/fuselage-hooks/v/latest) [![npm@next](https://img.shields.io/npm/v/@mmcodemark/fuselage-hooks/next?style=flat-square)](https://www.npmjs.com/package/@mmcodemark/fuselage-hooks/v/next) ![react version](https://img.shields.io/npm/dependency-version/@mmcodemark/fuselage-hooks/peer/react?style=flat-square) ![npm downloads](https://img.shields.io/npm/dw/@mmcodemark/fuselage-hooks?style=flat-square) ![License: MIT](https://img.shields.io/npm/l/@mmcodemark/fuselage-hooks?style=flat-square)

![deps](https://img.shields.io/librariesio/release/npm/@mmcodemark/fuselage-hooks?style=flat-square) ![npm bundle size](https://img.shields.io/bundlephobia/min/@mmcodemark/fuselage-hooks?style=flat-square)

<!--/header-->

## Install

<!--install-->

Firstly, install the peer dependencies (prerequisites):

```sh
npm i @mmcodemark/fuselage-tokens react

# or, if you are using yarn:

yarn add @mmcodemark/fuselage-tokens react
```

Add `@mmcodemark/fuselage-hooks` as a dependency:

```sh
npm i @mmcodemark/fuselage-hooks

# or, if you are using yarn:

yarn add @mmcodemark/fuselage-hooks
```

<!--/install-->

## Contributing

<!--contributing(msg)-->

Contributions, issues, and feature requests are welcome!<br />
Feel free to check the [issues](https://github.com/RocketChat/fuselage/issues).

<!--/contributing(msg)-->

### Building

As this package dependends on others in this monorepo, before anything run the following at the root directory:

<!--yarn(build)-->

```sh
yarn build
```

<!--/yarn(build)-->

### Linting

To ensure the source is matching our coding style, we perform [linting](<https://en.wikipedia.org/wiki/Lint_(software)>).
Before commiting, check if your code fits our style by running:

<!--yarn(lint)-->

```sh
yarn lint
```

<!--/yarn(lint)-->

Some linter warnings and errors can be automatically fixed:

<!--yarn(lint-and-fix)-->

```sh
yarn lint-and-fix
```

<!--/yarn(lint-and-fix)-->

### Running tests

Whenever possible, add tests to describe exactly what your code do. You can run them by yourself:

<!--yarn(test)-->

```sh
yarn test
```

<!--/yarn(test)-->
npm package: @mmcodemark/fuselage-polyfills
Description: A bundle of useful poly/ponyfills used by fuselage
Author: Rocket.Chat
Latest version: 0.31.22

<!--header-->

<p align="center">
  <a href="https://rocket.chat" title="Rocket.Chat">
    <img src="https://github.com/RocketChat/Rocket.Chat.Artwork/raw/master/Logos/2020/png/logo-horizontal-red.png" alt="Rocket.Chat" />
  </a>
</p>

# `@mmcodemark/fuselage-polyfills`

> A bundle of useful poly/ponyfills used by fuselage

---

[![npm@latest](https://img.shields.io/npm/v/@mmcodemark/fuselage-polyfills/latest?style=flat-square)](https://www.npmjs.com/package/@mmcodemark/fuselage-polyfills/v/latest) [![npm@next](https://img.shields.io/npm/v/@mmcodemark/fuselage-polyfills/next?style=flat-square)](https://www.npmjs.com/package/@mmcodemark/fuselage-polyfills/v/next) ![npm downloads](https://img.shields.io/npm/dw/@mmcodemark/fuselage-polyfills?style=flat-square) ![License: MIT](https://img.shields.io/npm/l/@mmcodemark/fuselage-polyfills?style=flat-square)

![deps](https://img.shields.io/librariesio/release/npm/@mmcodemark/fuselage-polyfills?style=flat-square) ![npm bundle size](https://img.shields.io/bundlephobia/min/@mmcodemark/fuselage-polyfills?style=flat-square)

<!--/header-->

## Install

<!--install-->

Add `@mmcodemark/fuselage-polyfills` as a dependency:

```sh
npm i @mmcodemark/fuselage-polyfills

# or, if you are using yarn:

yarn add @mmcodemark/fuselage-polyfills
```

<!--/install-->

## Contributing

<!--contributing(msg)-->

Contributions, issues, and feature requests are welcome!<br />
Feel free to check the [issues](https://github.com/RocketChat/fuselage/issues).

<!--/contributing(msg)-->

### Linting

To ensure the source is matching our coding style, we perform [linting](<https://en.wikipedia.org/wiki/Lint_(software)>).
Before commiting, check if your code fits our style by running:

<!--yarn(lint)-->

```sh
yarn lint
```

<!--/yarn(lint)-->

Some linter warnings and errors can be automatically fixed:

<!--yarn(lint-and-fix)-->

```sh
yarn lint-and-fix
```

<!--/yarn(lint-and-fix)-->
npm package: @mmcodemark/fuselage-toastbar
Description: Fuselage ToastBar component
Author: Rocket.Chat
Latest version: 0.31.23

<!--header-->

<p align="center">
  <a href="https://rocket.chat" title="Rocket.Chat">
    <img src="https://github.com/RocketChat/Rocket.Chat.Artwork/raw/master/Logos/2020/png/logo-horizontal-red.png" alt="Rocket.Chat" />
  </a>
</p>

# `@mmcodemark/fuselage-toastbar`

> Fuselage ToastBar component

---

[![npm@latest](https://img.shields.io/npm/v/@mmcodemark/fuselage-toastbar/latest?style=flat-square)](https://www.npmjs.com/package/@mmcodemark/fuselage-toastbar/v/latest) [![npm@next](https://img.shields.io/npm/v/@mmcodemark/fuselage-toastbar/next?style=flat-square)](https://www.npmjs.com/package/@mmcodemark/fuselage-toastbar/v/next) ![react version](https://img.shields.io/npm/dependency-version/@mmcodemark/fuselage-toastbar/peer/react?style=flat-square) [![Storybook](https://cdn.jsdelivr.net/gh/storybookjs/brand@master/badge/badge-storybook.svg)](https://rocketchat.github.io/fuselage/fuselage-toastbar) ![npm downloads](https://img.shields.io/npm/dw/@mmcodemark/fuselage-toastbar?style=flat-square) ![License: MIT](https://img.shields.io/npm/l/@mmcodemark/fuselage-toastbar?style=flat-square)

![deps](https://img.shields.io/librariesio/release/npm/@mmcodemark/fuselage-toastbar?style=flat-square) ![npm bundle size](https://img.shields.io/bundlephobia/min/@mmcodemark/fuselage-toastbar?style=flat-square)

<!--/header-->

## Install

<!--install-->

Firstly, install the peer dependencies (prerequisites):

```sh
npm i @mmcodemark/fuselage @mmcodemark/fuselage-hooks @mmcodemark/fuselage-polyfills @mmcodemark/styled react react-dom

# or, if you are using yarn:

yarn add @mmcodemark/fuselage @mmcodemark/fuselage-hooks @mmcodemark/fuselage-polyfills @mmcodemark/styled react react-dom
```

Add `@mmcodemark/fuselage-toastbar` as a dependency:

```sh
npm i @mmcodemark/fuselage-toastbar

# or, if you are using yarn:

yarn add @mmcodemark/fuselage-toastbar
```

<!--/install-->

## Contributing

<!--contributing(msg)-->

Contributions, issues, and feature requests are welcome!<br />
Feel free to check the [issues](https://github.com/RocketChat/fuselage/issues).

<!--/contributing(msg)-->

### Building

As this package dependends on others in this monorepo, before anything run the following at the root directory:

<!--yarn(build)-->

```sh
yarn build
```

<!--/yarn(build)-->

### Linting

To ensure the source is matching our coding style, we perform [linting](<https://en.wikipedia.org/wiki/Lint_(software)>).
Before commiting, check if your code fits our style by running:

<!--yarn(lint)-->

```sh
yarn lint
```

<!--/yarn(lint)-->

Some linter warnings and errors can be automatically fixed:

<!--yarn(lint-and-fix)-->

```sh
yarn lint-and-fix
```

<!--/yarn(lint-and-fix)-->

### Running tests

Whenever possible, add tests to describe exactly what your code do. You can run them by yourself:

<!--yarn(test)-->

```sh
yarn test
```

<!--/yarn(test)-->
npm package: @mmcodemark/fuselage-tokens
Description: Design tokens for Fuselage, Rocket.Chat's design system
Author: Rocket.Chat
Latest version: 0.31.22

<!--header-->

<p align="center">
  <a href="https://rocket.chat" title="Rocket.Chat">
    <img src="https://github.com/RocketChat/Rocket.Chat.Artwork/raw/master/Logos/2020/png/logo-horizontal-red.png" alt="Rocket.Chat" />
  </a>
</p>

# `@mmcodemark/fuselage-tokens`

> Design tokens for Fuselage, Rocket.Chat's design system

---

[![npm@latest](https://img.shields.io/npm/v/@mmcodemark/fuselage-tokens/latest?style=flat-square)](https://www.npmjs.com/package/@mmcodemark/fuselage-tokens/v/latest) [![npm@next](https://img.shields.io/npm/v/@mmcodemark/fuselage-tokens/next?style=flat-square)](https://www.npmjs.com/package/@mmcodemark/fuselage-tokens/v/next) ![npm downloads](https://img.shields.io/npm/dw/@mmcodemark/fuselage-tokens?style=flat-square) ![License: MIT](https://img.shields.io/npm/l/@mmcodemark/fuselage-tokens?style=flat-square)

![deps](https://img.shields.io/librariesio/release/npm/@mmcodemark/fuselage-tokens?style=flat-square) ![npm bundle size](https://img.shields.io/bundlephobia/min/@mmcodemark/fuselage-tokens?style=flat-square)

<!--/header-->

## Install

<!--install-->

Add `@mmcodemark/fuselage-tokens` as a dependency:

```sh
npm i @mmcodemark/fuselage-tokens

# or, if you are using yarn:

yarn add @mmcodemark/fuselage-tokens
```

<!--/install-->

## Contributing

<!--contributing(msg)-->

Contributions, issues, and feature requests are welcome!<br />
Feel free to check the [issues](https://github.com/RocketChat/fuselage/issues).

<!--/contributing(msg)-->

### Building

As this package dependends on others in this monorepo, before anything run the following at the root directory:

<!--yarn(build)-->

```sh
yarn build
```

<!--/yarn(build)-->

### Linting

To ensure the source is matching our coding style, we perform [linting](<https://en.wikipedia.org/wiki/Lint_(software)>).
Before commiting, check if your code fits our style by running:

<!--yarn(lint)-->

```sh
yarn lint
```

<!--/yarn(lint)-->

Some linter warnings and errors can be automatically fixed:

<!--yarn(lint-and-fix)-->

```sh
yarn lint-and-fix
```

<!--/yarn(lint-and-fix)-->
npm package: @mmcodemark/layout
Description: Shared Application Layout Components
Author: Rocket.Chat
Latest version: 0.31.22

<!--header-->

<p align="center">
  <a href="https://rocket.chat" title="Rocket.Chat">
    <img src="https://github.com/RocketChat/Rocket.Chat.Artwork/raw/master/Logos/2020/png/logo-horizontal-red.png" alt="Rocket.Chat" />
  </a>
</p>

# `@mmcodemark/layout`

> Shared Application Layout Components

---

[![npm@latest](https://img.shields.io/npm/v/@mmcodemark/layout/latest?style=flat-square)](https://www.npmjs.com/package/@mmcodemark/layout/v/latest) [![npm@next](https://img.shields.io/npm/v/@mmcodemark/layout/next?style=flat-square)](https://www.npmjs.com/package/@mmcodemark/layout/v/next) ![react version](https://img.shields.io/npm/dependency-version/@mmcodemark/layout/peer/react?style=flat-square) [![Storybook](https://cdn.jsdelivr.net/gh/storybookjs/brand@master/badge/badge-storybook.svg)](https://rocketchat.github.io/fuselage/layout) ![npm downloads](https://img.shields.io/npm/dw/@mmcodemark/layout?style=flat-square) ![License: MIT](https://img.shields.io/npm/l/@mmcodemark/layout?style=flat-square)

![deps](https://img.shields.io/librariesio/release/npm/@mmcodemark/layout?style=flat-square) ![npm bundle size](https://img.shields.io/bundlephobia/min/@mmcodemark/layout?style=flat-square)

<!--/header-->

## Install

<!--install-->

Firstly, install the peer dependencies (prerequisites):

```sh
npm i @mmcodemark/fuselage react react-dom react-i18next

# or, if you are using yarn:

yarn add @mmcodemark/fuselage react react-dom react-i18next
```

Add `@mmcodemark/layout` as a dependency:

```sh
npm i @mmcodemark/layout

# or, if you are using yarn:

yarn add @mmcodemark/layout
```

<!--/install-->

## Contributing

<!--contributing(msg)-->

Contributions, issues, and feature requests are welcome!<br />
Feel free to check the [issues](https://github.com/RocketChat/fuselage/issues).

<!--/contributing(msg)-->

### Building

As this package dependends on others in this monorepo, before anything run the following at the root directory:

<!--yarn(build)-->

```sh
yarn build
```

<!--/yarn(build)-->

### Linting

To ensure the source is matching our coding style, we perform [linting](<https://en.wikipedia.org/wiki/Lint_(software)>).
Before commiting, check if your code fits our style by running:

<!--yarn(lint)-->

```sh
yarn lint
```

<!--/yarn(lint)-->

Some linter warnings and errors can be automatically fixed:

<!--yarn(lint-and-fix)-->

```sh
yarn lint-and-fix
```

<!--/yarn(lint-and-fix)-->

### Running tests

Whenever possible, add tests to describe exactly what your code do. You can run them by yourself:

<!--yarn(test)-->

```sh
yarn test
```

<!--/yarn(test)-->
npm package: @mmcodemark/logo
Description: Rocket.Chat logo package
Author: Rocket.Chat
Latest version: 0.31.23

<!--header-->

<p align="center">
  <a href="https://rocket.chat" title="Rocket.Chat">
    <img src="https://github.com/RocketChat/Rocket.Chat.Artwork/raw/master/Logos/2020/png/logo-horizontal-red.png" alt="Rocket.Chat" />
  </a>
</p>

# `@mmcodemark/logo`

> Rocket.Chat logo package

---

[![npm@latest](https://img.shields.io/npm/v/@mmcodemark/logo/latest?style=flat-square)](https://www.npmjs.com/package/@mmcodemark/logo/v/latest) [![npm@next](https://img.shields.io/npm/v/@mmcodemark/logo/next?style=flat-square)](https://www.npmjs.com/package/@mmcodemark/logo/v/next) ![react version](https://img.shields.io/npm/dependency-version/@mmcodemark/logo/peer/react?style=flat-square) ![npm downloads](https://img.shields.io/npm/dw/@mmcodemark/logo?style=flat-square) ![License: MIT](https://img.shields.io/npm/l/@mmcodemark/logo?style=flat-square)

![deps](https://img.shields.io/librariesio/release/npm/@mmcodemark/logo?style=flat-square) ![npm bundle size](https://img.shields.io/bundlephobia/min/@mmcodemark/logo?style=flat-square)

<!--/header-->

## Install

<!--install-->

Firstly, install the peer dependencies (prerequisites):

```sh
npm i react react-dom

# or, if you are using yarn:

yarn add react react-dom
```

Add `@mmcodemark/logo` as a dependency:

```sh
npm i @mmcodemark/logo

# or, if you are using yarn:

yarn add @mmcodemark/logo
```

<!--/install-->

## Contributing

<!--contributing(msg)-->

Contributions, issues, and feature requests are welcome!<br />
Feel free to check the [issues](https://github.com/RocketChat/fuselage/issues).

<!--/contributing(msg)-->

### Building

As this package dependends on others in this monorepo, before anything run the following at the root directory:

<!--yarn(build)-->

```sh
yarn build
```

<!--/yarn(build)-->

### Linting

To ensure the source is matching our coding style, we perform [linting](<https://en.wikipedia.org/wiki/Lint_(software)>).
Before commiting, check if your code fits our style by running:

<!--yarn(lint)-->

```sh
yarn lint
```

<!--/yarn(lint)-->

Some linter warnings and errors can be automatically fixed:

<!--yarn(lint-and-fix)-->

```sh
yarn lint-and-fix
```

<!--/yarn(lint-and-fix)-->

### Running tests

Whenever possible, add tests to describe exactly what your code do. You can run them by yourself:

<!--yarn(test)-->

```sh
yarn test
```

<!--/yarn(test)-->
npm package: @mmcodemark/memo
Description: Memoization utilities
Author: Rocket.Chat
Latest version: 0.31.23

<!--header-->

<p align="center">
  <a href="https://rocket.chat" title="Rocket.Chat">
    <img src="https://github.com/RocketChat/Rocket.Chat.Artwork/raw/master/Logos/2020/png/logo-horizontal-red.png" alt="Rocket.Chat" />
  </a>
</p>

# `@mmcodemark/memo`

> Memoization utilities

---

[![npm@latest](https://img.shields.io/npm/v/@mmcodemark/memo/latest?style=flat-square)](https://www.npmjs.com/package/@mmcodemark/memo/v/latest) [![npm@next](https://img.shields.io/npm/v/@mmcodemark/memo/next?style=flat-square)](https://www.npmjs.com/package/@mmcodemark/memo/v/next) ![npm downloads](https://img.shields.io/npm/dw/@mmcodemark/memo?style=flat-square) ![License: MIT](https://img.shields.io/npm/l/@mmcodemark/memo?style=flat-square)

![deps](https://img.shields.io/librariesio/release/npm/@mmcodemark/memo?style=flat-square) ![npm bundle size](https://img.shields.io/bundlephobia/min/@mmcodemark/memo?style=flat-square)

<!--/header-->

## Install

<!--install-->

Add `@mmcodemark/memo` as a dependency:

```sh
npm i @mmcodemark/memo

# or, if you are using yarn:

yarn add @mmcodemark/memo
```

<!--/install-->

## Contributing

<!--contributing(msg)-->

Contributions, issues, and feature requests are welcome!<br />
Feel free to check the [issues](https://github.com/RocketChat/fuselage/issues).

<!--/contributing(msg)-->

### Building

As this package dependends on others in this monorepo, before anything run the following at the root directory:

<!--yarn(build)-->

```sh
yarn build
```

<!--/yarn(build)-->

### Linting

To ensure the source is matching our coding style, we perform [linting](<https://en.wikipedia.org/wiki/Lint_(software)>).
Before commiting, check if your code fits our style by running:

<!--yarn(lint)-->

```sh
yarn lint
```

<!--/yarn(lint)-->

Some linter warnings and errors can be automatically fixed:

<!--yarn(lint-and-fix)-->

```sh
yarn lint-and-fix
```

<!--/yarn(lint-and-fix)-->
npm package: @mmcodemark/message-parser
Description: Rocket.Chat parser for messages
Author: Rocket.Chat
Latest version: 0.31.22

<!--header-->

<p align="center">
  <a href="https://rocket.chat" title="Rocket.Chat">
    <img src="https://github.com/RocketChat/Rocket.Chat.Artwork/raw/master/Logos/2020/png/logo-horizontal-red.png" alt="Rocket.Chat" />
  </a>
</p>

# `@mmcodemark/message-parser`

> Rocket.Chat parser for messages

---

[![npm@latest](https://img.shields.io/npm/v/@mmcodemark/message-parser/latest?style=flat-square)](https://www.npmjs.com/package/@mmcodemark/message-parser/v/latest) [![npm@next](https://img.shields.io/npm/v/@mmcodemark/message-parser/next?style=flat-square)](https://www.npmjs.com/package/@mmcodemark/message-parser/v/next) ![npm downloads](https://img.shields.io/npm/dw/@mmcodemark/message-parser?style=flat-square) ![License: MIT](https://img.shields.io/npm/l/@mmcodemark/message-parser?style=flat-square)

![deps](https://img.shields.io/librariesio/release/npm/@mmcodemark/message-parser?style=flat-square) ![npm bundle size](https://img.shields.io/bundlephobia/min/@mmcodemark/message-parser?style=flat-square)

<!--/header-->

## Description

Rocket.Chat grammar with the purpose of parsing the messages of the rocket chat, converting text to an AST tree.

The grammar provides support for markdown, mentions and emojis.

## Supported markup

- quotes
- bold/italic/strike
- ordered lists
- unordered lists
- task lists
- phone numbers
- mentions
- emoji
- colors
- URI's
- mentions users/channels

## Contributing

<!--contributing(msg)-->

Contributions, issues, and feature requests are welcome!<br />
Feel free to check the [issues](https://github.com/RocketChat/fuselage/issues).

<!--/contributing(msg)-->

Whenever you find a grammar-related bug, start by inserting the test case.

We are open to other tags/markups, as long as they don't generate unexpected behavior.

## Observations and known issues

- Nested lists are unsupported
- `URL` rule doesn't allow whitespace, `(`, or `)`
npm package: @mmcodemark/mp3-encoder
Description: A LAME encoder to be used in web workers
Author: Rocket.Chat
Latest version: 0.31.22

<!--header-->

<p align="center">
  <a href="https://rocket.chat" title="Rocket.Chat">
    <img src="https://github.com/RocketChat/Rocket.Chat.Artwork/raw/master/Logos/2020/png/logo-horizontal-red.png" alt="Rocket.Chat" />
  </a>
</p>

# `@mmcodemark/mp3-encoder`

> A LAME encoder to be used in web workers

---

[![npm@latest](https://img.shields.io/npm/v/@mmcodemark/mp3-encoder/latest?style=flat-square)](https://www.npmjs.com/package/@mmcodemark/mp3-encoder/v/latest) [![npm@next](https://img.shields.io/npm/v/@mmcodemark/mp3-encoder/next?style=flat-square)](https://www.npmjs.com/package/@mmcodemark/mp3-encoder/v/next) ![npm downloads](https://img.shields.io/npm/dw/@mmcodemark/mp3-encoder?style=flat-square) ![License: MIT](https://img.shields.io/npm/l/@mmcodemark/mp3-encoder?style=flat-square)

![deps](https://img.shields.io/librariesio/release/npm/@mmcodemark/mp3-encoder?style=flat-square) ![npm bundle size](https://img.shields.io/bundlephobia/min/@mmcodemark/mp3-encoder?style=flat-square)

<!--/header-->

## Install

<!--install-->

Add `@mmcodemark/mp3-encoder` as a dependency:

```sh
npm i @mmcodemark/mp3-encoder

# or, if you are using yarn:

yarn add @mmcodemark/mp3-encoder
```

<!--/install-->

## Contributing

<!--contributing(msg)-->

Contributions, issues, and feature requests are welcome!<br />
Feel free to check the [issues](https://github.com/RocketChat/fuselage/issues).

<!--/contributing(msg)-->

### Building

As this package dependends on others in this monorepo, before anything run the following at the root directory:

<!--yarn(build)-->

```sh
yarn build
```

<!--/yarn(build)-->

### Linting

To ensure the source is matching our coding style, we perform [linting](<https://en.wikipedia.org/wiki/Lint_(software)>).
Before commiting, check if your code fits our style by running:

<!--yarn(lint)-->

```sh
yarn lint
```

<!--/yarn(lint)-->

Some linter warnings and errors can be automatically fixed:

<!--yarn(lint-and-fix)-->

```sh
yarn lint-and-fix
```

<!--/yarn(lint-and-fix)-->

### Running tests

Whenever possible, add tests to describe exactly what your code do. You can run them by yourself:

<!--yarn(test)-->

```sh
yarn test
```

<!--/yarn(test)-->
npm package: @mmcodemark/onboarding-ui
Description: Set of components and functions for the onboarding experience on Rocket.Chat
Author: Rocket.Chat
Latest version: 0.31.22

<!--header-->

<p align="center">
  <a href="https://rocket.chat" title="Rocket.Chat">
    <img src="https://github.com/RocketChat/Rocket.Chat.Artwork/raw/master/Logos/2020/png/logo-horizontal-red.png" alt="Rocket.Chat" />
  </a>
</p>

# `@mmcodemark/onboarding-ui`

> Set of components and functions for the onboarding experience on Rocket.Chat

---

[![npm@latest](https://img.shields.io/npm/v/@mmcodemark/onboarding-ui/latest?style=flat-square)](https://www.npmjs.com/package/@mmcodemark/onboarding-ui/v/latest) [![npm@next](https://img.shields.io/npm/v/@mmcodemark/onboarding-ui/next?style=flat-square)](https://www.npmjs.com/package/@mmcodemark/onboarding-ui/v/next) ![react version](https://img.shields.io/npm/dependency-version/@mmcodemark/onboarding-ui/peer/react?style=flat-square) [![Storybook](https://cdn.jsdelivr.net/gh/storybookjs/brand@master/badge/badge-storybook.svg)](https://rocketchat.github.io/fuselage/onboarding-ui) ![npm downloads](https://img.shields.io/npm/dw/@mmcodemark/onboarding-ui?style=flat-square) ![License: MIT](https://img.shields.io/npm/l/@mmcodemark/onboarding-ui?style=flat-square)

![deps](https://img.shields.io/librariesio/release/npm/@mmcodemark/onboarding-ui?style=flat-square) ![npm bundle size](https://img.shields.io/bundlephobia/min/@mmcodemark/onboarding-ui?style=flat-square)

<!--/header-->

## Install

<!--install-->

Firstly, install the peer dependencies (prerequisites):

```sh
npm i @mmcodemark/fuselage @mmcodemark/fuselage-hooks @mmcodemark/fuselage-polyfills @mmcodemark/icons @mmcodemark/layout @mmcodemark/logo @mmcodemark/styled react react-dom react-i18next

# or, if you are using yarn:

yarn add @mmcodemark/fuselage @mmcodemark/fuselage-hooks @mmcodemark/fuselage-polyfills @mmcodemark/icons @mmcodemark/layout @mmcodemark/logo @mmcodemark/styled react react-dom react-i18next
```

Add `@mmcodemark/onboarding-ui` as a dependency:

```sh
npm i @mmcodemark/onboarding-ui

# or, if you are using yarn:

yarn add @mmcodemark/onboarding-ui
```

<!--/install-->

## Contributing

<!--contributing(msg)-->

Contributions, issues, and feature requests are welcome!<br />
Feel free to check the [issues](https://github.com/RocketChat/fuselage/issues).

<!--/contributing(msg)-->

### Building

As this package dependends on others in this monorepo, before anything run the following at the root directory:

<!--yarn(build)-->

```sh
yarn build
```

<!--/yarn(build)-->

### Linting

To ensure the source is matching our coding style, we perform [linting](<https://en.wikipedia.org/wiki/Lint_(software)>).
Before commiting, check if your code fits our style by running:

<!--yarn(lint)-->

```sh
yarn lint
```

<!--/yarn(lint)-->

Some linter warnings and errors can be automatically fixed:

<!--yarn(lint-and-fix)-->

```sh
yarn lint-and-fix
```

<!--/yarn(lint-and-fix)-->

### Running tests

Whenever possible, add tests to describe exactly what your code do. You can run them by yourself:

<!--yarn(test)-->

```sh
yarn test
```

<!--/yarn(test)-->