npm - @saasquatch/mint-components - Versions diffs - 1.3.1-6 → 1.3.2-10 - Mend

@saasquatch/mint-components 1.3.1-6 → 1.3.2-10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (344) hide show

package/dist/collection/{stories → components/sqm-asset-card}/AssetCard.stories.js RENAMED Viewed

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
-import { AssetCardView } from "../components/sqm-asset-card/sqm-asset-card-view";
+import { AssetCardView } from "./sqm-asset-card-view";
 export default {
-  title: "Asset Card",
+  title: "Components/Asset Card",
 };
 export const Default = () => {
   const props = {

package/dist/collection/{stories → components/sqm-big-stat}/BigStat.stories.js RENAMED Viewed

@@ -1,14 +1,15 @@
 import { h } from "@stencil/core";
-import { BigStatView } from "../components/sqm-big-stat/sqm-big-stat-view";
+import { BigStatView } from "./sqm-big-stat-view";
 export default {
-  title: "Big Stat",
+  title: "Components/Big Stat",
 };
 export const Default = () => {
-  const props = { statvalue: "9.900,00" };
+  const props = { value: 990000, statvalue: "9.900,00" };
   return h(BigStatView, Object.assign({}, props), "Big stat");
 };
 export const LeftAlign = () => {
   const props = {
+    value: 500,
     statvalue: "500",
     alignment: "left",
   };
@@ -16,6 +17,7 @@ export const LeftAlign = () => {
 };
 export const RightAlign = () => {
   const props = {
+    value: 500,
     statvalue: "500",
     alignment: "right",
   };
@@ -23,6 +25,7 @@ export const RightAlign = () => {
 };
 export const FlexReverse = () => {
   const props = {
+    value: 500,
     statvalue: "500",
     flexReverse: true,
   };
@@ -30,6 +33,7 @@ export const FlexReverse = () => {
 };
 export const FlexReverseRight = () => {
   const props = {
+    value: 500,
     statvalue: "500",
     flexReverse: true,
     alignment: "right",
@@ -38,6 +42,7 @@ export const FlexReverseRight = () => {
 };
 export const FlexReverseLeft = () => {
   const props = {
+    value: 500,
     statvalue: "500",
     flexReverse: true,
     alignment: "left",
@@ -46,12 +51,14 @@ export const FlexReverseLeft = () => {
 };
 export const NoStatValue = () => {
   const props = {
+    value: 0,
     statvalue: "...",
   };
   return h(BigStatView, Object.assign({}, props), "Big stat");
 };
 export const InvalidStatValue = () => {
   const props = {
+    value: 0,
     statvalue: "!!!",
   };
   return h(BigStatView, Object.assign({}, props), "Big stat");

package/dist/collection/{stories → components/sqm-big-stat}/UseBigStat.stories.js RENAMED Viewed

@@ -1,9 +1,9 @@
 import { h } from "@stencil/core";
-import { BigStatView } from "../components/sqm-big-stat/sqm-big-stat-view";
-import { useDemoBigStat } from "../components/sqm-big-stat/useDemoBigStat";
-import { useBigStat } from "../components/sqm-big-stat/useBigStat";
+import { BigStatView } from "./sqm-big-stat-view";
+import { useDemoBigStat } from "./useDemoBigStat";
+import { useBigStat } from "./useBigStat";
 import { useState } from "@saasquatch/stencil-hooks";
-import { createHookStory } from "../components/sqm-stencilbook/HookStoryAddon";
+import { createHookStory } from "../sqm-stencilbook/HookStoryAddon";
 import { useEffect } from "@saasquatch/universal-hooks";
 import { setUserIdentity } from "@saasquatch/component-boilerplate";
 export default {
@@ -103,3 +103,6 @@ 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");
+});

package/dist/collection/components/sqm-big-stat/sqm-big-stat.js CHANGED Viewed

@@ -100,32 +100,12 @@ export class BigStat {
       "attribute": "alignment",
       "reflect": false
     },
-    "programId": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [{
-            "text": "Program ID",
-            "name": "uiName"
-          }],
-        "text": "The ID of the program that is used to scope stats. Defaults to the program ID in context where this widget is loaded."
-      },
-      "attribute": "program-id",
-      "reflect": false
-    },
     "demoData": {
       "type": "unknown",
       "mutable": false,
       "complexType": {
         "original": "DemoData<BigStatViewProps>",
-        "resolved": "{ statvalue?: string; flexReverse?: boolean; alignment?: \"left\" | \"right\" | \"center\"; }",
+        "resolved": "{ value?: number; statvalue?: string; flexReverse?: boolean; alignment?: \"left\" | \"right\" | \"center\"; }",
         "references": {
           "DemoData": {
             "location": "import",

package/dist/collection/components/sqm-big-stat/useBigStat.js CHANGED Viewed

@@ -35,7 +35,13 @@ _, status) => {
           }
         }
       }
-    `, { queryFilter }, (res) => { var _a, _b, _c, _d; return (_d = (_c = (_b = (_a = res.data) === null || _a === void 0 ? void 0 : _a.viewer) === null || _b === void 0 ? void 0 : _b.referrals) === null || _c === void 0 ? void 0 : _c.totalCount) === null || _d === void 0 ? void 0 : _d.toString(); });
+    `, { queryFilter }, (res) => {
+    var _a, _b, _c, _d, _e, _f, _g;
+    return ({
+      value: (_c = (_b = (_a = res.data) === null || _a === void 0 ? void 0 : _a.viewer) === null || _b === void 0 ? void 0 : _b.referrals) === null || _c === void 0 ? void 0 : _c.totalCount,
+      statvalue: (_g = (_f = (_e = (_d = res.data) === null || _d === void 0 ? void 0 : _d.viewer) === null || _e === void 0 ? void 0 : _e.referrals) === null || _f === void 0 ? void 0 : _f.totalCount) === null || _g === void 0 ? void 0 : _g.toString(),
+    });
+  });
 };
 const programGoalsQuery = (programId, locale, metricType, goalId) => {
   // Confirm this behaviour
@@ -55,9 +61,33 @@ const programGoalsQuery = (programId, locale, metricType, goalId) => {
         }
       }
     `, { programId, metricType, goalId, locale }, (res) => {
-    var _a, _b, _c, _d, _e;
+    var _a, _b, _c, _d, _e, _f;
     const goal = (_c = (_b = (_a = res.data) === null || _a === void 0 ? void 0 : _a.viewer) === null || _b === void 0 ? void 0 : _b.programGoals) === null || _c === void 0 ? void 0 : _c.filter((goal) => goal.goalId === goalId && goal.programId === programId);
-    return ((_e = (_d = goal === null || goal === void 0 ? void 0 : goal[0]) === null || _d === void 0 ? void 0 : _d[metricType]) === null || _e === void 0 ? void 0 : _e.toString()) || 0;
+    return {
+      value: ((_d = goal === null || goal === void 0 ? void 0 : goal[0]) === null || _d === void 0 ? void 0 : _d[metricType]) || 0,
+      statvalue: ((_f = (_e = goal === null || goal === void 0 ? void 0 : goal[0]) === null || _e === void 0 ? void 0 : _e[metricType]) === null || _f === void 0 ? void 0 : _f.toString()) || 0,
+    };
+  });
+};
+const customFieldsQuery = (programId, locale, fieldName, goalId) => {
+  // Confirm this behaviour
+  if (programId === "classic")
+    return null;
+  return debugQuery(gql `
+      query {
+        viewer {
+          ... on User {
+            customFields
+          }
+        }
+      }
+    `, { programId, fieldName, goalId, locale }, (res) => {
+    var _a, _b, _c;
+    const customField = (_c = (_b = (_a = res.data) === null || _a === void 0 ? void 0 : _a.viewer) === null || _b === void 0 ? void 0 : _b.customFields) === null || _c === void 0 ? void 0 : _c[fieldName];
+    return {
+      value: customField || 0,
+      statvalue: (customField === null || customField === void 0 ? void 0 : customField.toString()) || "0",
+    };
   });
 };
 const referralsMonthQuery = (programId) => {
@@ -78,7 +108,13 @@ const referralsMonthQuery = (programId) => {
           }
         }
       }
-    `, { filter }, (res) => { var _a, _b, _c, _d; return (_d = (_c = (_b = (_a = res.data) === null || _a === void 0 ? void 0 : _a.viewer) === null || _b === void 0 ? void 0 : _b.referrals) === null || _c === void 0 ? void 0 : _c.totalCount) === null || _d === void 0 ? void 0 : _d.toString(); });
+    `, { filter }, (res) => {
+    var _a, _b, _c, _d, _e, _f, _g;
+    return ({
+      value: ((_c = (_b = (_a = res.data) === null || _a === void 0 ? void 0 : _a.viewer) === null || _b === void 0 ? void 0 : _b.referrals) === null || _c === void 0 ? void 0 : _c.totalCount) || 0,
+      statvalue: (_g = (_f = (_e = (_d = res.data) === null || _d === void 0 ? void 0 : _d.viewer) === null || _e === void 0 ? void 0 : _e.referrals) === null || _f === void 0 ? void 0 : _f.totalCount) === null || _g === void 0 ? void 0 : _g.toString(),
+    });
+  });
 };
 const referralsWeekQuery = (programId) => {
   const programFilter = programId === "classic"
@@ -98,7 +134,13 @@ const referralsWeekQuery = (programId) => {
           }
         }
       }
-    `, { filter }, (res) => { var _a, _b, _c, _d; return (_d = (_c = (_b = (_a = res.data) === null || _a === void 0 ? void 0 : _a.viewer) === null || _b === void 0 ? void 0 : _b.referrals) === null || _c === void 0 ? void 0 : _c.totalCount) === null || _d === void 0 ? void 0 : _d.toString(); });
+    `, { filter }, (res) => {
+    var _a, _b, _c, _d, _e, _f, _g;
+    return ({
+      value: ((_c = (_b = (_a = res.data) === null || _a === void 0 ? void 0 : _a.viewer) === null || _b === void 0 ? void 0 : _b.referrals) === null || _c === void 0 ? void 0 : _c.totalCount) || 0,
+      statvalue: (_g = (_f = (_e = (_d = res.data) === null || _d === void 0 ? void 0 : _d.viewer) === null || _e === void 0 ? void 0 : _e.referrals) === null || _f === void 0 ? void 0 : _f.totalCount) === null || _g === void 0 ? void 0 : _g.toString(),
+    });
+  });
 };
 const rewardsCountQuery = (programId,
 // locale
@@ -115,7 +157,13 @@ _, global = "") => {
       }
     `, {
     programId: !global && programId !== "classic" ? programId : null,
-  }, (res) => { var _a, _b, _c, _d; return (_d = (_c = (_b = (_a = res.data) === null || _a === void 0 ? void 0 : _a.viewer) === null || _b === void 0 ? void 0 : _b.rewards) === null || _c === void 0 ? void 0 : _c.totalCount) === null || _d === void 0 ? void 0 : _d.toString(); });
+  }, (res) => {
+    var _a, _b, _c, _d, _e, _f, _g;
+    return ({
+      value: ((_c = (_b = (_a = res.data) === null || _a === void 0 ? void 0 : _a.viewer) === null || _b === void 0 ? void 0 : _b.rewards) === null || _c === void 0 ? void 0 : _c.totalCount) || 0,
+      statvalue: (_g = (_f = (_e = (_d = res.data) === null || _d === void 0 ? void 0 : _d.viewer) === null || _e === void 0 ? void 0 : _e.rewards) === null || _f === void 0 ? void 0 : _f.totalCount) === null || _g === void 0 ? void 0 : _g.toString(),
+    });
+  });
 };
 const rewardsCountFilteredQuery = (programId,
 // locale
@@ -148,7 +196,13 @@ _, type, unit, status, global = "") => {
     unit,
     type,
     statusFilter,
-  }, (res) => { var _a, _b, _c, _d; return (_d = (_c = (_b = (_a = res.data) === null || _a === void 0 ? void 0 : _a.viewer) === null || _b === void 0 ? void 0 : _b.rewards) === null || _c === void 0 ? void 0 : _c.totalCount) === null || _d === void 0 ? void 0 : _d.toString(); });
+  }, (res) => {
+    var _a, _b, _c, _d, _e, _f, _g;
+    return ({
+      value: ((_c = (_b = (_a = res.data) === null || _a === void 0 ? void 0 : _a.viewer) === null || _b === void 0 ? void 0 : _b.rewards) === null || _c === void 0 ? void 0 : _c.totalCount) || 0,
+      statvalue: (_g = (_f = (_e = (_d = res.data) === null || _d === void 0 ? void 0 : _d.viewer) === null || _e === void 0 ? void 0 : _e.rewards) === null || _f === void 0 ? void 0 : _f.totalCount) === null || _g === void 0 ? void 0 : _g.toString(),
+    });
+  });
 };
 const integrationRewardsCountFilteredQuery = (programId,
 // locale
@@ -173,7 +227,13 @@ _, status, global = "") => {
     `, {
     programId: !global && programId !== "classic" ? programId : null,
     statusFilter,
-  }, (res) => { var _a, _b, _c, _d; return (_d = (_c = (_b = (_a = res.data) === null || _a === void 0 ? void 0 : _a.viewer) === null || _b === void 0 ? void 0 : _b.rewards) === null || _c === void 0 ? void 0 : _c.totalCount) === null || _d === void 0 ? void 0 : _d.toString(); });
+  }, (res) => {
+    var _a, _b, _c, _d, _e, _f, _g;
+    return ({
+      value: ((_c = (_b = (_a = res.data) === null || _a === void 0 ? void 0 : _a.viewer) === null || _b === void 0 ? void 0 : _b.rewards) === null || _c === void 0 ? void 0 : _c.totalCount) || 0,
+      statvalue: (_g = (_f = (_e = (_d = res.data) === null || _d === void 0 ? void 0 : _d.viewer) === null || _e === void 0 ? void 0 : _e.rewards) === null || _f === void 0 ? void 0 : _f.totalCount) === null || _g === void 0 ? void 0 : _g.toString(),
+    });
+  });
 };
 const rewardsMonthQuery = (programId,
 // locale
@@ -195,7 +255,13 @@ _, global = "") => {
       }
     `, {
     programId: !global && programId !== "classic" ? programId : null,
-  }, (res) => { var _a, _b, _c, _d; return (_d = (_c = (_b = (_a = res.data) === null || _a === void 0 ? void 0 : _a.viewer) === null || _b === void 0 ? void 0 : _b.rewards) === null || _c === void 0 ? void 0 : _c.totalCount) === null || _d === void 0 ? void 0 : _d.toString(); });
+  }, (res) => {
+    var _a, _b, _c, _d, _e, _f, _g;
+    return ({
+      value: ((_c = (_b = (_a = res.data) === null || _a === void 0 ? void 0 : _a.viewer) === null || _b === void 0 ? void 0 : _b.rewards) === null || _c === void 0 ? void 0 : _c.totalCount) || 0,
+      statvalue: (_g = (_f = (_e = (_d = res.data) === null || _d === void 0 ? void 0 : _d.viewer) === null || _e === void 0 ? void 0 : _e.rewards) === null || _f === void 0 ? void 0 : _f.totalCount) === null || _g === void 0 ? void 0 : _g.toString(),
+    });
+  });
 };
 const rewardsWeekQuery = (programId,
 // locale
@@ -217,7 +283,13 @@ _, global = "") => {
       }
     `, {
     programId: !global && programId !== "classic" ? programId : null,
-  }, (res) => { var _a, _b, _c, _d; return (_d = (_c = (_b = (_a = res.data) === null || _a === void 0 ? void 0 : _a.viewer) === null || _b === void 0 ? void 0 : _b.rewards) === null || _c === void 0 ? void 0 : _c.totalCount) === null || _d === void 0 ? void 0 : _d.toString(); });
+  }, (res) => {
+    var _a, _b, _c, _d, _e, _f, _g;
+    return ({
+      value: ((_c = (_b = (_a = res.data) === null || _a === void 0 ? void 0 : _a.viewer) === null || _b === void 0 ? void 0 : _b.rewards) === null || _c === void 0 ? void 0 : _c.totalCount) || 0,
+      statvalue: (_g = (_f = (_e = (_d = res.data) === null || _d === void 0 ? void 0 : _d.viewer) === null || _e === void 0 ? void 0 : _e.rewards) === null || _f === void 0 ? void 0 : _f.totalCount) === null || _g === void 0 ? void 0 : _g.toString(),
+    });
+  });
 };
 const rewardsRedeemedQuery = (programId, locale, type, unit, global = "") => {
   return debugQuery(gql `
