@appscode/design-system 0.0.21-alpha.3 → 0.4.27

package/layouts/_code-preview.scss

@@ -1,6 +1,6 @@
 .component-wrapper {
   .component-inner {
-    margin-bottom: 20px;
+    margin: 20px;
     border: 1px solid $ac-white-light;
     border-radius: 4px;
     display: flex;
@@ -18,6 +18,10 @@
       .ac-html-preview {
         width: 100%;
 
+        i.is-block {
+          color: $ac-color-value;
+        }
+
         .ac-navbar-area {
           position: inherit;
         }
@@ -29,7 +33,7 @@
     }
 
     &.ac-bg-dark {
-      background-color: $ac-bg-dark;
+      background-color: $ac-color-heading;
     }
 
     .ac-html-preview {
@@ -54,13 +58,13 @@
 
       /* Handle */
       &::-webkit-scrollbar-thumb {
-        background: #8392a5;
+        background-color: $ac-gray-light;
         border-radius: 10px;
       }
 
       /* Handle on hover */
       &::-webkit-scrollbar-thumb:hover {
-        background: #8392a5;
+        background-color: $ac-gray-light;
       }
 
       .number {
@@ -91,7 +95,7 @@
 }
 
 .ac-code-preview-wrapper {
-  border: 1px solid #e5e8ea;
+  border: 1px solid $ac-white-light;
   border-radius: 4px;
 
   .ac-code-header {
@@ -105,15 +109,18 @@
 
 // new code preview
 .ac-components {
+  margin: 20px;
   .single-component {
-    box-shadow: $ac-shadow-1;
+    // box-shadow: $ac-shadow-1;
+    border: 1px solid $ac-white-light;
     border-radius: 4px;
     margin-bottom: 25px;
+    overflow: hidden;
 
     .component-header {
       display: flex;
       justify-content: space-between;
-      border-bottom: 1px solid #edf2f7;
+      border-bottom: 1px solid $ac-white-light;
       background-color: $ac-white;
 
       h3 {
@@ -121,7 +128,7 @@
         font-size: 16px;
         font-weight: 500;
         font-family: $ac-family-paragraph;
-        color: #333;
+        color: $ac-color-value;
       }
 
       .component-switch {
@@ -145,17 +152,21 @@
         z-index: 1;
         max-height: 500px;
         overflow-y: auto;
+
         .copy-button {
           position: absolute;
           right: 5px;
           top: 5px;
+
           &:hover {
             box-shadow: none;
           }
         }
+
         pre {
           margin: 0;
           border-radius: 4px;
+          font-size: 14px;
 
           .token {
             &.tag {

package/main.scss

@@ -1,65 +1,18 @@
+
+@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";
 
 // BASE
-@import "~assets/design-system/base/utilities/initial-variables";
-@import "~assets/design-system/base/utilities/derived-variables";
-@import "~assets/design-system/base/utilities/typography";
-@import "~assets/design-system/base/utilities/default";
-@import "~assets/design-system/base/utilities/mixin";
+@import "~assets/design-system/base/utilities/all";
 
 // LAYOUTS
-@import "~assets/design-system/layouts/code-preview";
+@import "~assets/design-system/layouts/all";
 
 // COMPONENTS
-@import "~assets/design-system/components/ac-alert-box";
-@import "~assets/design-system/components/ac-select-box";
-@import "~assets/design-system/components/ac-multi-select";
-@import "~assets/design-system/components/ac-code-highlight";
-@import "~assets/design-system/components/navbar";
-@import "~assets/design-system/components/breadcumb";
-@import "~assets/design-system/components/card-body-wrapper";
-@import "~assets/design-system/components/ac-options";
-@import "~assets/design-system/components/left-sidebar-menu";
-@import "~assets/design-system/components/dashboard-header";
-@import "~assets/design-system/components/widget-menu";
-@import "~assets/design-system/components/buttons";
-@import "~assets/design-system/components/ac-input";
-@import "~assets/design-system/components/ac-content-layout";
-@import "~assets/design-system/components/ac-table";
-@import "~assets/design-system/components/progress-bar";
-@import "~assets/design-system/components/go-to-top";
-@import "~assets/design-system/components/image-upload";
-@import "~assets/design-system/components/ac-modal";
-@import "~assets/design-system/components/ac-drag";
-@import "~assets/design-system/components/ac-tabs";
-@import "~assets/design-system/components/payment-card";
-@import "~assets/design-system/components/ac-accordion";
-@import "~assets/design-system/components/ac-card";
-@import "~assets/design-system/components/add-card";
-@import "~assets/design-system/components/subscription-card";
-@import "~assets/design-system/components/ac-calendar";
-@import "~assets/design-system/components/ac-tags";
-@import "~assets/design-system/components/nested-list";
-@import "~assets/design-system/components/overview-info";
-@import "~assets/design-system/components/pricing-table";
-@import "~assets/design-system/components/table-of-content";
-@import "~assets/design-system/components/preview-modal";
-@import "~assets/design-system/components/wizard";
-@import "~assets/design-system/components/preloader";
-@import "~assets/design-system/components/pagination";
-@import "~assets/design-system/components/ui-builder/ui-builder";
-@import "~assets/design-system/components/ac-toaster/ac-toasted";
-@import "~assets/design-system/components/bbum/post";
-@import "~assets/design-system/components/bbum/single-post-preview";
-@import "~assets/design-system/components/bbum/user-profile";
-@import "~assets/design-system/components/bbum/sign-up-notification";
-@import "~assets/design-system/components/bbum/activities-header";
-@import "~assets/design-system/components/bbum/card-team";
-@import "~assets/design-system/components/bbum/information-center";
-@import "~assets/design-system/components/bbum/left-sidebar";
-@import "~assets/design-system/components/bbum/mobile-desktop";
+@import "~assets/design-system/components/all";

package/package.json

@@ -1,18 +1,15 @@
 {
   "name": "@appscode/design-system",
-  "version": "0.0.21-alpha.3",
+  "version": "0.4.27",
   "description": "A design system for Appscode websites and dashboards made using Bulma",
   "main": "main.scss",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "dependencies": {
-    "@appscode/design-system-images": "0.0.13",
-    "bulma-checkradio": "^1.1.1",
-    "bulma-switch": "^2.0.0",
-    "bulma-tooltip": "^3.0.2",
-    "v-calendar": "^1.0.6",
-    "vue-multiselect": "^2.1.6"
+    "@appscode/design-system-images": "^0.0.13",
+    "crypto-js": "^4.1.1",
+    "fast-json-stable-stringify": "^2.1.0"
   },
   "repository": {
     "type": "git",

package/plugins/caching.ts

@@ -0,0 +1,243 @@
+import { AxiosRequestConfig, AxiosResponse } from "axios";
+import md5 from "crypto-js/md5";
+import stringify from "fast-json-stable-stringify";
+
+const resourceListApiRgx =
+  /^\/clusters\/([^/]+)\/([^/]+)\/proxy\/([^/]+)\/([^/]+)(\/namespaces\/([^/?]+))?\/([^/?]+)(.*)$/;
+const usermenuUpdateApiRgx =
+  /^\/clusters\/([^/]+)\/([^/]+)\/proxy\/meta\.k8s\.appscode\.com\/([^/]+)\/usermenus\/cluster$/;
+
+function getRequestInterceptor(config: AxiosRequestConfig) {
+  // get call
+  const { url, _recurringCall, params } = config;
+  const matchListApi = url?.match(resourceListApiRgx);
+  if (matchListApi) {
+    // url matches list / render api call
+    const [, user, cluster, group, version, , namespace, resource] =
+      matchListApi;
+
+    const suffix = `${user}.${cluster}.${group}.${version}.${resource}${
+      namespace ? ".ns." + namespace : ""
+    }${params ? ".q." + md5(stringify(params)).toString() : ""}`;
+
+    if (_recurringCall) {
+      // always send latest date time as ctag
+      return new Date().getTime();
+    } else {
+      // read ctag from local storage if exists
+      const storageKey = `ctag.${suffix}`;
+      // read local storage ctag
+      return localStorage.getItem(storageKey);
+    }
+  }
+}
+
+function getResponseInterceptor(resp: AxiosResponse) {
+  // get call
+  const { config, headers } = resp;
+  const { url, _recurringCall, params } = config;
+
+  // queryParams without ctag
+  const queryParamsWithoutCtag = Object.keys(params).reduce((ob, key) => {
+    if (key !== "ctag") return { ...ob, [key]: params[key] };
+    else return { ...ob };
+  }, {});
+
+  const matchListApi = url?.match(resourceListApiRgx);
+  if (matchListApi) {
+    // url matches list / render api call
+    // window.console.log(matchListApi)
+    const [, user, cluster, group, version, , namespace, resource] =
+      matchListApi;
+
+    const suffix = `${user}.${cluster}.${group}.${version}.${resource}${
+      namespace ? ".ns." + namespace : ""
+    }${
+      params ? ".q." + md5(stringify(queryParamsWithoutCtag)).toString() : ""
+    }`;
+
+    const storageKey = `etag.${suffix}`;
+    // local storage etag
+    const eTag = localStorage.getItem(storageKey);
+    // etag in header
+    const headerEtag = headers?.["etag"];
+
+    // window.console.log({ eTag, headerEtag, _recurringCall, url });
+
+    if (_recurringCall) {
+      // for recurring api call
+      if (headerEtag && headerEtag !== eTag) {
+        // etag missmatch
+        if (params.ctag) {
+          // save request query parameter ctag into local storage
+          localStorage.setItem(`ctag.${suffix}`, params.ctag);
+        }
+        // update store etag with latest header etag
+        localStorage.setItem(`etag.${suffix}`, headerEtag);
+
+        if (namespace) {
+          // for namespaced list calls if etag missmatch happens
+          // update the ctag storage for all namespaces
+          // this will force the all namespaced list call to ignore disk cache
+          localStorage.setItem(
+            `etag.${user}.${cluster}.${group}.${version}.${resource}`,
+            new Date().getTime().toString()
+          );
+        }
+      }
+    } else {
+      // not recurring api call
+      if (eTag !== headerEtag && headerEtag) {
+        // if the etag missmatches, then the data has changed
+        // update local etag
+        localStorage.setItem(storageKey, headerEtag);
+      }
+    }
+  }
+}
+
+function putResponseInterceptor(resp: AxiosResponse) {
+  const { config } = resp;
+  const { url } = config;
+  const matchUsermenuUpdate = url?.match(usermenuUpdateApiRgx);
+  if (matchUsermenuUpdate) {
+    // user menu update api is called
+    const [, user, cluster, version] = matchUsermenuUpdate;
+
+    // calculate the local storage key
+    const renderStorageKey = `ctag.${user}.${cluster}.meta.k8s.appscode.com.${version}.rendermenus.q.${md5(
+      stringify({
+        apiVersion: `meta.k8s.appscode.com/${version}`,
+        kind: "RenderMenu",
+        request: {
+          menu: "cluster",
+          mode: "Accordion",
+        },
+      })
+    ).toString()}`;
+    const availableMenuStorageKey = `ctag.${user}.${cluster}.meta.k8s.appscode.com.${version}.usermenus`;
+
+    // set new ctag to that storage key
+    // next time render menu is called, cached data won't be used
+    localStorage.setItem(renderStorageKey, new Date().getTime().toString());
+    // for all available menus api
+    localStorage.setItem(
+      availableMenuStorageKey,
+      new Date().getTime().toString()
+    );
+  }
+}
+
+export function handleCacheFromYamls(
+  yamls: Array<{
+    apiVersion: string;
+    kind: string;
+    metadata: { name: string; namespace: string };
+  }>,
+  user: string,
+  cluster: string,
+  gkToGvrMap: Record<string, string>
+) {
+  return function () {
+    yamls.forEach((yaml) => {
+      const { apiVersion, kind, metadata } = yaml;
+      const { namespace } = metadata || {};
+      const apiVersionMatch = apiVersion.match(/^(([^/]+)\/)?([^/]+)$/);
+      if (apiVersionMatch) {
+        // separate the group and version
+        const [, , group] = apiVersionMatch;
+        const groupKind = `${group || "core"}/${kind}`;
+        const gvr = (gkToGvrMap && gkToGvrMap[groupKind]) || "";
+
+        const storageKeyPrefix = `ctag.${user}.${cluster}.${gvr.replaceAll(
+          "/",
+          "."
+        )}`;
+
+        // clear list cache for all namespaces
+        localStorage.setItem(
+          `${storageKeyPrefix}.q.${md5(
+            stringify({ convertToTable: true })
+          ).toString()}`,
+          new Date().getTime().toString()
+        );
+        // clear list cache for specific namespace
+        localStorage.setItem(
+          `${storageKeyPrefix}.ns.${namespace || "default"}.q.${md5(
+            stringify({ convertToTable: true })
+          ).toString()}`,
+          new Date().getTime().toString()
+        );
+
+        // clear for genericresources and resourcesummaries
+        localStorage.setItem(
+          `ctag.${user}.${cluster}.core.k8s.appscode.com.v1alpha1.resourcesummaries.q.${md5(
+            stringify({
+              convertToTable: true,
+              labelSelector: `k8s.io/group=${group}`,
+            })
+          ).toString()}`,
+          new Date().getTime().toString()
+        );
+        localStorage.setItem(
+          `ctag.${user}.${cluster}.core.k8s.appscode.com.v1alpha1.resourcesummaries.q.${md5(
+            stringify({
+              convertToTable: true,
+              labelSelector: `k8s.io/group-kind=${kind}.${group}`,
+            })
+          ).toString()}`,
+          new Date().getTime().toString()
+        );
+        localStorage.setItem(
+          `ctag.${user}.${cluster}.core.k8s.appscode.com.v1alpha1.genericresources.q.${md5(
+            stringify({
+              convertToTable: true,
+              labelSelector: `k8s.io/group=${group}`,
+            })
+          ).toString()}`,
+          new Date().getTime().toString()
+        );
+        localStorage.setItem(
+          `ctag.${user}.${cluster}.core.k8s.appscode.com.v1alpha1.genericresources.q.${md5(
+            stringify({
+              convertToTable: true,
+              labelSelector: `k8s.io/group-kind=${kind}.${group}`,
+            })
+          ).toString()}`,
+          new Date().getTime().toString()
+        );
+      }
+    });
+  };
+}
+
+export async function requestInterceptor(config: AxiosRequestConfig) {
+  // parse the request url
+  const { method, params } = config;
+
+  let ctag;
+
+  if (method === "get") {
+    ctag = getRequestInterceptor(config);
+  }
+
+  return {
+    ...config,
+    params: { ...params, ctag },
+  };
+}
+
+export function responseInterceptor(resp: AxiosResponse) {
+  const { config } = resp;
+  // parse the request url
+  const { method } = config;
+
+  if (method === "get") {
+    // get call
+    getResponseInterceptor(resp);
+  } else if (method === "put") {
+    putResponseInterceptor(resp);
+  }
+
+  return resp;
+}

package/plugins/theme.js

@@ -0,0 +1,142 @@
+export function HSLToHex(h, s, l) {
+  s /= 100;
+  l /= 100;
+
+  const c = (1 - Math.abs(2 * l - 1)) * s,
+    x = c * (1 - Math.abs(((h / 60) % 2) - 1)),
+    m = l - c / 2;
+
+  let r = 0,
+    g = 0,
+    b = 0;
+
+  if (0 <= h && h < 60) {
+    r = c;
+    g = x;
+    b = 0;
+  } else if (60 <= h && h < 120) {
+    r = x;
+    g = c;
+    b = 0;
+  } else if (120 <= h && h < 180) {
+    r = 0;
+    g = c;
+    b = x;
+  } else if (180 <= h && h < 240) {
+    r = 0;
+    g = x;
+    b = c;
+  } else if (240 <= h && h < 300) {
+    r = x;
+    g = 0;
+    b = c;
+  } else if (300 <= h && h < 360) {
+    r = c;
+    g = 0;
+    b = x;
+  }
+  // Having obtained RGB, convert channels to hex
+  r = Math.round((r + m) * 255).toString(16);
+  g = Math.round((g + m) * 255).toString(16);
+  b = Math.round((b + m) * 255).toString(16);
+
+  // Prepend 0s, if necessary
+  if (r.length == 1) r = "0" + r;
+  if (g.length == 1) g = "0" + g;
+  if (b.length == 1) b = "0" + b;
+
+  return "#" + r + g + b;
+}
+export function HexToHSL(H) {
+  // Convert hex to RGB first
+  let r = 0,
+    g = 0,
+    b = 0;
+  if (H.length == 4) {
+    r = parseInt("0x" + H[1] + H[1]);
+    g = parseInt("0x" + H[2] + H[2]);
+    b = parseInt("0x" + H[3] + H[3]);
+  } else if (H.length == 7) {
+    r = parseInt("0x" + H[1] + H[2]);
+    g = parseInt("0x" + H[3] + H[4]);
+    b = parseInt("0x" + H[5] + H[6]);
+  }
+  // Then to HSL
+  r /= 255;
+  g /= 255;
+  b /= 255;
+  const cmin = Math.min(r, g, b),
+    cmax = Math.max(r, g, b),
+    delta = cmax - cmin;
+  let h = 0,
+    s = 0,
+    l = 0;
+
+  if (delta == 0) h = 0;
+  else if (cmax == r) h = ((g - b) / delta) % 6;
+  else if (cmax == g) h = (b - r) / delta + 2;
+  else h = (r - g) / delta + 4;
+
+  h = Math.round(h * 60);
+
+  if (h < 0) h += 360;
+
+  l = (cmax + cmin) / 2;
+  s = delta == 0 ? 0 : delta / (1 - Math.abs(2 * l - 1));
+  s = +(s * 100).toFixed(1);
+  l = +(l * 100).toFixed(1);
+
+  return {
+    hue: `${h}`,
+    saturation: `${s}%`,
+    lightness: `${l}%`,
+  };
+}
+export function getThemeHSL() {
+  const hue = getComputedStyle(document.documentElement).getPropertyValue(
+    "--hsl-hue"
+  );
+  const saturation = getComputedStyle(
+    document.documentElement
+  ).getPropertyValue("--hsl-saturation");
+  const lightness = getComputedStyle(
+    document.documentElement
+  ).getPropertyValue("--hsl-lightness");
+
+  return {
+    hue,
+    saturation,
+    lightness,
+  };
+}
+export function setThemeHSL(h, s, l) {
+  document.documentElement.style.setProperty("--hsl-hue", h);
+  document.documentElement.style.setProperty("--hsl-saturation", s);
+  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);
+}
+export function getFontHSL() {
+  const hue = getComputedStyle(document.documentElement).getPropertyValue(
+    "--font-hsl-hue"
+  );
+  const saturation = getComputedStyle(
+    document.documentElement
+  ).getPropertyValue("--font-hsl-saturation");
+  const lightness = getComputedStyle(
+    document.documentElement
+  ).getPropertyValue("--font-hsl-lightness");
+
+  return {
+    hue,
+    saturation,
+    lightness,
+  };
+}
+export const loaderLightThemePrimaryColor = "#f5f7f9";
+export const loaderDarkThemePrimaryColor = "#2e323c";
+export const loaderLightThemeSecondaryColor = "#ecebeb";
+export const loaderDarkThemeSecondaryColor = "#21272e";

package/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/plugins/vue-toaster.js

@@ -2,9 +2,9 @@ module.exports = {
   position: "top-center",
   theme: "toasted-primary",
   iconPack: "fontawesome",
-  className: "ac-toasted",
+  className: "ac-toast",
   action: {
-    text: "Close",
+    icon: "close",
     class: "ac-toast-action",
     onClick: (e, toastObject) => {
       toastObject.goAway(0);
@@ -26,7 +26,7 @@ module.exports = {
         icon: "fa-check",
         duration: 2500,
         type: "success",
-        className: "ac-toasted is-success",
+        className: "ac-toast is-success",
       },
     },
     {
@@ -34,14 +34,16 @@ module.exports = {
       message: (payload) => {
         if (payload) {
           if (typeof payload === "string") return payload;
+          else if (payload.response && payload.response.data && payload.response.data.message) return payload.response.data.message;
           else if (payload.message) return payload.message;
           else return "Something Went Wrong";
         } else return "Something Went Wrong";
       },
       options: {
         icon: "fa-warning",
+        duration: 20000,
         type: "error",
-        className: "ac-toasted is-error",
+        className: "ac-toast is-error",
       },
     },
     {
@@ -55,8 +57,9 @@ module.exports = {
       },
       options: {
         icon: "fa-info",
+        duration: 20000,
         type: "info",
-        className: "ac-toasted is-info",
+        className: "ac-toast is-info",
       },
     },
     {
@@ -72,8 +75,9 @@ module.exports = {
       },
       options: {
         icon: "fa-warning",
+        duration: 2500,
         type: "error",
-        className: "ac-toasted is-warning",
+        className: "ac-toast is-warning",
       },
     },
   ],