Imposium Component Library

A react component library for streamlining front end Imposium apps.

Installing via NPM

npm i @imposium-hub/components -s

How to develop or pull in components locally

If you are developing components or you are working on a fresh project in parallel with components, you may not want to have to go through the NPM publication process everytime you make changes. You can work locally by taking advantage of the npm link feature, for more detailed info on this see: link docs.

To make a symlink for the package locally run the following in the root of this repo:

npm link

Then in the root directory of the project you want to test with run:

npm link @imposium-hub/components

How to develop the library

To get started, first install the library dependencies:

npm i --legacy-peer-deps

Run the start script to build the library, and watch the source files for changes:

npm start

To lint the project, run:

npm run lint-fix

To build the project without watching for changes, run:

npm run build

How to release a new version of to NPM

To release a new version of the library, make sure you are on the master branch, and then run the following commands:

npm login

this will trigger to login to nodejs then

npm run release-as

This will lint & build the library, then use np to deploy a new version to npm & github. Follow the steps in np to finish the release. If either the build or the lint fails, the release will be cancelled.

How to bundle components in your project

To import a react component in your project, use the following syntax to support tree-shaking:

import * as React from 'React';
import { render } from 'react-dom';
import { ImposiumHeader } from '@imposium-hub/components';

render(
    <ImposiumHeader
        accessData = {...}
        activeOrganization = {...}
        onOrganizationChange = {(id: string) => {...}}
        logout = {() => {...}} />
);

How to bundle styles in your project via LESS

To import the LESS for the component library, use one of the following imports:

@import "your_project_path/node_modules/@imposium-hub/components/dist/styles.less";

Right now styles are shipped as a single bundle however as the library grows in size & complexity individual CSS bundles per component may added at a later time.

Storybook

To run the storybook UI at localhost:6066, run:

npm run storybook

This will run a clean build of the component library, and spin up the storybook UI.