@plutonhq/core-frontend 0.1.2 → 0.1.3

package/package.json

@@ -1,7 +1,7 @@
 {
    "name": "@plutonhq/core-frontend",
    "description": "Pluton Core Frontend Library",
-   "version": "0.1.2",
+   "version": "0.1.3",
    "author": "Plutonhq",
    "license": "Apache-2.0",
    "publishConfig": {
@@ -82,8 +82,18 @@
          "types": "./dist-lib/routes/*/*.d.ts",
          "import": "./dist-lib/routes/*/*.js"
       },
-      "./routes/*/*.module.scss": "./dist-lib/routes/*/*.module.scss.js",
-      "./components/*/*.module.scss": "./dist-lib/components/*/*.module.scss.js",
+      "./routes/*/*.module.scss": {
+         "import": "./dist-lib/routes/*/*.module.scss.js",
+         "default": "./dist-lib/routes/*/*.module.scss.js"
+      },
+      "./components/*/*.module.scss": {
+         "import": "./dist-lib/components/*/*.module.scss.js",
+         "default": "./dist-lib/components/*/*.module.scss.js"
+      },
+      "./components/*/*/*.module.scss": {
+         "import": "./dist-lib/components/*/*/*.module.scss.js",
+         "default": "./dist-lib/components/*/*/*.module.scss.js"
+      },
       "./routes/*/*": "./dist-lib/routes/*/*",
       "./components/*/*": "./dist-lib/components/*/*",
       "./services": {
@@ -113,7 +123,9 @@
          "types": "./dist-lib/config/*.d.ts",
          "import": "./dist-lib/config/*.js"
       },
-      "./styles/*": "./dist-lib/styles/*",
+      "./styles/*.scss": "./dist-lib/styles/*.scss",
+      "./styles/*.css": "./dist-lib/styles/*.css",
+      "./styles/core-frontend.css": "./dist-lib/styles/core-frontend.css",
       "./router": {
          "types": "./dist-lib/router.d.ts",
          "import": "./dist-lib/router.js"

package/dist-lib/components/App/App/App.module.scss

@@ -1,14 +0,0 @@
-.app {
-   width: 100%;
-   display: flex;
-   justify-content: center;
-   min-height: calc(100vh - 60px);
-   padding: 0 20px;
-   box-sizing: border-box;
-}
-
-.appContainer {
-   width: var(--container-width);
-   padding-top: 6%;
-   display: flex;
-}

package/dist-lib/components/App/AppContent/AppContent.module.scss

@@ -1,12 +0,0 @@
-.appContentWrap {
-   margin-left: 40px;
-   margin-bottom: 40px;
-   width: 100%;
-}
-
-@media only screen and (max-width: 768px) {
-   .appContentWrap {
-      margin-left: 0;
-      padding-bottom: 0;
-   }
-}

package/dist-lib/components/App/Footer/Footer.module.scss

@@ -1,23 +0,0 @@
-.footer {
-   width: 100%;
-   bottom: 0px;
-   padding: 20px 0;
-   left: 0;
-   right: 0;
-   margin: 0 auto;
-   text-align: center;
-   color: var(--icon-color);
-   font-size: 0.9em;
-   a {
-      color: inherit;
-      &:hover {
-         color: var(--background-text-color-dark);
-      }
-   }
-   button {
-      color: inherit;
-      &:hover {
-         color: var(--background-text-color);
-      }
-   }
-}

package/dist-lib/components/App/SideNav/SideNav.module.scss

@@ -1,58 +0,0 @@
-.sideNav {
-   position: absolute;
-}
-
-.logo {
-   position: relative;
-   background-color: var(--primary-color);
-   padding: 10px;
-   border-radius: 50%;
-   box-sizing: border-box;
-   display: flex;
-}
-
-.navMenu {
-   display: flex;
-   flex-direction: column;
-   gap: 10px;
-   align-items: center;
-   margin-top: 10px;
-   & > a {
-      width: 50px;
-      height: 50px;
-      background: transparent;
-      border-radius: 50%;
-      color: var(--nav-color);
-      cursor: pointer;
-
-      &:global(.active) {
-         background-color: var(--content-background-color);
-         color: var(--primary-color);
-      }
-   }
-}
-
-.navMenuLabel {
-   padding: 10px;
-   display: block;
-   text-align: center;
-}
-
-@media only screen and (max-width: 768px) {
-   .logo {
-      display: none;
-   }
-   .navMenu {
-      position: fixed;
-      width: 100%;
-      left: 0;
-      bottom: 0;
-      z-index: 999;
-      flex-direction: row-reverse;
-      background: var(--content-background-color);
-      box-shadow: 0 0 15px var(--content-shadow-color);
-      margin-top: 0;
-      gap: 0;
-      justify-content: space-around;
-   }
-}

package/dist-lib/components/Device/DeviceBackups/DeviceBackups.module.scss

@@ -1,142 +0,0 @@
-.devicePlans {
-   display: flex;
-   gap: 20px;
-   margin-bottom: 30px;
-
-   .widget {
-      border: 1px solid var(--line-color);
-      padding: 20px;
-      border-radius: 6px;
-      box-sizing: border-box;
-      width: calc(33.33% - 15px);
-      .widgetTitle {
-         padding: 2px 6px;
-         background-color: var(--content-background-color);
-         border: 1px solid var(--line-color);
-         color: var(--content-title-color);
-         border-radius: 4px;
-         font-size: 0.6875rem;
-         font-weight: 600;
-         width: max-content;
-         position: relative;
-         margin-top: -30px;
-         span {
-            color: var(--icon-color);
-         }
-      }
-      .widgetContent {
-         width: 100%;
-         display: flex;
-         flex-direction: column;
-         gap: 20px;
-         padding-top: 20px;
-         padding-bottom: 10px;
-
-         .noData {
-            width: 100%;
-            text-align: center;
-            font-size: 0.9em;
-            padding-top: 20px;
-         }
-      }
-   }
-
-   .plans,
-   .storages {
-      width: 40%;
-      .planItem {
-         display: flex;
-         .status {
-            display: flex;
-            align-items: center;
-            margin-right: 10px;
-            position: relative;
-            color: var(--success-label);
-            &.paused {
-               color: var(--icon-color);
-            }
-            .iconBlock {
-               width: 40px;
-               height: 40px;
-               flex: 0 0 40px;
-               display: flex;
-               align-items: center;
-               justify-content: center;
-               border-radius: 50%;
-               background-color: var(--background-color);
-            }
-         }
-         .planContent {
-            display: flex;
-            flex-direction: column;
-            font-size: 0.9em;
-            h4 {
-               margin: 0;
-               margin-bottom: 4px;
-               color: var(--content-title-color);
-               a {
-                  color: inherit;
-                  &:hover {
-                     color: var(--primary-color);
-                  }
-               }
-            }
-            .planStats {
-               display: flex;
-               flex-direction: row;
-               gap: 10px;
-            }
-         }
-      }
-   }
-
-   .paths {
-      .pathItem {
-         display: flex;
-         flex-direction: column;
-         font-size: 0.9em;
-         .pathPlanTitle {
-            color: var(--content-title-color);
-            margin-bottom: 4px;
-            :global(.icon) {
-               color: var(--icon-color);
-            }
-            a {
-               color: inherit;
-               &:hover {
-                  color: var(--primary-color);
-               }
-            }
-         }
-         .planPaths {
-            display: flex;
-            flex-direction: column;
-            gap: 3px;
-            padding-left: 20px;
-         }
-      }
-   }
-
-   .storages {
-      width: 25%;
-      .planItem {
-         .iconBlock {
-            img {
-               max-width: 16px;
-               height: auto;
-            }
-         }
-      }
-   }
-}
-
-@media only screen and (max-width: 768px) {
-   .devicePlans {
-      flex-direction: column;
-      .plans,
-      .storages,
-      .widget {
-         width: 100%;
-      }
-   }
-}

package/dist-lib/components/Device/DeviceInfo/DeviceInfo.module.scss

@@ -1,214 +0,0 @@
-.deviceContent {
-   width: 100%;
-   position: relative;
-   padding: 30px;
-   border-radius: 7px;
-   box-sizing: border-box;
-   background-color: var(--content-background-color);
-   color: var(--content-text-color-light);
-   box-shadow: 0 0 15px var(--content-shadow-color);
-   min-height: 200px;
-   margin-top: 20px;
-}
-
-.iconBlock {
-   width: 40px;
-   height: 40px;
-   flex: 0 0 40px;
-   display: flex;
-   align-items: center;
-   justify-content: center;
-   border-radius: 50%;
-   background-color: var(--background-color);
-   color: var(--primary-color);
-}
-
-.deviceInfo {
-   width: 100%;
-   &.reloading {
-      opacity: 0.6;
-      user-select: none;
-   }
-}
-
-.topComponents {
-   display: flex;
-   gap: 20px;
-   margin-bottom: 30px;
-
-   .widget {
-      border: 1px solid var(--line-color);
-      padding: 20px;
-      border-radius: 6px;
-      box-sizing: border-box;
-      width: calc(33.33% - 15px);
-      .widgetTitle {
-         padding: 2px 6px;
-         background-color: var(--content-background-color);
-         border: 1px solid var(--line-color);
-         color: var(--content-title-color);
-         border-radius: 4px;
-         font-size: 0.6875rem;
-         font-weight: 600;
-         width: max-content;
-         position: relative;
-         margin-top: -30px;
-         span {
-            color: var(--icon-color);
-         }
-      }
-      .widgetContent {
-         width: 100%;
-         display: flex;
-         flex-direction: column;
-         gap: 15px;
-         padding-top: 10px;
-      }
-      .infoBlock {
-         width: 100%;
-         display: flex;
-         gap: 15px;
-         align-items: center;
-         .infoBlockRight {
-            width: 100%;
-            display: flex;
-            flex-direction: column;
-            gap: 2px;
-            color: var(--content-text-color);
-            font-weight: 600;
-            font-size: 0.625rem;
-            span:nth-child(1) {
-               font-size: 0.625rem;
-               color: var(--icon-color);
-            }
-            span:nth-child(2) {
-               display: block;
-               width: 90%;
-               white-space: nowrap;
-               overflow: hidden;
-               text-overflow: ellipsis;
-            }
-         }
-      }
-   }
-}
-
-.additionalMemory {
-   color: var(--icon-color);
-   background-color: var(--line-color);
-   font-style: normal;
-   font-size: 0.6rem;
-   padding: 2px 6px;
-   border-radius: 6px;
-   margin-left: 2px;
-}
-
-.progressBarWrap {
-   display: flex;
-   align-items: center;
-   gap: 7px;
-}
-.progressBar {
-   width: 100%;
-   height: 10px;
-   border-radius: 4px;
-   margin-top: 3px;
-   background-color: var(--line-color);
-   display: inline-block;
-   .progressBarFill {
-      height: 100%;
-      border-radius: 4px;
-      background-color: turquoise;
-      position: relative;
-      transition: all 0.2s linear;
-      min-width: 12%;
-      span {
-         font-weight: 600;
-         font-size: 0.625rem;
-         line-height: 1.1em;
-         position: absolute;
-         color: #fff !important;
-         right: 5px;
-      }
-   }
-}
-
-.component {
-   border: 1px solid var(--line-color);
-   padding: 20px;
-   margin-bottom: 30px;
-   border-radius: 6px;
-   box-sizing: border-box;
-   width: 100%;
-   .componentTitle {
-      padding: 2px 10px 2px 8px;
-      background-color: var(--content-background-color);
-      border: 1px solid var(--line-color);
-      color: var(--content-title-color);
-      border-radius: 4px;
-      font-size: 0.6875rem;
-      font-weight: 600;
-      width: max-content;
-      position: relative;
-      margin-top: -30px;
-      span {
-         color: var(--icon-color);
-      }
-   }
-   .contentBlock {
-      width: calc(100% - 50px);
-   }
-   .componentContent {
-      width: 100%;
-      padding-top: 15px;
-      display: grid;
-      grid-template-columns: repeat(3, minmax(0, 1fr));
-      gap: 20px;
-      align-items: center;
-   }
-   .item {
-      display: flex;
-      gap: 10px;
-      border: 1px solid var(--line-color);
-      padding: 20px;
-      border-radius: 6px;
-      box-sizing: border-box;
-      font-size: 0.7rem;
-      align-items: center;
-      position: relative;
-      h4 {
-         margin: 0;
-         color: var(--content-title-color);
-         white-space: nowrap;
-         overflow: hidden;
-         text-overflow: ellipsis;
-      }
-      .blockLabel {
-         position: absolute;
-         top: -8px;
-         right: 8px;
-      }
-   }
-}
-
-@media only screen and (max-width: 768px) {
-   .topComponents {
-      flex-direction: column;
-      .widget {
-         width: 100%;
-         .infoBlock .infoBlockRight {
-            width: 190px;
-         }
-      }
-   }
-   .component {
-      .componentContent {
-         display: flex;
-         flex-direction: column;
-         align-items: flex-start;
-         .item {
-            width: 100%;
-         }
-      }
-   }
-}

package/dist-lib/components/Device/DeviceItem/DeviceItem.module.scss

@@ -1,216 +0,0 @@
-.device {
-   display: flex;
-   flex-direction: row;
-   align-items: center;
-   position: relative;
-   padding: 10px;
-   margin-bottom: 20px;
-   gap: 10px;
-   border-radius: 7px;
-   background-color: var(--content-background-color);
-   color: var(--content-text-color-light);
-   box-shadow: 0 0 15px var(--content-shadow-color);
-   transition: all 0.2s linear;
-   &:hover {
-      box-shadow: 0 0 20px var(--content-shadow-color);
-   }
-}
-
-.leftContent {
-   flex-basis: 40%;
-   display: flex;
-   flex-direction: row;
-   align-items: center;
-}
-.rightContent {
-   display: flex;
-   flex-direction: row;
-   align-items: center;
-   flex-basis: 60%;
-   justify-content: right;
-   gap: 10px;
-}
-
-.deviceType {
-   display: flex;
-   align-items: center;
-   margin-right: 10px;
-   margin-left: 5px;
-   position: relative;
-   color: var(--icon-color);
-   .deviceOS {
-      position: absolute;
-      bottom: 13px;
-      left: 10px;
-   }
-   .connectionStatus {
-      width: 12px;
-      height: 12px;
-      border-radius: 50%;
-      background-color: var(--line-active-color);
-      position: absolute;
-      top: 3px;
-      right: 0px;
-      z-index: 9;
-
-      &.connected {
-         background-color: turquoise;
-      }
-   }
-}
-
-.content {
-   display: flex;
-   flex-direction: column;
-   color: var(--content-text-color-light);
-   a {
-      color: inherit;
-      &:hover {
-         color: inherit;
-         h4 {
-            color: var(--primary-color);
-         }
-      }
-   }
-}
-
-.title {
-   display: flex;
-   flex-direction: row;
-
-   .mainLabel {
-      line-height: 0.9rem;
-   }
-   h4 {
-      margin: 0;
-      margin-bottom: 2px;
-      color: var(--content-text-color);
-      display: flex;
-      align-items: center;
-   }
-   :global(.icon) {
-      position: relative;
-      top: 2px;
-      margin-left: 5px;
-      opacity: 0.5;
-   }
-}
-
-.type {
-   text-transform: capitalize;
-}
-
-.version {
-   margin-right: 30px;
-   display: flex;
-   align-items: center;
-   :global(.icon) {
-      position: relative;
-      top: 2px;
-      margin-right: 5px;
-      opacity: 0.5;
-   }
-   i {
-      font-style: normal;
-   }
-   b {
-      margin-left: 3px;
-      color: #06ba9f;
-   }
-   &.versionUpdate {
-      cursor: pointer;
-      &:hover {
-         color: var(--primary-color);
-      }
-   }
-}
-
-.moreBtn {
-   color: var(--content-text-color-light);
-   padding: 3px 6px;
-   border-radius: 4px;
-   &.moreBtnActive {
-      background-color: var(--primary-color-light);
-      color: var(--primary-color);
-   }
-}
-
-.settings {
-   position: absolute;
-   z-index: 99;
-   top: 45px;
-   right: 15px;
-   display: flex;
-   flex-direction: column;
-   justify-content: left;
-   width: 120px;
-   text-align: left;
-   align-items: center;
-   background: var(--content-background-color);
-   border: 1px solid var(--line-color);
-   border-radius: 6px;
-   button {
-      padding: 6px 10px;
-      width: 100%;
-      text-align: left;
-      color: var(--content-text-color-light);
-      &:hover {
-         background-color: var(--primary-color-light);
-         color: var(--primary-color);
-      }
-   }
-}
-
-.deviceGrid {
-   width: 100%;
-   margin: 0;
-   flex-direction: column;
-   align-items: baseline;
-   padding: 0;
-   padding-bottom: 12px;
-   .leftContent {
-      padding: 12px;
-      width: 100%;
-      box-sizing: border-box;
-   }
-   .rightContent {
-      width: 100%;
-      flex-basis: unset;
-      justify-content: flex-start;
-      padding: 6px 10px;
-      box-sizing: border-box;
-      background: var(--primary-color-lighter);
-      .moreBtn {
-         margin-left: auto;
-      }
-   }
-   .settings {
-      bottom: 10px;
-      top: auto;
-      right: 40px;
-   }
-}
-
-@media only screen and (max-width: 768px) {
-   .device {
-      flex-direction: column;
-      align-items: flex-start;
-      gap: 5px;
-
-      .rightContent {
-         width: 100%;
-         justify-content: flex-start;
-         border-top: 1px solid var(--line-color);
-         padding-top: 10px;
-         margin-top: 10px;
-         gap: 0;
-         button.moreBtn {
-            margin-left: auto;
-         }
-      }
-
-      .settings {
-         right: 35px;
-      }
-   }
-}