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

package/base/utilities/_initial-variables.scss

@@ -1,215 +0,0 @@
-// Typography
-@import url("https://fonts.googleapis.com/css2?family=Inconsolata:wght@200;300;400;500;600;700&family=Roboto:ital,wght@0,400;0,500;0,700;0,900;1,400;1,500;1,700&display=swap");
-
-$ac-family-heading: "Roboto", sans-serif;
-$ac-family-paragraph: "Roboto", sans-serif;
-
-// body font size
-$font-size-medium: 16px;
-$font-size-semi-normal: 15px;
-$font-size-normal: 14px;
-$font-size-small: 13px;
-$font-size-extra-small: 12px;
-$font-size-tiny: 11px;
-
-// Base Color
-$ac-orange: #ff8000;
-$ac-yellow: #f7ad2a;
-$ac-green: #158748;
-$ac-blue: #0aafff;
-$ac-purple: #791e94;
-$ac-red: #ff3729;
-
-// Products Color
-$voyager-primary: #2d2a78;
-$guard-primary: #d84e27;
-$kubeci-primary: #2c3e50;
-$kubed-primary: #1c7bd4;
-$kubedb-primary: #4d4dcb;
-$kubesheild-primary: #2516c7;
-$kubevault-primary: #326ce5;
-$pharmer-primary: #326de6;
-$searchlight-primary: #111738;
-$servicebroker-primary: #29b4a2;
-$stash-primary: #5e2dea;
-$swift-primary: #3f51b6;
-
-// Colors Primary
-// root colors
-:root {
-  --hsl-hue: 208;
-  --hsl-saturation: 77%;
-  --hsl-lightness: 42%;
-  --contrast-threshold: 60%;
-  --ac-bg: #ffffff;
-  --ac-white: #ffffff;
-  --ac-full-white: #ffffff;
-  --ac-gray-dark: #5f5f5f;
-  --ac-gray-light: #8d8d8d;
-  --ac-gray-lightest: #d1d1d1;
-  --ac-white-light: #d2e7f9;
-  --ac-white-lighter: #f2f5f8;
-  --ac-white-lightest: #f8f9fb;
-
-  --ac-black: #000000;
-  --ac-color-text-90: #323232;
-  --ac-link-black: #32325d;
-  --ac-gray-darker: #494949;
-  --ac-gray: #767676;
-  --ac-gray-lighter: #a4a4a4;
-  --ac-white-text: #b4c0cc;
-
-  // theme color
-  --dark-bg: #21272e;
-  --dark-bg-light: #2e323c;
-
-  --ac-blue-light: #eceff4;
-  --ac-bg-light-gray: #f4f6f9;
-  --table-header: #e4e8ef;
-  --ac-label-text: #a6abbd;
-
-  --font-hsl-hue: 0;
-  --font-hsl-saturation: 0%;
-  --font-hsl-lightness: 11%;
-
-  --ac-primary: hsla(
-    var(--hsl-hue),
-    var(--hsl-saturation),
-    var(--hsl-lightness),
-    1
-  );
-
-  --ac-text: hsla(
-    var(--font-hsl-hue),
-    calc(var(--font-hsl-saturation) + 10%),
-    calc(var(--font-hsl-lightness) + 10%),
-    1
-  );
-  --ac-text-heading: hsla(
-    var(--font-hsl-hue),
-    var(--font-hsl-saturation),
-    var(--font-hsl-lightness),
-    1
-  );
-  --ac-color-value: hsl(
-    var(--font-hsl-hue),
-    var(--font-hsl-saturation),
-    calc(var(--font-hsl-lightness) + 25%)
-  );
-}
-
-$ac-bg: var(--ac-bg);
-$ac-primary: var(--ac-primary);
-$ac-color-value: var(--ac-color-value);
-
-// Colors
-$ac-black: var(--ac-black);
-$ac-color-text-90: var(--ac-color-text-90);
-$ac-link-black: var(--ac-link-black);
-$ac-gray-darker: var(--ac-gray-darker);
-$ac-gray-dark: var(--ac-gray-dark);
-$ac-gray: var(--ac-gray);
-$ac-gray-light: var(--ac-gray-light);
-$ac-gray-lighter: var(--ac-gray-lighter);
-$ac-gray-lightest: var(--ac-gray-lightest);
-$ac-white-light: var(--ac-white-light);
-$ac-white-lighter: var(--ac-white-lighter);
-$ac-white-lightest: var(--ac-white-lightest);
-$ac-white: var(--ac-white);
-$ac-full-white: var(--ac-full-white);
-
-$ac-blue-light: var(--ac-blue-light);
-$ac-bg-light-gray: var(--ac-bg-light-gray);
-$table-header: var(--table-header);
-$ac-label-text: var(--ac-label-text);
-
-// for dark theme CSS
-$dark-bg: var(--dark-bg);
-$dark-bg-light: var(--dark-bg-light);
-
-/* Deafult Margin & Padding view-height & view-width */
-@for $i from 0 through 100 {
-  .m-#{$i} {
-    margin: #{$i}px !important;
-  }
-
-  .mt-#{$i} {
-    margin-top: #{$i}px !important;
-  }
-
-  .mb-#{$i} {
-    margin-bottom: #{$i}px !important;
-  }
-
-  .ml-#{$i} {
-    margin-left: #{$i}px !important;
-  }
-
-  .mr-#{$i} {
-    margin-right: #{$i}px !important;
-  }
-
-  .p-#{$i} {
-    padding: #{$i}px !important;
-  }
-
-  .pt-#{$i} {
-    padding-top: #{$i}px !important;
-  }
-
-  .pb-#{$i} {
-    padding-bottom: #{$i}px !important;
-  }
-
-  .pl-#{$i} {
-    padding-left: #{$i}px !important;
-  }
-
-  .pr-#{$i} {
-    padding-right: #{$i}px !important;
-  }
-
-  .vh-#{$i} {
-    height: #{$i}vh !important;
-  }
-
-  .vw-#{$i} {
-    width: #{$i}vw !important;
-  }
-
-  .font-size-#{$i} {
-    font-size: #{$i}px !important;
-  }
-}
-
-.mx-auto {
-  margin: 0 auto;
-}
-.mr-auto{
-  margin-right: auto;
-}
-.ml-auto{
-  margin-left: auto;
-}
-
-/* Deafult height & widht */
-@for $i from 0 through 300 {
-  .height-#{$i} {
-    height: #{$i}px !important;
-  }
-
-  .width-#{$i} {
-    width: #{$i}px !important;
-  }
-}
-
-/* Deafult z-index and font-weight*/
-@for $i from 0 through 10 {
-  .z-index-#{$i} {
-    z-index: #{$i} !important;
-  }
-
-  .font-weight-#{$i*100} {
-    font-weight: #{$i * 100} !important;
-  }
-}

