@saasquatch/mint-components 1.5.0-8 → 1.5.0-80

package/dist/collection/components/sqm-leaderboard/Leaderboard.stories.js

@@ -2,17 +2,25 @@ import { h } from "@stencil/core";
 import { LeaderboardView } from "./sqm-leaderboard-view";
 export default {
   title: "Components/Leaderboard",
-  parameters: {
-    tagname: "sqm-leaderboard",
-  },
 };
 const defaultStyles = {
   usersheading: "TOP REFERRERS",
   statsheading: "NEW TITANS",
 };
 const defaultElements = {
-  empty: h("div", null, "Empty"),
-  loadingstate: h("div", null, "Loading"),
+  empty: (h("slot", { name: "empty" },
+    h("sqm-portal-container", { padding: "xxxx-large", gap: "medium" },
+      h("sqm-image", { "image-url": "https://i.imgur.com/KPGnPF8.png", "max-width": "100px" }),
+      h("sqm-titled-section", { "label-margin": "xxx-small", "text-align": "center" },
+        h("sqm-text", { slot: "label" },
+          h("h3", null, "View your rank in the leaderboard")),
+        h("sqm-text", { slot: "content" }, "Be the first to refer a friend and reach the top of the leaderboard"))))),
+  loadingstate: (h("slot", { name: "loading" },
+    h("table", null, [...Array(10)].map(() => {
+      return (h("tr", null,
+        h("td", null,
+          h("sl-skeleton", null))));
+    })))),
 };
 export const Empty = () => {
   const props = {
@@ -26,6 +34,14 @@ export const Empty = () => {
     data: {
       rankType: "rowNumber",
       leaderboard: [],
+      showUser: true,
+      userRank: {
+        firstName: "Kutay",
+        lastInitial: "C",
+        value: 8,
+        rowNumber: 11,
+        rank: 23,
+      },
     },
     elements: {
       ...defaultElements,
@@ -64,7 +80,13 @@ export const One = () => {
     data: {
       rankType: "rowNumber",
       leaderboard: [
-        { firstName: "Viktor", lastInitial: "V", value: 82, rank: 1 },
+        {
+          firstName: "Viktor",
+          lastInitial: "V",
+          value: 82,
+          rank: 1,
+          rowNumber: 1,
+        },
       ],
     },
     elements: {
@@ -85,12 +107,504 @@ export const Five = () => {
     data: {
       rankType: "rowNumber",
       leaderboard: [
-        { firstName: "Viktor", lastInitial: "V", value: 82, rank: 1 },
-        { firstName: "MF", lastInitial: "D", value: 73, rank: 2 },
-        { firstName: "Freddie", lastInitial: "G", value: 64, rank: 3 },
-        { firstName: "Benny", lastInitial: "B", value: 55, rank: 4 },
-        { firstName: "Mos", lastInitial: "D", value: 46, rank: 5 },
+        {
+          firstName: "Viktor",
+          lastInitial: "V",
+          value: 82,
+          rank: 1,
+          rowNumber: 1,
+        },
+        { firstName: "MF", lastInitial: "D", value: 73, rank: 2, rowNumber: 2 },
+        {
+          firstName: "Freddie",
+          lastInitial: "G",
+          value: 64,
+          rank: 3,
+          rowNumber: 3,
+        },
+        {
+          firstName: "Benny",
+          lastInitial: "B",
+          value: 55,
+          rank: 4,
+          rowNumber: 4,
+        },
+        {
+          firstName: "Mos",
+          lastInitial: "D",
+          value: 46,
+          rank: 5,
+          rowNumber: 5,
+        },
+      ],
+    },
+    elements: {
+      ...defaultElements,
+    },
+  };
+  return h(LeaderboardView, Object.assign({}, props));
+};
+export const FiveWithRank = () => {
+  const props = {
+    states: {
+      loading: false,
+      hasLeaders: true,
+      styles: {
+        rankheading: "Rank",
+        usersheading: "User",
+        statsheading: "Referrals",
+        showRank: true,
+      },
+    },
+    data: {
+      rankType: "rowNumber",
+      leaderboard: [
+        {
+          firstName: "Viktor",
+          lastInitial: "V",
+          value: 82,
+          rank: 1,
+          rowNumber: 1,
+        },
+        { firstName: "MF", lastInitial: "D", value: 73, rank: 2, rowNumber: 2 },
+        {
+          firstName: "Freddie",
+          lastInitial: "G",
+          value: 64,
+          rank: 3,
+          rowNumber: 3,
+        },
+        {
+          firstName: "Benny",
+          lastInitial: "B",
+          value: 55,
+          rank: 4,
+          rowNumber: 4,
+        },
+        {
+          firstName: "Mos",
+          lastInitial: "D",
+          value: 46,
+          rank: 5,
+          rowNumber: 5,
+        },
+      ],
+    },
+    elements: {
+      ...defaultElements,
+    },
+  };
+  return h(LeaderboardView, Object.assign({}, props));
+};
+export const Ten = () => {
+  const props = {
+    states: {
+      loading: false,
+      hasLeaders: true,
+      styles: {
+        rankheading: "Rank",
+        usersheading: "User",
+        statsheading: "Referrals",
+        showRank: false,
+      },
+    },
+    data: {
+      rankType: "rowNumber",
+      leaderboard: [
+        {
+          firstName: "Viktor",
+          lastInitial: "V",
+          value: 82,
+          rank: 1,
+          rowNumber: 1,
+        },
+        { firstName: "MF", lastInitial: "D", value: 73, rank: 2, rowNumber: 2 },
+        {
+          firstName: "Freddie",
+          lastInitial: "G",
+          value: 64,
+          rank: 3,
+          rowNumber: 3,
+        },
+        {
+          firstName: "Benny",
+          lastInitial: "B",
+          value: 55,
+          rank: 4,
+          rowNumber: 4,
+        },
+        {
+          firstName: "Mos",
+          lastInitial: "D",
+          value: 46,
+          rank: 5,
+          rowNumber: 5,
+        },
+        {
+          firstName: "Joe",
+          lastInitial: "S",
+          value: 42,
+          rank: 6,
+          rowNumber: 6,
+        },
+        {
+          firstName: "Zach",
+          lastInitial: "H",
+          value: 41,
+          rank: 7,
+          rowNumber: 7,
+        },
+        {
+          firstName: "Sarah",
+          lastInitial: "S",
+          value: 39,
+          rank: 8,
+          rowNumber: 8,
+        },
+        {
+          firstName: "James",
+          lastInitial: "N",
+          value: 33,
+          rank: 9,
+          rowNumber: 9,
+        },
+        {
+          firstName: "Fahim",
+          lastInitial: "J",
+          value: 29,
+          rank: 10,
+          rowNumber: 10,
+        },
+      ],
+    },
+    elements: {
+      ...defaultElements,
+    },
+  };
+  return h(LeaderboardView, Object.assign({}, props));
+};
+export const TenWithRank = () => {
+  const props = {
+    states: {
+      loading: false,
+      hasLeaders: true,
+      styles: {
+        rankheading: "Rank",
+        usersheading: "User",
+        statsheading: "Referrals",
+        showRank: true,
+      },
+    },
+    data: {
+      rankType: "rowNumber",
+      leaderboard: [
+        {
+          firstName: "Viktor",
+          lastInitial: "V",
+          value: 82,
+          rank: 1,
+          rowNumber: 1,
+        },
+        { firstName: "MF", lastInitial: "D", value: 73, rank: 2, rowNumber: 2 },
+        {
+          firstName: "Freddie",
+          lastInitial: "G",
+          value: 64,
+          rank: 3,
+          rowNumber: 3,
+        },
+        {
+          firstName: "Benny",
+          lastInitial: "B",
+          value: 55,
+          rank: 4,
+          rowNumber: 4,
+        },
+        {
+          firstName: "Mos",
+          lastInitial: "D",
+          value: 46,
+          rank: 5,
+          rowNumber: 5,
+        },
+        {
+          firstName: "Joe",
+          lastInitial: "S",
+          value: 42,
+          rank: 6,
+          rowNumber: 6,
+        },
+        {
+          firstName: "Zach",
+          lastInitial: "H",
+          value: 41,
+          rank: 7,
+          rowNumber: 7,
+        },
+        {
+          firstName: "Sarah",
+          lastInitial: "S",
+          value: 39,
+          rank: 8,
+          rowNumber: 8,
+        },
+        {
+          firstName: "James",
+          lastInitial: "N",
+          value: 33,
+          rank: 9,
+          rowNumber: 9,
+        },
+        {
+          firstName: "Fahim",
+          lastInitial: "J",
+          value: 29,
+          rank: 10,
+          rowNumber: 10,
+        },
+      ],
+    },
+    elements: {
+      ...defaultElements,
+    },
+  };
+  return h(LeaderboardView, Object.assign({}, props));
+};
+export const UserInList = () => {
+  const props = {
+    states: {
+      loading: false,
+      hasLeaders: true,
+      styles: {
+        rankheading: "Rank",
+        usersheading: "User",
+        statsheading: "Referrals",
+        showRank: true,
+      },
+    },
+    data: {
+      rankType: "rowNumber",
+      leaderboard: [
+        {
+          firstName: "Viktor",
+          lastInitial: "V",
+          value: 82,
+          rank: 1,
+          rowNumber: 1,
+        },
+        { firstName: "MF", lastInitial: "D", value: 73, rank: 2, rowNumber: 2 },
+        {
+          firstName: "Freddie",
+          lastInitial: "G",
+          value: 64,
+          rank: 3,
+          rowNumber: 3,
+        },
+        {
+          firstName: "Benny",
+          lastInitial: "B",
+          value: 55,
+          rank: 4,
+          rowNumber: 4,
+        },
+        {
+          firstName: "Mos",
+          lastInitial: "D",
+          value: 46,
+          rank: 5,
+          rowNumber: 5,
+        },
+        {
+          firstName: "Joe",
+          lastInitial: "S",
+          value: 42,
+          rank: 6,
+          rowNumber: 6,
+        },
+        {
+          firstName: "Zach",
+          lastInitial: "H",
+          value: 41,
+          rank: 7,
+          rowNumber: 7,
+        },
+        {
+          firstName: "Sarah",
+          lastInitial: "S",
+          value: 39,
+          rank: 8,
+          rowNumber: 8,
+        },
+        {
+          firstName: "James",
+          lastInitial: "N",
+          value: 33,
+          rank: 9,
+          rowNumber: 9,
+        },
+        {
+          firstName: "Fahim",
+          lastInitial: "J",
+          value: 29,
+          rank: 10,
+          rowNumber: 10,
+        },
+      ],
+      showUser: true,
+      userRank: {
+        firstName: "Viktor",
+        lastInitial: "V",
+        value: 82,
+        rowNumber: 1,
+        rank: 1,
+      },
+    },
+    elements: {
+      ...defaultElements,
+    },
+  };
+  return h(LeaderboardView, Object.assign({}, props));
+};
+export const UserOutside = () => {
+  const props = {
+    states: {
+      loading: false,
+      hasLeaders: true,
+      styles: {
+        rankheading: "Rank",
+        usersheading: "User",
+        statsheading: "Referrals",
+        showRank: true,
+      },
+    },
+    data: {
+      rankType: "rowNumber",
+      leaderboard: [
+        {
+          firstName: "Viktor",
+          lastInitial: "V",
+          value: 82,
+          rank: 1,
+          rowNumber: 1,
+        },
+        { firstName: "MF", lastInitial: "D", value: 73, rank: 2, rowNumber: 2 },
+        {
+          firstName: "Freddie",
+          lastInitial: "G",
+          value: 64,
+          rank: 3,
+          rowNumber: 3,
+        },
+        {
+          firstName: "Benny",
+          lastInitial: "B",
+          value: 55,
+          rank: 4,
+          rowNumber: 4,
+        },
+        {
+          firstName: "Mos",
+          lastInitial: "D",
+          value: 46,
+          rank: 5,
+          rowNumber: 5,
+        },
+        {
+          firstName: "Joe",
+          lastInitial: "S",
+          value: 42,
+          rank: 6,
+          rowNumber: 6,
+        },
+        {
+          firstName: "Zach",
+          lastInitial: "H",
+          value: 41,
+          rank: 7,
+          rowNumber: 7,
+        },
+        {
+          firstName: "Sarah",
+          lastInitial: "S",
+          value: 39,
+          rank: 8,
+          rowNumber: 8,
+        },
+        {
+          firstName: "James",
+          lastInitial: "N",
+          value: 33,
+          rank: 9,
+          rowNumber: 9,
+        },
+        {
+          firstName: "Fahim",
+          lastInitial: "J",
+          value: 29,
+          rank: 10,
+          rowNumber: 10,
+        },
+      ],
+      showUser: true,
+      userRank: {
+        firstName: "Kutay",
+        lastInitial: "C",
+        value: 8,
+        rowNumber: 11,
+        rank: 23,
+      },
+    },
+    elements: {
+      ...defaultElements,
+    },
+  };
+  return h(LeaderboardView, Object.assign({}, props));
+};
+export const UserEmpty = () => {
+  const props = {
+    states: {
+      loading: false,
+      hasLeaders: true,
+      styles: {
+        rankheading: "Rank",
+        usersheading: "User",
+        statsheading: "Referrals",
+        showRank: true,
+      },
+    },
+    data: {
+      rankType: "rowNumber",
+      leaderboard: [
+        {
+          firstName: "Firstname",
+          lastInitial: null,
+          value: 82,
+          rank: 1,
+          rowNumber: 1,
+        },
+        {
+          firstName: null,
+          lastInitial: "Lastname",
+          value: 73,
+          rank: 2,
+          rowNumber: 2,
+        },
+        {
+          firstName: null,
+          lastInitial: null,
+          value: 64,
+          rank: 3,
+          rowNumber: 3,
+        },
       ],
+      showUser: true,
+      userRank: {
+        firstName: null,
+        lastInitial: null,
+        value: null,
+        rowNumber: null,
+        rank: null,
+      },
     },
     elements: {
       ...defaultElements,

package/dist/collection/components/sqm-leaderboard/UseLeaderboard.stories.js

@@ -1,9 +1,8 @@
 import { h } from "@stencil/core";
 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";
+import { getProps } from "../../utils/utils";
 export default {
   title: "Hooks / useLeaderboard",
 };
@@ -29,6 +28,30 @@ function setupGraphQL() {
     };
   }, []);
 }
+function setupOtherGraphQL() {
+  const id = "sam+klip@saasquat.ch";
+  const accountId = id;
+  const programId = "klip-referral-program";
+  const JWT = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImFjY291bnRJZCI6InNhbStrbGlwQHNhYXNxdWF0LmNoIiwiaWQiOiJzYW0ra2xpcEBzYWFzcXVhdC5jaCIsImVtYWlsIjoic2FtK2tsaXBAc2Fhc3F1YXQuY2giLCJsb2NhbGUiOiJlbiJ9fQ.a2nYYrSJ81FHXlCU-Sqp_-wquQizinHBhzwzULDzimg";
+  //@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 };
+}
 const View = (overrideProps) => {
   const props = {
     leaderboardType: "topConvertedReferrers",
@@ -37,14 +60,13 @@ const View = (overrideProps) => {
     usersheading: "Top Referrers",
     statsheading: "Completed Referrals",
     interval: "",
-    empty: h("span", null, "No Referrals"),
-    loadingstate: h("span", null, "Loading"),
+    // empty: <span>No Referrals</span>,
+    // loadingstate: <span>Loading</span>,
     ...overrideProps,
   };
   const { leaderboardType, rankType } = props;
   console.log(`View("${leaderboardType}") - CALLED`);
-  setupGraphQL();
-  const { states, data, elements } = useLeaderboard(props);
+  overrideProps.setup();
   return (h("div", { style: { marginBottom: "20px" } },
     h("sqm-divided-layout", { direction: "row" },
       h("div", { style: { padding: "10px" } },
@@ -53,27 +75,59 @@ const View = (overrideProps) => {
       h("div", { style: { padding: "10px" } },
         h("b", null, "Rank Type"),
         h("pre", null, rankType))),
-    h(LeaderboardView, { states: states, data: data, elements: elements }),
+    h("sqm-leaderboard", Object.assign({}, getProps(props))),
     h("hr", null)));
 };
 export const TopConvertedReferrers = createHookStory(() => {
-  return [View(), View({ rankType: "rank" }), View({ rankType: "denseRank" })];
+  const setup = setupGraphQL;
+  return [
+    View({ setup }),
+    View({ rankType: "rank", setup }),
+    View({ rankType: "denseRank", setup }),
+  ];
 });
 export const TopStartedReferrers = createHookStory(() => {
+  const setup = setupGraphQL;
+  return [
+    View({
+      leaderboardType: "topStartedReferrers",
+      statsheading: "New Referrals",
+      setup,
+    }),
+    View({
+      leaderboardType: "topStartedReferrers",
+      rankType: "rank",
+      statsheading: "New Referrals",
+      setup,
+    }),
+    View({
+      leaderboardType: "topStartedReferrers",
+      rankType: "denseRank",
+      statsheading: "New Referrals",
+      setup,
+    }),
+  ];
+});
+export const EmptyLeaderboard = createHookStory(() => {
+  const setup = setupOtherGraphQL;
   return [
     View({
       leaderboardType: "topStartedReferrers",
       statsheading: "New Referrals",
+      setup,
     }),
     View({
       leaderboardType: "topStartedReferrers",
       rankType: "rank",
       statsheading: "New Referrals",
+      setup,
     }),
     View({
       leaderboardType: "topStartedReferrers",
       rankType: "denseRank",
       statsheading: "New Referrals",
+      interval: "2022-02-11T08:00:00.000Z/2022-02-13T08:00:00.000Z",
+      setup,
     }),
   ];
 });