RocketChat
@mmcodemark/fuselage
Rocket.Chat's React Components Library
Install
Firstly, install the peer dependencies (prerequisites):
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-virtuosoAdd @mmcodemark/fuselage as a dependency:
npm i @mmcodemark/fuselage
# or, if you are using yarn:
yarn add @mmcodemark/fuselageContributing
Contributions, issues, and feature requests are welcome!
Feel free to check the issues.
Building
As this package dependends on others in this monorepo, before anything run the following at the root directory:
yarn buildLinting
To ensure the source is matching our coding style, we perform linting. Before commiting, check if your code fits our style by running:
yarn lintSome linter warnings and errors can be automatically fixed:
yarn lint-and-fixRunning tests
Whenever possible, add tests to describe exactly what your code do. You can run them by yourself:
yarn testComponent stories
We develop and describe our visual components in the form of stories, manage by a tool called Storybook. To start developing with Storybook, run:
yarn storybookUsage
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.
Usage Example:
import dynamic from 'next/dynamic';
export const TextInput = dynamic(
() => import('@mmcodemark/fuselage').then((module) => module.TextInput),
{ ssr: false }
);