@saasquatch/mint-components 1.6.2-9 → 1.6.2

package/dist/collection/components/sqm-asset-card/sqm-asset-card.js

@@ -1,107 +1,107 @@
-import { isDemo } from "@saasquatch/component-boilerplate";
-import { withHooks } from "@saasquatch/stencil-hooks";
-import { Component, Prop, h, State } from "@stencil/core";
-import { AssetCardView } from "./sqm-asset-card-view";
-import { useAssetCard } from "./useAssetCard";
-import deepmerge from "deepmerge";
-/**
- * @uiName Asset Card
- */
-export class AssetCard {
-  constructor() {
-    this.ignored = true;
-    withHooks(this);
-  }
-  disconnectedCallback() { }
-  render() {
-    const props = isDemo() ? useAssetCardDemo(this) : useAssetCard(this);
-    return h(AssetCardView, Object.assign({}, props));
-  }
-  static get is() { return "sqm-asset-card"; }
-  static get encapsulation() { return "shadow"; }
-  static get assetsDirs() { return ["../../assets"]; }
-  static get properties() { return {
-    "titleText": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "text": "Banner Title",
-            "name": "uiName"
-          }],
-        "text": ""
-      },
-      "attribute": "title-text",
-      "reflect": false
-    },
-    "imgUrl": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "text": "Banner Image",
-            "name": "uiName"
-          }],
-        "text": ""
-      },
-      "attribute": "img-url",
-      "reflect": false
-    },
-    "demoData": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "DemoData<AssetCardViewProps>",
-        "resolved": "{ text?: { titleText: string; }; imgUrl?: string; }",
-        "references": {
-          "DemoData": {
-            "location": "import",
-            "path": "../../global/demo"
-          },
-          "AssetCardViewProps": {
-            "location": "import",
-            "path": "./sqm-asset-card-view"
-          }
-        }
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [{
-            "text": undefined,
-            "name": "undocumented"
-          }, {
-            "text": "object",
-            "name": "uiType"
-          }],
-        "text": ""
-      }
-    }
-  }; }
-  static get states() { return {
-    "ignored": {}
-  }; }
-}
-function useAssetCardDemo(props) {
-  return deepmerge({
-    text: {
-      titleText: "Marketing Banner",
-    },
-    imgUrl: "https://res.cloudinary.com/saasquatch/image/upload/v1634255445/squatch-assets/Copy_of_saasquatch-logo-tree-large-horizontal.png",
-    callbacks: {},
-  }, props.demoData || {}, { arrayMerge: (_, a) => a });
-}
+import { isDemo } from "@saasquatch/component-boilerplate";
+import { withHooks } from "@saasquatch/stencil-hooks";
+import { Component, Prop, h, State } from "@stencil/core";
+import { AssetCardView } from "./sqm-asset-card-view";
+import { useAssetCard } from "./useAssetCard";
+import deepmerge from "deepmerge";
+/**
+ * @uiName Asset Card
+ */
+export class AssetCard {
+  constructor() {
+    this.ignored = true;
+    withHooks(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    const props = isDemo() ? useAssetCardDemo(this) : useAssetCard(this);
+    return h(AssetCardView, Object.assign({}, props));
+  }
+  static get is() { return "sqm-asset-card"; }
+  static get encapsulation() { return "shadow"; }
+  static get assetsDirs() { return ["../../assets"]; }
+  static get properties() { return {
+    "titleText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Banner Title",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "title-text",
+      "reflect": false
+    },
+    "imgUrl": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Banner Image",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "img-url",
+      "reflect": false
+    },
+    "demoData": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "DemoData<AssetCardViewProps>",
+        "resolved": "{ text?: { titleText: string; }; imgUrl?: string; }",
+        "references": {
+          "DemoData": {
+            "location": "import",
+            "path": "../../global/demo"
+          },
+          "AssetCardViewProps": {
+            "location": "import",
+            "path": "./sqm-asset-card-view"
+          }
+        }
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": undefined,
+            "name": "undocumented"
+          }, {
+            "text": "object",
+            "name": "uiType"
+          }],
+        "text": ""
+      }
+    }
+  }; }
+  static get states() { return {
+    "ignored": {}
+  }; }
+}
+function useAssetCardDemo(props) {
+  return deepmerge({
+    text: {
+      titleText: "Marketing Banner",
+    },
+    imgUrl: "https://res.cloudinary.com/saasquatch/image/upload/v1634255445/squatch-assets/Copy_of_saasquatch-logo-tree-large-horizontal.png",
+    callbacks: {},
+  }, props.demoData || {}, { arrayMerge: (_, a) => a });
+}

