@saasquatch/mint-components 1.5.1-1 → 1.5.2-0

package/dist/collection/components/sqm-edit-profile/useEditProfile.js

@@ -1,156 +1,156 @@
-import { useQuery, useMutation, useUserIdentity, } from "@saasquatch/component-boilerplate";
-import { gql } from "graphql-request";
-import { useEffect, useState } from "@saasquatch/universal-hooks";
-import { intl } from "../../global/global";
-const GET_USER = gql `
-  query {
-    viewer {
-      ... on User {
-        id
-        accountId
-        firstName
-        lastName
-        email
-        countryCode
-      }
-    }
-  }
-`;
-const UPSERT_USER = gql `
-  mutation (
-    $id: String!
-    $accountId: String!
-    $firstName: String!
-    $lastName: String!
-  ) {
-    upsertUser(
-      userInput: {
-        id: $id
-        accountId: $accountId
-        firstName: $firstName
-        lastName: $lastName
-      }
-    ) {
-      firstName
-      lastName
-    }
-  }
-`;
-// view doesn't tolerate undefined, even when we're loading
-const defaultFormState = {
-  currentRegion: "",
-  firstName: "",
-  lastName: "",
-  errors: {},
-  error: "",
-};
-export function useEditProfile(props) {
-  const userIdent = useUserIdentity();
-  const [showEdit, setShowEdit] = useState(false);
-  const [error, setError] = useState("");
-  const [userData, setUserData] = useState(undefined);
-  const [formState, setFormState] = useState(defaultFormState);
-  const userDataResponse = useQuery(GET_USER, {}, !(userIdent === null || userIdent === void 0 ? void 0 : userIdent.jwt));
-  const [upsertUser, upsertUserResponse] = useMutation(UPSERT_USER);
-  useEffect(() => {
-    if ((upsertUserResponse === null || upsertUserResponse === void 0 ? void 0 : upsertUserResponse.loading) || !showEdit)
-      return;
-    if (upsertUserResponse === null || upsertUserResponse === void 0 ? void 0 : upsertUserResponse.errors) {
-      setFormState((state) => {
-        var _a, _b, _c;
-        return ({
-          ...state,
-          error: (_c = (_b = (_a = upsertUserResponse === null || upsertUserResponse === void 0 ? void 0 : upsertUserResponse.errors) === null || _a === void 0 ? void 0 : _a.response) === null || _b === void 0 ? void 0 : _b.errors) === null || _c === void 0 ? void 0 : _c[0].message,
-        });
-      });
-    }
-    else {
-      setUserData((state) => {
-        var _a;
-        return ({
-          ...state,
-          ...(_a = upsertUserResponse === null || upsertUserResponse === void 0 ? void 0 : upsertUserResponse.data) === null || _a === void 0 ? void 0 : _a.upsertUser,
-        });
-      });
-      setShowEdit(false);
-    }
-  }, [upsertUserResponse === null || upsertUserResponse === void 0 ? void 0 : upsertUserResponse.loading]);
-  useEffect(() => {
-    setUserData((data) => { var _a; return ({ ...data, ...(_a = userDataResponse === null || userDataResponse === void 0 ? void 0 : userDataResponse.data) === null || _a === void 0 ? void 0 : _a.viewer }); });
-  }, [userDataResponse === null || userDataResponse === void 0 ? void 0 : userDataResponse.data]);
-  useEffect(() => {
-    var _a;
-    if ((_a = upsertUserResponse === null || upsertUserResponse === void 0 ? void 0 : upsertUserResponse.errors) === null || _a === void 0 ? void 0 : _a.message) {
-      setFormState((state) => ({ ...state, error: "Network request failed." }));
-    }
-  }, [upsertUserResponse === null || upsertUserResponse === void 0 ? void 0 : upsertUserResponse.errors]);
-  return {
-    states: {
-      loading: (userDataResponse === null || userDataResponse === void 0 ? void 0 : userDataResponse.loading) || upsertUserResponse.loading,
-      submitDisabled: false,
-      formState,
-      user: userData,
-      showEdit,
-      text: {
-        editprofileheader: props.editprofileheader,
-        editprofiletext: props.editprofiletext,
-        firstnametext: props.firstnametext,
-        lastnametext: props.lastnametext,
-        canceltext: props.canceltext,
-        updatetext: props.updatetext,
-        currentregiontext: props.currentregiontext,
-        showregion: props.showregion,
-      },
-    },
-    callbacks: {
-      onSubmit: () => {
-        if (formState.firstName && formState.lastName) {
-          upsertUser({
-            id: userIdent === null || userIdent === void 0 ? void 0 : userIdent.id,
-            accountId: userIdent === null || userIdent === void 0 ? void 0 : userIdent.accountId,
-            firstName: formState.firstName,
-            lastName: formState.lastName,
-          });
-          setFormState((s) => ({ ...s, errors: {} }));
-          return;
-        }
-        const errors = {};
-        if (!formState.firstName) {
-          errors["firstName"] = { message: "Field can't be empty" };
-        }
-        if (!formState.lastName) {
-          errors["lastName"] = { message: "Field can't be empty" };
-        }
-        if (errors !== {}) {
-          setFormState((e) => ({
-            ...e,
-            error: "Please correct the errors below to update your profile.",
-          }));
-        }
-        setFormState((e) => ({ ...e, errors }));
-      },
-      resetForm: () => {
-        var _a, _b, _c, _d, _e, _f;
-        const currentRegion = ((_b = (_a = userDataResponse === null || userDataResponse === void 0 ? void 0 : userDataResponse.data) === null || _a === void 0 ? void 0 : _a.viewer) === null || _b === void 0 ? void 0 : _b.countryCode) ? intl.formatDisplayName(userDataResponse.data.viewer.countryCode, {
-          type: "region",
-        })
-          : "";
-        setUserData({
-          ...(_c = userDataResponse.data) === null || _c === void 0 ? void 0 : _c.viewer,
-          ...(_d = upsertUserResponse.data) === null || _d === void 0 ? void 0 : _d.upsertUser,
-        });
-        setFormState({
-          ...defaultFormState,
-          ...(_e = userDataResponse.data) === null || _e === void 0 ? void 0 : _e.viewer,
-          ...(_f = upsertUserResponse.data) === null || _f === void 0 ? void 0 : _f.upsertUser,
-          currentRegion,
-        });
-      },
-      onChange: (e) => {
-        const { name, value } = e.target;
-        setFormState((data) => ({ ...data, [name]: value }));
-      },
-      setShowEdit,
-    },
-  };
-}
+import { useQuery, useMutation, useUserIdentity, } from "@saasquatch/component-boilerplate";
+import { gql } from "graphql-request";
+import { useEffect, useState } from "@saasquatch/universal-hooks";
+import { intl } from "../../global/global";
+const GET_USER = gql `
+  query {
+    viewer {
+      ... on User {
+        id
+        accountId
+        firstName
+        lastName
+        email
+        countryCode
+      }
+    }
+  }
+`;
+const UPSERT_USER = gql `
+  mutation (
+    $id: String!
+    $accountId: String!
+    $firstName: String!
+    $lastName: String!
+  ) {
+    upsertUser(
+      userInput: {
+        id: $id
+        accountId: $accountId
+        firstName: $firstName
+        lastName: $lastName
+      }
+    ) {
+      firstName
+      lastName
+    }
+  }
+`;
+// view doesn't tolerate undefined, even when we're loading
+const defaultFormState = {
+  currentRegion: "",
+  firstName: "",
+  lastName: "",
+  errors: {},
+  error: "",
+};
+export function useEditProfile(props) {
+  const userIdent = useUserIdentity();
+  const [showEdit, setShowEdit] = useState(false);
+  const [error, setError] = useState("");
+  const [userData, setUserData] = useState(undefined);
+  const [formState, setFormState] = useState(defaultFormState);
+  const userDataResponse = useQuery(GET_USER, {}, !(userIdent === null || userIdent === void 0 ? void 0 : userIdent.jwt));
+  const [upsertUser, upsertUserResponse] = useMutation(UPSERT_USER);
+  useEffect(() => {
+    if ((upsertUserResponse === null || upsertUserResponse === void 0 ? void 0 : upsertUserResponse.loading) || !showEdit)
+      return;
+    if (upsertUserResponse === null || upsertUserResponse === void 0 ? void 0 : upsertUserResponse.errors) {
+      setFormState((state) => {
+        var _a, _b, _c;
+        return ({
+          ...state,
+          error: (_c = (_b = (_a = upsertUserResponse === null || upsertUserResponse === void 0 ? void 0 : upsertUserResponse.errors) === null || _a === void 0 ? void 0 : _a.response) === null || _b === void 0 ? void 0 : _b.errors) === null || _c === void 0 ? void 0 : _c[0].message,
+        });
+      });
+    }
+    else {
+      setUserData((state) => {
+        var _a;
+        return ({
+          ...state,
+          ...(_a = upsertUserResponse === null || upsertUserResponse === void 0 ? void 0 : upsertUserResponse.data) === null || _a === void 0 ? void 0 : _a.upsertUser,
+        });
+      });
+      setShowEdit(false);
+    }
+  }, [upsertUserResponse === null || upsertUserResponse === void 0 ? void 0 : upsertUserResponse.loading]);
+  useEffect(() => {
+    setUserData((data) => { var _a; return ({ ...data, ...(_a = userDataResponse === null || userDataResponse === void 0 ? void 0 : userDataResponse.data) === null || _a === void 0 ? void 0 : _a.viewer }); });
+  }, [userDataResponse === null || userDataResponse === void 0 ? void 0 : userDataResponse.data]);
+  useEffect(() => {
+    var _a;
+    if ((_a = upsertUserResponse === null || upsertUserResponse === void 0 ? void 0 : upsertUserResponse.errors) === null || _a === void 0 ? void 0 : _a.message) {
+      setFormState((state) => ({ ...state, error: "Network request failed." }));
+    }
+  }, [upsertUserResponse === null || upsertUserResponse === void 0 ? void 0 : upsertUserResponse.errors]);
+  return {
+    states: {
+      loading: (userDataResponse === null || userDataResponse === void 0 ? void 0 : userDataResponse.loading) || upsertUserResponse.loading,
+      submitDisabled: false,
+      formState,
+      user: userData,
+      showEdit,
+      text: {
+        editprofileheader: props.editprofileheader,
+        editprofiletext: props.editprofiletext,
+        firstnametext: props.firstnametext,
+        lastnametext: props.lastnametext,
+        canceltext: props.canceltext,
+        updatetext: props.updatetext,
+        currentregiontext: props.currentregiontext,
+        showregion: props.showregion,
+      },
+    },
+    callbacks: {
+      onSubmit: () => {
+        if (formState.firstName && formState.lastName) {
+          upsertUser({
+            id: userIdent === null || userIdent === void 0 ? void 0 : userIdent.id,
+            accountId: userIdent === null || userIdent === void 0 ? void 0 : userIdent.accountId,
+            firstName: formState.firstName,
+            lastName: formState.lastName,
+          });
+          setFormState((s) => ({ ...s, errors: {} }));
+          return;
+        }
+        const errors = {};
+        if (!formState.firstName) {
+          errors["firstName"] = { message: "Field can't be empty" };
+        }
+        if (!formState.lastName) {
+          errors["lastName"] = { message: "Field can't be empty" };
+        }
+        if (errors !== {}) {
+          setFormState((e) => ({
+            ...e,
+            error: "Please correct the errors below to update your profile.",
+          }));
+        }
+        setFormState((e) => ({ ...e, errors }));
+      },
+      resetForm: () => {
+        var _a, _b, _c, _d, _e, _f;
+        const currentRegion = ((_b = (_a = userDataResponse === null || userDataResponse === void 0 ? void 0 : userDataResponse.data) === null || _a === void 0 ? void 0 : _a.viewer) === null || _b === void 0 ? void 0 : _b.countryCode) ? intl.formatDisplayName(userDataResponse.data.viewer.countryCode, {
+          type: "region",
+        })
+          : "";
+        setUserData({
+          ...(_c = userDataResponse.data) === null || _c === void 0 ? void 0 : _c.viewer,
+          ...(_d = upsertUserResponse.data) === null || _d === void 0 ? void 0 : _d.upsertUser,
+        });
+        setFormState({
+          ...defaultFormState,
+          ...(_e = userDataResponse.data) === null || _e === void 0 ? void 0 : _e.viewer,
+          ...(_f = upsertUserResponse.data) === null || _f === void 0 ? void 0 : _f.upsertUser,
+          currentRegion,
+        });
+      },
+      onChange: (e) => {
+        const { name, value } = e.target;
+        setFormState((data) => ({ ...data, [name]: value }));
+      },
+      setShowEdit,
+    },
+  };
+}

