Mattress Firm Component Library
Changelog
Components
Getting Started
Icons
Readme🚀 Getting started✨ Developer experience💅 Style management
Styling
Wrappers

⚛️ Mattress Firm Component Library ⚛️

🚀 Getting started

  1. Install NodeJS. Use a node version manager such as nvm. Currently this repo targets Node 18.15.0
  2. Install yarn.
  3. Run yarn to install dependencies
  4. Run yarn dev to start development mode

Documentation

Checkout the component library in action!

Installation

  • Follow the steps in the wiki to learn how to setup and install this package
  • If you've already setup your machine to install this package, then run yarn add @mfrm/mfcl in your terminal

👾 Usage

import React, { Component } from 'react'
import MyComponent from '@mfrm/mfcl/MyComponent'


...


<MyComponent prop="yes please" />
  • Note - webpack should automatically treeshake the components not used.

✨ Developer experience

  • yarn start or yarn dev - Starts the documentation at http://localhost:4000/
  • yarn watch - rollup watches any changes (not really needed)
  • yarn package - builds the component library
  • yarn build:docz - builds the docs
  • yarn test - runs any tests
  • yarn plop - see below

💅 Style management

CSS Modules

Docz

The docs are built with ❤️ from docz

Create a new component with Plop Component Generator

  1. yarn plop and follow the prompt or yarn plop MyComponent will generate MyComponent.jsx, myComponent.module.scss, MyComponent.test.js, and MyComponent.mdx
  2. Update package.json according to semver.
  3. Give a description of what changed in CHANGELOG.mdx followed by who made the changes.
  4. Profit 💰

Automatic code formatting

prettier is an opinionated code formatter aiming to provide codebase consistency when multiple developers work on the same project. The main reason behind adopting Prettier is to stop all the on-going debates over coding styles.

Linting

Linters are tools that analyze source code to flag programming errors, bugs, stylistic errors, and suspicious constructs.