@datability/8ui 1.0.0 → 1.1.1

package/README.md

@@ -9,9 +9,7 @@ Currently, two official plugins are available:
 
 ## React Compiler
 
-The React Compiler is enabled on this template. See [this documentation](https://react.dev/learn/react-compiler) for more information.
-
-Note: This will impact Vite dev & build performances.
+The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
 
 ## Expanding the ESLint configuration
 

package/dist/components/assets/closed.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18 6L6 18" stroke="#B1B1B1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M6 6L18 18" stroke="#B1B1B1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/dist/components/assets/expand-arrow.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.21967 8.46967C4.51256 8.17678 4.98744 8.17678 5.28033 8.46967L12 15.1893L18.7197 8.46967C19.0126 8.17678 19.4874 8.17678 19.7803 8.46967C20.0732 8.76256 20.0732 9.23744 19.7803 9.53033L12.5303 16.7803C12.2374 17.0732 11.7626 17.0732 11.4697 16.7803L4.21967 9.53033C3.92678 9.23744 3.92678 8.76256 4.21967 8.46967Z" fill="#B1B1B1"/>
+</svg>

package/dist/components/assets/visibility-off.svg

@@ -0,0 +1,5 @@
+<svg width="19" height="20" viewBox="0 0 19 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g opacity="0.2">
+<path d="M4.00187 3.07082C3.94973 3.01204 3.88644 2.9642 3.81567 2.93006C3.7449 2.89592 3.66806 2.87617 3.5896 2.87195C3.51114 2.86773 3.43263 2.87912 3.35861 2.90547C3.28458 2.93182 3.21653 2.97259 3.15838 3.02544C3.10023 3.07828 3.05315 3.14214 3.01987 3.21331C2.98658 3.28448 2.96775 3.36156 2.96447 3.44006C2.96119 3.51856 2.97353 3.59693 3.00076 3.67064C3.02799 3.74434 3.06958 3.8119 3.12312 3.86941L4.55109 5.44062C1.85546 7.09496 0.696165 9.64511 0.644954 9.76089C0.611194 9.83683 0.59375 9.919 0.59375 10.0021C0.59375 10.0852 0.611194 10.1674 0.644954 10.2433C0.67093 10.3019 1.29956 11.6958 2.6971 13.0933C4.55925 14.9547 6.91124 15.9389 9.49999 15.9389C10.8305 15.9464 12.1475 15.6725 13.3646 15.1351L14.9974 16.9319C15.0495 16.9907 15.1128 17.0385 15.1836 17.0727C15.2543 17.1068 15.3312 17.1266 15.4096 17.1308C15.4881 17.135 15.5666 17.1236 15.6406 17.0973C15.7147 17.0709 15.7827 17.0301 15.8409 16.9773C15.899 16.9244 15.9461 16.8606 15.9794 16.7894C16.0127 16.7182 16.0315 16.6412 16.0348 16.5627C16.0381 16.4842 16.0257 16.4058 15.9985 16.3321C15.9713 16.2584 15.9297 16.1908 15.8761 16.1333L4.00187 3.07082ZM10.6073 12.1025C10.1416 12.3475 9.6077 12.4309 9.08944 12.3396C8.57118 12.2483 8.09793 11.9874 7.74399 11.598C7.39006 11.2085 7.17549 10.7126 7.13398 10.188C7.09246 9.66336 7.22636 9.13982 7.51464 8.69957L10.6073 12.1025ZM18.355 10.2433C18.3239 10.3131 17.572 11.9778 15.8791 13.4941C15.7624 13.5988 15.6091 13.6531 15.4525 13.6452C15.296 13.6373 15.1489 13.5677 15.0434 13.4518L7.52577 5.18234C7.45386 5.10342 7.40455 5.00657 7.38305 4.90199C7.36155 4.79741 7.36864 4.68896 7.40359 4.58807C7.43853 4.48718 7.50004 4.39759 7.58162 4.32871C7.66321 4.25984 7.76186 4.21424 7.86718 4.19671C8.40687 4.1076 8.953 4.06317 9.49999 4.06386C12.0887 4.06386 14.4407 5.048 16.3029 6.91015C17.7004 8.30769 18.3291 9.70226 18.355 9.76089C18.3888 9.83683 18.4062 9.919 18.4062 10.0021C18.4062 10.0852 18.3888 10.1674 18.355 10.2433Z" fill="#1B1C1E"/>
+</g>
+</svg>

package/dist/components/assets/visibility.svg

@@ -0,0 +1,5 @@
+<svg width="19" height="20" viewBox="0 0 19 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g opacity="0.2">
+<path d="M18.355 9.75953C18.3291 9.7009 17.7004 8.30633 16.3029 6.90879C14.4407 5.04664 12.0887 4.0625 9.49999 4.0625C6.91124 4.0625 4.55925 5.04664 2.6971 6.90879C1.29956 8.30633 0.667962 9.70313 0.644954 9.75953C0.611194 9.83547 0.59375 9.91764 0.59375 10.0007C0.59375 10.0838 0.611194 10.166 0.644954 10.242C0.67093 10.3006 1.29956 11.6944 2.6971 13.092C4.55925 14.9534 6.91124 15.9375 9.49999 15.9375C12.0887 15.9375 14.4407 14.9534 16.3029 13.092C17.7004 11.6944 18.3291 10.3006 18.355 10.242C18.3888 10.166 18.4062 10.0838 18.4062 10.0007C18.4062 9.91764 18.3888 9.83547 18.355 9.75953ZM9.49999 12.9688C8.91283 12.9688 8.33885 12.7946 7.85064 12.4684C7.36244 12.1422 6.98192 11.6786 6.75723 11.1361C6.53253 10.5936 6.47374 9.99671 6.58829 9.42083C6.70284 8.84494 6.98558 8.31596 7.40077 7.90078C7.81596 7.48559 8.34494 7.20284 8.92082 7.08829C9.4967 6.97374 10.0936 7.03253 10.6361 7.25723C11.1786 7.48193 11.6422 7.86244 11.9684 8.35065C12.2946 8.83886 12.4687 9.41284 12.4687 10C12.4687 10.7874 12.156 11.5425 11.5992 12.0992C11.0425 12.656 10.2874 12.9688 9.49999 12.9688Z" fill="#1B1C1E"/>
+</g>
+</svg>

package/dist/components/blackdrop/index.scss

@@ -0,0 +1,16 @@
+.DBui-blackdrop {
+  opacity: 1;
+  transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  position: fixed;
+  z-index: var(--z-index-backdrop);
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.4);
+
+  &[data-hidden='true'] {
+    opacity: 0;
+    visibility: hidden;
+  }
+}

