@saasquatch/mint-components 1.3.2-1 → 1.3.2-13

package/dist/collection/components/sqm-task-card/UseTaskCard.stories.js

@@ -0,0 +1,41 @@
+import { setUserIdentity } from "@saasquatch/component-boilerplate";
+import { useEffect } from "@saasquatch/universal-hooks";
+import { h } from "@stencil/core";
+import { createHookStory } from "../sqm-stencilbook/HookStoryAddon";
+const JWT = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImlkIjoic2FtK2tsaXBAc2Fhc3F1YXQuY2giLCJhY2NvdW50SWQiOiJzYW0ra2xpcEBzYWFzcXVhdC5jaCJ9fQ.FMNZ6oajyr6SiCcRqKKdyPqvNTvWROQ60MKAyfvWGfc";
+export default {
+  title: "Hooks / useTaskCard",
+};
+function setupGraphQL() {
+  const id = "sam+klip@saasquat.ch";
+  const accountId = id;
+  const programId = "klip-referral-program";
+  //@ts-ignore
+  window.widgetIdent = {
+    tenantAlias: "test_a74miwdpofztj",
+    appDomain: "https://staging.referralsaasquatch.com",
+    programId,
+  };
+  useEffect(() => {
+    setUserIdentity({
+      accountId,
+      id,
+      jwt: JWT,
+    });
+    return () => {
+      window.widgetIdent = undefined;
+      setUserIdentity(undefined);
+    };
+  }, []);
+  return { id, accountId };
+}
+export const TaskCard = createHookStory(() => {
+  setupGraphQL();
+  const props = {
+    listType: "",
+    render: () => { },
+    disconnectedCallback: () => { },
+    ignored: true,
+  };
+  return (h("sqm-task-card", { "card-title": "Comment on 5 articles", "button-text": "Start reading", goal: 5, steps: true, "show-progress-bar": true }));
+});

package/dist/collection/components/sqm-task-card/progress-bar/SVGs.js

