@intxlog/iuilib NPM

IUILIB

Simple React Component Library

Demo the components here using Storybook

Getting Started

Before you start, please understand that this project is still in early development. PRs and feature requests are welcome.

npm install --save @intxlog/iuilib

Once installed, you can import components

import { Button } from '@intxlog/iuilib';

Then import the css file in the root of your application

import '@intxlog/iuilib/dist/main.css';

Development

Components can be developed using storybook. Using npm run start will run storybook in your local development environment and you can view/develop components real time.

Linking

To view components in another project you can use npm link. 1. Use npm run start-linked in the react-ui-library app command line.

This will create a symlink in the global folder {prefix}/lib/node_modules/<package> that links to the package where the npm link command was executed and create a production build of the react-ui-library everytime a file is changed. This will allow you to develop components in other projects in real-time assuming your project is equipped to handle HMR. 2. In the project you want to use the react-ui-library in, run npm link @intxlog/iuilib .

Testing

Jest is used to test the components. There are several commands that can be run to help you test.

npm run test - watches files and only run tests on the files that have been changed since the last commit
npm run test-all - watches files and tests on ALL files
npm run test-all-coverage - watches files and tests on ALL files along with generating a coverage report
npm run test-cover - Generates a coverage report

Theming

Components can be themed by including the folliwing snippet in your CSS. Then it is just a matter of changing the values to the desired values. The values displayed are the default values.

:root {
  --colorPrimaryBase: #073451;
  --colorPrimaryLight: #214E6B;
  --colorPrimaryDark: #001B38;
  --colorPrimaryFaded: #628397;
  --colorPrimaryTrans: rgba(7, 51, 80, 0.5);
  --colorSecondaryBase: #e3761c;
  --colorSecondaryLight: #FD9036;
  --colorSecondaryDark: #CA5D03;
  --colorSecondaryTrans: rgba(227, 118, 28, 0.5);
  --colorFormInputPlaceholder: rgba(44, 44, 44, .5);
  --colorFormInputFontColor: #474747;
}

Components

Modal

The Modal component can be included in a project by placing the component once somewhere in your React app, preferably in the root of your app. The component is designed to be used with redux/state so that close function that can be passed in modifies the isOpen prop outside of the component itself.