@@ -252,10 +324,13 @@ const rewardsRedeemedQuery = (programId, locale, type, unit, global = "") => {
     unit,
     locale,
   }, (res) => {
-    var _a, _b, _c, _d;
+    var _a, _b, _c, _d, _e;
     const arr = (_b = (_a = res.data) === null || _a === void 0 ? void 0 : _a.viewer) === null || _b === void 0 ? void 0 : _b.rewardBalanceDetails;
     const fallback = (_c = res.data) === null || _c === void 0 ? void 0 : _c.fallback;
-    return ((_d = arr === null || arr === void 0 ? void 0 : arr[0]) === null || _d === void 0 ? void 0 : _d.prettyRedeemedCredit) || fallback;
+    return {
+      value: ((_d = arr === null || arr === void 0 ? void 0 : arr[0]) === null || _d === void 0 ? void 0 : _d.prettyRedeemedCredit) || 0,
+      statvalue: ((_e = arr === null || arr === void 0 ? void 0 : arr[0]) === null || _e === void 0 ? void 0 : _e.prettyRedeemedCredit) || fallback,
+    };
   });
 };
 const rewardsAssignedQuery = (programId, locale, type, unit, global = "") => {
@@ -291,10 +366,13 @@ const rewardsAssignedQuery = (programId, locale, type, unit, global = "") => {
     unit,
     locale,
   }, (res) => {
-    var _a, _b, _c, _d;
+    var _a, _b, _c, _d, _e;
     const arr = (_b = (_a = res.data) === null || _a === void 0 ? void 0 : _a.viewer) === null || _b === void 0 ? void 0 : _b.rewardBalanceDetails;
     const fallback = (_c = res.data) === null || _c === void 0 ? void 0 : _c.fallback;
-    return ((_d = arr === null || arr === void 0 ? void 0 : arr[0]) === null || _d === void 0 ? void 0 : _d.prettyAssignedCredit) || fallback;
+    return {
+      value: ((_d = arr === null || arr === void 0 ? void 0 : arr[0]) === null || _d === void 0 ? void 0 : _d.prettyAssignedCredit) || 0,
+      statvalue: ((_e = arr === null || arr === void 0 ? void 0 : arr[0]) === null || _e === void 0 ? void 0 : _e.prettyAssignedCredit) || fallback,
+    };
   });
 };
 const rewardsAvailableQuery = (programId, locale, type, unit, global = "") => {
@@ -330,10 +408,13 @@ const rewardsAvailableQuery = (programId, locale, type, unit, global = "") => {
     unit,
     locale,
   }, (res) => {
-    var _a, _b, _c, _d;
+    var _a, _b, _c, _d, _e;
     const arr = (_b = (_a = res.data) === null || _a === void 0 ? void 0 : _a.viewer) === null || _b === void 0 ? void 0 : _b.rewardBalanceDetails;
     const fallback = (_c = res.data) === null || _c === void 0 ? void 0 : _c.fallback;
-    return ((_d = arr === null || arr === void 0 ? void 0 : arr[0]) === null || _d === void 0 ? void 0 : _d.prettyAvailableValue) || fallback;
+    return {
+      value: ((_d = arr === null || arr === void 0 ? void 0 : arr[0]) === null || _d === void 0 ? void 0 : _d.prettyAvailableValue) || 0,
+      statvalue: ((_e = arr === null || arr === void 0 ? void 0 : arr[0]) === null || _e === void 0 ? void 0 : _e.prettyAvailableValue) || fallback,
+    };
   });
 };
 const parseRewardValueFormat = {
@@ -376,10 +457,13 @@ const rewardsBalanceQuery = (programId, locale, type, unit, format = "prettyValu
     format: (_a = parseRewardValueFormat[format]) !== null && _a !== void 0 ? _a : "UNIT_FORMATTED",
     locale,
   }, (res) => {
-    var _a, _b, _c, _d;
+    var _a, _b, _c, _d, _e;
     const arr = (_b = (_a = res.data) === null || _a === void 0 ? void 0 : _a.viewer) === null || _b === void 0 ? void 0 : _b.rewardBalanceDetails;
     const fallback = (_c = res.data) === null || _c === void 0 ? void 0 : _c.fallback;
-    return ((_d = arr === null || arr === void 0 ? void 0 : arr[0]) === null || _d === void 0 ? void 0 : _d.prettyAvailableValue) || fallback;
+    return {
+      value: ((_d = arr === null || arr === void 0 ? void 0 : arr[0]) === null || _d === void 0 ? void 0 : _d.prettyAvailableValue) || 0,
+      statvalue: ((_e = arr === null || arr === void 0 ? void 0 : arr[0]) === null || _e === void 0 ? void 0 : _e.prettyAvailableValue) || fallback,
+    };
   });
 };
 // functions are of the form (programId: string, ...args: string) => string