package/components/_basic-card.scss

@@ -1,124 +0,0 @@
-.card-details {
-  border: 1px solid #d2e7f9;
-  padding: 30px 20px;
-  width: calc(33.3% - 8px);
-  min-width: 400px;
-  max-width: 525px;
-  // border-radius: 4px;
-  transition: 0.3s ease-in-out;
-  position: relative;
-  z-index: 1;
-  @extend %card-hover;
-
-  // &:hover {
-  //   border: 1px solid #1971bd;
-  // }
-
-  .c-header {
-    display: flex;
-    margin-bottom: 20px;
-
-    .c-logo {
-      width: 54px;
-      height: 54px;
-      background: #e8f3fc;
-      border-radius: 50%;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      margin-right: 24px;
-
-      img {
-        height: 24px;
-      }
-    }
-
-    .c-content {
-      width: calc(100% - 78px);
-      h4 {
-        font-size: 18px;
-        line-height: 130%;
-        color: #030d17;
-      }
-      .icon {
-        color: #0c365a;
-        cursor: pointer;
-        position: relative;
-        z-index: 1;
-        &:after {
-          position: absolute;
-          content: "";
-          border-radius: 50%;
-          width: 32px;
-          height: 32px;
-          background: #e8f3fc;
-          opacity: 0;
-          visibility: hidden;
-          transition: 0.3s ease-in-out;
-          z-index: -1;
-        }
-        &:hover {
-          &:after {
-            opacity: 1;
-            visibility: visible;
-          }
-        }
-      }
-      .tags {
-        margin-top: 12px;
-      }
-    }
-  }
-
-  .c-body {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 20px;
-    justify-content: space-between;
-    p {
-      width: calc(25% - 16px);
-
-      span {
-        font-size: 11px;
-        color: #666666;
-        display: block;
-      }
-      strong {
-        color: #061b2d;
-        font-size: 13px;
-        font-weight: 400;
-      }
-    }
-  }
-}
-
-// ac card
-.card-basic {
-  padding: 20px;
-  width: calc(25% - 8px);
-  max-width: 390px;
-  min-width: 290px;
-  position: relative;
-  @extend %card-hover;
-
-  .required {
-    position: absolute;
-    left: 20px;
-    top: -9px;
-  }
-  .c-header {
-    .c-title {
-
-      h4 {
-        font-size: 18px;
-        color: #061b2d;
-      }
-    }
-  }
-
-  .c-body {
-    p {
-      color: #0C365A;
-    }
-  }
-}