package/dist/collection/components/sqm-asset-card/useAssetCard.js

@@ -1,9 +1,9 @@
-export const useAssetCard = (_props) => {
-  return {
-    text: {
-      titleText: "Marketing Banner",
-    },
-    imgUrl: null,
-    callbacks: {},
-  };
-};
+export const useAssetCard = (_props) => {
+  return {
+    text: {
+      titleText: "Marketing Banner",
+    },
+    imgUrl: null,
+    callbacks: {},
+  };
+};

package/dist/collection/components/sqm-big-stat/BigStat.stories.js

@@ -1,88 +1,88 @@
-import { h } from "@stencil/core";
-import { BigStatView } from "./sqm-big-stat-view";
-import scenario from "./BigStat.feature";
-export default {
-  title: "Components/Big Stat",
-  parameters: {
-    scenario,
-  },
-};
-export const Default = () => {
-  const props = { value: 990000, statvalue: "9.900,00", loading: false };
-  return h(BigStatView, Object.assign({}, props), "Big stat");
-};
-export const LeftAlign = () => {
-  const props = {
-    value: 500,
-    statvalue: "500",
-    alignment: "left",
-    loading: false,
-  };
-  return h(BigStatView, Object.assign({}, props), "Big stat");
-};
-export const RightAlign = () => {
-  const props = {
-    value: 500,
-    statvalue: "500",
-    alignment: "right",
-    loading: false,
-  };
-  return h(BigStatView, Object.assign({}, props), "Big stat");
-};
-export const FlexReverse = () => {
-  const props = {
-    value: 500,
-    statvalue: "500",
-    flexReverse: true,
-    loading: false,
-  };
-  return h(BigStatView, Object.assign({}, props), "Big stat");
-};
-export const FlexReverseRight = () => {
-  const props = {
-    value: 500,
-    statvalue: "500",
-    flexReverse: true,
-    alignment: "right",
-    loading: false,
-  };
-  return h(BigStatView, Object.assign({}, props), "Big stat");
-};
-export const FlexReverseLeft = () => {
-  const props = {
-    value: 500,
-    statvalue: "500",
-    flexReverse: true,
-    alignment: "left",
-    loading: false,
-  };
-  return h(BigStatView, Object.assign({}, props), "Big stat");
-};
-export const NoStatValue = () => {
-  const props = {
-    value: 0,
-    statvalue: "...",
-    loading: false,
-  };
-  return h(BigStatView, Object.assign({}, props), "Big stat");
-};
-export const InvalidStatValue = () => {
-  const props = {
-    value: 0,
-    statvalue: "!!!",
-    loading: false,
-  };
-  return h(BigStatView, Object.assign({}, props), "Big stat");
-};
-export const MultipleStats = () => {
-  return (h("sqm-stat-container", { space: "xxx-large", display: "flex" },
-    h("sqm-big-stat", { "flex-reverse": "true", alignment: "left", "stat-type": "/referralsCount" },
-      h("sqm-text", null,
-        h("p", null, "Rewards Redeemed"))),
-    h("sqm-big-stat", { "flex-reverse": "true", alignment: "left", "stat-type": "/rewardsRedeemed/CREDIT/global" },
-      h("sqm-text", null,
-        h("p", null, "Rewards Redeemed"))),
-    h("sqm-big-stat", { "flex-reverse": "true", alignment: "left", "stat-type": "/rewardBalance/CREDIT/POINT/value/global" },
-      h("sqm-text", null,
-        h("p", null, "Points Balance")))));
-};
+import { h } from "@stencil/core";
+import { BigStatView } from "./sqm-big-stat-view";
+import scenario from "./BigStat.feature";
+export default {
+  title: "Components/Big Stat",
+  parameters: {
+    scenario,
+  },
+};
+export const Default = () => {
+  const props = { value: 990000, statvalue: "9.900,00", loading: false };
+  return h(BigStatView, Object.assign({}, props), "Big stat");
+};
+export const LeftAlign = () => {
+  const props = {
+    value: 500,
+    statvalue: "500",
+    alignment: "left",
+    loading: false,
+  };
+  return h(BigStatView, Object.assign({}, props), "Big stat");
+};
+export const RightAlign = () => {
+  const props = {
+    value: 500,
+    statvalue: "500",
+    alignment: "right",
+    loading: false,
+  };
+  return h(BigStatView, Object.assign({}, props), "Big stat");
+};
+export const FlexReverse = () => {
+  const props = {
+    value: 500,
+    statvalue: "500",
+    flexReverse: true,
+    loading: false,
+  };
+  return h(BigStatView, Object.assign({}, props), "Big stat");
+};
+export const FlexReverseRight = () => {
+  const props = {
+    value: 500,
+    statvalue: "500",
+    flexReverse: true,
+    alignment: "right",
+    loading: false,
+  };
+  return h(BigStatView, Object.assign({}, props), "Big stat");
+};
+export const FlexReverseLeft = () => {
+  const props = {
+    value: 500,
+    statvalue: "500",
+    flexReverse: true,
+    alignment: "left",
+    loading: false,
+  };
+  return h(BigStatView, Object.assign({}, props), "Big stat");
+};
+export const NoStatValue = () => {
+  const props = {
+    value: 0,
+    statvalue: "...",
+    loading: false,
+  };
+  return h(BigStatView, Object.assign({}, props), "Big stat");
+};
+export const InvalidStatValue = () => {
+  const props = {
+    value: 0,
+    statvalue: "!!!",
+    loading: false,
+  };
+  return h(BigStatView, Object.assign({}, props), "Big stat");
+};
+export const MultipleStats = () => {
+  return (h("sqm-stat-container", { space: "xxx-large", display: "flex" },
+    h("sqm-big-stat", { "flex-reverse": "true", alignment: "left", "stat-type": "/referralsCount" },
+      h("sqm-text", null,
+        h("p", null, "Rewards Redeemed"))),
+    h("sqm-big-stat", { "flex-reverse": "true", alignment: "left", "stat-type": "/rewardsRedeemed/CREDIT/global" },
+      h("sqm-text", null,
+        h("p", null, "Rewards Redeemed"))),
+    h("sqm-big-stat", { "flex-reverse": "true", alignment: "left", "stat-type": "/rewardBalance/CREDIT/POINT/value/global" },
+      h("sqm-text", null,
+        h("p", null, "Points Balance")))));
+};