package/dist/collection/components/sqm-empty/EmptyState.stories.js

@@ -1,52 +1,52 @@
-import { h } from "@stencil/core";
-import { LeaderboardView } from "../sqm-leaderboard/sqm-leaderboard-view";
-import scenario from "./sqm-empty.feature";
-export default {
-  title: "Components/Empty State",
-  parameters: {
-    scenario,
-  },
-};
-const defaultStyles = {
-  usersheading: "TOP REFERRERS",
-  statsheading: "NEW CUSTOMERS",
-};
-export const Empty = () => {
-  return (h("sqm-empty", { "empty-state-image": "https://res.cloudinary.com/saasquatch/image/upload/v1644360953/squatch-assets/empty_leaderboard2.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" }));
-};
-const defaultElements = {
-  empty: (h("sqm-empty", { "empty-state-image": "https://res.cloudinary.com/saasquatch/image/upload/v1644360953/squatch-assets/empty_leaderboard2.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 SlottedIntoComponent = () => {
-  const props = {
-    states: {
-      loading: false,
-      hasLeaders: false,
-      styles: {
-        ...defaultStyles,
-      },
-    },
-    data: {
-      rankType: "rowNumber",
-      leaderboard: [],
-      showUser: true,
-      userRank: {
-        firstName: "Kutay",
-        lastInitial: "C",
-        value: 8,
-        rowNumber: 11,
-        rank: 23,
-      },
-    },
-    elements: {
-      ...defaultElements,
-    },
-  };
-  return h(LeaderboardView, Object.assign({}, props));
-};
+import { h } from "@stencil/core";
+import { LeaderboardView } from "../sqm-leaderboard/sqm-leaderboard-view";
+import scenario from "./sqm-empty.feature";
+export default {
+  title: "Components/Empty State",
+  parameters: {
+    scenario,
+  },
+};
+const defaultStyles = {
+  usersheading: "TOP REFERRERS",
+  statsheading: "NEW CUSTOMERS",
+};
+export const Empty = () => {
+  return (h("sqm-empty", { "empty-state-image": "https://res.cloudinary.com/saasquatch/image/upload/v1644360953/squatch-assets/empty_leaderboard2.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" }));
+};
+const defaultElements = {
+  empty: (h("sqm-empty", { "empty-state-image": "https://res.cloudinary.com/saasquatch/image/upload/v1644360953/squatch-assets/empty_leaderboard2.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 SlottedIntoComponent = () => {
+  const props = {
+    states: {
+      loading: false,
+      hasLeaders: false,
+      styles: {
+        ...defaultStyles,
+      },
+    },
+    data: {
+      rankType: "rowNumber",
+      leaderboard: [],
+      showUser: true,
+      userRank: {
+        firstName: "Kutay",
+        lastInitial: "C",
+        value: 8,
+        rowNumber: 11,
+        rank: 23,
+      },
+    },
+    elements: {
+      ...defaultElements,
+    },
+  };
+  return h(LeaderboardView, Object.assign({}, props));
+};

package/dist/collection/components/sqm-empty/sqm-empty-view.js

@@ -1,10 +1,10 @@
-import { h } from "@stencil/core";
-export function EmptyStateView(props) {
-  const { emptyStateHeader, emptyStateImage, emptyStateText } = props;
-  return (h("sqm-portal-container", { padding: "xxxx-large", gap: "medium" },
-    h("sqm-image", { "image-url": emptyStateImage }),
-    h("sqm-titled-section", { "label-margin": "xxx-small", "text-align": "center" },
-      h("sqm-text", { slot: "label" },
-        h("h4", null, emptyStateHeader)),
-      h("sqm-text", { slot: "content" }, emptyStateText))));
-}
+import { h } from "@stencil/core";
+export function EmptyStateView(props) {
+  const { emptyStateHeader, emptyStateImage, emptyStateText } = props;
+  return (h("sqm-portal-container", { padding: "xxxx-large", gap: "medium" },
+    h("sqm-image", { "image-url": emptyStateImage }),
+    h("sqm-titled-section", { "label-margin": "xxx-small", "text-align": "center" },
+      h("sqm-text", { slot: "label" },
+        h("h4", null, emptyStateHeader)),
+      h("sqm-text", { slot: "content" }, emptyStateText))));
+}

package/dist/collection/components/sqm-empty/sqm-empty.js

@@ -1,78 +1,78 @@
-import { Component, h, Host, Prop } from "@stencil/core";
-import { EmptyStateView } from "./sqm-empty-view";
-/**
- * @uiName Empty State Content
- */
-export class HeroImage {
-  render() {
-    return (h(Host, { slot: "empty" },
-      h(EmptyStateView, { emptyStateImage: this.emptyStateImage, emptyStateHeader: this.emptyStateHeader, emptyStateText: this.emptyStateText })));
-  }
-  static get is() { return "sqm-empty"; }
-  static get encapsulation() { return "shadow"; }
-  static get properties() { return {
-    "emptyStateImage": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "text": "ImageUpload",
-            "name": "uiWidget"
-          }, {
-            "text": "Empty State Image Link",
-            "name": "uiName"
-          }],
-        "text": ""
-      },
-      "attribute": "empty-state-image",
-      "reflect": false
-    },
-    "emptyStateHeader": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "text": "Empty State Title",
-            "name": "uiName"
-          }],
-        "text": ""
-      },
-      "attribute": "empty-state-header",
-      "reflect": false
-    },
-    "emptyStateText": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "text": "Empty State Text",
-            "name": "uiName"
-          }],
-        "text": ""
-      },
-      "attribute": "empty-state-text",
-      "reflect": false
-    }
-  }; }
-}
+import { Component, h, Host, Prop } from "@stencil/core";
+import { EmptyStateView } from "./sqm-empty-view";
+/**
+ * @uiName Empty State Content
+ */
+export class HeroImage {
+  render() {
+    return (h(Host, { slot: "empty" },
+      h(EmptyStateView, { emptyStateImage: this.emptyStateImage, emptyStateHeader: this.emptyStateHeader, emptyStateText: this.emptyStateText })));
+  }
+  static get is() { return "sqm-empty"; }
+  static get encapsulation() { return "shadow"; }
+  static get properties() { return {
+    "emptyStateImage": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "ImageUpload",
+            "name": "uiWidget"
+          }, {
+            "text": "Empty State Image Link",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "empty-state-image",
+      "reflect": false
+    },
+    "emptyStateHeader": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Empty State Title",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "empty-state-header",
+      "reflect": false
+    },
+    "emptyStateText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Empty State Text",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "empty-state-text",
+      "reflect": false
+    }
+  }; }
+}

