@pschaubroeck/ui-framework v1.1.0

UI Framework

UI Framework is a wrapper for react-bootstrap using themed Bootstrap 4 css, created as re-useable/accessible components for BusinesSolver react applications.

Live Documentation

What's New

• v1 - initial components/documentation

Getting Started

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes. See deployment for notes on how to deploy the project on a live system.

Notable Dependencies

• react-bootstrap
• react-datepicker
• react-hook-form
• Storybook

Coding style

eslint, stylelint, and Prettier are setup in the project. Even if you have the code formatted ugly, prettier will format the code for you.

• Git hooks are pre-setup, eslint, stylelint, and Prettier will run automatically on commit.

• Running eslint/stylelint manually:

  cd <project directory>
  npm run lint

• Running Prettier manually:

  cd <project directory>
  npm run format

Installing

After cloning the project, run the following command(s)

• install project dependencies

  cd <project directory>
  yarn

Running the app locally

cd <project directory>
npm run storybook

Unit Tests

Unit testing uses a combination of jest, and enzyme. Test files should be packaged with the components themselves, and end with a .test.js suffix.

Test Structure

• Component
  • defaultProps
    • tests validity of default props
    • tests validity of custom props
  • Data types
    • tests validity of PropTypes
  • Events
  • Conditionals
    • tests for conditional rendering/logic inside components
  • States
    • tests various component states

Running Tests

• All tests

  cd <project directory>
  npm run test

• Running single test files

  cd <project directory>
  npm run test -- <file prefix>.test.js

• Debugging tests with console.log

  • need to set verbose flag to false
  • ex) npm run test -- --verbose=false

Builds for deployment

Deployments consist of

• the component library
  • the component files
  • bootstrap themed css file
• a static storybook to be hosted externally from the library itself.

cd <project directory>
npm run format:build
npm run lint:build
npm run build
npm run storybook:build
npm run test:coverage