CTIA UI Library

Let's make things easy (and beautiful :sparkling_heart:)

• CTIA UI Library
  • Supported components
  • Build new version
  • Integration with other projects
  • Upgrade UI Library version
  • Shell script draft (building automation process)
    • Input params:
    • Script flow:

Supported components

• [x] Bubble
• [x] Buttons:
  • [x] ActionButton
  • [x] DeleteButton
  • [x] DownloadButton
  • [x] LoaderButton
• [x] Checklist
• [x] Divider
• [x] Icons:
  • [x] IconAwesome
  • [x] IconBase
  • [x] IconLabel
• [x] InfoBar (WellInfo previously)
• [x] InlineDatepicker
• [x] InlinePreloader
• [x] Labels:
  • [x] ContinueLabel
• [x] NoData
• [x] Pager
• [x] PagerPageSize
• [x] PagerStatusFilter
• [x] Preloader
• [x] Switcher
• [x] Tooltip:
  • [x] TooltipBase
  • [x] TooltipIcon
• [x] UploadInstructions
• [x] WithModal

Run local version of library

Install dependencies with yarn install or npm install.

Run yarn dev or npm run dev to start local dev server (will be run on http://localhost:1234).

To test locally import your components inside src/docs/index.js then use components inside render method. This file already will have recently added examples.

Build new version

yarn build then yarn build:docs

Integration with other projects

To add the UI library for a first time:

npm i ctia-ui or yarn add ctia-ui

To upgrade the current version:

npm update ctia-ui or yarn upgrade ctia-ui

Upgrade UI Library version

When time to update library comes (new components added or improved), follow next steps to update the library version.

• Be sure that your code is well tested, then commit it
• Increase verion number inside package.json and commit this change
• Build new version and commit results (TODO: add gitlab worker to build new version)
• Update related projects (yarn upgrade ctia-ui or npm update ctia-ui)

Shell script draft (building automation process)

Example:

build.sh -v patch -m "Commit message"

Input params:

• commit message (string)
• release type (oneOf: ['patch','major','minor'])

Patch example: 1.0.1 -> 1.0.2 (Increment the third digit) Minor example: 1.0.12 -> 1.1.0 (Increment the middle digit and reset last digit to zero) Major example: 1.3.54 -> 2.0.0 (Increment the first digit and reset middle and last digits to zero)

Details: https://docs.npmjs.com/about-semantic-versioning

Script flow:

• run build and then build:docs command
• commit and push changes to git (need to ask comment message as a param)
• change package version (npm version <update_type>, see release type input param)
• publish changes to npm (npm publish)