tn-ui-library

A UI library for use across TripNinja apps. Built with React Typescript and Bootstrap.

View our storybook page to visualize the components in all of their variants and states.

Installation

npm install tn-ui-library
# or
yarn add tn-ui-library

Setup

These components are built using bootstrap, and react, so you'll need to have those packages installed.

Run the following command to install peer dependencies if not already in your project:

npm install react react-dom bootstrap

Make sure you have bootstrap css and this library's css imported in you App so that the styling is applied properly

import "bootstrap/dist/css/bootstrap.min.css";
import "tn-ui-library/css";

You can override tn-ui-library css classes by specifying your own values and importing your own css file above the tn-ui-library css import.

import "bootstrap/dist/css/bootstrap.min.css";
import "path/to/your/custom.css";
import "tn-ui-library/css";

Important:

Some components from this library use bootstrap JS directly so it's best to remove imports of bootstrap js (for example: import "bootstrap/dist/js/bootstrap.bundle.min.js") from your app to avoid conflicting instances that could break bootstrap JS.

Usage

import { Button, Card } from "tn-ui-library";

function App() {
  return (
    <Card title="Welcome">
      <p>This is a reusable component.</p>
      <Button variant="primary">Click me</Button>
    </Card>
  );
}

Development

Setup

git clone [repository-url]
npm install
npm run storybook

Then visit http://localhost:6006

Contributing

1. Create a feature branch from develop
2. Implement changes and Storybook stories.
3. Test build by running npm run build
4. If you want to test using the package locally you can run npm pack which creates a tarball that can be installed like a package. Just run npm install path/to/tarball in a consuming app (eg admin-panel) and you can import components just like an npm package.
5. Iterate the version number in package.json following Semantic Versioning. Open a pull request and add the correct versioning label according to the type of release (major, minor, patch). (Note: if you need to skip the release step for whatever reason please use the skip-release label)
6. The pr-check workflow on github will run and check that the build is successful, and that the proper version bump has been applied.
7. Since these are standalone UI components not dependent on outside logic, a staging environment is not necessary. Changes flow into develop and then get merged in a release PR to the main branch.
8. If the release will include multiple PRs into develop, DevQA should be done. Otherwise if all changes are made in one PR, DevQA can be skipped as the changes have already been tested together and there would be no difference on another environment
9. When the PR is merged, the release workflow on github will be triggered which will handle all npm publish commands.

Note: If you need to push changes to main without triggering a release, add [skip-release] to the commit message and it will skip all publishing steps

License

MIT License - see LICENSE file for details.