Getting Started

InsTech UI is the source repository for the @hexure/ui npm package. This library of components is the React implementation of the Hexure Design System, and should be used across all Hexure React applications and projects.

Usage

1. Run npm i @hexure/ui --save

2. If needed, install/update any required peer dependencies: react, react-dom, @mdi/font, @mdi/js, @mdi/react, moment, numeral

3. Refer to Hexure Design System for available components and how to use them.

4. Import components as needed into your React project: import { Button } from @hexure/ui

   b. To use the UI Library in your project npx install @hexure/ui Some common Commands: npm run rollup to run rollup and generate a dist folder npm run storybook to run storybook server and see components on storybook. npm run test to run all test cases.

5. Optional: Applying a custom theme:

6. Import the ThemeProvider from styled-components: import { ThemeProvider } from 'styled-components'

7. Wrap your top level application with the ThemeProvider: <ThemeProvider><YourApp /></ThemeProvider>

8. Define your custom theme on the provider: <ThemeProvider theme={{ PRIMARY_COLOR: { Hex: 'Blue', Rgb: '10,10,10' } }}><YourApp /></ThemeProvider>

9. As of v1.9.0 the only theme option is PRIMARY_COLOR and it must be an object with Hex and Rbg values.

Contribute

Setting up your local environment

1. Clone the repo to your machine
2. Make sure you have Node and NPM install on your machine
3. Navigate to the clone repo directory and install it's npm packages: npm i
4. Run the storybook command to preview the components and your changes: npm run storybook

Creating a new component

1. Pull down the latest version of main and create a new branch off it that corresponds with a Jira ticket: git branch -b [your_name]/[FEE-#]
2. Create a new directory in src/components with the following files:
   • index.ts
   • ComponentName.tsx: This should match the name of the React component and the name of the component in the Design System
   • ComponentName.stories.tsx: This should match the name of the tsx file above
3. Add the following content to index.ts
   • export { default } from './ComponentName';
4. Build out ComponentName.tsx and ComponentName.stories.tsx as needed.
   • Be sure to follow our front-end guidelines and standards found at https://insurancetechnologies.atlassian.net/jira/software/projects/FEE/pages
5. Make sure ESLint passes by before committing/pushing your changes npm run eslint. You can use npm run eslint-fix to auto-fix some of the ESLint errors
6. Make sure you run Prettier before committing/pushing your changes: npm run prettier
7. Once you're work is complete, create a new Pull Request in Azure DevOps against the main branch.
8. Your Pull Request must be reviewed and approved by the lead over this repository.
9. Once approved, merge your pull request into main and follow the steps under "Releasing a new version"

Modifying an existing component

1. Pull down the latest version of main and create a new branch off it that corresponds with a Jira ticket: git branch -b [your_name]/[FEE-#]
2. Modify ComponentName.tsx and ComponentName.stories.tsx as neeeded.
   • Be sure to follow our front-end guidelines and standards found at https://insurancetechnologies.atlassian.net/jira/software/projects/FEE/pages
3. Make sure ESLint passes by before committing/pushing your changes npm run eslint. You can use npm run eslint-fix to auto-fix some of the ESLint errors
4. Make sure you run Prettier before committing/pushing your changes: npm run prettier
5. Once you're work is complete, create a new Pull Request in Azure DevOps against the main branch.
6. Your Pull Request must be reviewed and approved by the lead over this repository.
7. Once approved, merge your pull request into main and follow the steps under "Releasing a new version"

Releasing a new version

You should release a new version of this package immediately after a Pull Request in approved.

1. Determine the new version number based on the following:
   • Major: The only time this would be bumped is if we're making wholistic breaking changes, like doing a major upgrade to React.
   • Minor: This should be bumped if we are:
     • Adding a new component or utility
     • Making breaking changes to an individual component or utility
   • Patch: This should be bumped if we are:
     • Making non-breaking changes to an indivdiual component or utility
     • Making minor bumps to npm packages
     • Fixing bugs with existing components
2. Pull down the latest version of main and create a new branch off it that corresponds with the new version number: git branch -b release/1.x.x
3. Update package.json with the new version number.
4. Make sure ESLint passes: npm run eslint
   • Since ESLint passing is a requirement for all PRs, this should always pass
5. Run Rollup to compile the src files into the dist directory for distribution: npm run rollup
   • Sometimes rollup won't exit out the command after generating the files into dist. If this happens, just exit out of the process
6. Verify the updates are seen in the dist directory: git status and/or git diff
7. Add, commit, and push the changes: git add . then git commit -m "v1.x.x" then git push origin release/1.x.x
8. Create a Pull Request in Azure DevOps against the main branch.
9. Your Pull Request must be reviewed and approved by the lead over this repository.
10. Once approved, merge your pull request into main.
11. Pull down the updated main branch and run npm publish
12. Go to the Azure DevOps repo and add a new Tag
    • Tag Name: v1.x.x
    • Description: Add details around what was added/changed