shift-admin-ui-kit

Shift's custom React UI Kit

Inorder to integrate this module in to your app, please follow the below steps

1. Install module:

   npm add shift-admin-ui-kit --save

2. Importing CSS files:

   import "shift-admin-ui-kit/src/stylesheets/_application.css.scss"

   This file will be loading all the styles available in the ui-kit

3. Importing any component:

   import { componentName } from 'shift-admin-ui-kit'

   Currently available components:

   1. AutoCompleteField
   2. GenericAutoCompleteField
   3. GenericInput
   4. InputError
   5. InputField
   6. InputHint
   7. InputLabel
   8. OuterShell
   9. Paginator
   10. PaginatorButton
   11. SearchBar
   12. SubmitButton
   13. CsvValidator
   14. parseQueryString
   15. randomString
   16. ApiConfig
   17. AppShell
   18. AuthenticationConfig
   19. Button
   20. FlashMessage
   21. Modal
   22. Panel
   23. PillBadge
   24. Popover
   25. PusherConfig
   26. Tab
   27. TabContent
   28. TabGroup
   29. TabList
   30. Image

If you wish to make changes to the ui-kit and run specs against it, command to run is:

npm run test

Developing

When developing and you want to make changes to the ui-kit they can be tested locally by changing the dependency in your package.json to the following:

"shift-admin-ui-kit": "git+https://github_personal_access_token:[email protected]/shiftcommerce/shift-admin-ui-kit.git#branch_name"

Setting the github_personal_access_token and branch_name appropriately.

Doing this changes to using the github branch version of the package. If you make more changes to the branch you will need to get those changes again. The easiest/most consistent way to update the ui-kit was to run:

bin/dev/yarn upgrade shift-admin-ui-kit

Which gets the most recent version from npm (not ideal), but then if you replace the dependency in the package.json above again and run the following:

bin/dev/yarn install

You should be able to locally update the ui-kit without having to close you're front end server.

Publishing package

Before publishing package, you need to update the build. Inorder to that run:

npm run dev

Note: Please run the below commands only after merging to master

Now you need to update the version of the package:

npm version update

Command to publish the package:

npm publish