Insig UI Library

This Component Library is a collection of Vue UI components for use in the development of Insig applications It was built with the intention of hastening development times, enabling reusability and to provide clarity for compositional decisions

Prerequisites

This project requires NodeJS (16.3.0 or later) and NPM (7.15.1 or later)

To make sure you have these versions available on your machine, try running the following command

$ npm -v && node -v
7.15.1
v16.3.0

Table of contents

• Insig UI Library
  • Prerequisites
  • Table of contents
  • Getting Started
  • Installation
  • Usage
    • Serving the UI Library 'kitchen sink'
    • Building a package distribution version
    • Serving the distribution version
    • Serving Storybook
    • Building Storybook
  • Contributing
    • Tasklist
  • Built With
  • Authors
  • License

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

Installation

BEFORE YOU INSTALL: please read the prerequisites

Start with cloning this repo on your local machine:

$ git clone https://[email protected]/InsigTechnologies/Insig%20UI%20Library/_git/insig-ui-library
$ cd insig-ui-library

To install and set up the library, run:

$ ./workspaces.install.sh

Note If you have issues with workspaces, please ensure you are using the correct versions of NodeJS and NPM

Usage

Serving the UI Library 'kitchen sink'

$ npm run complib:dev

Building a package distribution version

$ npm run complib:build

Note If you have issues with TSC module not found, please blow away node_modules and perform a clean install

This task will create a distribution version of the project inside your local packages/complib/dist/ folder

Publishing the distribution version

Note Before publishing please be sure to increment the version number correctly in packages/complib/package.json

$ npm run complib:publish

Note If you have issues with NPM authentication please ensure your project contains a valid .npmrc file with a valid token

Note this requires Building a package distribution version first

Serving Storybook

$ npm run storybook:start

Building Storybook

$ npm run storybook:build

Note You will most likely not need to run a manual build for Storybook as this should be managed by deployment pipelines

Contributing

Please see documentation within the Storybook instance related to contribution specifics

1. Fork it!
2. Create your feature branch: git checkout -b my-new-feature
3. Add your changes: git add .
4. Commit your changes: git commit -m 'Add some feature'
5. Push to the branch: git push origin my-new-feature
6. Submit a pull request :sunglasses:

Tasklist

Remaining Tasks

• Create component: InsigActionsDataTableCell
• any magic strings -> define and export (check classes for colors or other string params eg. buttonType, iconType etc.)
• double check / update props in components for all optionals and defaults
• double check / update all args in SB components to reflect final props
• complete documentation for all components
• complete documentation for all services

Component and Documentation Status

| Component Name | Integrated | Documented | Comment | | --------------------------- | ---------- | ---------- | ---------------- | | font-awesome-icon | N/A | Yes | | | Toast Service | N/A | Yes | | | Confirm Dialog Service | N/A | Yes | | | InsigApplication | Yes | Yes | | | InsigAvatar | Yes | Yes | | | InsigBreadcrumb | Yes | Yes | | | InsigButton | Yes | Yes | | | InsigButtonGroup | Yes | Yes | | | InsigDataTable | Yes | Yes | | | InsigDisplayField | Yes | Yes | | | InsigEmptyDataTableCell | Yes | Yes | | | InsigExpandablePanel | Yes | Yes | | | InsigFieldset | Yes | Yes | | | InsigFileUpload | Yes | Yes | | | InsigInput | Yes | Yes | | | InsigInputAutoComplete | Yes | Yes | | | InsigInputCalendar | Yes | Yes | | | InsigInputCheckbox | Yes | Yes | | | InsigInputDropdown | Yes | Yes | | | InsigInputIncrement | Yes | Yes | | | InsigInputMultiSelect | Yes | Yes | | | InsigInputNumber | Yes | Yes | | | InsigInputPassword | Yes | Yes | | | InsigInputRadioButtonGroup | Yes | Yes | | | InsigInputSwitch | Yes | Yes | | | InsigInputTextArea | Yes | Yes | | | InsigInputText | Yes | Yes | | | InsigLayout | Yes | Yes | | | InsigLegend | Yes | Yes | | | InsigLogin | Yes | No | Not used for now | | InsigMenuBar | Yes | Yes | | | InsigMenu | Yes | Yes | | | InsigMenuButton | No | No | To do | | InsigModal | Yes | Yes | | | InsigModalNotification | Yes | Yes | | | InsigModalProgress | Yes | Yes | | | InsigNotice | Yes | Yes | | | InsigPage | Yes | Yes | | | InsigPageNotAuthorized | Yes | Yes | | | InsigPageNotFound | Yes | Yes | | | InsigPanel | Yes | Yes | | | InsigPanelLoadError | Yes | Yes | | | InsigPanelLoadProgress | Yes | Yes | | | InsigProgressSpinner | Yes | Yes | | | InsigRouterLink | Yes | Yes | | | InsigSearchHeader | Yes | Yes | | | InsigSelectButton | Yes | Yes | | | InsigSideMenu | Yes | Yes | | | InsigTabPanelHeader | Yes | Yes | | | InsigTabView | Yes | Yes | | | InsigTag | Yes | Yes | | | InsigTimeline | Yes | Yes | | | InsigToolbarView | Yes | Yes | | | InsigTree | Yes | Yes | | | InsigTreeTable | Yes | Yes | | | InsigUserMenu | Yes | Yes | |

Built With

• Vue 3
• Vite
• NPM Workspaces
• PrimeVue
• Sass
• Typescript

Authors

• Sam Barnett - Initial components work
• Blake Simpson - Monorepo, packaging, components work and documentation
• John Capt - Storybook components and documentation
• Alyssa Booth - Storybook documentation

License

TODO Add license