@saasquatch/mint-components 1.5.0-0 → 1.5.0-101

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

@@ -1,9 +1,10 @@
 import { h } from "@stencil/core";
 import { LeaderboardView } from "./sqm-leaderboard-view";
+import scenario from "./leaderboard.feature";
 export default {
   title: "Components/Leaderboard",
   parameters: {
-    tagname: "sqm-leaderboard",
+    scenario,
   },
 };
 const defaultStyles = {
@@ -11,8 +12,13 @@ const defaultStyles = {
   statsheading: "NEW TITANS",
 };
 const defaultElements = {
-  empty: h("div", null, "Empty"),
-  loadingstate: h("div", null, "Loading"),
+  empty: (h("sqm-empty", { "empty-state-image": "https://res.cloudinary.com/saasquatch/image/upload/v1644000223/squatch-assets/empty_leaderboard.png", "empty-state-header": "View your rank in the leaderboard", "empty-state-text": "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 +32,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 +78,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 +105,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,7 +1,5 @@
 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";
 export default {
@@ -29,22 +27,44 @@ 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",
+    "leaderboard-type": "topConvertedReferrers",
     showRank: true,
-    rankType: "rowNumber",
+    "rank-type": "rowNumber",
     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);
+  console.log(`View("${leaderboardType}") - CALLED`, { ...props });
   return (h("div", { style: { marginBottom: "20px" } },
     h("sqm-divided-layout", { direction: "row" },
       h("div", { style: { padding: "10px" } },
@@ -53,27 +73,69 @@ 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({}, props),
+      h("sqm-empty", { "empty-state-image": "https://res.cloudinary.com/saasquatch/image/upload/v1644000223/squatch-assets/empty_leaderboard.png", "empty-state-header": "View your rank in the leaderboard", "empty-state-text": "Be the first to refer a friend and reach the top of the leaderboard" })),
     h("hr", null)));
 };
 export const TopConvertedReferrers = createHookStory(() => {
-  return [View(), View({ rankType: "rank" }), View({ rankType: "denseRank" })];
+  setupGraphQL();
+  return [
+    View({}),
+    View({ rankType: "rank" }),
+    View({ rankType: "denseRank" }),
+  ];
 });
 export const TopStartedReferrers = createHookStory(() => {
+  setupGraphQL();
+  return [
+    View({
+      leaderboardType: "topStartedReferrers",
+      statsheading: "New Referrals",
+    }),
+    View({
+      leaderboardType: "topStartedReferrers",
+      rankType: "rank",
+      statsheading: "New Referrals",
+    }),
+    View({
+      leaderboardType: "topStartedReferrers",
+      rankType: "denseRank",
+      statsheading: "New Referrals",
+    }),
+  ];
+});
+export const EmptyLeaderboard = createHookStory(() => {
+  setupOtherGraphQL();
   return [
     View({
       leaderboardType: "topStartedReferrers",
       statsheading: "New Referrals",
+      interval: "2021-02-11T08:00:00.000Z/2021-02-13T08:00:00.000Z",
     }),
     View({
       leaderboardType: "topStartedReferrers",
       rankType: "rank",
       statsheading: "New Referrals",
+      interval: "2021-02-11T08:00:00.000Z/2021-02-13T08:00:00.000Z",
     }),
     View({
       leaderboardType: "topStartedReferrers",
       rankType: "denseRank",
       statsheading: "New Referrals",
+      interval: "2021-02-11T08:00:00.000Z/2021-02-13T08:00:00.000Z",
     }),
   ];
 });
+export const DemoHook = createHookStory(() => {
+  return (h("sqm-leaderboard", { usersheading: "Referrer", statsheading: "Referrals", "rank-type": "rank", "leaderboard-type": "topStartedReferrers", rankheading: "Rank", "show-rank": "true" },
+    h("sqm-empty", { "empty-state-image": "https://res.cloudinary.com/saasquatch/image/upload/v1644000223/squatch-assets/empty_leaderboard.png", "empty-state-header": "View your rank in the leaderboard", "empty-state-text": "Be the first to refer a friend and reach the top of the leaderboard" })));
+});
+export const DemoHookEmpty = createHookStory(() => {
+  return (h("sqm-leaderboard", { usersheading: "Referrer", statsheading: "Referrals", "rank-type": "rank", "leaderboard-type": "topStartedReferrers", rankheading: "Rank", "show-rank": "true", demoData: {
+      data: {
+        rankType: "rank",
+        leaderboard: [],
+      },
+    } },
+    h("sqm-empty", { "empty-state-image": "https://res.cloudinary.com/saasquatch/image/upload/v1644000223/squatch-assets/empty_leaderboard.png", "empty-state-header": "View your rank in the leaderboard", "empty-state-text": "Be the first to refer a friend and reach the top of the leaderboard" })));
+});