@@ -436,10 +520,15 @@ export const queries = {
     label: "Program Goals",
     query: programGoalsQuery,
   },
+  customFields: {
+    label: "Custom Fields",
+    query: customFieldsQuery,
+  },
 };
 // this should be exposed in documentation somehow
 export const StatPaths = [
   { name: "programGoals", route: "/(programGoals)/:metricType/:goalId" },
+  { name: "customFields", route: "/(customFields)/:customField" },
   { name: "referralsCount", route: "/(referralsCount)/:status?" },
   { name: "referralsMonth", route: "/(referralsMonth)" },
   { name: "referralsWeek", route: "/(referralsWeek)" },
@@ -473,13 +562,15 @@ export const StatPaths = [
 ];
 export const StatPatterns = StatPaths.map((pattern) => pathToRegexp(pattern.route));
 export function useBigStat(props) {
-  const { statType, flexReverse, alignment, programId = useProgramId(), } = props;
+  var _a;
+  const { statType, flexReverse, alignment } = props;
+  const programId = useProgramId();
   const locale = useLocale();
   const userIdent = useUserIdentity();
   const re = useMemo(() => StatPatterns.find((re) => re.exec(statType)), [statType]);
   if (!(re === null || re === void 0 ? void 0 : re.exec(statType))) {
     return {
-      props: { statvalue: "!!!", flexReverse, alignment },
+      props: { value: 0, statvalue: "!!!", flexReverse, alignment },
       label: "BAD PROP TYPE",
     };
   }
@@ -502,7 +593,12 @@ export function useBigStat(props) {
   const stat = (userIdent === null || userIdent === void 0 ? void 0 : userIdent.jwt) && queries[queryName].query(programId, locale, ...queryArgs);
   debug("stat:", stat);
   return {
-    props: { statvalue: stat !== null && stat !== void 0 ? stat : LOADING, flexReverse, alignment },
+    props: {
+      value: stat === null || stat === void 0 ? void 0 : stat.value,
+      statvalue: (_a = stat === null || stat === void 0 ? void 0 : stat.statvalue) !== null && _a !== void 0 ? _a : LOADING,
+      flexReverse,
+      alignment,
+    },
     label,
   };
 }

package/dist/collection/components/sqm-big-stat/useDemoBigStat.js CHANGED Viewed

@@ -7,6 +7,7 @@ export function useDemoBigStat(props) {
   if (!(re === null || re === void 0 ? void 0 : re.exec(statType))) {
     return {
       props: {
+        value: 0,
         statvalue: "!!!",
         flexReverse: false,
         alignment: "center",

package/dist/collection/{stories → components/sqm-divided-layout}/DividedLayout.stories.js RENAMED Viewed

@@ -1,9 +1,9 @@
 import { h } from "@stencil/core";
-import { NavigationSidebarItemView } from "../components/sqm-navigation-sidebar-item/sqm-navigation-sidebar-item-view";
-import { NavigationSidebarView } from "../components/sqm-navigation-sidebar/sqm-navigation-sidebar-view";
-import { PortalSectionView } from "../components/sqm-titled-section/sqm-portal-section-view";
+import { NavigationSidebarItemView } from "../sqm-navigation-sidebar-item/sqm-navigation-sidebar-item-view";
+import { NavigationSidebarView } from "../sqm-navigation-sidebar/sqm-navigation-sidebar-view";
+import { PortalSectionView } from "../sqm-titled-section/sqm-portal-section-view";
 export default {
-  title: "Divided Layout",
+  title: "Components/Divided Layout",
 };
 const barProps = {
   data: {

package/dist/collection/{stories → components/sqm-edit-profile}/EditProfileForm.stories.js RENAMED Viewed

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
-import EditProfileView from "../components/sqm-edit-profile/sqm-edit-profile-view";
+import EditProfileView from "./sqm-edit-profile-view";
 export default {
-  title: "Edit Profile Form",
+  title: "Components/Edit Profile Form",
 };
 const defaultProps = {
   states: {

package/dist/collection/{stories → components/sqm-edit-profile}/UseEditProfile.stories.js RENAMED Viewed

@@ -1,7 +1,7 @@
 import { setUserIdentity } from "@saasquatch/component-boilerplate";
 import { useEffect } from "@saasquatch/universal-hooks";
 import { h } from "@stencil/core";
-import { createHookStory } from "../components/sqm-stencilbook/HookStoryAddon";
+import { createHookStory } from "../sqm-stencilbook/HookStoryAddon";
 function setupGraphQL() {
   const id = "worried-camera@uexwltgh.mailosaur.net";
   const accountId = id;

package/dist/collection/{stories → components/sqm-form-message}/FormMessage.stories.js RENAMED Viewed

@@ -1,6 +1,6 @@
 import { h } from "@stencil/core";
 export default {
-  title: "Form Message",
+  title: "Components/Form Message",
 };
 export const SuccessAlert = () => {
   return (h("sqm-form-message", { type: "success" },

package/dist/collection/{stories → components/sqm-hero}/Hero.stories.js RENAMED Viewed

@@ -1,6 +1,6 @@
 import { h } from "@stencil/core";
-import { HeroView } from "../components/sqm-hero/sqm-hero-view";
-import scenario from "../components/sqm-hero/sqm-hero.feature";
+import { HeroView } from "./sqm-hero-view";
+import scenario from "../sqm-hero/sqm-hero.feature";
 export default {
   title: "Hero Layout",
   parameters: {

package/dist/collection/{stories → components/sqm-leaderboard}/Leaderboard.stories.js RENAMED Viewed

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
-import { LeaderboardView } from "../components/sqm-leaderboard/sqm-leaderboard-view";
+import { LeaderboardView } from "./sqm-leaderboard-view";
 export default {
-  title: "Leaderboard",
+  title: "Components/Leaderboard",
   parameters: {
     tagname: "sqm-leaderboard",
   },

package/dist/collection/{stories → components/sqm-leaderboard}/UseLeaderboard.stories.js RENAMED Viewed

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
-import { createHookStory } from "../components/sqm-stencilbook/HookStoryAddon";
-import { useLeaderboard, } from "../components/sqm-leaderboard/useLeaderboard";
-import { LeaderboardView } from "../components/sqm-leaderboard/sqm-leaderboard-view";
+import { createHookStory } from "../sqm-stencilbook/HookStoryAddon";
+import { useLeaderboard, } from "./useLeaderboard";
+import { LeaderboardView } from "./sqm-leaderboard-view";
 import { useEffect } from "@saasquatch/universal-hooks";
 import { setUserIdentity } from "@saasquatch/component-boilerplate";
 export default {

package/dist/collection/{stories → components/sqm-leaderboard-rank}/LeaderboardRank.stories.js RENAMED Viewed

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
-import { LeaderboardRankView } from "../components/sqm-leaderboard-rank/sqm-leaderboard-rank-view";
+import { LeaderboardRankView } from "./sqm-leaderboard-rank-view";
 export default {
-  title: "Leaderboard Rank",
+  title: "Components/Leaderboard Rank",
 };
 export const First = () => {
   const props = { data: { rank: "1st" } };

package/dist/collection/{stories → components/sqm-name-fields}/NameFields.stories.js RENAMED Viewed

@@ -1,6 +1,6 @@
 import { h } from "@stencil/core";
-import { NameFieldsView, } from "../components/sqm-name-fields/sqm-name-fields-view";
-import scenario from "../components/sqm-name-fields/sqm-name-fields.feature";
+import { NameFieldsView, } from "./sqm-name-fields-view";
+import scenario from "../sqm-name-fields/sqm-name-fields.feature";
 export default {
   title: "Name Fields",
   parameters: {

package/dist/collection/{stories → components/sqm-navigation-sidebar}/NavigationSidebar.stories.js RENAMED Viewed

@@ -1,8 +1,8 @@
 import { h } from "@stencil/core";
-import { NavigationSidebarView } from "../components/sqm-navigation-sidebar/sqm-navigation-sidebar-view";
-import { NavigationSidebarItemView } from "../components/sqm-navigation-sidebar-item/sqm-navigation-sidebar-item-view";
+import { NavigationSidebarView } from "./sqm-navigation-sidebar-view";
+import { NavigationSidebarItemView } from "../sqm-navigation-sidebar-item/sqm-navigation-sidebar-item-view";
 export default {
-  title: "Navigation Sidebar",
+  title: "Components/Navigation Sidebar",
 };
 export const DefaultNavigationSidebar = () => {
   const barProps = {

package/dist/collection/{stories → components/sqm-navigation-sidebar-item}/SidebarItem.stories.js RENAMED Viewed

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
-import { NavigationSidebarItemView } from "../components/sqm-navigation-sidebar-item/sqm-navigation-sidebar-item-view";
+import { NavigationSidebarItemView } from "./sqm-navigation-sidebar-item-view";
 export default {
-  title: "Sidebar Item",
+  title: "Components/Sidebar Item",
 };
 export const InactiveItem = () => {
   const props = {

package/dist/collection/{stories → components/sqm-password-field}/PasswordField.stories.js RENAMED Viewed

@@ -1,6 +1,6 @@
 import { h } from "@stencil/core";
 export default {
-  title: "Portal Password Field",
+  title: "Components/Portal Password Field",
 };
 export const Start = () => {
   return (h("sqm-password-field", { demoData: {

package/dist/collection/{stories → components/sqm-portal-change-password}/ChangePassword.stories.js RENAMED Viewed

@@ -1,8 +1,8 @@
 import { h } from "@stencil/core";
-import { PortalChangePasswordView } from "../components/sqm-portal-change-password/sqm-portal-change-password-view";
-import scenario from "../components/sqm-portal-change-password/sqm-portal-change-password.feature";
+import { PortalChangePasswordView } from "./sqm-portal-change-password-view";
+import scenario from "./sqm-portal-change-password.feature";
 export default {
-  title: "Change Password",
+  title: "Components/Change Password",
   parameters: {
     scenario,
   },

package/dist/collection/{stories → components/sqm-portal-email-verification}/PortalEmailVerification.stories.js RENAMED Viewed

@@ -1,8 +1,8 @@
 import { h } from "@stencil/core";
-import { PortalEmailVerificationView, } from "../components/sqm-portal-email-verification/sqm-portal-email-verification-view";
-import scenario from "../components/sqm-portal-email-verification/sqm-portal-email-verification.feature";
+import { PortalEmailVerificationView, } from "./sqm-portal-email-verification-view";
+import scenario from "./sqm-portal-email-verification.feature";
 export default {
-  title: "Portal Email Verification",
+  title: "Components/Portal Email Verification",
   parameters: {
     scenario,
   },

package/dist/collection/{stories → components/sqm-portal-footer}/PortalFooter.stories.js RENAMED Viewed

@@ -1,6 +1,6 @@
 import { h } from "@stencil/core";
-import { PortalFooterView } from "../components/sqm-portal-footer/sqm-portal-footer-view";
-import scenario from "../components/sqm-portal-footer/sqm-portal-footer.feature";
+import { PortalFooterView } from "./sqm-portal-footer-view";
+import scenario from "../sqm-portal-footer/sqm-portal-footer.feature";
 export default {
   title: "Portal Footer",
   parameters: {

package/dist/collection/{stories → components/sqm-portal-forgot-password}/PortalForgotPassword.stories.js RENAMED Viewed

@@ -1,8 +1,8 @@
 import { h } from "@stencil/core";
-import { PortalForgotPasswordView, } from "../components/sqm-portal-forgot-password/sqm-portal-forgot-password-view";
-import scenario from "../components/sqm-portal-forgot-password/sqm-portal-forgot-password.feature";
+import { PortalForgotPasswordView, } from "./sqm-portal-forgot-password-view";
+import scenario from "./sqm-portal-forgot-password.feature";
 export default {
-  title: "Portal Forgot Password",
+  title: "Components/Portal Forgot Password",
   parameters: {
     scenario,
   },

package/dist/collection/{stories → components/sqm-portal-frame}/PortalFrame.stories.js RENAMED Viewed

@@ -1,6 +1,6 @@
 import { navigation, useCurrentPage } from "@saasquatch/component-boilerplate";
 import { h } from "@stencil/core";
-import { PortalFrameView } from "../components/sqm-portal-frame/sqm-portal-frame-view";
+import { PortalFrameView } from "./sqm-portal-frame-view";
 function setupGraphQL() {
   const id = "worried-camera@uexwltgh.mailosaur.net";
   const accountId = id;
@@ -32,7 +32,7 @@ function setupLoggedOut() {
   };
 }
 export default {
-  title: "Portal Frame",
+  title: "Components/Portal Frame",
 };
 const defaultProps = {
   data: {

package/dist/collection/{stories → components/sqm-portal-login}/PortalLogin.stories.js RENAMED Viewed

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
-import { PortalLoginView, } from "../components/sqm-portal-login/sqm-portal-login-view";
+import { PortalLoginView, } from "./sqm-portal-login-view";
 export default {
-  title: "Portal Login",
+  title: "Components/Portal Login",
 };
 const defaultProps = {
   states: {

package/dist/collection/{stories → components/sqm-portal-profile}/PortalProfile.stories.js RENAMED Viewed

@@ -1,9 +1,9 @@
 import { h } from "@stencil/core";
 import jss from "jss";
 import preset from "jss-preset-default";
-import { PortalProfileView, } from "../components/sqm-portal-profile/sqm-portal-profile-view";
+import { PortalProfileView, } from "./sqm-portal-profile-view";
 export default {
-  title: "Portal Profile",
+  title: "Components/Portal Profile",
 };
 // const style = {};
 jss.setup(preset());

package/dist/collection/{stories → components/sqm-portal-register}/PortalRegister.stories.js RENAMED Viewed

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
-import { PortalRegisterView, } from "../components/sqm-portal-register/sqm-portal-register-view";
+import { PortalRegisterView, } from "./sqm-portal-register-view";
 export default {
-  title: "Portal Register",
+  title: "Components/Portal Register",
 };
 const defaultProps = {
   states: {