@saasquatch/mint-components 1.4.0 → 1.5.0-3

package/dist/collection/{stories → components/sqm-share-link}/UseShareLink.stories.js

@@ -1,9 +1,9 @@
 import { setUserIdentity } from "@saasquatch/component-boilerplate";
 import { useEffect } from "@saasquatch/universal-hooks";
 import { h } from "@stencil/core";
-import { ShareLinkView } from "../components/sqm-share-link/sqm-share-link-view";
-import { useShareLink } from "../components/sqm-share-link/useShareLink";
-import { createHookStory } from "../components/sqm-stencilbook/HookStoryAddon";
+import { ShareLinkView } from "./sqm-share-link-view";
+import { useShareLink } from "./useShareLink";
+import { createHookStory } from "../sqm-stencilbook/HookStoryAddon";
 export default {
   title: "Hooks / useShareLink",
 };

package/dist/collection/components/sqm-share-link/useShareLink.js

@@ -1,4 +1,4 @@
-import { useProgramId, useQuery, useUserIdentity, } from "@saasquatch/component-boilerplate";
+import { useEngagementMedium, useMutation, useProgramId, useQuery, useUserIdentity, } from "@saasquatch/component-boilerplate";
 import { useState } from "@saasquatch/universal-hooks";
 import { gql } from "graphql-request";
 const MessageLinkQuery = gql `
@@ -10,11 +10,18 @@ const MessageLinkQuery = gql `
     }
   }
 `;
+const WIDGET_ENGAGEMENT_EVENT = gql `
+  mutation loadEvent($eventMeta: UserAnalyticsEvent!) {
+    createUserAnalyticsEvent(eventMeta: $eventMeta)
+  }
+`;
 export function useShareLink(props) {
   var _a, _b;
   const { programId = useProgramId() } = props;
   const user = useUserIdentity();
+  const engagementMedium = useEngagementMedium();
   const { data } = useQuery(MessageLinkQuery, { programId }, !(user === null || user === void 0 ? void 0 : user.jwt));
+  const [sendLoadEvent] = useMutation(WIDGET_ENGAGEMENT_EVENT);
   const shareString = (_b = (_a = data === null || data === void 0 ? void 0 : data.user) === null || _a === void 0 ? void 0 : _a.shareLink) !== null && _b !== void 0 ? _b : 
   // Shown during loading
   "...";
@@ -25,6 +32,18 @@ export function useShareLink(props) {
     navigator.clipboard.writeText(shareString);
     setOpen(true);
     setTimeout(() => setOpen(false), props.tooltiplifespan);
+    sendLoadEvent({
+      eventMeta: {
+        programId,
+        id: user === null || user === void 0 ? void 0 : user.id,
+        accountId: user === null || user === void 0 ? void 0 : user.accountId,
+        type: "USER_REFERRAL_PROGRAM_ENGAGEMENT_EVENT",
+        meta: {
+          engagementMedium,
+          shareMedium: "DIRECT",
+        },
+      },
+    });
   }
   return { ...props, onClick, open, shareString };
 }

package/dist/collection/components/sqm-stencilbook/AutoColor.js

@@ -0,0 +1,54 @@
+import chroma from "chroma-js";
+/**
+ * Generated a Shoelace color scale css string from a base color
+ *
+ * @param color
+ * @param name
+ * @returns
+ */
+export function autoColorScaleCss(color, name = "primary") {
+  if (!chroma.valid(color)) {
+    return "";
+  }
+  const { scale, colorScale } = makeColorScale(color);
+  return scale
+    .map((color, index) => `--sl-color-${name}-${colorScale[index]}: ${chroma(color).hex()};`)
+    .join("\n");
+}
+/**
+ * Generate a Shoelace color scale style objects from a base color
+ *
+ * @param color
+ * @param name
+ * @returns
+ */
+export function autoColorScaleStyleObject(color, name = "primary") {
+  if (!chroma.valid(color)) {
+    return {};
+  }
+  const { scale, colorScale } = makeColorScale(color);
+  return scale.reduce((agg, color, index) => ({
+    ...agg,
+    [`--sl-color-${name}-${colorScale[index]}`]: `${chroma(color).hex()};`,
+  }), { color: "blue", "--sl-color-primary-50": "#eaffea;" });
+}
+function makeColorScale(color) {
+  const colorScale = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950];
+  const hex = chroma(color).hex();
+  const scale = chroma
+    .scale([
+    chroma(hex).luminance(0.95),
+    chroma(hex).luminance(0.84),
+    chroma(hex).luminance(0.73),
+    chroma(hex).luminance(0.62),
+    chroma(hex).luminance(0.49),
+    chroma(hex).luminance(0.35),
+    chroma(hex).luminance(0.23),
+    chroma(hex).luminance(0.15),
+    chroma(hex).luminance(0.1),
+    chroma(hex).luminance(0.05),
+    chroma(hex).luminance(0.02),
+  ])
+    .colors(colorScale.length);
+  return { scale, colorScale };
+}

package/dist/collection/components/sqm-stencilbook/CucumberAddon.js

@@ -13,6 +13,8 @@ export const CucumberAddon = ({ story }, children) => {
     // No scenario or invalid. Ignoring.
   }
   return (h("div", null,
-    result && h("pre", { innerHTML: result.value }),
+    h("details", null,
+      h("summary", null, "Specs"),
+      result && h("pre", { innerHTML: result.value })),
     children));
 };

package/dist/collection/components/sqm-stencilbook/Matrix.js

@@ -0,0 +1,66 @@
+import { h } from "@stencil/core";
+/**
+ * Displays a cartesian product of the input props
+ *
+ * @returns
+ */
+export function MatrixStory({ matrix, props, Component, }) {
+  const propMatrix = Object.keys(matrix).map((propKey) => {
+    const propValues = matrix[propKey];
+    return propValues.map((val) => {
+      return {
+        [propKey]: val,
+      };
+    });
+  });
+  const combinations = cartesian(...propMatrix);
+  const propsCombinations = combinations.map((combo) => {
+    return combo.reduce((props, prop) => {
+      return {
+        ...props,
+        ...prop,
+      };
+    }, {});
+  });
+  return propsCombinations.map((combo) => {
+    const example = { ...props, ...combo };
+    return (h("div", null,
+      h(PropsTable, { values: example }),
+      h("hr", null),
+      " ",
+      h("br", null),
+      h(Component, Object.assign({}, example)),
+      h("br", null)));
+  });
+}
+function PropsTable({ values }) {
+  return (h("table", null,
+    h("tbody", null, Object.keys(values).map((key) => {
+      return (h("tr", null,
+        h("th", null, key),
+        h("td", null, JSON.stringify(values[key]))));
+    }))));
+}
+/**
+ * Source: https://stackoverflow.com/questions/15298912/javascript-generating-combinations-from-n-arrays-with-m-elements
+ *
+ * TODO: Could replace with a fork of https://www.npmjs.com/package/cartesian
+ *
+ * @param args - an array of arrays
+ * @returns combinations of the elements in those array
+ */
+function cartesian(...args) {
+  var r = [], max = args.length - 1;
+  function helper(arr, i) {
+    for (var j = 0, l = args[i].length; j < l; j++) {
+      var a = arr.slice(0); // clone arr
+      a.push(args[i][j]);
+      if (i == max)
+        r.push(a);
+      else
+        helper(a, i + 1);
+    }
+  }
+  helper([], 0);
+  return r;
+}

package/dist/collection/components/sqm-stencilbook/Resizer.js

@@ -0,0 +1,26 @@
+import { h } from "@stencil/core";
+export const ResizerStylesheet = `
+
+:root{
+    --checker-color-1: #ffffff00;
+    --checker-color-2: #ffffff00;
+    --checker-size: 7px;
+    --checker-gradient: linear-gradient(45deg, var(--checker-color-1) 25%, transparent 25%, transparent 75%, var(--checker-color-1) 75%);
+}
+.resizer{
+    resize: horizontal;
+    border: 2px dashed gray;
+	margin: -2px;
+    padding: 12px;
+    height: fit-content;
+    overflow: hidden;
+}
+
+.resizer{
+    background-color: var(--checker-color-2);
+    background-image: var(--checker-gradient), var(--checker-gradient);
+    background-position: 0 0, var(--checker-size) var(--checker-size);
+    background-size: calc(var(--checker-size) * 2) calc(var(--checker-size) * 2);
+}
+`;
+export const Resizer = (_, children) => (h("div", { class: "resizer" }, children));

package/dist/collection/components/sqm-stencilbook/Themes.js

@@ -0,0 +1,52 @@
+/**
+ *
+ * Themes
+ *
+ * Export only valid CSS. Those will be injected into style tags.
+ *
+ * Useful links:
+ *  - https://brandcolors.net/
+ *  - Shoelace color generator: https://codepen.io/claviska/full/QWveRgL
+ *
+ */
+import { autoColorScaleCss } from "./AutoColor";
+//
+export const Default = `
+ // No CSS
+`;
+export const Orangey = `
+:root{
+    ${autoColorScaleCss("orange")}
+}
+`;
+export const Netflix = `
+:root{
+    ${autoColorScaleCss("#e50914")}
+}
+`;
+export const SaaSquatchCorporate = `
+:root{
+    ${autoColorScaleCss("green")}
+    --sl-font-sans: Arial;
+}
+`;
+export const NYTimes = `
+:root{
+    ${autoColorScaleCss("black")}
+    --sl-font-sans: Georgia, 'Times New Roman', serif;
+}
+`;
+export const Klip = `
+:root{
+	--sl-color-primary-50: #E8E5F8;
+    --sl-color-primary-100: #C6BEED;
+    --sl-color-primary-200: #A192E2;
+    --sl-color-primary-300: #7B66D6;
+    --sl-color-primary-400: #5E46CD;
+    --sl-color-primary-500: #4225C4;
+    --sl-color-primary-600: #3C21BE;
+    --sl-color-primary-700: #331BB6;
+    --sl-color-primary-800: #2B16AF;
+    --sl-color-primary-900: #1D0DA2;
+}
+`;

package/dist/collection/components/sqm-stencilbook/sqm-stencilbook.js

@@ -1,48 +1,58 @@
 import { h, Component, Host, State } from "@stencil/core";
 import { useStencilbook } from "@saasquatch/stencilbook";
-import { withHooks } from "@saasquatch/stencil-hooks";
-import * as ShareButton from "../../stories/ShareButton.stories";
-import * as ShareLink from "../../stories/ShareLink.stories";
-import * as BigStat from "../../stories/BigStat.stories";
-import * as Leaderboard from "../../stories/Leaderboard.stories";
-import * as Router from "../../stories/Router.stories";
-import * as LeaderboardRank from "../../stories/LeaderboardRank.stories";
-import * as PortalFrame from "../../stories/PortalFrame.stories";
-import * as EditProfile from "../../stories/EditProfileForm.stories";
-import * as UseShareLink from "../../stories/UseShareLink.stories";
-import * as UseShareButton from "../../stories/UseShareButton.stories";
-import * as UseBigStat from "../../stories/UseBigStat.stories";
-import * as UseEditProfile from "../../stories/UseEditProfile.stories";
-import * as UseLeaderboard from "../../stories/UseLeaderboard.stories";
-import * as FormMessage from "../../stories/FormMessage.stories";
+import { useState, withHooks } from "@saasquatch/stencil-hooks";
+import * as ShareButton from "../sqm-share-button/ShareButton.stories";
+import * as ShareLink from "../sqm-share-link/ShareLink.stories";
+import * as BigStat from "../sqm-big-stat/BigStat.stories";
+import * as Leaderboard from "../sqm-leaderboard/Leaderboard.stories";
+import * as Router from "../sqm-router/Router.stories";
+import * as LeaderboardRank from "../sqm-leaderboard-rank/LeaderboardRank.stories";
+import * as PortalFrame from "../sqm-portal-frame/PortalFrame.stories";
+import * as EditProfile from "../sqm-edit-profile/EditProfileForm.stories";
+import * as UseShareLink from "../sqm-share-link/UseShareLink.stories";
+import * as UseShareButton from "../sqm-share-button/UseShareButton.stories";
+import * as UseBigStat from "../sqm-big-stat/UseBigStat.stories";
+import * as UseEditProfile from "../sqm-edit-profile/UseEditProfile.stories";
+import * as UseLeaderboard from "../sqm-leaderboard/UseLeaderboard.stories";
+import * as FormMessage from "../sqm-form-message/FormMessage.stories";
+import * as UseRewardExchangeList from "../sqm-reward-exchange-list/UseRewardExchangeList.stories";
+import * as UseRewardsTable from "../sqm-rewards-table/UseRewardsTable.stories";
+import * as UseTaskCard from "../sqm-task-card/UseTaskCard.stories";
 import * as NewPortal from "../../stories/NewPortal.stories";
-import * as SidebarItem from "../../stories/SidebarItem.stories";
-import * as NavigationSidebar from "../../stories/NavigationSidebar.stories";
-import * as PortalLogin from "../../stories/PortalLogin.stories";
-import * as PortalRegister from "../../stories/PortalRegister.stories";
-import * as PortalForgotPassword from "../../stories/PortalForgotPassword.stories";
-import * as PortalEmailVerification from "../../stories/PortalEmailVerification.stories";
-import * as PortalResetPassword from "../../stories/PortalResetPassword.stories";
-import * as PortalVerifyEmail from "../../stories/PortalVerifyEmail.stories";
-import * as AssetCard from "../../stories/AssetCard.stories";
-import * as DividedLayout from "../../stories/DividedLayout.stories";
-import * as ChangePassword from "../../stories/ChangePassword.stories";
-import * as PortalProfile from "../../stories/PortalProfile.stories";
-import * as ReferralTable from "../../stories/ReferralTable.stories";
-import * as ReferralTableCell from "../../stories/ReferralTableCell.stories";
-import * as ReferralTableRewardsCell from "../../stories/ReferralTableRewardsCell.stories";
-import * as UserName from "../../stories/UserName.stories";
-import * as PasswordField from "../../stories/PasswordField.stories";
+import * as SidebarItem from "../sqm-navigation-sidebar-item/SidebarItem.stories";
+import * as NavigationSidebar from "../sqm-navigation-sidebar/NavigationSidebar.stories";
+import * as PortalLogin from "../sqm-portal-login/PortalLogin.stories";
+import * as PortalRegister from "../sqm-portal-register/PortalRegister.stories";
+import * as PortalForgotPassword from "../sqm-portal-forgot-password/PortalForgotPassword.stories";
+import * as PortalEmailVerification from "../sqm-portal-email-verification/PortalEmailVerification.stories";
+import * as PortalResetPassword from "../sqm-portal-reset-password/PortalResetPassword.stories";
+import * as PortalVerifyEmail from "../sqm-portal-verify-email/PortalVerifyEmail.stories";
+import * as AssetCard from "../sqm-asset-card/AssetCard.stories";
+import * as DividedLayout from "../sqm-divided-layout/DividedLayout.stories";
+import * as ChangePassword from "../sqm-portal-change-password/ChangePassword.stories";
+import * as PortalProfile from "../sqm-portal-profile/PortalProfile.stories";
+import * as ReferralTable from "../sqm-referral-table/ReferralTable.stories";
+import * as ReferralTableCell from "../sqm-referral-table/ReferralTableCell.stories";
+import * as ReferralTableRewardsCell from "../sqm-referral-table/ReferralTableRewardsCell.stories";
+import * as UserName from "../sqm-user-name/UserName.stories";
+import * as PasswordField from "../sqm-password-field/PasswordField.stories";
+import * as TaskCard from "../sqm-task-card/TaskCard.stories";
 import * as PortalTemplates from "../../stories/PortalTemplates.stories";
-import * as ProgramMenu from "../../stories/ProgramMenu.stories";
+import * as ProgramMenu from "../sqm-program-menu/ProgramMenu.stories";
 import * as PoweredByImg from "../../stories/PoweredByImg.stories";
-import * as PortalFooter from "../../stories/PortalFooter.stories";
-import * as Hero from "../../stories/Hero.stories";
-import * as ReferralIframe from "../../stories/ReferralIframe.stories";
-import * as NameFields from "../../stories/NameFields.stories";
+import * as PortalFooter from "../sqm-portal-footer/PortalFooter.stories";
+import * as Hero from "../sqm-hero/Hero.stories";
+import * as ReferralIframe from "../sqm-referral-iframe/ReferralIframe.stories";
+import * as NameFields from "../sqm-name-fields/NameFields.stories";
+import * as RewardExchangeList from "../sqm-reward-exchange-list/RewardExchangeList.stories";
+import * as ProgramExplainer from "../sqm-program-explainer/ProgramExplainer.stories";
+import * as ProgramExplainerStep from "../sqm-program-explainer-step/ProgramExplainerStep.stories";
+import * as BrandStories from "../sqm-brand/SqmBrand.stories";
+import * as Themes from "./Themes";
 import { CucumberAddon } from "./CucumberAddon";
 import { HookStoryAddon } from "./HookStoryAddon";
 import { ShadowViewAddon } from "../../ShadowViewAddon";
+import { ResizerStylesheet } from "./Resizer";
 const stories = [
   ShareButton,
   ShareLink,
@@ -76,6 +86,7 @@ const stories = [
   ReferralTableRewardsCell,
   UserName,
   PasswordField,
+  TaskCard,
   PortalTemplates,
   ProgramMenu,
   PoweredByImg,
@@ -83,6 +94,13 @@ const stories = [
   Hero,
   ReferralIframe,
   NameFields,
+  RewardExchangeList,
+  UseRewardExchangeList,
+  UseTaskCard,
+  UseRewardsTable,
+  ProgramExplainer,
+  ProgramExplainerStep,
+  BrandStories
 ];
 /**
  * For internal documentation
@@ -101,10 +119,47 @@ export class StencilStorybook {
       title: "Mint Components",
       addons: [CucumberAddon, ShadowViewAddon, HookStoryAddon],
     });
-    return (h(Host, { class: Style, onClick: {} }, children));
+    const [selectedTheme, setSelected] = useState("Default");
+    const [checkerboard, setCheckerboard] = useState(true);
+    const themes = Object.keys(Themes);
+    const theme = Themes[selectedTheme];
+    return (h(Host, { class: Style, onClick: {} },
+      h("div", { style: {
+          position: "absolute",
+          top: "0",
+          right: "0",
+          zIndex: "999999",
+        } },
+        "Branding:",
+        h("select", { onChange: (e) => setSelected(e.target.value) }, themes.map((t) => (h("option", { selected: t === selectedTheme }, t)))),
+        h("div", null,
+          h("div", null)),
+        h(ColorScale, null),
+        h("br", null),
+        h("input", { type: "checkbox", id: "checkerboard", onClick: () => setCheckerboard(!checkerboard), onChange: () => document.documentElement.style.setProperty("--checker-color-1", checkerboard ? "#ebebeb" : "#ffffff00") }),
+        h("label", { htmlFor: "checkerboard" }, "Checkerboard?")),
+      h("style", null, theme),
+      h("style", null, ResizerStylesheet),
+      children));
   }
   static get is() { return "sqm-stencilbook"; }
   static get states() { return {
     "ignored": {}
   }; }
 }
+function ColorScale() {
+  return (h("span", null,
+    h(ColorToken, null),
+    h(ColorToken, { type: "success" }),
+    h(ColorToken, { type: "warning" }),
+    h(ColorToken, { type: "danger" }),
+    h(ColorToken, { type: "neutral" })));
+}
+function ColorToken({ type = "primary" }) {
+  return (h("span", { style: {
+      background: `var(--sl-color-${type}-500)`,
+      width: "1em",
+      marginRight: "2px",
+      padding: "0 4px",
+    }, title: type }, type.charAt(0)));
+}

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

@@ -0,0 +1,14 @@
+import { h } from "@stencil/core";
+export const checkmark_circle = () => {
+  return (h("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+    h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M1.81818 10C1.81818 5.48131 5.48131 1.81818 10 1.81818C14.5187 1.81818 18.1818 5.48131 18.1818 10C18.1818 14.5187 14.5187 18.1818 10 18.1818C5.48131 18.1818 1.81818 14.5187 1.81818 10ZM10 0C4.47715 0 0 4.47715 0 10C0 15.5228 4.47715 20 10 20C15.5228 20 20 15.5228 20 10C20 4.47715 15.5228 0 10 0ZM15.7692 6.96189C16.1398 6.48683 16.0551 5.80132 15.58 5.43077C15.1049 5.06022 14.4194 5.14495 14.0489 5.62001L8.72994 12.4391L5.86229 9.5715C5.43627 9.14548 4.74554 9.14548 4.31952 9.5715C3.89349 9.99752 3.89349 10.6882 4.31952 11.1143L8.05976 14.8545C8.28083 15.0756 8.58613 15.1912 8.89818 15.172C9.21023 15.1528 9.49905 15.0006 9.69133 14.7541L15.7692 6.96189Z", fill: "currentColor" })));
+};
+export const checkmark_filled = () => {
+  return (h("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+    h("circle", { cx: "10", cy: "10", r: "10", fill: "currentColor" }),
+    h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M14.65 6.19231C15.0459 6.5011 15.1165 7.07236 14.8077 7.46825L9.74277 13.9617C9.58254 14.1672 9.34186 14.294 9.08182 14.31C8.82178 14.326 8.56736 14.2297 8.38314 14.0454L5.26627 10.9286C4.91124 10.5735 4.91124 9.99794 5.26627 9.64292C5.62129 9.2879 6.19689 9.2879 6.55191 9.64292L8.94162 12.0326L13.3741 6.35001C13.6828 5.95412 14.2541 5.88352 14.65 6.19231Z", fill: "white" })));
+};
+export const arrow_left_right = () => {
+  return (h("svg", { width: 11, height: 12, fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+    h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M10.265 2.789a.346.346 0 000-.489L8.066.101a.346.346 0 10-.489.489l1.61 1.609H2.073a.691.691 0 00-.69.691v1.728a.346.346 0 00.69 0V2.89h7.114L7.577 4.5a.346.346 0 10.49.488l2.198-2.2zM.101 9.21a.346.346 0 000 .489l2.2 2.199a.346.346 0 00.488-.489l-1.61-1.609h7.114c.382 0 .691-.31.691-.691V7.382a.346.346 0 00-.691 0V9.11H1.18L2.789 7.5a.346.346 0 10-.489-.488l-2.199 2.2z", fill: "currentColor" })));
+};