linear-react-components-ui 0.4.76-rc.9 → 0.4.77-beta.10

package/.husky/pre-commit

@@ -1,4 +1,4 @@
 #!/bin/sh
-. "$(dirname "$0")/_/husky.sh"
+# . "$(dirname "$0")/_/husky.sh"
 
-npm run check:js
+# npm run check:js

package/.tool-versions

@@ -0,0 +1 @@
+nodejs 10.16.0

package/.vscode/settings.json

@@ -1,7 +1,6 @@
 {
   "files.exclude": {
-    "__error": "Not found",
-    "config": false,
+    "config": true,
     "coverage": true,
     "node_modules": true,
     "scripts": true,

package/README.md

@@ -36,16 +36,51 @@ Compilar para publicação:
 
 `npm run demo:prod`
 
+### Publicação da lib no NPM
+A princípio precisaremos fazer o login no npm para isso rode o comando abaixo:
+
+  `npm login`
+
+Para gerar uma build nova e fazer a publicação no npm rode os comandos a seguir:
+
+  `npm version <versão>`
+
+  `npm run publish:npm`
+
+Caso queira gerar uma build com versão beta e fazer a publicação no npm rode os comandos da seguinte forma:
+
+  `npm version <versão>`
+
+  `npm run publish:npm --tag beta`
+
+Caso queira gerar uma build com versão candidata e fazer a publicação no npm rode os comandos da seguinte forma:
+
+  `npm version <versão>`
+
+  `npm run publish:npm --tag rc`
+
+no local onde esta denominado o campo versão, você deverá colocar a nova versão do pacote, alguns exemplos para o campo versão:
+ - release: 0.4.75
+ - beta: 0.4.75-beta.0
+ - candidata: 0.4.75-rc.0
+ 
+ficando da seguinte maneira:
+
+  `npm version 0.4.75`
+
+
 ### Publicar versão de demonstração no Heroku
 
+  Pré-requesistos
+   - Ter um conta no heroku
+   - Ser um colaborador do projeto no Heroku
+   - Ter o heroku cli instalado: https://devcenter.heroku.com/articles/heroku-cli#install-the-heroku-cli 
     
-  No diretorio da aplicação clonar 
-  `heroku git:clone -a linear-react-comp-demo`
- 
-  Renomear a pastar  `linear-react-comp-demo` para `demo`
-  
   Fazer login no Heroku
  `heroku login`
+
+  No diretorio da aplicação clonar 
+  `heroku git:clone -a linear-react-comp-demo demo`
  
   Executar o comando
   `npm run deploy:heroku`

package/lib/@types/LabelStyles.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/lib/@types/PermissionAttr.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/lib/@types/PointerEvents.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/lib/@types/Position.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/lib/@types/Size.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/lib/@types/SizePixels.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/lib/alerts/AlertProvider.js

@@ -37,7 +37,7 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
 
-function _iterableToArrayLimit(arr, i) { var _i = arr && (typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]); if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 

package/lib/alerts/BaseAlert.js

@@ -23,7 +23,7 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
 
-function _iterableToArrayLimit(arr, i) { var _i = arr && (typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]); if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 

package/lib/assets/styles/button.scss

@@ -275,16 +275,17 @@ $shadow-button-inset-default: inset 0 0 0 1px $default-border-color, $shadow-but
   }
 }
 
