@appscode/design-system 1.1.0-alpha.8 → 1.1.0-beta.10

package/main.scss

@@ -1,18 +1,34 @@
+@charset "utf-8";
+// customize bulma css
+@import "@/assets/design-system/base/utilities/_customize-bulma.scss";
 
-@import "~assets/design-system/base/utilities/customize-bulma";
 // Third party CSS
-@import "~bulma";
-@import "~bulma-checkradio";
-@import "~bulma-switch";
-@import "~bulma-tooltip";
-@import url("https://fonts.googleapis.com/css2?family=Material+Icons&display=swap");
-@import "vue-multiselect/dist/vue-multiselect.min.css";
+@import "../node_modules/bulma/bulma.sass";
+@import "bulma-checkradio";
+@import "bulma-switch";
+@import "bulma-tooltip";
+@import "font-awesome/css/font-awesome.min.css";
+@import "vue-multiselect/dist/vue-multiselect.css";
 
 // BASE
-@import "~assets/design-system/base/utilities/all";
+@import "./base/utilities/all";
 
 // LAYOUTS
-@import "~assets/design-system/layouts/all";
+@import "./layouts/all";
 
 // COMPONENTS
-@import "~assets/design-system/components/all";
+@import "./components/all";
+
+// //BASE - Base styles, variables, mixins
+// @import "base/video-player";
+
+// COMPONENTS
+// @import "./cluster/resourceViewer";
+// @import "./cluster/app-drawer";
+
+// LAYOUTS - Page layout styles
+// @import "layouts/_clusterListPage";
+
+// KUBEDB COMPONENTS
+// @import "./kubedb/styles/scss/custom.scss";
+// @import "./kubedb/styles/scss/transitions.scss";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@appscode/design-system",
-  "version": "1.1.0-alpha.8",
+  "version": "1.1.0-beta.10",
   "description": "A design system for Appscode websites and dashboards made using Bulma",
   "main": "main.scss",
   "scripts": {

package/plugins/theme.js

@@ -99,9 +99,9 @@ export function getThemeHSL() {
   const saturation = getComputedStyle(
     document.documentElement
   ).getPropertyValue("--hsl-saturation");
-  const lightness = getComputedStyle(
-    document.documentElement
-  ).getPropertyValue("--hsl-lightness");
+  const lightness = getComputedStyle(document.documentElement).getPropertyValue(
+    "--hsl-lightness"
+  );
 
   return {
     hue,
@@ -115,9 +115,9 @@ export function setThemeHSL(h, s, l) {
   document.documentElement.style.setProperty("--hsl-lightness", l);
 }
 export function setFontHSL(h, s, l) {
-document.documentElement.style.setProperty("--font-hsl-hue", h);
-document.documentElement.style.setProperty("--font-hsl-saturation", s);
-document.documentElement.style.setProperty("--font-hsl-lightness", l);
+  document.documentElement.style.setProperty("--font-hsl-hue", h);
+  document.documentElement.style.setProperty("--font-hsl-saturation", s);
+  document.documentElement.style.setProperty("--font-hsl-lightness", l);
 }
 export function getFontHSL() {
   const hue = getComputedStyle(document.documentElement).getPropertyValue(
@@ -126,9 +126,9 @@ export function getFontHSL() {
   const saturation = getComputedStyle(
     document.documentElement
   ).getPropertyValue("--font-hsl-saturation");
-  const lightness = getComputedStyle(
-    document.documentElement
-  ).getPropertyValue("--font-hsl-lightness");
+  const lightness = getComputedStyle(document.documentElement).getPropertyValue(
+    "--font-hsl-lightness"
+  );
 
   return {
     hue,
@@ -140,3 +140,5 @@ export const loaderLightThemePrimaryColor = "#f5f7f9";
 export const loaderDarkThemePrimaryColor = "#2e323c";
 export const loaderLightThemeSecondaryColor = "#ecebeb";
 export const loaderDarkThemeSecondaryColor = "#21272e";
+export const sidebarLoaderLightThemePrimaryColor = "#0F4371";
+export const sidebarLoaderLightThemeSecondaryColor = "#0C365A";

package/plugins/vue-toaster.js

@@ -43,7 +43,7 @@ module.exports = {
         icon: "fa-warning",
         duration: 20000,
         type: "error",
-        className: "ac-toast is-error",
+        className: "ac-toast is-danger",
       },
     },
     {

package/vue-components/plugins/time-convert.js

@@ -0,0 +1,49 @@
+import moment from "moment";
+// import { useNow, useThrottleFn } from '@vueuse/core'
+
+const getTime = (option) => {
+  if (parseInt(option.time, 10) < 0 || !option.time) {
+    return undefined;
+  }
+  let time = option.time;
+
+  // moment(option.time).valueOf('x') needs to convert pharmer's api date to epoch time
+  time = moment(option.time).valueOf("x")
+    ? moment(option.time).valueOf("x")
+    : time * 1000;
+
+  return moment(time).format("MMM DD YYYY, h:mm A");
+};
+const getDayDifferences = (options) => {
+  const past = moment(options.past).isValid()
+    ? moment(options.past).valueOf("x") / 1000
+    : options.past;
+  const now = Date.now() / 1000;
+  const diff = now - past;
+  if (parseInt(options.past, 10) > 10) {
+    let ret = Math.floor(diff / 86400);
+    let unit = "";
+    if (diff < 60) {
+      ret = parseInt(diff, 10);
+      unit = " Second";
+    } else if (diff < 3600) {
+      ret = parseInt(diff / 60, 10);
+      unit = " Minute";
+    } else if (diff < 86400) {
+      ret = parseInt(diff / 3600, 10);
+      unit = " Hour";
+    } else {
+      ret = parseInt(diff / 86400, 10);
+      unit = " Day";
+    }
+    unit += ret > 1 ? "s" : "";
+    return ret + unit;
+  }
+  return undefined;
+};
+
+export default {
+  getTime,
+  // formatMoment,
+  getDayDifferences,
+};

package/vue-components/text.vue

@@ -0,0 +1 @@
+<script setup lang="ts"></script>

package/vue-components/types/cluster.ts

@@ -0,0 +1,6 @@
+export interface SelectedClusterType {
+  name: string;
+  displayName: string;
+  provider: string;
+  location: string;
+}

package/vue-components/types/importFlow.ts

@@ -0,0 +1,16 @@
+interface Substep {
+  component: string;
+  identifier: number;
+  title: string;
+  isVisible: boolean;
+  isValid: () => boolean;
+  nextStep: () => void;
+  nextStepButtonText?: () => string;
+}
+
+export interface Step {
+  identifier: number;
+  title: string;
+  isVisible: boolean;
+  substeps: Substep[];
+}

package/vue-components/types/longRunningTasks.ts

@@ -0,0 +1,20 @@
+export type TaskStatus =
+  | "Pending"
+  | "Running"
+  | "Success"
+  | "Failed"
+  | "Started";
+export interface TaskLog {
+  status?: TaskStatus;
+  msg?: string;
+  step?: string;
+  error?: string;
+  id?: string;
+}
+export interface Task extends Omit<TaskLog, "message"> {
+  logs: Array<string>;
+}
+export interface LongRunningTasksCtx {
+  natsSubject: string;
+  tasks: Array<Task>;
+}

package/vue-components/types/notification.ts

@@ -0,0 +1,6 @@
+import type { TaskLog } from "./longRunningTasks";
+
+export interface Notification extends TaskLog {
+  id: string;
+  time: number;
+}

package/vue-components/types/previewYaml.ts

@@ -0,0 +1,8 @@
+export interface PreviewYamlType {
+  content: string;
+  initContent: string;
+  isSecret: boolean;
+  name: string;
+  type: string;
+  uid: string;
+}

package/vue-components/types/table.ts

@@ -0,0 +1,54 @@
+export interface AcSortCtx {
+  index: number | null;
+  mode: "asc" | "desc" | string;
+  label: string;
+}
+export interface AcTableCell {
+  data: unknown;
+  sort?: string | number;
+  icon?: string;
+  color?: string;
+  link?: string;
+  tooltip?: string;
+}
+export interface AcTableCol {
+  name: string;
+  type: "object" | "string" | "number" | "date" | "integer";
+  priority: number;
+  pathTemplate?: string;
+  format?: string;
+  link?: Record<string, unknown>;
+  sort?: {
+    enable: boolean;
+    template: string;
+    type: string;
+  };
+  icon?: boolean;
+  textAlign?: string;
+  dashboard?: {
+    status: string;
+    message: string;
+    title: string;
+  };
+  exec?: Record<string, unknown>;
+}
+export interface AcTableRow {
+  cells: Array<{
+    data: unknown;
+    sort?: number | string;
+    color?: string;
+    link?: string;
+    icon?: string;
+  }>;
+  namespace?: string;
+}
+export type AcTable = {
+  columns: Array<AcTableCol>;
+  rows: Array<AcTableRow>;
+  name?: string;
+};
+
+export type AcDashboardList = Array<{
+  title: string;
+  url: string;
+}>;

package/vue-components/types/theme.ts

@@ -0,0 +1,10 @@
+interface Theme {
+  displayName: string;
+  iconClass: string;
+}
+
+export interface ThemeModes {
+  light: Theme;
+  dark: Theme;
+  system: Theme;
+}

package/vue-components/types/user.ts

@@ -0,0 +1,22 @@
+export interface User {
+  id: number;
+  login: string;
+  full_name: string;
+  email: string;
+  avatar_url: string;
+  language: string;
+  is_admin: boolean;
+  last_login: string;
+  created: string;
+  type: 0 | 1 | 2;
+  active: boolean;
+  prohibit_login: boolean;
+  location: string;
+  website: string;
+  description: string;
+  username: string;
+}
+
+export interface Organization extends User {
+  type: 1;
+}

package/vue-components/v2/card/Card.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="ac-single-card has-text-centered style-three"
+    class="ac-single-card has-text-centered vendor-card"
     :class="{ 'is-selected': isSelected }"
     @click="$emit('click', $event)"
     data-testid="card-list-item"

package/vue-components/v2/card/OverviewCards.vue

@@ -1,5 +1,20 @@
 <template>
-  <div class="overview-card">
-    <slot />
+  <div>
+    <h1>Hello there</h1>
+    <div class="overview-cards">
+      <slot />
+    </div>
   </div>
 </template>
+<style lang="scss" scoped>
+.overview-cards {
+  display: grid;
+  gap: 8px;
+  grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr));
+
+  border: 1px solid $primary-95;
+  padding: 16px;
+  height: 100%;
+  margin-right: 20px;
+}
+</style>

package/vue-components/v2/editor/FilteredFileEditor.vue

@@ -7,7 +7,7 @@
           v-if="isPreviewLoading || (!isPreviewLoading && previewYamls)"
           class="left-content"
         >
-          <div class="ac-files ac-hscrollbar pt-0">
+          <div class="ac-files ac-hscrollbar ac-vscrollbar pt-0">
             <ul v-if="!isPreviewLoading">
               <li
                 v-for="(previewYaml, idx) in filteredYamls"
@@ -59,8 +59,8 @@
   </div>
 </template>
 <script>
-import Preloader from "../preloader/Preloader.vue";
 import Banner from "../banner/Banner.vue";
+import Preloader from "../preloader/Preloader.vue";
 export default {
   components: {
     Editor: () => ({

package/vue-components/v2/editor/ResourceKeyValueEditor.vue

@@ -80,79 +80,79 @@ export default {
     DownloadBtn: () => import("./../button/DownloadBtn.vue"),
     DeleteConfirmationModal: () =>
       import("./../modals/DeleteConfirmationModal.vue"),
-    FilteredFileEditor: () => import("./FilteredFileEditor.vue")
+    FilteredFileEditor: () => import("./FilteredFileEditor.vue"),
   },
   props: {
     title: {
       type: String,
-      default: "Title"
+      default: "Title",
     },
     isSearchable: {
       type: Boolean,
-      default: false
+      default: false,
     },
     isPreviewLoading: {
       type: Boolean,
-      default: false
+      default: false,
     },
     isEditorReadOnly: {
       type: Boolean,
-      default: false
+      default: false,
     },
     previewYamls: {
       type: Array,
       default: () => {
         [];
-      }
+      },
     },
     visibleBtn: {
       type: Object,
       default: () => {
         return {};
-      }
+      },
     },
     showMinimap: {
       type: Boolean,
-      default: false
+      default: false,
     },
     isUpdateActive: {
       type: Boolean,
-      default: false
+      default: false,
     },
     deleteModalStatus: {
       type: String,
-      default: "closed"
+      default: "closed",
     },
     editorHeight: {
       type: Number,
-      default: 60
+      default: 60,
     },
     hideHeader: {
       type: Boolean,
-      default: false
+      default: false,
     },
     loaderColor: {
       type: Object,
       default: () => {
         return {};
-      }
+      },
     },
     theme: {
       type: String,
-      default: "light"
-    }
+      default: "light",
+    },
   },
   data() {
     return {
       activeKey: 0,
       toggleHideValue: "",
-      showDeleteDataModal: false
+      showDeleteDataModal: false,
     };
   },
   computed: {
     activeFile() {
       const activeFile = this.previewYamls.find(
-        element => element.uid === this.activeKey
+        (element) => element.uid === this.activeKey
       );
       return activeFile || { content: "", format: "yaml" };
     },
@@ -175,7 +175,7 @@ export default {
     showDeleteBtn() {
       if (this.visibleBtn.showDeleteBtn) return true;
       else return false;
-    }
+    },
   },
   methods: {
     onCopy() {
@@ -198,12 +198,12 @@ export default {
     setActiveKey(key) {
       this.activeKey = key;
       this.toggleHideValue = this.activeFile.isSecret;
-    }
+    },
   },
   watch: {
     deleteModalStatus(n) {
       if (n === "closed") this.showDeleteDataModal = false;
-    }
-  }
+    },
+  },
 };
 </script>

package/vue-components/v2/icons/Ellipsis.vue

@@ -1,3 +1,4 @@
 <template>
-  <i aria-hidden="true" class="fa fa-ellipsis-h"></i>
+  <!-- <i aria-hidden="true" class="fa fa-ellipsis-h"></i> -->
+  <span>More...</span>
 </template>

package/vue-components/v2/modal/Modal.vue

@@ -32,7 +32,6 @@
         <!-- modal body start  -->
         <div
           class="ac-modal-body ac-vscrollbar"
-          :class="modifierBodyClasses"
           data-testid="ac-modal-content-with-scroll"
         >
           <div class="ac-modal-content">
@@ -88,10 +87,6 @@ export default {
       type: Boolean,
       default: false,
     },
-    modifierBodyClasses: {
-      type: String,
-      default: "",
-    },
   },
 
   components: {

package/vue-components/v2/navbar/Appdrawer.vue

@@ -1,18 +1,43 @@
 <template>
   <div class="app-drawer-wrapper is-flex">
     <div
-      class="drawer-icon  is-flex is-justify-content-center is-align-items-center"
+      class="drawer-icon is-flex is-justify-content-center is-align-items-center"
     >
       <svg
-        class="gb_We"
-        focusable="false"
-        viewBox="0 0 24 24"
-        style="width: 22px;margin-top: 2px;"
-        :style="{ fill: 'white' }"
+        width="16"
+        height="16"
+        viewBox="0 0 16 16"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
       >
         <path
-          d="M6,8c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM12,20c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM6,20c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM6,14c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM12,14c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM16,6c0,1.1 0.9,2 2,2s2,-0.9 2,-2 -0.9,-2 -2,-2 -2,0.9 -2,2zM12,8c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM18,14c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM18,20c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2z"
-        ></path>
+          d="M6.66667 2H2V6.66667H6.66667V2Z"
+          stroke="#061B2D"
+          stroke-width="1.5"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+        <path
+          d="M14 2H9.33337V6.66667H14V2Z"
+          stroke="#061B2D"
+          stroke-width="1.5"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+        <path
+          d="M14 9.33334H9.33337V14H14V9.33334Z"
+          stroke="#061B2D"
+          stroke-width="1.5"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+        <path
+          d="M6.66667 9.33334H2V14H6.66667V9.33334Z"
+          stroke="#061B2D"
+          stroke-width="1.5"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
       </svg>
     </div>
     <!-- dropdown start -->
@@ -47,11 +72,11 @@ export default {
   props: {
     apps: {
       type: Array,
-      default: () => []
-    }
+      default: () => [],
+    },
   },
   components: {
-    NavbarItemContent: () => import("./NavbarItemContent.vue")
-  }
+    NavbarItemContent: () => import("./NavbarItemContent.vue"),
+  },
 };
 </script>

package/vue-components/v2/navbar/Navbar.vue

@@ -4,9 +4,9 @@
       <!-- navbar start  -->
       <nav class="ac-navbar">
         <!-- navbar logo start  -->
-        <div class="ac-navbar-brand">
+        <!-- <div class="ac-navbar-brand">
           <slot name="navbar-brand-logo" />
-        </div>
+        </div> -->
         <!-- navbar logo end -->
 
         <!-- navbar search area start  -->
@@ -26,4 +26,4 @@
       <!-- navbar end -->
     </div>
   </div>
-</template>
+</template>

package/vue-components/v2/navbar/NavbarItem.vue

@@ -2,4 +2,6 @@
   <div class="ac-menu-item">
     <slot />
   </div>
-</template>
+</template>
+
+<style></style>

package/vue-components/v2/navbar/NavbarItemContent.vue

@@ -2,4 +2,4 @@
   <div class="ac-menu-content">
     <slot />
   </div>
-</template>
+</template>

package/vue-components/v2/navbar/User.vue

@@ -1,11 +1,11 @@
 <template>
   <navbar-item>
     <button class="button ac-nav-button ac-profile-button">
-      {{ user.full_name || user.username }}
-      <i class="fa fa-angle-down" aria-hidden="true"></i>
       <div class="ac-user-profile">
         <img :src="user.avatar_url" alt="User Photo" />
       </div>
+      {{ user.full_name || user.username }}
+      <i class="fa fa-angle-down" aria-hidden="true"></i>
     </button>
     <navbar-item-content class="navbar-dropdown-wrapper">
       <div
@@ -52,13 +52,7 @@
             key="switcher"
           >
             <a
-              class="
-                ac-dropdown-button
-                is-fullwidth
-                is-flex
-                is-justify-content-space-between
-                is-align-items-center
-              "
+              class="ac-dropdown-button is-fullwidth is-flex is-justify-content-space-between is-align-items-center"
               @click="toggleList()"
             >
               <span>Switch Account</span>
@@ -93,13 +87,7 @@
                     />
                   </div>
                   <div
-                    class="
-                      is-flex
-                      is-align-items-center
-                      is-justify-content-space-between
-                      is-fullwidth
-                      ml-10
-                    "
+                    class="is-flex is-align-items-center is-justify-content-space-between is-fullwidth ml-10"
                   >
                     <div class="org-info">
                       <strong
@@ -117,12 +105,7 @@
                     </div>
                     <span
                       v-if="idx === 0"
-                      class="
-                        material-icons-outlined
-                        font-size-18
-                        ml-10
-                        is-pulled-right
-                      "
+                      class="material-icons-outlined font-size-18 ml-10 is-pulled-right"
                     >
                       check
                     </span>