SHL React components lib

Installation

Run the following command:

npm install @talbinyamini/shl-ui-lib [email protected] [email protected] react-password-strength-bar [email protected] [email protected]

Note: The lib depends on bootstrap for styling

Styles

Import the following css file from the lib -

import "@talbinyamini/shl-ui-lib/dist/css/main.css";

CSS classes

Colors

:root {
  --prim-color: #e86d17;
  --prim-color-dark: #e45217;
  --secondary-color: #435fc5;
  --secondary-color-dark: #2c449a;
  --item-selected-bg-color: rgba(25, 73, 203, 0.16);
  --item-selected-color: #1949cb;
  --muted-color: #707070;
  --border-color: #d5d8e2;
  --prim-gradient: transparent linear-gradient(180deg, #fd9441 0%, var(--prim-color) 100%)
    0% 0% no-repeat padding-box;
  --secondary-gradient: transparent linear-gradient(180deg, var(--secondary-color-dark) 0%, var(--secondary-color) 100%)
    0% 0% no-repeat padding-box;
}

.prim-color {
  color: var(--prim-color) !important;
}

.prim-bg-color {
  background-color: var(--prim-color) !important;
  color: #fff !important;
}

.prim-color-dark {
  color: var(--prim-color-dark) !important;
}

.prim-bg-color-dark {
  background-color: var(--prim-color-dark) !important;
  color: #fff !important;
}

.secondary-color {
  color: var(--secondary-color) !important;
}

.secondary-bg-color {
  background-color: var(--secondary-color) !important;
  color: #fff !important;
}

.secondary-color-dark {
  color: var(--secondary-color-dark) !important;
}

.secondary-bg-color-dark {
  background-color: var(--secondary-color-dark) !important;
  color: #fff !important;
}


.muted-color {
  color: var(--muted-color) !important;
}

.prim-bg-gradient-color {
  background: var(--prim-gradient) !important;
}

.secondary-bg-gradient-color {
  background: var(--secondary-gradient) !important;
}

Utils

.cursor-pointer {
  cursor: pointer;
}

.absolute-center {
  position: absolute !important;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.cut-text {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.app-link {
  font-size: 0.75rem !important;
  color: #2c449a !important;
  text-decoration: underline !important;
}

.font-md {
  font-size: 0.875rem;
  line-height: 1.3;
}

.font-sm {
  font-size: 0.75rem;
}

.capitalized {
  text-transform: uppercase;
}

.capitalized-first {
  text-transform: capitalize;
}

.app-shadow {
  box-shadow: 0px 3px 6px #00000029;
}

.app-border {
  border: 2px solid rgb(213, 216, 226);
}

.mx-sm {
  margin: 0 0.2rem;
}

.text-decoration-link {
  text-decoration: underline !important;
}

.text-decoration-none {
  text-decoration: none !important;
}

.z-index-front {
  z-index: 2;
}

.z-index-back {
  z-index: 1;
}

.z-index-max {
  z-index: 999;
}

Publish

1. Update lib package.json version
2. Run the following command

npm run upload

Working Flow

1. Create branch for the required feature / bugfix / ...
2. Checkout the new branch
3. Update the code
4. Once implementation done, commit the changes and create a Merge Request (PR)
5. After PR approved and changes are merged, create a "Release" branch (from develop) with the changes
6. Update the lib package.json version
7. From the "Release" branch created, publish the package with the following command:

npm run upload