@saasquatch/mint-components 1.3.3-5 → 1.3.3-6

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

@@ -1,58 +1,65 @@
-import { h } from "@stencil/core";
-import { BigStatView } from "../components/sqm-big-stat/sqm-big-stat-view";
-export default {
-  title: "Big Stat",
-};
-export const Default = () => {
-  const props = { statvalue: "9.900,00" };
-  return h(BigStatView, Object.assign({}, props), "Big stat");
-};
-export const LeftAlign = () => {
-  const props = {
-    statvalue: "500",
-    alignment: "left",
-  };
-  return h(BigStatView, Object.assign({}, props), "Big stat");
-};
-export const RightAlign = () => {
-  const props = {
-    statvalue: "500",
-    alignment: "right",
-  };
-  return h(BigStatView, Object.assign({}, props), "Big stat");
-};
-export const FlexReverse = () => {
-  const props = {
-    statvalue: "500",
-    flexReverse: true,
-  };
-  return h(BigStatView, Object.assign({}, props), "Big stat");
-};
-export const FlexReverseRight = () => {
-  const props = {
-    statvalue: "500",
-    flexReverse: true,
-    alignment: "right",
-  };
-  return h(BigStatView, Object.assign({}, props), "Big stat");
-};
-export const FlexReverseLeft = () => {
-  const props = {
-    statvalue: "500",
-    flexReverse: true,
-    alignment: "left",
-  };
-  return h(BigStatView, Object.assign({}, props), "Big stat");
-};
-export const NoStatValue = () => {
-  const props = {
-    statvalue: "...",
-  };
-  return h(BigStatView, Object.assign({}, props), "Big stat");
-};
-export const InvalidStatValue = () => {
-  const props = {
-    statvalue: "!!!",
-  };
-  return h(BigStatView, Object.assign({}, props), "Big stat");
-};
+import { h } from "@stencil/core";
+import { BigStatView } from "./sqm-big-stat-view";
+export default {
+  title: "Components/Big Stat",
+};
+export const Default = () => {
+  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",
+  };
+  return h(BigStatView, Object.assign({}, props), "Big stat");
+};
+export const RightAlign = () => {
+  const props = {
+    value: 500,
+    statvalue: "500",
+    alignment: "right",
+  };
+  return h(BigStatView, Object.assign({}, props), "Big stat");
+};
+export const FlexReverse = () => {
+  const props = {
+    value: 500,
+    statvalue: "500",
+    flexReverse: true,
+  };
+  return h(BigStatView, Object.assign({}, props), "Big stat");
+};
+export const FlexReverseRight = () => {
+  const props = {
+    value: 500,
+    statvalue: "500",
+    flexReverse: true,
+    alignment: "right",
+  };
+  return h(BigStatView, Object.assign({}, props), "Big stat");
+};
+export const FlexReverseLeft = () => {
+  const props = {
+    value: 500,
+    statvalue: "500",
+    flexReverse: true,
+    alignment: "left",
+  };
+  return h(BigStatView, Object.assign({}, props), "Big stat");
+};
+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

@@ -1,105 +1,108 @@
-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 { useState } from "@saasquatch/stencil-hooks";
-import { createHookStory } from "../components/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) => {
-  console.log(`View("${statType}") - CALLED`);
-  setupGraphQL();
-  const { props, label } = useBigStat({
-    statType,
-    render: () => { },
-    disconnectedCallback: () => { },
-    ignored: true,
-  });
-  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(BigStatView, Object.assign({}, props), 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");
-});
+import { h } from "@stencil/core";
+import { BigStatView } from "./sqm-big-stat-view";
+import { useDemoBigStat } from "./useDemoBigStat";
+import { useBigStat } from "./useBigStat";
+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) => {
+  console.log(`View("${statType}") - CALLED`);
+  setupGraphQL();
+  const { props, label } = useBigStat({
+    statType,
+    render: () => { },
+    disconnectedCallback: () => { },
+    ignored: true,
+  });
+  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(BigStatView, Object.assign({}, props), 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");
+});

package/dist/collection/components/sqm-big-stat/sqm-big-stat-view.js

@@ -1,37 +1,37 @@
-import { h } from "@stencil/core";
-import jss from "jss";
-import preset from "jss-preset-default";
-export function BigStatView(props, children) {
-  const { statvalue, flexReverse, alignment } = props;
-  const style = {
-    Container: {
-      display: "flex",
-      height: "inherit",
-      "justify-content": "space-between",
-      "flex-direction": `${flexReverse ? "column-reverse" : "column"}`,
-      "align-items": `${alignment === "left"
-        ? "flex-start"
-        : alignment === "right"
-          ? "flex-end"
-          : "center"}`,
-    },
-    Stat: {
-      "font-size": "var(--sl-font-size-x-large)",
-      "text-align": alignment,
-    },
-    Description: {
-      "font-size": "var(--sl-font-size-small)",
-      "font-weight": "var(--sl-font-weight-normal)",
-      color: "var(--sl-color-gray-600)",
-      "text-transform": "uppercase",
-      "text-align": alignment,
-    },
-  };
-  jss.setup(preset());
-  const sheet = jss.createStyleSheet(style);
-  const styleString = sheet.toString();
-  return (h("div", { part: "stat-wrapper", class: sheet.classes.Container },
-    h("style", { type: "text/css" }, styleString),
-    h("div", { part: "stat-value", class: sheet.classes.Stat }, statvalue),
-    h("div", { part: "stat-description", class: sheet.classes.Description }, children)));
-}
+import { h } from "@stencil/core";
+import jss from "jss";
+import preset from "jss-preset-default";
+export function BigStatView(props, children) {
+  const { statvalue, flexReverse, alignment } = props;
+  const style = {
+    Container: {
+      display: "flex",
+      height: "inherit",
+      "justify-content": "space-between",
+      "flex-direction": `${flexReverse ? "column-reverse" : "column"}`,
+      "align-items": `${alignment === "left"
+        ? "flex-start"
+        : alignment === "right"
+          ? "flex-end"
+          : "center"}`,
+    },
+    Stat: {
+      "font-size": "var(--sl-font-size-x-large)",
+      "text-align": alignment,
+    },
+    Description: {
+      "font-size": "var(--sl-font-size-small)",
+      "font-weight": "var(--sl-font-weight-normal)",
+      color: "var(--sl-color-gray-600)",
+      "text-transform": "uppercase",
+      "text-align": alignment,
+    },
+  };
+  jss.setup(preset());
+  const sheet = jss.createStyleSheet(style);
+  const styleString = sheet.toString();
+  return (h("div", { part: "stat-wrapper", class: sheet.classes.Container },
+    h("style", { type: "text/css" }, styleString),
+    h("div", { part: "stat-value", class: sheet.classes.Stat }, statvalue),
+    h("div", { part: "stat-description", class: sheet.classes.Description }, children)));
+}