package/mixins/stickyContent.js

@@ -1,141 +0,0 @@
-module.exports = {
-  data() {
-    return {
-      stickyByRootRef: true,
-      topBoundary_Ref: "",
-      topBoundary_Sticky: 0,
-      contentsArray_Sticky: [],
-      isStickySectionViewed: [],
-      mutationObserver: null
-    };
-  },
-
-  mounted() {
-    if (this.stickyByRootRef) {
-      this.topBoundary_Sticky = Math.max(
-        this.$refs[this.topBoundary_Ref].getBoundingClientRect().top,
-        this.topBoundary_Sticky,
-        210
-      ); // 201 is for min-top-boundary
-    }
-    this.configSticky();
-    window.addEventListener("resize", this.onWindowResize);
-    window.addEventListener("scroll", this.configSticky);
-
-    // first declare the mutation observer handler method
-    const handler = mutationList => {
-      // loop through the list of mutations
-      for (const mutation of mutationList) {
-        if (mutation.type === "childList") {
-          // react to child nodes added or removed
-          this.configSticky();
-        }
-      }
-    };
-    // Create an observer instance linked to the callback function
-    this.mutationObserver = new MutationObserver(handler);
-    // Start observing the target node for configured mutations
-    this.contentsArray_Sticky.forEach(item => {
-      this.mutationObserver.observe(this.$refs[item[0]], {
-        attributes: false,
-        childList: true,
-        subtree: true
-      });
-    });
-  },
-
-  beforeDestroy() {
-    window.removeEventListener("resize", this.onWindowResize);
-    window.removeEventListener("scroll", this.configSticky);
-    // detach the mutation observer
-    this.mutationObserver.disconnect();
-  },
-
-  methods: {
-    onWindowResize() {
-      if (this.stickyByRootRef) {
-        this.updateSticky(
-          this.topBoundary_Ref,
-          this.contentsArray_Sticky,
-          true
-        );
-      }
-    },
-
-    // initialize the data of full sticky section
-    // called at created hook
-    initStickyData(topBoundary, contentsArray, hasTopRef) {
-      if (hasTopRef) {
-        this.topBoundary_Ref = topBoundary;
-      } else {
-        this.topBoundary_Sticky = topBoundary;
-      }
-      this.stickyByRootRef = hasTopRef;
-      this.contentsArray_Sticky = contentsArray;
-    },
-
-    // to update top boundary and content array
-    updateSticky(topBoundary, contentsArray, hasTopRef) {
-      this.initStickyData(topBoundary, contentsArray, hasTopRef);
-      if (this.stickyByRootRef) {
-        this.topBoundary_Sticky = Math.max(
-          this.$refs[this.topBoundary_Ref].getBoundingClientRect().top,
-          this.topBoundary_Sticky,
-          210
-        ); // 210 is for min-top-boundary
-      }
-      this.configSticky();
-    },
-
-    // to check the current sticky section
-    configSticky() {
-      this.setBottomSectionConfig(
-        this.$refs,
-        this.contentsArray_Sticky,
-        window.innerHeight,
-        this.topBoundary_Sticky
-      );
-    },
-
-    // Handle Multiple sticky section
-    setBottomSectionConfig(refs, refArray, windowHeight, topBoundary) {
-      refArray.forEach((item, idx) => {
-        const contentRef = refs[item[0]];
-        const actionRef = refs[item[1]];
-        const bound = contentRef.getBoundingClientRect();
-
-        if (actionRef.getBoundingClientRect().bottom <= windowHeight) {
-          this.isStickySectionViewed[idx] = true;
-        }
-
-        // Extra 21 for margin-top
-        if (
-          bound.top < topBoundary + 21 &&
-          bound.bottom > windowHeight - actionRef.offsetHeight
-        ) {
-          if (
-            !actionRef.classList.contains("is-sticky") &&
-            this.isStickySectionViewed[idx]
-          ) {
-            actionRef.classList.add("is-sticky");
-          }
-        } else {
-          if (actionRef.classList.contains("is-sticky")) {
-            actionRef.classList.remove("is-sticky");
-          }
-        }
-      });
-    },
-
-    // to remove is-sticky class
-    removeAllSticky() {
-      this.isStickySectionViewed = [];
-      this.contentsArray_Sticky.forEach((item) => {
-        const actionRef = this.$refs[item[1]];
-        if (actionRef.classList.contains("is-sticky")) {
-          actionRef.classList.remove("is-sticky");
-        }
-      });
-    }
-  }
-};

package/plugins/caching.ts

@@ -1,243 +0,0 @@
-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;
-}