# @mmcodemark/fuselage

> Rocket.Chat's React Components Library

Latest version **0.31.35** (published 2023-10-25) · MIT license · 0 weekly downloads

## Install

```sh
npm install @mmcodemark/fuselage
pnpm add @mmcodemark/fuselage
yarn add @mmcodemark/fuselage
bun add @mmcodemark/fuselage
```

## Health

**Score 40/100 (D)** — status: abandoned.

Positive: has types; no vulnerabilities; high maintenance score; high quality score.

Warnings: low downloads; no esm support; pre 1.0.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 0.31.35 |
| Published | 2023-10-25 |
| First published | 2023-06-15 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 9 |
| Unpacked size | 5.2 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 160 |
| Author | Rocket.Chat |
| Maintainers | denis.akimov, mmcodemark-user |

## Links

- npm: https://www.npmjs.com/package/@mmcodemark/fuselage
- Repository: https://github.com/RocketChat/fuselage
- Homepage: https://github.com/RocketChat/fuselage#readme
- Issues: https://github.com/RocketChat/fuselage/issues
- npm.io page: https://npm.io/package/@mmcodemark/fuselage

## Dependencies (9)

- [invariant](https://npm.io/package/invariant.md) ^2.2.4
- [react-aria](https://npm.io/package/react-aria.md) ~3.23.1
- [react-stately](https://npm.io/package/react-stately.md) ~3.17.0
- [@mmcodemark/memo](https://npm.io/package/@mmcodemark/memo.md) ^0.31.22
- [@mmcodemark/styled](https://npm.io/package/@mmcodemark/styled.md) ^0.31.22
- [@mmcodemark/css-in-js](https://npm.io/package/@mmcodemark/css-in-js.md) ^0.31.22
- [@mmcodemark/css-supports](https://npm.io/package/@mmcodemark/css-supports.md) ^0.31.22
- [@mmcodemark/fuselage-tokens](https://npm.io/package/@mmcodemark/fuselage-tokens.md) ^0.31.22
- [react-keyed-flatten-children](https://npm.io/package/react-keyed-flatten-children.md) ^1.3.0

## Recent versions

- 0.31.35 (latest) — 2023-10-25
- 0.31.34 — 2023-10-23
- 0.31.33 — 2023-10-10
- 0.31.32 — 2023-08-18
- 0.31.31 — 2023-08-18
- 0.31.30 — 2023-08-18
- 0.31.29 — 2023-08-16
- 0.31.28 — 2023-08-16
- 0.31.27 — 2023-08-09
- 0.31.26 — 2023-08-09
- 0.31.25 — 2023-08-09
- 0.31.24 — 2023-08-09
- 0.31.23 — 2023-08-09
- 0.31.22 — 2023-06-15
- 0.33.1 — 2023-06-15
- … 1 more at https://npm.io/package/@mmcodemark/fuselage/versions

## README

<!--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`

> Rocket.Chat's React Components Library

---

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

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

<!--/header-->

## Install

<!--install-->

Firstly, install the peer dependencies (prerequisites):

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

# or, if you are using yarn:

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

Add `@mmcodemark/fuselage` as a dependency:

```sh
npm i @mmcodemark/fuselage

# or, if you are using yarn:

yarn add @mmcodemark/fuselage
```

<!--/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)-->

### Component stories

We develop and describe our visual components in the form of stories, manage by a tool called [Storybook](https://storybook.js.org/).
To start developing with Storybook, run:

<!--yarn(storybook)-->

```sh
yarn storybook
```

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

### Usage

Note: If you are using Next.js for development and wish to use Rocket.Chat Fuselage components, you need to dynamically import the component. More on this can be found [here](https://dev.to/vvo/how-to-solve-window-is-not-defined-errors-in-react-and-next-js-5f97#3-third-solution-dynamic-loading).

Usage Example:

```javascript
import dynamic from 'next/dynamic';

export const TextInput = dynamic(
  () => import('@mmcodemark/fuselage').then((module) => module.TextInput),
  { ssr: false }
);
```

---
_Source: https://npm.io/package/@mmcodemark/fuselage · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._