package/dist/components/button/index.scss

@@ -0,0 +1,40 @@
+.DBui-button {
+  transition: opacity 0.3s;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5em;
+  cursor: pointer;
+  padding: 0.4em 1em;
+  border-radius: 0.3em;
+  border: 1px solid #03287E;
+  background-color: #03287E;
+  color: #FFFFFF;
+
+  &:hover {
+    opacity: 0.8;
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+  
+  .DBui-loaderSpinButton {
+    width: 30px;
+    height: 30px;
+    border: 3px solid #aaaaae;
+    border-bottom-color: #FFFFFF;
+    border-radius: 50%;
+    animation: rotation 1s linear infinite;
+
+    @keyframes rotation {
+      0% {
+        transform: rotate(0deg);
+      }
+      100% {
+        transform: rotate(360deg);
+      }
+    }
+  }
+}

package/dist/components/chip/index.scss

@@ -0,0 +1,32 @@
+.DBui-chip {
+  display: flex;
+  align-items: center;
+  width: fit-content;
+  padding: 0.4em 0.5em;
+  border-radius: 0.3em;
+  border: 1px solid #03287E;
+  background-color: #618aea;
+  gap: 0.5em;
+
+  &[data-checked='true'] {
+    cursor: pointer;
+
+    &:hover {
+      opacity: 0.5;
+    }
+  }
+
+  .DBui-chipIcon {
+    width: 20px;
+    height: 20px;
+
+    &[data-checked='true'] {
+      cursor: pointer;
+      
+      &:hover {
+        opacity: 0.5;
+      }
+    }
+  }
+}
+

package/dist/components/divider/index.scss

@@ -0,0 +1,4 @@
+.DBui-divider {
+    border: 1px solid #9E9E9E;
+    width: 100%;
+}

package/dist/components/input/extend.scss

@@ -0,0 +1,19 @@
+// Disable
+.DBui-disabled {
+    cursor: not-allowed;
+    background-color: #FAFAFA;
+    color: #000000;
+}
+
+.DBui-input {
+    width: 100%;
+    padding: 0.3em 0.5em;
+    border-radius: 0.3em;
+    border: 1px solid #E3E3E8;
+    background-color: #FFFFFF;
+    color: #000000;
+
+    &[data-invalid='true'] {
+        border: 1px solid #EB5757;
+    }
+}

package/dist/components/input/input-auto-complete/index.scss

@@ -0,0 +1,53 @@
+@import '../extend.scss';
+
+.DBui-wrapInputAutoComplete {
+  @extend .DBui-input;
+
+  padding: 0.4em 0.5em;
+  display: flex;
+  align-items: center;
+  gap: 0.3em;
+  height: 36px;
+
+  &[data-disabled='true'] {
+    @extend .DBui-disabled;
+  }
+
+  .DBui-wrapSelectValueInputAutoComplete {
+    display: flex;
+    align-items: center;
+
+    .DBui-iconInputAutoComplete {
+      width: 20px;
+      color: #E3E3E8;
+      cursor: pointer;
+    }
+  }
+
+  .DBui-inputAutoComplete {
+    border: none;
+    background-color: #FFFFFF;
+    align-items: center;
+    width: 100%;
+
+    &:disabled {
+      @extend .DBui-disabled;
+    }
+  }
+}
+
+.DBui-menuItemInputAutoComplete {
+  background-color: #FFFFFF;
+  color: #000000;
+  padding: 0.3em 0.5em;
+  cursor: pointer;
+
+  &:hover {
+    background-color: #FAFAFA;
+  }
+
+  &[data-checked='true'] {
+    background-color: #0045a5;
+    color: #FFFFFF;
+  }
+}

package/dist/components/input/input-base/index.scss

@@ -0,0 +1,14 @@
+.DBui-inputBase {
+    display: flex;
+    flex-direction: column;
+
+    &[data-invalid='true'] {
+        .DBui-inputLabel {
+            color: #EB5757;
+        }
+    }
+
+    .DBui-dataInvalid {
+        color: #EB5757;
+    }
+}

package/dist/components/input/input-basic/index.scss

@@ -0,0 +1,9 @@
+@import '../extend.scss';
+
+.DBui-inputBasic {
+  @extend .DBui-input;
+
+  &:disabled {
+    @extend .DBui-disabled;
+  }
+}

package/dist/components/input/input-checkbox/index.scss

@@ -0,0 +1,30 @@
+@import '../extend.scss';
+
+.DBui-wrapInputCheckboxList {
+    display: flex;
+    width: 100%;
+    gap: 1em;
+
+    .DBui-wrapInputCheckbox {
+        display: flex;
+        align-items: center;
+        gap: 0.3em;
+
+        .DBui-labelCheckbox {
+            &[data-invalid='true'] {
+                color: #EB5757;
+            }
+        }
+
+        .DBui-inputCheckbox {
+            width: 100%;
+            border-radius: 0.3em;
+            width: 18px;
+            height: 18px;
+
+            &:disabled {
+                @extend .DBui-disabled;
+            }
+        }
+    }
+}

package/dist/components/input/input-date/index.scss

@@ -0,0 +1,102 @@
+@import '../extend.scss';
+
+.DBui-inputDate {
+  @extend .DBui-input;
+  height: 35px;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+
+  &[data-disabled='true'] {
+    @extend .DBui-disabled;
+  }
+
+  .DBui-clearIconInputDate {
+    width: 20px;
+
+    &[data-hidden='true'] {
+      display: none !important;
+    }
+
+    &:hover {
+      opacity: 0.8;
+    }
+  }
+}
+
+.DBui-inputDateWrapperCalendar {
+  display: flex;
+  flex-direction: column;
+  gap: 0.3em;
+  padding: 2em 0;
+  justify-content: center;
+  align-items: center;
+
+  .DBui-inputDateRowMonthYear,
+  .DBui-inputDateRowHeaderDay,
+  .DBui-inputDateRowDay {
+    display: flex;
+    flex-direction: row;
+    gap: 0.8em;
+  }
+
+  .DBui-inputDateRowMonthYear {
+    gap: 0.5em;
+    margin-left: 0.5em;
+    align-items: center;
+  }
+
+  .DBui-inputDateRowHeaderDay,
+  .DBui-inputDateRowDay {
+
+    .DBui-inputDateHeader,
+    .DBui-inputDateDay {
+      width: 30px;
+      height: 30px;
+      text-align: center;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .DBui-inputDateDay {
+      cursor: not-allowed;
+
+      &[data-hidden-hover='false'] {
+        cursor: pointer;
+
+        &:hover {
+          background-color: #03287E;
+          border-radius: 100%;
+          color: #FFFFFF;
+        }
+      }
+
+      &[data-checked='true'] {
+        background-color: #03287E;
+        color: #FFFFFF;
+        border-radius: 100%;
+      }
+    }
+  }
+}
+
+.DBui-inputDateRowMonthYearSelected {
+  cursor: pointer;
+  text-align: center;
+}
+
+.DBui-inputDateRowMonthYearOption {
+  cursor: pointer;
+  padding: 0.5em 1em;
+
+  &:hover {
+    background-color: #03287E;
+    color: #FFFFFF;
+  }
+
+  &[data-checked='true'] {
+    background-color: #03287E;
+    color: #FFFFFF;
+  }
+}

package/dist/components/input/input-date-range/index.scss

@@ -0,0 +1,101 @@
+@import '../extend.scss';
+
+.DBui-inputDateRange {
+  @extend .DBui-input;
+  height: 35px;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+
+  &[data-disabled='true'] {
+    @extend .DBui-disabled;
+  }
+
+  .DBui-clearIconInputDateRange {
+    width: 20px;
+
+    &[data-hidden='true'] {
+      display: none !important;
+    }
+
+    &:hover {
+      opacity: 0.8;
+    }
+  }
+}
+
+.DBui-inputDateRangeWrapperCalendar {
+  display: flex;
+  flex-direction: column;
+  gap: 0.3em;
+  padding: 2em 0;
+  justify-content: center;
+  align-items: center;
+
+  .DBui-inputDateRangeRowMonthYear,
+  .DBui-inputDateRangeRowHeaderDay,
+  .DBui-inputDateRangeRowDay {
+    display: flex;
+    flex-direction: row;
+    gap: 0.8em;
+  }
+
+  .DBui-inputDateRangeRowMonthYear {
+    gap: 0.5em;
+    margin-left: 0.5em;
+    align-items: center;
+  }
+
+  .DBui-inputDateRangeRowHeaderDay,
+  .DBui-inputDateRangeRowDay {
+    cursor: pointer;
+
+    .DBui-inputDateRangeHeader,
+    .DBui-inputDateRangeDay {
+      width: 30px;
+      height: 30px;
+      text-align: center;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .DBui-inputDateRangeDay {
+
+      &[data-hidden-hover='false'] {
+
+        &:hover {
+          background-color: #03287E;
+          border-radius: 100%;
+          color: #FFFFFF;
+        }
+      }
+
+      &[data-checked='true'] {
+        background-color: #03287E;
+        color: #FFFFFF;
+        border-radius: 100%;
+      }
+    }
+  }
+}
+
+.DBui-inputDateRangeRowMonthYearSelected {
+  cursor: pointer;
+  text-align: center;
+}
+
+.DBui-inputDateRangeRowMonthYearOption {
+  cursor: pointer;
+  padding: 0.5em 1em;
+
+  &:hover {
+    background-color: #03287E;
+    color: #FFFFFF;
+  }
+
+  &[data-checked='true'] {
+    background-color: #03287E;
+    color: #FFFFFF;
+  }
+}

package/dist/components/input/input-date-time/index.scss

@@ -0,0 +1,179 @@
+@import '../extend.scss';
+
+.DBui-inputDateTime {
+  @extend .DBui-input;
+  height: 35px;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+
+  &[data-disabled='true'] {
+    @extend .DBui-disabled;
+  }
+
+  .DBui-clearIconInputDateTime {
+    width: 20px;
+
+    &[data-hidden='true'] {
+      display: none !important;
+    }
+
+    &:hover {
+      opacity: 0.8;
+    }
+  }
+}
+
+.DBui-inputDateTimeWrapperCalendar {
+  display: flex;
+  flex-direction: column;
+  padding: 3em 1em;
+  gap: 0.8em;
+
+  @media (max-width: 425px) {
+    padding: 2.5em 0;
+    width: 99vw;
+  }
+
+  .DBui-inputDateTimeWrapperYearMonthDayTime {
+    display: flex;
+    flex-direction: row;
+    gap: 0.3em;
+    justify-content: center;
+    align-items: center;
+
+    @media (max-width: 425px) {
+      gap: 0.2em;
+    }
+
+    .DBui-inputDateTimeWrapperYearMonthDay {
+      display: flex;
+      flex-direction: column;
+      gap: 0.3em;
+      justify-content: center;
+      align-items: center;
+      border-right: 1px solid gray;
+      padding-right: 0.5em;
+
+
+      .DBui-inputDateTimeRowMonthYear,
+      .DBui-inputDateTimeRowHeaderDay,
+      .DBui-inputDateTimeRowDay {
+        display: flex;
+        flex-direction: row;
+        gap: 0.8em;
+
+        @media (max-width: 425px) {
+          gap: 0.2em;
+        }
+      }
+
+      .DBui-inputDateTimeRowMonthYear {
+        gap: 0.5em;
+        margin-left: 0.5em;
+        align-items: center;
+      }
+
+      .DBui-inputDateTimeRowHeaderDay,
+      .DBui-inputDateTimeRowDay {
+
+        .DBui-inputDateTimeHeader,
+        .DBui-inputDateTimeDay {
+          width: 30px;
+          height: 30px;
+          text-align: center;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+
+        .DBui-inputDateTimeDay {
+
+          cursor: not-allowed;
+
+          &[data-hidden-hover='false'] {
+            cursor: pointer;
+
+            &:hover {
+              background-color: #03287E;
+              border-radius: 100%;
+              color: #FFFFFF;
+            }
+          }
+
+          &[data-checked='true'] {
+            background-color: #03287E;
+            color: #FFFFFF;
+            border-radius: 100%;
+          }
+        }
+      }
+    }
+
+    .DBui-inputDateTimeWrapperHourMin {
+      padding: 0 0.3em;
+      align-self: flex-end;
+      flex-direction: column;
+      display: flex;
+
+      @media (max-width: 425px) {
+        padding: 0 0.2em;
+      }
+
+      .DBui-inputDateTimeWrapperHourMinOptions {
+        max-height: 200px;
+        overflow-y: scroll;
+        -ms-overflow-style: none;
+        /* IE and Edge */
+        scrollbar-width: none;
+        /* Firefox */
+
+        /* Hide scrollbar for Chrome, Safari and Opera */
+        &::-webkit-scrollbar {
+          display: none;
+        }
+
+        p {
+          padding: 0.5em;
+          cursor: pointer;
+
+          &:hover {
+            background-color: #03287E;
+            color: #FFFFFF;
+          }
+
+          &[data-checked='true'] {
+            background-color: #03287E;
+            color: #FFFFFF;
+          }
+        }
+      }
+    }
+  }
+
+  .DBui-inputDateTimeWrapperButton {
+    display: flex;
+    gap: 0.5em;
+    justify-content: flex-end;
+  }
+}
+
+.DBui-inputDateTimeRowMonthYearSelected {
+  cursor: pointer;
+  text-align: center;
+}
+
+.DBui-inputDateTimeRowMonthYearOption {
+  cursor: pointer;
+  padding: 0.5em 1em;
+
+  &:hover {
+    background-color: #03287E;
+    color: #FFFFFF;
+  }
+
+  &[data-checked='true'] {
+    background-color: #03287E;
+    color: #FFFFFF;
+  }
+}

package/dist/components/input/input-number/index.scss

@@ -0,0 +1,9 @@
+@import '../extend.scss';
+
+.DBui-inputNumber {
+    @extend .DBui-input;
+
+    &:disabled {
+        @extend .DBui-disabled;
+    }
+}

package/dist/components/input/input-password/index.scss

@@ -0,0 +1,22 @@
+@import '../extend.scss';
+
+.DBui-wrapInputPassword {
+    width: 100%;
+    position: relative;
+    
+    .DBui-inputPassword {
+        @extend .DBui-input;
+
+        padding-right: 1em;
+    }
+
+    .DBui-inputPasswordIcon {
+        position: absolute;
+        right: 5px;
+        top: 50%;
+        transform: translateY(-50%);
+        cursor: pointer;
+        width: 1.5em;
+        height: 1.5em;
+    }
+}