package/dist/collection/components/sqm-big-stat/UseBigStat.stories.js

@@ -1,113 +1,113 @@
-import { h } from "@stencil/core";
-import { BigStatView } from "./sqm-big-stat-view";
-import { useDemoBigStat } from "./useDemoBigStat";
-import { useState } from "@saasquatch/stencil-hooks";
-import { createHookStory } from "../sqm-stencilbook/HookStoryAddon";
-import { useEffect } from "@saasquatch/universal-hooks";
-import { setUserIdentity } from "@saasquatch/component-boilerplate";
-export default {
-  title: "Hooks / useBigStat",
-};
-function setupGraphQL() {
-  const id = "nynellie";
-  const accountId = id;
-  const programId = "ny-post-referrals";
-  //@ts-ignore
-  window.widgetIdent = {
-    tenantAlias: "test_a7yoz8854cf6x",
-    appDomain: "https://staging.referralsaasquatch.com",
-    programId,
-  };
-  useEffect(() => {
-    setUserIdentity({
-      accountId,
-      id,
-      jwt: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImFjY291bnRJZCI6Im55bmVsbGllIiwiaWQiOiJueW5lbGxpZSJ9fQ.3KV974VPLgk4tD8LQfJTi4IPkKCmnaB8w48HzVJYDuI",
-    });
-    return () => {
-      window.widgetIdent = undefined;
-      setUserIdentity(undefined);
-    };
-  }, []);
-}
-const View = (statType, format, label) => {
-  //   console.log(`View("${statType}") - CALLED`);
-  setupGraphQL();
-  return (h("div", null,
-    h("b", null, "Stat format:"),
-    h("pre", null, format),
-    h("br", null),
-    h("b", null, "Stat selected:"),
-    " ",
-    h("pre", { style: { color: "green" } }, statType),
-    h("sqm-big-stat", { "stat-type": statType }, label)));
-};
-const DemoView = () => {
-  const [type, setType] = useState("/someRandomThing/with/someArguments/1234");
-  const { props, label } = useDemoBigStat({
-    statType: type,
-    render: () => { },
-    disconnectedCallback: () => { },
-    ignored: true,
-  });
-  return (h("div", null,
-    h("div", null,
-      "Stat type:",
-      " ",
-      h("input", { style: { width: "300px" }, type: "text", value: type, onInput: (e) => setType(e.target.value) })),
-    h("hr", null),
-    h("div", null,
-      h(BigStatView, Object.assign({}, props), label))));
-};
-export const Demo = createHookStory(DemoView);
-export const ReferralsCount = createHookStory(() => View("/referralsCount", "/(referralsCount)/:status?"));
-export const referralsConvertedCount = createHookStory(() => {
-  return View("/referralsCount/converted", "/(referralsCount)/:status?");
-});
-export const referralsStartedCount = createHookStory(() => {
-  return View("/referralsCount/started", "/(referralsCount)/:status?");
-});
-export const ReferralsMonth = createHookStory(() => View("/referralsMonth", "/(referralsMonth)"));
-export const ReferralsWeek = createHookStory(() => View("/referralsWeek", "/(referralsWeek)"));
-export const RewardsCount = createHookStory(() => View("/rewardsCount", "/(rewardsCount)/:global?"));
-export const GlobalRewardsCount = createHookStory(() => View("/rewardsCount/global", "/(rewardsCount)/:global"));
-export const GlobalRewardsCountFiltered = createHookStory(() => View("/rewardsCountFiltered/global", "/(rewardsCountFiltered)/:statType([INTEGRATION|PCT_DISCOUNT|CREDIT]*)?/:unit((?!global)(?!PENDING)(?!CANCELLED)(?!EXPIRED)(?!REDEEMED)(?!AVAILABLE)[a-zA-Z0-9%]+)?/:status([PENDING|CANCELLED|EXPIRED|REDEEMED|AVAILABLE]*)?/:global?"));
-export const GlobalRewardsCountPctDiscount = createHookStory(() => View("/rewardsCountFiltered/PCT_DISCOUNT/global", "/(rewardsCountFiltered)/:statType([INTEGRATION|PCT_DISCOUNT|CREDIT]*)?/:unit((?!global)(?!PENDING)(?!CANCELLED)(?!EXPIRED)(?!REDEEMED)(?!AVAILABLE)[a-zA-Z0-9%]+)?/:status([PENDING|CANCELLED|EXPIRED|REDEEMED|AVAILABLE]*)?/:global?"));
-export const GlobalRewardsCountPctDiscountPending = createHookStory(() => View("/rewardsCountFiltered/PCT_DISCOUNT/PENDING/global", "/(rewardsCountFiltered)/:statType([INTEGRATION|PCT_DISCOUNT|CREDIT]*)?/:unit((?!global)(?!PENDING)(?!CANCELLED)(?!EXPIRED)(?!REDEEMED)(?!AVAILABLE)[a-zA-Z0-9%]+)?/:status([PENDING|CANCELLED|EXPIRED|REDEEMED|AVAILABLE]*)?/:global?"));
-export const RewardsCountByUnit = createHookStory(() => View("/rewardsCountFiltered/CREDIT/COFFEE", "/(rewardsCountFiltered)/:statType([INTEGRATION|PCT_DISCOUNT|CREDIT]*)?/:unit((?!global)(?!PENDING)(?!CANCELLED)(?!EXPIRED)(?!REDEEMED)(?!AVAILABLE)[a-zA-Z0-9%]+)?/:status([PENDING|CANCELLED|EXPIRED|REDEEMED|AVAILABLE]*)?/:global?"));
-export const GlobalRewardsCountByUnit = createHookStory(() => View("/rewardsCountFiltered/CREDIT/COFFEE/global", "/(rewardsCountFiltered)/:statType([INTEGRATION|PCT_DISCOUNT|CREDIT]*)?/:unit((?!global)(?!PENDING)(?!CANCELLED)(?!EXPIRED)(?!REDEEMED)(?!AVAILABLE)[a-zA-Z0-9%]+)?/:status([PENDING|CANCELLED|EXPIRED|REDEEMED|AVAILABLE]*)?/:global?"));
-export const GlobalPendingRewardsCount = createHookStory(() => View("/rewardsCountFiltered/CREDIT/COFFEE/PENDING/global", "/(rewardsCountFiltered)/:statType([INTEGRATION|PCT_DISCOUNT|CREDIT]*)?/:unit((?!global)(?!PENDING)(?!CANCELLED)(?!EXPIRED)(?!REDEEMED)(?!AVAILABLE)[a-zA-Z0-9%]+)?/:status([PENDING|CANCELLED|EXPIRED|REDEEMED|AVAILABLE]*)?/:global?"));
-export const RewardsAvailableCount = createHookStory(() => View("/rewardsCountFiltered/AVAILABLE", "/(rewardsCountFiltered)/:statType([INTEGRATION|PCT_DISCOUNT|CREDIT]*)?/:unit((?!global)(?!PENDING)(?!CANCELLED)(?!EXPIRED)(?!REDEEMED)(?!AVAILABLE)[a-zA-Z0-9%]+)?/:status([PENDING|CANCELLED|EXPIRED|REDEEMED|AVAILABLE]*)?/:global?"));
-export const GlobalRewardsCountByIntegration = createHookStory(() => View("/integrationRewardsCountFiltered/AVAILABLE/global", "/(integrationRewardsCountFiltered)/:format([PENDING|CANCELLED|EXPIRED|REDEEMED|AVAILABLE]*)?/:global?"));
-export const GlobalRewardsCountByPendingIntegration = createHookStory(() => View("/integrationRewardsCountFiltered/PENDING/global", "/(integrationRewardsCountFiltered)/:format([PENDING|CANCELLED|EXPIRED|REDEEMED|AVAILABLE]*)?/:global?"));
-export const RewardsMonth = createHookStory(() => View("/rewardsMonth", "/(rewardsMonth)/:global?"));
-export const RewardsWeek = createHookStory(() => View("/rewardsWeek", "/(rewardsWeek)/:global?"));
-export const RewardsAssigned = createHookStory(() => View("/rewardsAssigned/CREDIT/COFFEE", "/(rewardsAssigned)/:statType/:unit/:global?"));
-export const RewardsAssignedCashUSD = createHookStory(() => View("/rewardsAssigned/CREDIT/CASH%2FUSD", "/(rewardsAssigned)/:statType/:unit/:global?"));
-export const RewardsRedeemed = createHookStory(() => View("/rewardsRedeemed/CREDIT/COFFEE", "/(rewardsRedeemed)/:statType/:unit/:global?"));
-export const RewardsAvailable = createHookStory(() => View("/rewardsAvailable/CREDIT/COFFEE", "/(rewardsAvailable)/:statType/:unit/:global?"));
-export const RewardsAvailableWithSlash = createHookStory(() => View("/rewardsAvailable/CREDIT/CASH%2FUSD", "/(rewardsAvailable)/:statType/:unit/:global?"));
-export const RewardBalance = createHookStory(() => View("/rewardBalance/CREDIT/COFFEE/prettyValue", "/(rewardBalance)/:statType/:unit/:format([prettyValue|value]*)?/:global?"));
-export const RewardBalanceCashUSD = createHookStory(() => {
-  const unit = encodeURIComponent("CASH/USD");
-  return View(`/rewardBalance/CREDIT/${unit}/prettyValue`, "/(rewardBalance)/:statType/:unit/:format([prettyValue|value]*)?/:global?");
-});
-export const ProgramGoals = createHookStory(() => {
-  const dummy = encodeURIComponent("Paid-Member-Goal/referrals");
-  return View(`/programGoals/count/${dummy}`, "/(programGoals)/:metricType/:goalId");
-});
-export const CustomField = createHookStory(() => {
-  return View(`/customFields/thingCount`, "/(customFields)/:customField");
-});
-export const CustomFieldWithLabel = createHookStory(() => {
-  return View(`/customFields/thingCount`, "/(customFields)/:customField", h("sqm-text", null, "Thing Count"));
-});
-export const CustomFieldWithEmptyLabel = createHookStory(() => {
-  return View(`/customFields/thingCount`, "/(customFields)/:customField", "   ");
-});
-export const CustomFieldWithEmptySpaceLabel = createHookStory(() => {
-  return View(`/customFields/thingCount`, "/(customFields)/:customField", "\n   ");
-});
-export const CustomFieldWithTextLabel = createHookStory(() => {
-  return View(`/customFields/thingCount`, "/(customFields)/:customField", "Thing Count");
-});
+import { h } from "@stencil/core";
+import { BigStatView } from "./sqm-big-stat-view";
+import { useDemoBigStat } from "./useDemoBigStat";
+import { useState } from "@saasquatch/stencil-hooks";
+import { createHookStory } from "../sqm-stencilbook/HookStoryAddon";
+import { useEffect } from "@saasquatch/universal-hooks";
+import { setUserIdentity } from "@saasquatch/component-boilerplate";
+export default {
+  title: "Hooks / useBigStat",
+};
+function setupGraphQL() {
+  const id = "nynellie";
+  const accountId = id;
+  const programId = "ny-post-referrals";
+  //@ts-ignore
+  window.widgetIdent = {
+    tenantAlias: "test_a7yoz8854cf6x",
+    appDomain: "https://staging.referralsaasquatch.com",
+    programId,
+  };
+  useEffect(() => {
+    setUserIdentity({
+      accountId,
+      id,
+      jwt: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImFjY291bnRJZCI6Im55bmVsbGllIiwiaWQiOiJueW5lbGxpZSJ9fQ.3KV974VPLgk4tD8LQfJTi4IPkKCmnaB8w48HzVJYDuI",
+    });
+    return () => {
+      window.widgetIdent = undefined;
+      setUserIdentity(undefined);
+    };
+  }, []);
+}
+const View = (statType, format, label) => {
+  //   console.log(`View("${statType}") - CALLED`);
+  setupGraphQL();
+  return (h("div", null,
+    h("b", null, "Stat format:"),
+    h("pre", null, format),
+    h("br", null),
+    h("b", null, "Stat selected:"),
+    " ",
+    h("pre", { style: { color: "green" } }, statType),
+    h("sqm-big-stat", { "stat-type": statType }, label)));
+};
+const DemoView = () => {
+  const [type, setType] = useState("/someRandomThing/with/someArguments/1234");
+  const { props, label } = useDemoBigStat({
+    statType: type,
+    render: () => { },
+    disconnectedCallback: () => { },
+    ignored: true,
+  });
+  return (h("div", null,
+    h("div", null,
+      "Stat type:",
+      " ",
+      h("input", { style: { width: "300px" }, type: "text", value: type, onInput: (e) => setType(e.target.value) })),
+    h("hr", null),
+    h("div", null,
+      h(BigStatView, Object.assign({}, props), label))));
+};
+export const Demo = createHookStory(DemoView);
+export const ReferralsCount = createHookStory(() => View("/referralsCount", "/(referralsCount)/:status?"));
+export const referralsConvertedCount = createHookStory(() => {
+  return View("/referralsCount/converted", "/(referralsCount)/:status?");
+});
+export const referralsStartedCount = createHookStory(() => {
+  return View("/referralsCount/started", "/(referralsCount)/:status?");
+});
+export const ReferralsMonth = createHookStory(() => View("/referralsMonth", "/(referralsMonth)"));
+export const ReferralsWeek = createHookStory(() => View("/referralsWeek", "/(referralsWeek)"));
+export const RewardsCount = createHookStory(() => View("/rewardsCount", "/(rewardsCount)/:global?"));
+export const GlobalRewardsCount = createHookStory(() => View("/rewardsCount/global", "/(rewardsCount)/:global"));
+export const GlobalRewardsCountFiltered = createHookStory(() => View("/rewardsCountFiltered/global", "/(rewardsCountFiltered)/:statType([INTEGRATION|PCT_DISCOUNT|CREDIT]*)?/:unit((?!global)(?!PENDING)(?!CANCELLED)(?!EXPIRED)(?!REDEEMED)(?!AVAILABLE)[a-zA-Z0-9%]+)?/:status([PENDING|CANCELLED|EXPIRED|REDEEMED|AVAILABLE]*)?/:global?"));
+export const GlobalRewardsCountPctDiscount = createHookStory(() => View("/rewardsCountFiltered/PCT_DISCOUNT/global", "/(rewardsCountFiltered)/:statType([INTEGRATION|PCT_DISCOUNT|CREDIT]*)?/:unit((?!global)(?!PENDING)(?!CANCELLED)(?!EXPIRED)(?!REDEEMED)(?!AVAILABLE)[a-zA-Z0-9%]+)?/:status([PENDING|CANCELLED|EXPIRED|REDEEMED|AVAILABLE]*)?/:global?"));
+export const GlobalRewardsCountPctDiscountPending = createHookStory(() => View("/rewardsCountFiltered/PCT_DISCOUNT/PENDING/global", "/(rewardsCountFiltered)/:statType([INTEGRATION|PCT_DISCOUNT|CREDIT]*)?/:unit((?!global)(?!PENDING)(?!CANCELLED)(?!EXPIRED)(?!REDEEMED)(?!AVAILABLE)[a-zA-Z0-9%]+)?/:status([PENDING|CANCELLED|EXPIRED|REDEEMED|AVAILABLE]*)?/:global?"));
+export const RewardsCountByUnit = createHookStory(() => View("/rewardsCountFiltered/CREDIT/COFFEE", "/(rewardsCountFiltered)/:statType([INTEGRATION|PCT_DISCOUNT|CREDIT]*)?/:unit((?!global)(?!PENDING)(?!CANCELLED)(?!EXPIRED)(?!REDEEMED)(?!AVAILABLE)[a-zA-Z0-9%]+)?/:status([PENDING|CANCELLED|EXPIRED|REDEEMED|AVAILABLE]*)?/:global?"));
+export const GlobalRewardsCountByUnit = createHookStory(() => View("/rewardsCountFiltered/CREDIT/COFFEE/global", "/(rewardsCountFiltered)/:statType([INTEGRATION|PCT_DISCOUNT|CREDIT]*)?/:unit((?!global)(?!PENDING)(?!CANCELLED)(?!EXPIRED)(?!REDEEMED)(?!AVAILABLE)[a-zA-Z0-9%]+)?/:status([PENDING|CANCELLED|EXPIRED|REDEEMED|AVAILABLE]*)?/:global?"));
+export const GlobalPendingRewardsCount = createHookStory(() => View("/rewardsCountFiltered/CREDIT/COFFEE/PENDING/global", "/(rewardsCountFiltered)/:statType([INTEGRATION|PCT_DISCOUNT|CREDIT]*)?/:unit((?!global)(?!PENDING)(?!CANCELLED)(?!EXPIRED)(?!REDEEMED)(?!AVAILABLE)[a-zA-Z0-9%]+)?/:status([PENDING|CANCELLED|EXPIRED|REDEEMED|AVAILABLE]*)?/:global?"));
+export const RewardsAvailableCount = createHookStory(() => View("/rewardsCountFiltered/AVAILABLE", "/(rewardsCountFiltered)/:statType([INTEGRATION|PCT_DISCOUNT|CREDIT]*)?/:unit((?!global)(?!PENDING)(?!CANCELLED)(?!EXPIRED)(?!REDEEMED)(?!AVAILABLE)[a-zA-Z0-9%]+)?/:status([PENDING|CANCELLED|EXPIRED|REDEEMED|AVAILABLE]*)?/:global?"));
+export const GlobalRewardsCountByIntegration = createHookStory(() => View("/integrationRewardsCountFiltered/AVAILABLE/global", "/(integrationRewardsCountFiltered)/:format([PENDING|CANCELLED|EXPIRED|REDEEMED|AVAILABLE]*)?/:global?"));
+export const GlobalRewardsCountByPendingIntegration = createHookStory(() => View("/integrationRewardsCountFiltered/PENDING/global", "/(integrationRewardsCountFiltered)/:format([PENDING|CANCELLED|EXPIRED|REDEEMED|AVAILABLE]*)?/:global?"));
+export const RewardsMonth = createHookStory(() => View("/rewardsMonth", "/(rewardsMonth)/:global?"));
+export const RewardsWeek = createHookStory(() => View("/rewardsWeek", "/(rewardsWeek)/:global?"));
+export const RewardsAssigned = createHookStory(() => View("/rewardsAssigned/CREDIT/COFFEE", "/(rewardsAssigned)/:statType/:unit/:global?"));
+export const RewardsAssignedCashUSD = createHookStory(() => View("/rewardsAssigned/CREDIT/CASH%2FUSD", "/(rewardsAssigned)/:statType/:unit/:global?"));
+export const RewardsRedeemed = createHookStory(() => View("/rewardsRedeemed/CREDIT/COFFEE", "/(rewardsRedeemed)/:statType/:unit/:global?"));
+export const RewardsAvailable = createHookStory(() => View("/rewardsAvailable/CREDIT/COFFEE", "/(rewardsAvailable)/:statType/:unit/:global?"));
+export const RewardsAvailableWithSlash = createHookStory(() => View("/rewardsAvailable/CREDIT/CASH%2FUSD", "/(rewardsAvailable)/:statType/:unit/:global?"));
+export const RewardBalance = createHookStory(() => View("/rewardBalance/CREDIT/COFFEE/prettyValue", "/(rewardBalance)/:statType/:unit/:format([prettyValue|value]*)?/:global?"));
+export const RewardBalanceCashUSD = createHookStory(() => {
+  const unit = encodeURIComponent("CASH/USD");
+  return View(`/rewardBalance/CREDIT/${unit}/prettyValue`, "/(rewardBalance)/:statType/:unit/:format([prettyValue|value]*)?/:global?");
+});
+export const ProgramGoals = createHookStory(() => {
+  const dummy = encodeURIComponent("Paid-Member-Goal/referrals");
+  return View(`/programGoals/count/${dummy}`, "/(programGoals)/:metricType/:goalId");
+});
+export const CustomField = createHookStory(() => {
+  return View(`/customFields/thingCount`, "/(customFields)/:customField");
+});
+export const CustomFieldWithLabel = createHookStory(() => {
+  return View(`/customFields/thingCount`, "/(customFields)/:customField", h("sqm-text", null, "Thing Count"));
+});
+export const CustomFieldWithEmptyLabel = createHookStory(() => {
+  return View(`/customFields/thingCount`, "/(customFields)/:customField", "   ");
+});
+export const CustomFieldWithEmptySpaceLabel = createHookStory(() => {
+  return View(`/customFields/thingCount`, "/(customFields)/:customField", "\n   ");
+});
+export const CustomFieldWithTextLabel = createHookStory(() => {
+  return View(`/customFields/thingCount`, "/(customFields)/:customField", "Thing Count");
+});