-.btn-container, .toolbar-group {
+.btn-container,
+.toolbar-group {
   width: auto;
-  > .button-component { 
+  > .button-component {
     margin-right: 10px;
     line-height: 15px;
   }
-  > .button-component:last-child { 
+  > .button-component:last-child {
     margin-right: 1px;
   }
-}  
+}
 
 .button-component {
   &.-primary .dropdown-icon,
@@ -298,15 +299,12 @@ $shadow-button-inset-default: inset 0 0 0 1px $default-border-color, $shadow-but
     margin-left: 7px;
     margin-right: -10px;
   }
-  // height: 100%;
   &.icon-right .icon-component {
     float: right;
-    // line-height: 1.5px;
     margin: 1px 0 0 6px;
   }
   &.icon-left .icon-component {
     float: left;
-    // line-height: 1.5px;
     margin: 1px 6px 0 0;
   }
   &.icon-top .icon-component {
@@ -314,11 +312,8 @@ $shadow-button-inset-default: inset 0 0 0 1px $default-border-color, $shadow-but
     width: 100%;
   }
   &.icon-center .icon-component {
-    // line-height: 1.5px;
     text-align: center;
     vertical-align: center;
-    // align-items: inherit;
-    // justify-content: inherit;
   }
   &.icon-bottom .icon-component {
     position: relative;
@@ -329,3 +324,17 @@ $shadow-button-inset-default: inset 0 0 0 1px $default-border-color, $shadow-but
     vertical-align: middle;
   }
 }
+
+.button-component.-skeletonized {
+  @extend %skeleton-component;
+  color: transparent !important;
+  text-shadow: none;
+  box-shadow: none;
+  border-color: transparent !important;
+  transition: none;
+
+  > svg {
+    opacity: 0;
+    visibility: hidden;
+  }
+}

package/lib/assets/styles/checkbox.scss

@@ -1,79 +1,101 @@
 @import "colors.scss";
 @import "commons.scss";
 @import "effects.scss";
+
 .checkbox-component {
-  position: absolute;
-  z-index: 0;
-  left: -9999999999999px;
-  &:disabled + span {
-    @extend %component-disabled;
-  }
-  &:disabled + span + .description {
-    @extend %component-menu-disabled;
-  }
-  &:checked + span:before {
-    content: "✓";
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    position: static;
-    margin-top: -5px;
-    font-weight: 600;
-    height: 28px;
-  }
-  + span {
-    display: inline-block;
-    position: relative;
-    top: -1px;
-    width: 18px;
-    height: 18px;
-    margin: -1px 0px 0 0;
-    margin-right: 4px;
-    vertical-align: middle;
-    background: $font-color-second left top no-repeat;
-    border: 1px solid $component-border-color;
-    cursor: pointer;
-    &:hover {
-      animation-duration: .5s;
-      animation-name: blink-effect;
-      animation-iteration-count: infinite;
-      animation-direction: alternate;
+  > .inputcontent {
+    > .input {
+      position: absolute;
+      z-index: 0;
+      left: -9999999999999px;
+      &:disabled + span {
+        @extend %component-disabled;
+      }
+      &:disabled + span + .description {
+        @extend %component-menu-disabled;
+      }
+      &:checked + span:before {
+        content: "✓";
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        position: static;
+        margin-top: -5px;
+        font-weight: 600;
+        height: 28px;
+      }
+      + span {
+        display: inline-block;
+        position: relative;
+        top: -1px;
+        width: 18px;
+        height: 18px;
+        margin: -1px 0px 0 0;
+        margin-right: 4px;
+        vertical-align: middle;
+        background: $font-color-second left top no-repeat;
+        border: 1px solid $component-border-color;
+        cursor: pointer;
+        &:hover {
+          animation-duration: .5s;
+          animation-name: blink-effect;
+          animation-iteration-count: infinite;
+          animation-direction: alternate;
+        }
+      }
+      &:checked + span {
+        background-color: $check-background;
+        color: $font-color-second;
+        animation-duration: .2s;
+        animation-name: select-checkbox;
+        animation-iteration-count: 1;
+        animation-direction: Normal;
+        box-shadow: inset 0 0 0 1px $checked, 
+        inset 0 0 0 0 #FFFFFF, 
+        inset 0 0 0 16px $checked-effect;
+      }
+      &:focus + span {
+        border: 2px solid $component-selected-color;
+      }
+      &:disabled:checked + span:before {
+        @extend %component-menu-disabled;
+        border: 1px solid;
+        margin-top: -1px;
+        width: 18px;
+        height: 18px;
+        background-color: rgb(229, 229, 229);
+        margin-left: -1px;
+      }
+    }
+    > .description {
+      @extend %input-label;
+      margin-left: 2px;
+      cursor: pointer ;
     }
   }
-  &:checked + span {
-    background-color: $check-background;
-    color: $font-color-second;
-    animation-duration: .2s;
-    animation-name: select-checkbox;
-    animation-iteration-count: 1;
-    animation-direction: Normal;
-    box-shadow: inset 0 0 0 1px $checked, 
-    inset 0 0 0 0 #FFFFFF, 
-    inset 0 0 0 16px $checked-effect;
-  }
-  &:focus + span {
-    border: 2px solid $component-selected-color;
+
+  > .hint {
+    @extend %hint-text;
+    margin-top: 0;
+    padding-left: 22px;
   }
-  &:disabled:checked + span:before {
-    @extend %component-menu-disabled;
-    border: 1px solid;
-    margin-top: -1px;
-    width: 18px;
-    height: 18px;
-    background-color: rgb(229, 229, 229);
-    margin-left: -1px;
+  
+  &.-skeletonized {
+    > .inputcontent {
+      .input {
+        + span {
+          @extend %skeleton-component;
+          border-color: transparent;
+        }
+        &:checked + span,
+        &:disabled:checked + span:before {
+          @extend %skeleton-component;
+        }
+      }
+    }
+    > .inputcontent > .description,
+    > .hint > span {
+      @extend %skeleton-component;
+    }
   }
 }
-
-.checkbox-hint {
-  @extend %hint-text;
-  margin-top: 0;
-  padding-left: 22px;
-}
-
-.checkbox-description {
-  @extend %input-label;
-  margin-left: 2px;
-  cursor: pointer ;
-}
-

package/lib/assets/styles/commons.scss

@@ -99,3 +99,39 @@
   font-size: 17px;
   border: none;
 }
+
+%skeleton-component {
+  pointer-events: none;
+  user-select: none;
+  color: transparent !important;
+  text-shadow: none !important;
+  box-shadow: none;
+  background-image: linear-gradient(to right, #e7edf1 0%, #f8f8f8 50%, #e7edf1 100%);
+  background-size: 400% 400%;
+  background-repeat: initial;
+  animation: shimmer 1.2s ease-in-out infinite;
+
+  &.-white {
+    background-image: linear-gradient(to right, #fff 0%, #e7edf1 50%, #fff 100%);
+  }
+}
+
+%skeleton-transparency {
+  content: '';
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background: rgb(255,255,255);
+  background: linear-gradient( 180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.2) 30%,
+    rgba(255,255,255,0.6) 70%,rgba(255,255,255,0.8) 100%);
+}
+
+/* Efeito utilizado para o componente Skeleton */
+@keyframes shimmer {
+  0% {
+    background-position: 0% 0%;
+  }
+  100% {
+    background-position: -135% 0%;
+  }
+}

package/lib/assets/styles/drawers.scss

@@ -1,4 +1,5 @@
 @import "colors.scss";
+@import "commons.scss";
 @import "effects.scss";
 .drawer-component {
   position: fixed;
@@ -58,18 +59,17 @@
     display: flex;
     flex-direction: column;
     > .drawerheader {
-      align-items: center;
       background: #ffffff;
       color: #252424;
       font-size: 20px;
       font-weight: 600;
       margin: 10px 0;
-      display: inline-block;
+      display: flex;
       width: 100%;
       .left {
+        flex: 1;
         margin-right: 10px;
         margin-right: 10px;
-        float: left;
         > .title-subtitle {
           display: flex;
           width: 100%;
@@ -86,8 +86,9 @@
         }
         > .drawer-subtitle {
           font-weight: 500;
-          display: block;
-          width: 100%;
+          display: initial;
+          max-width: 100%;
+          overflow-wrap: break-word;
           font-size: 14px;
         }
       }
@@ -96,7 +97,6 @@
         &.modal-title {
           color: #4e4c4c;
           font-weight: 600;
-          float: right;
         }
       }
       .closebutton {
@@ -116,6 +116,22 @@
       width: 100%;
       padding-bottom: 80px
     }
+
+    &.-skeletonized {
+      > .drawerheader {
+        .title-subtitle > .drawer-title,
+        .title-subtitle > .icon-header {
+          @extend %skeleton-component;
+          
+          > svg {
+            fill: transparent;
+          }
+        }
+        .drawer-subtitle {
+          @extend %skeleton-component;
+        }
+      }
+    }
   }
 }
 

package/lib/assets/styles/dropdown.scss

@@ -76,12 +76,12 @@
     box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
     animation: revealelement 0.3s forwards ease-in-out;
     margin-right: 7px;
-    > .floatmenulink {
+    > .floatmenuitem {
       text-decoration: none;
       color: #666666;
       text-align: center;
     }
-    > .floatmenulink .-items {
+    > .floatmenuitem .-items {
       border: solid 1px $default-hover-color;
       margin: 0 5px 5px 0;
       font-size: 12px;
@@ -106,6 +106,32 @@
       transition: all 0.2s ease-in-out;
       &:hover {
         background: $default-hover-color;
+
+        > .floatmenudropdown {
+          visibility: visible;
+          pointer-events: initial;
+          opacity: 1;
+        }
+      }
+      > .floatmenudropdown {
+        position: absolute;
+        padding: 0;
+        top: 5px;
+        right: 5px;
+        visibility: hidden;
+        opacity: 0;
+        pointer-events: none;
+      }
+      > .floatmenulink {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        flex: 1;
+        width: 100%;
+        text-decoration: none;
+        color: #666666;
+        text-align: center;
       }
       &.iconcontainer {
         padding-bottom: 10px;

package/lib/assets/styles/effects.scss

@@ -2,9 +2,11 @@
 @keyframes slideInFromTop {
   0% {
     transform: translateY(-60%);
+    -webkit-font-smoothing: subpixel-antialiased;
   }
   30% {
     transform: translateY(0);
+    -webkit-font-smoothing: subpixel-antialiased;
   }
 }
 
@@ -719,3 +721,33 @@
   -webkit-transform: scale(1.1);
   transform: scale(1.1);
 }
+
+// SlideWithPosition
+@keyframes slideWithPositionFromLeft {
+  from {
+    left: -100%;
+  }
+  to {
+    left: 100%;
+  }
+}
+
+@keyframes slideRightToLeftWithFade {
+  from {
+    opacity: 0;
+    transform: translateX(2%);
+  } to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes slideLeftToRightWithFade {
+  from {
+    opacity: 0;
+    transform: translateX(-2%);
+  } to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}

package/lib/assets/styles/floatMenu.scss

@@ -15,4 +15,3 @@
     }
   }
 }
-

package/lib/assets/styles/gridlayout.scss

@@ -22,7 +22,8 @@ html {
 
 .grid-container {
   margin-bottom: 5px;
-  &.-withinput {
+  &.-withinput,
+  &.-withskeleton {
     margin-bottom: 10px;
   }
 }

package/lib/assets/styles/input.scss

@@ -111,6 +111,27 @@
   }
 }
 
+.input-base-component.-skeletonized {
+  > .labelcontainer > .label,
+  > .hint {
+    @extend %skeleton-component;
+    color: transparent;
+  }
+  > .inputwrapper {
+    border: 1px solid transparent;
+    > .sidebuttons {
+      display: none;
+    }
+    > .inputcontent > .textinput {
+      @extend %skeleton-component;
+      content-visibility: hidden;
+      &.-readonly {
+        @extend %skeleton-component;
+      }
+    }
+  }
+}
+
 .textarea-container {
   height: auto;
 }

package/lib/assets/styles/label.scss

@@ -96,6 +96,15 @@ $shadow-text-button: 0 1px 0 rgba(0,0,0,.1);
   }
 }
 
+.label-component.-skeletonized {
+  @extend %skeleton-component;
+  border-color: transparent;
+
+  > svg {
+    fill: transparent;
+  }
+}
+
 .lbl-container {
   width: auto;
   .label-component {
@@ -105,4 +114,3 @@ $shadow-text-button: 0 1px 0 rgba(0,0,0,.1);
     margin-right: 2px;
   }
 }
-

package/lib/assets/styles/list.scss

@@ -20,6 +20,14 @@ $item-height: 48px;
       line-height: 40px!important;
     }
   }
+  > .skeleton-transparency {
+    position: relative;
+    &::after {
+      @extend %skeleton-transparency;
+      top: 0;
+      left: 0;
+    }
+  }
 }
 
 .item-container {