@@ -0,0 +1,7 @@
+import { h } from "@stencil/core";
+export const gift = () => {
+  return (h("svg", { width: 16, height: 16, fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+    h("path", { d: "M15 5H9v11h4.5a1 1 0 001-1V9h.5a1 1 0 001-1V6a1 1 0 00-1-1zM1.5 9v6a1 1 0 001 1H7V5H1a1 1 0 00-1 1v2a1 1 0 001 1h.5z", fill: "var(--sl-color-primary-200)" }),
+    h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M1.5 9v1h13V9h-13z", fill: "var(--sl-color-primary-300)" }),
+    h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M14 2.71c0 .886-1.33 2.227-2 2.29H9v11H7.002V5H4.588C3.212 4.702 2 3.645 2 2.52 2 1.426 2.476.558 3.342.183 4.169-.176 5.125.02 5.88.545c.927.643 1.447 1.851 1.919 2.947l.123.286.12-.272C8.51 2.45 9.045 1.243 9.94.596c.793-.573 1.801-.79 2.672-.397.9.405 1.388 1.336 1.388 2.51zM10.612 1.5c.48-.347 1.056-.41 1.548 0 .428.357.45.525.506.93l.01.07c0 .599-.516 1.5-1.032 1.5-.366 0-.653-.003-.922-.006-.49-.005-.92-.01-1.657.006.14-.272.252-.533.36-.782.285-.667.534-1.246 1.187-1.718zm-5.673 0c-.233-.161-.766-.09-.987.006-.183.08-.456.32-.456 1.015 0 .674 1.092 1.257 1.092 1.257S5.454 4 7.002 4c-.527-1.305-1.273-1.951-2.063-2.5z", fill: "var(--sl-color-primary-600)" })));
+};

package/dist/collection/components/sqm-task-card/progress-bar/progress-bar-view.js

@@ -0,0 +1,318 @@
+import { h } from "@stencil/core";
+import jss from "jss";
+import preset from "jss-preset-default";
+import * as SVGs from "./SVGs";
+export function ProgressBarView(props) {
+  const { progress = 0, goal = 1, steps = false, progressBarUnit = "", repeatable = false, complete = false, expired = false, } = props;
+  console.log("progress bar props", props);
+  const gift1 = SVGs.gift();
+  const gift2 = SVGs.gift();
+  const gift3 = SVGs.gift();
+  var items = [];
+  var columns = "";
+  var repetitions = Math.floor(progress / goal);
+  if (repeatable) {
+    if (steps) {
+      addStepsRepeatable();
+    }
+    else {
+      addLinearRepeatable();
+    }
+  }
+  // non repeatable
+  else {
+    if (steps) {
+      addSteps();
+    }
+    else {
+      addLinear();
+    }
+  }
+  const style = {
+    ProgressBar: {
+      "& .progress-bar": {
+        height: "15px",
+        marginTop: steps
+          ? "var(--sl-spacing-medium)"
+          : "var(--sl-spacing-large)",
+        filter: expired ? "grayscale(1)" : "",
+        marginBottom: "var(--sl-spacing-xx-large)",
+        marginRight: "var(--sl-spacing-x-small)",
+        fontSize: "var(--sl-font-size-x-small)",
+        display: "grid",
+        gridTemplateColumns: columns,
+        lineHeight: "45px",
+        userSelect: "none",
+      },
+      "& .progress-bar.repeatable-steps": {
+        marginLeft: "var(--sl-spacing-x-small)",
+      },
+      "& .filled:after": {
+        content: '""',
+        display: "flex",
+        width: "100%",
+        height: "4px",
+        borderRadius: "4px",
+        backgroundColor: complete
+          ? "var(--sl-color-success-500)"
+          : "var(--sl-color-primary-500)",
+      },
+      "& .progress": {
+        display: "block",
+        textAlign: "center",
+        marginLeft: "-100px",
+        marginRight: "-100px",
+      },
+      "& .progress::after": {
+        content: '""',
+        width: "12px",
+        height: "12px",
+        display: "flex",
+        backgroundColor: complete
+          ? "var(--sl-color-success-500)"
+          : "var(--sl-color-primary-500)",
+        borderRadius: "50%",
+        position: "relative",
+        left: "47%",
+        top: "-85%",
+      },
+      "& .progress.bg:after": {
+        width: "0",
+        height: "0",
+        border: "none",
+      },
+      "& .progress.top": {
+        position: "relative",
+        top: "-40px",
+      },
+      "& .progress.top:after": {
+        top: "-16%",
+      },
+      "& .empty": {
+        display: "block",
+        textAlign: "center",
+        marginLeft: "-100px",
+        marginRight: "-100px",
+      },
+      "& .empty::after": {
+        content: '""',
+        width: "12px",
+        height: "12px",
+        border: "2px solid #E0E0E0",
+        margin: "-2px",
+        display: "flex",
+        backgroundColor: "white",
+        borderRadius: "50%",
+        position: "relative",
+        left: "47%",
+        top: "-85%",
+      },
+      "& .empty.bg:after": {
+        width: "0",
+        height: "0",
+        border: "none",
+      },
+      "& .remain:after": {
+        content: '""',
+        display: "flex",
+        width: "100%",
+        height: "4px",
+        borderRadius: "4px",
+        backgroundColor: "#E0E0E0",
+      },
+      "& .gift.bw": {
+        filter: "grayscale(100%)",
+      },
+      "& .gift.start": {
+        transform: "scale(80%)",
+        top: "-20px",
+      },
+      "& .gift": {
+        textAlign: "center",
+        marginLeft: "-100px",
+        marginRight: "-100px",
+        position: "relative",
+        display: "list-item",
+        listStyleType: "none",
+        top: "-18px",
+        filter: goal <= progress ? "" : "grayscale(100%)",
+        zIndex: "1",
+      },
+    },
+  };
+  jss.setup(preset());
+  const sheet = jss.createStyleSheet(style);
+  const styleString = sheet.toString();
+  return (h("div", { class: sheet.classes.ProgressBar },
+    h("style", { type: "text/css" }, styleString),
+    h("div", { class: repetitions > 1 ? "progress-bar repeatable-steps" : "progress-bar" }, items)));
+  function clamp(x, min, max) {
+    return Math.min(Math.max(x, min), max);
+  }
+  function addLinear() {
+    const ratio = progress / goal;
+    columns =
+      clamp(ratio, 0, 1) + "fr 0fr " + clamp(1 - ratio, 0, 1) + "fr 0fr 0fr";
+    items.push(h("div", { class: "filled" }));
+    items.push(h("div", { class: clamp(progress, 0, goal) == goal ? "progress top bg" : "progress top" }, clamp(progress, 0, goal) == goal
+      ? ""
+      : progressBarUnit + clamp(progress, 0, goal)));
+    items.push(h("div", { class: "remain" }));
+    items.push(h("div", { class: "progress bg" }, goal));
+    items.push(h("div", { class: "gift" }, gift1));
+  }
+  function addSteps() {
+    let ratio = 1 / goal;
+    for (let i = 1; i < goal; i++) {
+      columns += ratio + "fr 0fr ";
+      if (i > progress) {
+        items.push(h("div", { class: "remain" }));
+        items.push(h("div", { class: "empty" }, i));
+      }
+      else {
+        items.push(h("div", { class: "filled" }));
+        items.push(h("div", { class: "progress" }, i));
+      }
+    }
+    columns += ratio + "fr 0fr ";
+    // reward success
+    if (goal <= progress) {
+      columns += "0fr ";
+      items.push(h("div", { class: "filled" }));
+      items.push(h("div", { class: "progress bg" }, goal));
+      items.push(h("div", { class: "gift" }, gift1));
+    }
+    // reward fail
+    else {
+      columns += "0fr ";
+      items.push(h("div", { class: "remain" }));
+      items.push(h("div", { class: "empty bg" }, goal));
+      items.push(h("div", { class: "gift" }, gift1));
+    }
+  }
+  function addLinearRepeatable() {
+    let repetitions = Math.floor(progress / goal);
+    let ratio = ((progress % goal) / goal) * 0.5;
+    // 0 repetition
+    if (repetitions == 0) {
+      columns = ratio + "fr 0fr " + (0.5 - ratio) + "fr 0fr 0fr 0.5fr 0fr 0fr";
+      items.push(h("div", { class: "filled" }));
+      items.push(h("div", { class: progress == goal ? "progress top bg" : "progress top" }, progressBarUnit + progress));
+      items.push(h("div", { class: "remain" }));
+      items.push(h("div", { class: "progress bg" }, progressBarUnit + goal));
+      items.push(h("div", { class: "gift" }, gift1));
+      items.push(h("div", { class: "remain" }));
+      items.push(h("div", { class: "progress bg" }, progressBarUnit + goal * 2));
+      items.push(h("div", { class: "gift bw" }, gift2));
+    }
+    // single repetition
+    else if (repetitions == 1) {
+      columns =
+        "0.5fr 0fr 0fr " + ratio + "fr 0fr " + (0.5 - ratio) + "fr 0fr 0fr";
+      items.push(h("div", { class: "filled" }));
+      items.push(h("div", { class: "progress bg" }, progressBarUnit + goal));
+      items.push(h("div", { class: "gift" }, gift1));
+      items.push(h("div", { class: "filled" }));
+      items.push(h("div", { class: progress == goal ? "progress top bg" : "progress top" }, progress == goal ? "" : progressBarUnit + progress));
+      items.push(h("div", { class: "remain" }));
+      items.push(h("div", { class: "progress bg" }, progressBarUnit + goal * 2));
+      items.push(h("div", { class: "gift bw" }, gift2));
+    }
+    // multiple repetitions
+    else {
+      columns =
+        "0fr 0fr 0.5fr 0fr 0fr " +
+          ratio +
+          "fr 0fr " +
+          (0.5 - ratio) +
+          "fr 0fr 0fr";
+      items.push(h("div", { class: "progress bg" }, progressBarUnit + goal * (repetitions - 1)));
+      items.push(h("div", { class: "gift start" }, gift1));
+      items.push(h("div", { class: "filled" }));
+      items.push(h("div", { class: "progress bg" }, progressBarUnit + goal * repetitions));
+      items.push(h("div", { class: "gift" }, gift2));
+      items.push(h("div", { class: "filled" }));
+      items.push(h("div", { class: progress == goal * repetitions ? "progress top bg" : "progress top" }, progress == goal * repetitions ? "" : progressBarUnit + progress));
+      items.push(h("div", { class: "remain" }));
+      items.push(h("div", { class: "progress bg" }, progressBarUnit + goal * (repetitions + 1)));
+      items.push(h("div", { class: "gift bw" }, gift3));
+    }
+  }
+  function addStepsRepeatable() {
+    let repetitions = Math.floor(progress / goal);
+    // no or single repetition
+    if (repetitions < 2) {
+      let ratio = 1 / goal;
+      for (let i = 1; i < goal * 2 + 1; i++) {
+        columns += ratio + "fr 0fr ";
+        if (i > progress) {
+          if (i == goal) {
+            columns += "0fr ";
+            items.push(h("div", { class: "remain" }));
+            items.push(h("div", { class: "empty bg" }, goal));
+            items.push(h("div", { class: "gift bw" }, gift1));
+          }
+          else if (i == goal * 2) {
+            columns += "0fr 0fr";
+            items.push(h("div", { class: "remain" }));
+            items.push(h("div", { class: "empty bg" }, goal * 2));
+            items.push(h("div", { class: "gift bw" }, gift2));
+          }
+          else {
+            items.push(h("div", { class: "remain" }));
+            items.push(h("div", { class: "empty" }, i));
+          }
+        }
+        else if (i == goal) {
+          columns += "0fr ";
+          items.push(h("div", { class: "filled" }));
+          items.push(h("div", { class: "progress bg" }, i));
+          items.push(h("div", { class: "gift" }, gift3));
+        }
+        else {
+          items.push(h("div", { class: "filled" }));
+          items.push(h("div", { class: "progress" }, i));
+        }
+      }
+    }
+    // case repetition many
+    else {
+      let position = (progress % goal) + goal;
+      let ratio = 1 / goal;
+      columns += "0fr 0fr ";
+      items.push(h("div", { class: "progress bg" }, goal * (repetitions - 1)));
+      items.push(h("div", { class: "gift start" }, gift1));
+      for (let i = 1; i < goal * 2 + 1; i++) {
+        columns += ratio + "fr 0fr ";
+        if (i <= goal) {
+          if (i == goal) {
+            columns += "0fr ";
+            items.push(h("div", { class: "filled" }));
+            items.push(h("div", { class: "progress bg" }, i + goal * (repetitions - 1)));
+            items.push(h("div", { class: "gift" }, gift2));
+          }
+          else {
+            items.push(h("div", { class: "filled" }));
+            items.push(h("div", { class: "progress" }, i + goal * (repetitions - 1)));
+          }
+        }
+        else if (i > position) {
+          if (i == goal * 2) {
+            columns += "0fr 0fr";
+            items.push(h("div", { class: "remain" }));
+            items.push(h("div", { class: "empty bg" }, i + goal * (repetitions - 1)));
+            items.push(h("div", { class: "gift bw" }, gift3));
+          }
+          else {
+            items.push(h("div", { class: "remain" }));
+            items.push(h("div", { class: "empty" }, i + goal * (repetitions - 1)));
+          }
+        }
+        else {
+          items.push(h("div", { class: "filled" }));
+          items.push(h("div", { class: "progress" }, i + goal * (repetitions - 1)));
+        }
+      }
+    }
+  }
+}