package/dist/collection/components/sqm-form-message/FormMessage.stories.js

@@ -1,28 +1,28 @@
-import { h } from "@stencil/core";
-export default {
-  title: "Components/Form Message",
-};
-export const SuccessAlert = () => {
-  return (h("sqm-form-message", { type: "success" },
-    h("div", null, "This is a success message.")));
-};
-export const ErrorAlert = () => {
-  return (h("sqm-form-message", { type: "error" },
-    h("div", null, "This is an error message")));
-};
-export const InfoAlert = () => {
-  return (h("sqm-form-message", { type: "info" },
-    h("div", null, "This is an info message")));
-};
-export const FullStackSuccess = () => {
-  return (h("sqm-form-message", { type: "success", exportparts: "successalert-icon" },
-    h("div", { class: "AlertContent" },
-      h("div", { part: "successalert-text" }, "Title"),
-      h("div", { part: "successalert-subtext" }, "Body text."),
-      h("sl-button", { type: "default", exportparts: "base: defaultbutton-base", onClick: () => {
-          console.log("click");
-        } }, "Primary Action"),
-      h("sl-button", { class: "SecondaryTextButton", type: "text", onClick: () => {
-          console.log("click");
-        } }, "Secondary Action"))));
-};
+import { h } from "@stencil/core";
+export default {
+  title: "Components/Form Message",
+};
+export const SuccessAlert = () => {
+  return (h("sqm-form-message", { type: "success" },
+    h("div", null, "This is a success message.")));
+};
+export const ErrorAlert = () => {
+  return (h("sqm-form-message", { type: "error" },
+    h("div", null, "This is an error message")));
+};
+export const InfoAlert = () => {
+  return (h("sqm-form-message", { type: "info" },
+    h("div", null, "This is an info message")));
+};
+export const FullStackSuccess = () => {
+  return (h("sqm-form-message", { type: "success", exportparts: "successalert-icon" },
+    h("div", { class: "AlertContent" },
+      h("div", { part: "successalert-text" }, "Title"),
+      h("div", { part: "successalert-subtext" }, "Body text."),
+      h("sl-button", { type: "default", exportparts: "base: defaultbutton-base", onClick: () => {
+          console.log("click");
+        } }, "Primary Action"),
+      h("sl-button", { class: "SecondaryTextButton", type: "text", onClick: () => {
+          console.log("click");
+        } }, "Secondary Action"))));
+};